/* ==========================================================================
   ANDREA'S BIRTHDAY ADVENTURE — site.css
   Saturday, August 8, 2026
   Palette + type locked to Andrea_Adventure_Brand_Quick_Reference.png
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Brand palette (exact hex from the brand sheet) */
  --navy:        #0B2C3D;
  --blue:        #0A84C6;
  --gold:        #F4B63A;
  --green:       #1F5A40;
  --orange:      #E75C2D;
  --cream:       #F6F2E8;

  /* Derived tints/shades */
  --navy-deep:   #061C27;
  --navy-soft:   #17414F;
  --blue-dark:   #07689E;
  --blue-wash:   #E8F3FA;
  --gold-wash:   #FDF3DC;
  --green-wash:  #E8F2EC;
  --orange-wash: #FDEDE6;

  --paper:       #FFFFFF;
  --ink:         #0B2C3D;
  --muted:       #5A6E78;
  --line:        #DFDACB;
  --line-soft:   #EDE8DC;

  /* Type */
  --display: "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --body:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --label:   "Barlow Semi Condensed", "Barlow Condensed", system-ui, sans-serif;

  /* Rhythm */
  --wrap: 1120px;
  --gut: 22px;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;

  --shadow-sm: 0 1px 3px rgba(11,44,61,.09);
  --shadow-md: 0 4px 18px rgba(11,44,61,.10);
  --shadow-lg: 0 14px 44px rgba(11,44,61,.16);

  --header-h: 78px;
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:var(--blue-dark); text-decoration-thickness:1.5px; text-underline-offset:3px; }
a:hover{ color:var(--orange); }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.005em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.6rem, 8vw, 4.6rem); font-weight:800; letter-spacing:-0.015em; }
h2{ font-size:clamp(2rem, 5.2vw, 3.1rem); }
h3{ font-size:clamp(1.35rem, 3vw, 1.7rem); }
h4{ font-size:1.12rem; font-family:var(--body); font-weight:700; letter-spacing:0; line-height:1.3; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--gold); color:var(--navy); }

/* Visible keyboard focus everywhere */
:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:3px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--navy);
  padding:12px 20px; font-family:var(--label); font-weight:600;
}
.skip-link:focus{ left:8px; top:8px; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.wrap-narrow{ max-width:760px; }

.section{ padding-block:clamp(46px, 8vw, 84px); }
.section-cream{ background:var(--cream); }
.section-paper{ background:var(--paper); }
.section-navy{ background:var(--navy); color:#EEF4F7; }
.section-navy h2,.section-navy h3{ color:#fff; }
.section-navy a{ color:var(--gold); }

/* Topographic ambient texture — from the brand's stated visual language */
.section-topo{
  position:relative;
  background-color:var(--navy);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23F4B63A' stroke-opacity='.09' stroke-width='1.4'%3E%3Cpath d='M-40 300c70-58 132-30 190-72s86-124 160-140 130 24 170 6'/%3E%3Cpath d='M-40 340c76-60 140-32 200-76s90-126 166-142 132 26 174 8'/%3E%3Cpath d='M-40 380c82-62 148-34 210-80s94-128 172-144 134 28 178 10'/%3E%3Cpath d='M-40 220c58-48 112-24 162-60s74-106 138-120 112 20 146 4'/%3E%3Cpath d='M-40 160c46-38 90-18 130-48s60-86 112-98 90 16 118 2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:520px;
}

.grid{ display:grid; gap:clamp(16px, 2.4vw, 26px); }
.grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }

/* Columns are flex containers so stacked children (card + map, card + card)
   flow normally and the column grows to fit them. min-width:0 stops long
   unbreakable content from blowing the track out. */
.grid > div,
.grid > article:not(.card){
  display:flex;
  flex-direction:column;
  min-width:0;
}
.grid > .card{ min-width:0; }
.grid > div > *,
.grid > article:not(.card) > *{ flex:0 0 auto; }

@media (max-width: 860px){
  .grid-2,.grid-3{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------------
   4. LABELS, EYEBROWS, RULES
   -------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--label);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 12px;
}
.section-navy .eyebrow,
.hero .eyebrow{ color:var(--gold); }

.rule-gold{
  width:74px; height:5px; border-radius:3px;
  background:var(--gold);
  margin:0 0 26px;
}

.chip{
  display:inline-block;
  font-family:var(--label);
  font-size:.76rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px;
  background:var(--gold); color:var(--navy);
}
.chip-orange{ background:var(--orange); color:#fff; }
.chip-blue{ background:var(--blue); color:#fff; }

.lede{
  font-size:clamp(1.06rem, 2.2vw, 1.22rem);
  line-height:1.6;
  color:var(--muted);
  max-width:64ch;
}
.section-navy .lede{ color:#B9CCD6; }

/* --------------------------------------------------------------------------
   5. HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--navy);
  border-bottom:3px solid var(--gold);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:var(--header-h);
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:#fff; flex-shrink:0;
}
.brand-mark{
  width:44px; height:44px; flex-shrink:0;
  border-radius:9px;
}
.brand-text{
  font-family:var(--display);
  font-weight:800; font-size:1.06rem;
  line-height:1; letter-spacing:.01em;
  text-transform:uppercase;
}
.brand-text span{
  display:block;
  font-family:var(--label); font-size:.6rem; font-weight:600;
  letter-spacing:.13em; color:var(--gold); margin-top:4px;
}

.nav-list{
  display:flex; align-items:center; gap:4px;
  list-style:none; margin:0; padding:0;
}
.nav-list a{
  display:block; padding:9px 13px;
  font-family:var(--label); font-size:.94rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:#CFE0E9; text-decoration:none; border-radius:var(--r-sm);
}
.nav-list a:hover{ color:#fff; background:rgba(255,255,255,.09); }
.nav-list a.is-current{ color:var(--gold); }
.nav-list .nav-cta a{
  background:var(--orange); color:#fff; margin-left:8px;
}
.nav-list .nav-cta a:hover{ background:#cf4c20; color:#fff; }

.nav-toggle{
  display:none;
  width:46px; height:42px;
  background:transparent; border:1.5px solid rgba(255,255,255,.32);
  border-radius:var(--r-sm); cursor:pointer; padding:0;
}
.nav-toggle span{
  display:block; width:20px; height:2px; margin:4px auto;
  background:#fff; transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 900px){
  .nav-toggle{ display:block; }
  .site-nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--navy-deep);
    border-bottom:3px solid var(--gold);
    max-height:0; overflow:hidden;
    transition:max-height .28s ease;
  }
  .site-nav.is-open{ max-height:520px; }
  .nav-list{
    flex-direction:column; align-items:stretch;
    gap:0; padding:8px var(--gut) 18px;
  }
  .nav-list a{
    padding:15px 4px; font-size:1.05rem;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-list .nav-cta a{
    margin:14px 0 0; text-align:center; border-bottom:0; padding:16px;
  }
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  min-height:54px; padding:15px 28px;
  font-family:var(--label);
  font-size:1.02rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  text-align:center; text-decoration:none;
  color:#fff; background:var(--blue);
  border:2px solid var(--blue); border-radius:var(--r-sm);
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .1s ease, color .16s ease;
}
.btn:hover{ background:var(--blue-dark); border-color:var(--blue-dark); color:#fff; }
.btn:active{ transform:translateY(1px); }

.btn-primary{ background:var(--orange); border-color:var(--orange); }
.btn-primary:hover{ background:#cf4c20; border-color:#cf4c20; }

.btn-gold{ background:var(--gold); border-color:var(--gold); color:var(--navy); }
.btn-gold:hover{ background:#e2a521; border-color:#e2a521; color:var(--navy); }

.btn-ghost{ background:transparent; border-color:currentColor; color:var(--navy); }
.btn-ghost:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }

.btn-ghost-light{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.btn-ghost-light:hover{ background:#fff; border-color:#fff; color:var(--navy); }

.btn-block{ display:flex; width:100%; }
.btn:disabled,.btn[disabled]{
  background:#D7DDE0; border-color:#D7DDE0; color:#6B7A83;
  cursor:not-allowed; transform:none;
}

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
@media (max-width: 640px){
  .btn-row{ flex-direction:column; }
  .btn-row .btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   7. HERO — high-contrast text over whitewater photography
   The photo is near-white across the bottom two thirds, so contrast is built
   from a three-layer scrim rather than a single flat overlay.
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:clamp(560px, 82vh, 780px);
  display:flex; align-items:flex-end;
  background:var(--navy-deep);
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 42%;
  z-index:0;
}
/* Layer 1: vertical gradient anchoring type to the bottom */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(6,28,39,.72) 0%,
    rgba(6,28,39,.34) 26%,
    rgba(6,28,39,.52) 58%,
    rgba(6,28,39,.93) 100%);
}
/* Layer 2: left-weighted wash so headline sits on solid tone even on wide screens */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(6,28,39,.80) 0%, rgba(6,28,39,.28) 52%, rgba(6,28,39,0) 78%);
}
.hero-inner{
  position:relative; z-index:2;
  width:100%;
  padding-block:clamp(40px, 7vw, 76px);
  color:#fff;
}
.hero h1{
  color:#fff;
  text-shadow:0 2px 22px rgba(6,28,39,.55);
  margin-bottom:14px;
  max-width:15ch;
}
.hero-date{
  font-family:var(--display);
  font-size:clamp(1.35rem, 3.4vw, 1.95rem);
  font-weight:700; color:var(--gold);
  margin:0 0 6px; letter-spacing:.01em;
}
.hero-tagline{
  font-family:var(--label);
  font-size:clamp(.92rem, 2vw, 1.06rem);
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#DCE9F0; margin:0 0 30px;
}
.hero-copy{
  max-width:56ch; color:#DCE9F0;
  font-size:1.04rem;
  text-shadow:0 1px 10px rgba(6,28,39,.5);
  margin-bottom:30px;
}

/* Page banner (interior pages) — same scrim system, shorter */
.banner{
  position:relative; overflow:hidden;
  background:var(--navy-deep);
  padding-block:clamp(44px, 8vw, 78px);
}
.banner-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 42%; z-index:0;
}
.banner::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg, rgba(6,28,39,.93) 0%, rgba(6,28,39,.76) 55%, rgba(6,28,39,.58) 100%);
}
.banner-inner{ position:relative; z-index:2; color:#fff; }
.banner h1{
  font-size:clamp(2.2rem, 6vw, 3.6rem);
  color:#fff; margin-bottom:10px;
  text-shadow:0 2px 18px rgba(6,28,39,.5);
}
.banner p{ color:#CBDEE8; max-width:60ch; margin:0; }

/* --------------------------------------------------------------------------
   8. COUNTDOWN — reads like a departure board
   -------------------------------------------------------------------------- */
.countdown{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:0 0 30px; padding:0; list-style:none;
}
.countdown li{
  background:rgba(6,28,39,.62);
  border:1px solid rgba(244,182,58,.42);
  border-radius:var(--r-sm);
  padding:11px 16px; min-width:78px; text-align:center;
  backdrop-filter:blur(3px);
}
.countdown b{
  display:block;
  font-family:var(--display); font-size:1.9rem; font-weight:800;
  line-height:1; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.countdown span{
  display:block; margin-top:5px;
  font-family:var(--label); font-size:.66rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:#B9CCD6;
}
.countdown-done{
  font-family:var(--display); font-size:1.5rem; font-weight:700;
  color:var(--gold); margin:0 0 26px;
}

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-top:6px solid var(--blue);
  border-radius:var(--r-md);
  padding:clamp(22px, 3vw, 30px);
  box-shadow:var(--shadow-sm);
}
/* Equal-height cards ONLY when the card is itself the grid item.
   Applying height:100% to every .card broke any column that stacked a card
   above other content (a map, a second card): grid stretches the wrapper to the
   row height, the card then claimed all of it, and everything after it spilled
   out of the row and overlapped the next section. */
.grid > .card{ height:100%; }
.grid > * > .card:only-child{ height:100%; }
.card-gold{ border-top-color:var(--gold); }
.card-green{ border-top-color:var(--green); }
.card-orange{ border-top-color:var(--orange); }
.card-navy{ border-top-color:var(--navy); }
.card h3{ margin-bottom:.45em; }
.card-meta{
  font-family:var(--label); font-size:.78rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); margin:0 0 10px;
}

.callout{
  background:var(--gold-wash);
  border-left:6px solid var(--gold);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:22px 24px;
}
.callout-gold{ background:var(--gold-wash); border-left-color:var(--gold); }
.callout-orange{ background:var(--orange-wash); border-left-color:var(--orange); }
.callout-blue{ background:var(--blue-wash); border-left-color:var(--blue); }
.callout-green{ background:var(--green-wash); border-left-color:var(--green); }
.callout h4{ margin-bottom:.4em; }
.callout p:last-child{ margin-bottom:0; }

/* --------------------------------------------------------------------------
   10. CHECKPOINT RAIL — the signature element.
   A real ordered sequence (the day's schedule), so numbering carries meaning.
   -------------------------------------------------------------------------- */
.rail{ list-style:none; margin:0; padding:0; position:relative; }
.rail::before{
  content:""; position:absolute;
  left:21px; top:14px; bottom:14px; width:3px;
  background:linear-gradient(to bottom, var(--gold), var(--blue));
  border-radius:2px;
}
.rail li{
  position:relative;
  padding:0 0 34px 66px;
}
.rail li:last-child{ padding-bottom:0; }
.rail-node{
  position:absolute; left:0; top:0;
  width:44px; height:44px; border-radius:50%;
  background:var(--paper);
  border:3px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:1.02rem;
  color:var(--navy);
  box-shadow:0 0 0 5px var(--cream);
}
.section-paper .rail-node{ box-shadow:0 0 0 5px var(--paper); }
.rail-time{
  font-family:var(--label); font-size:.8rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); margin:0 0 3px;
}
.rail h3{ font-size:1.4rem; margin-bottom:.3em; }
.rail p{ color:var(--muted); margin:0; }

/* --------------------------------------------------------------------------
   11. KIT LISTS (wear / bring / leave behind)
   -------------------------------------------------------------------------- */
.kit{ list-style:none; margin:0; padding:0; }
.kit li{
  position:relative;
  padding:0 0 11px 27px;
  line-height:1.5;
}
.kit li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:11px; height:11px; border-radius:50%;
  background:var(--gold);
}
.kit-no li::before{
  background:transparent;
  border:2.5px solid var(--orange);
  width:12px; height:12px;
  top:.5em;
}

/* --------------------------------------------------------------------------
   12. FORMS (shared by uploader + message vault)
   -------------------------------------------------------------------------- */
.field{ margin-bottom:20px; }
.field-label{
  display:block; margin-bottom:8px;
  font-family:var(--label); font-size:.85rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--navy);
}
.field-label .req{ color:var(--orange); }
.field-label .opt{
  color:var(--muted); font-weight:400;
  letter-spacing:.04em; text-transform:none;
}
.field-help{
  margin:7px 0 0; font-size:.86rem; line-height:1.45; color:var(--muted);
}

/* 16px minimum — anything smaller triggers focus-zoom on iOS Safari */
.input{
  width:100%; display:block;
  min-height:52px; padding:13px 15px;
  font-family:var(--body); font-size:16px; line-height:1.45;
  color:var(--ink); background:var(--paper);
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  -webkit-appearance:none; appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
textarea.input{ min-height:132px; resize:vertical; }
select.input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6E78' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
  background-size:12px; padding-right:42px;
}
.input:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(10,132,198,.18);
}
.input.is-invalid{ border-color:var(--orange); }

.check{
  display:flex; gap:13px; align-items:flex-start;
  margin:0 0 24px;
  font-size:.95rem; line-height:1.5; color:var(--muted);
  cursor:pointer;
}
.check input{
  flex:0 0 auto; width:22px; height:22px; margin-top:2px;
  accent-color:var(--blue); cursor:pointer;
}

.form-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-top:6px solid var(--blue);
  border-radius:var(--r-md);
  padding:clamp(24px, 4vw, 36px);
  box-shadow:var(--shadow-md);
}

/* --------------------------------------------------------------------------
   13. UPLOADER STATES
   -------------------------------------------------------------------------- */
.uploader{ max-width:620px; margin-inline:auto; }

.uploader-lock{
  display:flex; align-items:center; gap:10px;
  margin:0 0 18px;
  font-family:var(--label); font-size:.82rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.uploader-lock::before{
  content:""; width:10px; height:10px; border-radius:50%;
  background:var(--muted); flex:0 0 auto;
  transition:background .2s ease;
}
.uploader[data-state="ready"] .uploader-lock{ color:var(--green); }
.uploader[data-state="ready"] .uploader-lock::before{ background:var(--green); }
.uploader[data-state="busy"] .uploader-lock{ color:var(--blue); }
.uploader[data-state="busy"] .uploader-lock::before{
  background:var(--blue);
  animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.status{
  margin-top:22px; padding:17px 19px;
  border-radius:var(--r-sm); border-left:5px solid;
  font-size:.97rem; line-height:1.55;
}
.status[hidden]{ display:none; }
.status-info{    background:var(--blue-wash);   border-color:var(--blue);   color:#0A5878; }
.status-success{ background:var(--green-wash);  border-color:var(--green);  color:#134D34; }
.status-error{   background:var(--orange-wash); border-color:var(--orange); color:#9E3814; }
.status b{ display:block; margin-bottom:3px; font-family:var(--display); font-size:1.16rem; }

.receipt{
  margin:14px 0 0; padding:0; list-style:none;
  font-family:var(--label); font-size:.85rem; color:var(--muted);
}
.receipt li{
  padding:5px 0; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:14px;
}
.receipt li span:last-child{ font-variant-numeric:tabular-nums; flex:0 0 auto; }

/* --------------------------------------------------------------------------
   14. QR + DOWNLOAD BLOCKS
   -------------------------------------------------------------------------- */
.qr-block{
  display:flex; gap:26px; align-items:center; flex-wrap:wrap;
}
.qr-block img{
  width:150px; height:150px; flex:0 0 auto;
  background:#fff; padding:10px; border-radius:var(--r-md);
}
.qr-block div{ flex:1 1 260px; }

.doc-preview{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  background:var(--paper);
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.faq{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq details:last-child{ border-bottom:0; }
.faq summary{
  padding:18px 22px;
  font-family:var(--display); font-size:1.22rem; font-weight:700;
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-size:1.5rem; color:var(--blue); flex:0 0 auto; line-height:1;
}
.faq details[open] summary::after{ content:"–"; }
.faq summary:hover{ background:var(--cream); }
.faq .faq-body{ padding:0 22px 20px; color:var(--muted); }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.site-footer{
  background:var(--navy-deep);
  color:#9FBAC7;
  padding-block:clamp(38px, 6vw, 60px);
  border-top:5px solid var(--gold);
  font-size:.95rem;
}
.footer-grid{
  display:grid; gap:30px;
  grid-template-columns:1.4fr 1fr 1fr;
}
@media (max-width: 780px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-title{
  font-family:var(--display); font-size:1.5rem; font-weight:800;
  color:#fff; margin:0 0 6px; text-transform:uppercase; line-height:1.1;
}
.footer-tag{
  font-family:var(--label); font-size:.78rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold); margin:0 0 16px;
}
.footer-head{
  font-family:var(--label); font-size:.78rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  color:#fff; margin:0 0 12px;
}
.footer-list{ list-style:none; margin:0; padding:0; }
.footer-list li{ margin-bottom:9px; }
.footer-list a{ color:#9FBAC7; text-decoration:none; }
.footer-list a:hover{ color:var(--gold); text-decoration:underline; }
.footer-bottom{
  margin-top:34px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.11);
  font-size:.85rem; color:#7695A5;
}

/* --------------------------------------------------------------------------
   17. MOTION
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }

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

/* --------------------------------------------------------------------------
   18. PRINT
   -------------------------------------------------------------------------- */
@media print{
  .site-header,.site-footer,.btn,.nav-toggle,.hero-media,.banner-media{ display:none !important; }
  body{ background:#fff; color:#000; font-size:12pt; }
  .hero,.banner{ min-height:0; padding-block:0; background:#fff; }
  .hero::before,.hero::after,.banner::before{ display:none; }
  .hero-inner,.banner-inner{ color:#000; }
  .hero h1,.banner h1{ color:#000; text-shadow:none; }
  .card{ break-inside:avoid; box-shadow:none; }
}

/* --------------------------------------------------------------------------
   19. PASSPORT READER — lazy-loaded page images
   -------------------------------------------------------------------------- */
.pages{
  display:grid; gap:clamp(18px, 3vw, 30px);
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
}
.pages figure{ margin:0; }
.pages img{
  width:100%; height:auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-sm);
}
.pages figcaption{
  margin-top:9px;
  font-family:var(--label); font-size:.78rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
}
@media (max-width: 560px){
  .pages{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------------
   20. NUMBERED KIT LIST — used for turn-by-turn directions
   -------------------------------------------------------------------------- */
ol.kit{ counter-reset:step; }
ol.kit li{ padding-left:34px; }
ol.kit li::before{
  counter-increment:step;
  content:counter(step);
  width:22px; height:22px; top:.28em;
  background:var(--blue); border-radius:50%;
  color:#fff; font-family:var(--label); font-size:.76rem; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}

/* --------------------------------------------------------------------------
   21. BRAND LOCKUP
   Set as live text rather than the SVG wordmark. The wordmark artboard is
   2000x520 with generous internal margins, so constraining it to header height
   rendered "BIRTHDAY ADVENTURE" at roughly 8px — unreadable. Live text scales
   per breakpoint, stays crisp, and is selectable and accessible.
   -------------------------------------------------------------------------- */
.brand-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1;
  min-width:0;
}
.brand-over{
  font-family:var(--label);
  font-size:.7rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:4px;
}
.brand-name{
  font-family:var(--display);
  font-size:1.5rem; font-weight:800;
  letter-spacing:.005em; text-transform:uppercase;
  color:#fff;
  white-space:nowrap;
}

@media (max-width: 1150px){
  /* Six nav items plus the CTA — tighten before the mobile breakpoint so
     nothing wraps in the 900-1150px band. */
  .nav-list a{ padding:9px 9px; font-size:.88rem; letter-spacing:.02em; }
  .brand-name{ font-size:1.3rem; }
}
@media (max-width: 900px){
  .brand-mark{ width:38px; height:38px; }
  .brand-over{ font-size:.62rem; letter-spacing:.18em; margin-bottom:3px; }
  .brand-name{ font-size:1.16rem; }
}
@media (max-width: 400px){
  .brand-mark{ width:34px; height:34px; }
  .brand-name{ font-size:1.02rem; }
}

.footer-wordmark{
  width:100%; max-width:330px; height:auto;
  margin:0 0 18px;
}