/* Linnea Taylor Jewelry — site stylesheet.
   Everything above the 'Production additions' block is the approved mockup,
   copied verbatim. Edit here, not in the mockup, from now on. */

/* Self-hosted Google Fonts (SIL Open Font License), latin subset only — the
   same files Google served. Jost is one variable file covering 200–500. */
@font-face{font-family:'Italiana'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/italiana-latin.woff2) format('woff2')}
@font-face{font-family:'Libre Caslon Display'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/libre-caslon-display-latin.woff2) format('woff2')}
@font-face{font-family:'Jost'; font-style:normal; font-weight:200 500; font-display:swap;
  src:url(../fonts/jost-latin-var.woff2) format('woff2')}

:root{
  --bone:#F6F2EB;
  --bone-2:#EFE9DE;
  --cream:#ECE3D4;
  --ink:#1A1512;
  --ink-2:#4B423B;
  --ink-3:#6B6159;   /* 4.7–5.4:1 on bone, bone-2 and cream: small text passes WCAG AA */
  --line:#DCD3C5;
  --gold:#B08D57;
  --gold-deep:#7D6033; /* gold for small text: 4.6–5.2:1 on the light grounds */
  --espresso:#16110E;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.68,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0; background:var(--bone); color:var(--ink-2);
  font-family:'Jost',-apple-system,sans-serif; font-size:16px; font-weight:300; line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}

/* ---------- type : same fonts, dialed back to a normal scale ---------- */
.display{
  font-family:'Libre Caslon Display',serif; font-weight:400; color:var(--ink);
  line-height:1.06; letter-spacing:-.012em; margin:0;
}
.d-xl{font-size:clamp(2.1rem,4.6vw,3.9rem)}
.d-lg{font-size:clamp(1.85rem,3.4vw,2.9rem)}
.d-md{font-size:clamp(1.5rem,2.3vw,2.1rem)}
/* the single italic accent word — still an accent, no longer shouting */
.display em{font-style:italic; font-size:1.06em; display:inline-block}
.label{
  font-family:'Italiana',serif; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3);
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px}
@media(max-width:760px){ .wrap{padding:0 22px} }
section{padding:11vh 0}
@media(max-width:760px){ section{padding:8vh 0} }

.margin-label{
  position:absolute; left:-2px; top:0; writing-mode:vertical-rl;
  font-family:'Italiana',serif; font-size:.68rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-3);
}
@media(max-width:1180px){ .margin-label{display:none} }

.link{
  display:inline-block; position:relative; font-family:'Jost',sans-serif;
  font-size:.76rem; font-weight:400; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink); padding-bottom:6px;
}
.link::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform-origin:left; transform:scaleX(1);
  transition:transform .5s var(--ease-out);
}
.link:hover::after{transform-origin:right; transform:scaleX(0)}
.link.on-dark{color:#E8DFD3}

/* ---------- header (unchanged — you liked this) ---------- */
header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  /* Align the logo and nav with the page's content column (--maxw) instead of
     the screen edges, so on wide monitors they sit inward rather than hugging
     the corners. Never less than 48px from the edge. */
  padding:24px max(48px, calc((100% - var(--maxw)) / 2 + 40px));
  display:flex; align-items:center; justify-content:space-between;
  color:#F4EDE3; transition:color .5s var(--ease);
}
/* Transparent over the hero — you liked that. But on a single-page site the
   header spends most of its life over light content, where fully transparent
   means text lands on text. Past the hero it picks up a soft bone backdrop:
   still minimal, no border, just enough to keep both legible. */
header.on-light{
  color:var(--ink);
  background:rgba(246,242,235,.82);
  backdrop-filter:saturate(140%) blur(9px);
  -webkit-backdrop-filter:saturate(140%) blur(9px);
}
header .mark{font-family:'Italiana',serif; font-size:1rem; letter-spacing:.28em; text-transform:uppercase}
header nav{display:flex; gap:30px}
header nav a{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:400}
@media(max-width:760px){ header nav{display:none} header{padding:18px 22px} }

/* ---------- hero : shrunk, so the page clearly continues below ---------- */
.hero{position:relative; height:74vh; min-height:460px; max-height:720px; overflow:hidden; background:var(--espresso); padding:0}
.hero-media{position:absolute; inset:-10% 0 -10% 0; will-change:transform}
/* The file is cropped so the ring sits at exactly 50% of its HEIGHT, so the
   vertical position needs no tuning at any viewport. On wide screens the photo
   fits by width and the horizontal value is irrelevant. On tall/narrow screens
   (tablet portrait, phones) it fits by height and the sides crop — 56.5% is the
   ring's own horizontal position in the file, so the ring stays in view.
   If the photo changes, re-measure the ring rather than guessing this value. */
.hero-media img{width:100%; height:100%!important; object-fit:cover; object-position:56.5% 50%}
.hero-scrim{position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(12,9,7,.40) 0%, rgba(12,9,7,.04) 34%, rgba(12,9,7,.52) 100%);}
.hero-inner{
  position:relative; z-index:3; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  text-align:center; padding:0 24px 7vh;
}
.hero-mark{
  font-family:'Italiana',serif; color:#F4EDE3; margin:0 0 16px;
  font-size:clamp(1.7rem,4.6vw,3.5rem); letter-spacing:.16em; line-height:1; text-transform:uppercase;
}
.hero-lede{color:rgba(244,237,227,.88); font-size:clamp(.9rem,1.1vw,1rem); max-width:30em; margin:0 0 24px}

/* ---------- marquee : seamless, constant speed ---------- */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:15px 0; overflow:hidden; white-space:nowrap; background:var(--bone);
}
.marquee-track{display:inline-flex; will-change:transform; animation:slide linear infinite}
.marquee-track span{
  font-family:'Italiana',serif; font-size:.78rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-3); padding:0 24px;
}
.marquee-track span i{color:var(--gold); font-style:normal}
/* the track is cloned to exactly 2x, so -50% lands on an identical frame */
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- intro : the statement now sits in a real section ---------- */
.intro{position:relative; text-align:center; padding:9vh 0 8vh}
/* .intro-grid is still used by the About section below */
.intro-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:end; text-align:left}
@media(max-width:900px){ .intro-grid{grid-template-columns:1fr; gap:30px; align-items:start} }

.intro .display{max-width:22ch; margin:0 auto}
.intro-lead p{max-width:52ch; margin:20px auto 20px; font-size:.97rem}

/* one quiet line of credentials, separated by small gold dots — no boxes,
   no dividers, no numbering */
.intro-facts{
  list-style:none; margin:40px auto 0; padding:0;
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px 0;
}
.intro-facts li{
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center;
}
.intro-facts li + li::before{
  content:''; width:4px; height:4px; border-radius:50%; background:var(--gold);
  margin:0 22px; opacity:.8;
}
@media(max-width:760px){
  .intro-facts{flex-direction:column; align-items:center; gap:12px; margin-top:32px}
  .intro-facts li + li::before{display:none}
}

/* ---------- process : auto-advancing rail, never blocks scroll ---------- */
.proc{background:var(--bone-2); overflow:hidden}
.proc-head{display:flex; justify-content:space-between; align-items:flex-end; gap:26px; flex-wrap:wrap; margin-bottom:5vh}
.proc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
/* 2x2 on tablet AND phone: the sequence stays visible as a set, and nothing
   ever scrolls sideways */
@media(max-width:900px){ .proc-grid{grid-template-columns:repeat(2,1fr); gap:30px 18px} }
@media(max-width:480px){ .proc-card p{font-size:.8rem} .proc-card h3{font-size:1rem} }
.proc-card{margin:0}
.proc-card .shot{aspect-ratio:4/5; overflow:hidden; background:var(--bone)}
.proc-card .shot img{width:100%; height:100%!important; object-fit:cover}
.proc-card .cap{display:flex; align-items:baseline; gap:10px; margin-top:14px}
.proc-card .n{font-family:'Italiana',serif; font-size:.8rem; letter-spacing:.14em; color:var(--gold-deep)}
.proc-card h3{font-family:'Libre Caslon Display',serif; font-weight:400; font-size:1.12rem; color:var(--ink); margin:0}
.proc-card p{font-size:.85rem; margin:8px 0 0; color:var(--ink-2)}

/* ---------- gallery : consistent tiles, consistent captions ---------- */
.gal-head{display:flex; justify-content:space-between; align-items:flex-end; gap:26px; flex-wrap:wrap; margin-bottom:6vh}
.plates{display:grid; grid-template-columns:repeat(4,1fr); gap:44px 28px}
@media(max-width:1040px){ .plates{grid-template-columns:repeat(3,1fr); gap:36px 24px} }
@media(max-width:780px){ .plates{grid-template-columns:repeat(2,1fr); gap:30px 20px} }
@media(max-width:520px){ .plates{grid-template-columns:1fr} }
.plate{margin:0; position:relative}
/* No vertical offset: every tile the same size, every caption on the same
   baseline, so the specs read as one consistent column of information.
   The editorial feel comes from the generous gaps and the absence of cards,
   not from staggering. */
.plate .shot{overflow:hidden; background:var(--bone)}
.plate img{width:100%; transition:transform 1.1s var(--ease-out)}
.plate:hover img{transform:scale(1.03)}
/* every caption identical: name left, index right, spec beneath */
.plate figcaption{margin-top:14px; padding-top:11px; border-top:1px solid var(--line)}
.plate .row{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.plate .nm{font-family:'Libre Caslon Display',serif; font-size:.95rem; color:var(--ink); line-height:1.3}
.plate .idx{font-family:'Italiana',serif; font-size:.68rem; letter-spacing:.16em; color:var(--ink-3); flex:0 0 auto}
.plate .spec{display:block; font-size:.74rem; line-height:1.55; letter-spacing:.02em; color:var(--ink-3); margin-top:3px}

/* ---------- dark interlude : no photo, just the type ---------- */
.dark{background:var(--espresso); color:#E8DFD3; text-align:center}
.dark .display{color:#F4EDE3; max-width:18ch; margin:0 auto}
.dark .label{color:rgba(232,223,211,.5)}
.dark p.body{max-width:42ch; margin:24px auto 26px; color:rgba(232,223,211,.74); font-size:.95rem}

/* ---------- close : simple, centered, no brackets ---------- */
.close{text-align:center; background:var(--cream)}
.close .display{max-width:26ch; margin:0 auto 14px; text-wrap:balance}
.close p{max-width:40ch; margin:0 auto 30px; font-size:.95rem}
.close .rule{width:52px; height:1px; background:var(--gold); margin:0 auto 28px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:56px 0 0}
.foot{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; padding-bottom:44px}
@media(max-width:760px){ .foot{grid-template-columns:1fr 1fr; gap:32px 20px} .foot-brand{grid-column:1 / -1} }
.foot .mark{font-family:'Italiana',serif; font-size:1rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink)}
.foot-brand p{font-size:.86rem; color:var(--ink-3); max-width:34ch; margin:12px 0 18px}
.foot-col h4{font-family:'Italiana',serif; font-weight:400; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 14px}
.foot-col a{display:block; font-size:.86rem; color:var(--ink-2); padding:4px 0; transition:color .25s var(--ease)}
.foot-col a:hover{color:var(--ink)}
.foot-legal{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:20px; padding-bottom:26px;
  font-size:.72rem; letter-spacing:.06em; color:var(--ink-3);
}
.foot-legal nav{display:flex; gap:22px}
.foot-legal a{color:var(--ink-3); transition:color .25s var(--ease)}
.foot-legal a:hover{color:var(--ink)}

/* ---------- Instagram link (icon + text are one link) ---------- */
.ig-link{
  display:inline-flex; align-items:center; gap:9px; color:var(--ink-2);
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; transition:color .25s var(--ease);
}
.ig-link:hover{color:var(--ink)}
.ig-link .ig{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.4; flex:0 0 auto}
.ig-link .ig .ig-dot{fill:currentColor; stroke:none}
.ig-link span{border-bottom:1px solid transparent; transition:border-color .25s var(--ease)}
.ig-link:hover span{border-bottom-color:currentColor}
.foot-brand .ig-link span{text-transform:none; letter-spacing:.02em; font-size:.84rem}

/* ---------- testimonials (on the dark ground) ---------- */
.quotes{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px;
  margin-top:6vh; text-align:left;
}
@media(max-width:900px){ .quotes{grid-template-columns:1fr; gap:26px; max-width:46ch; margin-inline:auto} }
.quote{margin:0; padding-top:20px; border-top:1px solid rgba(232,223,211,.22)}
.quote blockquote{margin:0}
.quote blockquote p{
  font-family:'Libre Caslon Display',serif; font-weight:400; font-size:.98rem; line-height:1.62;
  color:rgba(232,223,211,.88); margin:0;
}
.quote figcaption{
  font-family:'Italiana',serif; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-top:16px;
}

/* ---------- booking ---------- */
.book-grid{
  display:grid; grid-template-columns:1.12fr .88fr; gap:56px;
  text-align:left; margin-top:7vh; align-items:start;
}
@media(max-width:900px){ .book-grid{grid-template-columns:1fr; gap:38px} }
.field{margin-bottom:18px}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:560px){ .f-row{grid-template-columns:1fr; gap:0} }
.field label{
  display:block; font-family:'Jost',sans-serif; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:7px;
}
.field label .opt{text-transform:none; letter-spacing:0; font-size:.78rem}
.book-form{
  /* the panel is a shade darker than the page, the fields a shade lighter —
     two steps of contrast, so the form reads as its own surface */
  background:#FAF7F1; border:1px solid #DCD1BF;
  padding:34px 32px 30px;
  box-shadow:0 1px 2px rgba(26,21,18,.04), 0 22px 44px -26px rgba(26,21,18,.22);
}
@media(max-width:560px){ .book-form{padding:24px 18px 22px} }
.field input, .field select, .field textarea{
  width:100%; font-family:'Jost',sans-serif; font-weight:300; font-size:.95rem; color:var(--ink);
  background:#FFFDF9;
  /* --ink-3 is well over 3:1 against both the field and the panel, so the
     edge of every box clears WCAG's 3:1 for form controls */
  border:1px solid var(--ink-3); border-radius:2px;
  padding:11px 13px; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{color:#A89D92}
.field textarea{min-height:110px; resize:vertical; line-height:1.6}
.field input:hover, .field select:hover, .field textarea:hover{border-color:var(--ink-2)}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(176,141,87,.22);
}
/* appearance:none strips the native arrow, so draw one — otherwise a
   dropdown is indistinguishable from a text box */
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234B423B' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.submit{
  margin-top:10px; background:var(--ink); color:var(--bone); border:none; border-radius:0;
  font-family:'Jost',sans-serif; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  padding:14px 30px; cursor:pointer; transition:background .3s var(--ease);
}
.submit:hover{background:#000}
.consent{font-size:.76rem!important; color:var(--ink-3); margin:16px 0 0!important; max-width:44ch!important}

.book-aside{border-top:1px solid var(--line); padding-top:22px}
.book-aside .info{margin-bottom:22px}
.book-aside h3{
  font-family:'Italiana',serif; font-weight:400; font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 6px;
}
.book-aside p{margin:0; font-size:.92rem; color:var(--ink-2)}
.book-aside .muted{font-size:.78rem; color:var(--ink-3); font-style:italic}
.book-aside .areas{
  list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:2px 0;
  font-size:.76rem; letter-spacing:.05em; color:var(--ink-3);
}
.book-aside .areas li + li::before{content:'·'; margin:0 8px; color:var(--gold)}
.faq-link{margin-top:8px}

/* ---------- reveals ---------- */
.rise{clip-path:inset(100% 0 0 0); transition:clip-path 1.1s var(--ease-out)}
.rise > *{transform:scale(1.07); transition:transform 1.3s var(--ease-out)}
.rise.in{clip-path:inset(0 0 0 0)}
.rise.in > *{transform:scale(1)}
.fade{opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease-out), transform .9s var(--ease-out)}
.fade.in{opacity:1; transform:none}
.w{display:inline-block; opacity:0; filter:blur(6px); transform:translateY(.3em);
   transition:opacity .7s var(--ease-out), filter .8s var(--ease-out), transform .8s var(--ease-out)}
.w.in{opacity:1; filter:blur(0); transform:none}

/* an <svg> is a replaced element — inset:0 alone leaves it at 300x150 */
.grain{position:fixed; inset:0; width:100%; height:100%; z-index:80; pointer-events:none; opacity:.20; mix-blend-mode:multiply}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition-duration:.01ms!important}
  .rise{clip-path:none} .rise > *{transform:none}
  .fade,.w{opacity:1; transform:none; filter:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   Production additions — not in the mockup, and invisible unless used
   ========================================================================== */

/* Skip link: only appears when a keyboard user tabs to it */
.skip-link{position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:var(--bone);
  padding:12px 18px; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase}
.skip-link:focus{left:0}

/* Focus rings for keyboard users; :focus-visible keeps them off mouse clicks */
a:focus-visible, button:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* If JavaScript fails, never leave revealed content invisible */
.no-js .rise{clip-path:none}
.no-js .rise > *{transform:none}
.no-js .fade, .no-js .w{opacity:1; transform:none; filter:none}

/* Form states (consultation request) */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-status{display:none; padding:13px 15px; margin-bottom:20px; font-size:.9rem; border:1px solid}
.form-status.is-ok{display:block; background:#EFF5EE; border-color:#C6DCC2; color:#37613A}
.form-status.is-err{display:block; background:#FBEDED; border-color:#E6C4C4; color:#A33B3B}
.field.has-error input, .field.has-error textarea{border-color:#A33B3B}
.submit[disabled]{opacity:.6; cursor:not-allowed}

/* About: portrait of Linnea (the frame was a placeholder in the mockup) */
.about-photo{aspect-ratio:4/5; overflow:hidden; background:var(--bone-2)}
.about-photo img{width:100%; height:100%!important; object-fit:cover}

/* ---------- Content pages: FAQ, Sizing & Returns, Privacy, Terms ---------- */
section.page-head{padding:20vh 0 5vh; text-align:center}
.page-head .label{display:block; margin-bottom:14px}
.page-head .display{max-width:22ch; margin:0 auto}
.page-head .lede{max-width:54ch; margin:18px auto 0; font-size:.97rem}
.page-head .updated{margin-top:16px; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
section.page-body{padding:2vh 0 12vh}
.prose{max-width:720px; margin:0 auto}
.prose h2{font-family:'Libre Caslon Display',serif; font-weight:400; font-size:1.4rem; line-height:1.25; color:var(--ink); margin:44px 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:'Jost',sans-serif; font-weight:400; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:26px 0 8px}
.prose p, .prose li{font-size:.97rem}
.prose ul{margin:0 0 1em; padding-left:1.15em}
.prose li{margin-bottom:7px}
.prose a{color:var(--ink); border-bottom:1px solid var(--line); transition:border-color .25s var(--ease)}
.prose a:hover{border-bottom-color:var(--ink)}
.prose strong{font-weight:500; color:var(--ink)}
.prose .aside{border-top:1px solid var(--line); margin-top:44px; padding-top:22px; font-size:.86rem; color:var(--ink-3)}

/* FAQ accordion — native <details>, works with no JavaScript */
.faq-list{max-width:760px; margin:0 auto; border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none; cursor:pointer; position:relative; padding:22px 44px 22px 2px;
  font-family:'Libre Caslon Display',serif; font-size:1.08rem; line-height:1.35; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:'Jost',sans-serif; font-weight:300; font-size:1.45rem; color:var(--gold);
  transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item summary:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.faq-item .answer{padding:0 2px 24px; max-width:64ch}
.faq-item .answer p{margin:0 0 .8em; font-size:.97rem}
.faq-item .answer a{color:var(--ink); border-bottom:1px solid var(--line)}
.page-cta{text-align:center; margin-top:8vh}
.page-cta p{max-width:44ch; margin:0 auto 22px}

/* Simple pages: 404 now, FAQ / policies later */
.page-simple{padding:22vh 0 14vh; text-align:center}
.page-simple .code{font-family:'Italiana',serif; font-size:2.6rem; letter-spacing:.12em; color:var(--gold); margin-bottom:10px}
.page-simple .display{max-width:22ch; margin:0 auto}
.page-simple p{max-width:44ch; margin:18px auto 28px}
.page-simple .links{display:flex; gap:30px; justify-content:center; flex-wrap:wrap}

/* ---------- Phone menu (under 760px) ----------
   The desktop nav is reused as a full-screen bone panel, so the links exist
   once. It sits at z-index:-1 inside the header's stacking context: above the
   header's own backdrop, below the wordmark and the Menu/Close button. */
.nav-toggle{display:none}
@media(max-width:760px){
  .nav-toggle{
    display:block; padding:10px 0 10px 16px; margin:-10px 0;
    background:none; border:0; color:inherit; cursor:pointer;
    font:400 .72rem/1 'Jost',sans-serif; letter-spacing:.18em; text-transform:uppercase;
  }
  .no-js .nav-toggle{display:none}
  header nav{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
    position:fixed; top:0; left:0; right:0; height:100vh; height:100dvh; z-index:-1;
    background:var(--bone);
    opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility 0s linear .35s;
  }
  header nav a{
    font-family:'Libre Caslon Display',serif; font-size:2rem; letter-spacing:.01em; text-transform:none;
    color:var(--ink); transform:translateY(8px); transition:transform .45s var(--ease-out);
  }
  header.menu-open{color:var(--ink)}
  header.menu-open nav{opacity:1; visibility:visible; transition:opacity .35s var(--ease)}
  header.menu-open nav a{transform:none}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  header nav, header nav a{transition:none}
}