/* ============================================================================
   NautiTea site chrome, shared across every page.
   Source of truth for: palette, base type, header/nav (film flip + solid bar),
   21+ age gate, footer (+ email signup), find/retailer components, interior
   page scaffolding (hero, cards, forms). The film engine's own styles stay
   inline in index.html; that page also keeps its base reset inline so the film
   survives even if this stylesheet fails to load.
   ========================================================================= */

:root{
  --sunset:#F04E23;
  --gold:#FFB43B;
  --teal:#21AFA9;
  --deep:#0E6E6B;
  --ink:#0F1519;
  --cream:#FFF7EA;
  --cyan:#29D3F2;
  --seam:#233139; /* sampled from the film's final frame bottom strip */
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--ink); }
html.no-scroll, html.nav-open{ overflow:hidden; }
body{
  background:var(--ink);
  color:var(--cream);
  font-family:'Nunito Sans', system-ui, sans-serif;
  overflow-x:hidden;
}
.display{ font-family:'Archivo Black', sans-serif; font-style:italic; letter-spacing:.01em; }
.script{ font-family:'Pacifico', cursive; font-style:normal; font-weight:400; }

.sec-head{ text-align:center; margin-bottom:clamp(30px, 5vh, 52px); }
.sec-head .script{ color:var(--gold); font-size:clamp(20px, 2.4vw, 28px); }
.sec-head h2{
  font-family:'Archivo Black', sans-serif; font-style:italic;
  color:var(--cream); font-size:clamp(34px, 4.8vw, 58px); line-height:1.04; margin-top:6px;
}

/* ============================ header + nav ============================ */
/* Over the film the header is transparent and flips cream/ink via canvas
   luminance sampling (#hdr.on-light, engine-driven, homepage only). Past the
   film (homepage .past-film) or once an interior page scrolls (.scrolled) it
   becomes a solid ink glass bar so it reads over the light cream cards. */
#hdr{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px 26px;
  pointer-events:none;
  color:var(--cream);
  transition:color .4s ease, background .35s ease;
}
#hdr a, #hdr button{ pointer-events:auto; }
#hdr-home{ display:block; line-height:0; }
#hdr-home img{ height:40px; width:auto; filter:drop-shadow(0 2px 10px rgba(15,21,25,.55)); transition:filter .4s ease, height .3s ease; }
#hdr.on-light #hdr-home img{ filter:drop-shadow(0 2px 8px rgba(255,247,234,.4)); }

#nav{ display:flex; align-items:center; gap:clamp(14px, 2.2vw, 30px); }
.nav-home{ display:none; } /* mobile panel only: desktop reaches home via the logo */
.nav-link{
  font-family:'Archivo Black', sans-serif; font-style:italic;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:inherit; text-decoration:none;
  padding:6px 0; border-bottom:2px solid transparent;
  text-shadow:0 1px 8px rgba(15,21,25,.35);
  transition:transform .15s ease, border-color .15s ease;
}
.nav-link:hover{ transform:translateY(-2px); border-color:currentColor; }
.nav-link[aria-current="page"]{ border-color:var(--gold); }
#hdr.on-light .nav-link{ text-shadow:none; }

.nav-cta{
  font-family:'Archivo Black', sans-serif; font-style:italic;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:inherit; text-decoration:none;
  border:2px solid currentColor; border-radius:999px;
  padding:10px 20px;
  text-shadow:0 1px 8px rgba(15,21,25,.35);
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.nav-cta:hover{ transform:translateY(-2px); background:rgba(255,247,234,.14); }
#hdr.on-light{ color:var(--ink); }
#hdr.on-light .nav-cta{ text-shadow:none; }
#hdr.on-light .nav-cta:hover{ background:rgba(15,21,25,.08); }

/* solid ink glass bar: AFTER the .on-light rules so it wins when both apply */
#hdr.past-film, #hdr.scrolled{
  background:rgba(15,21,25,.92);
  color:var(--cream);
}
/* the glass blur lives on a pseudo, never on #hdr itself: backdrop-filter on
   #hdr makes it the containing block for the fixed mobile #nav panel, which
   then clips to the header bar (see-through, mispositioned menu) */
#hdr.past-film::before, #hdr.scrolled::before{
  content:""; position:absolute; inset:0; z-index:-1;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
#hdr.past-film #hdr-home img, #hdr.scrolled #hdr-home img{ filter:none; height:80px; }
/* desktop: logo rides at 100px in every header state */
@media (min-width:881px){
  #hdr-home img,
  #hdr.past-film #hdr-home img, #hdr.scrolled #hdr-home img{ height:100px; }
}
#hdr.past-film .nav-link, #hdr.scrolled .nav-link{ text-shadow:none; }
#hdr.past-film .nav-cta, #hdr.scrolled .nav-cta{
  background:var(--gold); border-color:var(--gold); color:var(--ink); text-shadow:none;
}
#hdr.past-film .nav-cta:hover, #hdr.scrolled .nav-cta:hover{ background:var(--cream); border-color:var(--cream); }

#nav-burger{ display:none; }
.nav-social{ display:none; }

@media (max-width:880px){
  #nav{
    position:fixed; inset:0; z-index:44;
    flex-direction:column; justify-content:center; align-items:center; gap:6px;
    background:rgba(15,21,25,.96);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility 0s linear .3s;
  }
  html.nav-open #nav{ opacity:1; visibility:visible; transition:opacity .3s ease; }
  .nav-home{ display:block; }
  #nav .nav-link{ font-size:24px; padding:12px 8px; color:var(--cream); text-shadow:none; }
  #nav .nav-cta{ margin-top:22px; font-size:16px; padding:14px 30px; color:var(--cream); border-color:var(--cream); }
  .nav-social{ display:flex; gap:14px; margin-top:36px; }
  .nav-social a{
    width:42px; height:42px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    color:var(--cream); border:2px solid rgba(255,247,234,.32);
    transition:border-color .15s ease, color .15s ease;
  }
  .nav-social a:hover{ border-color:var(--gold); color:var(--gold); }
  .nav-social svg{ width:18px; height:18px; }

  #nav-burger{
    position:relative; z-index:46;
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:44px; height:44px; border-radius:50%;
    border:2px solid currentColor; background:transparent; color:inherit;
    cursor:pointer; transition:color .4s ease;
  }
  #nav-burger span{
    display:block; width:18px; height:2px; border-radius:2px;
    background:currentColor;
    transition:transform .25s ease, opacity .2s ease;
  }
  html.nav-open #hdr{ color:var(--cream); }
  html.nav-open #nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  html.nav-open #nav-burger span:nth-child(2){ opacity:0; }
  html.nav-open #nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ============================== age gate ============================== */
#gate{
  position:fixed; inset:0; z-index:80;
  background:rgba(15,21,25,.82);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  transition:opacity .45s ease;
}
#gate.gone{ opacity:0; pointer-events:none; }
#gate[hidden]{ display:none; }
.gate-card{
  width:min(460px, 92vw);
  border-radius:22px;
  padding:44px 38px 40px;
  text-align:center;
  color:var(--cream);
  background:linear-gradient(150deg, var(--sunset) 0%, #F97A2C 46%, var(--gold) 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,247,234,.35);
}
.gate-card img{ height:76px; width:auto; margin-bottom:10px; filter:drop-shadow(0 3px 12px rgba(15,21,25,.35)); }
.gate-card .script{ font-size:24px; color:var(--cream); text-shadow:0 2px 8px rgba(15,21,25,.25); margin-bottom:14px; }
.gate-card h2{ font-size:clamp(26px, 4.4vw, 34px); line-height:1.08; margin-bottom:12px; text-shadow:0 2px 10px rgba(15,21,25,.3); }
.gate-card p{ font-size:15px; font-weight:600; color:rgba(255,247,234,.92); margin-bottom:26px; }
.gate-btns{ display:flex; gap:14px; justify-content:center; }
.gate-btns button{
  font-family:'Archivo Black', sans-serif; font-style:italic; font-size:15px;
  letter-spacing:.04em; cursor:pointer; border-radius:999px;
  padding:14px 26px; transition:transform .15s ease, background .15s ease, color .15s ease;
}
.gate-btns button:hover{ transform:translateY(-2px); }
#gate-yes{ background:var(--ink); color:var(--cream); border:2px solid var(--ink); }
#gate-yes:hover{ color:var(--cyan); }
#gate-no{ background:transparent; color:var(--cream); border:2px solid rgba(255,247,234,.75); }
#gate-no:hover{ background:rgba(255,247,234,.14); }
.gate-card .fine{ margin-top:20px; margin-bottom:0; font-size:12px; font-weight:600; color:rgba(255,247,234,.7); }

/* ====================== interior page scaffolding ====================== */
/* hero: the brand's own sunset artwork (red sky, palm silhouettes, perfect
   circular sun over the cyan water strip), pulled from nautitea.com and
   bottom-anchored so the sun always shows. A soft ink vignette at the very
   top keeps the fixed header readable; the water strip hands off to
   .page-main, whose gradient starts at the sampled strip colour #3EBBD0. */
.page-hero{
  position:relative; overflow:hidden;
  padding:calc(76px + 5vh) 6vw clamp(64px, 10vh, 110px);
  min-height:clamp(400px, 54vh, 560px);
  display:flex; flex-direction:column; justify-content:center;
  text-align:center;
  background:
    linear-gradient(to bottom, rgba(15,21,25,.45), rgba(15,21,25,0) 20%),
    url('/assets/hero-sunset.webp') center bottom / cover no-repeat,
    var(--sunset);
}
.page-hero .script{
  color:var(--cream); font-size:clamp(20px, 2.6vw, 30px);
  text-shadow:0 2px 6px rgba(15,21,25,.5), 0 6px 22px rgba(15,21,25,.35);
}
.page-hero h1{
  font-family:'Archivo Black', sans-serif; font-style:italic; text-transform:uppercase;
  color:var(--cream); font-size:clamp(36px, 5.6vw, 68px); line-height:1.05; margin-top:8px;
  max-width:900px; margin-left:auto; margin-right:auto;
  text-shadow:0 2px 6px rgba(15,21,25,.5), 0 8px 30px rgba(15,21,25,.4);
}
.page-hero h1 em{ color:var(--ink); text-shadow:none; }
.page-hero .lead{
  max-width:56ch; margin:16px auto 0;
  color:var(--cream); font-weight:700; font-size:clamp(15px, 1.6vw, 18px);
  text-shadow:0 2px 6px rgba(15,21,25,.55), 0 5px 18px rgba(15,21,25,.4);
}
/* optional hero can/product art from the live site */
.hero-can{
  position:absolute; right:2vw; bottom:-5%; height:60%; max-height:440px; z-index:1;
  filter:drop-shadow(0 18px 40px rgba(15,21,25,.4));
}
@media (max-width:1200px){ .hero-can{ display:none; } }
.hero-product{
  display:block; margin:24px auto 0; max-height:230px; max-width:86vw; width:auto;
  filter:drop-shadow(0 18px 40px rgba(15,21,25,.35));
}
.page-main{
  background:linear-gradient(to bottom, #3EBBD0 0%, var(--teal) 14%, var(--deep) 56%, var(--ink) 100%);
  padding:clamp(36px, 5vh, 60px) 6vw clamp(80px, 12vh, 130px);
}
.content-wrap{
  max-width:1040px; margin:0 auto;
  display:flex; flex-direction:column; gap:clamp(28px, 4vh, 48px);
}

.content-card{
  background:var(--cream); color:var(--ink);
  border-radius:26px; padding:clamp(28px, 4vw, 46px);
  box-shadow:0 26px 70px rgba(6,22,24,.45);
}
.content-card .script{ color:var(--sunset); font-size:clamp(19px, 2vw, 24px); }
.content-card h2{
  font-family:'Archivo Black', sans-serif; font-style:italic;
  font-size:clamp(24px, 3vw, 36px); line-height:1.08; margin:6px 0 16px;
}
.content-card h3{
  font-family:'Archivo Black', sans-serif; font-style:italic;
  font-size:clamp(20px, 2.2vw, 26px); line-height:1.1; margin-bottom:14px;
}
.content-card p{ font-weight:600; color:rgba(15,21,25,.74); font-size:clamp(15px, 1.55vw, 17px); line-height:1.6; }
.content-card p + p{ margin-top:12px; }
.card-tag{
  display:inline-block;
  font-size:11px; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  color:var(--deep); background:rgba(14,110,107,.12);
  border-radius:999px; padding:6px 14px; margin-bottom:14px;
}
.card-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px, 2.4vw, 30px); }
@media (max-width:820px){ .card-duo{ grid-template-columns:1fr; } }

/* long-form document pages (FAQs, legal): prose inside a cream card */
.doc-card{ max-width:860px; margin:0 auto; width:100%; text-align:left; }
.doc-card h2{ margin:36px 0 4px; font-size:clamp(22px, 2.4vw, 30px); }
.doc-card h2:first-child{ margin-top:0; }
.doc-card h3{ margin:28px 0 2px; font-size:clamp(17px, 1.8vw, 21px); }
.doc-card p{ margin-top:12px; }
.doc-card ul, .doc-card ol{ margin:14px 0 0 1.35em; }
.doc-card li{ margin:8px 0; font-weight:600; color:rgba(15,21,25,.74); font-size:15.5px; line-height:1.6; }
.doc-card a{ color:var(--deep); font-weight:700; text-decoration:underline; text-underline-offset:2px; transition:color .15s ease; }
.doc-card a:hover{ color:var(--sunset); }

.btn{
  display:inline-block; cursor:pointer;
  font-family:'Archivo Black', sans-serif; font-style:italic;
  font-size:14px; letter-spacing:.05em; text-transform:uppercase; text-decoration:none;
  background:var(--ink); color:var(--cream);
  border:2px solid var(--ink); border-radius:999px; padding:14px 28px;
  transition:transform .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-2px); color:var(--cyan); }

.checklist{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.checklist li{ display:flex; gap:12px; align-items:flex-start; font-weight:700; color:rgba(15,21,25,.8); font-size:15.5px; line-height:1.45; }
.checklist svg{ flex:none; width:22px; height:22px; margin-top:1px; }

.banner-strip{
  background:linear-gradient(90deg, var(--sunset), var(--gold));
  color:var(--cream); text-align:center;
  font-family:'Archivo Black', sans-serif; font-style:italic;
  font-size:clamp(16px, 2vw, 22px); letter-spacing:.02em;
  border-radius:18px; padding:18px 24px;
  text-shadow:0 2px 8px rgba(15,21,25,.3);
  box-shadow:0 18px 48px rgba(6,22,24,.4);
}

/* ============================= forms ============================= */
.form-card{ text-align:left; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.form-field.full{ grid-column:1 / -1; }
.form-field > label:not(.consent){
  display:block;
  font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(15,21,25,.72); margin-bottom:7px;
}
.form-field > label:not(.consent) span{ color:rgba(15,21,25,.42); margin-left:6px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%;
  font-family:'Nunito Sans', sans-serif; font-size:16px; font-weight:600; color:var(--ink);
  background:#fff; border:2px solid rgba(15,21,25,.16); border-radius:14px;
  padding:13px 16px; outline:none;
  transition:border-color .15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color:var(--teal); }
.form-field textarea{ min-height:130px; resize:vertical; }
.form-field select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, rgba(15,21,25,.5) 50%), linear-gradient(135deg, rgba(15,21,25,.5) 50%, transparent 50%); background-position:calc(100% - 21px) 50%, calc(100% - 15px) 50%; background-size:6px 6px; background-repeat:no-repeat; }
.form-field input[type="file"]{ background:rgba(15,21,25,.04); font-weight:600; padding:11px 14px; }
.form-note{ font-size:12.5px; font-weight:600; color:rgba(15,21,25,.55); margin-top:6px; }
.consent{ display:flex; gap:11px; align-items:flex-start; font-weight:700; font-size:15px; color:var(--ink); }
.consent input{ width:19px; height:19px; margin-top:2px; accent-color:var(--sunset); flex:none; }
.form-fine{ font-size:12.5px; font-weight:600; color:rgba(15,21,25,.55); margin-top:10px; line-height:1.5; }
.form-actions{ margin-top:22px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }

/* ================= find / retailer components (shared) ================= */
.find-tools{
  display:flex; flex-direction:column; gap:16px; align-items:center;
}
.find-search{
  width:100%; max-width:460px;
  font-family:'Nunito Sans', sans-serif; font-size:16px; font-weight:600;
  color:var(--cream); background:rgba(255,247,234,.08);
  border:2px solid rgba(255,247,234,.28); border-radius:999px;
  padding:14px 22px; outline:none;
  transition:border-color .15s ease, background .15s ease;
}
.find-search::placeholder{ color:rgba(255,247,234,.5); }
.find-search:focus{ border-color:var(--gold); background:rgba(255,247,234,.12); }
.find-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.find-chip{
  font-family:'Nunito Sans', sans-serif; font-size:12px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  color:var(--cream); background:transparent;
  border:2px solid rgba(255,247,234,.28); border-radius:999px;
  padding:8px 16px; transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.find-chip:hover{ border-color:var(--gold); }
.find-chip.on{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.find-count{
  font-family:'Nunito Sans', sans-serif; font-size:12px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,247,234,.6);
}
.retailer-card{
  background:var(--cream); color:var(--ink);
  border-radius:22px; padding:26px 26px 22px;
  /* Soft, tight shadow: the old 0 20px 54px/.4 shadow (54px blur, near-black)
     pooled in the 16px gaps between cards and muddied them vs the page gradient. */
  box-shadow:0 10px 26px rgba(6,22,24,.18);
  display:flex; flex-direction:column; gap:12px; text-align:left;
}
.rc-type{
  align-self:flex-start;
  font-size:10.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--deep); background:rgba(14,110,107,.12);
  border-radius:999px; padding:6px 13px;
}
.rc-name{
  font-family:'Archivo Black', sans-serif; font-style:italic;
  font-size:clamp(19px, 1.9vw, 23px); line-height:1.1;
}
.rc-addr, .rc-hours{
  font-family:'Nunito Sans', sans-serif; font-weight:600;
  color:rgba(15,21,25,.66); font-size:14px; line-height:1.45;
}
.rc-hours{ display:flex; gap:8px; }
.rc-hours svg{ flex:none; width:15px; height:15px; margin-top:2px; opacity:.5; }
.rc-actions{
  margin-top:auto; padding-top:6px;
  display:flex; flex-wrap:wrap; gap:9px; align-items:center;
}
.rc-btn{
  font-family:'Nunito Sans', sans-serif; font-size:12.5px; font-weight:800;
  letter-spacing:.03em; text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px;
  border-radius:999px; padding:10px 15px; transition:transform .12s ease, background .15s ease, color .15s ease;
}
.rc-btn svg{ width:15px; height:15px; }
.rc-btn.primary{ background:var(--ink); color:var(--cream); }
.rc-btn.primary:hover{ transform:translateY(-2px); color:var(--cyan); }
.rc-btn.ghost{ background:rgba(15,21,25,.06); color:var(--ink); }
.rc-btn.ghost:hover{ transform:translateY(-2px); background:rgba(15,21,25,.1); }
.rc-icon{
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(15,21,25,.06); color:var(--ink); text-decoration:none;
  transition:transform .12s ease, background .15s ease;
}
.rc-icon:hover{ transform:translateY(-2px); background:rgba(15,21,25,.1); }
.rc-icon svg{ width:17px; height:17px; }
.find-empty{
  grid-column:1 / -1; text-align:center;
  font-family:'Nunito Sans', sans-serif; font-weight:700;
  color:rgba(255,247,234,.7); padding:30px 0;
}

/* =============================== footer =============================== */
#footer{
  background:var(--ink); color:var(--cream);
  padding:clamp(56px, 9vh, 80px) 6vw 40px;
}
.f-grid{
  max-width:1180px; margin:0 auto clamp(36px, 6vh, 56px);
  display:grid; grid-template-columns:1.15fr .8fr .85fr 1.2fr;
  gap:clamp(24px, 3vw, 48px);
  align-items:start; text-align:left;
}
.f-head{
  font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,247,234,.5); margin-bottom:14px;
}
.f-brand{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.f-logo{ height:clamp(100px, 9vw, 136px); width:auto; }
.f-tag{ color:var(--gold); font-size:clamp(19px, 2vw, 23px); }
.f-social{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.f-social a{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--cream); border:2px solid rgba(255,247,234,.28);
  transition:border-color .15s ease, color .15s ease, transform .12s ease;
}
.f-social a:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.f-social svg{ width:17px; height:17px; display:block; }
.f-hashtag{ color:var(--gold); font-size:clamp(18px, 1.9vw, 22px); }
.f-nav{ display:flex; flex-direction:column; gap:11px; align-items:flex-start; }
.f-nav a{
  font-family:'Archivo Black', sans-serif; font-style:italic;
  font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--cream); text-decoration:none;
  transition:color .15s ease;
}
.f-nav a:hover{ color:var(--cyan); }
.f-signup p.f-blurb{ font-weight:600; font-size:14px; color:rgba(255,247,234,.7); margin:-6px 0 14px; }
#signup-form{ display:flex; flex-direction:column; gap:13px; align-items:flex-start; }
#signup-email{
  width:100%;
  font-family:'Nunito Sans', sans-serif; font-size:15px; font-weight:600;
  color:var(--cream); background:rgba(255,247,234,.08);
  border:2px solid rgba(255,247,234,.28); border-radius:999px;
  padding:13px 20px; outline:none;
  transition:border-color .15s ease, background .15s ease;
}
#signup-email::placeholder{ color:rgba(255,247,234,.5); }
#signup-email:focus{ border-color:var(--gold); background:rgba(255,247,234,.12); }
.f-consent{
  display:flex; gap:10px; align-items:flex-start;
  font-size:13.5px; font-weight:700; color:rgba(255,247,234,.85); text-align:left;
}
.f-consent input{ width:18px; height:18px; margin-top:1px; accent-color:var(--sunset); flex:none; }
#signup-submit{
  cursor:pointer;
  font-family:'Archivo Black', sans-serif; font-style:italic;
  font-size:13.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink); background:linear-gradient(90deg, var(--sunset), var(--gold));
  border:0; border-radius:999px; padding:14px 28px;
  transition:transform .15s ease, filter .15s ease;
}
#signup-submit:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.f-fineprint{ font-size:12px; font-weight:600; color:rgba(255,247,234,.5); line-height:1.5; }
.f-resp{
  text-align:center;
  font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,247,234,.55); margin-bottom:10px;
}
.f-resp b{ font-weight:800; color:var(--gold); }
.f-fine{ text-align:center; font-size:12px; font-weight:600; color:rgba(255,247,234,.38); }
@media (max-width:880px){
  .f-grid{ grid-template-columns:1fr; text-align:center; gap:38px; }
  .f-brand{ align-items:center; }
  .f-nav{ align-items:center; }
  #signup-form{ align-items:center; }
  .f-consent{ text-align:left; }
}

/* -------------------- form capture (signup/contact/nautilist) -------------------- */
.hp-field{ position:absolute !important; left:-9999px !important; top:auto;
  width:1px; height:1px; opacity:0; pointer-events:none; }
.form-status{ margin:10px 0 0; font-weight:700; font-size:13.5px; line-height:1.35; }
.form-status.is-error{ color:#c0392b; }            /* light page context */
#footer .form-status.is-error{ color:#ff9074; }    /* dark footer context */
.form-done{ padding:12px 0; font-size:15px; line-height:1.4; color:var(--ink); }
.form-done strong{ color:#0E6E6B; }
#footer .form-done{ color:var(--cream); }
#footer .form-done strong{ color:var(--gold); }