/* ============================================================
   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.
   ============================================================ */

: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);
}
.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}

.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)}
@media(max-width:900px){.head__nav{display:none}}
@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}
}

/* ---------- 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);
  display:flex;flex-direction:column;justify-content:center;gap:2rem;
  padding:6rem var(--gut) 3rem;overflow-y:auto;overscroll-behavior:contain;
}
.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}

/* ---------- 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__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}
.today__shore{stroke:var(--rule);stroke-width:1.5;stroke-linecap:round}
.today__route{stroke:var(--brass);stroke-width:1;opacity:.4;stroke-dasharray:3 5}
.today__pin circle{stroke:var(--brass);stroke-width:1.5;fill:var(--ivory)}
/* Map labels sit over the shore line, so each one carries a halo of the page
   ground and is painted stroke-first — the standard cartographic casing. */
.today__pin text{
  fill:var(--mist);font-family:var(--display);font-size:15px;
  letter-spacing:.13em;text-transform:uppercase;
  stroke:var(--ivory);stroke-width:5px;stroke-linejoin:round;
  paint-order:stroke fill;
}
.today__pin .today__num{fill:var(--brass-ink);font-size:13px}
/* The stop being served now is the only thing on the plate that is filled. */
.today__pin.is-now circle{fill:var(--petrol);stroke:var(--petrol);stroke-width:2}
.today__pin.is-now text{fill:var(--petrol);font-weight:400}
.today__pin.is-now .today__num{stroke:none}
.today__pin.is-now .today__num{fill:var(--ivory)}
/* At phone width the plate renders at ~40% scale, so 15px labels land at 6px.
   The numbers go — the route line already carries the order. */
@media(max-width:900px){
  .today__pin text{font-size:27px}
  .today__num{display:none}
}
.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 object was just taken apart; here are the two who put it back together.
   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);
}
@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}

.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__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 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)}
.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)}
.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}
}