/* Scoped improvements to the Claude composition. No original files are used as a live root. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}
img{height:auto}.skip-link{position:fixed;left:20px;top:-80px;z-index:100;padding:12px 18px;background:var(--parchment);color:var(--ink-navy)}.skip-link:focus{top:10px}::selection{background:var(--velvet);color:var(--parchment)}a{text-underline-offset:5px}html{scroll-padding-top:90px}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--parchment)}::-webkit-scrollbar-thumb{background:var(--gold-deep);border:2px solid var(--parchment)}
.hero-inner{width:min(1340px,100%);grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);padding-top:125px;padding-bottom:230px;gap:34px}.hero-copy{padding-left:clamp(35px,5vw,80px);gap:22px}.hero-copy h1{font-size:clamp(3.3rem,6vw,5.4rem);max-width:11ch}.hero-script{font-size:clamp(1.8rem,3vw,2.6rem)}.hero-sub{max-width:26ch;font-size:1.2rem;line-height:1.4}.angel-flight{position:relative;justify-self:end;width:min(590px,100%);isolation:isolate}.angel{width:100%;height:auto;position:static;filter:drop-shadow(0 20px 24px #080d2138);max-width:none}.hero .cloudbank{height:clamp(170px,23vw,310px)}.curtain{width:clamp(150px,23vw,350px)}
.motion-control{position:absolute;z-index:8;right:25px;bottom:70px;border:1px solid var(--gold-deep);border-radius:3px;background:#f4e7d0dc;color:var(--ink-navy);padding:10px 14px;font:500 12px var(--caps);letter-spacing:.06em;min-height:40px;cursor:pointer}.motion-paused .curtain{animation-play-state:paused}
.intro{padding-top:45px;gap:23px}.intro .lede{max-width:47ch}.fresco{padding:20px 20px 70px}.fresco-stage{height:auto;aspect-ratio:16/9;max-width:1180px}.fresco-stage .fresco-art{position:relative;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 10px 18px #6b422416)}.fresco-caption{margin-top:12px}.band{padding-block:26px}.topics b{font-size:14px;letter-spacing:.045em}.topics span{font-size:16px}.topics li{padding:12px 16px}
.inside-pin{padding-block:100px 90px;gap:32px}.fan{height:520px}.sprite{display:block;width:100%;aspect-ratio:1;position:relative;overflow:hidden;isolation:isolate}.sprite>img{position:absolute;width:300%;max-width:none;height:auto;left:calc(var(--col)*-100%);top:calc(var(--row)*-100%);object-fit:contain;filter:none!important}.item .sprite{filter:drop-shadow(0 15px 18px #0004)}.item figcaption{font-size:13px;line-height:1.45;letter-spacing:.075em;max-width:23ch}.i-letters{left:0;top:12%;width:28%}.i-print{left:27%;top:1%;width:25%}.i-card{right:0;top:42%;width:21%}.i-stamp{right:24%;top:49%;width:17%}.i-stickers{right:0;top:0;width:29%}.duo{width:100%;display:flex;align-items:center;gap:0}.duo .sprite{width:50%;flex:none}.fan-envelope{top:70%;width:280px}.r-book.sprite{position:absolute;left:50%;right:auto;top:auto;bottom:0;height:96%;width:auto;aspect-ratio:1;translate:-50% 0;transform-origin:50% 100%}.gift-angel{width:min(490px,41vw)}.gift-angel .sprite{width:100%}.columns.sprite{position:absolute;right:-5%;bottom:100px;width:min(370px,32vw);height:auto;opacity:.7}.gift-copy{margin-left:13vw;max-width:640px}.gift-copy .lede{max-width:32ch}
.btn{min-height:48px;transition:transform 160ms var(--ease-out),box-shadow 200ms ease}.btn:hover,.plan:hover{transform:none}.btn:active{transform:scale(.97)}.plan{transition:border-color 200ms ease,box-shadow 200ms ease,transform 200ms var(--ease-out)}.plan input::after{transform:none;opacity:0;transition:opacity 160ms ease}.plan input:checked::after{transform:none;opacity:1}.plan-ico{transition:transform 200ms var(--ease-out)}.plan-name small{font-size:16px}.plan-price small{font-size:14px}.preview-note{font-size:14px;line-height:1.5;text-align:center;color:var(--muted);max-width:48ch}.plan-result{padding:20px 24px;border:1px solid var(--gold-deep);background:#fff6e4;text-align:center;max-width:560px;color:var(--ink-navy);font-size:18px}.plan-result strong{display:block;color:var(--velvet);font-family:var(--display);font-size:26px;margin-bottom:7px}.foot-note{color:#d4bf9a;font-size:16px}.steps{font-size:14px}.plan:has(input:focus-visible){outline:2px solid var(--velvet);outline-offset:4px}[hidden]{display:none!important}
@media(hover:hover) and (pointer:fine){.btn:hover,.plan:hover{transform:translateY(-2px)}}
@media(min-width:761px) and (max-width:1050px){.hero-copy{padding-left:20px}.hero-inner{gap:16px}.topics{grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}.topics li:last-child{grid-column:2}.inside-pin{min-height:820px}.fan{height:500px}}
@media(max-width:860px){.hero{min-height:980px}.hero-inner{grid-template-columns:1fr;padding:116px 26px 235px;align-content:start}.hero-copy{padding-left:0;gap:20px;max-width:480px}.hero-copy h1{font-size:clamp(3.5rem,10vw,4.8rem);max-width:11ch}.hero-script{font-size:2rem}.hero-sub{font-size:21px;max-width:23ch}.angel-flight{position:absolute;right:4%;top:470px;width:min(460px,71vw)}.angel{position:static;width:100%;height:auto}.curtain{width:47vw}.hero .cloudbank{height:180px}.motion-control{right:18px;bottom:35px}.site-nav{transition:opacity 200ms ease,visibility 200ms ease}.menu-btn i{transition:transform 200ms var(--ease-out)}.site-head .brand-mark{width:38px;height:38px}.site-head .brand-word b{font-size:16px}.site-head .brand-word small{font-size:10px}.topics{grid-template-columns:1fr;overflow:visible;max-width:440px}.topics li{padding:15px 20px}.topics li+li::before{inset:0 15% auto;height:1px;width:auto}.topics b{font-size:14px}.topics span{font-size:17px}.band{padding-block:10px}}
@media(max-width:760px){.intro{padding:50px 24px 20px}.script-line{font-size:38px}.display{font-size:clamp(2.4rem,8vw,3.3rem)}.lede{font-size:20px}.fresco{padding:20px 6px 60px}.fresco-stage{aspect-ratio:16/9;min-height:0;max-width:700px}.fresco-caption{font-size:24px;padding-inline:20px}.inside-pin{padding:75px 23px 65px;min-height:0}.fan{height:auto;gap:25px 12px}.fan-envelope{grid-column:1/-1;position:relative;translate:none;left:auto;top:auto;width:240px;margin:25px 0 15px}.item{position:relative;width:auto;left:auto;right:auto;top:auto}.i-letters,.i-print{grid-column:span 1}.i-stickers{grid-column:1/-1;width:min(280px,100%);justify-self:center}.i-stamp{width:85%;justify-self:center}.i-card{width:95%;justify-self:center}.item figcaption{font-size:12px;letter-spacing:.06em}.ritual-pin{min-height:690px;padding:75px 24px 50px}.ritual-stage{height:280px;margin-top:35px}.steps{gap:22px;font-size:12px;letter-spacing:.08em}.steps li{gap:5px}.steps li span{width:28px;height:28px}.plans{padding:70px 22px 50px;gap:24px}.plan{padding:16px 14px;gap:10px}.plan-name small{font-size:15px}.gift{min-height:720px;padding:260px 24px 190px}.gift-angel{width:285px;left:calc(50% - 142px);top:0}.gift-copy{margin-left:0;max-width:460px;z-index:6}.columns.sprite{width:240px;right:-80px;bottom:75px;opacity:.4}.gift .cloudbank{height:170px}.site-foot{padding-top:50px}.motion-control{font-size:10px;min-height:40px}}
@media(max-width:400px){.hero{min-height:950px}.hero-copy h1{font-size:3.45rem}.angel-flight{top:470px;width:84vw;right:-2%}.hero-copy{max-width:330px}.hero-sub{font-size:20px}.steps{gap:15px;letter-spacing:.04em}}
@media(prefers-reduced-motion:reduce){.motion-control{display:none}.btn:active,.btn:hover,.plan:hover{transform:none}.curtain{animation:none}.steps li{transition:none}.js .r-book{opacity:1}.angel-flight,.fresco-art,.item,.sprite{will-change:auto}}

.gift-angel>img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 12px 18px #41302d22)}

/* Keep typography and sprite crops clear at every breakpoint. */
.hero-copy h1{max-width:none}.duo .sprite>img{width:100%}
@media(min-width:861px){.hero-copy{padding-left:30px}.hero-copy h1{font-size:clamp(3.3rem,5.4vw,4.6rem)}}
@media(min-width:761px){.fan{height:560px}.fan-envelope{top:80%;left:45%;width:240px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* v4: each keepsake is its own file now (no 3x3 sheet), so images fill their frame. */
.sprite>img{width:100%;left:0;top:0}

/* v4 layout fixes ------------------------------------------------------------------------ */
/* Desktop hero: narrower curtain, wider copy column and enough left room that the headline,
   the sub-line and the tassel never touch the curtain's edge. */
@media (min-width: 861px) {
  .curtain { width: clamp(150px, 20vw, 320px); }
  .hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .hero-copy { padding-left: clamp(90px, calc(13vw - 20px), 200px); }
  .hero-copy h1 { font-size: clamp(3.2rem, 4.6vw, 4.4rem); }
  .hero-sub { max-width: none; white-space: nowrap; }
}
/* Phones: the opened envelope flap rises above the envelope, so give it room under the title;
   keep the gift columns low and faint so the gift copy stays readable. */
@media (max-width: 760px) {
  .fan-envelope { margin: 120px 0 15px; }
  .columns.sprite { width: 150px; right: -50px; bottom: 0; opacity: .3; }
}

/* v4 fresco: two figures + a coded letter. Fingertips measured in the source art:
   man 81.3% across / 33.7% down his image, woman 3.7% / 42.3% — the letter sits in the gap. */
.fresco-stage.fx-stage { position: relative; height: auto; aspect-ratio: 2896 / 1086; width: min(1180px, 100%); max-width: none; margin: 0 auto; }
.fx-stage .fx-man, .fx-stage .fx-woman { position: absolute; top: 0; width: 50%; height: auto; will-change: transform; filter: drop-shadow(0 12px 18px rgba(107,66,36,.12)); }
.fx-stage .fx-man { left: 0; } .fx-stage .fx-woman { left: 50%; }
.fx-letter { position: absolute; left: 46.3%; top: 39%; width: 8.4%; translate: -50% -50%; rotate: -7deg; z-index: 2; will-change: transform; }
.fx-letter svg { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(74,11,21,.3)); }
.fx-glow { position: absolute; inset: -90%; border-radius: 50%; background: radial-gradient(circle, rgba(236,210,142,.6), transparent 62%); pointer-events: none; }
@media (max-width: 760px) {
  /* Phones: a wider-than-screen stage centred on the hands, so the meeting point is the focus. */
  .fresco-stage.fx-stage { width: 150vw; margin-left: calc(50% - 69.5vw); }
  .fx-letter { width: 11%; }
}

/* v4 painted curtain: drape + tie-back tassel + valance (transparent layers generated in ChatGPT).
   The drape's gathered waist is at 27% across / 51% down its image; the tassel hangs from it. */
.curtain-rig { position: absolute; left: 0; top: 0; height: 100%; aspect-ratio: 955 / 1536; z-index: 2; pointer-events: none; translate: var(--rig-shift, -24%) 0; }
.curtain-sway { position: absolute; inset: 0; transform-origin: 0 0; }
.curtain-drape { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(16px 0 30px rgba(3,6,20,.55)); transform-origin: 0 0; }
.curtain-tassel { position: absolute; left: 27%; top: 47.5%; width: 17%; height: auto; translate: -50% 0; transform-origin: 50% 4%; filter: drop-shadow(6px 10px 12px rgba(3,6,20,.5)); }
.curtain-valance { position: absolute; left: -6%; top: 0; width: 132%; height: auto; filter: drop-shadow(0 12px 18px rgba(3,6,20,.45)); }
@media (max-width: 860px) {
  .curtain-rig { height: 78%; --rig-shift: -52%; }
  .curtain-valance { width: 150%; left: 10%; }
}
/* tuned after screenshots: size the rig by width on desktop so the drape never reaches the headline,
   pull it in so the tassel is fully visible, and keep the logo legible over the velvet. */
@media (min-width: 861px) {
  .curtain-rig { height: auto; width: clamp(380px, 38vw, 620px); --rig-shift: -12%; }
  .hero-copy { padding-left: clamp(110px, 13vw, 230px); }
}
.site-head:not(.solid) .brand-word, .site-head:not(.solid) .brand-mark { text-shadow: 0 1px 2px rgba(20,4,8,.9), 0 0 14px rgba(20,4,8,.7); filter: drop-shadow(0 1px 3px rgba(20,4,8,.8)); }
.curtain-drape { -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 99%); mask-image: linear-gradient(to bottom, #000 84%, transparent 99%); }

/* Clouds load as real images with the page (were painted in the browser after load and popped in). */
.cloud.c1 { background-image: url(assets/img/cloud-c1.webp); }
.cloud.c2 { background-image: url(assets/img/cloud-c2.webp); }
.cloud.c3 { background-image: url(assets/img/cloud-c3.webp); }

/* Unseal. Read. Keep.: real side flaps on the envelope front so the letter stays hidden until the
   flap opens (the old front left the upper corners open and 'Dear you' showed through). */
.r-front { clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%); }

/* Valance now sits in the hero itself (was inside the curtain group). Desktop keeps the same spot:
   rig shift -12% plus the old -6% offset, at 132% of the rig's width. */
.hero { --rigw: clamp(380px, 38vw, 620px); }
.curtain-valance { position: absolute; top: 0; left: calc(var(--rigw) * -0.18); width: calc(var(--rigw) * 1.32); height: auto; z-index: 3; pointer-events: none; filter: drop-shadow(0 12px 18px rgba(3,6,20,.45)); }

/* Phones and small tablets: the angel sits beside the headline (as in the client's mobile reference),
   type steps down to make room, the valance spans the whole top and the drape frames the left edge. */
@media (max-width: 860px) {
  .hero { min-height: max(680px, 100svh); }
  .hero-inner { padding: 124px 20px 210px; align-content: start; }
  .hero-copy { max-width: 60vw; gap: 14px; text-shadow: 0 2px 14px rgba(5,8,25,.75); }
  .hero-copy h1 { font-size: clamp(2.15rem, 9.2vw, 3.3rem); line-height: 1.02; max-width: none; }
  .hero-script { font-size: clamp(1.25rem, 5.2vw, 1.7rem); }
  .hero-sub { font-size: 16px; max-width: 21ch; }
  .hero-copy .btn { font-size: .72rem; padding: .95em 1.3em; }
  .angel-flight { top: 128px; right: -7%; width: min(54vw, 360px); }
  .curtain-valance { left: -3%; width: 106%; z-index: 4; }
  .curtain-rig { height: 100%; --rig-shift: -58%; }
  .curtain-tassel { display: none; }
}
/* The full-width valance is ~27.3vw tall; start the copy and the angel just below it at every width,
   and let the phone hero end shortly after the button instead of a full screen of empty sky. */
@media (max-width: 860px) {
  .hero { min-height: 0; }
  .hero-inner { padding-top: calc(27.5vw + 18px); padding-bottom: 200px; }
  .angel-flight { top: calc(27.5vw + 22px); }
}
@media (max-width: 860px) { .hero-inner { padding-bottom: 250px; } }

/* v4 curtain, desktop pass ----------------------------------------------------------------------
   1. The valance repeats across the full top at every width (a pelmet), as on phones.
   2. The drape scales with the screen up to 900px wide so large screens get a full-height curtain.
   3. The copy always starts 24px past the drape's edge: the edge sits ~60% across the rig at the
      headline's height (measured), so padding = 0.6 x rig width, less the container's own offsets. */
.curtain-valance { position: absolute; top: 0; left: 0; right: 0; width: auto; height: var(--valh, 27.5vw); z-index: 4; pointer-events: none;
  background: url(assets/img/curtain-valance-560.webp) repeat-x center top / auto 100%; filter: drop-shadow(0 12px 18px rgba(3,6,20,.45)); }
@media (min-width: 861px) {
  .hero { --rigw: clamp(320px, 38vw, 900px); --valh: clamp(120px, 11vw, 190px); }
  .curtain-valance { background-image: url(assets/img/curtain-valance-1000.webp); }
  .curtain-rig { width: var(--rigw); }
  .hero-copy { padding-left: max(clamp(110px, 13vw, 230px), calc(var(--rigw) * .6 - 32px - max(0px, (100vw - 1240px) / 2))); }
  .hero-copy h1 { font-size: clamp(2.8rem, 4.6vw, 4.6rem); }
  .hero-inner { padding-top: max(140px, calc(var(--valh) + 40px)); }
  .site-head:not(.solid) .site-nav a:not(.btn) { text-shadow: 0 1px 2px rgba(20,4,8,.9), 0 0 12px rgba(20,4,8,.7); }
}
@media (max-width: 860px) { .hero { --valh: 27.5vw; } }
/* The drape flares out again near its foot; fade it sooner so that flare never sits under the button. */
.curtain-drape { -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 94%); mask-image: linear-gradient(to bottom, #000 66%, transparent 94%); }
@media (min-width: 861px) and (max-width: 1180px) { .hero-sub { white-space: normal; max-width: 24ch; } }

/* v6 — client design feedback, round 1 ---------------------------------------------------------
   Opening scene:
   1. Sky in the reference image's deep teal-navy, lightening to steel blue toward the clouds (was violet-indigo).
   2. Top curtain without its gold fringe (tools/valance-nofringe.py). The new image is 0.795x as tall for the
      same width, so the pelmet height scales by 0.795 and the swags keep their size.
   3. Menu links easier to read: the site's capitals face, larger, on a soft dark backing over the curtain.
   4. Desktop: heading block and angel sit higher. */
.hero { background: linear-gradient(180deg, #03121d 0%, #05192a 22%, #0a2236 40%, #15334b 52%, #2c4d69 61%, #557591 68%, #b8b9b6 74%, #f4e7d0 79%, #f4e7d0 100%); }
.hero-glow { background: radial-gradient(circle, rgba(236,210,142,.16), transparent 60%); }
.curtain-valance { background-image: url(assets/img/curtain-valance-nofringe-560.webp); }
@media (min-width: 861px) {
  .hero { --valh: clamp(95px, 8.75vw, 151px); }
  .curtain-valance { background-image: url(assets/img/curtain-valance-nofringe-1000.webp); }
  .hero-inner { padding-top: max(118px, calc(var(--valh) + 22px)); padding-bottom: 300px; }
  .angel-flight { margin-top: -70px; }
}
@media (max-width: 860px) {
  .hero { --valh: 21.9vw; }
  .hero-inner { padding-top: calc(21.9vw + 18px); }
  .angel-flight { top: calc(21.9vw + 22px); }
}
.site-nav { font: 600 .8rem/1 var(--caps); letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 761px) {
  .site-head:not(.solid) .site-nav { background: rgba(6,14,28,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: 6px 8px 6px 22px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(236,210,142,.18); }
  .site-head:not(.solid) .site-nav a:not(.btn) { color: #fbefd4; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
  .site-nav a:not(.btn) { padding: 10px 2px; }
}
/* Intro: the client's line under the heading. */
.intro-promise { margin: -4px auto 0; font: italic 500 clamp(1.25rem, 2.4vw, 1.65rem)/1.35 var(--display); color: var(--velvet); text-align: center; text-wrap: balance; }
/* v7: the v6 phone fit-to-screen fresco was reverted at the client's request; the v4 150vw stage centred on the
   hands applies again (rule earlier in this file). */
/* Unseal · Read · Keep: the client's line under each step. */
.steps { align-items: flex-start; }
.steps li { align-items: flex-start; }
.steps li b { display: grid; gap: 6px; font-weight: 600; padding-top: 9px; }
.steps li small { display: block; max-width: 20ch; font: 400 1.02rem/1.4 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); opacity: .55; transition: opacity .4s; }
.steps li.on small { opacity: 1; }
@media (max-width: 760px) {
  .steps { flex-direction: column; gap: 14px; align-items: stretch; max-width: 340px; margin-inline: auto; }
  .steps li small { max-width: none; font-size: 1rem; }
}
/* Plans: 6 months is the client's most popular plan, selected by default and flagged. */
.plan-tag { position: absolute; top: 0; right: 54px; padding: 4px 10px 5px; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: var(--night); font: 700 .62rem/1 var(--caps); letter-spacing: .16em; text-transform: uppercase; pointer-events: none; }
.plan.popular { box-shadow: 0 0 0 1.5px var(--gold), 0 14px 30px -18px rgba(74,11,21,.45); }
/* About us: the client's text set as a letter on paper. */
.about { padding: 90px 20px 80px; }
.about-letter { position: relative; width: min(720px, 100%); margin: 0 auto; padding: clamp(32px, 6vw, 64px) clamp(22px, 6vw, 72px);
  background: linear-gradient(180deg, #fffaf0, #fbf1dc); border: 1px solid rgba(138,100,32,.22); border-radius: 4px;
  box-shadow: 0 30px 60px -40px rgba(74,40,20,.45), inset 0 0 60px rgba(201,162,78,.10); display: grid; gap: 14px; }
.about-letter .display { font-size: clamp(2rem, 4.4vw, 3rem); }
.about-letter p { margin: 0; font-size: 1.12rem; line-height: 1.7; color: var(--ink); }
.eyebrow-caps { text-align: center; font: 600 .78rem/1.4 var(--caps) !important; letter-spacing: .26em !important; text-transform: uppercase; color: var(--gold-deep) !important; }
.about-pull { font: italic 500 1.5rem/1.35 var(--display) !important; color: var(--velvet) !important; text-align: center; padding: 10px 0; }
.about-sign { font: 400 2.2rem/1.2 var(--script) !important; color: var(--velvet) !important; text-align: right; margin-top: 10px !important; }
/* Questions */
.faq { padding: 40px 20px 100px; display: grid; justify-items: center; gap: 16px; }
.faq-list { width: min(760px, 100%); display: grid; gap: 10px; }
.faq details { background: #fffaf0; border: 1px solid rgba(138,100,32,.22); border-radius: 8px; padding: 0 20px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 28px 18px 0; position: relative; font: 600 1.22rem/1.35 var(--display); color: var(--ink-navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; font: 400 1.6rem/1 var(--display); color: var(--gold-deep); transition: rotate .3s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.faq details p { margin: 0 0 18px; font-size: 1.08rem; line-height: 1.65; }
.faq-more { margin: 8px 0 0; font-size: 1.1rem; }
.faq-more a, .foot-links a { color: inherit; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.foot-social { font-size: .9rem; opacity: .7; }
/* Contact page */
.subpage .site-head { position: sticky; top: 0; }
.site-nav.static { display: flex; }
@media (max-width: 760px) { .site-nav.static { position: static; inset: auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; font-size: .68rem; background: none; color: inherit; opacity: 1; visibility: visible; } .site-nav.static .btn { display: none; } }
.contact { padding: 70px 16px 100px; min-height: 70vh; }
.contact-card { width: min(640px, 100%); margin: 0 auto; padding: clamp(28px, 6vw, 56px); background: #fffaf0; border: 1px solid rgba(138,100,32,.22); border-radius: 6px; display: grid; gap: 16px; text-align: center; }
.contact-card p { margin: 0; font-size: 1.1rem; }
.contact-facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; text-align: left; margin: 6px auto; }
.contact-facts dt { font: 600 .78rem/1.8 var(--caps); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.contact-facts dd { margin: 0; }
.pending { background: #fbe9b7; border-radius: 4px; padding: 0 6px; font-style: italic; }
.small-print { font-size: .98rem !important; color: var(--muted, #6b5848); }
/* The client's logo (interim cut-out from a screenshot until the original file arrives).
   Cream lettering over the night sky, navy once the header turns light on scroll. */
.brand-logo { display: block; height: 40px; width: auto; }
.brand-logo.on-light { display: none; }
.site-head.solid .brand-logo.on-dark { display: none; }
.site-head.solid .brand-logo.on-light { display: block; }
.site-head:not(.solid) .brand-logo { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.foot-logo { width: min(320px, 80vw); height: auto; }
@media (max-width: 760px) { .brand-logo { height: 30px; } }
/* Over the curtain the logo gets the same soft dark backing as the menu, so it reads on red velvet. */
.site-head:not(.solid) .brand { background: rgba(6,14,28,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 8px 16px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(236,210,142,.18); }
@media (min-width: 761px) { .brand-logo { height: 46px; } }
@media (max-width: 760px) { .site-head:not(.solid) .brand { padding: 6px 12px; } .brand-logo { height: 28px; } }
/* Policy pages (terms, privacy, refunds, shipping): a readable single column on paper. */
.policy { padding: 60px 16px 100px; }
.policy-card { width: min(760px, 100%); margin: 0 auto; padding: clamp(26px, 5vw, 56px); background: #fffaf0; border: 1px solid rgba(138,100,32,.22); border-radius: 6px; }
.policy-card .display { text-align: left; font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 4px 0 6px; }
.policy-card .eyebrow-caps { text-align: left; margin: 0; }
.policy-card .updated { margin: 0 0 18px; color: var(--muted, #6b5848); font-size: .98rem; }
.policy-card h2 { font: 600 1.45rem/1.25 var(--display); color: var(--ink-navy); margin: 30px 0 8px; }
.policy-card p, .policy-card li { font-size: 1.08rem; line-height: 1.7; max-width: 66ch; }
.policy-card p { margin: 0 0 12px; }
.policy-card ul { margin: 0 0 12px; padding-left: 1.2em; display: grid; gap: 6px; }
.policy-card a { color: var(--velvet); }
.policy-card .preview-note { text-align: left; margin: 0 0 8px; }
.foot-legal { font-size: .9rem; opacity: .85; }