/* DIRECTION B - "THE MIRROR"
   Structural thesis: one centred threshold page splits school from salon, and each inner page is a
   vertical run of full-viewport numbered chapters carrying a single idea apiece, led by typographic
   scale contrast, with pink used only as light (rule, glow, one word) and never as fill. */

/* ---------- TOKENS ---------- */
:root{
  /* her identity - do not replace */
  --ink:#070301;
  --surface:#0F0B08;
  --raised:#17100B;
  --chrome:#21170E;
  --border:#41352A;
  --pink:#FF8EBA;
  --pink-hot:#F078A8;
  --paper:#F5F1ED;
  --muted:#AAA39D;
  --faint:#8C837B;
  --field-border:#7A6F66;

  /* direction B additions: pink as light */
  --glow-core:rgba(240,120,168,0.30);
  --glow-mid:rgba(240,120,168,0.12);
  --glow-none:rgba(240,120,168,0);
  --rule-pink:rgba(255,142,186,0.60);
  --rule-quiet:rgba(122,111,102,0.30);
  --veil:rgba(7,3,1,0.94);

  /* type */
  --font-display:"Big Shoulders Display","Oswald","Arial Narrow",Arial,sans-serif;
  --font-body:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-script:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive;

  --t-monument:clamp(3.2rem,15vw,10rem);
  --t-huge:clamp(2.6rem,9vw,6.5rem);
  --t-big:clamp(2rem,5.5vw,3.6rem);
  --t-mid:clamp(1.5rem,3.4vw,2.2rem);
  --t-body:1.0625rem;
  --t-small:0.9375rem;
  --t-micro:0.75rem;

  --track-wide:0.34em;
  --track-mid:0.18em;
  --track-nav:0.05em;

  /* layout */
  --rail-w:14.5rem;
  --measure:34rem;
  --gap-page:clamp(1.25rem,5vw,4.5rem);
  --chapter-pad:clamp(4.5rem,9vw,7rem);
  /* the fixed mobile bar is two rows: the logo row and the links row */
  --topbar-h:6rem;

  /* the only place a colour literal is allowed: the select caret, drawn in --muted */
  --caret:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%23AAA39D' stroke-width='1.4'/></svg>");
}

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{overflow-x:clip;max-width:100%;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:dark;}
body{
  margin:0;
  background-color:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:var(--t-body);
  font-weight:300;
  line-height:1.8;
  letter-spacing:0.01em;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
/* the attribute must beat any class that sets display, or a "hidden" dialog
   or cart would still paint */
[hidden]{display:none!important;}
h1,h2,h3{font-weight:400;margin:0;overflow-wrap:anywhere;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}

a{color:var(--pink);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:0.35em;}
:focus-visible{outline:2px solid var(--pink);outline-offset:4px;border-radius:2px;}

.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  background-color:var(--chrome);color:var(--paper);
  padding:0.9rem 1.25rem;min-height:44px;display:inline-flex;align-items:center;
  border:1px solid var(--pink);font-size:var(--t-small);
}
.skip:focus{left:0.5rem;top:0.5rem;}

/* ---------- SHARED TYPE PIECES ---------- */
.script{font-family:var(--font-script);font-weight:400;line-height:1.25;}
.caps{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:var(--track-wide);
  font-size:var(--t-micro);
  color:var(--faint);
}
.display{
  font-family:var(--font-display);
  text-transform:uppercase;
  line-height:0.92;
  letter-spacing:0.045em;
  font-weight:500;
}
.standfirst{
  color:var(--muted);
  max-width:var(--measure);
  font-size:1.0625rem;
  line-height:1.85;
}
.hot{color:var(--pink-hot);}
.pinkword{color:var(--pink);}
.rule-quiet{height:1px;border:0;margin:0;background-color:var(--border);}

/* ---------- THRESHOLD (index) ---------- */
.threshold{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
  padding:clamp(2.5rem,8vw,5rem) var(--gap-page);
  position:relative;
  isolation:isolate;
}
.threshold-glow{
  position:absolute;z-index:-1;
  top:50%;left:50%;transform:translate(-50%,-58%);
  width:min(120vw,70rem);height:min(120vw,70rem);
  background-image:radial-gradient(circle,var(--glow-core) 0%,var(--glow-mid) 34%,var(--glow-none) 68%);
  animation:breathe 11s ease-in-out infinite;
  pointer-events:none;
}
@keyframes breathe{
  0%,100%{opacity:0.62;transform:translate(-50%,-58%) scale(1);}
  50%{opacity:1;transform:translate(-50%,-58%) scale(1.07);}
}
/* her official logo is the h1. It is never recoloured: the grey script on
   near-black is low contrast by design, so a faint pink light sits behind
   it (and only here, on the cover) to lift it off the ground. */
.wordmark{
  margin:0;
  position:relative;
  isolation:isolate;
  width:min(100%,clamp(16rem,72vw,36rem));
}
.wordmark::before{
  content:"";position:absolute;z-index:-1;
  inset:-28% -14%;
  background-image:radial-gradient(ellipse at center,var(--glow-mid) 0%,var(--glow-none) 66%);
  pointer-events:none;
}
.wordmark-img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 0 1.25rem var(--glow-mid));
}
.threshold-sub{
  margin-top:clamp(1.5rem,4vw,2.5rem);
  font-size:var(--t-micro);
  text-transform:uppercase;
  letter-spacing:var(--track-mid);
  color:var(--muted);
  line-height:2.2;
}
.threshold-rule{
  width:min(20rem,70%);
  margin:clamp(2.5rem,7vw,4rem) auto;
  height:1px;border:0;
  background-image:linear-gradient(to right,var(--glow-none),var(--rule-pink),var(--glow-none));
}
.choice{
  font-size:clamp(1.05rem,2.4vw,1.35rem);
  color:var(--muted);
  line-height:2.4;
  max-width:38rem;
}
.door{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:var(--track-mid);
  font-size:clamp(1.5rem,4.5vw,2.25rem);
  color:var(--paper);
  border-bottom:1px solid var(--rule-pink);
  padding:0 0.1em;
  transition:color 0.5s ease,letter-spacing 0.5s ease;
}
.door:hover,.door:focus-visible{color:var(--pink);letter-spacing:0.26em;text-decoration:none;}
/* the school description on the threshold — sits quieter than the two
   doors so it reads as context, not as the choice itself */
.intro{
  display:block;
  max-width:40rem;
  margin:0 auto clamp(2.25rem,5vw,3.25rem);
  color:var(--muted);
  /* matches .choice — the threshold's own quiet-paragraph voice, with the
     wide tracking the rest of this page is built on */
  font-size:clamp(1rem,2.1vw,1.2rem);
  line-height:2.1;
  letter-spacing:var(--track-nav);
  text-wrap:pretty;
}

.choice-sep{
  display:block;
  font-family:var(--font-script);
  font-size:1.6rem;
  color:var(--faint);
  line-height:1.8;
}
.threshold-foot{
  margin-top:clamp(3rem,9vw,5.5rem);
  color:var(--faint);
  font-size:var(--t-micro);
  text-transform:uppercase;
  letter-spacing:var(--track-mid);
  line-height:2.4;
}
.threshold-foot a{
  color:var(--faint);
  display:inline-flex;align-items:center;min-height:44px;min-width:44px;
  overflow-wrap:anywhere;
}
.threshold-foot a:hover{color:var(--pink);}
.threshold-foot .disclaim{
  text-transform:none;letter-spacing:0.02em;font-size:var(--t-small);
  display:block;margin-top:1.25rem;line-height:1.7;max-width:32rem;margin-left:auto;margin-right:auto;
}

/* ---------- TOP BAR (mobile) ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;flex-wrap:wrap;align-items:center;
  padding:0 0.75rem;
  background-color:var(--veil);
  border-bottom:1px solid var(--border);
  min-width:0;
}
/* the logo, small, as the way home */
.topbar-mark{
  display:inline-flex;align-items:center;min-height:44px;
  padding:0.2rem 0;
  flex:0 0 auto;min-width:0;
}
.topbar-mark img{height:2.6rem;width:auto;display:block;}
.topbar-mark:hover,.topbar-mark:focus-visible{text-decoration:none;}
.topbar-mark:hover img,.topbar-mark:focus-visible img{filter:drop-shadow(0 0 0.5rem var(--glow-core));}
/* six destinations do not fit one narrow row beside the script mark, so the
   links take their own row and may scroll inside themselves rather than
   pushing the page sideways */
.topbar-links{
  display:flex;flex-wrap:nowrap;gap:0;
  flex:1 1 100%;min-width:0;
  overflow-x:auto;
  border-top:1px solid var(--border);
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.topbar-links::-webkit-scrollbar{display:none;}
.topbar-links a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 0.35rem;
  flex:0 0 auto;white-space:nowrap;
  /* tightened from --track-mid so all five destination labels fit a 375px row
     without the last one falling off the end of the scroller */
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:var(--track-nav);
  color:var(--muted);
}
.topbar-links a:first-child{padding-left:0;}
.topbar-links a[aria-current="page"]{color:var(--pink);border-bottom:1px solid var(--rule-pink);}
.topbar-links a:hover{color:var(--pink);}

/* ---------- SIDE RAIL (desktop) ---------- */
.rail{display:none;}

/* ---------- PAGE SHELL ---------- */
.shell{padding-top:var(--topbar-h);}

/* ---------- CHAPTERS ---------- */
.chapter{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--chapter-pad) var(--gap-page);
  border-top:1px solid var(--border);
  position:relative;
  /* clear the fixed mobile topbar when an anchor or the skip link lands here */
  scroll-margin-top:calc(var(--topbar-h) + 0.6rem);
}
#main{scroll-margin-top:calc(var(--topbar-h) + 0.6rem);}
.chapter:first-of-type{border-top:0;}
.chapter-inner{width:100%;max-width:62rem;margin:0 auto;min-width:0;}
.numeral{
  font-family:var(--font-display);
  font-size:var(--t-small);
  letter-spacing:var(--track-wide);
  color:var(--pink);
  margin-bottom:1.75rem;
}
.numeral::after{
  content:"";display:block;width:2.5rem;height:1px;margin-top:0.75rem;
  background-color:var(--rule-pink);
}
.chapter h1,.chapter h2{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-weight:500;
  font-size:var(--t-huge);
  line-height:0.9;
  letter-spacing:0.05em;
  margin-bottom:1.5rem;
}
.chapter h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:var(--t-mid);
  letter-spacing:0.12em;
  line-height:1.1;
}
.chapter .standfirst + .standfirst{margin-top:1.25rem;}
.body-block{margin-top:2.5rem;max-width:var(--measure);color:var(--muted);}
.body-block p + p{margin-top:1.25rem;}

/* the memorable typographic moment */
.creed{
  margin:clamp(2rem,6vw,3.5rem) 0 0;
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:var(--t-monument);
  line-height:0.86;
  letter-spacing:0.02em;
  color:var(--paper);
  overflow-wrap:anywhere;
}
.creed span{display:block;}
.creed .creed-hot{color:var(--pink-hot);}
.creed .creed-script{
  font-family:var(--font-script);
  text-transform:none;
  font-size:clamp(1.6rem,5.5vw,3.6rem);
  color:var(--muted);
  letter-spacing:0;
  line-height:1.25;
  margin-top:0.12em;
  padding-left:0.1em;
}

.chapter h2.creed{
  font-size:var(--t-monument);
  line-height:0.86;
  letter-spacing:0.02em;
  margin-bottom:0;
}
.accent-script{
  font-family:var(--font-script);
  color:var(--pink);
  font-size:clamp(1.75rem,6vw,3.25rem);
  line-height:1.35;
  margin-top:clamp(2rem,5vw,3rem);
  overflow-wrap:anywhere;
}

/* ledger rows (programs) */
.ledger{margin-top:clamp(2.5rem,6vw,4rem);border-top:1px solid var(--border);}
.ledger-row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0.75rem;
  padding:clamp(1.75rem,4vw,2.5rem) 0;
  border-bottom:1px solid var(--border);
  min-width:0;
}
.ledger-figure{
  font-family:var(--font-display);
  font-size:clamp(3rem,11vw,5.5rem);
  line-height:0.85;
  color:var(--pink);
  letter-spacing:0.01em;
  min-width:0;
}
.ledger-figure small{
  display:block;
  font-family:var(--font-body);
  font-size:var(--t-micro);
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--faint);
  margin-top:0.6rem;
}
.ledger-body{min-width:0;}
.ledger-body h3{margin-bottom:0.75rem;}
.ledger-body p{color:var(--muted);max-width:var(--measure);}
.ledger-body p + p{margin-top:0.75rem;}
.ledger-note{color:var(--faint);font-size:var(--t-small);}

/* cost list */
.costs{margin-top:clamp(2.5rem,6vw,3.5rem);max-width:44rem;}
.cost-line{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0.35rem 1rem;
  padding:1.1rem 0;border-bottom:1px solid var(--border);
  min-width:0;
}
.cost-label{
  flex:1 1 12rem;min-width:0;
  text-transform:uppercase;letter-spacing:var(--track-mid);
  font-size:var(--t-small);color:var(--paper);
}
.cost-value{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,4vw,2.4rem);
  letter-spacing:0.04em;
  color:var(--pink);
  line-height:1.1;
  min-width:0;
}
.cost-value.is-unknown{color:var(--paper);font-size:clamp(1.15rem,3vw,1.5rem);}
.cost-sub{flex:1 1 100%;color:var(--faint);font-size:var(--t-small);line-height:1.7;}

/* plain marked lists */
.list-lines{margin-top:2rem;max-width:var(--measure);}
.list-lines li{
  padding:0.85rem 0;border-bottom:1px solid var(--rule-quiet);
  text-transform:uppercase;letter-spacing:var(--track-mid);
  font-size:var(--t-small);color:var(--paper);
  overflow-wrap:anywhere;
}
.list-lines li::before{content:"/ ";color:var(--pink);}
.list-inline{margin-top:1.5rem;color:var(--muted);max-width:var(--measure);}

/* curriculum topics — each opens to show what that area looks like.
   <details> so it works with JS off and is keyboard-operable. */
.topics{margin-top:2rem;max-width:var(--measure);list-style:none;padding:0;}
.topics > li{border-bottom:1px solid var(--rule-quiet);}
.topic summary,
.topic-plain{
  display:flex;align-items:center;gap:0.6rem;
  min-height:44px;padding:0.85rem 0;
  text-transform:uppercase;letter-spacing:var(--track-mid);
  font-size:var(--t-small);color:var(--paper);
  overflow-wrap:anywhere;min-width:0;
}
.topic summary{cursor:pointer;list-style:none;}
.topic summary::-webkit-details-marker{display:none;}
.topic summary::before,
.topic-plain::before{content:"/";color:var(--pink);flex:none;}
.topic summary::after{
  content:"+";margin-left:auto;flex:none;
  color:var(--pink);font-size:1.15rem;line-height:1;
  transition:transform .3s ease;
}
.topic[open] summary::after{transform:rotate(45deg);}
.topic summary:hover{color:var(--pink);}
.topic-body{padding:0 0 1.4rem;max-width:var(--measure);}
.topic-body p{color:var(--muted);font-size:1rem;line-height:1.8;}
.topic-slot{
  margin-top:0.9rem;padding:0.85rem 1rem;
  border:1px dashed var(--rule-quiet);border-radius:4px;
  color:var(--faint);font-size:0.85rem;
}
.topic-shots{
  margin-top:1rem;display:grid;gap:0.75rem;
  grid-template-columns:repeat(auto-fit,minmax(0,10rem));
}
.topic-shots figure{margin:0;min-width:0;}
.topic-shots img{
  width:100%;height:10rem;object-fit:cover;
  border:1px solid var(--rule-quiet);
}
.topic-shots figcaption{
  margin-top:0.4rem;color:var(--faint);font-size:0.78rem;
  text-transform:uppercase;letter-spacing:var(--track-mid);
}
@media (prefers-reduced-motion:reduce){
  .topic summary::after{transition:none;}
}

/* what sets the school apart — her own five points, same body face and
   measure as .standfirst so the chapter reads in one voice */
.pillars{
  margin-top:clamp(1.75rem,4vw,2.5rem);
  max-width:var(--measure);
  list-style:none;
  padding:0;
  display:grid;
  gap:1.1rem;
}
.pillars li{
  color:var(--muted);
  font-size:1.0625rem;
  line-height:1.85;
  padding-left:1.4rem;
  position:relative;
  min-width:0;
  overflow-wrap:anywhere;
}
.pillars li::before{
  content:"/";
  position:absolute;
  left:0;
  color:var(--pink);
}
.pillars b{color:var(--paper);font-weight:500;}

/* photo plates with pink light behind */
.plates{
  margin-top:clamp(2.5rem,6vw,4rem);
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2.5rem,7vw,4rem);
}
.plate{margin:0;position:relative;isolation:isolate;max-width:20rem;min-width:0;}
.plate::before{
  content:"";position:absolute;z-index:-1;
  inset:-14%;
  background-image:radial-gradient(circle,var(--glow-core) 0%,var(--glow-mid) 45%,var(--glow-none) 72%);
  pointer-events:none;
}
.plate img{
  width:100%;max-width:20rem;height:auto;
  border:1px solid var(--border);
  background-color:var(--raised);
}
.plate figcaption{
  margin-top:1rem;color:var(--faint);font-size:var(--t-small);line-height:1.7;
}
.plate-note{
  border:1px solid var(--field-border);
  background-color:var(--raised);
  padding:1.5rem;
  color:var(--muted);
  font-size:var(--t-small);
  line-height:1.8;
  max-width:20rem;
  min-width:0;
}
.plate-note .caps{display:block;margin-bottom:0.6rem;}
.plate-note .note-link{
  display:flex;align-items:center;min-height:44px;
  border-top:1px solid var(--border);margin-top:0.75rem;
}

/* products */
.shelf{
  margin-top:clamp(2.5rem,6vw,3.5rem);
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:2.5rem;
}
.item{min-width:0;}
/* the bottles are transparent cut-outs sitting on the black, lit from
   beneath: no box, no border, no background — only light. The 3:4 frame
   crops the cut-out's empty margins so the bottle stands tall in it. */
.item-media{position:relative;max-width:15rem;padding-bottom:44px;min-width:0;}
.item-shot{
  display:block;position:relative;isolation:isolate;
  width:100%;max-width:15rem;aspect-ratio:3/4;
  min-width:0;
}
.item-shot::before{
  content:"";position:absolute;z-index:-1;
  left:-18%;right:-18%;top:28%;bottom:-8%;
  background-image:radial-gradient(ellipse at 50% 68%,var(--glow-mid) 0%,var(--glow-none) 68%);
  pointer-events:none;
}
.item-shot img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  border:0;background-color:transparent;
}
a.item-shot{cursor:zoom-in;}
a.item-shot:hover,a.item-shot:focus-visible{text-decoration:none;}
a.item-shot:hover img,a.item-shot:focus-visible img{filter:drop-shadow(0 0 0.75rem var(--glow-core));}
/* the small caption under the bottle is part of the link: it says what the
   bottle does when pressed */
.item h3{margin-top:1.25rem;font-size:1.25rem;letter-spacing:0.1em;}
.item .price{
  font-family:var(--font-display);font-size:1.75rem;color:var(--pink);
  letter-spacing:0.04em;margin-top:0.4rem;line-height:1.2;
}
.item .size{color:var(--faint);font-size:var(--t-small);}
.bundles{margin-top:2.5rem;border-top:1px solid var(--border);max-width:44rem;}

/* contact / action block */
.contact{margin-top:clamp(2.5rem,6vw,3.5rem);}
.contact-line{
  display:block;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:var(--track-mid);
  font-size:clamp(1.4rem,5vw,2.4rem);
  color:var(--paper);
  min-height:44px;
  padding:0.45rem 0;
  line-height:1.35;
  overflow-wrap:anywhere;
  transition:color 0.4s ease;
}
.contact-line:hover,.contact-line:focus-visible{color:var(--pink);}
.contact-meta{margin-top:2rem;color:var(--muted);line-height:2;font-size:var(--t-small);}
.contact-meta .inline-link{display:inline-flex;align-items:center;min-height:44px;}

/* cross link between destinations */
.crosslink{
  margin-top:clamp(3rem,8vw,4.5rem);padding-top:2rem;border-top:1px solid var(--border);
}
.crosslink a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:var(--track-mid);font-size:1.25rem;
}

/* footer */
.foot{
  padding:clamp(3rem,7vw,4.5rem) var(--gap-page);
  border-top:1px solid var(--border);
  background-color:var(--surface);
  color:var(--faint);
  font-size:var(--t-small);
  line-height:1.9;
}
.foot-inner{max-width:62rem;margin:0 auto;min-width:0;}
.foot a{color:var(--muted);}
.foot a:hover{color:var(--pink);}
.foot .foot-mark{margin:0;}
.foot .foot-mark img{width:9rem;height:auto;}
.foot ul{margin-top:1.5rem;}
.foot li{padding:0.1rem 0;}
.foot li a{display:inline-flex;align-items:center;min-height:44px;}
.foot .disclaim{margin-top:1.75rem;color:var(--faint);max-width:38rem;}
.foot .foot-links{display:flex;flex-wrap:wrap;gap:0 1.5rem;margin-top:0.75rem;}
.foot .foot-links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;}

/* ---------- MOTION (armed by JS only) ---------- */
[data-reveal]{opacity:1;}
.reveal-armed [data-reveal]{
  opacity:0;
  transform:translateY(0.6rem);
  transition:opacity 1s ease,transform 1s ease,letter-spacing 1.3s ease;
}
.reveal-armed [data-reveal].settle{letter-spacing:0.19em;}
.reveal-armed [data-reveal].is-in{opacity:1;transform:translateY(0);}
.reveal-armed [data-reveal].settle.is-in{letter-spacing:0.05em;}

/* ---------- BREAKPOINTS ---------- */
@media (min-width:34rem){
  .shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;}
  .plates{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}
}
@media (min-width:56rem){
  .ledger-row{grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);}
}
@media (min-width:64rem){
  .topbar{display:none;}
  .shell{padding-top:0;padding-left:var(--rail-w);}
  .rail{
    display:flex;flex-direction:column;
    position:fixed;top:0;left:0;bottom:0;width:var(--rail-w);z-index:40;
    padding:2.5rem 1.5rem;
    border-right:1px solid var(--border);
    background-color:var(--surface);
    overflow-y:auto;
  }
  .rail-mark{
    display:block;min-height:44px;
    width:100%;max-width:11.5rem;
  }
  .rail-mark img{width:100%;height:auto;display:block;}
  .rail-mark:hover,.rail-mark:focus-visible{text-decoration:none;}
  .rail-mark:hover img,.rail-mark:focus-visible img{filter:drop-shadow(0 0 0.75rem var(--glow-core));}
  .rail-heading{margin-top:2.5rem;}
  .rail-chapters{margin-top:1rem;}
  .rail-chapters a{
    display:flex;align-items:center;gap:0.75rem;min-height:44px;
    color:var(--muted);font-size:var(--t-micro);
    text-transform:uppercase;letter-spacing:var(--track-mid);
    border-left:1px solid var(--border);padding-left:0.85rem;
  }
  .rail-chapters a:hover{color:var(--pink);text-decoration:none;}
  .rail-chapters a[aria-current="true"]{color:var(--pink);border-left-color:var(--pink);}
  .rail-chapters a[aria-current="true"] .rail-num::after{content:"\2022";margin-left:0.35em;}
  .rail-num{font-family:var(--font-display);color:var(--pink);letter-spacing:0.1em;}
  .rail-foot{margin-top:auto;padding-top:2rem;}
  .rail-foot a{
    display:flex;align-items:center;min-height:44px;
    font-size:var(--t-micro);text-transform:uppercase;letter-spacing:var(--track-mid);
    color:var(--paper);
  }
  .rail-foot a:hover{color:var(--pink);text-decoration:none;}
  .rail-foot .caps{margin-bottom:0.25rem;}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .threshold-glow{animation:none;opacity:0.8;}
  .door,.contact-line{transition:none;}
  .reveal-armed [data-reveal]{opacity:1;transform:none;transition:none;}
  .reveal-armed [data-reveal].settle,
  .reveal-armed [data-reveal].settle.is-in{letter-spacing:0.05em;}
}

/* ==================================================================
   EXTENSION - apply.html, micro-locs.html, shop.html
   Same tokens, same chapter rhythm, same restraint. Pink stays light
   and edge here too: it is never a fill.
   ================================================================== */

/* ---------- THRESHOLD: the secondary destinations ---------- */
.threshold-nav{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:0 1.35rem;
  margin:0 auto 1.75rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--border);
  max-width:34rem;
  min-width:0;
}

/* ---------- RAIL: the other destinations ---------- */
.rail-elsewhere{margin-top:0.25rem;}

/* ---------- ACTIONS ---------- */
.acts{
  display:flex;flex-wrap:wrap;gap:0.75rem;
  margin-top:2rem;min-width:0;
}
.act{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5em;
  min-height:48px;padding:0.8rem 1.35rem;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:var(--track-mid);
  font-size:1.0625rem;
  line-height:1.2;
  text-align:center;
  color:var(--paper);
  background-color:transparent;
  border:1px solid var(--field-border);
  border-radius:0;
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  overflow-wrap:anywhere;
  min-width:0;
  transition:color 0.4s ease,border-color 0.4s ease,box-shadow 0.4s ease;
}
.act:hover,.act:focus-visible{
  color:var(--pink);
  border-color:var(--rule-pink);
  box-shadow:0 0 1.5rem var(--glow-mid);
  text-decoration:none;
}
.act--lead{border-color:var(--rule-pink);color:var(--pink);}
.act--lead:hover,.act--lead:focus-visible{box-shadow:0 0 2rem var(--glow-core);}

/* ---------- QUESTIONS ---------- */
.qa{
  margin-top:clamp(2rem,5vw,3rem);
  max-width:var(--measure);
  border-top:1px solid var(--border);
  min-width:0;
}
.qa-item{
  padding:1.5rem 0;
  border-bottom:1px solid var(--border);
  min-width:0;
}
.qa-item h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.15rem,2.7vw,1.45rem);
  letter-spacing:0.1em;
  line-height:1.15;
  overflow-wrap:anywhere;
}
.qa-item p{margin-top:0.85rem;color:var(--muted);}
.qa-item p + p{margin-top:0.85rem;}
.qa-figure{
  font-family:var(--font-display);
  color:var(--pink);
  font-size:1.35rem;
  letter-spacing:0.04em;
}

/* ---------- STAGES: a journey with no clock on it ---------- */
.stages .ledger-figure{
  font-size:clamp(2.2rem,7vw,3.6rem);
  letter-spacing:0.09em;
}
.stages .ledger-body h3{font-size:clamp(1.25rem,3vw,1.7rem);}

/* ---------- STEPS: what happens after you send it ---------- */
.steps{
  margin-top:clamp(2rem,5vw,3rem);
  max-width:var(--measure);
  border-top:1px solid var(--border);
  min-width:0;
}
.steps li{
  display:grid;
  grid-template-columns:minmax(0,2.25rem) minmax(0,1fr);
  gap:0 1rem;
  padding:1.35rem 0;
  border-bottom:1px solid var(--border);
  color:var(--muted);
  min-width:0;
}
.step-num{
  font-family:var(--font-display);
  color:var(--pink);
  font-size:1.25rem;
  letter-spacing:0.08em;
  line-height:1.6;
  min-width:0;
}
.step-body{min-width:0;}
.step-body strong{
  display:block;
  font-family:var(--font-display);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-size:1.0625rem;
  color:var(--paper);
  line-height:1.3;
  margin-bottom:0.4rem;
  overflow-wrap:anywhere;
}

/* ---------- THE APPLICATION FORM ---------- */
.form{
  margin-top:clamp(2rem,5vw,3rem);
  max-width:44rem;
  min-width:0;
}
.form-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.5rem;
}
.field{min-width:0;}
/* a full width block below the two column grid: also resets the fieldset chrome */
.field-block{
  display:block;
  margin:1.5rem 0 0;
  padding:0;
  border:0;
  min-width:0;
}
.field-block > legend{padding:0;}
.field-label{
  display:block;
  text-transform:uppercase;
  letter-spacing:var(--track-mid);
  font-size:var(--t-micro);
  color:var(--muted);
  margin-bottom:0.6rem;
  overflow-wrap:anywhere;
}
/* the word carries the meaning here; the pink only reinforces it */
.field-req{color:var(--pink);letter-spacing:var(--track-wide);margin-left:0.5em;}
.field-opt{color:var(--faint);letter-spacing:var(--track-wide);margin-left:0.5em;}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea{
  display:block;
  width:100%;
  min-width:0;
  min-height:48px;
  font-family:var(--font-body);
  font-size:1.0625rem;
  font-weight:300;
  line-height:1.6;
  color:var(--paper);
  background-color:var(--raised);
  /* --field-border on --raised is about 3.8:1, so the control edge reads */
  border:1px solid var(--field-border);
  border-radius:0;
  padding:0.8rem 0.9rem;
  transition:border-color 0.3s ease,box-shadow 0.3s ease;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted);}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--pink);
  box-shadow:0 0 1.25rem var(--glow-mid);
}
.field textarea{min-height:9.5rem;resize:vertical;}
.field select{
  -webkit-appearance:none;appearance:none;
  background-image:var(--caret);
  background-repeat:no-repeat;
  background-position:right 0.95rem center;
  background-size:0.75rem auto;
  padding-right:2.6rem;
}
.field [aria-invalid="true"]{
  border-color:var(--pink-hot);
  box-shadow:inset 0 0 0 1px var(--pink-hot);
}
.field-hint{
  margin-top:0.55rem;
  color:var(--faint);
  font-size:var(--t-small);
  line-height:1.7;
}

.checks{
  display:grid;gap:0;
  margin-top:0.25rem;
  border-top:1px solid var(--rule-quiet);
}
.check{
  display:flex;align-items:flex-start;gap:0.85rem;
  min-height:44px;padding:0.75rem 0;
  border-bottom:1px solid var(--rule-quiet);
  cursor:pointer;min-width:0;
}
.check input[type="checkbox"]{
  -webkit-appearance:none;appearance:none;
  flex:0 0 auto;
  font-size:1rem;
  width:1.4rem;height:1.4rem;margin:0.2rem 0 0;
  background-color:var(--raised);
  border:1px solid var(--field-border);
  border-radius:0;
  display:grid;place-content:center;
  cursor:pointer;
}
.check input[type="checkbox"]::before{
  content:"";
  width:0.7rem;height:0.7rem;
  background-color:var(--pink);
  transform:scale(0);
}
.check input[type="checkbox"]:checked::before{transform:scale(1);}
.check input[type="checkbox"]:checked{border-color:var(--pink);}
.check-text{color:var(--muted);font-size:var(--t-small);line-height:1.7;min-width:0;}

/* the honeypot: it exists for server side filtering and is never read here */
.hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;}

.form-note{
  margin-top:1.5rem;
  color:var(--faint);
  font-size:var(--t-small);
  line-height:1.8;
  max-width:var(--measure);
}
.form-fallback{
  display:block;
  margin-top:1.5rem;
  border:1px solid var(--field-border);
  background-color:var(--raised);
  padding:1.1rem 1.2rem;
  color:var(--paper);
  font-size:var(--t-small);
  line-height:1.9;
  max-width:44rem;
}

/* live region: never carries [hidden]; it collapses to nothing while empty */
.form-status{
  margin-top:1.75rem;
  border:1px solid var(--field-border);
  border-left:2px solid var(--rule-pink);
  background-color:var(--raised);
  padding:1.1rem 1.2rem;
  color:var(--paper);
  font-size:var(--t-small);
  line-height:1.85;
  overflow-wrap:anywhere;
  max-width:44rem;
}
.form-status:empty{
  margin-top:0;padding:0;border:0;
  background-color:transparent;
}

/* ---------- THE HAND OFF BLOCK ---------- */
.handoff{
  margin-top:2rem;
  max-width:44rem;min-width:0;
  border:1px solid var(--field-border);
  background-color:var(--raised);
  padding:clamp(1.25rem,4vw,1.75rem);
  scroll-margin-top:calc(var(--topbar-h) + 1rem);
}
.handoff[hidden]{display:none;}
.handoff h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.2rem,3vw,1.6rem);
  letter-spacing:0.1em;
  line-height:1.15;
}
.handoff > p{margin-top:0.85rem;color:var(--muted);font-size:var(--t-small);line-height:1.8;}
.handoff-text{
  margin:1.25rem 0 0;
  padding:1rem;
  max-height:24rem;overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-family:var(--font-body);
  font-size:var(--t-small);
  font-weight:300;
  line-height:1.8;
  color:var(--paper);
  background-color:var(--surface);
  border:1px solid var(--border);
}
.handoff-note{
  margin-top:1rem;
  color:var(--pink);
  font-size:var(--t-small);
  line-height:1.8;
}
.handoff-note:empty{margin-top:0;}

/* ---------- OUTBOUND STORE ---------- */
.outbound{
  margin-top:clamp(2rem,5vw,3rem);
  max-width:44rem;min-width:0;
  border:1px solid var(--field-border);
  background-color:var(--raised);
  padding:clamp(1.25rem,4vw,1.75rem);
}
.outbound h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:clamp(1.2rem,3vw,1.6rem);
  letter-spacing:0.1em;
  line-height:1.15;
}
.outbound p{margin-top:0.85rem;color:var(--muted);font-size:var(--t-small);line-height:1.8;}

/* ---------- BREAKPOINTS (extension) ---------- */
@media (min-width:44rem){
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .field--wide{grid-column:1 / -1;}
}
@media (min-width:64rem){
  /* the fixed bar is gone up here, so anchors need no clearance */
  :root{--topbar-h:0rem;}
}

/* ---------- REDUCED MOTION (extension) ---------- */
@media (prefers-reduced-motion:reduce){
  .act,
  .field input[type="text"],
  .field input[type="tel"],
  .field input[type="email"],
  .field select,
  .field textarea{transition:none;}
}

/* phone numbers are real tel: links but must not read as browser-blue */
a.tel,a[href^="tel:"]{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;}
a.tel:hover,a[href^="tel:"]:hover{color:var(--pink);border-bottom-color:var(--pink);}
a.tel:focus-visible,a[href^="tel:"]:focus-visible{outline:2px solid var(--pink);outline-offset:2px;}

/* graduation collage */
.grads{margin:clamp(1.75rem,4vw,2.5rem) 0 0;padding:0;max-width:100%;}
.grads img{width:100%;height:auto;border:1px solid var(--rule-quiet);}
/* the graduates chapter lets the collage use the full content width, so it
   sits centred between the chapter gutters on wide screens instead of
   hugging the left of the 992px text measure */
#ch-6 .chapter-inner{max-width:none;}

/* ---------- product selection + bundle suggestion ----------
   Checkout is Square's. This only collects a selection and points out
   when a bundle costs less than the same bottles bought separately. */
.item .desc{
  margin-top:0.6rem;color:var(--muted);
  font-size:var(--t-small);line-height:1.75;
}
.add{
  /* without appearance:none Chrome keeps the native grey button chrome
     even with background:none — every other control here resets it too */
  -webkit-appearance:none;appearance:none;
  margin-top:0.85rem;min-height:44px;width:100%;
  background-color:transparent;color:var(--paper);
  border:1px solid var(--rule-quiet);
  font-family:var(--font-body);font-size:var(--t-small);
  text-transform:uppercase;letter-spacing:var(--track-mid);
  cursor:pointer;padding:0 0.75rem;
  transition:border-color .3s ease,color .3s ease;
}
.add:hover,.add[aria-pressed="true"]{border-color:var(--pink);color:var(--pink);}
.cart{
  margin-top:clamp(1.75rem,4vw,2.5rem);
  max-width:var(--measure);
  border:1px solid var(--rule-quiet);
  padding:clamp(1rem,3vw,1.4rem);
}
.cart-title{
  font-size:var(--t-micro);text-transform:uppercase;
  letter-spacing:var(--track-wide);color:var(--faint);
}
.cart-lines{margin:0.9rem 0 0;padding:0;list-style:none;display:grid;gap:0.6rem;}
.cart-lines li{
  display:flex;align-items:center;gap:0.75rem;
  padding-bottom:0.6rem;border-bottom:1px solid var(--rule-quiet);
  font-size:var(--t-small);min-width:0;
}
.cart-name{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;color:var(--paper);}
.cart-price{flex:0 0 auto;color:var(--paper);font-variant-numeric:tabular-nums;}
.cart-remove{
  flex:0 0 auto;min-height:44px;background:none;border:0;cursor:pointer;
  color:var(--faint);font-family:var(--font-body);font-size:var(--t-micro);
  text-transform:uppercase;letter-spacing:var(--track-mid);
}
.cart-remove:hover{color:var(--pink);}
.cart-total{
  display:flex;justify-content:space-between;gap:1rem;
  margin-top:0.9rem;color:var(--muted);font-size:var(--t-small);
  font-variant-numeric:tabular-nums;
}
.cart-suggest{
  margin-top:1rem;padding:0.9rem 1rem;
  border:1px solid var(--rule-pink);
  background-image:linear-gradient(to right,var(--glow-mid),var(--glow-none));
}
.cart-suggest p{color:var(--paper);font-size:var(--t-small);line-height:1.7;}
.cart-suggest b{color:var(--pink);font-weight:500;}
.cart-swap{
  margin-top:0.75rem;min-height:44px;width:100%;
  background:none;border:1px solid var(--pink);color:var(--pink);
  font-family:var(--font-body);font-size:var(--t-small);
  text-transform:uppercase;letter-spacing:var(--track-mid);cursor:pointer;
}
.cart-swap:hover{background-color:var(--glow-mid);}
.cart-go{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:1rem;min-height:44px;width:100%;
  border:1px solid var(--pink);color:var(--pink);
  font-size:var(--t-small);text-transform:uppercase;letter-spacing:var(--track-mid);
}
.cart-go:hover{text-decoration:none;background-color:var(--glow-mid);}
.cart-note{margin-top:0.75rem;color:var(--faint);font-size:var(--t-micro);line-height:1.7;}

/* the two bundles, presented as cards beside the products rather than
   as a list, so a bundle reads as a thing you can buy */
.shelf-sub{
  margin-top:clamp(2.5rem,6vw,3.5rem);
  font-size:var(--t-micro);text-transform:uppercase;
  letter-spacing:var(--track-wide);color:var(--faint);
}
/* two cards rather than three across, so each bundle takes about half the
   row and the bottles inside come out noticeably larger */
.shelf--bundles{
  margin-top:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  gap:clamp(1.5rem,4vw,2.5rem);
}
/* the pick-up-in-person line reads as one sentence, not a wrapped block */
.list-inline{max-width:none;}
/* side by side, always, on one shared pool of light: no divider lines, no
   box. Each bottle is its own zoom link inside the row. */
.bundle-shot{
  display:flex;align-items:stretch;justify-content:center;gap:0;
  position:relative;isolation:isolate;
  height:clamp(12rem,36vw,17rem);
  min-width:0;
}
.bundle-shot::before{
  content:"";position:absolute;z-index:-1;
  left:-6%;right:-6%;top:34%;bottom:-8%;
  background-image:radial-gradient(ellipse at 50% 66%,var(--glow-mid) 0%,var(--glow-none) 70%);
  pointer-events:none;
}
.bundle-shot .item-shot{
  flex:1 1 0;min-width:0;max-width:none;
  height:100%;aspect-ratio:auto;
  isolation:auto;
}
.bundle-shot .item-shot::before{display:none;}
.bundle-shot img{width:100%;height:100%;object-fit:cover;object-position:center;}

/* ---------- SQUARE'S OWN BUTTON, if pasted into a slot ----------
   <div data-square-embed="..."> is empty until Square's "Add button to
   website" snippet is pasted in (see the note in cart.js). The snippet is
   inline-styled, so these rules use !important to dress it in the page's
   font, colour and sizing. Square's script is not touched. */
[data-square-embed]{margin-top:0.85rem;min-width:0;}
[data-square-embed]:empty{display:none;margin:0;}
[data-square-embed] > div{
  width:100%!important;max-width:100%!important;
  background:transparent!important;background-color:transparent!important;
  border:1px solid var(--rule-quiet)!important;border-radius:0!important;
  box-shadow:none!important;
  font-family:var(--font-body)!important;color:var(--paper)!important;
  overflow:visible!important;
}
[data-square-embed] > div > div{padding:0.9rem!important;width:100%!important;}
[data-square-embed] p{
  font-family:var(--font-body)!important;font-size:var(--t-small)!important;
  color:var(--muted)!important;line-height:1.6!important;margin:0 0 0.35rem!important;
}
[data-square-embed] a{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;min-width:0!important;
  min-height:44px!important;height:auto!important;line-height:1.2!important;
  background-color:transparent!important;color:var(--pink)!important;
  border:1px solid var(--pink)!important;border-radius:0!important;box-shadow:none!important;
  font-family:var(--font-body)!important;font-size:var(--t-small)!important;
  text-transform:uppercase!important;letter-spacing:var(--track-mid)!important;
  text-decoration:none!important;
}
[data-square-embed] a:hover,[data-square-embed] a:focus-visible{background-color:var(--glow-mid)!important;}

/* ---------- the cart, with one Square link per line ----------
   A Square payment link carries one item, so a selection of several lines
   gets a Checkout per line. */
.cart-line-go{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 0.75rem;
  border:1px solid var(--rule-pink);color:var(--pink);
  font-size:var(--t-micro);text-transform:uppercase;letter-spacing:var(--track-mid);
}
.cart-line-go:hover{text-decoration:none;background-color:var(--glow-mid);}
.cart-why{margin-top:0.9rem;color:var(--muted);font-size:var(--t-small);line-height:1.7;}


/* a thin ring behind the bottle: the pink arc grows with the angle */