/* astergrey.com. Generated by web/_src/build_site.py. Edit the source, not this file. */
/* ==== Copied from _offer/expression/mark-05.html. Font src points at the identical files. ==== */
@font-face{font-family:"Grand Slang";font-style:normal;font-weight:400;
  font-display:swap;src:url("fonts/GrandSlang-Roman.woff2") format("woff2");}
@font-face{font-family:"Grand Slang";font-style:italic;font-weight:400;
  font-display:swap;src:url("fonts/GrandSlang-Italic.woff2") format("woff2");}
@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:400;
  font-display:swap;src:url("fonts/PPNeueMontreal-Book.woff2") format("woff2");}
@font-face{font-family:"PP Neue Montreal";font-style:normal;font-weight:500;
  font-display:swap;src:url("fonts/PPNeueMontreal-Medium.woff2") format("woff2");}
@font-face{font-family:"PP Neue Montreal";font-style:italic;font-weight:400;
  font-display:swap;src:url("fonts/PPNeueMontreal-Italic.woff2") format("woff2");}

:root{
  --g00:#FFFFFE; --g05:#F4F4F2; --g10:#E7E7E4; --g20:#D2D2CE; --g35:#B0B0AA;
  --g50:#8A8A83; --g65:#5E5E58; --g80:#383834; --g90:#232421; --g98:#131413;
  --mono:'Spline Sans Mono',ui-monospace,Menlo,monospace;
  --disp:'Grand Slang',Georgia,serif;
  --body:'PP Neue Montreal',Helvetica,Arial,sans-serif;
  --e:cubic-bezier(.2,.7,.2,1);
}
/* Five grounds, light to dark. The violet shifts with the ground so it stays subtle
   and still separates from it. That is the token system doing its own job. */
/* Committed 2026-09-15: the ground is g-05 paper and the accent is the violet on it.
   The other steps of the ramp are surfaces on this ground, not alternatives to it. */
:root{--bg:var(--g05); --fg:#171716; --ln:#D8D8D4; --mid:#6E6E68; --ac:#5E4B8B;}

/* Committed 2026-09-15: ground g-05, accent at mid (.80).
   Mid measures 4.19:1 on paper, which clears AA for large text and graphics and falls
   short of the 4.5:1 body-text bar. So anything set in the accent at mono size goes to
   full, where it measures 6.68:1. Two values, one rule, both computed. */
:root{--acs:.80; --acs-text:1}


/* ==== end of copied blocks ==== */

/* ---- Web layer. PROPOSED, not canon. -------------------------------------------------
   Spacing and layout are still open in DESIGN_TOKENS §3 to §5, so these are proposals for
   the system thread, drawn from the values mark-05 already uses. Color and type come only
   from the blocks above. */
:root{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:26px;
  --s7:40px; --s8:48px; --s9:64px; --s10:96px; --top-h:0px; --hair:#E4E4E0;
  --t-95:9.5px; --t-10:10px; --t-11:11px; --t-13:13px; --t-135:13.5px; --t-15:15px;
  --t-17:17px; --t-21:21px; --t-34:34px; --t-44:44px; --t-52:52px; --t-62:62px;
  --lh-disp-i:1.37; --lh-disp-r:1.118; --lh-text:1.62;
  --title:var(--body); --title-wt:400; --lh-title:1.1; --num:var(--disp);
  --maxw:1240px; --gutter:40px; --gutter-sm:18px; --col-side:112px; --rule:1px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:var(--t-15);line-height:var(--lh-text)}
a{color:inherit}
.w{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative}
.w::before{content:"";position:absolute;inset:0 var(--gutter);pointer-events:none;
  background-image:repeating-linear-gradient(90deg,var(--fg) 0 1px,transparent 1px 8.3333%);opacity:.028}
.mono{font-family:var(--mono);font-size:var(--t-11);letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}

/* top bar */
.top{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);
  padding:var(--s6) 0 var(--s3);border-bottom:var(--rule) solid var(--hair);position:relative}
/* the bar stays with you, so the mark can keep your place and the nav is always there */
@media(min-width:861px){
  :root{--top-h:67px}
  .top{position:sticky;top:0;z-index:10;background:var(--bg)}
}
.lock{display:flex;align-items:center;gap:var(--s3);text-decoration:none}
.lock span{font-family:var(--disp);font-size:var(--t-17);letter-spacing:-.01em}
.top nav{display:flex;gap:var(--s5)}
.top nav a{text-decoration:none}
.top nav a[aria-current]{color:var(--fg)}
.mk .a1,.mk .key{fill:var(--ac);opacity:var(--acs)}
.mk .cal{font-family:var(--mono);font-size:3.6px;fill:var(--ac);opacity:var(--acs);text-anchor:middle}

/* wordmark, uncapped (DESIGN_TOKENS §2.1) */
.wm{padding:var(--s6) 0 0}
.fit{display:block;width:100%;height:auto;font-family:var(--disp)}
.fit text{fill:var(--fg)}
.wmr{display:flex;justify-content:space-between;align-items:baseline;padding:var(--s3) 0 0;
  border-top:var(--rule) solid var(--hair);margin-top:var(--s4)}
.wm:not(:has(.fit)) .wmr{border-top:0;margin-top:0;padding-top:0}

/* page head for inner pages */
.ph{padding:var(--s9) 0 var(--s7);display:grid;grid-template-columns:1fr var(--col-side);gap:0 var(--s5);position:relative}
.ph .pt{font-family:var(--disp);font-size:var(--t-62);line-height:var(--lh-disp-r);letter-spacing:-.01em;margin:0;font-weight:400}

/* headline + lede */
.dim{display:grid;grid-template-columns:1fr var(--col-side);gap:0 var(--s5);margin-top:var(--s7);position:relative}
h1{font-family:var(--title);font-size:clamp(var(--t-34),4.4vw,var(--t-62));line-height:var(--lh-title);
  letter-spacing:-.025em;margin:0;max-width:22ch;font-weight:var(--title-wt)}
h1 em{font-style:italic;color:var(--ac);opacity:var(--acs)}
.lede{font-size:var(--t-17);line-height:1.6;max-width:56ch;margin:var(--s5) 0 0}
.count{border-left:var(--rule) solid var(--ac);padding-left:var(--s3);align-self:end;padding-bottom:var(--s2)}
.count b{display:block;color:var(--ac);font-weight:400;opacity:var(--acs-text)}

/* sections */
.sec{margin-top:var(--s10);border-top:var(--rule) solid var(--hair);padding-top:var(--s4);position:relative}
.sec-h{display:grid;grid-template-columns:1fr var(--col-side);gap:var(--s5);align-items:baseline;margin-bottom:var(--s7);position:relative;padding-top:var(--s5)}
/* every section opens on a short violet rule, so the mark carries across the whole site */
.sec-h::before{content:"";position:absolute;top:0;left:0;width:56px;height:2px;background:var(--ac);opacity:var(--acs);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e)}
.sec.in .sec-h::before{transform:scaleX(1)}
html:not(.js) .sec-h::before{transform:scaleX(1)}
h2{font-family:var(--title);font-size:clamp(var(--t-34),3.6vw,var(--t-52));line-height:var(--lh-title);letter-spacing:-.02em;margin:0;font-weight:var(--title-wt);max-width:26ch}
h3{font-family:var(--body);font-weight:500;font-size:var(--t-17);line-height:1.4;margin:0}
p{margin:0 0 var(--s4)}
/* no paragraph ends on a lone word: let the browser even the rag */
p,li,figcaption,summary,.dd-t,.wd-keep,.lede,.note,.ph-box{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance}
.body{max-width:60ch}
.body p{font-size:var(--t-15)}

/* numbered rows */
.rule{display:grid;grid-template-columns:62px 1fr 1.2fr;gap:var(--s5);padding:var(--s4) 0;
  border-bottom:var(--rule) solid var(--ln);align-items:start}
.rule:first-child{border-top:var(--rule) solid var(--ln)}
.rn{font-family:var(--mono);font-size:var(--t-11);letter-spacing:.05em;color:var(--mid);padding-top:var(--s1)}
.rr{font-weight:500;font-size:var(--t-15);line-height:1.45}
.re{font-size:var(--t-135);line-height:var(--lh-text);color:var(--mid)}
.rule.key{box-shadow:inset 2px 0 0 var(--ac);padding-left:var(--s3);margin-left:calc(-1 * var(--s3))}
.rule.key .rn{color:var(--ac);opacity:var(--acs-text)}
.rule.short{grid-template-columns:62px 1fr}
.rule.short .rn{padding-top:2px}

.note{margin-top:var(--s4);font-size:var(--t-135)}
.wbar{margin:0 0 var(--s6)}
.wbar-track{height:2px;background:var(--hair);position:relative}
.wbar-fill{position:absolute;left:0;top:0;height:2px;width:75%;background:var(--fg)}
/* the ongoing one has no end, so the line fades out instead of stopping */
.wbar-tail{position:absolute;top:0;height:2px;left:75%;width:18%;opacity:0;
  background:linear-gradient(90deg,var(--fg),transparent)}
.wbar-scale{display:flex;justify-content:space-between;margin-top:var(--s3)}
.tl{margin:0 0 var(--s5)}
.tl-row{display:grid;grid-template-columns:repeat(9,1fr);gap:var(--s1)}
.tl-m{display:block}
.tl-m i{display:block;height:var(--s2);background:var(--g10)}
.tl-m b{display:block;font-weight:400;margin-top:var(--s2)}

/* drop-downs: native details, styled */
.dds{border-top:var(--rule) solid var(--hair)}
.dd{border-bottom:var(--rule) solid var(--hair);position:relative}
.dd summary{list-style:none;display:grid;grid-template-columns:48px 12px 1fr auto;gap:var(--s4);align-items:baseline;
  padding:var(--s4) 0;cursor:pointer}
.dd summary::-webkit-details-marker{display:none}
.dd.nn summary{grid-template-columns:12px 1fr auto}
.dd-n{font-family:var(--mono);font-size:var(--t-11);letter-spacing:.05em;color:var(--mid);transition:color .25s var(--e)}
.dd[open] .dd-n,.dd:hover .dd-n{color:var(--ac);opacity:var(--acs-text)}
.dd-t{font-size:var(--t-17);line-height:1.35}
.dd-t b{font-weight:400;font:inherit}
.dd-x{position:relative;width:12px;height:12px;align-self:center;justify-self:start}
.dd-x::before,.dd-x::after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--rule);background:var(--mid);transition:background .25s var(--e)}
.dd[open] .dd-x::before,.dd[open] .dd-x::after{background:var(--ac)}
.dd-x::after{transform:rotate(90deg)}
.dd[open] .dd-x::after{transform:rotate(0deg)}
.dd-in{padding:0 30px 0 calc(48px + 12px + 2 * var(--s4));max-width:calc(62ch + 124px)}
/* the space under an open panel is a margin on the last line, never padding on the box.
   Padding cannot shrink to nothing, so it leaves a gap in a closed panel and the page
   jumps by that much the moment one opens or closes. */
.dd-in > :last-child{margin-bottom:var(--s9)}
.one{max-width:620px}
.cf-alt{margin-top:var(--s6);color:var(--mid)}
.dd.nn .dd-in{padding-left:calc(12px + var(--s4))}
.dd-in p{color:var(--mid);font-size:var(--t-15)}
/* this used to zero the gap and quietly beat the rule above it on specificity */
.dd-in p:last-child{margin-bottom:var(--s9)}
.dd-in a{color:var(--fg)}
.dd-in .dd-how{font-family:var(--mono);font-size:var(--t-10);letter-spacing:.1em;text-transform:uppercase;color:var(--fg);margin-top:var(--s4)}
.dd-in .dd-how span{color:var(--mid);margin-right:var(--s2)}
.dd-in .ph-box{color:var(--mid)}
.stage .dds{margin-top:var(--s4)}
.stage > p{min-height:calc(2 * 1.6em)}
.stage .dd-t{font-family:var(--mono);font-size:var(--t-11);letter-spacing:.1em;text-transform:uppercase}
.stage .dd summary{padding:var(--s3) 0}
.stage .dd-in{padding-right:0}
.stage .dd-in ul{margin-top:var(--s3)}
/* the competitor map: gray for them, violet only to mark you and your room */
/* what we do: three stages, each with the shape of what it produces */
.wd{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7)}
.wd-p{display:flex;flex-direction:column;border-top:var(--rule) solid var(--ln);padding-top:var(--s4)}
.wd-q{display:block;text-transform:none;letter-spacing:.02em;font-size:var(--t-115);
  min-height:2.6em;line-height:1.35}
.wd-p h3{font-size:var(--t-34);line-height:var(--lh-disp-r);font-weight:400;margin:var(--s3) 0 var(--s5)}
.wd-fig{margin-bottom:var(--s5)}
.iso{display:block;width:100%;height:auto;max-width:330px;overflow:visible}
.iso path{vector-effect:non-scaling-stroke}
.iso .tile{fill:none;stroke:var(--g35);stroke-width:.75}
.iso .tile.faint{stroke:var(--g20);stroke-width:.6}
.iso .ghost{fill:none;stroke:var(--g20);stroke-width:.6;stroke-dasharray:2 2.5}
/* one material lit three ways, so a cube reads as a solid and not as three shapes */
.iso .cu{opacity:var(--o)}
.iso .f-t{fill:var(--ac);stroke:none}
.iso .f-l{fill:var(--ac);stroke:none;filter:brightness(.78)}
.iso .f-r{fill:var(--ac);stroke:none;filter:brightness(.58)}
/* one twelve second clock for all three, each panel four seconds behind the last,
   so you watch identify, then build, then launch, instead of all of it at once.
   The offsets are negative so every panel opens already holding its finished state. */
@keyframes scan{0%{opacity:0}2%{opacity:1}8%{opacity:0}100%{opacity:0}}
@keyframes pick{0%,11%{opacity:0;transform:translateY(16px)}
  17%{opacity:1;transform:translateY(-3px)}
  22%,84%{opacity:1;transform:translateY(0)}
  88%,100%{opacity:0;transform:translateY(16px)}}
@keyframes base{0%,12%{opacity:1}26%,84%{opacity:var(--o)}88%,100%{opacity:1}}
@keyframes stk{0%,13%{opacity:0;transform:translateY(12px)}
  23%,84%{opacity:var(--o);transform:translateY(0)}
  88%,100%{opacity:0;transform:translateY(12px)}}
@keyframes go{0%,10%{opacity:var(--o);transform:translateY(0)}
  18%,84%{opacity:0;transform:translateY(calc(var(--rise) * -1px))}
  88%,100%{opacity:var(--o);transform:translateY(0)}}
@keyframes up{0%,100%{opacity:var(--o)}}
@keyframes pop{0%,13%{opacity:0;transform:translate(calc(var(--ox) * -1px),calc(var(--oy) * -1px)) scale(.28)}
  16%{opacity:.2;transform:translate(calc(var(--ox) * -1px),calc(var(--oy) * -1px)) scale(.5)}
  22%,84%{opacity:var(--o);transform:translate(0,0) scale(1)}
  88%,100%{opacity:0;transform:translate(calc(var(--ox) * -1px),calc(var(--oy) * -1px)) scale(.28)}}
/* Each drawing plays once, holds, fades off, resets while it cannot be seen,
   then fades back on slowly and sits there before the next pass of motion starts.
   Nothing reverses on screen. At 12s: fade off 78-84%, dark 84-88% which is where
   every element snaps home, fade on 88-100% which is about 1.4 seconds, and the
   motion begins at 0% with the drawing already at full. Directive 2026-10-07. */
@keyframes isofade{0%,78%{opacity:1}84%,88%{opacity:0}100%{opacity:1}}
/* the ground is scaffolding: it holds the stack up and then it is not needed */
@keyframes groundout{0%,6%{opacity:1}30%,84%{opacity:0}88%,100%{opacity:1}}
.wd-p,.stage{--pd:0s}
.wd-p:nth-child(2),.stage[data-s="2"]{--pd:-8s}
.wd-p:nth-child(3),.stage[data-s="3"]{--pd:-4s}
.js .iso .cu{transform-origin:50% 60%}
.js .iso .pop{transform-box:fill-box;transform-origin:50% 50%}
.iso .scan{fill:var(--ac);stroke:none;opacity:0}
.js .wd-p.in .iso .scan,.js .stage.in .iso .scan{animation:scan 12s linear infinite;
  animation-delay:calc(var(--pd) + var(--i) * 70ms)}
.js .wd-p.in .iso .pick,.js .stage.in .iso .pick{animation:pick 12s var(--e) infinite;animation-delay:var(--pd)}
.js .wd-p.in .iso .base,.js .stage.in .iso .base{animation:base 12s var(--e) infinite;
  animation-delay:var(--pd)}
.js .wd-p.in .iso .stk,.js .stage.in .iso .stk{animation:stk 12s var(--e) infinite;
  animation-delay:calc(var(--pd) + var(--i) * 220ms)}
.js .wd-p.in .iso .go,.js .stage.in .iso .go{animation:go 12s var(--e) infinite;
  animation-delay:calc(var(--pd) + var(--i) * 80ms)}
.js .wd-p.in .iso .up,.js .stage.in .iso .up{animation:up 12s var(--e) infinite;animation-delay:var(--pd)}
.js .wd-p.in .iso .tile.gone,.js .stage.in .iso .tile.gone{animation:groundout 12s var(--e) infinite;
  animation-delay:var(--pd)}
.js .wd-p.in .iso .pop,.js .stage.in .iso .pop{animation:pop 12s var(--e) infinite;
  animation-delay:calc(var(--pd) + var(--i) * 45ms)}
.js .wd-p.in .iso,.js .stage.in .iso{animation:isofade 12s linear infinite;
  animation-delay:var(--pd)}
.js .iso .ghost{opacity:0;transition:opacity .5s var(--e) .35s}
.js .wd-p.in .iso .ghost,.js .stage.in .iso .ghost{opacity:1}
@media (prefers-reduced-motion:reduce){
  .js .wd-p.in .iso .scan,.js .stage.in .iso .scan,.js .wd-p.in .iso .pick,.js .stage.in .iso .pick,.js .wd-p.in .iso .pop,.js .stage.in .iso .pop,.js .wd-p.in .iso .stk,.js .stage.in .iso .stk,
  .js .wd-p.in .iso .go,.js .stage.in .iso .go,.js .wd-p.in .iso .up,.js .stage.in .iso .up{animation:none}
  .js .wd-p.in .iso,.js .stage.in .iso{animation:none;opacity:1}
  .js .iso .cu{opacity:var(--o);transform:none}
  .js .iso .ghost{opacity:1;transition:none}}
.wd-p > p{margin:0 0 var(--s4)}
.wd-keep{margin-top:auto;padding-top:var(--s4);border-top:var(--rule) solid var(--hair)}
.wd-keep span{display:block;font-family:var(--mono);font-size:var(--t-10);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ac);opacity:var(--acs-text);margin-bottom:var(--s2)}
@media(max-width:860px){.wd{grid-template-columns:1fr;gap:var(--s6)}.wd-q{min-height:0}.wds{max-width:300px}}

/* the three stages drawn as planes that accumulate: one per stage settled so far */
.stage-fig{margin:0 0 var(--s4)}
.stage-fig .iso{max-width:200px;margin-left:-12px}
@media(max-width:860px){.stage-fig .iso{max-width:240px}}
.stk .pn{fill:none;stroke:var(--g35);stroke-width:.75;vector-effect:non-scaling-stroke}
.stk .pn.top{stroke:var(--ac);stroke-width:1.1}
.js .stk .pn{opacity:0;transform:translateY(calc(var(--i) * -10px));
  transition:opacity .5s var(--e),transform .75s var(--e);transition-delay:calc(var(--i) * 90ms)}
.js .sec.in .stk .pn{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.js .stk .pn{opacity:1;transform:none;transition:none}}

.field{margin:0}
.field-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.field-row > span{display:block;aspect-ratio:4/3;border:var(--rule) solid var(--hair);padding:9px;
  display:flex;flex-direction:column;gap:5px;background:var(--bg)}
.field-row i{display:block;background:var(--g20)}
.field-row .fs-b{height:3px;width:34%}
.field-row .fs-h{height:8px;width:88%;background:var(--g35);margin-top:4px}
.field-row .fs-l{height:3px;width:76%}
.field-row .fs-l.s{width:52%}
.field-row .fs-btn{height:7px;width:34%;margin-top:auto;background:var(--g35)}
.field-row .you{border-color:var(--ac);box-shadow:inset 0 0 0 1px var(--ac);justify-content:flex-end}
.field-row .you .fy-1{height:15%;width:100%;background:var(--fg)}
.field-row .you .fy-2{height:15%;width:68%;background:var(--fg);margin-top:4px}
.field-row .you .fy-r{height:2px;width:40%;background:var(--g35);margin-top:auto}
.field-key{display:flex;justify-content:space-between;margin-top:var(--s3)}
.field-key u{text-decoration:none;color:var(--mid)}
.field-key b{font-weight:400;color:var(--ac);opacity:var(--acs-text)}
.field figcaption{margin-top:var(--s2);font-size:var(--t-10);color:var(--mid);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;line-height:1.6}
.cmap{margin:var(--s4) 0 0}
.cmap svg{display:block;width:100%;height:auto}
.cmap .cm-ax{fill:none;stroke:var(--ln);stroke-width:1}
.cmap .cm-lb{font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;fill:var(--mid)}
.cmap .cm-lbr{font-family:var(--mono);font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;fill:var(--ac);opacity:var(--acs-text)}
.cmap .cm-them{fill:var(--g35)}
.cmap .cm-room{fill:none;stroke:var(--ac);stroke-width:.8;stroke-dasharray:3 3;opacity:var(--acs)}
.cmap .cm-you{fill:var(--ac);opacity:var(--acs)}
.cmap figcaption{margin-top:var(--s2);font-size:var(--t-10);color:var(--mid)}
.cmp3{border-top:var(--rule) solid var(--ln);margin-top:var(--s5)}
.cmp3 .cmp-h,.cmp3 .cmp-r{grid-template-columns:minmax(132px,.6fr) 1fr 1fr 1fr;gap:var(--s4)}
.cmp3 .cmp-h b{font-size:var(--t-21)}
.cmp3 .cmp-h > div:not(:first-child)::before{width:100%;height:4px}
.cmp3 .cmp-h > div:nth-child(2)::before{opacity:calc(var(--acs) * .40)}
.cmp3 .cmp-h > div:nth-child(3)::before{opacity:calc(var(--acs) * .68)}
.cmp3 .cmp-h > div:nth-child(4)::before{opacity:var(--acs)}
.cmp3 .cmp-r > :nth-child(n+2){font-size:var(--t-135)}
.cmp3-note{margin-top:var(--s6);font-size:var(--t-135);max-width:56ch}
@media(max-width:860px){
  .cmp3 .cmp-h{display:none}
  .cmp3 .cmp-r{grid-template-columns:1fr;gap:var(--s3)}
  .cmp3 .cmp-r > :first-child{grid-column:auto}
  .cmp3 .cmp-r > div[data-s]::before{content:attr(data-s);display:block;font-family:var(--mono);
    font-size:var(--t-10);letter-spacing:.08em;text-transform:uppercase;
    color:var(--ac);opacity:var(--acs-text);margin-bottom:5px}
}
/* The two beats that come before "What we do". A reader arriving cold has not
   decided they need any of this, so the page recognises their situation first and
   explains why it has a brand answer second. Symptoms are scanned, so they are a
   stack of single lines at a size you read standing up. The turn underneath them
   is the largest sentence on the page after the hero, because it is the thought
   that has to land. Directive 2026-10-07. */
.sym{list-style:none;margin:var(--s5) 0 0;padding:0;border-top:var(--rule) solid var(--ln)}
.sym li{position:relative;border-bottom:var(--rule) solid var(--ln);padding:var(--s4) 0;
  font-family:var(--title);font-weight:var(--title-wt);letter-spacing:-.015em;
  font-size:clamp(var(--t-21),2.1vw,var(--t-34));line-height:1.22;max-width:30ch}
.sym li::before{content:"";position:absolute;left:calc(var(--s4) * -1);top:1.15em;
  width:7px;height:7px;background:var(--ac);opacity:0;transition:opacity .3s var(--e)}
.sym li:hover::before{opacity:var(--acs)}
.why-t{font-family:var(--title);font-weight:var(--title-wt);letter-spacing:-.02em;
  font-size:clamp(var(--t-34),4.1vw,var(--t-52));line-height:var(--lh-title);
  max-width:20ch;margin:var(--s5) 0 0}
.why-b{font-size:var(--t-17);line-height:1.6;max-width:54ch;margin:var(--s5) 0 0}
@media(max-width:860px){.sym li::before{display:none}}
.show h2{max-width:20ch}

/* stages */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:var(--rule) solid var(--ln)}
.stage{padding:var(--s5) var(--s5) var(--s5) 0;border-right:var(--rule) solid var(--ln)}
.stage + .stage{padding-left:var(--s5)}
.stage:last-child{border-right:0}
.stage h3{margin:var(--s2) 0 var(--s3)}
.big-n{display:block;font-family:var(--num);font-size:clamp(var(--t-62),8.6vw,124px);line-height:var(--lh-disp-r);margin:var(--s2) 0 0}
/* the stage label is the thing that names the stage, so the violet sits on it */
.stage > .mono{color:var(--ac);opacity:var(--acs-text)}
.stage p{font-size:var(--t-135);color:var(--fg)}
.stage ul{margin:0;padding:0;list-style:none;font-size:var(--t-13);color:var(--mid)}
.stage li{padding:var(--s2) 0;border-top:var(--rule) solid var(--ln)}

/* cost sheet */
.cmp{border-top:var(--rule) solid var(--ln)}
.cmp-h,.cmp-r{display:grid;grid-template-columns:minmax(160px,.72fr) 1fr 1fr;gap:var(--s5);padding:var(--s4) 0;
  border-bottom:var(--rule) solid var(--ln);align-items:baseline}
.cmp-r:last-child{border-bottom:0}
.cmp-h{padding-top:var(--s3)}
.cmp-h b{font-family:var(--num);font-weight:400;font-size:var(--t-34);line-height:var(--lh-disp-r);display:block}
.cmp-h span{display:block}
.cmp-r > :first-child{font-weight:500;font-size:var(--t-15)}
.cmp-r > :nth-child(n+2){font-size:var(--t-135);color:var(--fg)}
.rate-note{margin-top:var(--s5);font-size:var(--t-135);max-width:60ch}
@media(max-width:860px){
  .cmp-h,.cmp-r{grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4)}
  .cmp-r > :first-child{grid-column:1 / -1}
  .cmp-h > :first-child{display:none}
  .dd-in{padding-left:calc(12px + var(--s4));padding-right:0}
  .field-row > span{min-width:0}
  .field-row{gap:var(--s2)}
}

/* two columns */
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7)}

/* buttons: ink, never the accent (DESIGN_TOKENS §1.1) */
.btn{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s5);
  background:var(--fg);color:var(--bg);text-decoration:none;font-size:var(--t-135);font-weight:500;border:0;font-family:var(--body);cursor:pointer}
.btn.line{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 var(--rule) var(--fg)}
.row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}

/* system preview */
.pv{display:grid;grid-template-columns:268px 1fr;gap:var(--s7);align-items:start}
.pv.wide{grid-template-columns:400px 1fr;gap:var(--s8)}
.pv.wide .pl{max-width:380px}
.fig{padding:var(--s5) 0;display:block}
/* the mark drawn as a schematic: outlines, a construction circle, a tick at every boundary,
   and a ring of six arcs that reads as a scale. The violet marks where you are. */
.fig .pl{display:block;width:100%;height:auto;max-width:240px;margin:0 auto}
/* the readout under the drawing: which part you are on, out of how many */
.pl-read{display:flex;align-items:baseline;gap:var(--s3);margin-top:var(--s5);
  border-top:var(--rule) solid var(--hair);padding-top:var(--s3);max-width:380px;margin-left:auto;margin-right:auto}
.pl-read b{font-weight:400;color:var(--ac);opacity:var(--acs-text)}
.pl-read span{color:var(--fg);margin-right:auto}
.pl-read u{text-decoration:none;color:var(--mid)}
.pl .arm{fill:currentColor;opacity:1}
.pl .seg{fill:none;stroke:var(--g20);stroke-width:1.1;stroke-linecap:butt}
.pl .pl-arc,.pl .pl-lead{stroke:var(--mid);stroke-width:.3}
.pl-swing{transform-box:view-box;transform-origin:22px 22px}
.pl[data-phase="1"] .s1,
.pl[data-phase="2"] .s1,.pl[data-phase="2"] .s2,
.pl[data-phase="3"] .s1,.pl[data-phase="3"] .s2,.pl[data-phase="3"] .s3,
.pl[data-phase="4"] .s1,.pl[data-phase="4"] .s2,.pl[data-phase="4"] .s3,.pl[data-phase="4"] .s4,
.pl[data-phase="5"] .s1,.pl[data-phase="5"] .s2,.pl[data-phase="5"] .s3,.pl[data-phase="5"] .s4,.pl[data-phase="5"] .s5,
.pl[data-phase="6"] .s1,.pl[data-phase="6"] .s2,.pl[data-phase="6"] .s3,.pl[data-phase="6"] .s4,.pl[data-phase="6"] .s5,.pl[data-phase="6"] .s6{stroke:var(--fg)}
.pl[data-phase="1"] .s1,.pl[data-phase="2"] .s2,.pl[data-phase="3"] .s3,
.pl[data-phase="4"] .s4,.pl[data-phase="5"] .s5,.pl[data-phase="6"] .s6{stroke:var(--ac);opacity:var(--acs)}
.pl[data-phase="1"] .a1,.pl[data-phase="2"] .a2,.pl[data-phase="3"] .a3,
.pl[data-phase="4"] .a4,.pl[data-phase="5"] .a5,.pl[data-phase="6"] .a6{fill:var(--ac);opacity:var(--acs);stroke:none}
.pl[data-phase="1"] .pl-swing{transform:rotate(0deg)}
.pl[data-phase="2"] .pl-swing{transform:rotate(60deg)}
.pl[data-phase="3"] .pl-swing{transform:rotate(120deg)}
.pl[data-phase="4"] .pl-swing{transform:rotate(180deg)}
.pl[data-phase="5"] .pl-swing{transform:rotate(240deg)}
.pl[data-phase="6"] .pl-swing{transform:rotate(300deg)}
.pl-dot{fill:var(--ac);opacity:var(--acs)}

/* the detail under the drawing: a small schematic of whichever part you are on */
.pl-detail{position:relative;height:104px;max-width:380px;margin:var(--s5) auto 0}
.pd{position:absolute;left:0;right:0;top:0;opacity:0;transition:opacity .4s var(--e)}
.pd.on{opacity:1}
.pd-cap{font-family:var(--mono);font-size:var(--t-10);letter-spacing:.1em;text-transform:uppercase;
  color:var(--mid);margin-top:var(--s3);display:block}
.pd-sw{display:flex;gap:3px}
.pd-sw i{height:26px;flex:1}
.pd-sw i:nth-child(1){background:var(--g05);box-shadow:inset 0 0 0 1px var(--ln)}
.pd-sw i:nth-child(2){background:var(--g10)}
.pd-sw i:nth-child(3){background:var(--g20)}
.pd-sw i:nth-child(4){background:var(--g35)}
.pd-sw i:nth-child(5){background:var(--mid)}
.pd-sw i:nth-child(6){background:var(--fg)}
.pd-sw i:nth-child(7){background:var(--ac)}
.pd-type{display:flex;align-items:baseline;gap:var(--s5)}
.pd-type b{font-weight:400;line-height:1}
.pd-type b:nth-child(1){font-family:var(--disp);font-size:34px}
.pd-type b:nth-child(2){font-family:var(--body);font-size:22px}
.pd-type b:nth-child(3){font-family:var(--mono);font-size:13px}
.pd-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;height:30px}
.pd-grid i{background:var(--g20)}
.pd-lad{display:flex;align-items:flex-end;gap:4px;height:16px;margin-top:6px}
.pd-lad i{width:10px;background:var(--ln)}
.pd-lad i:nth-child(1){height:4px}.pd-lad i:nth-child(2){height:6px}.pd-lad i:nth-child(3){height:9px}
.pd-lad i:nth-child(4){height:12px}.pd-lad i:nth-child(5){height:16px}
.pd-ph{display:block;height:56px;border:var(--rule) solid var(--ln);position:relative;background:var(--g10)}
.pd-ph::before,.pd-ph::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to bottom right,transparent calc(50% - .5px),var(--ln) 50%,transparent calc(50% + .5px))}
.pd-ph::after{background:linear-gradient(to bottom left,transparent calc(50% - .5px),var(--ln) 50%,transparent calc(50% + .5px))}
.pd-ph u{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--g10);
  padding:0 var(--s2);font-family:var(--mono);font-size:var(--t-10);letter-spacing:.1em;
  text-transform:uppercase;color:var(--mid);text-decoration:none;z-index:1}
.pd-voice{display:flex;flex-direction:column;gap:6px}
.pd-voice i{height:3px;background:var(--g20)}
.pd-voice i.w{width:62%}
.pd-voice i.no{background:var(--ln);position:relative}
.pd-voice i.no::after{content:"";position:absolute;left:0;right:38%;top:1px;height:1px;background:var(--ac);opacity:var(--acs)}
.pd-mark{display:flex;align-items:center;gap:var(--s5)}
.pd-mark svg{width:44px;height:44px}
.pd-mark span{font-family:var(--mono);font-size:var(--t-10);letter-spacing:.06em;color:var(--mid)}
.sp{display:grid;grid-template-columns:150px 1fr;gap:var(--s3) var(--s4);font-family:var(--mono);font-size:var(--t-11);letter-spacing:.04em;color:var(--mid)}
.sp b{color:var(--fg);font-weight:400}

/* placeholder */
.ph-box{border:var(--rule) dashed var(--mid);padding:var(--s6);color:var(--mid);font-family:var(--mono);
  font-size:var(--t-11);letter-spacing:.06em;line-height:1.7;text-transform:uppercase}
.ph-box b{color:var(--fg);font-weight:400}
.mb5{margin-bottom:var(--s5)}
.blk{display:block}
.mt4{margin-top:var(--s4)}.mt5{margin-top:var(--s5)}.mt6{margin-top:var(--s6)}

/* form */
form{display:grid;gap:var(--s5);max-width:640px}
.cf-prog{display:flex;align-items:center;gap:var(--s3)}
.cf-prog i{flex:1;height:var(--rule);background:var(--ln);position:relative}
.cf-prog i::after{content:"";position:absolute;inset:0;background:var(--fg);transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform .6s var(--e)}
.cf-prog b{font-weight:400;color:var(--fg)}
.cf label{position:relative}
.cf label::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ac);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--e);pointer-events:none}
.cf label:focus-within::after{transform:scaleX(1)}
.cf label.done > .mono{color:var(--fg)}
.cf label > .mono{transition:color .35s var(--e)}
.steps .rule{transition:opacity .5s var(--e)}
.cf-ready ~ * .steps .rule{opacity:1}
label{display:grid;gap:var(--s2)}
/* fields are a line to write on, not a white box dropped on the paper */
input,textarea{font:inherit;font-size:var(--t-15);color:var(--fg);background:transparent;
  border:0;border-bottom:var(--rule) solid var(--ln);border-radius:0;padding:var(--s3) 0}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--fg)}
textarea{min-height:120px;resize:vertical}

/* closing band + footer */
.close{margin-top:var(--s10);background:var(--g90);color:var(--g05);padding:var(--s9) var(--s7);position:relative}
.close h2{color:var(--g05);max-width:24ch}
.close p{color:var(--g20);margin-top:var(--s4)}
.close .btn{background:var(--g05);color:var(--g90)}
.foot{padding:var(--s4) 0 var(--s9);margin-top:var(--s8);border-top:var(--rule) solid var(--hair);
  display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;position:relative}
.foot nav{display:flex;gap:var(--s5)}
.foot a{text-decoration:none}

@media(max-width:860px){
  .w{padding:0 var(--gutter-sm)}
  .w::before{inset:0 var(--gutter-sm);background-image:repeating-linear-gradient(90deg,var(--fg) 0 1px,transparent 1px 25%)}
  .top{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .top nav{gap:var(--s4);flex-wrap:wrap}
  .dim,.ph,.sec-h{grid-template-columns:1fr}
  .count{display:none}
  .ph .pt{font-size:var(--t-34)}
  h2{font-size:26px}
  .rule{grid-template-columns:40px 1fr}
  .re{grid-column:2}
  .stages,.two,.pv,.pv.wide{grid-template-columns:1fr}
  .stage,.stage + .stage{padding:var(--s5) 0;border-right:0;border-bottom:var(--rule) solid var(--ln)}
  .close{padding:var(--s7) var(--s5)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ====================================================================
   VIOLET LAYER. Appended last on purpose: earlier edits spliced CSS by
   index and quietly ate the rules that used to live mid-sheet. Nothing
   goes after this block.
   ==================================================================== */

/* four ways to start: the meter and its scale are the violet */
.wbar-fill{background:var(--ac);opacity:var(--acs)}
.wbar-tail{background:var(--ac);opacity:.35}
.wbar-scale span{color:var(--ac);opacity:var(--acs-text)}
.wbar-track{background:var(--hair)}

/* the cost sheet. a rate is the point of the page, so the violet sits on it */
.cmp-h > div:not(:first-child){position:relative;padding-top:var(--s3)}
.cmp-h > div:not(:first-child)::before{content:"";position:absolute;top:0;left:0;
  width:46px;height:3px;background:var(--ac);opacity:var(--acs)}
.cmp-h span{color:var(--ac);opacity:var(--acs-text)}
.cmp-r > div:first-child{position:relative}
.cmp-r > div:first-child::before{content:"";position:absolute;left:-16px;top:.62em;
  width:6px;height:6px;background:var(--ac);opacity:0;transition:opacity .25s var(--e)}
.cmp-r:hover > div:first-child::before{opacity:var(--acs)}
.rate-note{position:relative;padding-left:var(--s6)}
.rate-note::before{content:"";position:absolute;left:0;top:.62em;width:22px;height:2px;
  background:var(--ac);opacity:var(--acs)}

/* the six guideline parts stand on their own, with no rule under each one.
   The rule is drawn by .dd::after, not by a border, which is why zeroing the
   border did nothing the first time. */
.gw .dd{border-bottom:0}
.gw .dd::after{display:none;content:none}
.gw .dds{border-top:0}
.wd-q{color:var(--ac);opacity:var(--acs-text)}
.big-link{display:block;margin-top:var(--s6);text-decoration:none;color:var(--fg)}
.big-link b{display:block;font-weight:400;font-size:clamp(var(--t-34),4.3vw,var(--t-62));
  line-height:var(--lh-disp-r);text-wrap:balance;padding-bottom:var(--s3);
  background-image:linear-gradient(var(--ac),var(--ac)),linear-gradient(var(--ln),var(--ln));
  background-repeat:no-repeat,no-repeat;background-position:0 100%,0 100%;
  background-size:0% 3px,100% var(--rule);
  transition:background-size .5s var(--e),color .3s var(--e)}
.big-link:hover b,.big-link:focus-visible b{background-size:100% 3px,100% var(--rule);color:var(--ac)}
@media(prefers-reduced-motion:reduce){.big-link b{transition:none}}

/* ---- What is in a guideline. An index plate, not an icon row.
   Each part is shown with a specimen of the real thing, numbered the way a manual numbers
   its sections, with the sentence visible instead of hidden behind a toggle. ---- */
.gl{display:grid;gap:var(--s8)}
.gi{display:grid;grid-template-columns:52px 120px minmax(0,1fr);gap:var(--s5);align-items:start}
.gi-n{padding-top:2px;color:var(--ac);opacity:var(--acs-text);letter-spacing:.08em}
.gi-s{margin:0}
.gs{display:block;width:120px;height:64px;overflow:visible}
.gi-t h3{margin:0 0 var(--s2);font-size:var(--t-21);font-weight:400;line-height:1.25}
.gi-t p{margin:0;max-width:58ch;color:var(--mid)}
.gs .h,.gs .d,.gs .a,.gs .ad,.gs .dt{fill:none;vector-effect:non-scaling-stroke}
.gs .h{stroke:var(--g35);stroke-width:1}
.gs .d{stroke:var(--g20);stroke-width:1;stroke-dasharray:2.5 2.5}
.gs .dt{stroke:var(--hair);stroke-width:1}
.gs .a{stroke:var(--ac);stroke-width:1;opacity:var(--acs)}
.gs .ad{stroke:var(--ac);stroke-width:1;stroke-dasharray:2.5 2.5;opacity:var(--acs)}
.gs .adot{fill:var(--ac);opacity:var(--acs)}
.gs .dot{fill:none;stroke:var(--g35);stroke-width:1}
.gs .c0{fill:var(--g05);stroke:var(--g35);stroke-width:1}
.gs .c1{fill:var(--g20);stroke:var(--g35);stroke-width:1}
.gs .c2{fill:var(--g35);stroke:var(--g35);stroke-width:1}
.gs .c3{fill:var(--g65);stroke:var(--g65);stroke-width:1}
.gs .c4{fill:var(--g98);stroke:var(--g98);stroke-width:1}
.gs .col{fill:var(--g10)}
.gs .cac{fill:var(--ac);opacity:var(--acs);stroke:var(--ac);stroke-width:1}
.gs .arm{fill:var(--fg)}
.gs .tD{font-family:var(--disp);fill:var(--fg)}
.gs .tB{font-family:var(--body);fill:var(--fg)}
.gs .tS{font-family:var(--body);font-size:19px;fill:var(--fg)}
@media(max-width:860px){
  .gl{gap:var(--s7)}
  .gi{grid-template-columns:44px minmax(0,1fr);gap:var(--s3) var(--s4)}
  .gi-s,.gi-t{grid-column:2}
}
/* ---- A row that reads at rest. Used wherever a drop-down was hiding one sentence. ---- */
.prs{display:grid}
.pr{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:var(--s4);align-items:start;
  padding:var(--s5) 0;border-top:var(--rule) solid var(--ln)}
.pr-n{color:var(--ac);opacity:var(--acs-text);padding-top:3px}
.pr-t h3{margin:0 0 var(--s2);font-size:var(--t-21);font-weight:400;line-height:1.25}
.pr-t p{margin:0;max-width:58ch;color:var(--mid)}
.pr-m{color:var(--ac);opacity:var(--acs-text);padding-top:5px;white-space:nowrap;
  font-family:var(--mono);font-size:var(--t-11);letter-spacing:.1em;text-transform:uppercase}
.prs.nonum .pr{grid-template-columns:minmax(0,1fr) auto}
.prs.nonum .pr-n{display:none}
@media(max-width:860px){
  .pr{grid-template-columns:44px minmax(0,1fr);gap:var(--s2) var(--s4);padding:var(--s4) 0}
  .pr-m{grid-column:2;padding-top:var(--s2)}
  .prs.nonum .pr{grid-template-columns:minmax(0,1fr)}
  .prs.nonum .pr-m{grid-column:1}
}
.cta-lead{max-width:54ch;margin:var(--s7) 0 var(--s4);font-size:var(--t-17);line-height:1.45}
/* the number sits on the title line, not under it */
.gw .dd summary{align-items:center}
.gw .dd-n{align-self:center}

/* ---- Three systems for three kinds of company. Colors, proportions and weight all move,
   because a company whose work is printed is not built like one that lives in a feed.
   Every palette here belongs to an invented client, not to Aster Grey. ---- */
.demo{
  --d-disp-s:1; --d-rule-w:1px; --d-pad:14px; --d-track:0em; --d-acc-n:1; --d-txt-s:1;
  transition:background .5s var(--e),color .5s var(--e);
}
/* cool ground and high contrast, because a screen is lit from behind */
.demo[data-mode="screen"]{
  --d-bg:#F1F4F7; --d-card:#E3E8ED; --d-ln:#CFD7DF; --d-mid:#5C6875; --d-fg:#121821; --d-ac:#2F5FD0;
  --d-disp-s:1; --d-rule-w:1px; --d-pad:14px; --d-track:-.005em; --d-acc-n:1; --d-txt-s:1}
/* warm ground and finer rules, because paper is read in reflected light */
.demo[data-mode="print"]{
  --d-bg:#F3EFE7; --d-card:#E8E1D4; --d-ln:#D9D1C1; --d-mid:#6E6454; --d-fg:#1A1712; --d-ac:#3F5C3A;
  --d-disp-s:.74; --d-rule-w:.5px; --d-pad:26px; --d-track:.02em; --d-acc-n:.4; --d-txt-s:.88}
/* dark ground and one loud color, because it has to stop a thumb */
.demo[data-mode="social"]{
  --d-bg:#17161C; --d-card:#23222B; --d-ln:#37353F; --d-mid:#9B98A6; --d-fg:#F5F3F8; --d-ac:#C6F24A;
  --d-disp-s:1.46; --d-rule-w:2.5px; --d-pad:11px; --d-track:-.035em; --d-acc-n:1; --d-txt-s:1.12}

/* different needs make different shapes, so the pieces change proportion too */
.demo[data-mode="print"] .sh-guide{aspect-ratio:17/22;height:272px}
.demo[data-mode="print"] .sh-slide{aspect-ratio:4/3;height:232px}
.demo[data-mode="social"] .sh-guide{aspect-ratio:4/5;height:268px}
.demo[data-mode="social"] .sh-slide{aspect-ratio:1/1;height:244px}
.demo[data-mode="social"] .sh-web{aspect-ratio:9/16;height:284px}
.demo[data-mode="social"] .sh-card{aspect-ratio:1/1;height:200px}
.demo .sheet{transition:aspect-ratio .45s var(--e),height .45s var(--e)}
.demo .sheet{border-width:var(--d-rule-w);padding:var(--d-pad);
  transition:padding .4s var(--e),border-width .4s var(--e)}
.demo .sheet b,.demo .sheet .w-name,.demo .sheet .c-card b,.demo .sheet .t-panel b{
  letter-spacing:var(--d-track);transition:font-size .4s var(--e),letter-spacing .4s var(--e)}
.demo .w-name{font-size:calc(46px * var(--d-disp-s))}
.demo .c-card b{font-size:calc(20px * var(--d-disp-s))}
.demo .t-panel b{font-size:calc(32px * var(--d-disp-s))}
.demo .g-main b{font-size:calc(13px * var(--d-disp-s))}
.demo .g-top b{font-size:calc(11px * var(--d-txt-s))}
.demo .g-eg{font-size:calc(9px * var(--d-txt-s))}
.demo .w-lede{font-size:calc(11px * var(--d-txt-s))}
.demo .g-nav i.on,.demo .sh-slide .s-dot{opacity:var(--d-acc-n)}
.demo .c-rule,.demo .t-panel i{opacity:var(--d-acc-n);transition:opacity .4s var(--e)}
/* the readout that says what moved */
.mode-spec{display:grid;grid-template-columns:repeat(4,auto);gap:var(--s2) var(--s6);
  margin-top:var(--s4);font-family:var(--mono);font-size:var(--t-10);letter-spacing:.06em;
  text-transform:uppercase;color:var(--d-mid);width:max-content;max-width:100%}
.mode-spec b{font-weight:400;color:var(--d-fg);font-variant-numeric:tabular-nums}
.modes{display:flex;gap:0;margin:0;border:var(--rule) solid var(--fg);width:max-content;max-width:100%}
.modes button{font-family:var(--mono);font-size:var(--t-11);letter-spacing:.1em;text-transform:uppercase;
  padding:var(--s3) var(--s5);background:transparent;color:var(--fg);border:0;cursor:pointer;white-space:nowrap;
  border-right:var(--rule) solid var(--fg);transition:background .25s var(--e),color .25s var(--e)}
.modes button:last-child{border-right:0}
.modes button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.demo{
  --d-bg:var(--g05); --d-fg:var(--fg); --d-ln:var(--ln); --d-mid:var(--mid); --d-ac:var(--ac); --d-card:var(--g10);
  --d-disp:var(--title); --d-text:var(--body); --d-acc:var(--title); --d-wt:400; --d-lh:var(--lh-title);
  background:var(--d-bg); color:var(--d-fg); font-family:var(--d-text);
  border:var(--rule) solid var(--d-ln); transition:background .45s var(--e),color .45s var(--e);
}
.switch{display:flex;align-items:center;gap:var(--s4);margin:var(--s5) 0 var(--s4);width:max-content;max-width:100%}
.switch button{border:var(--rule) solid var(--fg) !important}
.switch button{white-space:nowrap}
.blend{-webkit-appearance:none;appearance:none;width:min(320px,40vw);height:14px;background:transparent;margin:0;cursor:pointer;flex:1 1 auto;min-width:80px}
.blend::-webkit-slider-runnable-track{height:var(--rule);background:var(--fg)}
.blend::-moz-range-track{height:var(--rule);background:var(--fg)}
.blend::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-6.5px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:var(--rule) solid var(--fg);box-shadow:0 0 0 3px var(--bg)}
.blend::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--bg);border:var(--rule) solid var(--fg)}
.blend:focus-visible{outline:2px solid var(--fg);outline-offset:6px}
.switch button{font-family:var(--mono);font-size:var(--t-11);letter-spacing:.1em;text-transform:uppercase;
  padding:var(--s3) var(--s5);background:transparent;color:var(--fg);border:0;cursor:pointer}
.switch button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.demo-bar{display:flex;justify-content:space-between;padding:var(--s3) var(--s5);border-bottom:var(--rule) solid var(--d-ln);
  font-family:var(--mono);font-size:var(--t-11);letter-spacing:.1em;text-transform:uppercase;color:var(--d-mid)}
.demo-body{padding:var(--s7) var(--s5)}
.demo-body .swatches{margin-bottom:0}
.demo h4{font-family:var(--d-disp);font-weight:var(--d-wt);font-size:var(--t-62);line-height:var(--d-lh);margin:0;letter-spacing:-.02em;max-width:22ch}
.demo h4 em{font-family:var(--d-acc);font-weight:400;font-style:italic;color:var(--d-ac)}
.demo p{max-width:52ch;font-size:var(--t-15)}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s3);margin:var(--s6) 0}
.sw-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:var(--s9);
  padding-top:var(--s4);border-top:var(--rule) solid var(--d-ln);font-family:var(--mono);
  font-size:var(--t-11);letter-spacing:.1em;text-transform:uppercase;color:var(--d-mid)}
.sw{border:0}
.sw i{display:block;height:84px;background:var(--c);outline:var(--rule) solid var(--d-ln);outline-offset:-1px}
.sw-bg i{--c:var(--a-bg)}.sw-card i{--c:var(--a-card)}.sw-ln i{--c:var(--a-ln)}
.sw-mid i{--c:var(--a-mid)}.sw-fg i{--c:var(--a-fg)}.sw-ac i{--c:var(--a-ac)}
.sw .nm{display:block;padding:0}
.sw span span{padding:0}
.sw b{font-weight:400;color:var(--d-fg);font-variant-numeric:tabular-nums}
.demo h4,.dcard h5{transition:opacity .25s var(--e)}
.demo.swap h4,.demo.swap .dcard h5{opacity:0}
.sw span{display:block;padding:0;font-family:var(--mono);font-size:var(--t-10);letter-spacing:.06em;color:var(--d-mid)}
.sw .nm{margin-top:var(--s3)}
.sw b{display:block;margin-top:2px}
.arts-lead{max-width:60ch;margin-bottom:var(--s4)}
.col-lab{max-width:52ch;margin:0 0 var(--s4);color:var(--mid)}
.ic{display:inline-block;width:auto;height:52px;margin-right:var(--s4);overflow:visible;flex:none}
.ic path,.ic rect,.ic circle,.ic text{vector-effect:non-scaling-stroke}
.ic .i-l{fill:none;stroke:var(--fg);stroke-width:1}
.ic .i-d{fill:none;stroke:var(--g35);stroke-width:1}
.ic .i-c{fill:none;stroke:var(--g20);stroke-width:1;stroke-dasharray:2 2.5}
.ic .i-s{fill:none;stroke:var(--g35);stroke-width:1}
.ic .i-f{fill:var(--ac);opacity:var(--acs);stroke:none}
.ic .i-fx{fill:var(--ac);opacity:.14;stroke:none}
.ic .i-a{fill:none;stroke:var(--ac);stroke-width:1;opacity:var(--acs)}
.ic .i-a2{fill:none;stroke:var(--ac);stroke-width:2.2;opacity:var(--acs)}
.ic .i-dot{fill:var(--ac);opacity:var(--acs);stroke:none}
.ic .i-strike{fill:none;stroke:var(--ac);stroke-width:1.4;opacity:var(--acs)}
.ic .i-t{font-family:var(--title);font-size:21px;fill:var(--fg)}
.ic .i-t2{font-family:var(--title);font-size:21px;fill:var(--mid)}
.dd-t{display:flex;align-items:center;gap:0}
@media(max-width:860px){.ic{height:40px;margin-right:var(--s3)}}
.dd-t b{display:inline}
/* the manifest: what actually arrives, named and counted */
.mf{border-top:var(--rule) solid var(--fg);margin-top:var(--s6)}
.mf-h,.mf-r{display:grid;grid-template-columns:44px 1fr 210px;gap:var(--s5);
  padding:var(--s4) 0;border-bottom:var(--rule) solid var(--hair);align-items:baseline}
.mf-h{padding:var(--s3) 0;font-size:var(--t-10);letter-spacing:.1em;text-transform:uppercase;
  color:var(--mid);border-bottom:var(--rule) solid var(--ln)}
.mf-l{list-style:none;margin:0;padding:0}
.mf-n{color:var(--ac);opacity:var(--acs-text);font-size:var(--t-11)}
.mf-i b{display:block;font-weight:400;font-size:var(--t-17)}
.mf-i u{display:block;text-decoration:none;color:var(--mid);margin-top:var(--s1)}
.mf-f{font-size:var(--t-11);letter-spacing:.06em;text-transform:uppercase;color:var(--mid)}
.mf-r{transition:background .25s var(--e)}
.mf-r:hover{background:var(--g05)}
.js .mf-r{opacity:0;transform:translateY(8px);transition:opacity .4s var(--e),transform .5s var(--e)}
.js .sec.in .mf-r{opacity:1;transform:none}
.js .sec.in .mf-r:nth-child(1){transition-delay:0ms}
.js .sec.in .mf-r:nth-child(2){transition-delay:60ms}
.js .sec.in .mf-r:nth-child(3){transition-delay:120ms}
.js .sec.in .mf-r:nth-child(4){transition-delay:180ms}
.js .sec.in .mf-r:nth-child(5){transition-delay:240ms}
.js .sec.in .mf-r:nth-child(6){transition-delay:300ms}
@media(max-width:860px){.mf-h{display:none}
  .mf-r{grid-template-columns:34px 1fr;gap:var(--s3)}
  .mf-f{grid-column:2;margin-top:var(--s2)}}
@media (prefers-reduced-motion:reduce){.js .mf-r{opacity:1;transform:none;transition:none}}
.gw{display:block}
.gw .body{max-width:none}

.pull{max-width:52ch;margin:0 0 var(--s7);padding-left:var(--s5);
  border-left:var(--rule) solid var(--ac);font-size:var(--t-17);line-height:1.45}
.arts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s9) var(--s7)}
.art{margin:0;display:grid;grid-template-rows:auto auto}
.art-f{display:grid;place-items:center start;height:300px;overflow:hidden;
  border-bottom:var(--rule) solid var(--d-ln)}
/* every piece is drawn at its real proportion, so a card reads as a card and a letter as a letter */
.art-f .sheet{display:flex;flex-direction:column;gap:var(--s2);overflow:hidden;
  background:var(--d-bg);border:var(--rule) solid var(--d-ln);padding:14px;width:auto}
.art-f .sh-guide{aspect-ratio:16/10;height:264px}
.art-f .sh-web{aspect-ratio:16/10;height:264px}
.art-f .sh-slide{aspect-ratio:16/9;height:250px;background:var(--d-card)}
.art-f .sh-letter{aspect-ratio:17/22;height:272px;padding:18px}
.art-f .sh-card{aspect-ratio:7/4;height:176px;background:var(--d-card);padding:19px}
.art-f .sh-van{aspect-ratio:5/2;height:172px;background:var(--d-fg);border-color:var(--d-fg);padding:0}
.art-f i,.art-f span{display:block}
.art-f b,.art-f em,.art-f u{font-style:normal;text-decoration:none;font-weight:400;display:block}
.art-f .g-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:var(--rule) solid var(--d-ln);padding-bottom:6px}
.art-f .g-top b{font-family:var(--d-disp);font-weight:var(--d-wt);font-size:11px;color:var(--d-fg)}
.art-f .g-top em{font-family:var(--mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-mid)}
.art-f .g-body{display:grid;grid-template-columns:62px 1fr;gap:10px;margin-top:8px}
.art-f .g-nav i{font-family:var(--mono);font-size:7px;letter-spacing:.06em;text-transform:uppercase;color:var(--d-mid);padding:3px 0;border-bottom:var(--rule) solid var(--d-ln)}
.art-f .g-nav i.on{color:var(--d-ac)}
.art-f .g-main b{font-family:var(--d-disp);font-weight:var(--d-wt);font-size:13px;line-height:1.15;color:var(--d-fg);margin-bottom:6px}
.art-f .g-spec{display:flex;justify-content:space-between;gap:6px;border-top:var(--rule) solid var(--d-ln);padding:4px 0}
.art-f .g-spec u{font-family:var(--mono);font-size:7px;letter-spacing:.05em;color:var(--d-mid)}
.art-f .g-eg{font-size:9px;line-height:1.45;color:var(--d-fg);margin-top:6px}
.art-f .g-samp{font-family:var(--d-disp);font-weight:var(--d-wt);font-size:30px;line-height:1.05;color:var(--d-fg);margin-top:12px}

.art-f .s-frame b{font-family:var(--d-disp);font-weight:var(--d-wt);font-size:16px;line-height:1.15;color:var(--d-fg);max-width:16ch}
.art-f .s-frame em{font-size:8px;color:var(--d-mid);margin-top:6px}
.art-f .s-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;
  border-top:var(--rule) solid var(--d-ln);padding-top:6px}
.art-f .s-foot i{width:8px;height:8px;border-radius:50%;background:var(--d-ac)}
.art-f .s-foot u{font-family:var(--mono);font-size:7px;color:var(--d-mid)}
.art-f .l-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.art-f .l-top b{font-family:var(--d-disp);font-weight:var(--d-wt);font-size:12px;color:var(--d-fg)}
.art-f .l-top em{font-family:var(--mono);font-size:7px;letter-spacing:.05em;color:var(--d-mid)}
.art-f .l-date{font-family:var(--mono);font-size:7px;letter-spacing:.05em;color:var(--d-mid);margin-bottom:6px}
.art-f .l-sign{font-family:var(--d-disp);font-weight:var(--d-wt);font-size:11px;color:var(--d-ac);margin-top:auto}
.art-f .l-body{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.art-f .l-body i{height:3px;background:var(--d-mid);opacity:.35;width:100%}
.art-f .l-body i.s{width:58%}
.art-f .g-pal{display:flex;gap:3px;margin-top:auto;padding-top:10px;margin-bottom:2px}
.art-f .g-pal i{height:10px;flex:1}
.art-f .g-pal i:nth-child(1){background:var(--d-card)}
.art-f .g-pal i:nth-child(2){background:var(--d-ln)}
.art-f .g-pal i:nth-child(3){background:var(--d-mid)}
.art-f .g-pal i:nth-child(4){background:var(--d-fg)}
.art-f .g-pal i:nth-child(5){background:var(--d-ac)}
.art-f .g-main{display:flex;flex-direction:column;height:100%}
.art-f .g-body{height:100%}
/* the website page */
.art-f .w-top{display:flex;justify-content:space-between;align-items:center;border-bottom:var(--rule) solid var(--d-ln);padding-bottom:7px}
.art-f .w-top b{font-family:var(--d-disp);font-weight:var(--d-wt);font-size:12px;color:var(--d-fg)}
.art-f .w-top em{font-family:var(--mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--d-mid)}
.art-f .w-name{font-family:var(--d-disp);font-weight:var(--d-wt);font-size:46px;line-height:1;color:var(--d-fg);margin:14px 0 10px}
.art-f .w-lede{font-size:11px;line-height:1.5;color:var(--d-fg);max-width:38ch}
.art-f .w-foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:10px}
.art-f .w-btn{border:var(--rule) solid var(--d-fg);padding:5px 12px;font-family:var(--mono);font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--d-fg)}
.art-f .w-foot u{font-family:var(--mono);font-size:7px;letter-spacing:.06em;color:var(--d-mid)}
/* the business card */
.art-f .c-card{gap:9px}
.art-f .c-card b{font-family:var(--d-disp);font-weight:var(--d-wt);font-size:20px;line-height:1.05;color:var(--d-fg)}
.art-f .c-card u{font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--d-mid)}
.art-f .c-rule{height:2px;width:34px;background:var(--d-ac)}
/* the name on a van */
.art-f .t-panel{justify-content:center;gap:9px;padding:18px}
.art-f .t-panel b{font-family:var(--d-disp);font-weight:var(--d-wt);font-size:32px;line-height:1;color:var(--d-bg)}
.art-f .t-panel u{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--d-bg);opacity:.72}
.art-f .t-panel i{height:3px;width:44px;background:var(--d-ac)}
.art-bar{display:flex;justify-content:space-between;border-bottom:var(--rule) solid var(--d-ln);padding-bottom:var(--s2)}
.art-bar i{height:4px;width:34px;background:var(--d-mid)}
.art-bar i:last-child{width:18px}
.art-h{height:14px;width:78%;background:var(--d-fg);margin-top:var(--s2)}
.art-f .sh-guide,.art-f .sh-letter{gap:0}
.art-h.big{height:22px;width:86%}
.art-sw{display:flex;gap:4px;margin:var(--s2) 0}
.art-sw i{height:18px;flex:1}
.art-sw i:nth-child(1){background:var(--d-card)}
.art-sw i:nth-child(2){background:var(--d-mid)}
.art-sw i:nth-child(3){background:var(--d-fg)}
.art-sw i:nth-child(4){background:var(--d-ac)}
.art-l{height:4px;background:var(--d-mid);opacity:.5;width:100%}
.art-l.s{width:62%}
.art-foot{margin-top:auto;border-top:var(--rule) solid var(--d-ln);padding-top:var(--s2)}
.art-foot i{height:4px;width:26px;background:var(--d-ac)}
.art-mk{width:12px;height:12px;background:var(--d-ac);border-radius:50%;margin-bottom:var(--s3)}
.art figcaption{margin-top:var(--s4);border-top:var(--rule) solid var(--hair);padding-top:var(--s3);
  font-size:var(--t-135);line-height:1.5;color:var(--d-mid)}
.art figcaption b i{font-style:normal;color:var(--d-mid);margin-right:var(--s3)}
.art figcaption b{display:block;color:var(--d-fg);font-weight:400;margin-bottom:var(--s2)}
.blend-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);margin-top:var(--s4);flex-wrap:wrap}
.blend-row .fake{margin:0;max-width:52ch}
.blend-row .switch{margin:0}
.demo-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:var(--s6)}
.dcard{background:var(--d-card);padding:var(--s5);border-top:1px solid var(--d-fg)}
.dcard h5{font-family:var(--d-disp);font-weight:var(--d-wt);font-size:var(--t-34);margin:0 0 var(--s3);line-height:var(--lh-disp-i)}
.dbtn{display:inline-block;margin-top:var(--s3);padding:var(--s3) var(--s5);background:var(--d-fg);color:var(--d-bg);font-size:var(--t-135);font-weight:500}
.fake{margin-top:var(--s3);font-size:var(--t-135);color:var(--mid)}
@media(max-width:860px){.arts{grid-template-columns:1fr;gap:var(--s7)}.art{grid-template-rows:auto auto}.art-f{height:auto;padding:var(--s5) 0;overflow:visible}.art-f .sh-guide,.art-f .sh-web{aspect-ratio:auto;height:auto;width:100%}.art-f .sh-slide{height:176px}.art-f .sh-letter{height:250px}.art-f .sh-card{height:178px;padding:15px}.art-f .sh-van{height:126px}.swatches{grid-template-columns:repeat(3,1fr);gap:var(--s4) var(--s3)}.sw i{height:64px}.blend-row{align-items:flex-start}.modes{display:grid;grid-template-columns:1fr;width:100%}.modes button{border-right:0;border-bottom:var(--rule) solid var(--fg);text-align:left}.modes button:last-child{border-bottom:0}.mode-spec{grid-template-columns:1fr 1fr;width:100%;gap:var(--s2) var(--s4)}.swatches{grid-template-columns:repeat(3,1fr)}.demo-row{grid-template-columns:1fr}.demo h4{font-size:var(--t-34)}}

/* site only */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.skip{position:absolute;left:var(--s4);top:-60px;background:var(--fg);color:var(--bg);padding:var(--s2) var(--s4);z-index:10}
.skip:focus{top:var(--s4)}
a:focus-visible,button:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
/* ---- Interaction layer. Site only. PROPOSED, not canon. ------------------------------
   Everything here is off unless the page has html.js, and all motion is dropped for
   prefers-reduced-motion. Color and type only from the tokens above. The violet punctuates:
   it leads each drawn rule, marks the open drop-down, caps the length bar and names the current
   section. It never fills a surface or a button. */
:root{--dur:.9s; --dur-s:.35s; --spine-x:14px; --e2:cubic-bezier(.22,.61,.36,1)}

/* page to page: the big name becomes the small logo */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out var(--dur-s) var(--e) both}
::view-transition-new(root){animation:vt-in var(--dur) var(--e) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}

/* the mark keeps your place: six arms, and the violet one steps round as you read down a page */
.js .top .mk .arm{fill:currentColor;opacity:1;transition:fill .45s var(--e2),opacity .45s var(--e2)}
.js .top .mk .arm.lead{fill:var(--ac);opacity:var(--acs)}

/* links draw their underline */
.js main a:not(.btn),.js .foot a,.js .top nav a{text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100% / 0 var(--rule) no-repeat;
  transition:background-size var(--dur-s) var(--e)}
.js main a:not(.btn):hover,.js .foot a:hover,.js .top nav a:hover,
.js .top nav a[aria-current]{background-size:100% var(--rule)}
.js main p a:not(.btn){background-size:100% var(--rule)}
.btn{transition:background-color var(--dur-s) var(--e),color var(--dur-s) var(--e),box-shadow var(--dur-s) var(--e)}
.btn.line:hover{background:var(--fg);color:var(--bg)}
.btn:not(.line):hover{background:var(--g80)}
.close .btn:hover{background:var(--g20)}

/* sections draw their top rule when they arrive. One line, the weight of the other rules. */
.js .sec{border-top-color:transparent}
.js .sec::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--rule));height:var(--rule);
  background:var(--hair);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--e2) .15s}
.js .sec.in::before{transform:scaleX(1)}

/* things fade in as they arrive and back out as they leave */
.js .rv{opacity:0;transform:translateY(10px);transition:opacity .7s var(--e2),transform .7s var(--e2)}
.js .rv.in{opacity:1;transform:none}
/* once seen, leaving and returning is opacity only, so nothing moves across the edge it is measured at */
.js .rv.seen{transform:none}

/* drop-downs: rows draw on, open smoothly, the open one is marked in violet */
.js .dds .dd{border-bottom-color:transparent}
.js .dds .dd::after{content:"";position:absolute;left:0;right:0;bottom:calc(-1 * var(--rule));height:var(--rule);
  background:var(--hair);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.1s var(--e2) calc(var(--i,0) * 90ms + .1s)}
.js .dds.in .dd::after{transform:scaleX(1)}
.js .dds .dd summary{opacity:0;transition:opacity .8s var(--e2) calc(var(--i,0) * 90ms + .2s)}
.js .dds.in .dd summary{opacity:1}
.js .dds{border-top-color:transparent}
.dd::before{content:"";position:absolute;left:calc(-1 * var(--s4));top:var(--s4);bottom:var(--s4);width:2px;background:var(--ac);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--e2)}
.dd.is-open::before{transform:scaleY(1)}
@media(max-width:860px){.dd::before{left:calc(-1 * var(--s3))}}
.js .dd-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--e2)}
.js .dd.is-open .dd-body{grid-template-rows:1fr}
.js .dd-in{overflow:hidden;min-height:0}
.js .dd-in > *{opacity:0;transform:translateY(-6px);transition:opacity .35s var(--e2),transform .35s var(--e2)}
.js .dd.is-open .dd-in > *{opacity:1;transform:none;transition:opacity .6s var(--e2) .15s,transform .6s var(--e2) .15s}
.dd-n{transition:color var(--dur-s) var(--e2)}
/* the title underlines itself on hover, under the words only. Nothing slides. */
.js .dd-t b{background:linear-gradient(var(--mid),var(--mid)) 0 100% / 0 var(--rule) no-repeat;
  transition:background-size .45s var(--e2)}
.js .dd summary:hover .dd-t b,.js .dd.is-open .dd-t b{background-size:100% var(--rule)}
.dd.is-open .dd-n,.dd[open] .dd-n{color:var(--ac);opacity:var(--acs-text)}
.dd-x::before,.dd-x::after{transition:transform .45s var(--e2),background-color var(--dur-s) var(--e2)}
.js .dd.is-open .dd-x::after{transform:rotate(0deg)}
.js .dd:not(.is-open) .dd-x::after{transform:rotate(90deg)}
.dd.is-open .dd-x::before,.dd.is-open .dd-x::after{background:var(--ac)}
.dd summary:focus-visible{outline:2px solid var(--fg);outline-offset:2px}

/* ways in: the line shows the length, capped in violet. The ongoing one fades out instead. */
.js .wbar-fill{transition:width 1s var(--e2)}
.js .wbar-tail{transition:left 1s var(--e2),opacity .7s var(--e2)}
.wbar-fill::after{content:"";position:absolute;right:-1px;top:-4px;bottom:-4px;width:2px;background:var(--ac);
  transition:opacity .5s var(--e2)}
.wbar-fill.ongoing::after{opacity:0}
.wbar-tail.on{opacity:1}
.wbar-scale span:last-child{text-align:right}

/* program: the nine months fill as you read */
.tl{position:sticky;top:var(--top-h);z-index:5;background:var(--bg);padding:var(--s3) 0 var(--s2);margin-bottom:var(--s5)}
.tl-m i{position:relative;overflow:hidden}
.tl-m i::after{content:"";position:absolute;inset:0;background:var(--fg);transform:scaleX(var(--f,0));transform-origin:0 50%;transition:transform .3s linear}
.tl-m.now b{color:var(--ac);opacity:var(--acs-text)}
.tl-m b{transition:color var(--dur-s) var(--e)}
.tl.hl .tl-m:not(.hot) i{opacity:.35}
.tl-m i,.stage{transition:opacity var(--dur-s) var(--e)}
.stages.hl .stage:not(.hot){opacity:.4}


/* the plate moves like a measuring tool, not like a slide */
.js .pl .seg{transition:stroke .55s var(--e2),opacity .55s var(--e2)}
.js .pl-swing{transition:transform .9s var(--e2)}
.js .pl-dot{transition:opacity .4s var(--e2)}

/* the guide down the side */
.spine{position:fixed;left:var(--spine-x);top:var(--s10);bottom:var(--s10);width:var(--s10);z-index:6;pointer-events:none;display:none}
.spine-line{position:absolute;left:0;top:0;bottom:0;width:var(--rule);background:var(--ln)}
.spine-fill{position:absolute;left:0;top:0;width:var(--rule);height:100%;background:var(--fg);transform:scaleY(0);transform-origin:50% 0}
.spine-tick{position:absolute;left:calc(-1 * var(--s1) + .5px);width:var(--s2);height:var(--rule);background:var(--mid);pointer-events:auto}
.spine-tick a{position:absolute;left:0;top:calc(-1 * var(--s2));width:var(--s5);height:var(--s4)}
.spine-now{position:absolute;left:var(--s2);font-family:var(--mono);font-size:var(--t-10);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ac);opacity:var(--acs-text);white-space:nowrap;
  writing-mode:vertical-rl;transform:rotate(180deg) translateY(0);transform-origin:50% 0;
  transition:top .5s var(--e),opacity var(--dur-s) var(--e)}
.spine-now:empty{opacity:0}
@media (min-width:1380px){.spine{display:block}}

/* opening: the mark draws itself, once per visit */
.intro{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--e),visibility 0s linear .6s;cursor:pointer}
.intro.out{opacity:0;visibility:hidden}
.intro svg{width:min(44vmin,300px);height:auto;overflow:visible}
.intro .ring,.intro .guide{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw .9s var(--e) forwards}
.intro .guide{animation-delay:.25s}
.intro .arc{animation-delay:.5s}
.intro .arm{transform-box:view-box;transform-origin:22px 22px;opacity:0;transform:scale(.2) rotate(-30deg);
  animation:arm .6s var(--e) forwards}
.intro .cal,.intro circle.key{opacity:0;animation:fade .4s var(--e) forwards 1.5s}
.intro .ring-dots{opacity:0;animation:fade .4s var(--e) forwards .8s}
.intro .cap{position:absolute;left:0;right:0;bottom:var(--s8);text-align:center;opacity:0;animation:fade .5s var(--e) forwards 1.3s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes arm{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
.js body[data-page="home"] .wm .fit{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--e)}
.js body[data-page="home"].ready .wm .fit{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .js .sec::before,.js .dds .dd::after{transform:scaleX(1)}
  .js .dds .dd summary{opacity:1}
  .js .dd-in > *{opacity:1;transform:none}
  .js body[data-page="home"] .wm .fit{clip-path:none}
  .intro{display:none}
  @view-transition{navigation:none}
}
@media print{.spine,.intro{display:none}}