/* ============================================================================
   BUILD BUSY — v4 "Daylight, then after hours"
   One stylesheet for every page. Spec: waas-sites/DESIGN.md

   THESIS   The page runs from DAY into NIGHT, because the offer is about the
            hours nobody is working. Light is business hours. Dark is 9pm.
            Refuses the category's one-ground page, and refuses trygtm's
            light-body-dark-chrome by doing the exact inverse.
   OWN-WORLD Cool bone daylight #E9EDEA (never cream), draining into petrol,
            prussian and oxide. Dot lattice on every ground. Archivo width
            contrast. Mono only on measurement.
   STORY    He recognises his own evening on the second screen, gets one
            drawing per idea instead of a page of argument, and books.
   FIRST VIEWPORT Bone ground, display line left, one sentence, two buttons,
            dark calendar panel right. Primary action above the fold, left.
   FORM     Brief-pinned by Jason 2026-08-22, so no concept roll. The staging
            is the daylight boundary and it is the one authored moment.
   ============================================================================ */

@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight:100 900; font-stretch:62% 125%; font-display:swap; font-style:normal;
}

:root{
  /* DAY. Bone, not cream: warm cream + serif + terracotta is the named
     AI-cluster signature and this world bans it by name. Contrast on this
     ground measured at 14.6 / 5.8 / 5.1. */
  --day:#E9EDEA; --day-2:#DFE5E1;
  --day-ink:#0A1E1C; --day-soft:#4A5F5B; --day-faint:#556661;
  --day-rule:rgba(10,30,28,.16); --day-rule-hi:rgba(10,30,28,.34);
  --day-dot:rgba(10,30,28,.09);

  /* NIGHT. Three grounds inside a 9-point L* band, because "too harsh" was a
     lightness problem, not a hue problem. */
  --field:#0B211F; --field-2:#0E2926; --panel:#12302C; --panel-2:#173934;
  --ink:#EDF4F2; --ink-soft:#A6C2BD; --ink-faint:#8FAEA9;
  --rule:rgba(237,244,242,.15); --rule-hi:rgba(237,244,242,.30);
  --rule-faint:rgba(237,244,242,.08);
  /* RETIRED 2026-08-22: --slate (prussian) and --band (oxide) as GROUNDS.
     Three saturated grounds read as a rainbow. The aliases stay so nothing
     breaks, and every one of them now resolves to a value of the SAME petrol. */
  --slate:#0E2926; --slate-hi:#173934; --slate-ink:var(--ink); --slate-soft:var(--ink-soft);
  --band:#12302C;  --band-hi:#173934;  --band-ink:var(--ink);  --band-soft:var(--ink-soft);

  /* A MARK, never a ground and never a text colour. 2.30:1 on petrol. */
  --oxide:#E5342A;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --r:14px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--field); color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,sans-serif; font-synthesis:none;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-size:17px; line-height:1.55;
}
img,svg,video{max-width:100%}
.wrap{width:min(1180px,100% - 48px); margin-inline:auto}
.wrap-narrow{width:min(760px,100% - 48px); margin-inline:auto}
h1,h2,h3{font-weight:800; font-variation-settings:'wdth' 121;
  letter-spacing:-.035em; line-height:1.02; margin:0;
  /* measured: the hero ran to 4 ragged lines with "while / you work." orphaned.
     balance evens the rag without capping the measure. */
  text-wrap:balance}
p,.lede{text-wrap:pretty}
p{margin:0}
a{color:inherit}
.kicker{font-family:var(--mono); text-transform:uppercase; letter-spacing:.15em;
  font-size:.66rem; font-weight:600; display:block}
.em{font-variation-settings:'wdth' 95; font-weight:800}
.skip{position:absolute; left:-9999px}
.skip:focus{left:14px; top:14px; z-index:99; background:var(--day);
  color:var(--day-ink); padding:12px 18px; border-radius:8px}
:focus-visible{outline:2px solid var(--oxide); outline-offset:3px}

/* ---- CHROME. The nav INVERTS at the daylight boundary. That is the site's
   signature move, in place of a stock sticky header. -------------------------- */
.top{position:fixed; inset:14px 0 auto; z-index:60; pointer-events:none}
.nav{
  pointer-events:auto; display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:58px; padding:0 14px 0 22px; border-radius:999px;
  background:var(--day-ink); color:var(--day); border:1px solid transparent;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.75);
  transition:background .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease);
}
body.is-night .nav{background:var(--day); color:var(--day-ink);
  border-color:rgba(255,255,255,.10)}
.logo{font-variation-settings:'wdth' 118; font-weight:800; letter-spacing:-.02em;
  font-size:1.04rem; text-decoration:none; color:inherit; opacity:.62}
.logo b{opacity:1}
.nav nav{display:flex; align-items:center; gap:26px}
.nav a.lnk{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:inherit; opacity:.66;
  transition:opacity .2s}
.nav a.lnk:hover,.nav a.lnk:focus-visible{opacity:1}
.nav .cta{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; padding:11px 18px;
  border-radius:999px; background:var(--day); color:var(--day-ink); font-weight:700;
  transition:background .45s var(--ease), color .45s var(--ease), transform .18s var(--ease)}
body.is-night .nav .cta{background:var(--day-ink); color:var(--day)}
.nav .cta:hover{transform:translateY(-1px)}
@media(max-width:860px){.nav nav{display:none} .nav{gap:12px}}

/* ---- THE DAY --------------------------------------------------------------- */
.day{background:var(--day); color:var(--day-ink); position:relative;
  padding:clamp(120px,15vh,180px) 0 clamp(70px,9vw,110px)}
.day::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(var(--day-dot) 1px,transparent 1px);
  background-size:22px 22px; background-position:11px 11px}
.day>.wrap,.day>.wrap-narrow{position:relative}
.day .kicker{color:var(--day-faint); margin-bottom:22px}
.day h1{font-size:clamp(2.6rem,5.6vw,4.5rem); color:var(--day-ink); max-width:15ch}
.day h1 .thin{font-variation-settings:'wdth' 90; font-weight:700; color:var(--day-soft)}
.day .lede{margin-top:26px; max-width:42ch; color:var(--day-soft);
  font-size:clamp(1rem,1.35vw,1.12rem)}

.hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(32px,5vw,72px); align-items:center}
@media(max-width:960px){.hero{grid-template-columns:1fr; gap:44px}}

.acts{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.btn{min-height:48px; display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.15em;
  text-transform:uppercase; font-weight:700; text-decoration:none;
  padding:15px 26px; border-radius:10px; border:1px solid transparent;
  transition:transform .18s var(--ease), background .2s, border-color .2s}
.btn-1{background:var(--day-ink); color:var(--day)}
.btn-1:hover{transform:translateY(-2px)}
.btn-2{background:transparent; color:var(--day-ink); border-color:var(--day-rule-hi)}
.btn-2:hover{border-color:var(--day-ink)}
.under{margin-top:18px; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--day-faint)}
/* on the night, the buttons invert */
.night .btn-1{background:var(--ink); color:var(--field)}
.night .btn-2{color:var(--ink); border-color:var(--rule-hi)}
.night .btn-2:hover{border-color:var(--ink)}
.night .under{color:var(--ink-faint)}

/* The calendar panel is DARK on the light hero: the night is already visible
   inside the day, which is the whole argument in one object. */
.panel{background:var(--field); color:var(--ink); border-radius:var(--r);
  padding:24px 22px 20px; box-shadow:0 40px 80px -50px rgba(10,30,28,.85);
  position:relative}
.panel-top{display:flex; justify-content:space-between; align-items:center;
  padding-bottom:15px; margin-bottom:6px; border-bottom:1px solid var(--rule)}
.panel-top b{font-size:.96rem; font-weight:700; font-variation-settings:'wdth' 104}
.tag{font-family:var(--mono); font-size:.58rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint); display:flex;
  align-items:center; gap:7px}
.tag i{width:6px; height:6px; border-radius:50%; background:var(--oxide); display:block}
.slot{display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:14px 10px; border-bottom:1px solid var(--rule-faint); font-size:.93rem;
  border-radius:7px}
.slot em{font-style:normal; font-family:var(--mono); font-size:.58rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint)}
.slot.hit{background:rgba(237,244,242,.07)}
.slot.hit span:first-child{color:var(--ink-faint); text-decoration:line-through;
  text-decoration-color:var(--rule-hi)}
.slot.hit em{color:var(--ink)}
.panel-foot{margin-top:16px; text-align:center; padding:14px;
  border:1px solid var(--rule); border-radius:9px; font-family:var(--mono);
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}

/* ---- THE BOUNDARY. The only gradient on the site that exists for itself.
   🔴 It MUST ramp through a colour: both ends sit near the neutral axis, so any
   direct interpolation greys out, oklab included. Measured, then fixed. ------- */
.dusk{height:clamp(56px,6vw,80px); position:relative;
  background:linear-gradient(180deg,var(--day) 0,var(--field) 100%)}
/* the boundary carries the ONE mark, so day and night meet on a line the reader
   can see rather than on a smear */
.dusk::after{content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--oxide); opacity:.5}
/* the same boundary, run backwards: night lifting into morning */
.dusk.dawn{background:linear-gradient(180deg,var(--field) 0,var(--day) 100%)}
.dusk.dawn::after{top:auto; bottom:0}
.dusk.dawn::before{-webkit-mask-image:linear-gradient(180deg,transparent,#000);
  mask-image:linear-gradient(180deg,transparent,#000)}
.dusk::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(10,30,28,.07) 1px,transparent 1px);
  background-size:22px 22px; background-position:11px 11px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);
  mask-image:linear-gradient(180deg,#000,transparent)}

/* ---- THE NIGHT ------------------------------------------------------------- */
.night{background:var(--field); position:relative; padding:clamp(70px,9vw,120px) 0}
.night::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:22px 22px; background-position:11px 11px}
.night>.wrap,.night>.wrap-narrow{position:relative}
.night .kicker{color:var(--ink-faint); margin-bottom:20px}
.night h2{font-size:clamp(2rem,4.4vw,3.3rem); max-width:17ch}
.night .lede{margin-top:20px; max-width:52ch; color:var(--ink-soft)}

.night.slate{background:var(--slate); color:var(--slate-ink)}
.night.slate::before{background-image:radial-gradient(rgba(255,255,255,.085) 1px,transparent 1px)}
.night.slate .kicker{color:var(--slate-soft)}
.night.slate h2,.night.slate h3,.night.slate strong,.night.slate b{color:var(--slate-ink)}
.night.slate .lede,.night.slate p,.night.slate li{color:var(--slate-soft)}
.night.slate .dl{fill:var(--slate-soft)} .night.slate .dv{fill:var(--slate-ink)}
.night.slate .dstroke{stroke:var(--slate-ink)} .night.slate .dfill{fill:var(--slate-ink)}
.night.slate .btn-1{background:var(--slate-ink); color:var(--slate)}
.night.slate .btn-2{color:var(--slate-ink); border-color:rgba(255,255,255,.30)}

.night.oxide{background:var(--band); color:var(--ink)}
.night.oxide::before{background-image:radial-gradient(rgba(255,255,255,.095) 1px,transparent 1px)}
.night.oxide .kicker{color:var(--band-soft)}
.night.oxide h2,.night.oxide h3,.night.oxide strong,.night.oxide b{color:var(--band-ink)}
.night.oxide .lede,.night.oxide p,.night.oxide li{color:var(--band-soft)}
.night.oxide .dl{fill:var(--band-soft)} .night.oxide .dv{fill:var(--band-ink)}
.night.oxide .dstroke{stroke:var(--band-ink)} .night.oxide .dfill{fill:var(--band-ink)}
.night.oxide .btn-1{background:var(--band-ink); color:var(--band)}

/* seams between two dark grounds fade, so three saturated colours never butt
   edge to edge. Jason: "the colors are too harsh." */
.night.seam-in{background-image:linear-gradient(180deg,var(--field) 0,
  transparent 90px)}
.night.seam-out{background-image:linear-gradient(180deg,transparent
  calc(100% - 90px),var(--field) 100%)}
.night.seam-both{background-image:linear-gradient(180deg,var(--field) 0,
  transparent 90px,transparent calc(100% - 90px),var(--field) 100%)}



/* ---- AMBIENT BACKGROUND ----------------------------------------------------
   🔴 THE FIRST VERSION WAS INVISIBLE AND JASON SAID SO TWICE. Eight 5px dots at
   .55 peak opacity, on screen for 4% of a 17s cycle: about 0.3 seconds of faint
   dot per section per twenty seconds. That is not subtle, it is absent, and
   "restrained" is no defence for something nobody can see.

   Three things move now, and the loudest of them is the one that MEANS
   something: a signal travelling the width of the section, which is the work
   moving through the system.

   ⚠️ COST. No canvas, no rAF, no JS. Compositor-only opacity and transform, so
   it can sit behind a whole page without touching scroll performance. ------- */
.spark{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.spark i{position:absolute; display:block; border-radius:999px}

/* 1. SIGNALS TRAVEL. Oxide, because this is the one place a mark earns motion. */
.spark i:nth-child(-n+3){height:1px; left:-32%; width:32%; opacity:0;
  background:linear-gradient(90deg,transparent,var(--oxide),transparent)}
.spark i:nth-child(1){top:19%; --dur:11s; --delay:0s}
.spark i:nth-child(2){top:52%; --dur:17s; --delay:4.5s}
.spark i:nth-child(3){top:79%; --dur:13s; --delay:8.5s}
@media (prefers-reduced-motion:no-preference){
  .spark i:nth-child(-n+3){animation:travel var(--dur,13s) linear var(--delay,0s) infinite}
}
@keyframes travel{
  0%  {transform:translateX(0);    opacity:0}
  8%  {opacity:.6}
  92% {opacity:.6}
  100%{transform:translateX(420%); opacity:0}
}

/* 2. NODES BREATHE, with a ring that expands and clears. Ink on the dark ground,
      the day ink on the light one, so neither is a smudge. */
.spark i:nth-child(n+4){width:8px; height:8px; background:var(--ink); opacity:0}
.day .spark i:nth-child(n+4){background:var(--day-ink)}
.spark i:nth-child(4){left:9%;  top:31%; --dur:9s;  --delay:.5s}
.spark i:nth-child(5){left:87%; top:23%; --dur:11s; --delay:3s}
.spark i:nth-child(6){left:26%; top:75%; --dur:13s; --delay:6s}
.spark i:nth-child(7){left:71%; top:65%; --dur:9s;  --delay:1.5s}
.spark i:nth-child(8){left:47%; top:13%; --dur:11s; --delay:7.5s}
@media (prefers-reduced-motion:no-preference){
  .spark i:nth-child(n+4){animation:pulseNight var(--dur,11s) var(--ease) var(--delay,0s) infinite}
  .day .spark i:nth-child(n+4){animation-name:pulseDay}
}
@keyframes pulseNight{
  0%,100%{opacity:0;   transform:scale(.35); box-shadow:0 0 0 0 rgba(237,244,242,.30)}
  10%    {opacity:.42; transform:scale(1)}
  45%    {opacity:.16; transform:scale(1); box-shadow:0 0 0 18px rgba(237,244,242,0)}
  65%    {opacity:0;   transform:scale(1)}
}
@keyframes pulseDay{
  0%,100%{opacity:0;   transform:scale(.35); box-shadow:0 0 0 0 rgba(10,30,28,.22)}
  10%    {opacity:.30; transform:scale(1)}
  45%    {opacity:.10; transform:scale(1); box-shadow:0 0 0 18px rgba(10,30,28,0)}
  65%    {opacity:0;   transform:scale(1)}
}

/* 3. THE LATTICE DRIFTS, so the page is never wholly static. ~2px a second. */
@media (prefers-reduced-motion:no-preference){
  .day::before,.night::before{animation:weave 60s linear infinite}
}
@keyframes weave{to{background-position:143px 143px}}
@media(max-width:760px){.spark i:nth-child(n+6){display:none}}

/* ---- TWO COLOURS. Section rhythm without a second ground -------------------
   🔒 Jason, third correction: "still has 4 different colors on the home page."
   One HUE is not one GROUND. bone + petrol + two lifted petrols is four visible
   bands, and "it is all the same green" argues about tokens rather than about
   what a reader sees. The dark is now ONE ground and sections are separated by a
   hairline, the same device the ledger already uses. */
.night.ruled{background:var(--field)}
.night.ruled + .night, .night + .night.ruled,
.night.ruled + .night.ruled{border-top:1px solid var(--rule-faint)}
/* the seam fades are meaningless between two identical grounds */
.night.seam-in,.night.seam-out,.night.seam-both{background-image:none}

/* ---- ONE IDEA PER SCREEN. The drawing gets the room, the words get 2 lines. -- */
.stage{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,72px); align-items:center}
.stage.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.stage.flip>*:first-child{order:2} .stage.flip>*:last-child{order:1}
@media(max-width:900px){
  .stage,.stage.flip{grid-template-columns:1fr; gap:36px}
  .stage.flip>*:first-child,.stage.flip>*:last-child{order:0}
}
.draw svg{display:block; width:100%; height:auto; overflow:visible}
.draw figcaption{margin-top:14px; font:600 10px/1.5 var(--mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.dl{font:600 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  fill:var(--ink-faint)}
.dv{font:700 13px/1 var(--mono); letter-spacing:.1em; fill:var(--ink)}
.dstroke{stroke:var(--ink); fill:none; stroke-width:1.5}
.dfaint{stroke:rgba(255,255,255,.26); fill:none; stroke-width:1}
.dfill{fill:var(--ink)}
.ddim{fill:rgba(255,255,255,.22)}
.strike{stroke:var(--oxide); stroke-width:1.6}
.row-out{opacity:.46}
svg.wide-only{display:block} svg.narrow-only{display:none}
@media(max-width:760px){
  svg.wide-only{display:none} svg.narrow-only{display:block}
  .dl{font-size:15px} .dv{font-size:17px}
}

/* ---- THE DEAL LEDGER ------------------------------------------------------- */
.ledger{border-top:1px solid var(--rule-hi); margin-top:clamp(30px,3.6vw,44px)}
.ledger div{display:grid; grid-template-columns:1fr; gap:4px;
  padding:clamp(18px,2.1vw,24px) 0; border-bottom:1px solid var(--rule)}
@media (min-width:760px){
  .ledger div{grid-template-columns:minmax(0,15rem) 1fr;
    gap:clamp(20px,3vw,48px); align-items:baseline}
}
.ledger dt{font-weight:800; font-variation-settings:'wdth' 112;
  letter-spacing:-.02em; font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--ink)}
.ledger dd{margin:0; color:var(--ink-soft); font-size:1rem; max-width:52ch}
.ledger .mark dt::after{content:""; display:inline-block; width:7px; height:7px;
  margin-left:10px; border-radius:50%; background:var(--oxide); vertical-align:.14em}
.night.slate .ledger dt{color:var(--slate-ink)}
.night.slate .ledger dd{color:var(--slate-soft)}
.night.slate .ledger{border-top-color:rgba(255,255,255,.30)}
.night.slate .ledger div{border-bottom-color:rgba(255,255,255,.18)}

/* ---- FAQ ------------------------------------------------------------------- */
.qa{border-top:1px solid var(--rule); margin-top:clamp(28px,3.4vw,42px)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{cursor:pointer; list-style:none; padding:20px 34px 20px 0;
  position:relative; font-weight:700; font-size:1.02rem;
  font-variation-settings:'wdth' 106; color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+"; position:absolute; right:6px; top:19px;
  font-family:var(--mono); font-weight:400; color:var(--ink-faint);
  transition:transform .25s var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa p{padding:0 0 22px; color:var(--ink-soft); max-width:64ch}

/* ---- LEGAL AND OPS. Read mode: comprehension first, the world second. ------- */
.doc{padding:clamp(120px,15vh,170px) 0 clamp(70px,9vw,110px)}
.doc h1{font-size:clamp(2.1rem,4.4vw,3.2rem); max-width:20ch}
.doc h2{font-size:clamp(1.1rem,1.8vw,1.35rem); margin:44px 0 12px;
  font-variation-settings:'wdth' 108; letter-spacing:-.02em}
.doc p,.doc li{color:var(--ink-soft); font-size:1rem; line-height:1.68;
  max-width:70ch; margin:0 0 14px}
.doc ul,.doc ol{padding-left:20px; margin:0 0 14px}
.doc a{color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--rule-hi); text-underline-offset:3px}
.doc a:hover{text-decoration-color:var(--ink)}
.doc .updated{font-family:var(--mono); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:18px}
.doc table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:.94rem}
.doc th,.doc td{text-align:left; padding:11px 12px 11px 0;
  border-bottom:1px solid var(--rule); color:var(--ink-soft); vertical-align:top}
.doc th{color:var(--ink); font-weight:700; font-size:.72rem; font-family:var(--mono);
  letter-spacing:.13em; text-transform:uppercase}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---- FOOT ------------------------------------------------------------------ */
.foot{background:var(--field-2); padding:44px 0 54px; border-top:1px solid var(--rule)}
.foot .row{display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center;
  justify-content:space-between}
.foot a{font-family:var(--mono); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint); text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .legal{color:var(--ink-faint); font-size:.78rem; max-width:56ch}


/* ---- MOTION ----------------------------------------------------------------
   One authored moment per screen, always from an already-visible default so a
   page with no JS is complete. Exponential ease-out, never a linear fade-up on
   every section, which is the tell of scattered effects rather than a system. */

/* staggered arrival for a list, so rows read as landing one by one */
@media (prefers-reduced-motion:no-preference){
  .js .stagger > *{opacity:0; transform:translateY(16px);
    transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .js .stagger.in > *{opacity:1; transform:none}
  .js .stagger.in > *:nth-child(1){transition-delay:.00s}
  .js .stagger.in > *:nth-child(2){transition-delay:.07s}
  .js .stagger.in > *:nth-child(3){transition-delay:.14s}
  .js .stagger.in > *:nth-child(4){transition-delay:.21s}
  .js .stagger.in > *:nth-child(5){transition-delay:.28s}
  .js .stagger.in > *:nth-child(6){transition-delay:.35s}
  .js .stagger.in > *:nth-child(7){transition-delay:.42s}
}

/* A DRAWING DRAWS ITSELF. Strokes only; text and fills just arrive, because a
   letter animating its outline reads as a loading state, not as drafting. */
@media (prefers-reduced-motion:no-preference){
  .js .draw-on path,.js .draw-on line,.js .draw-on rect,.js .draw-on circle{
    stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600);
    transition:stroke-dashoffset 1.1s var(--ease)}
  .js .in .draw-on path,.js .in .draw-on line,.js .in .draw-on rect,
  .js .in .draw-on circle{stroke-dashoffset:0}
  .js .draw-on text{opacity:0; transition:opacity .6s var(--ease) .45s}
  .js .in .draw-on text{opacity:1}
  .js .draw-on .dfill,.js .draw-on .ddim{opacity:0;
    transition:opacity .5s var(--ease) .55s}
  .js .in .draw-on .dfill,.js .in .draw-on .ddim{opacity:1}
}

/* THE HERO PANEL BOOKS A SLOT WHILE YOU WATCH. The one moment above the fold,
   and it demonstrates the product rather than decorating the page. It runs once,
   4s after load, and never loops: a looping animation is wallpaper. */
.slot.hit{transition:background .6s var(--ease)}
.slot.hit span:first-child,.slot.hit em{transition:color .6s var(--ease),
  text-decoration-color .6s var(--ease)}
@media (prefers-reduced-motion:no-preference){
  .js .panel:not(.booked) .slot.hit{background:transparent}
  .js .panel:not(.booked) .slot.hit span:first-child{color:var(--ink);
    text-decoration-color:transparent}
  .js .panel:not(.booked) .slot.hit em{color:var(--ink-faint)}
  .js .panel:not(.booked) .panel-foot .n::after{content:"2"}
  .js .panel.booked .panel-foot .n::after{content:"3"}
  .panel-foot .n{display:inline-block; min-width:.7em}
  /* no JS, no animation: the number is simply the finished state */
  .panel-foot .n::after{content:"3"}
}

/* a hairline that wipes in under a heading, the site's one flourish */
.rule-wipe{height:1px; background:var(--rule-hi); transform-origin:left;
  margin:26px 0 0}
@media (prefers-reduced-motion:no-preference){
  .js .rule-wipe{transform:scaleX(0); transition:transform 1s var(--ease) .15s}
  .js .in .rule-wipe{transform:scaleX(1)}
}
.day .rule-wipe{background:var(--day-rule-hi)}

/* ---- legacy motion block. One authored moment, from an already-visible default, so nothing
   is hidden if JS never runs. ------------------------------------------------- */
.rise{opacity:1; transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .rise{opacity:0; transform:translateY(22px);
    transition:opacity .8s var(--ease), transform .8s var(--ease)}
  .js .rise.in{opacity:1; transform:none}
}
.hand{transform-origin:37px 37px; transform:rotate(-90deg)}
@media (prefers-reduced-motion:no-preference){
  .js .hand{transform:rotate(-190deg); transition:transform 1.5s var(--ease)}
  .js .in .hand{transform:rotate(-90deg)}
}