/* ==========================================================================
   WOODYER CAPITAL
   One stylesheet. Every page.

   THE ROOM
   The site is a private room at night. A warm near-black ground, ivory type,
   and antique brass used the way a good tailor uses a lining: seen rarely,
   noticed always. When the Packet itself is being described the page turns
   to paper, because that is what a Packet is - the one moment the room
   hands you a document.

   Nothing here is blue-black, neon, glass or gradient. Those read as software.
   This should read as a firm.
   ========================================================================== */

/* -------------------------------------------------------------- 1. TYPE --- */

@font-face{font-family:"Caslon Display";src:url("/fonts/LibreCaslonDisplay-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Caslon";src:url("/fonts/LibreCaslonText-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Caslon";src:url("/fonts/LibreCaslonText-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Caslon";src:url("/fonts/LibreCaslonText-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex";src:url("/fonts/IBMPlexSans-var.woff2") format("woff2-variations");font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/fonts/IBMPlexMono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("/fonts/IBMPlexMono-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Copperplate";src:url("/fonts/copperplate-gothic-32bc.otf") format("opentype");font-weight:400;font-display:swap}

/* ------------------------------------------------------------ 2. TOKENS --- */

:root{
  /* The room */
  --ink:#111D31;          /* ground - warm near-black, never #000 */
  --ink-2:#121417;        /* a raised surface, barely */
  --ink-3:#1A1D21;
  --hair:rgba(242,244,247,.085);
  --hair-2:rgba(242,244,247,.16);

  --ivory:#F2F4F7;        /* primary type on the ground */
  --ivory-2:#B8C1CF;      /* secondary */
  --mute:#8591A5;         /* labels, marginalia */

  --brass:#B4C3DA;        /* the lining. Rare. */
  --brass-hi:#DCE4F0;
  --brass-lo:#50637F;

  /* The document */
  --paper:#EBEEF2;
  --paper-2:#E1E6EC;
  --paper-ink:#16213A;
  --paper-2ink:#4A566C;
  --paper-mute:#7D889A;
  --paper-hair:rgba(22,33,58,.11);

  --serif-d:"Caslon Display","Caslon",Georgia,"Times New Roman",serif;
  --serif:"Caslon",Georgia,"Times New Roman",serif;
  --sans:"Plex",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --mark:"Copperplate","Copperplate Gothic Bold",Copperplate,var(--serif);

  --gut:clamp(22px,5.4vw,88px);
  --max:1560px;

  /* Heavy objects move slowly. Cheap sites move in 150ms. */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --t-1:.9s;
  --t-2:1.4s;
}

/* ------------------------------------------------------------- 3. RESET --- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ink)}
html.is-locked{overflow:hidden}
html.is-locked body{position:fixed;inset:0 0 auto 0;width:100%}
body{
  margin:0;min-height:100%;
  background:var(--ink);color:var(--ivory);
  font-family:var(--sans);font-size:17px;font-weight:330;line-height:1.66;
  letter-spacing:.003em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-kerning:normal;font-feature-settings:"kern","liga","calt";
  overflow-x:hidden;overscroll-behavior-y:none;
}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:rgba(180,195,218,.34);color:var(--ivory)}
a,button,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:1px solid var(--brass-hi);outline-offset:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:300;display:inline-flex;align-items:center;min-height:48px;background:var(--brass);color:var(--ink);padding:0 20px;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.skip:focus{left:14px;top:14px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Film grain.
   A flat digital field is the single most "rendered" thing a page can be.
   Four per cent of fine noise makes the dark read as a surface rather than
   an absence - the difference between a screen and a room. */
.grain{
  position:fixed;inset:-50%;z-index:200;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}

/* ------------------------------------------------------------ 4. LAYOUT --- */

.wrap{width:100%;max-width:var(--max);margin:0 auto;
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right))}

/* A twelve-column grid. Nothing on this site is centred for the sake of it:
   centred stacks and 50/50 splits are the two most templated layouts on
   the web. Content is placed on the grid the way a page is set in a book. */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,32px)}

.night{background:var(--ink);color:var(--ivory);position:relative}
.paper{background:var(--paper);color:var(--paper-ink);position:relative}
.paper ::selection{background:rgba(35,66,110,.25);color:var(--paper-ink)}

.sect{padding:clamp(110px,15vw,240px) 0;position:relative}
.sect--s{padding:clamp(80px,10vw,150px) 0}

/* --------------------------------------------------------- 5. TYPE SET --- */

/* The label - set in mono, spaced like an engraving on a brass plate. */
.lbl{font:500 10.5px/1.5 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.paper .lbl{color:var(--paper-mute)}
.lbl--b{color:var(--brass)}
.paper .lbl--b{color:var(--brass-lo)}

/* A numbered margin mark, as in a legal instrument: § 02 */
.mark{display:flex;align-items:baseline;gap:18px;font:500 10.5px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.mark b{font-weight:500;color:var(--brass)}
.mark::after{content:"";flex:1;height:1px;background:var(--hair);transform:translateY(-3px)}
.paper .mark{color:var(--paper-mute)}
.paper .mark b{color:var(--brass-lo)}
.paper .mark::after{background:var(--paper-hair)}

.d1{font-family:var(--serif-d);font-weight:400;font-size:clamp(54px,9.4vw,178px);line-height:.9;letter-spacing:-.022em}
.d2{font-family:var(--serif-d);font-weight:400;font-size:clamp(40px,5.8vw,104px);line-height:.96;letter-spacing:-.018em}
.d3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.7vw,44px);line-height:1.12;letter-spacing:-.008em}
.d4{font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.7vw,27px);line-height:1.25}
.d1 i,.d2 i,.d3 i,.d4 i,.quote i{font-family:var(--serif);font-style:italic;color:var(--brass-hi);letter-spacing:-.01em}
.paper .d1 i,.paper .d2 i,.paper .d3 i,.paper .d4 i,.paper .quote i{color:var(--brass-lo)}

.lede{font-family:var(--sans);font-weight:300;font-size:clamp(19px,1.55vw,25px);line-height:1.5;color:var(--ivory-2);letter-spacing:-.004em}
.paper .lede{color:var(--paper-2ink)}
.body{color:var(--ivory-2);max-width:62ch}
.paper .body{color:var(--paper-2ink)}
.body+.body{margin-top:1.1em}
.body strong,.lede strong{color:var(--ivory);font-weight:500}
.paper .body strong,.paper .lede strong{color:var(--paper-ink)}

.d1,.d2,.d3,.quote{text-wrap:balance}
.body,.lede{text-wrap:pretty}

/* Masked lines. Each line rises out of its own clip rather than fading:
   a fade is a mood, a rise is an arrival. The bottom padding keeps every
   descender clear of the mask edge. */
.m{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.m>span{display:block}
html.js .rise .m>span{transform:translateY(106%)}
html.js .rise.in .m>span{transform:none;transition:transform var(--t-2) var(--e-out)}
html.js .rise.in .m:nth-child(2)>span{transition-delay:.09s}
html.js .rise.in .m:nth-child(3)>span{transition-delay:.18s}
html.js .rise.in .m:nth-child(4)>span{transition-delay:.27s}

/* General arrival. Opacity and a short travel, never a bounce. */
html.js .fade{opacity:0;transform:translateY(22px);transition:opacity var(--t-1) var(--e-out),transform var(--t-2) var(--e-out)}
html.js .fade.in{opacity:1;transform:none}
html.js .fade.d-1{transition-delay:.1s}html.js .fade.d-2{transition-delay:.2s}html.js .fade.d-3{transition-delay:.3s}

/* ----------------------------------------------------------- 6. CONTROLS -- */

.cta{
  position:relative;display:inline-flex;align-items:center;gap:22px;
  min-height:54px;padding:0 30px;
  border:1px solid var(--hair-2);
  font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory);
  overflow:hidden;isolation:isolate;
  transition:border-color .6s var(--e-out),color .6s var(--e-out);
}
/* A brass fill that rises from the floor, like a lit bar. */
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--brass);transform:translateY(101%);transition:transform .7s var(--e-out)}
.cta:hover{border-color:var(--brass);color:var(--ink)}
.cta:hover::before{transform:none}
.cta .ar{display:inline-block;transition:transform .7s var(--e-out)}
.cta:hover .ar{transform:translateX(6px)}
.cta--solid{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.paper .cta{border-color:var(--paper-hair);color:var(--paper-ink)}
.paper .cta:hover{color:var(--paper)}
.paper .cta::before{background:var(--paper-ink)}

.ln{
  display:inline-flex;align-items:center;gap:12px;min-height:44px;
  font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-2);
  background:linear-gradient(var(--brass),var(--brass)) no-repeat 0 calc(50% + 14px)/0 1px;
  transition:background-size .8s var(--e-out),color .6s var(--e-out);
}
.ln:hover{color:var(--ivory);background-size:100% 1px}
.paper .ln{color:var(--paper-2ink);background-image:linear-gradient(var(--brass-lo),var(--brass-lo))}
.paper .ln:hover{color:var(--paper-ink)}

/* -------------------------------------------------------------- 7. HEADER - */

.hd{
  position:fixed;left:0;right:0;top:0;z-index:120;
  padding-top:env(safe-area-inset-top);
  transition:background .8s var(--e-out),backdrop-filter .8s,transform .8s var(--e-out);
}
.hd.is-solid{background:rgba(var(--gr),.78);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.hd.is-hidden{transform:translateY(-100%)}
.hd__in{display:flex;align-items:center;justify-content:space-between;gap:28px;height:84px}
.hd__mark{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mark);font-size:15px;letter-spacing:.34em;color:var(--ivory);white-space:nowrap}
.hd__nav{display:flex;align-items:center;gap:clamp(22px,2.6vw,46px)}
.hd__a{position:relative;display:inline-flex;align-items:center;min-height:44px;font:500 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ivory-2);transition:color .5s}
.hd__a::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform .7s var(--e-out)}
.hd__a:hover,.hd__a[aria-current="page"]{color:var(--ivory)}
.hd__a:hover::after,.hd__a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.hd__cta{min-height:44px;padding:0 20px}

/* The menu control: two unequal rules, not three equal bars. */
.hd__menu{display:none;align-items:center;gap:14px;min-height:48px;min-width:48px;justify-content:flex-end;font:500 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase}
.hd__menu i{position:relative;display:block;width:26px;height:9px}
.hd__menu i::before,.hd__menu i::after{content:"";position:absolute;right:0;height:1px;background:var(--ivory);transition:transform .7s var(--e-out),width .7s var(--e-out),top .7s var(--e-out)}
.hd__menu i::before{top:0;width:26px}
.hd__menu i::after{top:8px;width:16px}
.is-open .hd__menu i::before{top:4px;transform:rotate(45deg);width:24px}
.is-open .hd__menu i::after{top:4px;transform:rotate(-45deg);width:24px}

/* -------------------------------------------------------------- 8. MENU --- */
/* The mobile menu is a room of its own: a full-height panel that is drawn
   down like a blind, with the destinations set in display type. */

.menu{
  position:fixed;inset:0;z-index:110;
  background:var(--ink);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(120px + env(safe-area-inset-top)) var(--gut) calc(40px + env(safe-area-inset-bottom));
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path 1s var(--e-io),visibility 0s linear 1s;
  overscroll-behavior:contain;overflow-y:auto;
}
.is-open .menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path 1s var(--e-io),visibility 0s}
.menu__l{border-top:1px solid var(--hair)}
.menu__a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;min-height:64px;padding:14px 0;border-bottom:1px solid var(--hair);
  font-family:var(--serif-d);font-size:clamp(34px,9vw,60px);line-height:1;letter-spacing:-.015em;color:var(--ivory);
  opacity:0;transform:translateY(24px);transition:opacity .8s var(--e-out),transform 1s var(--e-out)}
.menu__a span{font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--brass)}
.is-open .menu__a{opacity:1;transform:none}
.is-open .menu__a:nth-child(1){transition-delay:.32s}.is-open .menu__a:nth-child(2){transition-delay:.38s}
.is-open .menu__a:nth-child(3){transition-delay:.44s}.is-open .menu__a:nth-child(4){transition-delay:.5s}
.is-open .menu__a:nth-child(5){transition-delay:.56s}.is-open .menu__a:nth-child(6){transition-delay:.62s}
.menu__f{margin-top:34px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font:500 10.5px/1.8 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.menu__f a{display:inline-flex;align-items:center;min-height:44px;color:var(--ivory-2)}

/* ------------------------------------------------------ 10. STATEMENT ----- */

.stmt__t{grid-column:1/12}
.stmt__cols{grid-column:5/13;margin-top:clamp(60px,8vw,120px)}

/* The sequence: a timeline laid as a ruled register, with our line drawn
   out of it in brass. It is the one structural fact on the site anyone can
   check against their own last five deals. */
.seq{margin-top:clamp(56px,7vw,100px);border-top:1px solid var(--hair)}
.seq__r{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) auto;align-items:baseline;gap:clamp(16px,3vw,48px);padding:26px 0;border-bottom:1px solid var(--hair);position:relative}
.seq__w{font:500 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.seq__n{font-family:var(--serif);font-size:clamp(22px,2vw,30px);color:var(--ivory-2)}
.seq__d{font-size:15px;color:var(--mute);max-width:40ch;text-align:right}
.seq__r--us .seq__w{color:var(--brass)}
.seq__r--us .seq__n{color:var(--ivory);font-family:var(--serif-d);font-size:clamp(26px,2.6vw,40px)}
.seq__r--us::before{content:"";position:absolute;left:calc(-1*var(--gut) + 8px);top:0;bottom:0;width:2px;background:var(--brass)}
.seq__r--dec{background:linear-gradient(90deg,rgba(180,195,218,.06),transparent 60%)}

/* ---------------------------------------------------- 12. BOTH WAYS ------- */

.both__q{grid-column:1/12;font-family:var(--serif-d);font-size:clamp(38px,5.2vw,94px);line-height:1.02;letter-spacing:-.018em;color:var(--paper-ink)}
.both__q i{font-family:var(--serif);font-style:italic}
.both__turn{grid-column:1/6;margin-top:clamp(64px,8vw,120px)}
.both__ans{grid-column:6/13;margin-top:clamp(64px,8vw,120px)}
.both__ans .body{font-size:clamp(17px,1.25vw,19.5px);max-width:58ch}
.both__seal{margin-top:40px;padding-top:26px;border-top:1px solid var(--paper-hair);font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.7vw,27px);line-height:1.35;color:var(--paper-ink);max-width:36ch}

/* ------------------------------------------------- 13. THE RABBIT HOLE ---- */
/* The only place on the site built like an instrument: a well to fall
   down, the chain in the middle, and the running price on the right. */

.hole__intro{grid-column:1/8}
.hole__side{grid-column:9/13;align-self:end}
.rh{margin-top:clamp(56px,7vw,96px);border:1px solid var(--hair-2);background:linear-gradient(180deg,var(--ink-2),var(--ink-2));position:relative;overflow:hidden;overflow:clip}
.rh__bar{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;padding:12px 22px;border-bottom:1px solid var(--hair);font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.rh__bar b{color:var(--brass);font-weight:500}
.rh__tabs{display:flex;gap:6px}
.rh__tab{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--hair);font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-2);transition:border-color .5s,color .5s,background .5s}
.rh__tab span{color:var(--brass)}
.rh__tab:hover{border-color:var(--hair-2);color:var(--ivory)}
.rh__tab[aria-pressed="true"]{border-color:var(--brass);color:var(--ivory);background:rgba(180,195,218,.08)}
.rh__body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.9fr) minmax(0,.85fr);min-height:600px}
.rh__well{position:relative;border-right:1px solid var(--hair);overflow:hidden;min-height:220px}
.rh__cv{position:absolute;inset:0;width:100%;height:100%}
.rh__depth{position:absolute;left:24px;bottom:22px;z-index:1}
.rh__depth small{display:block;font:500 9.5px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.rh__depth b{display:block;margin-top:10px;font-family:var(--serif-d);font-weight:400;font-size:clamp(64px,6vw,104px);line-height:.8;letter-spacing:-.03em;color:var(--ivory);font-variant-numeric:tabular-nums}
.rh__depth span{display:block;margin-top:12px;font:500 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.rh__stream{height:600px;overflow-y:auto;padding:26px clamp(20px,2.6vw,40px) 40px;scrollbar-width:thin;scrollbar-color:var(--hair-2) transparent}
.rh__row{padding:18px 0 20px;border-bottom:1px solid var(--hair);opacity:0;transform:translateY(12px);transition:opacity .7s var(--e-out),transform .9s var(--e-out)}
.rh__row.on{opacity:1;transform:none}
.rh__k{font:500 9.5px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.rh__q{display:flex;gap:14px;font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.5vw,23px);line-height:1.3;color:var(--brass-hi)}
.rh__n{flex:none;padding-top:5px;font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.14em;color:var(--mute);min-width:26px}
.rh__a{margin-top:10px;padding-left:40px;font-size:15.5px;line-height:1.65;color:var(--ivory-2)}
.rh__row--find .rh__a{padding-left:0;margin-top:12px;font-family:var(--serif);font-size:clamp(20px,1.6vw,24px);line-height:1.35;color:var(--ivory)}
.rh__a .gr{margin-left:6px}
.rh__cursor{display:inline-block;width:7px;height:14px;background:var(--brass);vertical-align:-2px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.rh__row--end{border-bottom:0;padding-top:26px}
.rh__big{margin-top:14px;font-family:var(--serif-d);font-weight:400;font-size:clamp(54px,5.8vw,98px);line-height:.9;letter-spacing:-.02em;color:var(--brass-hi);font-variant-numeric:lining-nums}
.rh__endt{margin-top:16px;font-family:var(--serif);font-size:clamp(19px,1.5vw,23px);line-height:1.4;color:var(--ivory);max-width:36ch}
.rh__side{display:flex;flex-direction:column;padding:26px 24px;border-left:1px solid var(--hair)}
.rh__sum{margin-top:16px;font-family:var(--serif-d);font-weight:400;font-size:clamp(36px,3.3vw,58px);line-height:.95;letter-spacing:-.02em;color:var(--ivory);font-variant-numeric:tabular-nums lining-nums;transition:color .6s;white-space:nowrap}
.rh__sum.neg{color:var(--brass-hi)}
.rh__of{margin-top:12px;font-size:13.5px;color:var(--mute)}
.rh__go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:0 20px;background:var(--brass);color:var(--ink);font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;transition:background .4s,opacity .4s}
.rh__go:hover{background:var(--brass-hi)}
.rh__go[disabled]{opacity:.45;cursor:default}
.rh__go.is-price{background:var(--ivory)}
.rh__go i{font-style:normal;font-size:16px}
.rh__foot{padding:12px 22px;border-top:1px solid var(--hair);font:500 9.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* ------------------------------------------- 14. RESOLVED AND OUTCOMES ---- */

.res__t{grid-column:1/7}
.res__b{grid-column:8/13;align-self:end}
.bridge{border-top:1px solid var(--hair-2)}
.bridge div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:15px 0;border-bottom:1px solid var(--hair)}
.bridge dt{font:500 10.5px/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-2)}
.bridge dd{font-family:var(--mono);font-size:16px;color:var(--ivory);font-variant-numeric:tabular-nums;white-space:nowrap}
.bridge .neg dd{color:var(--brass-hi)}
.bridge .tot{border-bottom:1px solid var(--brass)}
.bridge .tot dt{color:var(--ivory)}
.bridge .tot dd{font-family:var(--serif-d);font-size:clamp(26px,2.2vw,36px)}

.inst{margin-top:clamp(60px,8vw,110px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair)}
.inst__c{padding:40px clamp(18px,2.4vw,40px) 44px 0;border-right:1px solid var(--hair);position:relative}
.inst__c+.inst__c{padding-left:clamp(18px,2.4vw,40px)}
.inst__c:last-child{border-right:0}
.inst__i{font:500 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.inst__h{margin-top:48px;font-family:var(--serif-d);font-size:clamp(34px,3.6vw,60px);line-height:.98;letter-spacing:-.015em}
.inst__v{margin-top:40px;font-family:var(--serif-d);font-size:clamp(34px,3.2vw,56px);line-height:.95;letter-spacing:-.02em;font-variant-numeric:lining-nums;white-space:nowrap}
.inst__p{margin-top:22px;color:var(--ivory-2);font-size:16px;max-width:34ch}
.inst__c--key .inst__h,.inst__c--key .inst__v{color:var(--brass-hi)}
.inst__c--key::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--brass)}
.inst__c+.inst__c--key::before{left:clamp(18px,2.4vw,40px)}

/* The three outcomes: set on paper, because this is the page of the
   argument a buyer will want to forward. */
.out__t{grid-column:1/9}
.out__i{grid-column:9/13;align-self:end}
.out{margin-top:clamp(60px,8vw,110px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--paper-hair);border:1px solid var(--paper-hair)}
.out__c{background:var(--paper);padding:clamp(26px,2.8vw,44px);display:flex;flex-direction:column;position:relative}
.out__c--key{background:var(--paper-ink);color:var(--paper)}
.out__k{display:flex;align-items:center;gap:14px;font:500 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--brass-lo)}
.out__k span{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid currentColor;font-size:10px;letter-spacing:.08em}
.out__c--key .out__k{color:var(--brass-hi)}
.out__h{margin-top:30px;font-family:var(--serif-d);font-weight:400;font-size:clamp(30px,2.6vw,44px);line-height:1;letter-spacing:-.015em}
.out__h i{font-family:var(--serif);font-style:italic;color:var(--brass-lo)}
.out__c--key .out__h i{color:var(--brass-hi)}
.out__p{margin-top:20px;font-size:15.5px;color:var(--paper-2ink)}
.out__c--key .out__p{color:#C3CBD7}
.ledger{margin-top:26px;border-top:1px solid var(--paper-hair)}
.ledger div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--paper-hair);font-size:14px;color:var(--paper-2ink)}
.ledger dd{font-family:var(--mono);font-size:13.5px;color:var(--paper-ink);font-variant-numeric:tabular-nums}
.ledger .tot{border-bottom:1px solid var(--paper-ink)}
.ledger .tot dt{color:var(--paper-ink)}
.ledger .tot dd{font-family:var(--serif-d);font-size:26px}
.out__big{margin-top:30px}
.out__big b{display:block;font-family:var(--serif-d);font-weight:400;font-size:clamp(90px,10vw,168px);line-height:.8;letter-spacing:-.04em;color:var(--brass-hi)}
.out__big span{display:block;margin-top:16px;font:500 10px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#A3ADBC}
.out__r{margin-top:auto;padding-top:26px;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.4;color:var(--paper-ink)}
.out__c--key .out__r{color:var(--paper)}
.out__seal{margin-top:clamp(60px,8vw,110px);font-family:var(--serif-d);font-size:clamp(34px,4.6vw,80px);line-height:1;letter-spacing:-.018em;max-width:20ch;color:var(--paper-ink)}
.out__seal i{font-family:var(--serif);font-style:italic;color:var(--brass-lo)}
.out__n{margin-top:30px;font:500 9.5px/1.8 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-mute);max-width:90ch}

.std__side{grid-column:8/13;align-self:end}
.std--n{border-color:var(--hair)}
.std--n .std__r{border-color:var(--hair)}
.std--n .std__l,.std--n .std__n{color:var(--ivory)}
.std--n .std__d{color:var(--ivory-2)}
.std--n .std__r:nth-child(4) .std__l{color:var(--mute)}
#standard .std__note{color:var(--ivory-2)}
#standard .std__note strong{color:var(--ivory)}

/* ------------------------------------------------------- 15. STANDARD ----- */

.std{margin-top:clamp(56px,7vw,100px);border-top:1px solid var(--paper-hair)}
.std__r{display:grid;grid-template-columns:clamp(64px,8vw,130px) minmax(0,1fr) minmax(0,1.3fr);align-items:baseline;gap:clamp(16px,3vw,48px);padding:30px 0;border-bottom:1px solid var(--paper-hair)}
.std__l{font-family:var(--serif-d);font-size:clamp(52px,6vw,96px);line-height:.8;color:var(--paper-ink)}
.std__n{font-family:var(--serif);font-size:clamp(22px,2vw,31px);color:var(--paper-ink)}
.std__d{color:var(--paper-2ink);font-size:16px;max-width:52ch}
.std__r:nth-child(4) .std__l{color:var(--paper-mute)}
.std__note{margin-top:34px;max-width:62ch;color:var(--paper-2ink)}
.std__note strong{color:var(--paper-ink)}

/* ----------------------------------------------------------- 16. GATE ---- */
/* The last room. It is the only section that says no - and saying no is
   the one form of exclusivity a new firm can hold honestly. */

.gate__h{grid-column:1/10}
.gate__refuse{grid-column:1/7;margin-top:clamp(60px,8vw,110px)}
.gate__enter{grid-column:8/13;margin-top:clamp(60px,8vw,110px)}
.refuse{border-top:1px solid var(--hair)}
.refuse li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:22px 0;border-bottom:1px solid var(--hair)}
.refuse li span{font:500 10.5px/2 var(--mono);letter-spacing:.2em;color:var(--brass)}
.refuse li p{color:var(--ivory-2);font-size:16px}
.refuse li p b{display:block;margin-bottom:6px;font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.5vw,23px);color:var(--ivory)}
.enter{border:1px solid var(--hair-2);padding:clamp(28px,3vw,44px);position:relative}
.enter::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:var(--brass)}
.enter__h{font-family:var(--serif-d);font-size:clamp(32px,3vw,50px);line-height:1;letter-spacing:-.012em}
.enter__p{margin-top:18px;color:var(--ivory-2);font-size:16px}
.enter .cta{margin-top:32px;width:100%;justify-content:space-between}
.enter__small{margin-top:22px;font:500 10px/1.8 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* ------------------------------------------------------ 17. INNER PAGES -- */

.ih{position:relative;padding:calc(200px + env(safe-area-inset-top)) 0 clamp(80px,10vw,150px);overflow:hidden}
.ih__t{grid-column:1/12;margin-top:34px}
.ih__p{grid-column:5/12;margin-top:clamp(40px,5vw,72px)}
.ih__rule{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair)}
.paper.ih .ih__rule{background:var(--paper-hair)}

.chap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,32px);padding:clamp(70px,9vw,140px) 0;border-top:1px solid var(--hair)}
.paper .chap{border-color:var(--paper-hair)}
.chap:first-child{border-top:0}
.chap__m{grid-column:1/4}
.chap__n{font:500 10.5px/1 var(--mono);letter-spacing:.24em;color:var(--brass)}
.paper .chap__n{color:var(--brass-lo)}
.chap__b{grid-column:5/12}
.chap__b .d3{margin-bottom:28px}

.defs{margin-top:34px;border-top:1px solid var(--hair)}
.paper .defs{border-color:var(--paper-hair)}
.defs div{display:grid;grid-template-columns:minmax(140px,210px) minmax(0,1fr);gap:clamp(14px,3vw,40px);padding:20px 0;border-bottom:1px solid var(--hair)}
.paper .defs div{border-color:var(--paper-hair)}
.defs dt{font:500 10.5px/1.7 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ivory)}
.paper .defs dt{color:var(--paper-ink)}
.defs dd{color:var(--ivory-2);font-size:16px}
.paper .defs dd{color:var(--paper-2ink)}

.aside{margin-top:34px;padding:24px 28px;border-left:1px solid var(--brass);background:rgba(180,195,218,.05);color:var(--ivory-2);font-size:16px;max-width:60ch}
.paper .aside{background:rgba(35,66,110,.06);color:var(--paper-2ink);border-color:var(--brass-lo)}
.aside strong{color:var(--ivory);font-weight:500}
.paper .aside strong{color:var(--paper-ink)}

.twin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:clamp(56px,7vw,96px)}
.twin__c{background:var(--ink);padding:clamp(30px,3.4vw,54px)}
.twin__c--p{background:var(--paper);color:var(--paper-ink)}
.twin__h{margin:26px 0 18px;font-family:var(--serif-d);font-size:clamp(32px,3.2vw,54px);line-height:1;letter-spacing:-.012em}
.twin__c .body{font-size:16px}
.twin__c--p .body{color:var(--paper-2ink)}
.twin__c--p .lbl{color:var(--paper-mute)}

/* The quiet tariff. It is stated, and it is not sold. */
.tariff{border-top:1px solid var(--hair-2);padding-top:30px;max-width:980px}
.tariff__r{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:clamp(14px,3vw,44px);padding:18px 0;border-bottom:1px solid var(--hair)}
.tariff__r dt{font:500 10.5px/1.8 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ivory)}
.tariff__r dd{color:var(--ivory-2);font-size:16px}
.tariff__r dd span{font-family:var(--mono);font-size:14.5px;color:var(--ivory)}
.tariff__n{margin-top:24px;color:var(--mute);font-size:14.5px;max-width:70ch}

/* ----------------------------------------------------------- 18. FORM ---- */

.form{margin-top:clamp(40px,5vw,70px);border-top:1px solid var(--hair-2)}
.form__s{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:34px 0 8px;font:500 10.5px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.form__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(18px,3vw,48px)}
.fld{display:block;padding:18px 0 4px;border-bottom:1px solid var(--hair);transition:border-color .5s}
.fld:focus-within{border-color:var(--brass)}
.fld--w{grid-column:1/-1}
.fld span{display:block;font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.fld input,.fld select,.fld textarea{display:block;width:100%;min-height:48px;margin-top:6px;padding:8px 0;border:0;border-radius:0;background:transparent;color:var(--ivory);font-family:var(--serif);font-size:19px;-webkit-appearance:none;appearance:none}
.fld textarea{min-height:120px;resize:vertical;line-height:1.5}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 6px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.fld select option{background:var(--ink-2);color:var(--ivory)}
.fld input::placeholder,.fld textarea::placeholder{color:#4A566C}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none}
.form__f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:40px}
.form__small{font:500 10px/1.9 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);max-width:54ch}
.form__small a{color:var(--ivory-2);border-bottom:1px solid var(--hair-2)}
.form__status{margin-top:22px;font:500 11px/1.7 var(--mono);letter-spacing:.1em;color:var(--brass-hi);min-height:1.7em}

/* ---------------------------------------------------------- 19. LEGAL ---- */

.legal{padding:clamp(40px,5vw,80px) 0 clamp(90px,11vw,160px)}
.legal .wc-lsec{padding:34px 0;border-top:1px solid var(--paper-hair)}
.legal .wc-lsec__h{display:flex;gap:18px;align-items:baseline;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,30px);line-height:1.2;color:var(--paper-ink);margin-bottom:16px}
.legal .wc-lsec__h i{font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.14em;color:var(--brass-lo)}
.legal p,.legal li{color:var(--paper-2ink);font-size:16.5px;line-height:1.74;max-width:74ch}
.legal p+p{margin-top:1em}
.legal ul{margin-top:12px}
.legal li{position:relative;padding-left:22px;margin-bottom:10px}
.legal li::before{content:"";position:absolute;left:0;top:.8em;width:8px;height:1px;background:var(--brass-lo)}
.legal strong{color:var(--paper-ink);font-weight:500}
.legal a{border-bottom:1px solid var(--brass-lo)}
.legal .wc-legal__intro{font-family:var(--serif);font-size:clamp(19px,1.6vw,24px);line-height:1.5;color:var(--paper-ink);max-width:60ch;padding-bottom:34px}
.legal .wc-lh,.legal .wc-legal__nav{display:none}

/* --------------------------------------------------------- 20. FOOTER ---- */

.ft{background:var(--ink);border-top:1px solid var(--hair);padding:clamp(90px,11vw,170px) 0 calc(28px + env(safe-area-inset-bottom))}
.ft__big{display:block;width:100%;font-family:var(--mark);font-size:5.2vw;letter-spacing:.12em;line-height:1;color:#FFFFFF;white-space:nowrap;overflow:visible}
.ft__big span{display:inline-block}
.ft__g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,32px);margin-top:clamp(60px,8vw,110px)}
.ft__c1{grid-column:1/5}.ft__c2{grid-column:6/8}.ft__c3{grid-column:8/10}.ft__c4{grid-column:10/13}
.ft__h{font:500 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--brass);margin-bottom:22px}
.ft__t{color:var(--ivory-2);font-size:15px;line-height:1.7;max-width:36ch}
.ft__l a{display:flex;align-items:center;min-height:44px;color:var(--ivory-2);font-size:15px;transition:color .4s}
.ft__l a:hover{color:var(--ivory)}
.ft__band{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px;margin-top:clamp(60px,8vw,110px);padding-top:24px;border-top:1px solid var(--hair);font:500 10px/1.8 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ft__band nav{display:flex;flex-wrap:wrap;gap:0 22px}
.ft__band a{display:inline-flex;align-items:center;min-height:44px;transition:color .4s}
.ft__band a:hover{color:var(--ivory)}

/* ------------------------------------------------------ 22. THE ENGINE ---- */

.eng{position:relative;background:var(--ink)}
.eng__track{position:relative;height:600vh}
.eng__stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden}
.eng__stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.6s var(--e-out)}
.eng.is-ready .eng__stage canvas{opacity:1}
.eng__stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(var(--gr),.72) 0%,rgba(var(--gr),.2) 38%,transparent 60%),linear-gradient(0deg,rgba(var(--gr),.7),transparent 30%);z-index:1}
.eng__caps{position:absolute;left:0;right:0;bottom:max(9vh,calc(40px + env(safe-area-inset-bottom)));z-index:3;pointer-events:none}
.eng__cap{position:absolute;left:max(var(--gut),env(safe-area-inset-left));bottom:0;max-width:min(560px,calc(100% - 2*var(--gut)));opacity:0;visibility:hidden}
.eng__cap:first-child{opacity:1;visibility:visible}
.eng__h1{margin-top:22px}
.eng__lede{margin-top:26px;max-width:40ch}
.eng__cue{display:flex;align-items:center;gap:14px;margin-top:34px}
.eng__cue i{display:block;width:1px;height:42px;background:linear-gradient(var(--brass),transparent);animation:cue 2.4s var(--e-io) infinite}
.eng__t{margin-top:18px;font-family:var(--serif-d);font-size:clamp(40px,5vw,86px);line-height:.95;letter-spacing:-.02em}
.eng__t i{font-family:var(--serif);font-style:italic;color:var(--brass-hi)}
.eng__p{margin-top:20px;max-width:40ch;color:var(--ivory-2);font-size:clamp(16px,1.25vw,19px)}
.eng__stats{position:absolute;left:max(var(--gut),env(safe-area-inset-left));top:calc(112px + env(safe-area-inset-top));z-index:3;display:flex;flex-wrap:wrap;gap:10px 30px;pointer-events:none}
.eng__stats span{display:flex;align-items:baseline;gap:12px;font:500 9.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.eng__stats b{font-family:var(--serif-d);font-weight:400;font-size:26px;letter-spacing:-.01em;color:var(--ivory)}
.eng.no-gl .eng__stage{background:radial-gradient(60% 60% at 65% 45%,var(--ink-3),var(--ink) 70%)}

/* The agents' names, pinned to the parts of the engine. */
.eng__labels{position:absolute;inset:0;z-index:2;pointer-events:none}
.agl{position:absolute;left:0;top:0;width:0;height:0;opacity:0;pointer-events:none;transition:opacity .8s var(--e-out);text-align:left}
.agl.on{opacity:1}
.agl--room.on{pointer-events:auto}
.agl__dot{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--brass-hi);box-shadow:0 0 0 4px rgba(180,195,218,.18),0 0 16px rgba(220,228,240,.6)}
.agl__c{position:absolute;left:22px;top:0;transform:translateY(-50%);width:max-content;max-width:230px;padding:9px 12px 10px;background:rgba(var(--gr),.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--hair-2)}
.agl__c::before{content:"";position:absolute;right:100%;top:50%;width:18px;height:1px;background:rgba(220,228,240,.55)}
.agl[data-side^="l"] .agl__c{left:auto;right:22px}
.agl[data-side^="l"] .agl__c::before{right:auto;left:100%}
.agl[data-side$="u"] .agl__c{top:8px;transform:translateY(-100%)}
.agl[data-side$="u"] .agl__c::before{top:auto;bottom:8px}
.agl[data-side$="d"] .agl__c{top:-8px;transform:none}
.agl[data-side$="d"] .agl__c::before{top:8px}
.agl[data-side*="2"] .agl__c{left:92px}
.agl[data-side^="l"][data-side*="2"] .agl__c{left:auto;right:92px}
.agl[data-side*="2"] .agl__c::before{width:88px}
.agl:not(.agl--room) .agl__c{padding:7px 10px 8px;background:rgba(var(--gr),.66)}
.agl:not(.agl--room) .agl__n{font-size:15px}
.agl--room .agl__n{font-size:19px}
.agl__k{display:block;font:500 8.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.agl__n{display:block;margin-top:6px;font-family:var(--serif);font-size:17px;line-height:1.1;color:var(--ivory)}
.agl__d{display:none}
.agl__o{display:flex;justify-content:space-between;gap:14px;margin-top:8px;padding-top:7px;border-top:1px solid var(--hair);font:500 8.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.agl__o em{font-style:normal;font-size:14px;line-height:0;color:var(--brass-hi)}
.agl--room .agl__c{border-color:rgba(180,195,218,.55)}
.agl--room .agl__c::after{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:var(--brass)}
.agl--room:hover .agl__c,.agl--room:focus-visible .agl__c{background:rgba(22,33,58,.95);border-color:var(--brass)}
.agl--room:focus-visible{outline:none}

/* A room: an agent at work, full screen. */
.room{position:fixed;inset:0;z-index:150;background:var(--ink);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;clip-path:inset(50% 50% 50% 50%);transition:clip-path .85s var(--e-io)}
.room[hidden]{display:none}
.room__bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:18px;background:rgba(9,16,28,.9);border-bottom:1px solid var(--hair);opacity:0;transition:opacity .5s .35s}
.room.is-open .room__bar{opacity:1}
.room__bar .lbl:first-child{flex:1}
.room__body{opacity:0;transition:opacity .6s var(--e-out) .1s}
.room.is-open .room__body{opacity:1;transition-delay:.45s}

/* The reach: six very large numbers. */
.scale__t{grid-column:1/8}
.scale__i{grid-column:9/13;align-self:end}
.big{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(60px,8vw,110px);border-top:1px solid var(--hair)}
.big div{padding:34px clamp(14px,2vw,32px) 38px 0;border-bottom:1px solid var(--hair)}
.big div:not(:nth-child(3n+1)){padding-left:clamp(14px,2vw,32px);border-left:1px solid var(--hair)}
.big dt{font-family:var(--serif-d);font-size:clamp(46px,5.4vw,96px);line-height:.9;letter-spacing:-.025em;color:var(--ivory)}
.big dd{margin-top:16px;color:var(--ivory-2);font-size:15.5px;max-width:28ch}

.rooms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:clamp(56px,7vw,96px);background:var(--hair);border:1px solid var(--hair)}
.rcard{display:flex;flex-direction:column;min-height:330px;padding:clamp(22px,2.4vw,34px);background:var(--ink);text-align:left;position:relative;transition:background .6s var(--e-out)}
.rcard::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--e-out)}
.rcard:hover{background:var(--ink-2)}
.rcard:hover::before{transform:none}
.rcard__k{font:500 9.5px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.rcard__n{margin-top:26px;font-family:var(--serif-d);font-size:clamp(30px,2.6vw,44px);line-height:1;letter-spacing:-.015em;color:var(--ivory)}
.rcard__p{margin-top:18px;font-size:15px;color:var(--ivory-2)}
.rcard__o{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:22px;font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory)}
.rcard__o em{font-style:normal;font-size:18px;color:var(--brass-hi)}

.roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:clamp(56px,7vw,96px);background:var(--paper-hair);border:1px solid var(--paper-hair)}
.roster>li{background:var(--paper);padding:clamp(20px,2.2vw,30px)}
.roster__i{font:500 10px/1 var(--mono);letter-spacing:.22em;color:var(--brass-lo)}
.roster__n{margin-top:20px;font-family:var(--serif-d);font-weight:400;font-size:clamp(24px,2vw,32px);line-height:1.05;color:var(--paper-ink)}
.roster__d{margin-top:8px;font-size:14px;color:var(--paper-mute)}
.roster ul{margin-top:18px;border-top:1px solid var(--paper-hair)}
.roster ul li{padding:8px 0;border-bottom:1px solid var(--paper-hair);font-size:14.5px;color:var(--paper-2ink)}

.flow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--hair);position:relative}
.flow li{padding:26px 16px 0 0;position:relative}
.flow li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--brass)}
.flow li:last-child::before{background:var(--ivory);box-shadow:0 0 0 5px rgba(var(--lr),.12)}
.flow span{font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--mute)}
.flow h3{margin-top:14px;font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.15}
.flow p{margin-top:10px;font-size:14.5px;color:var(--ivory-2)}
.refuse--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);border-top:0}
.refuse--2 li{border-top:1px solid var(--hair);border-bottom:0}

/* Shared by every room. */
.rm{padding-top:clamp(30px,4vw,60px);padding-bottom:calc(70px + env(safe-area-inset-bottom))}
.rm__h{font-family:var(--serif-d);font-weight:400;font-size:clamp(44px,6vw,108px);line-height:.92;letter-spacing:-.02em;max-width:14ch}
.rm__h i{font-family:var(--serif);font-style:italic;color:var(--brass-hi)}
.rm__lede{margin-top:24px;max-width:46ch;font-weight:300;font-size:clamp(18px,1.5vw,23px);line-height:1.5;color:var(--ivory-2)}
.rm__verdict{margin-top:clamp(40px,5vw,70px);padding:clamp(22px,2.6vw,36px);border:1px solid var(--hair-2);position:relative;max-width:900px}
.rm__verdict::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:var(--brass)}
.rm__verdict p:last-child{margin-top:14px;font-family:var(--serif);font-size:clamp(20px,1.8vw,27px);line-height:1.35;color:var(--ivory)}
.rm__foot{margin-top:40px;font:500 9.5px/1.8 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);max-width:90ch}
.rm__cv{position:relative;width:100%;height:clamp(360px,62vh,720px);border:1px solid var(--hair);overflow:hidden;background:var(--ink);margin-top:clamp(30px,4vw,54px)}
.rm__cv canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rm__tag{position:absolute;left:18px;top:16px;z-index:2;font:500 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-2)}
.rm__tag b{color:var(--brass);font-weight:500}
.rm__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:clamp(30px,4vw,54px)}
.rm__grid>*{background:var(--ink-2);padding:clamp(18px,2vw,28px)}
.rm__rows{margin-top:clamp(30px,4vw,54px);border-top:1px solid var(--hair-2)}
.rm__rows>div{display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr) auto;gap:clamp(14px,3vw,40px);align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hair)}
.rm__rows dt{font:500 10.5px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ivory)}
.rm__rows dd{color:var(--ivory-2);font-size:15.5px}
.rm__rows em{font-style:normal}

@media (max-width:1100px){
  .scale__t,.scale__i{grid-column:1/13}
  .scale__i{margin-top:30px}
  .big{grid-template-columns:repeat(2,minmax(0,1fr))}
  .big div:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .big div:nth-child(even){padding-left:clamp(14px,2vw,32px);border-left:1px solid var(--hair)}
  .rooms,.roster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--hair);margin-left:4px}
  .flow li{padding:0 0 30px 26px}
  .flow li::before{left:-4px;top:4px}
  .refuse--2{grid-template-columns:1fr}
  .rm__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .eng__track{height:520vh}
  .eng__stats{display:none}
  .eng__stage::after{background:linear-gradient(0deg,rgba(var(--gr),.9) 0%,rgba(var(--gr),.4) 40%,transparent 62%)}
  .big{grid-template-columns:1fr}
  .big div:nth-child(even){padding-left:0;border-left:0}
  .rooms,.roster{grid-template-columns:1fr}
  .rcard{min-height:0}
  .agl__c{max-width:160px;padding:7px 9px 8px}
  .agl__n{font-size:15px}
  .rm__rows>div{grid-template-columns:1fr;gap:6px}
}

/* ------------------------------------------------------- 23. THE ROOMS ---- */

/* Financial Markets: a trading screen, in the house colours. */
.mk__tape{position:sticky;top:calc(84px + env(safe-area-inset-top));z-index:4;overflow:hidden;border-bottom:1px solid var(--hair);background:var(--ink);white-space:nowrap}
.mk__run{display:inline-flex;gap:38px;padding:11px 0;animation:tape 60s linear infinite}
.mk__run span{display:inline-flex;align-items:baseline;gap:10px;font:500 10.5px/1 var(--mono);letter-spacing:.06em;color:var(--ivory)}
.mk__run b{font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.mk__run em,.mk em.up,.mk em.dn{font-style:normal}
.up{color:#9CC7B4}.dn{color:#E08A82}
@keyframes tape{to{transform:translateX(-50%)}}
.mk__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:clamp(34px,4vw,60px);background:var(--hair);border:1px solid var(--hair)}
.mk__p{background:var(--ink-2);padding:clamp(16px,1.8vw,24px);margin:0}
.mk__p--wide{grid-column:1/-1}
.mk__p figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.mk__p figcaption span{flex:1 1 100%;font:500 10px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-2)}
.mk__p figcaption b{font-family:var(--mono);font-weight:500;font-size:clamp(24px,2.4vw,36px);color:var(--ivory);font-variant-numeric:tabular-nums}
.mk__p figcaption em{font:500 10.5px/1 var(--mono);font-style:normal;letter-spacing:.06em}
.mk__cv{position:relative;height:clamp(150px,18vw,220px);margin-top:16px}
.mk__p--wide .mk__cv{height:clamp(190px,22vw,280px)}
.mk__cv canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:pan-y}
.mk__h{font:500 10px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-2)}
.mk__tbl{overflow-x:auto;margin-top:14px;-webkit-overflow-scrolling:touch}
.mk table,.gb__tbl table{width:100%;border-collapse:collapse;min-width:560px;font-size:14px}
.mk th,.mk td,.gb__tbl th,.gb__tbl td{padding:11px 12px 11px 0;border-bottom:1px solid var(--hair);text-align:left;vertical-align:baseline}
.mk th,.gb__tbl thead th{font:500 9.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.mk td{color:var(--ivory-2)}
.mk td:first-child{color:var(--ivory);font-family:var(--serif);font-size:16px}

/* Environment: the storm. */
.st{cursor:crosshair}
.st__flash{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 70% at 50% 30%,rgba(214,222,255,.9),rgba(160,176,230,.2));opacity:0;mix-blend-mode:screen}

/* Negotiation: the board, and the brief beside it. */
.ch{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1px;margin-top:clamp(30px,4vw,54px);background:var(--hair);border:1px solid var(--hair)}
.ch .rm__cv{margin-top:0;border:0}
.ch__side{display:flex;flex-direction:column;background:var(--ink-2);min-height:clamp(360px,62vh,720px)}
.ch__log{flex:1;overflow-y:auto;padding:22px 24px;max-height:clamp(360px,62vh,720px)}
.ch__row{padding:16px 0 18px;border-bottom:1px solid var(--hair);opacity:0;transform:translateY(10px);transition:opacity .7s var(--e-out),transform .9s var(--e-out)}
.ch__row.on{opacity:1;transform:none}
.ch__they,.ch__you{font-size:15.5px;line-height:1.55}
.ch__they{color:var(--ivory-2)}
.ch__you{margin-top:10px;color:var(--ivory);font-family:var(--serif);font-size:18px;line-height:1.4}
.ch__they span,.ch__you span{display:block;margin-bottom:5px;font:500 9.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.ch__you span{color:var(--brass)}
.ch__go{margin:0;border-radius:0}

/* Valuation: the board of pegs, and the numbers. */
.gb__axis{position:absolute;left:0;right:0;bottom:14px;height:34px;z-index:2;pointer-events:none}
.gb__axis span{position:absolute;bottom:0;transform:translateX(-50%);font:500 9.5px/1 var(--mono);letter-spacing:.06em;color:var(--mute)}
.gb__band{position:absolute;bottom:18px;height:4px;background:var(--brass);opacity:0;transition:opacity 1s}
.gb__band em{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font:500 9px/1 var(--mono);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-hi);white-space:nowrap}
.gb__ask{position:absolute;bottom:40px;transform:translateX(-50%);font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ivory);white-space:nowrap;opacity:0;transition:opacity 1s}
.gb.is-done .gb__band,.gb.is-done .gb__ask{opacity:1}
.gb__facts{margin-top:14px}
.gb__facts div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--hair);font-size:14.5px}
.gb__facts dt{color:var(--ivory-2)}
.gb__facts dd{color:var(--ivory);font-family:var(--mono);font-size:13.5px;text-align:right}
.gb__tbl{overflow-x:auto;margin-top:14px}
.gb__tbl table{min-width:420px}
.gb__tbl tbody th{font-size:13.5px;font-weight:400;color:var(--ivory-2);padding-right:14px}
.gb__tbl td{font-family:var(--mono);font-size:14px;color:var(--ivory)}
.gb__tbl td.hi{color:var(--brass-hi)}
.gb__note{margin-top:18px;font-size:14.5px;color:var(--ivory-2)}

@media (max-width:1100px){
  .mk__grid{grid-template-columns:1fr}
  .ch{grid-template-columns:1fr}
  .ch__side{min-height:0}
  .ch__log{max-height:none}
}
@media (max-width:640px){
  .mk__tape{top:calc(72px + env(safe-area-inset-top))}
  .rm__cv{height:clamp(300px,52vh,460px)}
}

/* ------------------------------------------------------ 24. THE PACKET ---- */

.pk{position:relative;background:var(--ink)}
.pk__track{position:relative;height:520vh}
.pk__stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden}
.pk__stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.6s var(--e-out)}
.pk.is-ready .pk__stage canvas{opacity:1}
.pk__stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(0deg,rgba(var(--gr),.86) 0%,rgba(var(--gr),.2) 36%,transparent 55%),linear-gradient(90deg,rgba(var(--gr),.5),transparent 45%)}
.pk__lead,.pk__reader{position:absolute;left:0;right:0;bottom:max(8vh,calc(36px + env(safe-area-inset-bottom)));z-index:3}
.pk__h1{margin-top:22px;max-width:12ch}
.pk__lede{margin-top:24px;max-width:40ch}
.pk__reader{opacity:0;visibility:hidden}
.pk__t{margin-top:14px;font-family:var(--serif-d);font-size:clamp(40px,5vw,84px);line-height:.95;letter-spacing:-.02em}
.pk__s{margin-top:16px;max-width:46ch;color:var(--ivory-2);font-size:clamp(16px,1.25vw,19px)}
.pk__ex{margin-top:18px;font:500 9.5px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.pk.no-gl .pk__stage{background:radial-gradient(60% 60% at 60% 40%,var(--ink-3),var(--ink) 70%)}

.toc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,48px);margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--hair)}
.toc li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 14px;padding:20px 0 22px;border-bottom:1px solid var(--hair)}
.toc span{grid-row:1/3;font:500 10px/2.2 var(--mono);letter-spacing:.16em;color:var(--brass)}
.toc b{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.2;color:var(--ivory)}
.toc em{font-style:normal;font-size:14.5px;color:var(--ivory-2)}

/* The bridge, set on paper like a page of the Packet. */
.br{margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--paper-ink)}
.br__row{display:grid;grid-template-columns:minmax(200px,1.1fr) minmax(0,1.6fr) minmax(150px,auto);grid-template-areas:"k bar v" "rev rev tg";align-items:center;gap:10px clamp(16px,3vw,40px);padding:22px 0;border-bottom:1px solid var(--paper-hair)}
.br__k{grid-area:k;font-family:var(--serif);font-size:clamp(19px,1.6vw,24px);color:var(--paper-ink)}
.br__k small{display:block;margin-top:6px;font-family:var(--sans);font-size:14px;line-height:1.45;color:var(--paper-2ink)}
.br__bar{grid-area:bar;position:relative;height:14px;background:rgba(22,33,58,.06)}
.br__bar i{position:absolute;top:0;bottom:0;left:0;width:var(--w,0%);background:var(--paper-ink);transition:left .9s var(--e-out),width .9s var(--e-out)}
.br__row[data-adj] .br__bar i{background:#23426E}
.br__row--tot .br__bar i{background:var(--brass-lo)}
.br__row--ref .br__bar{background:repeating-linear-gradient(90deg,rgba(22,33,58,.12) 0 6px,transparent 6px 12px)}
.br__v{grid-area:v;justify-self:end;font-family:var(--mono);font-size:15px;color:var(--paper-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.br__row--ref .br__v{color:var(--paper-mute);text-transform:uppercase;font-size:12px;letter-spacing:.14em}
.br__rev{grid-area:rev;font-size:14px;color:var(--paper-2ink)}
.br__rev b{font:500 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--brass-lo);margin-right:8px}
.br__tg{grid-area:tg;justify-self:end;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--paper-hair);font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper-ink);transition:background .4s,color .4s,border-color .4s}
.br__tg:hover{border-color:var(--paper-ink)}
.br__row.off .br__k,.br__row.off .br__v{color:var(--paper-mute);text-decoration:line-through;text-decoration-thickness:1px}
.br__row.off .br__tg{background:var(--paper-ink);color:var(--paper)}
.br__row--tot{border-bottom:2px solid var(--paper-ink)}
.br__row--tot .br__v{font-family:var(--serif-d);font-size:clamp(28px,2.6vw,42px)}
.br__row--base .br__rev,.br__row--tot .br__rev{display:none}
.br__n{margin-top:26px;font:500 9.5px/1.8 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-mute);max-width:90ch}

/* The brief, as an exchange. */
.ex2{margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--hair);max-width:1100px}
.ex2 li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(18px,4vw,60px);padding:26px 0;border-bottom:1px solid var(--hair)}
.ex2__w{font:500 10px/1.8 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.ex2__they{font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.5vw,23px);color:var(--ivory-2)}
.ex2__you{font-family:var(--serif);font-size:clamp(19px,1.5vw,23px);line-height:1.4;color:var(--ivory)}
.ex2 span{display:block;margin-bottom:8px;font:500 9.5px/1 var(--mono);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.ex2__you span{color:var(--brass)}
.ex2__you .gr{margin-left:6px}

/* The cost, against everything else a buyer pays. */
.cost{margin-top:clamp(56px,7vw,96px);max-width:1100px}
.cost .lbl{margin-bottom:20px}
.cost__r{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr) minmax(120px,auto);align-items:center;gap:clamp(14px,3vw,36px);padding:16px 0;border-bottom:1px solid var(--paper-hair)}
.cost__k{font-family:var(--serif);font-size:19px;color:var(--paper-ink)}
.cost__bar{height:12px;background:rgba(22,33,58,.05)}
.cost__bar i{display:block;height:100%;width:var(--w);background:var(--paper-2ink)}
.cost__r--us .cost__bar i{background:repeating-linear-gradient(135deg,var(--brass-lo) 0 3px,transparent 3px 7px);outline:1px solid var(--brass-lo)}
.cost__v{justify-self:end;font-family:var(--mono);font-size:15px;color:var(--paper-ink)}
.cost__r--us .cost__k,.cost__r--us .cost__v{color:var(--brass-lo)}
.cost__n{margin-top:20px;font-size:14px;color:var(--paper-2ink);max-width:80ch}
.cost__n a{border-bottom:1px solid var(--brass-lo)}

@media (max-width:1100px){
  .toc{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .pk__track{height:460vh}
  .toc{grid-template-columns:1fr}
  .br__row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k v" "bar bar" "rev rev" "tg tg"}
  .br__tg{justify-self:start}
  .ex2 li{grid-template-columns:1fr}
  .cost__r{grid-template-columns:1fr auto;grid-template-areas:"k v" "bar bar"}
  .cost__k{grid-area:k}.cost__v{grid-area:v}.cost__bar{grid-area:bar}
}

/* ---------------------------------------------------- 25. THE STANDARD ---- */

.sc{position:relative;background:var(--paper);color:var(--paper-ink)}
.sc__track{position:relative;height:440vh}
.sc__stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden}
.sc__stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s var(--e-out)}
.sc.is-ready .sc__stage canvas{opacity:1}
.sc__lead,.sc__caps{position:absolute;left:0;right:0;bottom:max(9vh,calc(36px + env(safe-area-inset-bottom)));z-index:2}
.sc__h1{margin-top:22px;color:var(--paper-ink);max-width:10ch}
.sc__h1 i{color:var(--brass-lo)}
.sc__lede{margin-top:24px;max-width:36ch}
.sc__cap{position:absolute;left:max(var(--gut),env(safe-area-inset-left));bottom:0;max-width:min(470px,calc(100% - 2*var(--gut)));opacity:0;transform:translateY(16px);transition:opacity .8s var(--e-out),transform 1s var(--e-out);pointer-events:none}
.sc__cap.on{opacity:1;transform:none}
.sc__l{font-family:var(--serif-d);font-size:clamp(110px,14vw,240px);line-height:.78;letter-spacing:-.04em;color:var(--paper-ink)}
.sc__cap[data-g="A"] .sc__l{color:var(--brass-lo)}
.sc__n{margin-top:18px;font-family:var(--serif);font-size:clamp(26px,2.4vw,38px);color:var(--paper-ink)}
.sc__d{margin-top:12px;font-size:clamp(15.5px,1.2vw,18px);color:var(--paper-2ink);max-width:38ch}
.sc.no-gl .sc__stage{background:radial-gradient(60% 60% at 60% 40%,#F5F6F8,var(--paper) 70%)}

.axes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:clamp(56px,7vw,96px);background:var(--hair);border:1px solid var(--hair);max-width:1100px}
.axes__q{background:var(--ink);padding:clamp(24px,3vw,40px);min-height:190px;display:flex;flex-direction:column;justify-content:space-between}
.axes__q p:last-child{font-family:var(--serif);font-size:clamp(20px,1.8vw,28px);line-height:1.3;color:var(--ivory)}
.axes__q:first-child{background:#141410;border-top:1px solid var(--brass)}
.axes__q:last-child p:last-child{color:var(--ivory-2)}
.moves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,80px);margin-top:clamp(36px,4vw,60px)}
.moves ul{margin-top:18px;border-top:1px solid var(--paper-hair)}
.moves li{padding:14px 0;border-bottom:1px solid var(--paper-hair);font-family:var(--serif);font-size:clamp(18px,1.4vw,21px);color:var(--paper-ink)}

/* The header, over a page that opens on paper. */
.hd--paper .hd:not(.is-solid) .hd__mark,.hd--paper .hd:not(.is-solid) .hd__a,.hd--paper .hd:not(.is-solid) .hd__menu{color:var(--paper-ink)}
.hd--paper .hd:not(.is-solid) .hd__menu i::before,.hd--paper .hd:not(.is-solid) .hd__menu i::after{background:var(--paper-ink)}
.hd--paper .hd:not(.is-solid) .hd__cta{color:var(--paper-ink);border-color:var(--paper-hair)}
.hd--paper .hd:not(.is-solid) .hd__cta:hover{color:var(--paper)}
.hd--paper .hd:not(.is-solid) .hd__cta::before{background:var(--paper-ink)}
.is-open .hd--paper .hd .hd__mark,.is-open .hd--paper .hd .hd__menu{color:var(--ivory)}
.is-open .hd--paper .hd .hd__menu i::before,.is-open .hd--paper .hd .hd__menu i::after{background:var(--ivory)}

@media (max-width:900px){
  .std__rules{grid-column:1/13!important}
}
@media (max-width:760px){
  .sc__track{height:400vh}
  .axes,.moves{grid-template-columns:1fr}
  .sc__l{font-size:96px}
}

/* ----------------------------------------------------- 21. RESPONSIVE ---- */

@media (max-width:1100px){
  .stmt__cols{grid-column:3/13}
  .hole__intro{grid-column:1/13}.hole__side{grid-column:1/13;margin-top:34px}
  .rh{overflow:clip}
  .rh__body{grid-template-columns:1fr;min-height:0}
  .rh__well{height:210px;border-right:0;border-bottom:1px solid var(--hair)}
  .rh__stream{height:auto;min-height:280px;overflow:visible;padding-bottom:28px}
  .rh__side{position:sticky;bottom:0;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 18px;padding:16px 18px calc(16px + env(safe-area-inset-bottom));border-left:0;border-top:1px solid var(--hair-2);background:var(--ink-2)}
  .rh__side .lbl{grid-column:1}
  .rh__sum{grid-column:1;margin-top:0;font-size:clamp(30px,8vw,44px)}
  .rh__of{grid-column:1;margin-top:0}
  .rh__go{grid-column:2;grid-row:1/4;margin-top:0;min-width:150px}
  .res__t,.res__b{grid-column:1/13}
  .res__b{margin-top:40px}
  .out{grid-template-columns:1fr}
  .out__t,.out__i{grid-column:1/13}
  .out__i{margin-top:30px}
  .std__side{grid-column:1/13;margin-top:30px}
  .dos__g{grid-template-columns:1fr}
  .dos__read{border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:30px}
  .inst{grid-template-columns:1fr}
  .inst__c,.inst__c+.inst__c{padding:36px 0 40px;border-right:0;border-bottom:1px solid var(--hair)}
  .inst__c+.inst__c--key::before{left:0}
  .gate__refuse,.gate__enter{grid-column:1/13}
  .ft__c1{grid-column:1/13}.ft__c2{grid-column:1/5;margin-top:44px}.ft__c3{grid-column:5/9;margin-top:44px}.ft__c4{grid-column:9/13;margin-top:44px}
}

@media (max-width:900px){
  .hd__nav,.hd__cta{display:none}
  .hd__menu{display:inline-flex}
  .hd__in{height:72px}
  .hd.is-solid{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--ink)}
  .both__turn,.both__ans{grid-column:1/13}
  .both__ans{margin-top:34px}
  .chap__m,.chap__b{grid-column:1/13}
  .chap__b{margin-top:26px}
  .ih__t,.ih__p{grid-column:1/13}
  .twin{grid-template-columns:1fr}
  .seq__r{grid-template-columns:1fr;gap:8px}
  .seq__d{text-align:left}
  .seq__r--us::before{left:-14px}
  .std__r{grid-template-columns:clamp(54px,14vw,80px) minmax(0,1fr)}
  .std__d{grid-column:2}
}

@media (max-width:640px){
  body{font-size:16px}
  .form__g{grid-template-columns:1fr}
  .defs div,.tariff__r{grid-template-columns:1fr;gap:6px}
  .ft__c2,.ft__c3,.ft__c4{grid-column:1/13}
  .ft__band{flex-direction:column}
  .bld__top{flex-direction:column}
  .bld__note{text-align:left}
  .bld__prog{gap:6px}
  .bld__prog button{font-size:8.5px;letter-spacing:.12em}
  .rh__bar{padding:12px 16px}
  .rh__bar>span:first-child,.rh__ex{flex-basis:100%}
  .rh__tabs{flex-basis:100%}
  .rh__tab{flex:1;justify-content:center}
  .rh__a{padding-left:0}
  .rh__go{min-width:0;padding:0 16px}
  .hud__bands{display:none}
  .hud__chip{top:calc(88px + env(safe-area-inset-top));font-size:9px}
  .hud__g{top:calc(126px + env(safe-area-inset-top));left:max(var(--gut),env(safe-area-inset-left));right:auto;text-align:left}
  .hud__alt span{font-size:18px}
  .hud__t{font-size:30px}
  .hud__cap{bottom:calc(26px + env(safe-area-inset-bottom))}
  .poi__card{min-width:0;padding:8px 10px 9px}
  .poi__n{font-size:15.5px;margin-top:6px}
  .poi__k{font-size:8.5px;letter-spacing:.14em}
  .asset{bottom:calc(20px + env(safe-area-inset-bottom))}
  .asset__p{margin-top:16px;padding-top:14px}
  .asset__d{font-size:13.5px}
  .dos__figs{grid-template-columns:1fr}
  .dfig,.dfig+.dfig{padding:22px 0 24px;border-right:0;border-bottom:1px solid var(--hair)}
  .dch__l span:nth-child(even){visibility:hidden}
  .out__c{padding:26px 22px 30px}
  .globe__foot{flex-direction:column;align-items:flex-start}
  .enter .cta{padding:0 22px}
}

/* On touch, nothing may stay "hovered" after a tap. */
@media (hover:none){
  .cta:hover{border-color:var(--hair-2);color:var(--ivory)}
  .cta:hover::before{transform:translateY(101%)}
  .cta:active::before{transform:none}
  .cta:active{color:var(--ink)}
  .ln:hover{background-size:0 1px}
  .hd__a:hover::after{transform:scaleX(0)}
  .rh__tab:hover{border-color:var(--hair)}
  .poi:hover .poi__card{border-color:var(--hair-2)}
  .poi:hover .poi__f{max-height:0;opacity:0;margin-top:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.js .rise .m>span,html.js .fade{transform:none!important;opacity:1!important}
  .grain{display:none}
}

@media print{
  .grain,.hd,.menu,.ft,.globe,.bld,.cta{display:none!important}
  body,.night{background:#fff;color:#000}
}

/* ------------------------------------------------ 26. THE MODELS ------------ */

/* The opening scene: ten thousand futures. */
.fu{position:relative;background:var(--ink-2)}
.fu__track{position:relative;height:720vh}
.fu__stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden}
.fu__stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.6s var(--e-out)}
.fu.is-ready .fu__stage canvas{opacity:1}
.fu__stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(var(--gr),.82) 0%,rgba(var(--gr),.3) 34%,transparent 56%),linear-gradient(0deg,rgba(var(--gr),.8),transparent 32%);z-index:1}
.fu__caps{position:absolute;left:0;right:0;bottom:max(9vh,calc(40px + env(safe-area-inset-bottom)));z-index:3;pointer-events:none}
.fu__cap{position:absolute;left:max(var(--gut),env(safe-area-inset-left));bottom:0;max-width:min(580px,calc(100% - 2*var(--gut)));opacity:0;visibility:hidden}
.fu__cap:first-child{opacity:1;visibility:visible}
.fu__h1{margin-top:22px;max-width:11ch}
.fu__lede{margin-top:26px;max-width:42ch}
.fu__t{margin-top:18px;font-family:var(--serif-d);font-size:clamp(40px,5vw,86px);line-height:.95;letter-spacing:-.02em}
.fu__t i{font-family:var(--serif);font-style:italic;color:var(--brass-hi)}
.fu__p{margin-top:20px;max-width:40ch;color:var(--ivory-2);font-size:clamp(16px,1.25vw,19px)}
.fu__p b{font-weight:500;color:var(--ivory)}
.fu__hud{position:absolute;right:max(var(--gut),env(safe-area-inset-right));top:calc(112px + env(safe-area-inset-top));z-index:3;display:flex;gap:34px;pointer-events:none}
.fu__hud p{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.fu__hud small{font:500 9px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.fu__hud b{font-family:var(--serif-d);font-weight:400;font-size:clamp(22px,2vw,32px);line-height:1;color:var(--ivory);font-variant-numeric:tabular-nums}
.fu__hud p:last-child b{color:#E08A82}
.fu__tick,.fu__yr{position:absolute;left:0;top:0;z-index:2;pointer-events:none;font:500 9px/1 var(--mono);letter-spacing:.14em;color:var(--mute);white-space:nowrap;opacity:0}
.fu__tick{margin:-5px 0 0 -8px;translate:-100% 0}
.fu__tick--one{color:#E08A82;font-weight:600}
.fu__yr{translate:-50% 8px}
.fu__axis{position:absolute;z-index:3;font:500 9px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);pointer-events:none}
.fu__axis--y{right:max(var(--gut),env(safe-area-inset-right));top:calc(176px + env(safe-area-inset-top))}
.fu__ex{position:absolute;right:max(var(--gut),env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));z-index:3;font:500 9px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.fu.no-gl .fu__stage{background:radial-gradient(60% 60% at 65% 45%,var(--ink-3),var(--ink) 70%)}

/* The four books. */
.mx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:clamp(56px,7vw,96px);background:var(--hair);border:1px solid var(--hair)}
.mx li{background:var(--ink)}
.mx a{display:flex;flex-direction:column;height:100%;min-height:250px;padding:clamp(20px,2.2vw,30px);transition:background .5s var(--e-out)}
.mx a:hover{background:var(--ink-2)}
.mx span{font-family:var(--serif-d);font-size:44px;line-height:1;color:var(--brass)}
.mx b{margin-top:22px;font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.8vw,28px);line-height:1.1;color:var(--ivory)}
.mx em{margin-top:12px;font-style:normal;font-size:14.5px;color:var(--ivory-2)}
.mx i{margin-top:auto;padding-top:20px;font:500 9.5px/1 var(--mono);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

.mbook__h{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,32px);align-items:end;margin-top:clamp(40px,5vw,72px);margin-bottom:clamp(30px,4vw,56px)}
.mbook__h h2{grid-column:1/8}
.mbook__h .body{grid-column:8/13}

/* One model. */
.md{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(26px,4vw,72px);padding:clamp(44px,5vw,80px) 0;border-top:1px solid var(--hair);scroll-margin-top:90px}
.paper .md{border-top-color:var(--paper-hair)}
.md__n{display:flex;align-items:baseline;gap:14px;font:500 10px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.md__n b{font-weight:500;color:var(--brass)}
.paper .md__n{color:var(--paper-mute)}
.paper .md__n b{color:var(--brass-lo)}
.md__q{margin-top:20px;font-family:var(--serif-d);font-weight:400;font-size:clamp(28px,2.6vw,44px);line-height:1.04;letter-spacing:-.014em;color:var(--ivory)}
.paper .md__q{color:var(--paper-ink)}
.md__a{margin-top:26px;padding:20px 0;border-top:1px solid var(--brass);border-bottom:1px solid var(--hair)}
.paper .md__a{border-top-color:var(--brass-lo);border-bottom-color:var(--paper-hair)}
.md__a b{display:block;font-family:var(--serif-d);font-weight:400;font-size:clamp(46px,4.6vw,78px);line-height:.92;letter-spacing:-.025em;color:var(--brass-hi);font-variant-numeric:lining-nums}
.paper .md__a b{color:var(--brass-lo)}
.md__a span{display:block;margin-top:12px;font-size:15.5px;line-height:1.45;color:var(--ivory)}
.paper .md__a span{color:var(--paper-ink)}
.md__p{margin-top:22px;font-size:16px;color:var(--ivory-2)}
.paper .md__p{color:var(--paper-2ink)}
.md__x{margin-top:26px;padding:16px 18px;border:1px solid var(--hair);background:rgba(var(--lr),.02)}
.paper .md__x{border-color:var(--paper-hair);background:rgba(22,33,58,.025)}
.md__x p{font:500 9.5px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.paper .md__x p{color:var(--brass-lo)}
.md__x ul{margin-top:12px}
.md__x li{position:relative;padding:5px 0 5px 16px;font:400 12px/1.5 var(--mono);color:var(--ivory-2)}
.paper .md__x li{color:var(--paper-2ink)}
.md__x li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:1px;background:var(--brass)}
.md__r{margin:0;align-self:start;position:sticky;top:110px}
.md__cv{position:relative;width:100%;aspect-ratio:16/11;border:1px solid var(--hair);background:rgba(var(--lr),.015)}
.paper .md__cv{border-color:var(--paper-hair);background:rgba(22,33,58,.02)}
.md__cv canvas{position:absolute;inset:0;display:block}
.md__cv--html{aspect-ratio:auto;padding:clamp(16px,2vw,26px)}
.md__cap{margin-top:12px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;font-size:13.5px;color:var(--ivory-2)}
.paper .md__cap{color:var(--paper-2ink)}
.md__cap span{font:500 9px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.md__sw{position:absolute;right:12px;top:10px;z-index:2;display:flex;gap:6px}
.md__sw button{padding:7px 11px;border:1px solid var(--paper-hair);font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2ink);background:var(--paper)}
.md__sw button[aria-pressed="true"]{background:var(--paper-ink);color:var(--paper);border-color:var(--paper-ink)}
.night .md__sw button{border-color:var(--hair-2);color:var(--ivory-2);background:var(--ink)}
.night .md__sw button[aria-pressed="true"]{background:var(--ivory);color:var(--ink)}
.md__coll{margin-top:14px;counter-reset:c;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px}
.md__coll li{counter-increment:c;position:relative;padding-left:30px;font-size:14px;line-height:1.45;color:var(--paper-2ink)}
.night .md__coll li{color:var(--ivory-2)}
.md__coll li::before{content:counter(c);position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:#8E3B3F;color:#fff;font:600 10px/19px var(--mono);text-align:center}

/* M-02 grid */
.mg table{width:100%;border-collapse:collapse;font-family:var(--mono);font-variant-numeric:tabular-nums}
.mg th,.mg td{padding:12px 6px;text-align:center;font-size:13px;border-bottom:1px solid var(--hair)}
.mg thead th{font-size:10px;letter-spacing:.1em;color:var(--mute);font-weight:500}
.mg thead th.ev{color:var(--brass-hi)}
.mg tbody th{text-align:left;font:500 9.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-2);width:120px}
.mg td{color:var(--ivory);background:rgba(180,195,218,calc(var(--k) * .34))}
.mg td.hi{outline:1px solid #E08A82;outline-offset:-4px;color:#E8A49D}
.mg__ev{position:relative;margin-top:14px;height:34px}
.mg__ev span{position:absolute;left:calc(132px + (100% - 132px) * var(--a));width:calc((100% - 132px) * var(--b));top:0;height:8px;border:1px solid var(--brass);border-top:0}
.mg__ev p{position:absolute;left:calc(132px + (100% - 132px) * .43);top:14px;font:500 9.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brass-hi)}
.mg__k{margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair)}
.mg__k div{background:var(--ink);padding:14px}
.mg__k dt{font:500 9px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.mg__k dd{margin-top:8px;font-family:var(--serif-d);font-size:24px;color:var(--ivory)}

/* M-12 value of information */
.vo__h,.vo li{display:grid;grid-template-columns:28px minmax(0,2.4fr) 70px 90px minmax(0,1.6fr);gap:12px;align-items:center}
.vo__h{padding-bottom:10px;border-bottom:1px solid var(--hair-2);font:500 9px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.vo li{padding:13px 0;border-bottom:1px solid var(--hair)}
.vo__n{font:500 10px/1 var(--mono);color:var(--brass)}
.vo__q{font-size:14.5px;color:var(--ivory);line-height:1.35}
.vo__q em{display:block;margin-top:4px;font:italic 400 13px/1.3 var(--serif);color:var(--brass-hi)}
.vo__c,.vo__v{font:400 12.5px/1 var(--mono);color:var(--ivory-2);font-variant-numeric:tabular-nums}
.vo__r{position:relative;height:22px;display:flex;align-items:center}
.vo__r i{position:absolute;left:0;top:5px;bottom:5px;width:var(--w);background:var(--brass);opacity:.55}
.vo__r b{position:relative;margin-left:8px;font:600 11.5px/1 var(--mono);color:var(--ivory);white-space:nowrap}
.vo li:nth-child(5) .vo__q,.vo li:nth-child(5) .vo__n{color:var(--brass-hi)}
.vo__foot{margin-top:14px;font:500 9px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* M-15 exit */
.ex5__h,.ex5 li{display:grid;grid-template-columns:minmax(0,1.3fr) 120px 120px;gap:8px 14px;align-items:center}
.ex5__h{padding-bottom:10px;border-bottom:1px solid var(--hair-2);font:500 9px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ex5 li{padding:14px 0;border-bottom:1px solid var(--hair)}
.ex5 b{font-weight:500;font-size:15px;color:var(--ivory)}
.ex5 li>span{display:inline-flex;align-items:center;gap:8px;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.ex5 li>span::before{content:"";width:9px;height:9px;border-radius:50%}
.ex5 .y{color:var(--ivory)}.ex5 .y::before{background:var(--brass)}
.ex5 .n{color:var(--mute)}.ex5 .n::before{border:1px solid var(--mute)}
.ex5 em{grid-column:1/-1;font-style:normal;font-size:13.5px;color:var(--ivory-2)}
.ex5__t{margin-top:18px;display:flex;gap:30px;flex-wrap:wrap;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-2)}
.ex5__t b{font-family:var(--serif-d);font-weight:400;font-size:34px;letter-spacing:0;color:var(--brass-hi);margin-right:6px}

/* M-20 live re-pricing */
.lv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 26px}
.lv__v{grid-column:1/-1}
.lv__big{margin-top:8px;font-family:var(--serif-d);font-size:clamp(40px,4vw,64px);line-height:1;color:var(--paper-ink);font-variant-numeric:tabular-nums}
.lv__bar{position:relative;height:30px;margin-top:18px;background:rgba(22,33,58,.06)}
.lv__bar i{position:absolute;top:0;bottom:0;background:rgba(35,66,110,.35)}
.lv__bar b{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--paper-ink)}
.lv__ask{position:absolute;left:var(--x);top:0;bottom:0;border-left:1px dashed #8E3B3F;padding-left:6px;font:500 9px/30px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8E3B3F}
.lv__rng{margin-top:10px;font:500 10px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-2ink)}
.lv__k{margin-top:14px;display:flex;gap:30px}
.lv__k dt{font:500 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper-mute)}
.lv__k dd{margin-top:6px;font-family:var(--mono);font-size:15px;color:var(--paper-ink)}
.lv__btn{display:block;width:100%;text-align:left;margin-top:10px;padding:14px 16px;border:1px solid var(--paper-hair);background:var(--paper);transition:background .4s,border-color .4s}
.lv__btn span{display:block;font-size:14.5px;line-height:1.4;color:var(--paper-ink)}
.lv__btn em{display:block;margin-top:6px;font:500 9px/1 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lo)}
.lv__btn:hover{border-color:var(--paper-ink)}
.lv__btn[aria-pressed="true"]{background:var(--paper-ink);border-color:var(--paper-ink)}
.lv__btn[aria-pressed="true"] span{color:var(--paper)}
.lv__btn[aria-pressed="true"] em{color:var(--brass-hi)}
.lv__btn[aria-pressed="true"] em::after{content:" · recorded"}
.lv__reset{margin-top:12px;font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--paper-mute);text-decoration:underline;text-underline-offset:4px}
.lv__q ol{margin-top:6px}
.lv__q li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--paper-hair);background:var(--paper)}
.lv__q li span{font:500 10px/1 var(--mono);color:var(--brass-lo)}
.lv__q li b{font-weight:400;font-size:14px;color:var(--paper-ink)}
.lv__q li em{font:600 11px/1 var(--mono);font-style:normal;color:var(--paper-ink);white-space:nowrap}

/* M-21 red team */
.rt__n{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--paper-hair);border:1px solid var(--paper-hair)}
.rt__n div{background:var(--paper);padding:14px}
.rt__n dt{font:500 9px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-mute)}
.rt__n dd{margin-top:8px;font-family:var(--serif-d);font-size:clamp(30px,3vw,46px);line-height:1;color:var(--paper-ink);font-variant-numeric:tabular-nums}
.rt__n .m dd{color:var(--brass-lo)}.rt__n .g dd{color:#8E3B3F}
.rt__l{margin-top:18px}
.rt__l li{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:4px 16px;padding:13px 0;border-bottom:1px solid var(--paper-hair);opacity:0;transform:translateY(8px);transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
.is-in .rt__l li{opacity:1;transform:none}
.rt__l li:nth-child(2){transition-delay:.12s}.rt__l li:nth-child(3){transition-delay:.24s}.rt__l li:nth-child(4){transition-delay:.36s}.rt__l li:nth-child(5){transition-delay:.48s}.rt__l li:nth-child(6){transition-delay:.6s}
.rt__l p{font-size:14.5px;color:var(--paper-ink)}
.rt__l p::before{content:"Attack · ";font:500 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-mute)}
.rt__l b{justify-self:end;font:600 9.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-mute)}
.rt--m b{color:var(--brass-lo)}.rt--g b{color:#8E3B3F}
.rt__l span{grid-column:1/-1;font-size:13.5px;color:var(--paper-2ink)}

/* M-23 feed */
.fd{padding-left:14px}
.fd li{display:grid;grid-template-columns:80px minmax(0,1fr);gap:16px;padding:15px 0;border-bottom:1px solid var(--paper-hair);position:relative}
.fd time{font:500 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-mute)}
.fd b{display:block;font-weight:500;font-size:15px;color:var(--paper-ink)}
.fd span{display:block;margin-top:5px;font-size:14px;color:var(--paper-2ink)}
.fd li::before{content:"";position:absolute;left:-14px;top:21px;width:6px;height:6px;border-radius:50%;background:var(--paper-mute)}
.fd li.fd--r::before{background:#8E3B3F}.fd li.fd--g::before{background:var(--brass-lo)}
.fd--r span{color:#8E3B3F}

/* Home: "that was the simple part". */
.qx{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:clamp(56px,7vw,96px);background:var(--hair);border:1px solid var(--hair)}
.qx li{background:var(--ink)}
.qx a{display:flex;flex-direction:column;height:100%;min-height:230px;padding:clamp(20px,2.2vw,30px);position:relative;transition:background .5s var(--e-out)}
.qx a:hover{background:var(--ink-2)}
.qx b{font-family:var(--serif-d);font-weight:400;font-size:clamp(40px,3.6vw,62px);line-height:.95;letter-spacing:-.02em;color:var(--brass-hi);font-variant-numeric:lining-nums}
.qx span{margin-top:16px;font-size:14.5px;line-height:1.45;color:var(--ivory-2)}
.qx em{margin-top:auto;padding-top:16px;font-style:normal;color:var(--mute);transition:color .4s,transform .5s var(--e-out)}
.qx a:hover em{color:var(--brass-hi);transform:translateX(6px)}
.qx__foot{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px}
.qx__foot span{font:500 9.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* Outcomes: three wins, each with its figure first. */
.out__c:not(.out__c--key) .out__big b{font-size:clamp(50px,5vw,88px);line-height:.9;color:var(--paper-ink)}
.out__c:not(.out__c--key) .out__big span{color:var(--paper-mute)}
.out__c .out__h{margin-top:26px}

/* Engine: the rest of the agents. */
.rooms{grid-template-columns:repeat(3,minmax(0,1fr))}
.rooms__more{margin-top:26px;display:flex;align-items:baseline;gap:14px;max-width:80ch;font-size:15px;color:var(--ivory-2)}
.rooms__more span{font-family:var(--serif-d);font-size:30px;line-height:0;color:var(--brass)}
.roster ul li.roster__more{font:italic 400 14px/1.4 var(--serif);color:var(--brass-lo);border-bottom:0}
.roster__n2{margin-top:22px;font:500 9.5px/1.8 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-mute)}

/* Packet: what it found, against what it cost. */
.worth{margin-top:clamp(40px,5vw,70px)}
.worth__g{margin-top:16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--paper-hair);border:1px solid var(--paper-hair)}
.worth__g div{background:var(--paper);padding:clamp(18px,2vw,28px)}
.worth__g b{display:block;font-family:var(--serif-d);font-weight:400;font-size:clamp(30px,3vw,50px);line-height:1;color:var(--paper-ink);font-variant-numeric:lining-nums}
.worth__g div:first-child b{color:var(--brass-lo)}
.worth__g span{display:block;margin-top:10px;font:500 9.5px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-mute)}

@media (max-width:1100px){
  .md{grid-template-columns:1fr}
  .md__r{position:static}
  .mx,.qx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mbook__h h2,.mbook__h .body{grid-column:1/13}
  .mbook__h .body{margin-top:24px}
  .rooms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .worth__g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .fu__track{height:640vh}
  .fu__hud{left:max(var(--gut),env(safe-area-inset-left));right:auto;top:calc(88px + env(safe-area-inset-top));gap:18px}
  .fu__hud p{align-items:flex-start}
  .fu__hud b{font-size:20px}
  .fu__axis--y{display:none}
  .fu__stage::after{background:linear-gradient(0deg,rgba(var(--gr),.92) 0%,rgba(var(--gr),.5) 42%,transparent 64%)}
  .md__cv{aspect-ratio:4/5}
  .md__cv--html{aspect-ratio:auto;padding:14px}
  .md__coll{grid-template-columns:1fr}
  .vo__h{display:none}
  .vo li{grid-template-columns:24px minmax(0,1fr);gap:6px 10px}
  .vo__c,.vo__v{grid-column:2}
  .vo__c::before{content:"Costs "}.vo__v::before{content:"Protects "}
  .vo__r{grid-column:2}
  .ex5__h{display:none}
  .ex5 li{grid-template-columns:1fr 1fr}
  .ex5 b{grid-column:1/-1}
  .lv{grid-template-columns:1fr}
  .rt__n{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rt__l li{grid-template-columns:1fr}
  .rt__l b{justify-self:start}
  .fd li{grid-template-columns:1fr;gap:6px}
  .mg th,.mg td{padding:9px 2px;font-size:11px}
  .mg tbody th{font-size:8px;letter-spacing:.08em;width:70px}
  .mg__ev span{left:calc(74px + (100% - 74px) * var(--a));width:calc((100% - 74px) * var(--b))}
  .mg__ev p{left:0;top:14px}
  .mg__k{grid-template-columns:1fr}
}
@media (max-width:640px){
  .mx,.qx,.rooms,.worth__g{grid-template-columns:1fr}
  .qx a,.mx a{min-height:0}
}

/* Five pages in the header: tighten, then hand over to the menu sooner. */
.hd__a{white-space:nowrap}
@media (max-width:1320px){.hd__nav{gap:20px}.hd__a{letter-spacing:.16em}.hd__mark{letter-spacing:.28em}}
@media (max-width:1120px){.hd__nav,.hd__cta{display:none}.hd__menu{display:inline-flex}}

.fu__h1{font-size:clamp(50px,6.6vw,118px)}
@media (max-height:760px) and (min-width:761px){.fu__h1{font-size:clamp(46px,5.4vw,92px)}.fu__lede{font-size:18px}}

/* Environment: the whole room is the storm. The scene is pinned behind the
   page, the glass with its rain is pinned in front, and the findings pass
   between them on frosted cards. */
.room--storm{background:#0D1626}
.room--storm .room__bar{background:rgba(9,16,28,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.st__bg{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:0;overflow:hidden;pointer-events:none}
.st__bg.no-gl{background:radial-gradient(80% 70% at 50% 20%,#1D2D47,#0D1626 70%)}
.st__cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.st__vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 50%,rgba(6,11,20,.62)),linear-gradient(0deg,rgba(7,13,24,.5),transparent 30%)}
.st__front{position:sticky;bottom:0;height:100svh;margin-top:-100svh;z-index:3;pointer-events:none;overflow:hidden}
.st__glass{position:absolute;inset:0;width:100%;height:100%;display:block}
.st__flash{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 25%,rgba(214,222,255,.95),rgba(150,168,230,.25));opacity:0;mix-blend-mode:screen}
.st__fg{position:relative;z-index:1;cursor:crosshair}
.st__sec{min-height:96svh;display:flex;align-items:center;padding-block:12svh}
.st__sec--hero{min-height:calc(100svh - 70px);align-items:flex-end;padding-block:0 10svh}
.st__sec--end{min-height:110svh}
.st__card{position:relative;width:100%;max-width:560px;padding:clamp(22px,2.6vw,36px);cursor:auto;background:rgba(9,16,28,.5);-webkit-backdrop-filter:blur(16px) saturate(125%);backdrop-filter:blur(16px) saturate(125%);border:1px solid rgba(var(--lr),.13);box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 calc(var(--flash,0) * 90px) rgba(170,190,255,calc(var(--flash,0) * .3))}
.st__card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:var(--brass)}
.st__card--r{margin-left:auto}
.st__card--hero{max-width:760px;background:rgba(9,16,28,.34)}
.st__card--end{max-width:860px;margin-inline:auto}
.st__tag{margin-top:26px;font:500 9.5px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-2)}
.st__tag b{font-weight:500;color:var(--brass)}
.st__n{font:500 10px/1 var(--mono);letter-spacing:.22em;color:var(--brass)}
.st__h{margin-top:18px;font-family:var(--serif-d);font-weight:400;font-size:clamp(32px,3.4vw,54px);line-height:1;letter-spacing:-.015em;color:var(--ivory)}
.st__p{margin-top:16px;font-size:16px;line-height:1.6;color:var(--ivory-2)}
.st__m{margin-top:22px;padding-top:14px;border-top:1px solid var(--hair-2)}
.st__m dt{font:500 9.5px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.st__m dd{margin-top:6px;font-family:var(--serif-d);font-size:clamp(26px,2.4vw,38px);line-height:1.05;color:var(--brass-hi)}
.st__card .gr{display:inline-block;margin-top:18px}
.st__v{margin-top:16px;font-family:var(--serif);font-size:clamp(20px,1.9vw,28px);line-height:1.4;color:var(--ivory)}
@media (max-width:760px){
  .st__sec{min-height:86svh;padding-block:10svh}
  .st__card{background:rgba(9,16,28,.62)}
}
@media (max-width:760px){.st__sec{align-items:flex-end}.st__sec--hero{align-items:flex-end}}
@media (max-width:640px){.room__ex{display:none}}

/* ------------------------------------------------ 27. THE NEW ROOMS -------- */

/* Covenant: two scores written out, and a thousand tenants. */
.cvn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:clamp(30px,4vw,54px);background:var(--hair);border:1px solid var(--hair)}
.cvn__sc{background:var(--ink-2);padding:clamp(18px,2.2vw,30px)}
.cvn__sc .lbl span{display:block;margin-top:6px;color:var(--mute);letter-spacing:.14em}
.cvn__f{margin-top:18px;border-top:1px solid var(--hair)}
.cvn__f li{display:grid;grid-template-columns:80px 60px minmax(0,1fr);gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--hair);opacity:0;transform:translateX(-8px);transition:opacity .6s var(--e-out),transform .6s var(--e-out);transition-delay:var(--d)}
.cvn__sc.is-on .cvn__f li{opacity:1;transform:none}
.cvn__w{font:500 12px/1 var(--mono);color:var(--mute);text-align:right}
.cvn__f b{font:500 15px/1 var(--mono);color:var(--brass-hi)}
.cvn__f em{font-style:normal;font-size:13.5px;color:var(--ivory-2)}
.cvn__c{margin-top:10px;font:500 12px/1 var(--mono);color:var(--mute)}
.cvn__g{position:relative;height:8px;margin-top:22px;background:rgba(var(--lr),.12)}
.cvn__g span{position:absolute;top:0;bottom:0}
.cvn__g .r{background:rgba(224,138,130,.45)}.cvn__g .a{background:rgba(180,195,218,.45)}
.cvn__g i{position:absolute;left:var(--x);top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--ivory)}
.cvn__z{display:flex;align-items:baseline;gap:14px;margin-top:16px}
.cvn__z b{font-family:var(--serif-d);font-weight:400;font-size:clamp(40px,4vw,64px);line-height:1;color:var(--ivory);font-variant-numeric:tabular-nums}
.cvn__z span{font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.cvn__k{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(20px,3vw,48px);align-items:center;margin-top:clamp(30px,4vw,54px);padding:clamp(18px,2.2vw,30px);border:1px solid var(--hair)}
.cvn__big{margin-top:14px}
.cvn__big b{display:block;font-family:var(--serif-d);font-weight:400;font-size:clamp(64px,7vw,120px);line-height:.9;color:#E08A82;font-variant-numeric:tabular-nums}
.cvn__big span{display:block;margin-top:12px;font-size:16px;color:var(--ivory-2)}
.cvn__big em{font-style:normal;color:var(--ivory)}
.cvn__yrs{display:flex;gap:6px;margin-top:20px}
.cvn__yrs button{padding:9px 14px;border:1px solid var(--hair-2);font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--ivory-2)}
.cvn__yrs button[aria-pressed="true"]{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.cvn__n{margin-top:18px;font-size:13.5px;color:var(--mute)}
.cvn__grid{display:grid;grid-template-columns:repeat(40,1fr);gap:3px}
.cvn__grid i{aspect-ratio:1;background:rgba(var(--lr),.14);transition:background .35s}
.cvn__grid i.x{background:#E08A82}

/* Orbit: the yard from above. */
.ob{margin-top:clamp(30px,4vw,54px);border:1px solid var(--hair);background:var(--ink-2)}
.ob__view{position:relative}
.ob__cv{display:block;width:100%;height:auto;aspect-ratio:12/7}
.ob__hud{position:absolute;top:12px;z-index:2;padding:7px 10px;background:rgba(9,16,28,.78);font:500 10px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-2)}
.ob__hud b{font-weight:500;color:var(--brass-hi)}
.ob__hud--l{left:12px}.ob__hud--r{right:12px}
.ob__sw{position:absolute;right:12px;bottom:12px;display:flex;gap:4px}
.ob__sw button{padding:7px 12px;background:rgba(9,16,28,.8);border:1px solid var(--hair-2);font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-2)}
.ob__sw button[aria-pressed="true"]{background:var(--ivory);color:var(--ink)}
.ob__bar{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto 42px;gap:8px 14px;align-items:center;padding:14px 16px;border-top:1px solid var(--hair)}
.ob__play{grid-row:1/3;width:40px;height:40px;border:1px solid var(--hair-2);font-size:12px;color:var(--ivory)}
.ob__bar input{width:100%;accent-color:#B4C3DA}
.ob__tl{display:block;width:100%;height:42px}

/* Lease reader: the page, and what each clause is worth. */
.ls{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1px;margin-top:clamp(30px,4vw,54px);background:var(--hair);border:1px solid var(--hair)}
.ls__doc{background:var(--paper);color:var(--paper-ink);padding:clamp(22px,3vw,44px);max-height:640px;overflow-y:auto;overscroll-behavior:contain}
.ls__t{font-family:var(--serif-d);font-size:30px;line-height:1.1;text-align:center;margin-bottom:24px}
.ls__t span{display:block;margin-top:8px;font:500 9px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-mute)}
.ls__cl{position:relative;padding:14px 16px;margin:0 -16px;cursor:pointer;transition:background .5s}
.ls__cl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background .5s}
.ls__cl.is-on{background:rgba(180,195,218,.18)}
.ls__cl.is-on::before{background:var(--brass-lo)}
.ls__cl.is-read .ls__x{color:var(--paper-mute)}
.ls__h{font:500 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2ink)}
.ls__h b{font-weight:600;color:var(--brass-lo);margin-right:6px}
.ls__x{margin-top:6px;font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--paper-ink);transition:color .6s}
.ls__cl.is-on .ls__x{background:linear-gradient(90deg,rgba(180,195,218,.35),rgba(180,195,218,.35)) no-repeat 0 100%/0% 2px;animation:lsread 2.1s linear forwards}
@keyframes lsread{to{background-size:100% 2px}}
.ls__out{background:var(--ink-2);padding:clamp(16px,2vw,26px);max-height:640px;overflow-y:auto;overscroll-behavior:contain}
.ls__o{padding:14px 0;border-bottom:1px solid var(--hair);opacity:.12;transition:opacity .7s var(--e-out)}
.ls__o.is-on{opacity:1}
.ls__on{font:500 9.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.ls__of{margin-top:6px;font-family:var(--serif-d);font-size:clamp(24px,2.2vw,32px);line-height:1.05;color:var(--brass-hi)}
.ls__om{margin-top:6px;font-size:14px;color:var(--ivory-2)}
.ls__o .gr{display:inline-block;margin-top:10px}
.ls__dl{margin-top:clamp(30px,4vw,54px);padding:clamp(18px,2.2vw,30px);border:1px solid var(--hair);opacity:.25;transition:opacity 1s}
.ls__dl.is-on{opacity:1}
.ls__wf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,30px);height:260px;margin-top:22px;align-items:end}
.ls__wf div{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.ls__wf i{position:absolute;left:0;right:0;bottom:calc(var(--o,0%) * .78 + 56px);height:calc(var(--h) * .78);background:var(--ivory);opacity:.85}
.ls__wf .neg i{background:#E08A82}
.ls__wf .tot i{background:var(--brass)}
.ls__wf b{position:absolute;left:0;bottom:calc((var(--o,0%) + var(--h)) * .78 + 62px);font:600 12px/1 var(--mono);color:var(--ivory)}
.ls__wf .neg b{color:#E08A82}
.ls__wf span{font:500 9.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);min-height:44px}

/* Deal clock: seven years on one dial. */
.dc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:center;margin-top:clamp(30px,4vw,54px)}
.dc__face{position:relative;aspect-ratio:1;max-width:640px;width:100%;margin:0 auto}
.dc__cv{position:absolute;inset:0;width:100%;height:100%}
.dc__mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.dc__mid p{font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.dc__mid b{display:block;margin-top:8px;font-family:var(--serif-d);font-weight:400;font-size:clamp(40px,4.4vw,70px);line-height:1;color:#E08A82}
.dc__mid span{display:block;margin-top:6px;font:500 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.dc__list li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid var(--hair);opacity:.3;cursor:pointer;transition:opacity .6s}
.dc__list li.is-seen{opacity:.7}
.dc__list li.is-on{opacity:1}
.dc__i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#E08A82;color:var(--ink);font:700 11px/1 var(--mono)}
.dc__h{font-family:var(--serif);font-size:18px;line-height:1.35;color:var(--ivory)}
.dc__c,.dc__a{margin-top:8px;font-size:14px;color:var(--ivory-2)}
.dc__c b,.dc__a b{display:block;font:500 9px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.dc__c{color:#E8A49D}

/* The prosecution: attacks on the Packet, and the log. */
.pr{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1px;margin-top:clamp(30px,4vw,54px);background:var(--hair);border:1px solid var(--hair)}
.pr__field{position:relative;background:var(--ink);min-height:clamp(380px,60vh,640px)}
.pr__cv{position:absolute;inset:0;width:100%;height:100%}
.pr__side{background:var(--ink-2);padding:clamp(16px,2vw,24px);display:flex;flex-direction:column;min-height:0}
.pr__n{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.pr__n div{background:var(--ink-2);padding:12px}
.pr__n dt{font:500 8.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.pr__n dd{margin-top:6px;font-family:var(--serif-d);font-size:clamp(26px,2.4vw,38px);line-height:1;color:var(--ivory);font-variant-numeric:tabular-nums}
.pr__n .m dd{color:var(--brass-hi)}.pr__n .g dd{color:#E08A82}
.pr__log{margin-top:14px;flex:1;overflow:hidden}
.pr__log li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--hair);opacity:0;transform:translateY(-8px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.pr__log li.on{opacity:1;transform:none}
.pr__log p{font-size:14px;color:var(--ivory)}
.pr__log p span{display:block;font:500 8.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pr__log b{font:600 9px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);align-self:start}
.pr--m b{color:var(--brass-hi)}.pr--g b{color:#E08A82}
.pr__log em{grid-column:1/-1;font-style:normal;font-size:13px;color:var(--ivory-2)}

@media (max-width:1100px){
  .cvn,.cvn__k,.ls,.dc,.pr{grid-template-columns:1fr}
  .ls__doc,.ls__out{max-height:420px}
  .pr__log{max-height:520px}
}
@media (max-width:640px){
  .cvn__f li{grid-template-columns:62px 48px minmax(0,1fr);gap:8px}
  .cvn__grid{gap:2px}
  .ls__wf{height:220px}
  .ls__wf span{font-size:8px}
  .pr__n{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ob__hud{font-size:8.5px;max-width:60%}
  .ob__hud--r{top:auto;bottom:52px;right:12px}
}

/* ------------------------------------------- 28. CHAPTERS, EVERY SCENE ------ */

/* The chapter control on every scroll-driven scene: where you are, and
   "Next". Bottom right on a wide screen, below the words on a phone. */
.stg{position:absolute;right:max(var(--gut),env(safe-area-inset-right));bottom:max(8vh,calc(34px + env(safe-area-inset-bottom)));z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.stg__dots{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.stg__dots button{display:flex;flex-direction:row-reverse;align-items:center;gap:12px;min-height:26px;padding:0 2px;color:var(--mute)}
.stg__dots i{display:block;width:7px;height:7px;border-radius:50%;border:1px solid rgba(var(--lr),.45);transition:background .4s,border-color .4s,transform .5s var(--e-out)}
.stg__dots em{font:500 9px/1 var(--mono);font-style:normal;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(6px);transition:opacity .4s,transform .5s var(--e-out)}
.stg__dots button:hover em,.stg__dots button:focus-visible em,.stg__dots button[aria-current="true"] em{opacity:1;transform:none}
.stg__dots button[aria-current="true"]{color:var(--ivory)}
.stg__dots button[aria-current="true"] i{background:var(--brass-hi);border-color:var(--brass-hi);transform:scale(1.25)}
.stg__bar{width:2px;height:120px;background:rgba(var(--lr),.14);position:relative;align-self:flex-end;margin-right:4px}
.stg__bar i{position:absolute;left:0;right:0;top:0;height:calc(var(--p,0) * 100%);background:var(--brass-hi)}
.stg__next{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 18px;border:1px solid var(--hair-2);background:rgba(var(--gr),.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ivory);transition:border-color .4s,background .4s}
.stg__next i{font-style:normal;color:var(--brass-hi);animation:stgnudge 2.4s var(--e-io) infinite}
.stg__next:hover{border-color:var(--brass);background:rgba(var(--gr),.8)}
@keyframes stgnudge{0%,60%,100%{transform:none}30%{transform:translateY(3px)}}
.hd--paper .sc .stg__next{background:rgba(235,238,242,.7);color:var(--paper-ink);border-color:var(--paper-hair)}
.sc .stg__dots button{color:var(--paper-mute)}
.sc .stg__dots button[aria-current="true"]{color:var(--paper-ink)}
.sc .stg__dots i{border-color:rgba(22,33,58,.4)}
.sc .stg__dots button[aria-current="true"] i{background:var(--brass-lo);border-color:var(--brass-lo)}
.globe .stg{z-index:7}

@media (max-width:760px){
  .stg{left:max(var(--gut),env(safe-area-inset-left));right:max(var(--gut),env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
  .stg__dots{flex-direction:row;gap:0}
  .stg__dots button{min-height:36px;min-width:24px;justify-content:center;padding:0}
  .stg__dots em{display:none}
  .stg__bar{width:auto;flex:1;height:2px;margin:0 12px 0 0}
  .stg__bar i{top:0;bottom:0;height:auto;width:calc(var(--p,0) * 100%)}
  .stg__next{min-height:40px;padding:0 16px}
  /* Room for the control under the words. */
  .hud__cap{bottom:calc(60px + env(safe-area-inset-bottom))}
  .asset{bottom:calc(58px + env(safe-area-inset-bottom))}
  .eng__caps,.fu__caps{bottom:calc(64px + env(safe-area-inset-bottom))}
  .pk__lead,.pk__reader,.sc__lead,.sc__caps{bottom:calc(62px + env(safe-area-inset-bottom))}
}

/* Older iPhones (before iOS 15.4) do not know the small-viewport unit. */
@supports not (height:100svh){
  .globe__stage,.bld__stage,.eng__stage,.fu__stage,.pk__stage,.sc__stage{height:100vh}
  .st__bg,.st__front{height:100vh}
  .st__bg{margin-bottom:-100vh}.st__front{margin-top:-100vh}
}

/* When a scene cannot draw (no WebGL, or the phone ran out of memory), its
   words still read in order: the long scroll collapses and every caption
   stands on its own. */
.fu.no-gl .fu__track,.eng.no-gl .eng__track{height:auto}
.fu.no-gl .fu__stage,.eng.no-gl .eng__stage{position:relative;height:auto;min-height:0;padding-block:calc(120px + env(safe-area-inset-top)) 60px}
.fu.no-gl .fu__caps,.eng.no-gl .eng__caps{position:relative;bottom:auto}
.fu.no-gl .fu__cap,.eng.no-gl .eng__cap{position:relative;left:auto;bottom:auto;opacity:1!important;visibility:visible!important;transform:none!important;padding-inline:0;margin-top:48px}
.fu.no-gl .fu__hud,.fu.no-gl .fu__axis,.fu.no-gl .stg,.eng.no-gl .stg,.eng.no-gl .eng__stats,.fu.no-gl .fu__tick,.fu.no-gl .fu__yr{display:none}
@media (max-width:760px){
  .hud__scale{top:calc(128px + env(safe-area-inset-top));bottom:auto}
  .hud__credit{top:calc(158px + env(safe-area-inset-top));bottom:auto;max-width:14ch;text-align:right}
  .fu__ex{top:calc(160px + env(safe-area-inset-top));bottom:auto;left:max(var(--gut),env(safe-area-inset-left));right:auto;font-size:8px}
}

/* Screen-size fixes found on phones, iPads and small laptops. */
.sc__lede{color:var(--paper-2ink)}
@media (min-width:761px){
  /* Leave the bottom-right corner to the chapter control. */
  .globe__foot{justify-content:flex-start;gap:24px 40px;max-width:calc(100% - 150px)}
  .fu__cap,.eng__cap{max-width:min(580px,calc(100% - 2*var(--gut) - 170px))}
}
/* Short phones (iPhone SE, mini, any phone in a browser with its bars
   showing): the opening words must fit under the header. */
@media (max-width:760px) and (max-height:760px){
  .globe__t{font-size:clamp(38px,11vw,46px)}
  .globe__sub{margin-top:18px;font-size:16px;line-height:1.45}
  .globe__foot{margin-top:22px;padding-top:16px}
  .globe__cue{display:none}
  .globe__txt .lbl{display:none}
  .fu__h1,.eng__h1,.pk__h1,.sc__h1{font-size:clamp(38px,11vw,46px)}
  .fu__lede,.eng__lede,.pk__lede,.sc__lede{margin-top:16px;font-size:16px;line-height:1.45}
  .fu__cap .eng__cue,.eng__cap .eng__cue{display:none}
}
/* Landscape phones: very little height, so the scenes' words shrink hard. */
@media (max-height:500px) and (orientation:landscape){
  .globe__t,.fu__h1,.eng__h1,.pk__h1,.sc__h1{font-size:34px}
  .globe__sub,.fu__lede,.eng__lede,.pk__lede,.sc__lede{font-size:14px;margin-top:10px}
  .globe__foot,.globe__cue,.eng__cue,.fu__hud,.eng__stats{display:none}
  .fu__t,.eng__t{font-size:30px}.fu__p,.eng__p{font-size:14px;margin-top:10px}
}

.eng__rooms{display:none}
@media (max-width:760px){
  .eng__rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:16px;pointer-events:auto}
  .eng__rooms button{display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:40px;padding:0 10px;border:1px solid var(--hair-2);background:rgba(var(--gr),.7);font:500 9px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ivory);text-align:left}
  .eng__rooms em{font-style:normal;color:var(--brass-hi)}
}

.dc__legend{display:none}
@media (max-width:760px){.dc__legend{display:block;margin-top:-6px;text-align:center;font:500 9px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}}


/* ==========================================================================
   DAYLIGHT · October 2026
   Smooth, and trustworthy: one family of blues in soft steps, the colours
   of a navy suit and a white shirt. Navy ink on a soft white for reading;
   deep navy for the statements, the Engine and the foot of every page;
   slate and steel in between. A muted burgundy appears only where money
   is lost. No gold and no black: gold is what software thinks wealth looks
   like, and pure black on white is harsh to read.

   Research in RESEARCH.md: dark type on a light ground is read better and
   believed more (Piepenbrock 2013; Reber & Schwarz 1999); blue is read as
   competence and trust (Labrecque & Milne 2012); white space as prestige
   (Pracejus et al. 2006).
   ========================================================================== */
:root{
  --ink:#F5F6F8;          /* the ground: soft white */
  --ink-2:#EDEFF3;
  --ink-3:#E2E6EC;
  --ivory:#16213A;        /* type: navy ink */
  --ivory-2:#4A566C;      /* slate */
  --mute:#7D889A;         /* steel */
  --brass:#23426E;        /* the one accent: navy */
  --brass-hi:#23426E;
  --brass-lo:#B4BFCE;     /* steel line */
  --hair:rgba(22,33,58,.1);
  --hair-2:rgba(22,33,58,.2);
  --lr:22,33,58;
  --gr:245,246,248;
  --loss:#8E3B3F;         /* muted burgundy: money lost, nothing else */
  --gain:#2E6A57;

  --paper:#EBEEF2;        /* the second ground: a blue-grey mist */
  --paper-2:#E1E6EC;
  --paper-ink:#16213A;
  --paper-2ink:#4A566C;
  --paper-mute:#7D889A;
  --paper-hair:rgba(22,33,58,.1);

  --serif:"Caslon",Georgia,"Times New Roman",serif;
  --sans:"Plex",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Plex",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --code:"Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
/* The dark scope: deep navy. */
.is-dark,.room,.ft,.hd.hd--dark,.out__c--key,.axes__q:first-child{
  --ink:#111D31;--ink-2:#16243B;--ink-3:#1D2D47;
  --ivory:#F2F4F7;--ivory-2:#B8C1CF;--mute:#8591A5;
  --brass:#B4C3DA;--brass-hi:#FFFFFF;--brass-lo:#50637F;
  --hair:rgba(242,244,247,.1);--hair-2:rgba(242,244,247,.2);
  --lr:242,244,247;--gr:17,29,49;
  --loss:#E08A82;--gain:#9CC7B4;
  color-scheme:dark;
}
/* With the menu open the header sits on the light menu again. */
.is-open .hd.hd--dark{
  --ink:#F5F6F8;--ink-2:#EDEFF3;--ink-3:#E2E6EC;
  --ivory:#16213A;--ivory-2:#4A566C;--mute:#7D889A;
  --brass:#23426E;--brass-hi:#23426E;--brass-lo:#B4BFCE;
  --hair:rgba(22,33,58,.1);--hair-2:rgba(22,33,58,.2);--lr:22,33,58;--gr:245,246,248;
}
html,body{background:var(--ink)}
body{font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.62;letter-spacing:0;color:var(--ivory)}
::selection{background:rgba(35,66,110,.16);color:var(--ivory)}
.grain{display:none}
.night{background:var(--ink);color:var(--ivory)}
.is-dark.night,.is-dark{background:var(--ink);color:var(--ivory)}

/* Reading type. */
.lede{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.6vw,25px);line-height:1.5;letter-spacing:0}
.body{font-size:clamp(17px,1.15vw,19px);line-height:1.65}
.d1{line-height:.95;letter-spacing:-.018em}
.d2{line-height:1;letter-spacing:-.014em}
.d1 i,.d2 i,.d3 i,.d4 i,.quote i,.paper .d1 i,.paper .d2 i,.paper .d3 i,.paper .d4 i{color:inherit}

/* Labels: small capitals, not a typewriter. */
.lbl,.mark{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em}
.mark{gap:16px}
.mark b{font-family:var(--serif);font-weight:700;font-size:13px;letter-spacing:.04em}

/* Controls: ink, solid, quiet. A gold underline on hover. */
.cta{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.12em;border-color:var(--ivory);color:var(--ivory)}
.cta::before{background:var(--ivory)}
.cta:hover{color:var(--ink);border-color:var(--ivory)}
.cta--solid{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.cta--solid::before{background:var(--brass-hi)}
.cta--solid:hover{color:#fff}
.paper .cta{border-color:var(--paper-ink)}
.ln{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.1em}

/* Header: ink on paper; a paper veil once you scroll. */
.hd.is-solid{background:rgba(var(--gr),.86);-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);border-bottom:1px solid var(--hair)}
.hd__mark{color:var(--ivory)}
.hd__a{font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.12em;color:var(--ivory-2)}
.hd__a:hover,.hd__a[aria-current="page"]{color:var(--ivory)}
.hd__a::after{background:var(--brass)}
.hd__menu{font-family:var(--sans);font-weight:600;letter-spacing:.12em}
.menu{background:var(--ink)}
.menu__f{font-family:var(--sans)}

/* Figures keep their columns. */
.inst__v,.bridge dd,.ledger dd,.out__big b,.qx b,.md__a b,.big dt{font-variant-numeric:lining-nums tabular-nums}
.bridge .neg dd,.loss{color:var(--loss)}

/* Footer: the one dark band every page ends on. */
.ft{background:var(--ink);color:var(--ivory)}
.room{background:var(--ink);color:var(--ivory)}

/* ------------------------------------------- 29. THE FIRM, IN DAYLIGHT ------ */

/* The opening. A statement on the page, and the example's price struck
   through beside it: the second price, before the first word is read. */
.hero{position:relative;padding:calc(150px + env(safe-area-inset-top)) 0 clamp(60px,8vw,110px);background:var(--ink);overflow:hidden}

.hero__g{display:grid;grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);gap:clamp(30px,5vw,90px);align-items:end}
.hero__h{margin-top:30px;font-size:clamp(52px,8.2vw,150px);line-height:.94;will-change:transform}
.hero__h i{color:inherit}
.hero__p{margin-top:34px;max-width:40ch}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;margin-top:40px}
.hero__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(70px,9vw,130px);border-top:1px solid var(--ivory)}
.hero__facts li{padding:22px 20px 0 0;font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--ivory-2)}
.hero__facts li+li{padding-left:20px;border-left:1px solid var(--hair)}
.hero__facts b{display:block;margin-bottom:8px;font-family:var(--serif-d);font-weight:400;font-size:clamp(26px,2.4vw,38px);line-height:1;color:var(--ivory)}

/* The gold underline that draws itself under "second price". */

/* The price tag. */
.tag{position:relative;padding:clamp(24px,2.6vw,38px);background:#FFFFFF;border:1px solid var(--hair);box-shadow:0 30px 60px -30px rgba(22,33,58,.22),0 2px 0 rgba(22,33,58,.04);will-change:transform}
.tag::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--ivory)}
.tag__a{margin-top:22px;display:flex;flex-direction:column;gap:6px}
.tag__a small,.tag__b small{font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.tag__a span{position:relative;display:inline-block;align-self:flex-start;font-family:var(--serif-d);font-size:clamp(34px,3.2vw,52px);line-height:1;color:var(--ivory-2)}
.tag__a s{text-decoration:none}
.tag__a span::after{content:"";position:absolute;left:-4px;right:-4px;top:54%;height:1.5px;background:var(--ivory);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--e-io)}
.tag.is-struck .tag__a span::after{transform:none}
html:not(.js) .tag__a span::after{transform:none}
.tag__b{margin-top:26px;padding-top:22px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:8px;opacity:.12;transform:translateY(10px);transition:opacity 1s var(--e-out) .7s,transform 1.2s var(--e-out) .7s}
.tag.is-struck .tag__b{opacity:1;transform:none}
html:not(.js) .tag__b{opacity:1;transform:none}
.tag__b b{font-family:var(--serif-d);font-weight:400;font-size:clamp(46px,4.6vw,76px);line-height:.95;letter-spacing:-.02em;color:var(--ivory);font-variant-numeric:lining-nums}
.tag__n{margin-top:22px;font-size:15px;line-height:1.5;color:var(--ivory-2)}
.tag__n b{color:var(--brass);font-weight:700}

/* The dark statement keeps its old sequence styling, in navy. */
#order .seq__r{border-color:var(--hair)}

/* The example, taken apart: the findings on the left, the ledger pinned
   on the right, its total counting down as each one lands. */
.story{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(30px,6vw,110px);margin-top:clamp(60px,8vw,110px);align-items:start}
.st2{min-height:72vh;padding:12vh 0;opacity:.28;transition:opacity .9s var(--e-out)}
.st2:first-child{padding-top:0}
.st2:last-child{min-height:0;padding-bottom:4vh}
.st2.is-on,.st2.is-past{opacity:1}
html:not(.js) .st2{opacity:1}
.st2__k{font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.st2__h{margin-top:18px;font-family:var(--serif-d);font-weight:400;font-size:clamp(34px,3.4vw,58px);line-height:1;letter-spacing:-.015em;color:var(--ivory);max-width:16ch}
.st2__p{margin-top:22px;max-width:46ch;font-size:clamp(17px,1.2vw,19.5px);line-height:1.65;color:var(--ivory-2)}
.st2__m{margin-top:26px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;padding-top:18px;border-top:1px solid var(--hair);max-width:46ch}
.st2__m span{flex-basis:100%;font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.st2__m b{font-family:var(--serif-d);font-weight:400;font-size:clamp(30px,2.6vw,42px);line-height:1;color:var(--ivory)}
.st2__m b.loss{color:var(--loss)}
.st2__f{margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ivory);max-width:560px}
.st2__f div{padding:16px 14px 0 0}
.st2__f div+div{padding-left:14px;border-left:1px solid var(--hair)}
.st2__f dt{font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.st2__f dd{margin-top:8px;font-family:var(--serif-d);font-size:clamp(20px,1.7vw,27px);line-height:1.1;color:var(--ivory);font-variant-numeric:lining-nums}

.lg{position:sticky;top:calc(110px + env(safe-area-inset-top));padding:clamp(24px,2.6vw,38px);background:#FFFFFF;border:1px solid var(--hair);box-shadow:0 40px 80px -40px rgba(22,33,58,.25)}
.lg::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--ivory)}
.lg__lines{margin-top:18px;border-top:1px solid var(--hair)}
.lg__l{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair);opacity:.18;transform:translateX(-8px);transition:opacity .8s var(--e-out),transform .9s var(--e-out)}
.lg__l.on{opacity:1;transform:none}
.lg__l dt{font-size:16px;color:var(--ivory)}
.lg__l dd{font-family:var(--sans);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ivory)}
.lg__l--neg dd{color:var(--brass)}
.lg__l--ref dd{color:var(--mute);font-weight:500;text-decoration:line-through}
.lg__t{margin-top:26px;display:flex;flex-direction:column;gap:8px}
.lg__t small{font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.lg__t b{font-family:var(--serif-d);font-weight:400;font-size:clamp(46px,4.4vw,74px);line-height:.95;letter-spacing:-.02em;color:var(--ivory);font-variant-numeric:lining-nums tabular-nums}
.lg__d{min-height:1.5em;margin-top:12px;font:600 13px/1.5 var(--sans);color:var(--brass);opacity:0;transition:opacity .6s}
.lg.has-diff .lg__d{opacity:1}
.lg.is-done{border-color:var(--brass-lo)}
.lg.is-done::before{background:var(--brass)}

/* What it does for you. */
.yu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:clamp(56px,7vw,96px);background:var(--hair);border:1px solid var(--hair)}
.yu li{display:flex;flex-direction:column;gap:22px;padding:clamp(22px,2.4vw,34px);background:var(--ink)}
.yu span{font:700 13px/1 var(--serif);color:var(--brass)}
.yu p{font-size:16px;line-height:1.6;color:var(--ivory-2)}
.yu b{display:block;margin-bottom:12px;font-family:var(--serif-d);font-weight:400;font-size:clamp(23px,1.9vw,30px);line-height:1.12;color:var(--ivory)}

/* From the principal. */
.pn{max-width:900px;margin:clamp(40px,5vw,72px) auto 0}
.pn__q p{font-family:var(--serif);font-size:clamp(22px,2.1vw,32px);line-height:1.45;color:var(--ivory)}
.pn__q p+p{margin-top:1em}
.pn__q p:first-child::first-letter{float:left;font-family:var(--serif-d);font-size:3.4em;line-height:.82;padding:.06em .1em 0 0;color:var(--ivory)}
.pn__s{margin-top:44px;display:flex;flex-direction:column;gap:8px;padding-top:24px;border-top:1px solid var(--hair);max-width:380px}
.pn__sig{font-family:var(--serif);font-style:italic;font-size:clamp(30px,2.6vw,40px);line-height:1;color:var(--ivory)}
.pn__s small{font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* The Standard on the home page now sits on stone. */
#standard .std{border-color:var(--paper-hair)}

@media (max-width:1100px){
  .hero__g{grid-template-columns:1fr}
  .tag{max-width:520px}
  .story{grid-template-columns:1fr}
  .lg{position:sticky;top:calc(76px + env(safe-area-inset-top));z-index:4;order:-1;padding:14px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4px 16px}
  .lg>.lbl,.lg__lines{display:none}
  .lg__t{margin-top:0;gap:4px}
  .lg__t b{font-size:clamp(30px,7vw,44px)}
  .lg__d{margin-top:0;align-self:end;text-align:right;font-size:12px}
  .st2{min-height:60vh;padding:8vh 0}
  .yu{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__facts li:nth-child(3){padding-left:0;border-left:0}
  .hero__facts li:nth-child(n+3){margin-top:22px}
}
@media (max-width:640px){
  .hero{padding-top:calc(118px + env(safe-area-inset-top))}
  .hero__h{font-size:clamp(46px,13vw,64px)}
  .yu{grid-template-columns:1fr}
  .st2__f{grid-template-columns:1fr}
  .st2__f div+div{padding-left:0;border-left:0;border-top:1px solid var(--hair)}
}

/* Evidence grades, wherever they appear. */
.gr{display:inline-block;padding:4px 9px;border:1px solid var(--hair-2);font:600 10px/1.2 var(--sans);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-2);vertical-align:2px;white-space:nowrap}
.gr--a{color:#2E6A57;border-color:rgba(46,106,87,.38)}
.gr--b{color:var(--ivory);border-color:var(--hair-2)}
.gr--c{color:#23426E;border-color:rgba(35,66,110,.4)}
.gr--d{color:#8E3B3F;border-color:rgba(142,59,63,.4)}
.is-dark .gr--a,.room .gr--a{color:#9CC7B4;border-color:rgba(156,199,180,.38)}
.is-dark .gr--c,.room .gr--c{color:#B4C3DA;border-color:rgba(180,195,218,.38)}
.is-dark .gr--d,.room .gr--d{color:#E08A82;border-color:rgba(224,138,130,.38)}

/* The close control on every full-screen room. */
.dos__x{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:0 4px 0 16px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ivory)}
.dos__x i{position:relative;width:22px;height:22px}
.dos__x i::before,.dos__x i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ivory);transform:rotate(45deg)}
.dos__x i::after{transform:rotate(-45deg)}

.hero__h{font-size:clamp(50px,6.4vw,118px)}

/* ==========================================================================
   30. SMOOTH · the header changes tone over the navy sections, slowly
   ========================================================================== */
.hd,.hd__mark,.hd__a,.hd__menu,.hd__cta{transition:color .6s var(--e-out),background-color .6s var(--e-out),border-color .6s var(--e-out),transform .7s var(--e-out)}
.hd.hd--dark:not(.is-solid) .hd__cta{color:var(--ivory);border-color:var(--hair-2)}
.eng.is-dark,.pk.is-dark,.fu.is-dark{background:var(--ink)}
.fu.is-dark{background:var(--ink)}

/* ==========================================================================
   31. THE ENGINE · POWER
   ========================================================================== */
.pw__map{margin-top:clamp(30px,4vw,54px);color:var(--brass-lo)}
.pw__map svg{display:block;width:100%;height:auto;overflow:visible}
.pw__bld{fill:var(--ink-3);stroke:var(--ivory-2);stroke-width:1.2}
.pw__roof{fill:none;stroke:var(--ivory-2);stroke-width:1.2}
.pw__t{font:600 13px var(--sans);letter-spacing:.14em;fill:var(--ivory-2)}
.pw__t--m{fill:var(--mute)}
.pw__cable{fill:none;stroke:var(--hair-2);stroke-width:2}
.pw__flow{fill:none;stroke:var(--brass);stroke-width:2;stroke-dasharray:6 14;opacity:0;transition:opacity 1.2s var(--e-out)}
.pw__map.is-on .pw__flow{opacity:1;animation:pwflow 1.8s linear infinite}
@keyframes pwflow{to{stroke-dashoffset:40}}
.pw__sub rect.pw__subo,.pw__sub circle{fill:none;stroke:var(--loss);stroke-width:1.4}
.pw__fc{display:none}
.pw__cap{margin-top:clamp(30px,4vw,54px)}
.pw__hd{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.pw__re{background:none;border:0;border-bottom:1px solid var(--hair-2);color:var(--ivory-2);cursor:pointer;padding:6px 0;min-height:44px;white-space:nowrap}
.pw__re:hover{color:var(--ivory)}
.pw__bar{position:relative;height:64px;margin-top:62px;background:var(--ink-2);border:1px solid var(--hair)}
.pw__s{position:absolute;top:0;bottom:0;left:var(--x);width:var(--w);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--e-out) var(--d);box-shadow:inset -1px 0 0 var(--ink)}
.pw__cap.is-on .pw__s{transform:none}
.pw__s--used{background:rgba(var(--lr),.14)}
.pw__s--q{background:var(--brass-lo)}
.pw__s--over{background:repeating-linear-gradient(45deg,rgba(224,138,130,.55) 0 6px,rgba(224,138,130,.22) 6px 12px)}
.pw__s--ours{background:rgba(var(--lr),.06);outline:1.5px dashed var(--ivory);outline-offset:-1.5px}
.pw__s em{display:none}
.pw__s--used em{display:block;position:absolute;left:16px;top:50%;transform:translateY(-50%);white-space:nowrap;font:600 11px/1 var(--sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory)}
.pw__firm{position:absolute;top:-30px;bottom:-10px;left:var(--x);width:0;border-left:1.5px solid var(--ivory)}
.pw__firm b{position:absolute;bottom:100%;right:0;padding:0 10px 8px 0;white-space:nowrap;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ivory)}
.pw__scale{display:flex;justify-content:space-between;margin-top:12px;font:600 10px/1 var(--sans);letter-spacing:.12em;color:var(--mute)}
.pw__q{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.pw__q li{background:var(--ink-2);padding:16px 18px;display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(8px);transition:opacity .7s var(--e-out),transform .7s var(--e-out)}
.pw__cap.is-on .pw__q li{opacity:1;transform:none}
.pw__q li:nth-child(1){transition-delay:1.05s}.pw__q li:nth-child(2){transition-delay:1.6s}.pw__q li:nth-child(3){transition-delay:2.15s}.pw__q li:nth-child(4){transition-delay:2.7s}.pw__q li:nth-child(5){transition-delay:3.25s}
.pw__q b{font:400 16px/1.3 var(--serif);color:var(--ivory)}
.pw__q li.ours b{font-style:italic}
.pw__q span{font:600 13px/1 var(--sans);color:var(--ivory)}
.pw__q em{font:600 10px/1.3 var(--sans);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.pw__q li:not(.ours) span{color:var(--loss)}
.pw__cap.is-now .pw__s,.pw__cap.is-now .pw__q li{transition:none}
@media (max-width:900px){.pw__q{grid-template-columns:repeat(2,minmax(0,1fr))}.pw__q li.ours{grid-column:1/-1}}
@media (max-width:700px){
  .pw__t{display:none}
  .pw__fc{display:block;margin-top:10px;font:600 10.5px/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
  .pw__s--used em{font-size:9.5px;left:10px}
  .pw__firm b{font-size:9.5px}
  .pw__bar{height:52px}
}

/* ==========================================================================
   32. THE ENGINE · labels that keep apart
   ========================================================================== */
.agl.hid{opacity:0;pointer-events:none}
.agl[data-side*="3"] .agl__c{left:170px}
.agl[data-side^="l"][data-side*="3"] .agl__c{left:auto;right:170px}
.agl[data-side*="3"] .agl__c::before{width:166px}
.agl__c{background:rgba(var(--gr),.84)}
.agl--room .agl__c{padding:9px 14px 10px}
.agl--room .agl__n{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:6px;font-size:18px}
.agl__n em{font:400 17px/1 var(--sans);font-style:normal;color:var(--brass)}
.agl--room:hover .agl__n em,.agl--room:focus-visible .agl__n em{color:var(--brass-hi)}
.agl:not(.agl--room) .agl__c{padding:5px 9px 6px;background:rgba(var(--gr),.62);border-color:var(--hair)}
.agl:not(.agl--room) .agl__n{margin-top:0;font-size:14px;color:var(--ivory-2)}
.agl__dot{background:var(--ivory);box-shadow:0 0 0 4px rgba(180,195,218,.16)}
.agl:not(.agl--room) .agl__dot{width:6px;height:6px;left:-3px;top:-3px;background:var(--ivory-2);box-shadow:none}
.eng__lines{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.eng__lines path{fill:none;stroke:rgba(220,228,240,.38);stroke-width:1;opacity:0;transition:opacity .8s var(--e-out)}
.eng__lines path.on{opacity:1}
.agl[data-side="col"] .agl__c{left:0;right:auto;top:0;transform:none;width:var(--cw,auto);box-sizing:border-box}
.agl[data-side="col"] .agl__c::before{display:none}
.agl[data-side="col"] .agl__dot{left:calc(var(--dx) - 4px);top:calc(var(--dy) - 4px)}
.agl--room .agl__c{min-width:200px}

/* Navy cards inside light sections carry their own type colour. */
.out__c--key,.axes__q:first-child{background:var(--ink);color:var(--ivory)}
/* On the Firm page, costs found are navy: burgundy is kept for the charts. */
.st2__m b.loss{color:var(--brass)}

/* ==========================================================================
   33. NO AI LOOK
   The tics that make a page read as generated, removed: an italic accent
   word in every headline, numbered sections, tracked micro-capitals on
   every label, strips of four statistics, glows, particles and frosted
   glass. What is left is how an established firm sets a page: one voice
   in the headlines, plain labels, solid surfaces, quiet rules.
   ========================================================================== */
h1 i,h2 i,h3 i,.d1 i,.d2 i,.d3 i,.d4 i,.quote i,.rm__h i,.hero__h i,.eng__t i,.fu__t i,.pk__t i,.sc__h1 i,.out__h i,.out__seal i,.st2__h i{font-family:inherit;font-style:normal;font-weight:inherit;color:inherit;letter-spacing:inherit}
.lbl,.mark{font-family:var(--sans);font-weight:600;font-size:13px;line-height:1.4;letter-spacing:.005em;text-transform:none}
.mark b,.mark::after{display:none}
.eng__cue,.eng__stats,.hero__facts{display:none}
.agl__c,.stg__next,.hd.is-solid{-webkit-backdrop-filter:none;backdrop-filter:none}
.agl__c{background:var(--ink)}
.agl:not(.agl--room) .agl__c{background:var(--ink)}
.agl__dot,.agl:not(.agl--room) .agl__dot{box-shadow:none}
.stg__next{background:var(--ink)}
.hd.is-solid{background:var(--ink)}
.tag{box-shadow:0 1px 0 rgba(var(--lr),.04)}
.lg{box-shadow:none}
@media (max-width:640px){
  .lg{grid-template-columns:1fr;gap:2px}
  .lg__d{text-align:left;align-self:start;min-height:0}
}
.st2__k,.st2__m span,.lg__t small,.tag__a small,.tag__b small,.yu__k,.pn__k{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.005em;text-transform:none}
/* Rule lists without numbers: one column. */
.refuse li{grid-template-columns:minmax(0,1fr)}
.story__more{margin-top:clamp(40px,5vw,64px)}
.agl--room .agl__c{max-width:none;white-space:nowrap}
.lg__l--ref dd{text-decoration:none;color:var(--ivory-2)}
.both__q i,.out__r i,.pn__q i{font-style:normal;color:inherit}
.enter__h{font-weight:400}
.tariff dd span{font-family:inherit;font-size:inherit;letter-spacing:0;color:var(--ivory);font-variant-numeric:lining-nums}

/* ==========================================================================
   34. LESS, AND A LETTER · 5 October 2026
   One headline, one sentence, one button. The page's two peaks are the
   opening and the signed letter (Kahneman's peak-end rule); everything
   between them is kept to the strongest points only, because readers
   average a case rather than add it up (Weaver, Garcia & Schwarz 2012).
   ========================================================================== */
.hero{min-height:100svh;display:flex;align-items:center;padding-bottom:clamp(80px,10vw,140px)}
.hero__l{max-width:1100px}
.hero__h{margin-top:0;font-size:clamp(54px,8vw,138px);line-height:.95}
.hero__p{max-width:36ch}

/* Outcomes: three numbers, a line each. */
.out--min .out__c{padding:clamp(28px,3vw,48px)}
.out--min .out__k{font:600 13px/1.4 var(--sans);letter-spacing:.005em;text-transform:none;color:var(--paper-mute)}
.out--min .out__c--key .out__k{color:var(--ivory-2)}
.out--min .out__big{margin-top:clamp(18px,2.4vw,30px)}
.out--min .out__big b,.out--min .out__c:not(.out__c--key) .out__big b{font-size:clamp(56px,5.6vw,96px);line-height:.9;letter-spacing:-.03em}
.out--min .out__p{margin-top:18px;font-size:16px;line-height:1.55;max-width:30ch}
.out__seal{max-width:none}

/* The gate: a headline, a sentence, and the way in. */
#gate .gate__refuse .lede{max-width:34ch}

/* The letter: a sheet of good paper laid on the navy, with a faint fibre,
   a deckled shadow, and the principal's hand at the foot. */
#principal{padding-block:clamp(90px,12vw,170px)}
.letter{position:relative;max-width:820px;margin:0 auto;padding:clamp(30px,6vw,84px) clamp(24px,6vw,92px) clamp(30px,5vw,70px);
  color:#16213A;background-color:#FBFAF7;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .09 0 0 0 0 .13 0 0 0 0 .23 0 0 0 .055 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),linear-gradient(180deg,#FCFBF8,#F6F5F1);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.6),0 14px 30px -14px rgba(0,0,0,.45)}
.letter__hd{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:22px;border-bottom:1px solid rgba(22,33,58,.15)}
.letter__mark{font:15px/1 var(--mark);letter-spacing:.32em;color:#16213A;white-space:nowrap}
.letter__from{font:600 12px/1 var(--sans);color:#7D889A;white-space:nowrap}
.letter__body{margin-top:clamp(28px,4vw,46px)}
.letter__body p{font-family:var(--serif);font-size:clamp(18px,1.45vw,21px);line-height:1.72;color:#24304A;margin:0 0 1.15em}
.letter__body p:last-child{margin-bottom:0;color:#16213A}
.letter__ft{margin-top:clamp(28px,3.4vw,44px)}
.letter__close{font-family:var(--serif);font-size:clamp(18px,1.45vw,21px);color:#24304A}
.letter .sig{display:block;width:min(380px,82%);height:auto;margin:2px 0 -8px -12px;overflow:visible}
.sig__ink path{fill:#16213A}
.sig mask path{fill:none;stroke:#fff;stroke-width:24;stroke-linecap:round;stroke-linejoin:round}
.is-signed .sig mask path{animation:sigdraw var(--d) cubic-bezier(.45,.02,.35,1) var(--t) forwards}
@keyframes sigdraw{to{stroke-dashoffset:0}}
html:not(.js) .sig mask path{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.sig mask path{stroke-dashoffset:0!important;animation:none!important}}
.letter__name{margin-top:6px;font-family:var(--serif);font-size:18px;line-height:1.3;color:#16213A}
.letter__name small{display:block;margin-top:4px;font:600 12px/1.4 var(--sans);color:#7D889A}

/* On a phone: fewer words on screen, more air, nothing that is not needed. */
@media (max-width:700px){
  .hero{min-height:88svh;padding-top:calc(110px + env(safe-area-inset-top))}
  .hero__h{font-size:clamp(46px,12.5vw,62px)}
  .hero__p{font-size:18px;margin-top:26px}
  .hero__cta .ln{display:none}
  .seq__d{display:none}
  .st2__p{font-size:16.5px}
  .out--min .out__p{font-size:15px}
  .out__n{display:none}
  .both__q{font-size:clamp(26px,7.4vw,34px)}
  .letter{padding:30px 22px 30px}
  .letter__hd{flex-direction:column;gap:10px}
  .letter__body p{font-size:17.5px;line-height:1.65}
  .letter .sig{width:88%}
  #gate .enter__p{font-size:15.5px}
}

/* Correspondence: who to write to, in the footer and under the form. */
.ft__mail{margin:0;display:grid;gap:9px}
.ft__mail div{display:grid;grid-template-columns:minmax(0,1fr);gap:1px}
.ft__mail dt{font:600 11px/1.3 var(--sans);color:var(--mute)}
.ft__mail dd{margin:0}
.ft__mail a{color:var(--ivory-2);font-size:14.5px}
.ft__mail a:hover{color:var(--ivory)}
.corr{margin:clamp(40px,5vw,64px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.corr div{padding:18px 20px;background:var(--ink)}
.corr dt{font:600 12px/1.3 var(--sans);color:var(--mute)}
.corr dd{margin:6px 0 0;font-family:var(--serif);font-size:17px}
.corr a{color:var(--ivory)}
.letter__name a{display:block;margin-top:10px;font:500 14px/1.4 var(--sans);color:#35588A}
@media (max-width:700px){.corr{grid-template-columns:1fr}}
.ft__mail a{font-size:13.5px;overflow-wrap:anywhere}
/* The bound Packet sits in daylight: only a soft veil behind the words. */
.pk .pk__stage::after{background:linear-gradient(90deg,rgba(var(--gr),.7),rgba(var(--gr),.25) 30%,transparent 46%)}
@media (max-width:760px){.pk .pk__stage::after{background:linear-gradient(0deg,rgba(var(--gr),.92) 0%,rgba(var(--gr),.6) 30%,transparent 50%)}}
/* The menu label follows the header's tone like everything else in it. */
.hd .hd__menu{color:var(--ivory)}

/* The bound Packet: five parts, so a shorter walk through it. */
.pk__track{height:310vh}
@media (max-width:760px){.pk__track{height:290vh}}