/* ============================================================
   RIVE 37 — French Specialty Coffee. Designed in California.
   Palette and voice are the vehicle's: cream, bottle green, brass.
   Nothing here is decorative that is not also structural.
   ============================================================ */

/* The two faces live on this site, not on Google's: no third party sees a
   visitor arrive, and there is one connection fewer before the first paint.
   Latin subset only (French included). Both are SIL Open Font License. */
@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;
  src:url(../assets/fonts/jost-latin.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;
  src:url(../assets/fonts/cormorant-garamond-300-latin.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;
  src:url(../assets/fonts/cormorant-garamond-300-italic-latin.woff2) format('woff2')}

:root{
  --ivory:#F2EEE4;
  --ivory-2:#EAE4D6;
  --rule:#DCD4C2;
  --petrol:#1E3A38;
  --petrol-2:#152A28;
  --graphite:#1C1C1C;
  --mist:#525E59;          /* was #66726D — 4.32:1 on ivory, under the AA floor */
  --mist-light:#9BAAA4;    /* the same role on petrol grounds */
  --brass:#B08D57;         /* lines, circles, borders — never text */
  --brass-ink:#77592C;     /* brass as TEXT: 5.58:1 on ivory, 5.10:1 on ivory-2 */
  --brass-2:#C9A87C;

  --display:'Jost',"Futura","Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --accent:'Cormorant Garamond',"Iowan Old Style",Georgia,serif;

  --gut:clamp(1.25rem,5vw,4.5rem);
  --wrap:1320px;
  --sec:clamp(6rem,14vh,11rem);

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ivory);
  color:var(--graphite);
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1rem,.94rem + .28vw,1.0625rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
button,input,textarea{font:inherit;color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--petrol);color:var(--ivory);padding:.75rem 1.25rem}
.skip:focus{left:.5rem;top:.5rem}

:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ---------- type scale ---------- */
.over{
  font-size:.6875rem;font-weight:400;letter-spacing:.34em;text-transform:uppercase;
  color:var(--mist);margin-bottom:1.75rem;
}
.over--light{color:var(--brass-2)}

.h2{
  font-weight:300;line-height:1.06;letter-spacing:-.005em;
  font-size:clamp(2.35rem,1.4rem + 4.1vw,5rem);
  color:var(--petrol);
}
.h2--light{color:var(--ivory)}
.h3{font-weight:300;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.2;color:var(--petrol)}
.h4{
  font-weight:400;font-size:1.0625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol);
}
/* Titles break where the eye expects them to; prose never leaves a lone word
   on its last line. Browsers without text-wrap simply wrap as before. */
h1,h2,h3,.h2,.h3,.h4,.over,.vow__t{text-wrap:balance}
p,li,dd,figcaption{text-wrap:pretty}
.body{max-width:46ch;color:var(--mist);margin-top:1.6rem;font-weight:300}
.body--light{color:#B9C6C1}
.disclaimer{
  margin-top:1.75rem;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-ink);font-weight:400;
}
.disclaimer--light{color:var(--brass-2);opacity:.85}
/* The one line that must not be missed while nothing is permitted yet. */
.disclaimer--key{
  display:inline-block;padding:.7rem 0 .7rem 1rem;border-left:2px solid var(--brass);
  color:var(--petrol);letter-spacing:.12em;line-height:1.7;
}

.lede{max-width:min(100%,58rem)}
/* Editorial split: the statement holds the left column, the argument sits in
   the right one and settles on the statement's last baseline. */
.lede--split{max-width:none}
.lede--split .lede__text>.body:first-child{margin-top:0}
@media(min-width:1000px){
  .lede--split{
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    column-gap:clamp(3rem,6vw,7rem);align-items:end;
  }
  .lede--split .over{grid-column:1/-1}
  .lede--split .h2{grid-column:1;grid-row:2}
  .lede--split .lede__text{grid-column:2;grid-row:2;padding-bottom:.4rem}
}
.lede--center{margin-inline:auto;text-align:center}
.lede--center .body{margin-inline:auto}

/* ---------- header ---------- */
.head{
  position:fixed;inset:0 0 auto 0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.4rem var(--gut);
  color:var(--petrol);
  transition:color .5s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.head--solid{background:rgba(242,238,228,.88);backdrop-filter:blur(14px);border-bottom-color:var(--rule)}
.head--over{color:var(--ivory)}
.head__mark{display:flex;align-items:center;gap:.85rem;text-decoration:none}
/* The mark is reproduced from public/brand/symbol.svg: one continuous rule,
   the ring centred at 67.7% of its length, diameter 9.3% of it. The stroke is
   set in screen pixels, because scaling 3.3 viewBox units down to a 72px mark
   would render a line thinner than a pixel. */
.head__mark svg{width:72px;height:auto;fill:none;stroke:var(--brass);overflow:visible}
.mark__rule{stroke-width:1.05px;vector-effect:non-scaling-stroke}
.mark__ring{stroke-width:1.45px;vector-effect:non-scaling-stroke}
.head__mark span{font-size:.75rem;letter-spacing:.42em;text-transform:uppercase}
.head__nav{display:flex;gap:2.25rem}
.head__nav a{
  text-decoration:none;font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;
  position:relative;padding-block:.35rem;
}
.head__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.head__nav a:hover::after{transform:scaleX(1)}
/* The one outbound link on the page: it earns a mark, not just a nav slot. */
.head__ig{position:relative}
.head__ig::before{
  content:"";position:absolute;left:-.85rem;top:50%;width:4px;height:4px;
  border-radius:50%;background:var(--brass);transform:translateY(-50%);
}
.findus__live{
  margin-top:1.6rem;max-width:46ch;color:var(--mist);font-weight:300;
}
.findus__live a{color:var(--brass-ink);text-decoration:none;border-bottom:1px solid rgba(119,89,44,.4)}
.findus__live a:hover{border-bottom-color:var(--brass-ink)}
.head__cta{
  text-decoration:none;font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;
  border:1px solid currentColor;padding:.7rem 1.35rem;white-space:nowrap;
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.head__cta:hover{background:var(--brass);border-color:var(--brass);color:var(--ivory)}
.head--over .head__cta{border-color:rgba(242,238,228,.55);background:rgba(21,42,40,.22);backdrop-filter:blur(6px)}
.head--over .head__cta:hover{background:var(--brass);border-color:var(--brass)}
/* ---------- la langue ----------
   The switch is the mark: one rule, one ring. The ring sits towards the
   language being read — on the French page it lands at two thirds, exactly
   where the logo puts it — and on hover it slides to the other side, which is
   where the link goes. */
.lang{
  display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:inherit;
  font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
}
.lang__code{opacity:.55;transition:opacity .4s var(--ease)}
.lang__code.is-on{opacity:1}
.lang__mark{width:44px;height:12px;overflow:visible;fill:none;stroke:var(--brass)}
.lang__mark path{stroke-width:1;vector-effect:non-scaling-stroke}
.lang__mark circle{
  stroke-width:1.3;fill:var(--ivory);vector-effect:non-scaling-stroke;
  transition:transform .6s var(--ease),fill .4s var(--ease);
}
.head--over .lang__mark circle,.navpanel .lang__mark circle{fill:transparent}
.lang[hreflang="fr"]:hover .lang__mark circle,.lang[hreflang="fr"]:focus-visible .lang__mark circle{transform:translateX(15.6px)}
.lang[hreflang="en"]:hover .lang__mark circle,.lang[hreflang="en"]:focus-visible .lang__mark circle{transform:translateX(-15.6px)}
.lang:hover .lang__code,.lang:focus-visible .lang__code{opacity:1}
.lang:focus-visible{outline:1px solid var(--brass);outline-offset:6px}
@media(prefers-reduced-motion:reduce){.lang__mark circle{transition:none}}
@media(max-width:900px){
  .head__nav{display:none}
  /* On a phone the switch stays in the header, smaller: the same rule and
     ring, one tap away. The negative margin gives it a finger-sized target
     without taking room from its neighbours. */
  /* The controls gather on the right; whatever room is left separates them
     from the name, so the switch never reads as part of it. */
  .head{gap:.5rem}
  .head__mark{margin-right:auto}
  .head .lang{
    font-size:.53rem;letter-spacing:.14em;gap:.3rem;
    padding:.95rem .4rem;margin:-.95rem -.15rem -.95rem -.4rem;
  }
  .head .lang__mark{width:28px;height:10px}
  /* A hairline before EN: the switch is its own thing, not the end of the name. */
  .head .lang{position:relative}
  .head .lang::before{
    content:"";position:absolute;left:-.2rem;top:50%;width:1px;height:.9rem;margin-top:-.45rem;
    background:currentColor;opacity:.3;
  }
}
@media(max-width:640px){
  /* Keep the name — a bare mark reads as an orphan at this width. Buy the
     room back from the button instead. */
  .head{padding:1.1rem 1.25rem}
  .head__mark{gap:.6rem}
  .head__mark svg{width:34px}
  .head__mark span{font-size:.625rem;letter-spacing:.3em}
  .head__cta{font-size:.5625rem;letter-spacing:.16em;padding:.6rem .85rem}
}
/* Narrow phones: the drawn mark shortens, then goes on the narrowest — the
   header keeps the name, and the switch already carries the rule and ring. */
@media(max-width:400px){
  .head{padding-inline:1rem}
  .head .head__mark svg{width:22px}
  .head .head__cta{padding-inline:.7rem}
}
@media(max-width:359px){.head .head__mark svg{display:none}}
@media(max-width:339px){.head .lang__mark{width:20px}}

/* ---------- the spine ---------- */
/* The logo is a line with a circle riding it. Here the line is the page and
   the circle is where you are on it, so the mark navigates instead of
   decorating. Sections are placed by their real position in the document,
   which makes the rail an honest map of the page's proportions. */
.spine{
  position:fixed;left:clamp(1.5rem,2.6vw,2.75rem);top:16vh;bottom:16vh;width:1px;z-index:90;
  opacity:0;transition:opacity .8s var(--ease);pointer-events:none;
}
.spine.is-ready{opacity:1;pointer-events:auto}
.spine__rail,.spine__fill{position:absolute;left:0;width:1px}
.spine__rail{top:0;bottom:0;background:rgba(176,141,87,.28)}
.spine__fill{top:0;height:0;background:var(--brass);transition:height .12s linear}
.spine__ring{
  position:absolute;left:50%;top:0;width:15px;height:15px;
  transform:translate(-50%,-50%);
  fill:var(--ivory);stroke:var(--brass);stroke-width:2;
  transition:top .12s linear;
}
.spine__list{position:absolute;inset:0}
.spine__list li{position:absolute;left:0;transform:translateY(-50%)}
.spine__item{
  display:flex;align-items:center;gap:.7rem;text-decoration:none;
  padding:.4rem .5rem .4rem 0;margin-left:-.5rem;
}
.spine__tick{
  display:block;width:7px;height:1px;background:var(--brass);opacity:.55;
  transition:width .4s var(--ease),opacity .4s var(--ease);
}
/* This label passes over ivory and petrol sections alike, so it carries its
   own ground rather than gambling on the one behind it. */
.spine__name{
  font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-2);
  background:rgba(21,42,40,.88);padding:.25rem .55rem;
  white-space:nowrap;opacity:0;transform:translateX(-4px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
/* The current section is marked by a longer tick, not a standing label —
   a name pinned permanently beside the rail reads as debris. The name
   appears on intent: hover or keyboard focus. */
.spine__item:hover .spine__tick,.spine__item:focus .spine__tick,
.spine__item[aria-current] .spine__tick{width:14px;opacity:1}
.spine__item:hover .spine__name,.spine__item:focus .spine__name{opacity:1;transform:none}

/* Over the film the ivory-filled ring would glare; hollow it out instead. */
.spine--over .spine__ring{fill:none}
.spine--over .spine__rail{background:rgba(201,168,124,.3)}
.spine--over .spine__fill{background:var(--brass-2)}
.spine--over .spine__tick{background:var(--brass-2)}
.spine--over .spine__name{color:var(--brass-2)}

/* Not enough gutter to hold it, and nothing to hover with. */
@media(max-width:1100px),(pointer:coarse){.spine{display:none}}
@media(prefers-reduced-motion:reduce){
  .spine__fill,.spine__ring{transition:none}
}

/* ---------- menu mobile + barre d'action ---------- */
/* Below 900px the header nav and the brass spine are both gone. Without these
   two, the only way through 22 screens is to scroll all of them. */
.head__menu{
  display:none;background:none;border:1px solid currentColor;cursor:pointer;
  width:2.6rem;height:2.6rem;padding:0;place-items:center;color:inherit;
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.head__bars{display:grid;gap:5px;width:15px}
.head__bars i{display:block;height:1px;background:currentColor;transition:transform .35s var(--ease),opacity .25s var(--ease)}
.head__menu[aria-expanded="true"] .head__bars i:first-child{transform:translateY(3px) rotate(45deg)}
.head__menu[aria-expanded="true"] .head__bars i:last-child{transform:translateY(-3px) rotate(-45deg)}

/* `display:flex` beats the `hidden` attribute, so the attribute has to be
   restated here or the panel ships open. */
.navpanel[hidden]{display:none}
.navpanel{
  position:fixed;inset:0;z-index:110;background:var(--petrol-2);color:var(--ivory);
  /* Centred with auto margins rather than justify-content: centring an
     overflowing flex column pushes its first items above the top, where no
     amount of scrolling reaches them (Arrival hid under the header). */
  display:flex;flex-direction:column;justify-content:flex-start;gap:2rem;
  padding:6rem var(--gut) 3rem;overflow-y:auto;overscroll-behavior:contain;
}
.navpanel > :first-child{margin-top:auto}
.navpanel > :last-child{margin-bottom:auto}
.navpanel__nav ol{counter-reset:m;display:grid;gap:.15rem}
.navpanel__nav li{counter-increment:m}
.navpanel__nav a{
  display:flex;align-items:baseline;gap:1rem;text-decoration:none;padding:.62rem 0;
  border-bottom:1px solid rgba(201,168,124,.16);
  font-size:1.28rem;font-weight:300;letter-spacing:.01em;
}
.navpanel__nav a::before{
  content:counter(m,decimal-leading-zero);
  font-size:.625rem;letter-spacing:.16em;color:var(--brass-2);min-width:1.7rem;
}
.navpanel__nav a[aria-current="true"]{color:var(--brass-2)}
.navpanel__foot{
  display:flex;flex-direction:column;gap:.5rem;
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2);
}
.navpanel__foot a{text-decoration:none}

.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:110;display:none;
  border-top:1px solid var(--rule);background:rgba(242,238,228,.94);backdrop-filter:blur(14px);
  padding-bottom:env(safe-area-inset-bottom);
}
.dock a{
  flex:1;text-align:center;text-decoration:none;color:var(--petrol);
  padding:1.05rem .5rem;font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;
}
.dock a + a{border-left:1px solid var(--rule)}

@media(max-width:900px){
  .head__menu{display:grid}
  .dock{display:flex}
  /* The dock floats over the page, so give the last section room to clear it. */
  body{padding-bottom:3.6rem}
  .navpanel-open .dock{display:none}
}
.navpanel-open{overflow:hidden}
/* The header sits over the panel's dark ground while it is open. */
.navpanel-open .head{color:var(--ivory);background:transparent;border-bottom-color:transparent}
.navpanel-open .head__cta{border-color:rgba(242,238,228,.5)}

/* ---------- 1. arrival (scroll-scrubbed hero) ---------- */
/* 250vh, not 520: the film still scrubs through its four beats, but the
   answer to "where is the truck" is no longer five screens down. */
.arrival{position:relative;height:250vh;background:var(--petrol-2)}
.arrival__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--petrol-2)}
.arrival__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.arrival__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(21,42,40,.46) 0%,rgba(21,42,40,.06) 26%,rgba(21,42,40,.14) 46%,rgba(21,42,40,.62) 76%,rgba(21,42,40,.88) 100%);
}
/* The truck already wears the word RIVE. The title stays a title, not a
   billboard, so the two never argue over the same frame. */
.arrival__type{
  position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(4.5rem,13vh,8rem);
  color:var(--ivory);max-width:46rem;
}
.arrival__mark{
  display:block;width:clamp(150px,19vw,240px);height:auto;
  fill:none;stroke:var(--brass-2);overflow:visible;
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.arrival__title{
  font-weight:300;line-height:.94;letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(2.6rem,1.4rem + 5.2vw,6.5rem);text-indent:.14em;
  display:flex;align-items:baseline;gap:clamp(.4rem,1.4vw,1.1rem);flex-wrap:wrap;
}
.arrival__title .num{color:var(--brass-2);font-weight:300}
.arrival__sub{
  margin-top:clamp(1.2rem,2.5vw,1.9rem);font-weight:300;color:#DDD9CE;max-width:28ch;
  font-size:clamp(.95rem,.88rem + .4vw,1.25rem);line-height:1.6;
}
.arrival__ref{margin:clamp(1.5rem,3vw,2.25rem) 0 0;color:var(--brass-2)}
.arrival__cue{
  position:absolute;right:var(--gut);bottom:clamp(5rem,14vh,9rem);
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  color:var(--ivory);font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;
  writing-mode:vertical-rl;
  transition:opacity .6s var(--ease);
}
.arrival__cue i{display:block;width:1px;height:64px;background:linear-gradient(var(--brass-2),transparent)}
.arrival__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(242,238,228,.16)}
.arrival__bar i{display:block;height:100%;width:0;background:var(--brass-2);transition:width .12s linear}
@media(max-width:900px){
  .arrival{height:100svh}
  .arrival__cue{display:none}
}

/* Reduced motion, or a connection we should not spend: the poster is the whole
   hero, so the scroll track has nothing left to measure. */
.rive-still .arrival{height:100svh}
/* The still is where the film arrives: the cup at first light. On a screen
   taller than wide the frame slides left, so the sun on the water stays in it. */
@media(max-aspect-ratio:1/1){.rive-still .arrival__video{object-position:24% 50%}}

/* ---------- aujourd'hui ---------- */
/* The film runs for five screens before saying anything. This answers the one
   urgent question — where is the truck right now — as soon as it ends. */
.today{background:var(--ivory)}
.today__wrap{display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:center}
@media(min-width:1000px){
  .today__wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}
.today__state{
  font-size:.6875rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-ink);
  margin-bottom:1.1rem;
}
.today__state.is-open{color:var(--petrol)}
.today__state.is-open::before{
  content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--petrol);margin-right:.65rem;vertical-align:.02em;
}
.today .h2{font-size:clamp(1.9rem,1.2rem + 2.2vw,3.1rem)}
.today__hood{
  margin-top:.9rem;font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mist);
}
.today__hours{
  margin-top:1.4rem;font-size:clamp(1.15rem,1rem + .6vw,1.5rem);font-weight:300;color:var(--petrol);
  font-variant-numeric:tabular-nums;
}
.today__note{margin-top:.5rem;font-family:var(--accent);font-style:italic;font-size:1.0625rem;color:var(--brass-ink)}
.today__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-top:2rem}
.today__all{
  font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-ink);
  text-decoration:none;border-bottom:1px solid rgba(119,89,44,.4);padding-bottom:.2rem;
}
.today__next{
  display:grid;gap:.65rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule);
}
.today__next li{display:flex;gap:1rem;font-size:.875rem;color:var(--mist);font-weight:300}
.today__next b{
  font-weight:400;color:var(--petrol);min-width:5.5rem;
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;padding-top:.28em;
}

.today__map{margin:0}
.today__map svg{width:100%;height:auto;fill:none}
/* ---------- the chart ----------
   An engraved sea chart: the water is hatched, the land is paper. One brass
   for every line, the page's two faces for type — Cormorant italic for names
   of water and places, Jost small caps for towns, days and graduations.
   Type sizes are set by the script from the rendered scale. */
.map__hatch{stroke:var(--brass);stroke-width:.55;opacity:.42}
.map__wash{fill:none;stroke:var(--brass);stroke-width:14;opacity:.10;stroke-linejoin:round}
.map__wash--far{stroke-width:44;opacity:.05}
.today__shore{fill:none;stroke:var(--brass);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.map__neat{fill:none;stroke:var(--brass);stroke-width:1;opacity:.55}
.map__grid line{stroke:var(--brass);stroke-width:.8}
.map__grid text{
  fill:var(--mist);font-family:var(--display);letter-spacing:.14em;font-variant-numeric:tabular-nums;
}
.map__north{stroke:var(--brass-ink) !important;stroke-width:.9}
.map__north-tip{fill:var(--brass-ink)}
.map__grid .map__north-n{fill:var(--brass-ink);font-family:var(--accent);font-style:italic;letter-spacing:0}
.map__scale{stroke:var(--brass-ink) !important;stroke-width:.9}
.map__grid .map__scale-t{fill:var(--brass-ink);letter-spacing:.2em;text-transform:uppercase}
.map__labels text{paint-order:stroke fill;stroke-linejoin:round}
.map__water{
  fill:var(--brass-ink);font-family:var(--accent);font-style:italic;font-weight:300;letter-spacing:.16em;
  stroke:var(--ivory);stroke-width:.35em;opacity:.9;
}
.map__cape{fill:var(--mist);font-family:var(--accent);font-style:italic;letter-spacing:.06em;stroke:var(--ivory);stroke-width:.4em}
.map__town{fill:var(--mist);font-family:var(--display);letter-spacing:.34em;text-transform:uppercase;stroke:var(--ivory);stroke-width:.5em}
/* The marks are the logo: a rule with its ring at two thirds. The place being
   served today is the only thing on the chart that is filled. */
.map__rule{stroke:var(--brass);stroke-width:1.2}
.map__mark circle{fill:var(--ivory);stroke:var(--brass);stroke-width:1.4}
.map__mark.is-now .map__rule{stroke:var(--petrol)}
.map__mark.is-now circle{fill:var(--petrol);stroke:var(--petrol)}
.map__label{paint-order:stroke fill;stroke:var(--ivory);stroke-width:.45em;stroke-linejoin:round}
.map__name{fill:var(--petrol);font-family:var(--accent);font-style:italic;font-weight:300;letter-spacing:.01em}
.map__days{fill:var(--brass-ink);font-family:var(--display);letter-spacing:.26em;text-transform:uppercase}
.map__days .map__sep{fill:var(--brass)}
.map__days .is-today{fill:var(--petrol);font-weight:500}
.today__map figcaption{
  margin-top:1.2rem;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);
}

/* ---------- sections ---------- */
/* The header is fixed, so an anchored jump would otherwise bury the first
   line of every section underneath it. */
section[id]{scroll-margin-top:6.5rem}
.sec{padding-block:var(--sec);position:relative}
.truck{background:var(--ivory)}
.carte{background:var(--ivory-2)}
.findus{background:var(--ivory)}
.vows{background:var(--ivory-2)}
.waitlist{background:var(--ivory)}

/* ---------- figures ---------- */
.fig{margin-top:clamp(3rem,7vw,6rem);overflow:hidden}
.fig img{width:100%;height:auto;transform:scale(1.06);transition:transform 1.6s var(--ease)}
.fig.is-in img{transform:scale(1)}
.fig figcaption{
  margin-top:1.1rem;font-size:.6875rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mist);
}

/* ---------- 2. codes ---------- */
.codes{
  display:grid;gap:clamp(2.5rem,5vw,4rem);margin-top:clamp(4rem,9vw,7.5rem);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
}
.code{border-top:1px solid var(--rule);padding-top:1.75rem}
.code__n{
  font-size:.6875rem;letter-spacing:.3em;color:var(--brass-ink);margin-bottom:1.5rem;
}
.code .h3{font-family:var(--accent);font-style:italic;font-size:clamp(1.75rem,1.4rem + 1.2vw,2.4rem);letter-spacing:0}
.code .body{margin-top:1.1rem}

.details{
  display:grid;gap:clamp(1.25rem,3vw,2.5rem);margin-top:clamp(3.5rem,8vw,6rem);
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
}
.details .fig{margin-top:0}

/* ---------- brass band (ambience loop) ---------- */
.band{position:relative;height:clamp(20rem,46vh,30rem);overflow:hidden;background:var(--petrol-2)}
.band__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band__veil{position:absolute;inset:0;background:rgba(21,42,40,.42)}
.band__line{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;text-align:center;padding-inline:var(--gut);
}
.band__line em{
  font-family:var(--accent);font-style:italic;font-weight:300;color:var(--ivory);
  font-size:clamp(1.75rem,1.2rem + 2.4vw,3.25rem);line-height:1.15;
}
.band__line span{
  font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-2);
}

/* ---------- l'anatomie ---------- */
/* A drawn plate, not a render. Its sheet colour was remapped to --ivory so the
   image dissolves into the section with no visible edge — do not change the
   section background without re-matching the file. */
.anat{background:var(--ivory)}
.anat__sheet{display:grid;gap:clamp(2rem,4vw,3rem);margin-top:clamp(3rem,7vw,5rem)}
.anat__fig{margin:0}
.anat__fig img{width:100%;height:auto;display:block}

.key{position:relative;display:grid;gap:1.5rem;counter-reset:none}
.key__row{display:grid;gap:.22rem;border-top:1px solid var(--rule);padding-top:.9rem}
.key__ref{font-size:.625rem;letter-spacing:.24em;color:var(--brass-ink)}
.key__name{
  font-family:var(--accent);font-style:italic;font-weight:300;color:var(--petrol);
  font-size:clamp(1.1rem,1rem + .4vw,1.35rem);line-height:1.18;
}
.key__val{font-size:.8125rem;font-weight:300;color:var(--mist);line-height:1.5}

@media(min-width:1000px){
  /* Stretch, not start: the key column then takes the plate's own height, so
     the entry percentages map to the drawing rather than to their own text. */
  .anat__sheet{grid-template-columns:minmax(0,1fr) minmax(15rem,20rem)}
  /* Each entry sits at the height of the component it names, and its rule
     runs back toward the plate. */
  .key{position:relative;height:100%;display:block;gap:0}
  .key__row{
    position:absolute;top:var(--at);left:0;right:0;transform:translateY(-50%);
    border-top:0;padding-top:0;padding-left:2.6rem;
  }
  .key__row::before{
    content:"";position:absolute;left:0;top:.62em;width:1.9rem;height:1px;background:var(--brass);
  }
}
/* The entries arrive one after another, in the order the plate is read. */
.key__row{opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.anat__sheet.is-in .key__row{opacity:1;transform:none}
@media(min-width:1000px){
  .anat__sheet.is-in .key__row{transform:translateY(-50%)}
}
.anat__sheet.is-in .key__row:nth-child(1){transition-delay:.05s}
.anat__sheet.is-in .key__row:nth-child(2){transition-delay:.14s}
.anat__sheet.is-in .key__row:nth-child(3){transition-delay:.23s}
.anat__sheet.is-in .key__row:nth-child(4){transition-delay:.32s}
.anat__sheet.is-in .key__row:nth-child(5){transition-delay:.41s}
.anat__sheet.is-in .key__row:nth-child(6){transition-delay:.50s}
@media(prefers-reduced-motion:reduce){
  .key__row{opacity:1;transform:none;transition:none}
  @media(min-width:1000px){.key__row{transform:translateY(-50%)}}
}

/* ---------- les fondateurs ---------- */
/* The two who learned the trade in a Type H. Text holds the narrow column,
   the photograph takes the width it needs. */
.makers{background:var(--ivory)}
.makers__wrap{
  display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:center;
  grid-template-columns:minmax(0,1fr);
}
/* The cap belongs on the prose, not on the heading — capping the whole block
   was breaking the title over four lines. */
.makers__text{max-width:none}
.makers__text .body{max-width:36ch}
/* A narrower column than the other sections, so the statement is scaled to it
   rather than fighting it. */
.makers .h2{font-size:clamp(2.1rem,1.2rem + 2.4vw,3.4rem)}
.makers__fig{margin-top:0}
.makers__sign{
  margin-top:clamp(2rem,4vw,2.75rem);
  font-size:.6875rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-ink);
}
/* Tablet: the photograph drops below, so a single 36ch column would leave
   half the width bare. The story runs in two balanced columns instead. */
@media(min-width:640px) and (max-width:999px){
  .makers__prose{columns:2;column-gap:clamp(2rem,5vw,3.5rem);margin-top:1.6rem}
  .makers__prose .body{max-width:none;margin-top:0;break-inside:avoid-column}
  .makers__prose .body + .body{margin-top:1.6rem}
}
@media(min-width:1000px){
  .makers__wrap{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
}

/* ---------- 3. carte ---------- */
.menu{
  display:grid;gap:clamp(2.5rem,4vw,3.5rem) clamp(1.75rem,3vw,3rem);
  margin-top:clamp(4rem,9vw,7rem);
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
}
.card__img{overflow:hidden;background:var(--rule);aspect-ratio:1}
.card__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s var(--ease)}
.card:hover .card__img img{transform:scale(1)}
.card__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:1.5rem;padding-bottom:.85rem;border-bottom:1px solid var(--rule);
}
.price{font-size:1.0625rem;font-weight:400;color:var(--petrol)}
.card__ref{
  margin-top:.85rem;font-size:.625rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-ink);
}
.card__note{margin-top:.85rem;color:var(--mist);font-weight:300;font-size:.9375rem;line-height:1.7}

/* ---------- the full sheets ---------- */
/* Specialty coffee is judged on how much you are willing to say. The card is
   the invitation; this is the disclosure. */
.card__more{
  margin-top:1.25rem;background:none;border:0;padding:0;cursor:pointer;
  font-size:.5625rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-ink);
  border-bottom:1px solid rgba(119,89,44,.45);transition:border-color .4s var(--ease);
}
.card__more:hover{border-bottom-color:var(--brass)}
.card__sheet{display:none}

/* ---------- la carte en orbite ----------
   The logo, used as a stage rather than as a picker. One brass rule is the
   horizon; one fine ring sits on it; the chosen product stands on the rule
   and rises out of it like the sun. The brass sun travels the upper half of
   the ring from Lever to Coucher, so the counter reads as one morning: First
   Light at dawn, the cookie towards dusk. Everything else is typography. */
.orbit{
  position:relative;display:grid;align-items:center;
  grid-template-columns:minmax(0,33fr) minmax(0,67fr);
  column-gap:clamp(2rem,5vw,5rem);margin-top:clamp(4rem,9vw,7rem);
}

/* The index: a French carte, not a menu of buttons. */
.orbit__index{position:relative;grid-column:1;grid-row:1 / span 2;align-self:center}
.orbit__fam{
  margin:2.1rem 0 .7rem;font-size:.5625rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-ink);
  opacity:0;transform:translateY(8px);transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.orbit__fam:first-of-type{margin-top:0}
.orbit__list{list-style:none;margin:0;padding:0}
.orbit__entry{
  all:unset;box-sizing:border-box;cursor:pointer;width:100%;
  display:flex;align-items:baseline;gap:.9rem;padding:.42rem 0 .42rem 1.4rem;
  font-weight:300;font-size:clamp(.95rem,.9rem + .2vw,1.0625rem);color:var(--mist);
  opacity:0;transform:translateY(8px);
  transition:color .6s var(--ease),opacity .9s var(--ease),transform .9s var(--ease);
}
.orbit__entry-lead{flex:1;height:1px;background:var(--rule);transform:translateY(-.3em);transition:background-color .6s var(--ease)}
.orbit__entry-price{font-variant-numeric:tabular-nums}
.orbit__entry:hover,.orbit__entry.is-hover,.orbit__entry[aria-pressed="true"]{color:var(--petrol)}
.orbit__entry.is-hover .orbit__entry-lead,.orbit__entry[aria-pressed="true"] .orbit__entry-lead{background:var(--brass)}
.orbit__entry:focus-visible{outline:1px solid var(--brass-ink);outline-offset:4px}
.orbit.is-in .orbit__fam,.orbit.is-in .orbit__entry{opacity:1;transform:none}
/* A small brass disc slides beside the entry being served. */
.orbit__marker{
  position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;background:var(--brass);
  opacity:0;transition:transform .9s var(--ease),opacity .6s var(--ease);
}
.orbit.is-in .orbit__marker{opacity:1;transition-delay:0s,1.6s}

/* The stage */
.orbit__stage{
  position:relative;grid-column:2;grid-row:1;justify-self:center;
  width:min(100%,46rem);aspect-ratio:1;
}
.orbit__rule{
  position:absolute;left:-4%;right:-4%;top:50%;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease);
}
.orbit.is-in .orbit__rule{transform:scaleX(1)}
.orbit__end{
  position:absolute;top:calc(50% - 1.6rem);font-size:.5625rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--brass-ink);opacity:0;transition:opacity 1s var(--ease) 1.4s;
}
.orbit__end--rise{right:calc(92% + .75rem)}
.orbit__end--set{left:calc(92% + .75rem)}
.orbit.is-in .orbit__end{opacity:1}
.orbit__dial{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2}
.orbit__track{
  fill:none;stroke:var(--brass);stroke-width:.14;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease) .5s;
}
.orbit.is-in .orbit__track{stroke-dashoffset:0}
#orbitHours circle{
  fill:var(--brass);opacity:0;transform-box:fill-box;transform-origin:center;
  transition:opacity .9s var(--ease),transform .5s var(--ease);
}
.orbit.is-in #orbitHours circle{opacity:.8}
/* The hour dots are the carte too: each one brings up its product. The hit
   area is wider than the dot and invisible, and only live once the ring is drawn. */
.orbit__hit{fill:transparent;pointer-events:all;cursor:pointer}
.orbit:not(.is-in) .orbit__hits{pointer-events:none}
.orbit.is-in #orbitHours circle.is-hover{opacity:1;transform:scale(2.2)}
.orbit__sunmark{fill:var(--brass);opacity:0;transition:opacity .9s var(--ease) 1.3s}
.orbit.is-in .orbit__sunmark{opacity:1}

/* Above the horizon, the ring is filled with the photograph taken in the
   truck, framed so the product stands on the rule. The half-disc is cut at the
   rule, so a rising photograph comes up out of the horizon. */
.orbit__horizon,.orbit__mirror{
  position:absolute;left:8%;width:84%;height:42%;overflow:hidden;pointer-events:none;
  -webkit-mask-image:-webkit-radial-gradient(white,black); /* keeps the clip in Safari */
}
.orbit__horizon{bottom:50%;border-radius:999px 999px 0 0;background:var(--petrol-2)}
.orbit__view{
  position:absolute;inset:0;
  /* The light follows the sun: warmer at dawn and at dusk, neutral at noon.
     The four values are set from the script as the sun moves. */
  filter:sepia(var(--sep,0)) saturate(var(--sat,1)) brightness(var(--bri,1)) hue-rotate(var(--hue,0deg));
  transition:filter 2.4s var(--glide);
}
/* Changing product is a slow dissolve at first light, not a slide. The new
   picture comes up over the old one — a few per cent of rise, a breath of
   zoom settling on the product's foot and, with a mouse, a focus pull —
   while the old one holds still underneath and only lets go once it is
   covered, so the half-disc is never empty. */
/* --glide moves things; --fade lets a picture appear a little sooner. */
.orbit{--glide:cubic-bezier(.45,0,.2,1);--fade:cubic-bezier(.4,0,.2,1)}
.orbit__product{
  position:absolute;height:auto;max-width:none;opacity:0;will-change:opacity,transform;
  transform:translate3d(var(--px,0px),var(--py,0px),0) translateY(3.5%) scale(1.035);
  transition:opacity 1.4s var(--fade),transform 2.4s var(--glide);
}
.orbit__product.is-on{z-index:2;opacity:1;transform:translate3d(var(--px,0px),var(--py,0px),0)}
.orbit__product.is-leaving{
  z-index:1;opacity:0;transform:translate3d(var(--px,0px),var(--py,0px),0);
  transition:opacity .9s var(--glide) 1.2s,transform 2.4s var(--glide);
}
.orbit__product.is-reset{transition:none}
@media(hover:hover) and (pointer:fine){
  .orbit__product{filter:blur(6px);transition:opacity 1.4s var(--fade),transform 2.4s var(--glide),filter 1.6s var(--fade)}
  .orbit__product.is-on,.orbit__product.is-leaving{filter:blur(0)}
  .orbit__product.is-leaving{transition:opacity .9s var(--glide) 1.2s,transform 2.4s var(--glide),filter 0s}
}
.orbit__film{width:108%;height:108%;left:-4%;top:-4%;object-fit:cover;object-position:50% 62%}

/* The reflection: a turned-over copy under the rule, blurred, fading out. */
.orbit__mirror{
  top:50%;border-radius:0 0 999px 999px;opacity:.26;
  -webkit-mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,0) 58%);
  mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,0) 58%);
}
.orbit__flip{position:absolute;left:0;top:-100%;width:100%;height:100%;transform:scaleY(-1);transform-origin:50% 100%;filter:blur(5px)}
.orbit__caption{z-index:1}

/* Below the horizon: the name, set like the wordmark. */
.orbit__caption{
  position:absolute;left:50%;top:56%;width:66%;transform:translateX(-50%);text-align:center;
}
/* The name goes quietly and the next one comes up a line at a time. */
.orbit__caption > *{transition:opacity 1s var(--glide),transform 1.2s var(--glide)}
.orbit__caption > :nth-child(2){transition-delay:.08s}
.orbit__caption > :nth-child(3){transition-delay:.16s}
.orbit__caption.is-swapping > *{opacity:0;transform:translateY(6px);transition-duration:.4s;transition-delay:0s}
.orbit__ref{font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-ink)}
.orbit__name{
  margin:.9rem 0 0;font-family:var(--accent);font-style:italic;font-weight:300;
  font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem);line-height:1.02;color:var(--petrol);letter-spacing:-.005em;
}
.orbit__price{margin-top:.8rem;font-size:.8125rem;letter-spacing:.2em;color:var(--mist);font-variant-numeric:tabular-nums}
.orbit__caption.is-swapping .orbit__ref{transition-delay:0s}

.orbit__detail{
  grid-column:2;grid-row:2;justify-self:center;text-align:center;max-width:34rem;margin-top:-2rem;
  transition:opacity 1s var(--glide) .12s;
}
.orbit__detail.is-swapping{opacity:0;transition-duration:.4s;transition-delay:0s}
.orbit__note{color:var(--mist);font-weight:300;font-size:.9375rem;line-height:1.75}
.orbit__more{
  margin-top:1.1rem;background:none;border:0;padding:0 0 .2rem;cursor:pointer;font:inherit;
  font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-ink);
  border-bottom:1px solid rgba(119,89,44,.45);
}
.orbit__more:hover{border-bottom-color:var(--brass)}
.orbit:not(.is-in) .orbit__caption > *,.orbit:not(.is-in) .orbit__detail{opacity:0}

@media(max-width:900px){
  .orbit{grid-template-columns:1fr;row-gap:1.25rem}
  .orbit__stage{grid-column:1;grid-row:1;width:min(100%,34rem)}
  .orbit__caption{top:55%;width:74%}
  /* Lever and Coucher would sit on the ring itself at this width. */
  .orbit__end{display:none}
  /* The carte becomes one line of names to scroll through under the stage. */
  .orbit__index{
    grid-column:1;grid-row:2;display:flex;gap:1.6rem;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gut) * -1);padding:.4rem var(--gut) .8rem;scrollbar-width:none;
  }
  .orbit__index::-webkit-scrollbar{display:none}
  .orbit__fam,.orbit__marker,.orbit__entry-lead,.orbit__entry-price{display:none}
  .orbit__list{display:contents}
  .orbit__entry{width:auto;white-space:nowrap;padding:.5rem 0;scroll-snap-align:center;border-bottom:1px solid transparent}
  .orbit__entry[aria-pressed="true"]{border-bottom-color:var(--brass)}
  .orbit__detail{grid-column:1;grid-row:3;margin-top:0}
}
@media(prefers-reduced-motion:reduce){
  .orbit__rule,.orbit__track,.orbit__end,#orbitHours circle,.orbit__sunmark,.orbit__product,.orbit__view,
  .orbit__caption > *,.orbit__detail,.orbit__fam,.orbit__entry,.orbit__marker{transition:none}
  .orbit__product.is-leaving,.orbit__product.is-on{transition:none;filter:none}
}

.sheet{
  border:0;padding:0;max-width:min(58rem,92vw);width:100%;
  background:var(--ivory);color:var(--graphite);
  max-height:88vh;overflow:auto;
}
.sheet[open]{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.sheet::backdrop{background:rgba(21,42,40,.72)}
.sheet__fig{margin:0;background:var(--rule)}
.sheet__fig img{width:100%;height:100%;object-fit:cover;display:block}
.sheet__body{padding:clamp(1.75rem,4vw,3rem)}
.sheet__ref{font-size:.625rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-ink)}
.sheet__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:1rem;padding-bottom:1.25rem;border-bottom:1px solid var(--rule);
}
.sheet__dl{margin:0}
.sheet__dl>div{
  display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);gap:1.25rem;
  padding:.85rem 0;border-bottom:1px solid var(--rule);
}
.sheet__dl dt{
  font-size:.5625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-ink);
  padding-top:.25rem;
}
.sheet__dl dd{margin:0;font-weight:300;color:var(--petrol);font-size:.9375rem;line-height:1.65}
.sheet__caveat{
  margin-top:1.5rem;font-size:.625rem;letter-spacing:.12em;color:var(--mist);line-height:1.7;
}
.sheet__close{
  position:absolute;top:1rem;right:1rem;z-index:2;
  background:var(--ivory);border:1px solid var(--rule);cursor:pointer;padding:.55rem 1rem;
  font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--petrol);
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.sheet__close:hover{background:var(--brass);border-color:var(--brass);color:var(--ivory)}
@media(max-width:720px){
  .sheet[open]{grid-template-columns:1fr}
  .sheet__fig{aspect-ratio:16/10}
  .sheet__dl>div{grid-template-columns:1fr;gap:.35rem}
}

/* ---------- 4. ritual ---------- */
.ritual{background:var(--petrol-2);overflow:hidden}
.ritual__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.ritual__veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(21,42,40,.9),rgba(21,42,40,.78))}
.ritual__wrap{position:relative}
.steps{
  display:grid;gap:clamp(2rem,4vw,3rem);margin-top:clamp(3.5rem,8vw,6rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.step{border-top:1px solid rgba(201,168,124,.3);padding-top:1.5rem}
.step__n{
  display:block;font-family:var(--accent);font-style:italic;font-size:1.5rem;color:var(--brass-2);
  margin-bottom:1rem;
}
.step p{color:#B9C6C1;font-weight:300;font-size:.9375rem;line-height:1.8}
.ritual__pair{
  display:grid;gap:clamp(1.25rem,3vw,2.5rem);margin-top:clamp(3.5rem,8vw,6rem);
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
}
.ritual__pair .fig{margin-top:0}

/* ---------- la course du soleil ---------- */
/* The mark is already a sun sitting on a horizon. Here it simply keeps the
   real time: the circle rides the line between sunrise and sunset over San
   Francisco, and drops below it once the light has gone. */
.sun{background:var(--petrol-2);overflow:hidden}
.sun__wrap{max-width:64rem}

/* The rail and the two end labels are positioned, so the dial cannot have a
   fixed height — it has to be derived from those offsets, or the labels spill
   out of it and crowd the line below on narrow screens. */
.sun__dial{
  --rail-y:clamp(3rem,7vh,4.5rem);
  --label-y:clamp(4.4rem,9vh,5.6rem);
  position:relative;
  padding-top:var(--rail-y);
  padding-bottom:calc(var(--label-y) + 4.5rem);
  margin-top:clamp(3.5rem,8vw,6rem);
}
.sun__rail{
  position:absolute;left:0;right:0;top:var(--rail-y);height:1px;
  background:linear-gradient(to right,rgba(201,168,124,0),rgba(201,168,124,.55) 12%,rgba(201,168,124,.55) 88%,rgba(201,168,124,0));
}
.sun__orb{
  position:absolute;top:var(--rail-y);left:0;
  width:clamp(26px,3.2vw,38px);aspect-ratio:1;
  border:1.5px solid var(--brass-2);border-radius:50%;
  transform:translate(-50%,-50%);
  transition:left 1.2s var(--ease),top 1.2s var(--ease),opacity 1.2s var(--ease),box-shadow 1.2s var(--ease);
  box-shadow:0 0 0 0 rgba(201,168,124,0);
}
/* Daylight gives it a faint halo; below the horizon it is only an outline. */
.sun--day .sun__orb{box-shadow:0 0 34px 6px rgba(201,168,124,.16)}
.sun--night .sun__orb{top:calc(var(--rail-y) + clamp(24px,4vh,34px));opacity:.4}

.sun__ends{position:absolute;left:0;right:0;top:calc(var(--rail-y) + var(--label-y))}
.sun__end{position:absolute;left:0;display:flex;flex-direction:column;gap:.5rem}
.sun__end--right{left:auto;right:0;text-align:right}
.sun__label{font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-2)}
.sun__time{
  font-weight:300;color:var(--ivory);font-size:clamp(1.1rem,.95rem + .7vw,1.6rem);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}

.sun__status{
  margin-top:clamp(2.5rem,6vw,4rem);color:var(--ivory);font-weight:300;
  font-size:clamp(1.05rem,.95rem + .6vw,1.5rem);line-height:1.6;max-width:34ch;
}
.sun__meta{
  margin-top:1.25rem;color:#8FA09A;font-weight:300;font-size:.8125rem;line-height:1.8;max-width:46ch;
}

@media(prefers-reduced-motion:reduce){
  .sun__orb{transition:none}
}

/* ---------- 5. les trente-sept ---------- */
/* The invitation is the brightest, stillest thing on the page; the pause
   itself is dark. You step out of the daylight to take it. */
/* The pause now closes the ritual instead of opening its own section — same
   dark ground, so the dial and the type take their light variants. */
.seven__wrap{margin-top:clamp(4rem,9vw,7rem);padding-top:clamp(3.5rem,7vw,5rem);border-top:1px solid rgba(201,168,124,.2)}
.seven__dial--dark .seven__rule{stroke:rgba(201,168,124,.5)}
.seven__dial--dark .seven__track{stroke:rgba(201,168,124,.22)}
.lede--tight{margin-top:clamp(4rem,9vw,7rem);max-width:44rem}
.seven{background:var(--ivory);min-height:100svh;display:flex;align-items:center}
.seven__wrap{text-align:center;max-width:52rem;margin-inline:auto}
.seven__wrap .h2{margin-inline:auto}
.seven__body{margin-inline:auto;max-width:44ch}
.seven__start{margin-top:clamp(2.5rem,5vw,3.5rem);justify-self:center}
/* The empty ring, shown before you fill it. Darker than the takeover's,
   because here it sits on ivory. */
.seven__dial--still{width:clamp(150px,20vw,210px);margin:0 auto clamp(1.75rem,4vw,2.75rem)}
.seven__dial--still .seven__rule{stroke:rgba(176,141,87,.5)}
.seven__dial--still .seven__track{stroke:rgba(176,141,87,.35)}

/* The dial is the mark: the circle of the logo closing over 37 minutes. */
.seven__dial{
  width:clamp(200px,34vw,300px);height:auto;
  fill:none;stroke-linecap:round;overflow:visible;
}
.seven__rule{stroke:rgba(201,168,124,.45);stroke-width:1.5}
.seven__track{stroke:rgba(201,168,124,.18);stroke-width:2.5}
.seven__arc{
  stroke:var(--brass-2);stroke-width:2.5;
  stroke-dasharray:301.59;stroke-dashoffset:301.59;
  transition:stroke-dashoffset 1s linear;
}

.seven-veil{
  position:fixed;inset:0;z-index:200;background:var(--petrol-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1.75rem,4vw,3rem);padding:var(--gut);text-align:center;
}
/* This must come after the display rule. A class and an attribute selector
   carry the same specificity, so `display:flex` would otherwise beat the
   browser's own [hidden] rule and leave a full-screen, invisible, fully
   clickable panel sitting over the entire site. Visibility here depends on
   the hidden attribute and nothing else — never on opacity, never on a
   transition that may not run. */
.seven-veil[hidden]{display:none}
.seven__clock{
  font-weight:300;color:var(--ivory);line-height:1;
  font-size:clamp(3rem,1.5rem + 7vw,7rem);letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.seven__line{
  color:#B9C6C1;font-weight:300;max-width:32ch;
  font-size:clamp(1rem,.9rem + .5vw,1.25rem);line-height:1.7;
}
.seven__end{
  margin-top:1rem;background:none;border:0;cursor:pointer;padding:.6rem;
  color:var(--brass-2);font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;
  border-bottom:1px solid transparent;transition:border-color .4s var(--ease);
}
.seven__end:hover{border-bottom-color:var(--brass-2)}

/* While the pause is running the page underneath must not scroll away. */
.rive-paused,.rive-paused body{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .seven__arc{transition:none}
}

/* ---------- 5. find us ---------- */
.stops{margin-top:clamp(3.5rem,7vw,5.5rem);overflow-x:auto}
.stops__table{width:100%;border-collapse:collapse;min-width:38rem;text-align:left}
.stops__table th,.stops__table td{padding:1.15rem 1rem;border-bottom:1px solid var(--rule);font-weight:300}
.stops__table thead th{
  font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-ink);
  padding-bottom:.9rem;border-bottom-color:var(--petrol);
}
.stops__table tbody th{color:var(--petrol);letter-spacing:.1em;font-weight:400;white-space:nowrap}
.stops__table td{color:var(--mist)}
.stops__table td:last-child{white-space:nowrap;color:var(--petrol)}
.stops__table .closed{color:var(--brass-ink)}
.stops__note{
  display:block;margin-top:.35rem;font-family:var(--accent);font-style:italic;font-size:.9375rem;color:var(--brass-ink);
}
.stops__link{color:var(--petrol);border-bottom:1px solid rgba(119,89,44,.45);transition:border-color .4s var(--ease)}
.stops__link:hover{border-bottom-color:var(--brass)}
.stops__table tbody tr:hover td,.stops__table tbody tr:hover th{background:rgba(176,141,87,.06)}

/* ---------- l'atelier ---------- */
/* Twelve sections all breathing the same way is why the page read as empty.
   This one is deliberately dense — a wall, not a pause. */
.shop{background:var(--ivory-2)}
.shop__grid{
  display:grid;gap:8px;margin-top:clamp(3rem,7vw,5rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:640px){ .shop__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(min-width:1000px){ .shop__grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

.shop__cell{position:relative;overflow:hidden;background:var(--rule);aspect-ratio:1}
.shop__cell img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.03);transition:transform 1.1s var(--ease);
}
.shop__cell:hover img{transform:scale(1)}
/* The whole tile is the control: the photograph opens full size. */
.shop__open{
  all:unset;box-sizing:border-box;display:block;width:100%;height:100%;
  position:relative;cursor:zoom-in;
}
.shop__open:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.shop__open:focus-visible img{transform:scale(1)}

/* ---------- the enlarged photograph ---------- */
.zoom{
  width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:rgba(21,42,40,.96);color:var(--ivory);overflow:hidden;
}
.zoom[open]{display:flex;align-items:center;justify-content:center}
.zoom::backdrop{background:rgba(21,42,40,.96)}
.zoom__fig{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:1rem;
  padding-inline:clamp(76px,8vw,120px);
}
.zoom__fig img{
  display:block;width:auto;height:auto;
  max-width:min(100%,1400px);max-height:calc(100dvh - 9rem);
  object-fit:contain;background:var(--petrol-2);
}
.zoom__cap{
  display:flex;gap:1.5rem;justify-content:space-between;align-items:baseline;
  width:100%;font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory);
}
.zoom__count{color:var(--mist-light);font-variant-numeric:tabular-nums}
.zoom__close{
  position:absolute;top:clamp(12px,2.5vw,28px);right:clamp(16px,2.5vw,28px);
  background:none;border:1px solid rgba(242,238,228,.4);color:var(--ivory);
  font:inherit;font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;
  padding:.75rem 1.1rem;cursor:pointer;
}
.zoom__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:3rem;height:3rem;border-radius:50%;
  background:none;border:1px solid rgba(242,238,228,.4);color:var(--ivory);
  font-size:1.1rem;line-height:1;cursor:pointer;
}
.zoom__nav--prev{left:clamp(8px,2vw,28px)}
.zoom__nav--next{right:clamp(8px,2vw,28px)}
.zoom__close:hover,.zoom__nav:hover{background:var(--brass);border-color:var(--brass)}
.zoom__close:focus-visible,.zoom__nav:focus-visible{outline:2px solid var(--brass-2);outline-offset:3px}
/* Narrow screens: the arrows move under the photograph so they never cover it. */
@media(max-width:900px){
  .zoom__fig{padding-inline:16px}
  .zoom__nav{top:auto;bottom:clamp(16px,3vh,28px);transform:none}
  .zoom__nav--prev{left:calc(50% - 3.75rem)}
  .zoom__nav--next{right:calc(50% - 3.75rem)}
  .zoom__fig img{max-height:calc(100dvh - 13rem)}
}
/* The caption sits on the image, so it carries its own ground. */
.shop__cap{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .85rem .7rem;
  font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory);
  background:linear-gradient(to top,rgba(21,42,40,.82),rgba(21,42,40,0));
  line-height:1.4;
}

.book__fig{grid-column:1/-1;margin:0 0 clamp(2rem,5vw,3.5rem)}

@media(prefers-reduced-motion:reduce){ .shop__cell img{transform:none} }

/* ---------- engagements ---------- */
/* A pre-launch counter has no reviews yet. Inventing three and labelling them
   fake was worse than saying nothing; these are promises instead, which a
   visitor can actually hold the business to. */
.vows__list{
  display:grid;gap:clamp(2.5rem,5vw,4rem);margin-top:clamp(4rem,8vw,6.5rem);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
}
.vow{border-top:1px solid var(--petrol);padding-top:1.75rem}
.vow__n{
  font-size:.6875rem;letter-spacing:.3em;color:var(--brass-ink);margin-bottom:1.4rem;
}
.vow__t{
  font-family:var(--accent);font-style:italic;font-weight:300;
  font-size:clamp(1.6rem,1.3rem + 1.1vw,2.15rem);line-height:1.2;color:var(--petrol);
  letter-spacing:0;
}
.vow__b{margin-top:1.1rem;color:var(--mist);font-weight:300;font-size:.9375rem;line-height:1.75}

/* The prosaic reassurance a food business is actually asked for. */
.facts{
  display:grid;gap:1px;margin-top:clamp(3.5rem,7vw,5.5rem);
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  background:var(--rule);border:1px solid var(--rule);
}
.facts li{
  background:var(--ivory-2);padding:1.4rem 1.5rem;
  display:flex;flex-direction:column;gap:.6rem;
}
.facts__k{
  font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-ink);
}
.facts__v{font-size:.9375rem;font-weight:300;color:var(--petrol);line-height:1.6}

/* ---------- 7 + 8. forms ---------- */
.book{background:var(--petrol);color:var(--ivory)}
/* Three columns on a wide screen leave the statement about a third of the
   width; scaled like the founders' heading so it keeps its two lines. */
.book .h2{font-size:clamp(2.1rem,1.2rem + 2.4vw,3.4rem)}
.book__wrap,.waitlist__wrap{
  display:grid;gap:clamp(3rem,6vw,6rem);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
}
.form{display:grid;gap:1.75rem 1.5rem;grid-template-columns:repeat(2,1fr)}
.form__title{
  grid-column:1/-1;font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-2);
}
.field{display:flex;flex-direction:column;gap:.6rem}
.field--full{grid-column:1/-1}
.field label{font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mist)}
.form--light .field label{color:var(--brass-2)}
.field input,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:.6rem 0;font-weight:300;font-size:1rem;border-radius:0;
  transition:border-color .4s var(--ease);
}
.form--light .field input,.form--light .field textarea{border-bottom-color:rgba(201,168,124,.4);color:var(--ivory)}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--brass)}
.field textarea{resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--mist);opacity:.7}
.field.is-bad input,.field.is-bad textarea{border-bottom-color:#A8543F}

.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn[disabled]{opacity:.55;cursor:progress}

.check{display:flex;align-items:center;gap:.85rem;font-size:.875rem;font-weight:300;color:var(--mist);cursor:pointer}
.form--light .check{color:#B9C6C1}
.check input{width:1rem;height:1rem;accent-color:var(--brass)}

.btn{
  grid-column:1/-1;justify-self:start;
  background:var(--petrol);color:var(--ivory);border:1px solid var(--petrol);
  padding:1rem 2.25rem;cursor:pointer;
  font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;
  transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.btn:hover{background:var(--brass);border-color:var(--brass)}
.btn--light{background:transparent;color:var(--ivory);border-color:var(--brass-2)}
.btn--light:hover{background:var(--brass);border-color:var(--brass);color:var(--ivory)}
.form__status{
  grid-column:1/-1;font-size:.75rem;letter-spacing:.1em;color:var(--brass-ink);min-height:1.2em;
}
.form--light .form__status{color:var(--brass-2)}
@media(max-width:560px){.form{grid-template-columns:1fr}}

/* ---------- confidentialité ---------- */
/* Collecting an address is the one thing on this site with legal weight. The
   notice sits on the page, not behind a link nobody opens. */
.legal{background:var(--ivory-2);padding-block:clamp(4rem,9vw,6rem)}
.legal__wrap{max-width:64rem}
.legal .h3{margin-top:.6rem;max-width:22ch}
.legal__cols{
  display:grid;gap:clamp(1.75rem,4vw,3rem);margin-top:clamp(2.5rem,5vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
}
.legal__h{
  font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-ink);
  margin:0 0 .7rem;
}
.legal__cols p{font-size:.875rem;font-weight:300;color:var(--mist);line-height:1.75;max-width:42ch}
.legal__cols p + p{margin-top:.9rem}
.legal__cols a{color:var(--petrol)}
.legal__who{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--rule);
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);
}
.legal__who a{color:var(--brass-ink);text-decoration:none}

/* The reassurance belongs beside the button, where the decision is made. */
.form__privacy{
  grid-column:1/-1;margin-top:-.6rem;font-size:.75rem;font-weight:300;
  color:var(--mist);line-height:1.6;
}
.form--light .form__privacy{color:#9BAAA4}
.form__privacy a{color:var(--brass-ink)}

/* The waiting list, asked once in passing at the foot of the week. */
.nudge{
  margin-top:clamp(4rem,8vw,7rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--rule);
  display:grid;gap:2rem clamp(2rem,6vw,5rem);align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
}
.nudge__title{margin-top:1rem}
.nudge__body{margin-top:.9rem;max-width:44ch;font-size:.9375rem;font-weight:300;line-height:1.7;color:var(--mist)}
.nudge__body a{color:var(--brass-ink)}
.nudge__form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.9rem 1.25rem;align-items:end}
.nudge__form .btn{grid-column:auto}
@media(max-width:480px){
  .nudge__form{grid-template-columns:minmax(0,1fr)}
}
.form--light .form__privacy a{color:var(--brass-2)}

/* ---------- footer ---------- */
.foot{background:var(--petrol-2);color:#B9C6C1;padding-block:clamp(4rem,9vw,7rem) 2.5rem}
.foot__wrap{display:grid;gap:clamp(3rem,6vw,5rem)}
.foot__brand{text-align:center}
.foot__mark{width:clamp(150px,24vw,220px);height:auto;margin-inline:auto;fill:none;stroke:var(--brass);overflow:visible}
.foot__word{
  margin-top:1.4rem;font-size:clamp(1.5rem,1.1rem + 1.8vw,2.25rem);font-weight:300;
  letter-spacing:.46em;text-transform:uppercase;color:var(--ivory);text-indent:.46em;
}
.foot__tag{margin-top:1rem;font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass-2)}
.foot__cols{
  display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  border-top:1px solid rgba(201,168,124,.22);padding-top:clamp(2.5rem,5vw,4rem);
}
.foot__cols p{font-weight:300;font-size:.9375rem;line-height:1.9}
.foot__cols .over{color:var(--brass-2);margin-bottom:1rem}
.foot__cols a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .4s var(--ease)}
.foot__cols a:hover{border-bottom-color:var(--brass)}
.foot__legal{
  border-top:1px solid rgba(201,168,124,.22);padding-top:2rem;
  font-size:.6875rem;letter-spacing:.12em;color:var(--mist-light);text-align:center;
}

/* ---------- 404 ---------- */
.oops{background:var(--petrol-2);color:var(--ivory);min-height:100svh;display:grid;place-items:center}
.oops__wrap{text-align:center;max-width:44rem;padding-block:4rem}
.oops__mark{width:clamp(160px,26vw,240px);height:auto;fill:none;stroke:var(--brass-2);margin:0 auto 2.5rem;display:block;overflow:visible}
.oops .over{color:var(--brass-2)}
.oops .h2{color:var(--ivory)}
.oops .body{color:#B9C6C1;margin-inline:auto}
.oops__acts{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:center;margin-top:2.5rem}
.oops .btn{background:transparent;color:var(--ivory);border-color:var(--brass-2)}
.oops .btn:hover{background:var(--brass);border-color:var(--brass)}
.oops__alt{
  font-size:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass-2);
  text-decoration:none;border-bottom:1px solid rgba(201,168,124,.4);padding-bottom:.2rem;
}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.codes .reveal:nth-child(2),.steps .reveal:nth-child(2),.quotes .reveal:nth-child(2){transition-delay:.09s}
.codes .reveal:nth-child(3),.steps .reveal:nth-child(3),.quotes .reveal:nth-child(3){transition-delay:.18s}
.steps .reveal:nth-child(4){transition-delay:.27s}
.menu .reveal:nth-child(3n+2){transition-delay:.08s}
.menu .reveal:nth-child(3n+3){transition-delay:.16s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .fig img,.card__img img{transform:none}
}

/* ---------- le curseur ----------
   The ring of the logo follows the pointer; over anything that can be
   clicked it fills, like the sun set on the line. Mouse and trackpad only —
   the class is added by the script after checking (hover: hover) and
   (pointer: fine). Text fields keep the native caret so you see where you type. */
html.has-ring,html.has-ring *{cursor:none !important}
html.has-ring input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.has-ring textarea{cursor:text !important}
.ring{
  position:fixed;left:0;top:0;z-index:2147483647;pointer-events:none;
  width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;
  border:1.5px solid var(--brass);background:transparent;
  opacity:0;will-change:transform;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),
             background-color .35s var(--ease),border-color .35s var(--ease),opacity .3s var(--ease);
}
.ring.is-live{opacity:1}
.ring.is-over{width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--brass);border-color:var(--brass)}
.ring.is-down{width:8px;height:8px;margin:-4px 0 0 -4px}
.ring.is-text{opacity:0}