/* =========================================================
   NINE16 PHOTOGRAPHY — design system
   Concept: a documentary wedding shooter's contact sheet.
   Every gallery frame carries sprocket holes and a stamped
   edge-code, the way a real negative strip would — because
   this brand's whole pitch is "unposed, unstaged, real".
   ========================================================= */

:root{
  /* --- color: sampled directly from the Nine16 logo (slate + mustard) --- */
  --bg:            #2c3640;   /* deep slate — primary page background */
  --bg-raised:     #3a4754;   /* card / raised surface */
  --bg-raised-2:   #445260;   /* lighter raised tone (frame gradient) */
  --header-slate:  #4b5b6b;   /* exact logo background — used on the header bar so the logo image blends with no visible edge */
  --paper:         #ffffff;   /* primary text — matches logo wordmark white */
  --paper-dim:     #b0bbc5;   /* secondary text */
  --paper-faint:   #86929e;   /* faint / decorative text */
  --mustard:       #ffd775;   /* exact logo yellow — primary accent */
  --mustard-deep:  #d6a334;   /* deeper gold — borders, subtle accents */
  --line:          #3a4754;
  --line-bright:   #4a5866;
  --shadow:        rgba(0,0,0,.45);

  /* --- type --- */
  --font-display: Arial, Helvetica, sans-serif;
  --font-body:    Arial, Helvetica, sans-serif;
  --font-mono:    Arial, Helvetica, sans-serif;

  --fs-2xl: clamp(2.75rem, 8vw, 6.75rem);
  --fs-xl:  clamp(2.1rem, 5.4vw, 3.75rem);
  --fs-lg:  clamp(1.5rem, 3.2vw, 2.25rem);
  --fs-md:  clamp(1.15rem, 1.8vw, 1.4rem);
  --fs-body-lg: 1.2rem;
  --fs-body: 1.0625rem;
  --fs-sm:  0.9rem;
  --fs-mono: 0.78rem;

  /* --- space --- */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.25rem;
  --sp-5: 3.5rem;
  --sp-6: 5.5rem;
  --sp-7: 8.5rem;

  --container: 1240px;
  --radius: 3px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* film grain, everywhere, quiet */
body::before{
  content:"";
  position: fixed; inset:0;
  z-index: 999;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4,p,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font: inherit; color: inherit; background:none; border:none; cursor:pointer; }
input,textarea,select{ font: inherit; color: inherit; }

::selection{ background: var(--mustard); color: var(--bg); }

:focus-visible{
  outline: 2px solid var(--mustard);
  outline-offset: 3px;
}

.container{
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: var(--sp-3);
}
@media (min-width:720px){ .container{ padding-inline: var(--sp-5); } }

.section{ padding-block: var(--sp-6); }
.section--tight{ padding-block: var(--sp-4); }
.section--raised{ background: var(--bg-raised); }
.section--border-top{ border-top:1px solid var(--line); }

/* =============== type utilities =============== */
.eyebrow{
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-dim);
  display:flex;
  align-items:center;
  gap: var(--sp-2);
}
.eyebrow::before{
  content:"";
  width: 22px; height:1px;
  background: var(--paper-dim);
  flex-shrink:0;
}
.eyebrow--rust{ color: var(--mustard); }
.eyebrow--rust::before{ background: var(--mustard); }

.display-2xl{ font-family: var(--font-display); font-weight:700; font-size: var(--fs-2xl); line-height:.98; letter-spacing:-.01em; color: var(--mustard); }
.display-xl{ font-family: var(--font-display); font-weight:700; font-size: var(--fs-xl); line-height:1.03; letter-spacing:-.01em; color: var(--mustard); }
.display-lg{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-lg); line-height:1.12; color: var(--mustard); }
.display-md{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-md); line-height:1.25; color: var(--mustard); }
.italic{ font-style: italic; }

.lede{ font-size: var(--fs-body-lg); color: var(--paper-dim); max-width: 46ch; }
.prose{ max-width: 62ch; color: var(--paper-dim); }
.prose a:not([class]),
.article-body a:not([class]),
.faq-item__a a:not([class]),
.legal-body a:not([class]){
  color: var(--mustard);
  text-decoration: underline;
  text-decoration-color: var(--mustard-deep);
  text-underline-offset: .15em;
}
.prose a:not([class]):hover,
.article-body a:not([class]):hover,
.faq-item__a a:not([class]):hover,
.legal-body a:not([class]):hover{
  color: var(--paper);
  text-decoration-color: currentColor;
}
.prose p + p{ margin-top: 1.1em; }
strong, b{ color: var(--mustard); font-weight:600; }

.mono-tag{
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing:.08em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.text-center{ text-align:center; }

/* =============== buttons =============== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding: .95em 1.6em;
  border-radius: var(--radius);
  transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn--primary{ background: var(--paper); color: var(--bg); }
.btn--primary:hover{ background: var(--mustard); color: var(--bg); }
.btn--ghost{ border:1px solid var(--line-bright); color: var(--paper); }
.btn--ghost:hover{ border-color: var(--paper); }
.btn--stamp{
  border: 2px solid var(--mustard-deep);
  color: var(--paper);
  position:relative;
}
.btn--stamp:hover{ border-color: var(--mustard); color: var(--mustard); }

.link-arrow{
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing:.06em;
  text-transform:uppercase;
  border-bottom:1px solid var(--line-bright);
  padding-bottom:.2em;
  transition: border-color .15s ease, color .15s ease;
}
.link-arrow:hover{ color: var(--mustard); border-color: var(--mustard); }

/* =============== nav =============== */
.site-header{
  position: fixed; top:0; left:0; right:0;
  z-index: 500;
  background: var(--header-slate);
  padding-block: var(--sp-3);
  transition: padding .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled{
  padding-block: var(--sp-2);
  box-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; }

.wordmark{ display:flex; align-items:center; }
.wordmark img{
  height: 76px;
  width: auto;
  display:block;
}

.nav-links{ display:flex; align-items:center; gap: var(--sp-4); }
.nav-links a{
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding-bottom:.2em;
  border-bottom:1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ border-color: currentColor; color: var(--mustard); }
.nav-links a[aria-current="page"]{ color: var(--paper); border-color: var(--mustard); }

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  min-width:44px;
  min-height:44px;
  padding:.5em;
  z-index: 600;
}
.nav-toggle span{ width:22px; height:2px; background: var(--paper); transition: transform .25s ease, opacity .25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 800px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position: fixed; inset:0;
    background: var(--bg);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding-inline: var(--sp-3);
    gap: var(--sp-3);
    transform: translateX(100%);
    transition: transform .3s ease;
  }
  .nav-links.is-open{ transform: translateX(0); }
  .nav-links a{ font-size: 1.1rem; }
}

/* generic centered hero section — used by thankyou.html / 404.html */
.hero{
  min-height: 100svh;
  display:flex;
  align-items:center;
  padding-block: calc(var(--sp-6) + 3rem) var(--sp-6);
  position:relative;
}

/* =============== hero: full-bleed banner, shown at its native ratio so nothing is ever cropped =============== */
.hero-banner{
  position:relative;
  width:100%;
  padding-top: 124px;
  overflow:hidden;
  background: var(--bg);
}
.hero-banner__media{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9; /* matches the source photo exactly — cover vs contain makes no difference at a matching ratio, so nothing is cropped */
}
.hero-banner__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.hero-banner__scrim{
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(20,25,29,.92) 0%, rgba(20,25,29,.55) 38%, rgba(20,25,29,.1) 68%, rgba(20,25,29,.05) 100%);
}
.hero-banner__sprockets{
  position:relative; z-index:2;
  height:14px;
  background-color: var(--bg);
  background-image: radial-gradient(circle at center, var(--header-slate) 2.5px, transparent 2.6px);
  background-size: 20px 14px;
  background-position: 10px center;
  background-repeat: repeat-x;
}
.hero-banner__overlay{
  position:absolute; left:0; right:0; bottom:0;
  z-index:2;
  padding-block: var(--sp-5) var(--sp-4);
}
.hero-banner__overlay .eyebrow{ color: var(--mustard); margin-bottom: var(--sp-2); }
.hero-banner__overlay .eyebrow::before{ background: var(--mustard); }
.hero-banner__overlay h1{ color: var(--mustard); text-shadow: 0 2px 24px rgba(0,0,0,.35); font-size: clamp(2rem, 5vw, 4.25rem); line-height: 1.08; }
.hero-banner__code{
  position:absolute; bottom: var(--sp-3); right: var(--sp-3);
  z-index:2;
  max-width: calc(100% - 3em);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--paper); background: rgba(20,22,15,.55); padding:.4em .7em; border-radius:2px;
}
/* the image itself keeps its exact 16:9 shape at every width so it's never cropped —
   at phone widths that band gets short, so only the overlaid TEXT scales down to still fit inside it */
@media (max-width: 480px){
  .hero-banner__overlay{ padding-block: var(--sp-2); }
  .hero-banner__overlay .eyebrow{ font-size:.68rem; margin-bottom: var(--sp-1); }
  .hero-banner__overlay h1{ font-size: 1.4rem; line-height: 1.1; }
  .hero-banner__code{ display:none; } /* first thing to drop when space is tight — the frame code is a nice-to-have, not essential */
}

.hero-intro{ padding-block: var(--sp-6); }
.hero-intro .lede{ margin-bottom: var(--sp-3); max-width: 56ch; }
.hero-intro .motto{ margin-bottom: var(--sp-4); }
.hero-actions{ display:flex; flex-wrap:wrap; gap: var(--sp-2); align-items:center; }

/* =============== contact-sheet frame component =============== */
.frame{
  position: relative;
  background: var(--bg-raised);
  border-radius: var(--radius);
  overflow:hidden;
}
.frame__sprockets{
  height:14px;
  background-color: var(--bg);
  background-image: radial-gradient(circle at center, var(--bg-raised) 2.5px, transparent 2.6px);
  background-size: 20px 14px;
  background-position: 10px center;
  background-repeat: repeat-x;
}
.frame__plate{
  position:relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, var(--bg-raised-2), var(--bg-raised));
  overflow:hidden;
}
.frame__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.frame__plate::before{
  content:"";
  position:absolute; inset:0;
  z-index:2;
  opacity:.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.frame__plate::after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background-color: rgba(20,22,15,.28);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='70' viewBox='0 0 160 70'%3E%3Cg fill='none' stroke='%2386929e' stroke-width='2'%3E%3Crect x='55' y='18' width='50' height='34' rx='3'/%3E%3Ccircle cx='80' cy='35' r='9'/%3E%3Crect x='72' y='12' width='16' height='7' rx='1'/%3E%3C/g%3E%3Ctext x='80' y='64' font-family='sans-serif' font-size='9' letter-spacing='1' fill='%2386929e' text-anchor='middle'%3EADD PHOTO%3C/text%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size: min(140px, 55%) auto;
}
/* once a real photo replaces the placeholder, add this class to the .frame to turn off the ADD PHOTO watermark and its dark scrim */
.frame--filled .frame__plate::after{ display:none; }
.frame__code{
  position:absolute;
  top: var(--sp-2); left: var(--sp-2);
  z-index:4;
  max-width: calc(100% - 1.6em);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--paper);
  background: rgba(20,22,15,.55);
  padding: .35em .6em;
  border-radius: 2px;
}
.frame__caption{
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--paper-dim);
  padding-top: var(--sp-1);
  display:flex;
  justify-content:space-between;
  gap: var(--sp-2);
}

/* "selected" chinagraph mark — the way an editor circles a pick on a contact sheet.
   A real element (not a pseudo) since .frame__plate::after already carries the
   placeholder-icon graphic and only some frames need this mark on top. */
.frame__mark{
  position:absolute;
  top:8%; left:8%; right:8%; bottom:8%;
  z-index:3;
  border: 2px solid var(--mustard);
  border-radius: 50%;
  opacity:.85;
  transform: rotate(-4deg);
  pointer-events:none;
}
.frame--selected .frame__code{
  background: var(--mustard);
  color: var(--bg);
}

.hero-frame{ max-width:420px; margin-inline:auto; }
@media (max-width: 900px){ .hero-frame{ max-width:320px; } }

.about-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: var(--sp-5); align-items:start; }
@media (max-width: 860px){ .about-grid{ grid-template-columns:1fr; } }
.about-portrait{ width:100%; max-width:360px; }
@media (max-width: 860px){ .about-portrait{ max-width:280px; margin-inline:auto; } }

/* =============== sheet grid (gallery) =============== */
.sheet-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3) var(--sp-2);
}
@media (max-width: 900px){ .sheet-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .sheet-grid{ grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-1); } }
@media (max-width: 380px){ .sheet-grid{ grid-template-columns: 1fr; } }

/* =============== portfolio carousel (one photo at a time, crossfade) =============== */
.carousel__stage{
  position: relative;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
  transition: aspect-ratio .6s ease;
}
.carousel__slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.carousel__slide.is-active{
  opacity: 1;
  pointer-events: auto;
}
.carousel__slide .frame{ width:100%; height:100%; }
.carousel__slide .frame__plate{ width:100%; height:100%; }

/* =============== cookie consent banner =============== */
.cookie-banner{
  position: fixed;
  left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3);
  z-index: 700;
  max-width: 560px;
  margin-inline: auto;
  background: var(--header-slate);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  transform: translateY(120%);
  transition: transform .35s ease;
}
.cookie-banner.is-visible{ transform: translateY(0); }
.cookie-banner p{
  font-size: var(--fs-sm);
  color: var(--paper-dim);
  margin-bottom: var(--sp-3);
}
.cookie-banner p a{ color: var(--paper); border-bottom: 1px solid var(--line-bright); }
.cookie-banner p a:hover{ border-color: var(--mustard); color: var(--mustard); }
.cookie-banner__actions{
  display:flex;
  flex-wrap:wrap;
  gap: var(--sp-2);
}
.cookie-banner__actions .btn{ padding: .7em 1.3em; }
@media (max-width: 480px){
  .cookie-banner{ left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-2); padding: var(--sp-3); }
}

/* =============== simple legal page prose =============== */
.legal-body{ max-width: 68ch; color: var(--paper-dim); }
.legal-body h2{ font-family: var(--font-display); font-weight:600; color: var(--mustard); font-size: var(--fs-lg); margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.legal-body p{ margin-top: var(--sp-3); }
.legal-body ul{ margin-top: var(--sp-3); display:flex; flex-direction:column; gap:.6em; }
.legal-body ul li{ padding-left:1.2em; position:relative; }
.legal-body ul li::before{ content:"—"; position:absolute; left:0; color: var(--paper-faint); }
.legal-body a{ color: var(--paper); border-bottom: 1px solid var(--line-bright); }
.legal-body a:hover{ color: var(--mustard); border-color: var(--mustard); }

/* =============== manifesto / pull quote =============== */
.manifesto{
  display:grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
}
.manifesto__rule{
  width:1px;
  background: var(--line-bright);
}
@media (max-width: 720px){
  .manifesto{ grid-template-columns:1fr; }
  .manifesto__rule{ display:none; }
}

/* =============== skip/chase contrast list =============== */
.contrast{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 720px){ .contrast{ grid-template-columns:1fr; gap: var(--sp-5); } }
.contrast__col h3{ margin-bottom: var(--sp-3); }
.contrast__col ul li{
  padding-block: .85em;
  border-top:1px solid var(--line);
  color: var(--paper-dim);
  display:flex;
  gap:.75em;
}
.contrast__col ul li:last-child{ border-bottom:1px solid var(--line); }
.contrast__col ul li::before{ content:"—"; color: var(--paper-faint); flex-shrink:0; }
.contrast__col--chase ul li::before{ content:"✓"; color: var(--mustard); }
.contrast__col--chase ul li{ color: var(--paper); }

/* =============== testimonial stub =============== */
.ticket--narrow{ max-width:640px; }
.ticket{
  border:1px dashed var(--line-bright);
  border-radius: var(--radius);
  padding: var(--sp-4);
  position:relative;
  background: var(--bg-raised);
}
.ticket::before, .ticket::after{
  content:"";
  position:absolute;
  width:18px; height:18px;
  background: var(--bg);
  border-radius:50%;
  top:50%; transform:translateY(-50%);
}
.ticket::before{ left:-9px; }
.ticket::after{ right:-9px; }
.ticket blockquote{ font-family: var(--font-display); font-style:italic; font-size: var(--fs-md); color: var(--paper); }
.ticket cite{ display:block; margin-top: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--paper-dim); font-style:normal; }

/* =============== timeline (weddings page) =============== */
.timeline{ display:flex; flex-direction:column; }
.timeline__row{
  padding-block: var(--sp-4);
  border-top:1px solid var(--line);
}
.timeline__row:last-child{ border-bottom:1px solid var(--line); }

/* =============== pricing cards =============== */
.pricing{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--sp-3);
}
@media (max-width: 900px){ .pricing{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .pricing{ grid-template-columns: 1fr; } }
.pricing--single{ display:flex; justify-content:center; }
.pricing--single .price-card{ max-width: 460px; width:100%; }
.price-card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display:flex;
  flex-direction:column;
  position:relative;
  background: var(--bg-raised);
}
.price-card--featured{ border-color: var(--mustard-deep); }
.price-card__tag{
  position:absolute; top:-.85em; left: var(--sp-3);
  background: var(--mustard); color: var(--bg);
  font-family: var(--font-mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.35em .7em; border-radius: 2px;
}
.price-card__name{ font-family: var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--paper-dim); margin-bottom:.4em; }
.price-card__title{ margin-bottom: var(--sp-2); }
.price-card__price{ font-family: var(--font-mono); color: var(--mustard); font-size:1.05rem; margin-bottom: var(--sp-3); }
.price-card ul{ flex:1; display:flex; flex-direction:column; gap:.65em; margin-bottom: var(--sp-3); }
.price-card ul li{ color: var(--paper-dim); font-size: var(--fs-sm); display:flex; gap:.6em; }
.price-card ul li::before{ content:"·"; color: var(--mustard); font-weight:700; }

/* =============== forms =============== */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-3); }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.5em; }
.field--full{ grid-column: 1 / -1; }
.field label{
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--paper-dim);
}
.field input, .field select, .field textarea{
  background: var(--bg-raised);
  border:1px solid var(--line-bright);
  border-radius: var(--radius);
  padding: .85em 1em;
  color: var(--paper);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--mustard); }
.field textarea{ resize:vertical; min-height:120px; }
.hp-field{ position:absolute; left:-9999px; }

/* =============== footer =============== */
.site-footer{ border-top:1px solid var(--line); padding-block: var(--sp-5) var(--sp-4); }
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
@media (max-width: 720px){ .footer-grid{ grid-template-columns:1fr; gap: var(--sp-4); } }
.footer-grid .wordmark img{ height: 92px; }
.footer-badge{ height: 84px; width:auto; margin-top: var(--sp-3); display:block; }
.footer-blurb{ margin-top: var(--sp-2); font-size:.95rem; color: var(--paper-dim); max-width:34ch; }
.footer-grid h4{
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--paper-dim);
  margin-bottom: var(--sp-2);
}
.footer-grid ul{ display:flex; flex-direction:column; gap:.6em; }
.footer-grid a:hover{ color: var(--mustard); }
.social-link{ display:inline-flex; align-items:center; gap:.5em; }
.social-icon{ width:1.1em; height:1.1em; flex-shrink:0; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top:1px solid var(--line);
  font-family: var(--font-mono); font-size:.75rem; color: var(--paper-faint);
}

/* =============== misc page headers =============== */
.page-header{ padding-block: calc(var(--sp-6) + 2rem) var(--sp-5); }
.page-header .eyebrow{ margin-bottom: var(--sp-3); }
.page-header h1{ margin-bottom: var(--sp-3); }

.section-head{ margin-bottom: var(--sp-4); display:flex; justify-content:space-between; align-items:flex-end; gap: var(--sp-3); flex-wrap:wrap; }

.gallery-block + .gallery-block{ margin-top: var(--sp-6); }
.gallery-block__intro{ display:grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-4); margin-bottom: var(--sp-4); align-items:end;}
@media (max-width:800px){ .gallery-block__intro{ grid-template-columns:1fr; } }

.stack > * + *{ margin-top: var(--sp-3); }
.stack--sm > * + *{ margin-top: var(--sp-2); }

.manifesto__text > * + *{ margin-top: var(--sp-3); }

.meta-strip{
  display:flex;
  flex-wrap:wrap;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--paper-dim);
  padding-block: var(--sp-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.meta-strip span:not(:last-child)::after{ content:"//"; margin-left: var(--sp-3); color: var(--line-bright); }

.quick-facts{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  background: var(--bg-raised);
  margin-bottom: var(--sp-4);
}
@media (max-width: 520px){ .quick-facts{ grid-template-columns: 1fr; } }
.quick-facts dt{
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.quick-facts dd{
  margin: .3em 0 0;
  color: var(--paper);
  font-size: var(--fs-sm);
}

.stat-line{
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--paper-faint);
}

.center-section{ text-align:center; display:flex; flex-direction:column; align-items:center; gap: var(--sp-3); }
.cta-group{ display:flex; flex-wrap:wrap; justify-content:center; gap: var(--sp-3); }

.mt-4{ margin-top: var(--sp-4); }
.pt-5{ padding-top: var(--sp-5); }

.notice{
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--paper-faint);
  border-left: 2px solid var(--line-bright);
  padding-left: var(--sp-2);
}

[data-reveal]{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1; transform:none; } }

/* =============== motto statement =============== */
.motto{
  font-family: var(--font-display);
  font-style: italic;
  font-weight:600;
  font-size: var(--fs-lg);
  color: var(--mustard);
  border-left: 3px solid var(--mustard-deep);
  padding-left: var(--sp-3);
}

/* =============== FAQ accordion =============== */
.faq{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  text-align:left;
  font-family: var(--font-display);
  font-weight:600;
  font-size: var(--fs-md);
}
.faq-item__icon{
  flex-shrink:0;
  width:22px; height:22px;
  position:relative;
}
.faq-item__icon::before, .faq-item__icon::after{
  content:"";
  position:absolute; top:50%; left:50%;
  background: var(--mustard);
  transform: translate(-50%,-50%);
  transition: transform .2s ease, opacity .2s ease;
}
.faq-item__icon::before{ width:14px; height:2px; }
.faq-item__icon::after{ width:2px; height:14px; }
.faq-item[open] .faq-item__icon::after{ transform: translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-item__a{ padding-bottom: var(--sp-3); max-width:62ch; color: var(--paper-dim); }
.faq-item summary{ cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker{ display:none; }

/* =============== journal =============== */
.journal-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-4); }
@media (max-width: 640px){ .journal-grid{ grid-template-columns:1fr; } }
.journal-card{ display:flex; flex-direction:column; }
.journal-card__meta{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--paper-faint); margin-top: var(--sp-2); }
.journal-card__title{ margin-top:.5em; }
.journal-card__excerpt{ margin-top:.6em; color: var(--paper-dim); font-size: var(--fs-sm); }
.journal-card--soon .frame{ opacity:.55; }
.journal-card--soon .journal-card__meta{ color: var(--mustard); }

.article-body{ max-width: 68ch; margin-inline:auto; color: var(--paper-dim); }
.article-body h2{ font-family: var(--font-display); font-weight:600; color: var(--mustard); font-size: var(--fs-lg); margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.article-body h3{ font-family: var(--font-display); font-weight:600; font-style:italic; color: var(--mustard); font-size: var(--fs-md); margin-top: var(--sp-4); margin-bottom:.3em; }
.article-body p{ margin-top: var(--sp-3); }
.article-body ul{ margin-top: var(--sp-3); display:flex; flex-direction:column; gap:.6em; }
.article-body ul li{ padding-left:1.2em; position:relative; }
.article-body ul li::before{ content:"—"; position:absolute; left:0; color: var(--paper-faint); }
.article-body .venue-photo{ max-width: 320px; margin: var(--sp-3) 0 0; }
.article-header{ max-width:68ch; margin-inline:auto; }

/* =============== locations page =============== */
.region-card{ border:1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); background: var(--bg-raised); }
.region-card + .region-card{ margin-top: var(--sp-4); }
.region-card__eyebrow{ margin-bottom: var(--sp-2); }
.town-list{ display:flex; flex-wrap:wrap; gap:.6em; margin-top: var(--sp-3); }
.town-chip{
  font-family: var(--font-mono);
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--paper-dim);
  border:1px solid var(--line-bright);
  border-radius: 999px;
  padding:.4em .9em;
}

.table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-table{
  width:100%;
  min-width: 480px;
  border-collapse: collapse;
  margin-block: var(--sp-5);
  font-size: var(--fs-sm);
}
.compare-table caption{
  text-align:left;
  font-family: var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color: var(--paper-faint);
  margin-bottom: var(--sp-2);
}
.compare-table th, .compare-table td{
  padding: var(--sp-2) var(--sp-3);
  text-align:left;
  border-bottom: 1px solid var(--line);
}
.compare-table thead th{
  font-family: var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--mustard);
  border-bottom: 1px solid var(--line-bright);
}
.compare-table tbody th{
  color: var(--paper-dim);
  font-weight:500;
  white-space:nowrap;
}
.compare-table td{ color: var(--paper); }
@media (max-width: 560px){
  .compare-table{ font-size:.85rem; }
  .compare-table th, .compare-table td{ padding: var(--sp-1) var(--sp-2); }
}

.trust-strip{
  display:flex; flex-wrap:wrap; gap: var(--sp-5);
  padding-block: var(--sp-3);
}
@media (max-width: 560px){
  .trust-strip{ gap: var(--sp-4) var(--sp-4); }
}
.trust-stat{ }
.trust-stat__num{ font-family: var(--font-display); font-weight:700; font-size: var(--fs-lg); color: var(--mustard); }
.trust-stat__label{ font-family: var(--font-mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color: var(--paper-dim); margin-top:.3em; }