@font-face{font-family:'ArchivoBlack';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/archivo-black.woff2) format('woff2');}@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/archivo-500.woff2) format('woff2');}@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/archivo-600.woff2) format('woff2');}@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/archivo-700.woff2) format('woff2');}@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/archivo-800.woff2) format('woff2');}:root{
 --bg:#212426;--rule:#373A3C;--navy:#3B3E72;--navy2:#4A4E8C;--navy3:#2A2D55;--ice:#EEF3FB;--iceink:#171A1C;--icedim:#4A5160;--icerule:#CBD5E9;--ember:#B8362A;--ember2:#F0A79C;--ink:#FFFFFF;--focus:#8FA0FF;--ok:#4ADE80;--g-deep:#0B0C0D;--g-black:#0D0F10;--g-panel:#2a2d2f;--g-panel2:#2E3238;--g-slate:#2C3340;--g-edge:#3A3F45;--g-mid:#6C6E70;--g-mid2:#6E757E;--g-soft:#9BA2AB;--g-lav:#717998;--g-pale:#C6CBD2;--g-pale2:#C9CED6;--g-paper:#E6EAEF;--g-lilac:#dfe1ee;--g-hair:#d9dadb;--g-near:#111;--g-grey:#555;
 --puck-hi:#FFFFFF;--puck-mid:#FCFDFE;--puck-lo:#E2E7ED;--puck-lo2:#E4E9EF;
 --puck-lo3:#DDE4EC;--puck-lo4:#E6EAEF;--puck-dark1:#4C535B;--puck-dark2:#2A2F35;
 --puck-dark3:#111417;--puck-dark4:#07090A;
 --ink-rgb:255,255,255;
 --fs:1;
 color-scheme:dark;
}
/* Light is the default. It is set on the html element in the markup, so it is
   correct before a single line of script runs and there is no flash. */
html[data-theme="light"]{
 --bg:#FFFFFF;--rule:#D7DEEC;--navy:#3B3E72;--navy2:#4A4E8C;--navy3:#2A2D55;--ice:#F1F5FB;--iceink:#171A1C;--icedim:#4A5160;--icerule:#CBD5E9;--ember:#A62E22;--ember2:#8E2318;--ink:#14171B;--focus:#2F3BA8;--ok:#137A3A;--g-deep:#0B0C0D;--g-black:#0D0F10;--g-panel:#ECF0F7;--g-panel2:#2E3238;--g-slate:#2C3340;--g-edge:#3A3F45;--g-mid:#868FA0;--g-mid2:#6E757E;--g-soft:#9BA2AB;--g-lav:#717998;--g-pale:#C6CBD2;--g-pale2:#C9CED6;--g-paper:#E6EAEF;--g-lilac:#dfe1ee;--g-hair:#2C3138;--g-near:#111;--g-grey:#555;
 --ink-rgb:0,0,0;
 color-scheme:light;
}
/* Text that never had a size of its own inherits 16px from the browser, and a
   multiplier on a declaration it does not have cannot do anything. So the root
   carries the size as well. The site is written in px throughout, so nothing
   is scaled twice. */
html{font-size:calc(16px * var(--fs))}
html[data-size="s"]{--fs:.92}
html[data-size="m"]{--fs:1}
html[data-size="l"]{--fs:1.12}
html[data-size="xl"]{--fs:1.25}

/* More contrast, for anybody who finds the dim text hard going. It lifts the
   ink alpha floor and hardens the hairlines rather than changing the design. */
html[data-contrast="more"]{--rule:#5A5E61}
html[data-theme="light"][data-contrast="more"]{--rule:#98A4BC;--icedim:#FFFFFF}
html[data-contrast="more"] body{--ink-rgb:255,255,255}
html[data-theme="light"][data-contrast="more"] body{--ink-rgb:0,0,0}

/* The light theme needs a handful of things that are not simply a colour. */
/* The url is resolved against the stylesheet, which lives in assets/css, so it
   has to climb out. Getting this wrong shows the alt text instead of the mark. */
html[data-theme="light"] .logo img{content:url(../img/logo-navy.png)}
html[data-theme="light"] .grain::after{opacity:.13}
html[data-theme="light"] .ticker{background:var(--navy);color:#fff}
html[data-theme="light"] .btn{box-shadow:0 1px 0 rgba(0,0,0,.06)}
html[data-theme="light"] .shot img,html[data-theme="light"] .quad img{
 filter:none}
html[data-theme="light"] .mega{box-shadow:0 30px 54px -30px rgba(20,26,40,.32)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);
 font-family:Archivo,'Helvetica Neue',Arial,sans-serif;font-weight:600;
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
h1,h2,h3,h4,.disp,.fact-n,.tier-price{overflow-wrap:break-word}
.foot-addr,.prose,.card p,.panel p,.lead{overflow-wrap:break-word}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;z-index:200}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--bg);padding:10px 16px;font-weight:700}

.outer{padding:0 64px}
.wrap{max-width:1280px;margin:0 auto}
.disp{font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;
 text-transform:uppercase;letter-spacing:-0.041em}

/* utility bar */
.util{height:80px;border-bottom:1px solid var(--ink)}
.util .outer{height:100%}
.util-in{max-width:1280px;margin:0 auto;height:100%;display:flex;
 align-items:center;justify-content:flex-end;gap:26px}
.search-form{width:447.5px;height:42px;border:1px solid var(--ink);display:flex;
 align-items:center;gap:13px;padding:0 22px;font-size:calc(14px * var(--fs));font-weight:600;letter-spacing:.02em}
.search-form input{all:unset;flex:1 1 auto;min-width:0;font:inherit;color:inherit}
.search-form input::placeholder{color:var(--ink);opacity:1}
.search-form button{all:unset;cursor:pointer;display:flex;align-items:center}
.ulink{font-size:calc(14px * var(--fs));font-weight:600;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.ulink:hover{text-decoration:underline;text-underline-offset:4px}
.ubtn{min-width:86px;height:48px;background:var(--navy);color:var(--ink);display:inline-flex;
 align-items:center;justify-content:center;padding:0 16px;font-size:calc(14px * var(--fs));font-weight:700;
 text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.ubtn:hover{background:var(--navy2)}

/* main nav */
.nav{height:110px;border-bottom:1px solid var(--ink);position:relative;z-index:60;background:var(--bg)}
.nav .outer{height:100%}
.nav-in{max-width:1280px;margin:0 auto;height:100%;display:flex;
 align-items:center;justify-content:space-between}
.logo img{height:59px;width:auto}
.nav ul.top{display:flex;align-items:center;gap:40px}
.nav ul.top > li{position:static}
.navtop{display:inline-flex;align-items:center;gap:9px;font-size:calc(16px * var(--fs));font-weight:600;
 text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;background:none;border:0;
 padding:0;cursor:pointer;height:110px}
.navtop:hover{text-decoration:underline;text-underline-offset:5px}
.chev{flex:none;margin-top:2px;transition:transform .18s}
.navtop[aria-expanded=true] .chev{transform:rotate(180deg)}
.mega{position:absolute;top:100%;left:0;right:0;background:var(--bg);
 border:1px solid var(--rule);border-top:0;padding:26px 0 22px;display:none;
 box-shadow:0 34px 60px -30px rgba(0,0,0,.8)}
.mega.open{display:block}
.mega-a{display:block;padding:9px 20px;font-size:calc(14.5px * var(--fs));font-weight:600;line-height:calc(20px * var(--fs))}
.mega-a:hover,.mega-a:focus{background:var(--navy)}
/* The lead column. Three links, set larger, for the pages people came for. */
.mega-lead{flex:none;min-width:278px;padding-bottom:2px}
.mega-lead{border-right:1px solid var(--rule);padding-right:20px;margin-right:20px}
.mega-lead-a{font-size:calc(16.5px * var(--fs));font-weight:700;padding-top:10px;padding-bottom:10px;
 letter-spacing:-.01em}
.mega-all{display:flex;align-items:center;gap:10px;padding:0 20px 12px;
 font-size:calc(10.5px * var(--fs));font-weight:800;letter-spacing:.14em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62)}
.mega-all:hover,.mega-all:focus-visible{color:var(--ink)}
.mega-all-x .arrow{width:22px;height:11px}
/* Everything else, grouped. A long menu becomes a shape you scan rather than a
   list you read from the top. */
.mega-groups{display:flex;flex-wrap:wrap;gap:10px 18px;padding:0}
.mega-g{min-width:206px;padding-bottom:6px}
.mega-gh{margin:0 0 4px;padding:2px 20px 6px;font-size:calc(10px * var(--fs));font-weight:800;
 letter-spacing:.15em;text-transform:uppercase;color:rgba(var(--ink-rgb),.62)}
.mega-g .mega-a{padding:7px 20px;font-size:calc(13.5px * var(--fs));color:rgba(var(--ink-rgb),.82)}
.mega-g .mega-a:hover,.mega-g .mega-a:focus{color:var(--ink)}
.navbtn{display:none;align-items:center;gap:9px;background:none;border:1px solid var(--ink);
 color:var(--ink);height:40px;padding:0 18px;font-size:calc(14px * var(--fs));font-weight:700;text-transform:uppercase;
 letter-spacing:.04em;cursor:pointer}
.navbtn:hover{background:var(--ink);color:var(--bg)}
.dh-sub{font-size:calc(10px * var(--fs));letter-spacing:.15em;opacity:.66;padding-top:16px}
#drawer{display:none;border-bottom:1px solid var(--ink);background:var(--bg);
 position:relative;z-index:55}
#drawer.open{display:block}
#drawer .wrap{padding:26px 0 34px}
#drawer .dh{display:block;font-size:calc(12px * var(--fs));font-weight:700;letter-spacing:.14em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62);margin:22px 0 10px}
#drawer .dh:first-child{margin-top:0}
#drawer a{display:block;padding:9px 0;font-size:calc(16px * var(--fs));font-weight:600;border-bottom:1px solid var(--rule)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
 padding:12px 30px;background:var(--ink);color:var(--bg);font-size:calc(15px * var(--fs));line-height:calc(24px * var(--fs));font-weight:700;
 text-transform:uppercase;letter-spacing:.03em;text-align:center;max-width:100%}
.btn:hover{background:var(--g-hair)}
.btn-o{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-o:hover{background:var(--ink);color:var(--bg)}
.btn-n{background:var(--navy);color:var(--ink)}
.btn-n:hover{background:var(--navy2)}
.actions{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}

/* hero */
.hero{overflow:hidden}
.hero-top{position:relative;padding:73px 0 96px}
.grid-rules{position:absolute;inset:0;pointer-events:none;max-width:1280px;margin:0 auto;
 background-image:repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 213.333px);
 border-right:1px solid var(--rule);
 -webkit-mask-image:linear-gradient(to bottom,#000 0 26px,transparent 62px,
  transparent calc(100% - 62px),#000 calc(100% - 26px));
 mask-image:linear-gradient(to bottom,#000 0 26px,transparent 62px,
  transparent calc(100% - 62px),#000 calc(100% - 26px))}
.hero-in{position:relative;max-width:1280px;margin:0 auto}
h1.hero-h1{font-size:calc(115.5px * var(--fs));line-height:calc(104px * var(--fs));text-indent:12.5px}
h1.hero-h1.sm{font-size:calc(78px * var(--fs));line-height:calc(74px * var(--fs))}
.h1-line{display:block;position:relative}
.scrib{position:absolute;left:96px;top:100%;margin-top:-11.6px;width:754px;height:40px;max-width:78%}
.hero-p{margin-left:230.03px;width:100%;max-width:836.63px;
 margin-top:64px;font-size:calc(33.2px * var(--fs));line-height:calc(42.5px * var(--fs));font-weight:800;letter-spacing:-.004em}
.hero-cta{margin-left:230.03px;margin-top:48px}
.hero-shot{width:100%}
.hero-shot img{width:100%}

/* page header for inner pages */
.phead{position:relative;padding:73px 0 84px;border-bottom:1px solid var(--rule)}
.phead .eyebrow{margin-bottom:20px}
h1.ph{font-size:calc(78px * var(--fs));line-height:calc(74px * var(--fs))}
.phead .lead{margin-top:30px;width:100%;max-width:853.333px;font-size:calc(24px * var(--fs));line-height:calc(34px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}

/* sections */
.sec{padding:120px 0}
.sec.tight{padding:84px 0}
.sec.alt{border-top:1px solid var(--rule)}
.eyebrow{font-size:calc(14px * var(--fs));font-weight:700;text-transform:uppercase;letter-spacing:.14em;
 color:rgba(var(--ink-rgb),.62);margin-bottom:22px}
h2.h2{font-size:calc(56px * var(--fs));line-height:calc(58px * var(--fs));letter-spacing:-.03em}
h3.h3{font-size:calc(30px * var(--fs));line-height:calc(34px * var(--fs));letter-spacing:-.02em;
 font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400}
.lead{margin-top:26px;width:100%;max-width:853.333px;font-size:calc(22px * var(--fs));line-height:calc(32px * var(--fs));font-weight:600}
.prose{width:100%;max-width:853.333px;min-width:0}
.prose p{margin-top:20px;font-size:calc(18px * var(--fs));line-height:calc(29px * var(--fs));font-weight:500;color:rgba(var(--ink-rgb),.82)}
.prose p:first-child{margin-top:0}
.prose h2{margin-top:44px;font-size:calc(24px * var(--fs));line-height:calc(28px * var(--fs));letter-spacing:-.02em;
 font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;text-transform:uppercase}
.prose ul{margin-top:18px}
.prose li{position:relative;padding-left:26px;margin-top:11px;font-size:calc(18px * var(--fs));line-height:calc(28px * var(--fs));
 font-weight:500;color:rgba(var(--ink-rgb),.82)}
.prose li::before{content:'';position:absolute;left:0;top:11px;width:11px;height:2px;background:var(--navy2)}
.prose a:not(.btn){text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.prose ol{margin-top:18px;counter-reset:step}
.prose ol > li{counter-increment:step;padding-left:38px}
.prose ol > li::before{content:counter(step);top:0;left:0;width:22px;height:22px;background:var(--navy);
 color:var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;
 font-size:calc(12px * var(--fs));font-weight:700;line-height:1}
.prose strong{color:var(--ink);font-weight:800}

/* two column split */
.split{display:grid;grid-template-columns:533.33px 1fr;column-gap:106.67px;align-items:start}
.split.rev{grid-template-columns:1fr 533.33px}
.split .lead,.split .prose{width:auto}
.shot{width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--g-panel)}
.shot img{width:100%;height:100%;object-fit:fill}
figure.fig{margin:0}
figcaption{margin-top:12px;font-size:calc(13px * var(--fs));line-height:calc(19px * var(--fs));font-weight:500;color:rgba(var(--ink-rgb),.62)}

/* stat facts */
.facts{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px;row-gap:34px;
 border-top:1px solid var(--rule);padding-top:34px}
.facts.four{grid-template-columns:repeat(4,1fr)}
.fact-n{font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;font-size:calc(40px * var(--fs));
 line-height:calc(42px * var(--fs));letter-spacing:-.03em}
.fact-l{margin-top:8px;font-size:calc(14px * var(--fs));line-height:calc(20px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.62)}

/* cards */
.cards > *,.split > *,.foot-top > *,.facts > *,.railed > *,.steps > *,
.gmosaic > *,.ggrid > *,.gstack > *,.act-in > *{min-width:0}
.railed,.steps,.act-in{min-width:0}
.cards{margin-top:72px;display:grid;}
.cards{margin-top:72px;display:grid;grid-template-columns:repeat(4,1fr);column-gap:32px;row-gap:56px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.two{grid-template-columns:repeat(2,1fr)}
/* The whole card is one link, so the link has to be the column, not the
   article around it, or margin-top:auto on the meta has nothing to push
   against and the row of cards stays ragged. */
.card{display:flex;flex-direction:column;height:100%}
.card > a{display:flex;flex-direction:column;flex:1 1 auto}
.card-shot{width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--g-panel)}
/* Cover, not fill. Fill stretches a photograph to the shape of its box, which
   distorts every face in it whenever the source is not exactly three by two.
   A card thumbnail is a deliberate crop, and it is centred slightly high
   because that is where people are in these photographs. */
.card-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.card-cat{margin-top:18px;font-size:calc(12px * var(--fs));font-weight:700;text-transform:uppercase;
 letter-spacing:.14em;color:rgba(var(--ink-rgb),.62)}
.card h3{margin:10px 0 0;font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;
 font-size:calc(20px * var(--fs));line-height:calc(24px * var(--fs));letter-spacing:-.02em}
.card p{margin-top:10px;font-size:calc(15px * var(--fs));line-height:calc(22px * var(--fs));font-weight:500;color:rgba(var(--ink-rgb),.82)}
/* Pinned to the bottom of the card. Without this the meta line sits directly
   under a summary, so in a row of four cards it lands at four different heights
   and the row reads as ragged rather than as a set. */
.card-meta{margin-top:auto;padding-top:14px;font-size:calc(12px * var(--fs));font-weight:600;letter-spacing:.04em;
 text-transform:uppercase;color:rgba(var(--ink-rgb),.62)}
.card a:hover h3{text-decoration:underline;text-underline-offset:3px}

/* panels, tiers, quotes */
.panel{border:1px solid var(--rule);padding:34px 36px;display:flex;flex-direction:column;height:100%}
.panel h3{font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;font-size:calc(22px * var(--fs));
 line-height:calc(26px * var(--fs));letter-spacing:-.02em;text-transform:uppercase}
.panel p{margin-top:14px;font-size:calc(16px * var(--fs));line-height:calc(25px * var(--fs));font-weight:500;color:rgba(var(--ink-rgb),.82)}
.panel ul{margin-top:18px}
.panel li{position:relative;padding-left:22px;margin-top:10px;font-size:calc(15px * var(--fs));line-height:calc(22px * var(--fs));
 font-weight:500;color:rgba(var(--ink-rgb),.82)}
.panel li::before{content:'';position:absolute;left:0;top:10px;width:9px;height:2px;background:var(--navy2)}
.panel .btn{margin-top:auto}
.panel .buy{margin-top:26px}
.tier-price{margin-top:20px;font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;
 font-size:calc(44px * var(--fs));line-height:calc(46px * var(--fs));letter-spacing:-.03em}
.tier-unit{font-size:calc(14px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.62);margin-top:4px}
.flag{display:inline-block;background:var(--navy);color:var(--ink);font-size:calc(11px * var(--fs));font-weight:700;
 letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;margin-bottom:16px}
/* Pull quotes.
   ArchivoBlack is the display face. It is drawn for short uppercase lines and
   its sentence case rhythm falls apart over four or more lines, which is what
   made the long quotes read as shouting with uneven word spacing. Quotes are
   now set in the body face at a display size: same brand, correct job. */
blockquote.pull{position:relative;border-left:3px solid var(--navy2);padding-left:34px;
 margin-top:44px;max-width:960px}
/* No decorative quote glyph. Every size and face rendered it differently and
   it had to be clipped to fit, which looked like a bug because it was one. The
   left rule and the attribution do the job. */
blockquote.pull p{font-family:Archivo,'Helvetica Neue',Arial,sans-serif;font-weight:700;
 font-size:calc(27px * var(--fs));line-height:calc(39px * var(--fs));letter-spacing:-.006em;color:var(--ink);
 text-wrap:pretty}
/* Three sizes, chosen from the length of the quote. A short quote is a
   statement and can carry the weight. A long one is an argument and has to
   stay readable, so it steps down and loosens. See shell.pull(). */
blockquote.pull.q-l p{font-size:calc(30px * var(--fs));line-height:calc(42px * var(--fs));font-weight:700}
blockquote.pull.q-l{max-width:820px}
blockquote.pull.q-m p{font-size:calc(24px * var(--fs));line-height:calc(36px * var(--fs));font-weight:700;letter-spacing:-.004em}
blockquote.pull.q-m{max-width:880px}
blockquote.pull.q-s p{font-size:calc(20px * var(--fs));line-height:calc(32px * var(--fs));font-weight:600;letter-spacing:0}
blockquote.pull.q-s{max-width:900px}

/* A quote that follows a section heading needs room to be its own thing. */
/* Anything appended after a section heading is a sibling of the rail grid, so
   it starts at the far left with only its own margin and lands almost touching
   the lead paragraph above it. One rule gives every one of them room. */
.railed + *:not(.railed){margin-top:56px}
.railed + blockquote.pull,.railed blockquote.pull:first-child,
.railed + .prose > blockquote.pull:first-child{margin-top:64px}
blockquote.pull footer{margin-top:20px;padding-top:16px;
 border-top:1px solid rgba(var(--ink-rgb),.14);
 font-size:calc(13px * var(--fs));font-weight:700;letter-spacing:.06em;color:rgba(var(--ink-rgb),.62)}
.prose blockquote.pull{margin-top:34px;margin-bottom:34px}
.inv blockquote.pull p{color:var(--iceink)}
.inv blockquote.pull::before{color:var(--navy);opacity:.4}
.inv blockquote.pull footer{border-top-color:var(--icerule)}
.quote-grid{margin-top:64px;display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.qcard{border:1px solid var(--rule);padding:32px 34px}
.qcard p{font-size:calc(19px * var(--fs));line-height:calc(29px * var(--fs));font-weight:600}
.qcard footer{margin-top:20px;font-size:calc(13px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.62);line-height:calc(19px * var(--fs))}

/* ticker and marquee */
.ticker{background:var(--navy);overflow:hidden;max-width:100vw;height:96px;display:flex;align-items:center;position:relative}
.ticker-track{display:flex;white-space:nowrap;animation:slide 34s linear infinite}
.ticker span{font-family:ArchivoBlack,Arial,sans-serif;font-weight:400;text-transform:uppercase;
 letter-spacing:-.01em;font-size:calc(40px * var(--fs));padding-right:56px}
.marq{overflow:hidden;max-width:100%;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
 height:132px;display:flex;align-items:center;position:relative}
.marq-track{display:flex;animation:slide 30s linear infinite}
.marq-cell{width:214px;flex:none;display:flex;align-items:center;justify-content:center;padding:0 12px;
 text-align:center;font-size:calc(17px * var(--fs));font-weight:800;letter-spacing:.02em;text-transform:uppercase;line-height:calc(20px * var(--fs))}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* The scrolling text passes behind the pause control, so the control needs a
   solid ground of its own and the track needs to fade out before it reaches it.
   Nothing readable ever sits under anything else. */
.ticker::after,.marq::after{content:'';position:absolute;right:0;top:0;bottom:0;width:190px;
 z-index:2;pointer-events:none}
.ticker::after{background:linear-gradient(90deg,rgba(59,62,114,0) 0%,var(--navy) 62%)}
.marq::after{background:linear-gradient(90deg,rgba(33,36,38,0) 0%,var(--bg) 62%)}
.pausebtn{position:absolute;right:18px;top:50%;transform:translateY(-50%);z-index:4;
 background:var(--navy3);
 border:1px solid rgba(var(--ink-rgb),.6);color:var(--ink);font-size:calc(11px * var(--fs));font-weight:700;letter-spacing:.1em;
 text-transform:uppercase;padding:7px 13px;cursor:pointer}
.pausebtn:hover{background:var(--ink);color:var(--bg)}
.paused .ticker-track,.paused .marq-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ticker-track,.marq-track{animation:none}}

/* tables */
table.t{width:100%;border-collapse:collapse;margin-top:34px}
table.t th,table.t td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--rule);
 font-size:calc(16px * var(--fs));line-height:calc(24px * var(--fs));vertical-align:top}
table.t th{font-size:calc(12px * var(--fs));font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--ink-rgb),.62)}
table.t td{font-weight:500;color:rgba(var(--ink-rgb),.82)}
table.t td:first-child{font-weight:700;color:var(--ink)}

/* faq */
details.faq{border-bottom:1px solid var(--rule)}
details.faq summary{cursor:pointer;list-style:none;padding:24px 40px 24px 0;position:relative;
 font-size:calc(20px * var(--fs));line-height:calc(27px * var(--fs));font-weight:700}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';position:absolute;right:6px;top:20px;font-size:calc(26px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.62)}
details.faq[open] summary::after{content:'\2212'}
details.faq .a{padding:0 40px 26px 0;font-size:calc(17px * var(--fs));line-height:calc(27px * var(--fs));font-weight:500;color:rgba(var(--ink-rgb),.82)}
details.faq .a p + p{margin-top:14px}

/* callout */
.callout{border:1px solid var(--navy2);background:rgba(59,62,114,.22);padding:26px 30px;margin-top:34px}
.callout p{font-size:calc(16px * var(--fs));line-height:calc(25px * var(--fs));font-weight:600}
.callout p + p{margin-top:12px}

/* search results */
#results li{border-bottom:1px solid var(--rule);padding:22px 0}
#results a{font-size:calc(21px * var(--fs));font-weight:700;line-height:calc(27px * var(--fs))}
#results a:hover{text-decoration:underline;text-underline-offset:3px}
#results p{margin-top:8px;font-size:calc(15px * var(--fs));line-height:calc(23px * var(--fs));font-weight:500;color:rgba(var(--ink-rgb),.82)}

/* footer */
.foot{border-top:1px solid var(--ink);padding:64px 0 0}
/* Both footer bands are laid on the same six columns the rules are drawn on.
   They were four uneven tracks over five even ones, so nothing in the footer
   lined up with anything else on the page, or with itself. */
.foot-top{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
 column-gap:32px;align-items:start;padding-bottom:64px}
.foot-top > .foot-addr{grid-column:span 2}
.foot-top > .foot-quick{grid-column:span 2}
.foot-top img{height:59px;width:auto}
.foot-addr{font-size:calc(15px * var(--fs));line-height:calc(24px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.foot-quick{font-size:calc(15px * var(--fs));line-height:calc(24px * var(--fs));font-weight:700}
.foot-quick a:hover{text-decoration:underline;text-underline-offset:4px}
.socials{display:flex;gap:18px;justify-content:flex-end;align-items:center}
.socials a{opacity:.85}
.socials a:hover{opacity:1}
.foot-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:32px;row-gap:40px;
 border-top:1px solid var(--rule);padding:56px 0}
.foot-cols h2{margin:0 0 18px;font-size:calc(13px * var(--fs));font-weight:700;text-transform:uppercase;
 letter-spacing:.14em;color:rgba(var(--ink-rgb),.62)}
.foot-cols li{margin-bottom:12px;font-size:calc(15px * var(--fs));line-height:calc(21px * var(--fs));font-weight:600}
.foot-cols a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-bot{border-top:1px solid var(--rule);padding:28px 0 44px;display:flex;justify-content:space-between;
 align-items:center;gap:24px;flex-wrap:wrap;font-size:calc(13px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.62)}
.legal{display:flex;gap:26px;flex-wrap:wrap}
.legal a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---- inverted ice light sections ---- */
.inv{background:var(--ice);color:var(--iceink)}
.inv .eyebrow,.inv .rail,.inv .card-cat,.inv .card-meta,.inv .fact-l,.inv figcaption,
.inv .tier-unit,.inv .idx{color:var(--icedim)}
.inv .lead,.inv .prose p,.inv .prose li,.inv .panel p,.inv .card p,.inv .qcard footer,
.inv blockquote.pull footer,.inv table.t td{color:var(--g-slate)}
.inv .panel,.inv .qcard,.inv .marq,.inv table.t th,.inv table.t td,.inv .facts,
.inv details.faq,.inv .foot-cols,.inv .foot-bot,.inv .foot{border-color:var(--icerule)}
.inv .btn{background:var(--navy);color:var(--ink)}
.inv .btn:hover{background:var(--navy2)}
.inv .btn-o{background:transparent;color:var(--iceink);border:1px solid var(--iceink)}
.inv .btn-o:hover{background:var(--iceink);color:var(--ice)}
.inv blockquote.pull{border-left-color:var(--navy)}
.inv .prose li::before,.inv .panel li::before{background:var(--navy)}
.inv .prose strong{color:var(--iceink)}
.inv .socials a{color:var(--iceink)}
.inv .foot-addr,.inv .foot-quick{color:var(--g-slate)}
/* The footer has always been a pale band, and these three were still set in
   white with an alpha, which put the copyright line, the legal links and the
   column headings at about 1.1 to 1 against it. The audit found them; they had
   been like that since the footer was written. */
.inv .foot-bot{color:#41485A}
.inv .foot-cols h2{color:#41485A}
.inv .legal a,.inv .foot-bot a{color:var(--g-slate)}

/* ---- full-bleed navy feature block ---- */
.navyblock{background:var(--navy)}
.navyblock .eyebrow,.navyblock .rail,.navyblock .card-cat,.navyblock .card-meta{color:rgba(var(--ink-rgb),.74)}
.navyblock .btn{background:var(--ink);color:var(--navy)}
.navyblock .btn:hover{background:var(--g-lilac)}
.navyblock .btn-o{background:transparent;color:var(--ink);border-color:var(--ink)}
.navyblock .btn-o:hover{background:var(--ink);color:var(--navy)}
.navyblock .card p,.navyblock .lead{color:rgba(var(--ink-rgb),.88)}
/* and none whatsoever on the navy card bands. Four photographs, four headings
   and four paragraphs in one band is busy enough without a grid drawn over it. */
.navyblock > .rules{display:none}

/* ---- persistent grid rules ----
   The column grid is worth showing, but not through a paragraph. Full height
   lines ran straight down the middle of running text and through the footer
   links, and no amount of lowering the opacity fixes that: a hairline behind a
   letterform is still a hairline behind a letterform.

   So the rules are masked to the top and bottom of the block they belong to.
   They read as registration ticks where a section begins and ends, which is
   where the grid is worth seeing, and there is simply nothing there across the
   middle, where the words are. Twenty two pixels of tick, fading out by fifty
   four: text starts as close as forty six pixels below the top of a block on
   the busiest page, so anything longer than that runs into it. */
.ruled{position:relative}
.ruled > .rules{position:absolute;inset:0;pointer-events:none;max-width:1280px;
 margin:0 auto;left:0;right:0;
 background-image:repeating-linear-gradient(to right,var(--rule) 0 1px,transparent 1px 213.333px);
 border-right:1px solid var(--rule);z-index:0;
 -webkit-mask-image:linear-gradient(to bottom,#000 0 22px,transparent 54px,
  transparent calc(100% - 54px),#000 calc(100% - 22px));
 mask-image:linear-gradient(to bottom,#000 0 22px,transparent 54px,
  transparent calc(100% - 54px),#000 calc(100% - 22px))}
.inv > .rules{background-image:repeating-linear-gradient(to right,var(--icerule) 0 1px,transparent 1px 213.333px);
 border-right-color:var(--icerule)}
.ruled > .outer{position:relative;z-index:2}
/* Two blocks where a tick has nowhere to go. The countdown band is a single
   line of type with almost no padding, so its top and bottom edges are the
   type; and the footer's legal row sits four pixels off the bottom of the
   page. Both get the top tick only, or none. */
.cdband > .rules{display:none}
.foot > .rules{-webkit-mask-image:linear-gradient(to bottom,#000 0 22px,transparent 54px);
 mask-image:linear-gradient(to bottom,#000 0 22px,transparent 54px)}

/* narrow */
@media (max-width:1407px){
  .ruled > .rules{display:none}
  .grid-rules{display:none}
  .hero-p,.hero-cta{margin-left:0}
  .hero-p{max-width:853.333px}
  .scrib{width:70%;left:2px}
}
@media (max-width:1180px){
  .split,.split.rev{grid-template-columns:1fr;row-gap:44px}
  .cards,.cards.three{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr;row-gap:36px}
  .socials{justify-content:flex-start}
  .foot-cols{grid-template-columns:repeat(3,1fr)}
  .search-form{display:none}
  .nav ul.top{display:none}
  .navbtn{display:inline-flex}
  .facts.four{grid-template-columns:repeat(2,1fr)}
  h1.hero-h1{font-size:9.4vw;line-height:8.5vw}
  h1.hero-h1.sm,h1.ph{font-size:7vw;line-height:6.7vw}
  .hero-p{max-width:760px;font-size:calc(26px * var(--fs));line-height:calc(36px * var(--fs))}
  .quote-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .outer{padding:0 22px}
  .cards,.cards.three,.cards.two{grid-template-columns:1fr}
  h2.h2{font-size:calc(34px * var(--fs));line-height:calc(37px * var(--fs))}
  h1.hero-h1.sm,h1.ph{font-size:calc(38px * var(--fs));line-height:calc(39px * var(--fs))}
  h1.hero-h1{font-size:calc(44px * var(--fs));line-height:calc(42px * var(--fs));text-indent:0}
  .hero-p{font-size:calc(20px * var(--fs));line-height:calc(29px * var(--fs));margin-top:38px}
  .ticker span{font-size:calc(26px * var(--fs))}
  .ticker{height:70px}
  .util-in{gap:16px}
  .ulink{display:none}
  .facts,.facts.four{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr;row-gap:28px}
  .sec{padding:66px 0}
  .phead{padding:44px 0 52px}
  .hero-top{padding:44px 0 52px}
  .panel{padding:26px 24px}
  blockquote.pull p{font-size:calc(20px * var(--fs));line-height:calc(31px * var(--fs))}
  blockquote.pull{padding-left:20px;padding-top:34px;margin-top:30px}
  blockquote.pull::before{left:19px;top:-6px;font-size:calc(46px * var(--fs))}
  table.t th,table.t td{padding:12px 10px;font-size:calc(14px * var(--fs))}
}

/* ============================== motion layer ============================== */
:root{
  --ease-in:cubic-bezier(.16,1,.3,1); --ease-move:cubic-bezier(.65,0,.35,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---- grain ---- */
.grain::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
 background-image:var(--grain);background-size:140px 140px;opacity:.035;mix-blend-mode:overlay}
.grain > *{position:relative;z-index:2}

/* ---- gradient bleeds ---- */
.bleed{position:relative;--bleed-to:var(--bg)}
.bleed::before,.bleed::after{content:'';position:absolute;left:0;right:0;pointer-events:none;z-index:3}
.bleed::before{top:0;height:22%;background:linear-gradient(to bottom,var(--bleed-to) 0%,
 color-mix(in srgb,var(--bleed-to) 72%,transparent) 38%,transparent 100%)}
.bleed::after{bottom:0;height:15%;background:linear-gradient(to top,var(--bleed-to) 0%,
 color-mix(in srgb,var(--bleed-to) 66%,transparent) 44%,transparent 100%)}
.bleed.b-navy{--bleed-to:var(--navy)}
.bleed.b-ice{--bleed-to:var(--ice)}
.bleed.b-top-only::after{display:none}

/* ---- curved leading edge ---- */
.curve-top{position:relative;border-radius:0}
.curve-top::before{content:'';position:absolute;left:0;right:0;top:-38px;height:40px;
 background:inherit;border-radius:50% 50% 0 0 / 100% 100% 0 0;z-index:0}

/* ---- 1. rise ---- */
[data-m]{--d:0ms}
[data-m="rise"]{opacity:0;transform:translateY(26px);
 transition:opacity .62s var(--ease-in) var(--d),transform .62s var(--ease-in) var(--d)}
[data-m="rise"].in{opacity:1;transform:none}

/* ---- 2. mask wipe on display lines ---- */
[data-m="wipe"]{display:block;overflow:hidden}
[data-m="wipe"] > span{display:block;transform:translateY(102%);
 transition:transform .7s var(--ease-in) var(--d)}
[data-m="wipe"].in > span{transform:none}

/* ---- 3. counting stats ---- */
[data-count]{font-variant-numeric:tabular-nums}

/* ---- 4. drawn flourishes ---- */
.scrib path,.ellipse path,.arrow path{stroke-dasharray:var(--len,1200);
 stroke-dashoffset:var(--len,1200);transition:stroke-dashoffset .52s var(--ease-move) var(--d)}
.drawn .scrib path,.drawn .ellipse path,.drawn .arrow path{stroke-dashoffset:0}
.ellipse{position:absolute;left:-3.5%;top:-16%;width:107%;height:132%;pointer-events:none;overflow:visible}
.circled{position:relative;display:inline-block}
.arrow{display:inline-block;vertical-align:middle;margin-left:12px}
.arrow.nudge{animation:nudge 1.1s var(--ease-move) 2}
@keyframes nudge{0%,100%{transform:translateX(0)}55%{transform:translateX(5px)}}

/* ---- 5. parallax drift ---- */
.drift{overflow:hidden}
.drift > picture > img,.drift > img{will-change:transform;transform:translate3d(0,var(--py,0),0) scale(1.09)}

/* ---- 6. hover lift ---- */
.card,.panel,.marq-cell,.gcell{transition:transform .2s var(--ease-move),
 border-color .2s var(--ease-move),background-color .2s var(--ease-move)}
.card:hover,.card:focus-within,.panel:hover,.panel:focus-within{transform:translateY(-2px)}
.panel:hover,.panel:focus-within{border-color:var(--navy2)}
.card-shot img,.shot img,.gcell img{transition:transform .5s var(--ease-move)}
.card:hover .card-shot img,.card:focus-within .card-shot img{transform:scale(1.035)}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:currentColor;opacity:0;
 transform:translateX(-101%);transition:transform .2s var(--ease-move),opacity .2s}
.btn-o:hover::before{transform:none;opacity:1}
.btn-o{transition:color .2s var(--ease-move)}

/* ---- image fade up from placeholder ---- */
.ph{background-size:cover;background-position:center}
.ph img{opacity:0;transition:opacity .5s var(--ease-in)}
.ph img.loaded,.ph img.ldd{opacity:1}

/* ---- page transition ---- */
main{animation:pagein .22s var(--ease-in) both}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- sticky condensing header ---- */
.shell{position:sticky;top:0;z-index:70;transition:transform .3s var(--ease-move)}
.shell .util{transition:height .3s var(--ease-move),opacity .2s}
.shell .nav{transition:height .3s var(--ease-move)}
.shell .logo img{transition:height .3s var(--ease-move)}
body.cond .shell .util{height:0;opacity:0;overflow:hidden;border-bottom-width:0}
body.cond .shell .nav{height:76px}
body.cond .shell .navtop{height:76px}
body.cond .shell .logo img{height:44px}
.prog{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;
 transform:scaleX(var(--p,0));background:var(--navy2);z-index:99;pointer-events:none}

/* ---- mega menu motion + preview ---- */
.mega{opacity:0;transform:translateY(-6px);transition:opacity .18s var(--ease-move),
 transform .18s var(--ease-move);display:block;visibility:hidden;pointer-events:none}
.mega.open{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.mega-all,.mega-gh{opacity:0;transition:opacity .22s var(--ease-in)}
.mega.open .mega-all,.mega.open .mega-gh{opacity:1}
/* The panel bleeds the full width of the bar, and its contents sit on the site
   container, so every label in it lines up with the copy on the page below.
   44 of padding plus 20 on each link puts the text on the 64px gutter. */
/* The link text has to land on the page's 64px gutter, and each link carries 20
   of its own padding so the hover state is not flush against the words. So the
   inner box is inset 44, which is 64 minus 20, at every width. */
.mega-in{display:flex;gap:0;align-items:flex-start;
 width:min(calc(1280px + 40px),calc(100vw - 88px));margin:0 auto;padding:0}
.mega-prev{margin-left:auto;padding-right:0}
.mega-a{opacity:0;transform:translateY(-4px);transition:opacity .2s var(--ease-in),
 transform .2s var(--ease-in)}
.mega.open .mega-a{opacity:1;transform:none}
.mega-prev{display:none;flex:none;width:212px;padding:0 22px 0 8px;align-self:center}
.mega.open .mega-prev{display:block}
.mega-prev .shot{aspect-ratio:3/2}
.mega-prev p{margin-top:10px;font-size:calc(12px * var(--fs));line-height:calc(17px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.62)}

/* ---- marquee slow on hover ---- */
.ticker:hover .ticker-track,.marq:hover .marq-track{animation-duration:80s}
.ticker-track,.marq-track{transition:none}

/* ---- FAQ height ----
   Scoped to [open]. Setting display on the child of a closed <details>
   overrides the browser's own hiding, which left every answer on the page
   visible and stacked on top of the next question. */
details.faq[open] .a{display:grid;grid-template-rows:1fr}

/* ---- left rail eyebrow ---- */
.railed{display:grid;grid-template-columns:213.33px 1fr;column-gap:0;align-items:start}
.rail{font-size:calc(12px * var(--fs));font-weight:700;letter-spacing:.2em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62);line-height:calc(19px * var(--fs));padding-right:24px;padding-top:8px}
.rail .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ember);
 margin-right:9px;vertical-align:1px;transform:scale(0);transition:transform .4s var(--ease-in) 120ms}
.railed.in .rail .dot,.in .rail .dot{transform:scale(1)}

/* ---- highlighter label ---- */
.hl{display:inline-block;background:var(--ember);color:var(--ink);padding:3px 9px 4px}

/* ---- chip ---- */
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:var(--ink);
 padding:7px 14px;font-size:calc(13px * var(--fs));font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.chip.big{font-family:ArchivoBlack,Arial,sans-serif;font-weight:400;font-size:calc(26px * var(--fs));
 letter-spacing:-.02em;padding:8px 16px;text-transform:none}

/* ---- numbered index ---- */
.idx{font-size:calc(12px * var(--fs));font-weight:700;letter-spacing:.16em;color:rgba(var(--ink-rgb),.62);margin-bottom:14px}
.idx b{color:var(--ink);font-weight:700}

/* ---- inline headline image ---- */
.inline-shot{display:inline-block;vertical-align:-.07em;width:.98em;height:.6533em;overflow:hidden;
 margin:0 .1em;position:relative;background:var(--g-panel)}
.inline-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;
 transition:opacity .9s var(--ease-in)}
.inline-shot img.on{opacity:1}

/* ============================== intro ==================================== */
#intro{position:fixed;inset:0;z-index:9000;background:var(--bg);display:flex;
 align-items:center;justify-content:center;overflow:hidden}
#intro .grainlayer{position:absolute;inset:0;background-image:var(--grain);
 background-size:140px 140px;opacity:.05;mix-blend-mode:overlay;pointer-events:none}
#intro .lock{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
 transform:translateY(0);transition:transform .4s var(--ease-in)}
#intro.lift .lock{transform:translateY(-44px)}
#intro .crest{height:76px;width:auto;opacity:0;transform:translateY(10px) scale(.94);
 transition:opacity .35s var(--ease-in),transform .35s var(--ease-in)}
#intro.s1 .crest{opacity:1;transform:none}
#intro.s5 .crest{opacity:0;transform:scale(4);transition:opacity .6s var(--ease-move),
 transform .6s var(--ease-move)}
#intro .w{font-family:ArchivoBlack,Archivo,Arial,sans-serif;color:var(--ink);text-transform:uppercase;
 font-size:calc(clamp(40px,7.4vw,104px) * var(--fs));line-height:1;letter-spacing:-.041em;white-space:nowrap;
 display:flex;overflow:hidden}
#intro .w i{font-style:normal;display:inline-block;transform:translateY(105%);
 transition:transform .42s var(--ease-in) var(--d)}
#intro.s2 .w1 i,#intro.s3 .w1 i,#intro.s4 .w1 i,#intro.s5 .w1 i,#intro.s6 .w1 i{transform:none}
#intro.s4 .w2 i,#intro.s5 .w2 i,#intro.s6 .w2 i{transform:none}
#intro .w2{margin-top:2px}
#intro .sc{width:min(52vw,470px);height:16px;margin-top:1px;opacity:0;transition:opacity .1s}
#intro.s3 .sc,#intro.s4 .sc{opacity:1}
#intro .sc path{stroke-dasharray:520;stroke-dashoffset:520;transition:stroke-dashoffset .4s var(--ease-move)}
#intro.s3 .sc path,#intro.s4 .sc path{stroke-dashoffset:0}
#intro .w1,#intro .w2{transition:transform .6s var(--ease-move),letter-spacing .6s var(--ease-move),
 opacity .35s var(--ease-move) .25s,filter .35s var(--ease-move) .25s}
#intro.s5 .w1{transform:translateX(-34vw) scale(2.6);letter-spacing:.06em}
#intro.s5 .w2{transform:translateX(34vw) scale(2.6);letter-spacing:.06em}
#intro.s6 .w1{transform:translateX(-78vw) scale(3.1);opacity:0;filter:blur(14px)}
#intro.s6 .w2{transform:translateX(78vw) scale(3.1);opacity:0;filter:blur(14px)}
#intro.s6{background:transparent;transition:background .4s linear}
#intro.gone{opacity:0;pointer-events:none;transition:opacity .2s linear}
#introskip{position:absolute;right:22px;bottom:20px;background:none;border:1px solid rgba(var(--ink-rgb),.5);
 color:var(--ink);font-size:calc(11px * var(--fs));font-weight:700;letter-spacing:.16em;text-transform:uppercase;
 padding:9px 16px;cursor:pointer;opacity:0;transition:opacity .3s .4s}
#intro.s1 #introskip{opacity:1}
#introskip:hover{background:var(--ink);color:var(--bg)}
body.introing{overflow:hidden}

/* ============================== story scroll ============================= */
.story{position:relative;background:var(--bg);height:380vh}
.story .stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.act{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
 transition:opacity .35s linear;pointer-events:none}
.act.on{opacity:1;pointer-events:auto}
.act-in{width:min(1280px,calc(100vw - 128px));display:grid;grid-template-columns:1fr 1fr;
 gap:64px;align-items:center}
.receipt{border-top:1px solid var(--rule)}
.receipt li{display:flex;justify-content:space-between;gap:20px;padding:14px 0;
 border-bottom:1px solid var(--rule);font-size:calc(17px * var(--fs));font-weight:600;opacity:0;transform:translateY(14px);
 transition:opacity .4s var(--ease-in),transform .4s var(--ease-in)}
.receipt li.on{opacity:1;transform:none}
.receipt li span:last-child{color:rgba(var(--ink-rgb),.62);font-variant-numeric:tabular-nums}
.receipt .tot{display:flex;justify-content:space-between;padding:20px 0 0;font-size:calc(20px * var(--fs));font-weight:800;
 border-top:2px solid var(--ink);margin-top:8px;opacity:0;transition:opacity .4s var(--ease-in)}
.receipt .tot.on{opacity:1}
/* One line, always. At 184 pixels the string "$1,060" is wider than half the
   container, so it wrapped after the comma and the counter ran with a stray
   nought sitting on a line of its own underneath. Nowrap holds it together and
   the clamp is pulled in so it fits the column it is given. */
.bignum{font-family:ArchivoBlack,Arial,sans-serif;font-weight:400;
 font-size:calc(clamp(64px,9.4vw,148px) * var(--fs));line-height:.92;letter-spacing:-.045em;
 white-space:nowrap}
/* The four photographs sit inside the site container rather than bleeding to
   the viewport edge. The seam then lands exactly on the centre grid line and
   the block's outer edges line up with every other section on the page. */
.quads{position:absolute;left:50%;top:50%;
 width:min(1280px,calc(100vw - 128px));
 height:min(74vh,calc(min(1280px,100vw - 128px) * .5625));
 transform:translate(-50%,-50%);overflow:hidden;
 outline:1px solid rgba(var(--ink-rgb),.09)}
.quad{position:absolute;width:50%;height:50%;overflow:hidden;
 transition:transform .5s var(--ease-move),opacity .5s var(--ease-move)}
.quad{background:var(--bg)}
/* Cover, not contain, and deliberately so. Each photograph fills its quadrant
   exactly, which is what makes the four of them read as one tiled block sitting
   on the grid rather than four letterboxed pictures floating near each other.
   The crop is centred and act two is a dark act, so nothing is lost. */
.quad img,.quad .ph{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
 display:block}
.quad .ph{background-size:cover;background-repeat:no-repeat;background-position:50% 42%}
.q1{left:0;top:0} .q2{right:0;top:0} .q3{left:0;bottom:0} .q4{right:0;bottom:0}
/* Act two is a door closing. The four photographs slam together, the frame
   seals, the light goes, and the sentence arrives in the dark. */
.quad{filter:grayscale(var(--g,0)) brightness(var(--qb,1))}
.act2seal{position:absolute;left:50%;top:50%;
 width:min(1280px,calc(100vw - 128px));
 height:min(74vh,calc(min(1280px,100vw - 128px) * .5625));
 transform:translate(-50%,-50%);
 z-index:2;pointer-events:none;opacity:var(--seal,0);
 background:
  linear-gradient(90deg,transparent calc(50% - 3px),rgba(0,0,0,.85) 50%,transparent calc(50% + 3px)),
  linear-gradient(180deg,transparent calc(50% - 3px),rgba(0,0,0,.85) 50%,transparent calc(50% + 3px))}
.act2veil{position:absolute;inset:0;z-index:3;pointer-events:none;
 background:var(--g-deep);opacity:var(--veil,0)}
.act2line{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 6vw;
 z-index:4;opacity:0;transition:opacity .35s var(--ease-in)}
.act2line.on{opacity:1}
.act2in{position:relative;max-width:1180px}
.act2h{font-size:calc(clamp(34px,7.2vw,132px) * var(--fs));line-height:.92;letter-spacing:-.045em;margin:0}
.act2h .l{display:block;overflow:hidden}
.act2h .l > span{display:block;transform:translateY(105%);
 transition:transform .82s var(--ease-in)}
.act2h .l1.go > span{transform:none}
.act2h .l2 > span{transition-duration:.9s;transition-delay:.10s}
.act2h .l2.go > span{transform:none}
.act2h .l2{color:var(--ember2)}
.act2rule{display:block;height:3px;margin:34px auto 0;width:min(560px,72%);
 background:var(--ember);transform:scaleX(0);transform-origin:50% 50%;
 transition:transform .9s var(--ease-move) .34s}
.act2rule.go{transform:scaleX(1)}
.act2sub{margin-top:30px;font-size:calc(clamp(15px,1.5vw,21px) * var(--fs));line-height:1.55;font-weight:600;
 color:rgba(var(--ink-rgb),.72);opacity:0;transform:translateY(14px);
 transition:opacity .7s var(--ease-in) .5s,transform .7s var(--ease-in) .5s}
.act2sub.go{opacity:1;transform:none}
.act3shot{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease-in)}
.act3shot,.act3shot .ph{background:var(--bg)}
.act3shot img,.act3shot .ph{width:100%;height:100%;object-fit:contain;display:block}
.act3shot .ph{background-size:contain;background-repeat:no-repeat;background-position:center}
.act3shot.on{opacity:1}
.act3copy{position:relative;z-index:5;text-align:center;padding:6vh 8vw;
 background:radial-gradient(ellipse 78% 70% at 50% 50%,rgba(18,20,21,.90) 0%,
  rgba(18,20,21,.72) 46%,rgba(18,20,21,.28) 74%,transparent 100%);
 transform:scale(.82);opacity:0;transition:transform .6s var(--ease-move),opacity .5s var(--ease-in)}
.act3copy.on{transform:none;opacity:1}

/* ============================== four day timeline ======================== */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;align-items:start}
.step-text{position:sticky;top:190px;padding:0 0 120px}
.step-media{display:grid;gap:80px}
.mega-title{font-family:ArchivoBlack,Arial,sans-serif;font-weight:400;text-transform:uppercase;
 letter-spacing:-.04em;font-size:calc(clamp(56px,12vw,168px) * var(--fs));line-height:.9}

/* ============================== gallery ================================== */
.gwrap{position:relative}
.grail{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:40;display:grid;gap:13px;
 background:rgba(17,19,20,.78);padding:16px 18px;border:1px solid rgba(var(--ink-rgb),.14);
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.grail a{display:flex;align-items:center;gap:10px;font-size:calc(11px * var(--fs));font-weight:700;letter-spacing:.14em;
 text-transform:uppercase;color:rgba(var(--ink-rgb),.66);transition:color .2s;white-space:nowrap}
.grail a i{display:block;width:22px;height:2px;background:currentColor;transition:width .25s var(--ease-move)}
.grail a.on{color:var(--ink)} .grail a.on i{width:40px;background:var(--ember)}
.gchap{position:relative;padding:120px 0}
.gchap-head{position:relative;margin-bottom:64px}
.gnum{position:absolute;right:0;top:-58px;font-family:ArchivoBlack,Arial,sans-serif;font-weight:400;
 font-size:calc(clamp(104px,17vw,262px) * var(--fs));line-height:.8;color:var(--g-mid);pointer-events:none;
 letter-spacing:-.05em;z-index:0}
.inv .gnum{color:var(--g-lav)}
.gchap-head > .railed{position:relative;z-index:2}
.gcell{position:relative;overflow:hidden;background:var(--g-panel);cursor:zoom-in;border:0;padding:0;display:block;width:100%}
.gcell img,.gcell .ph{width:100%;height:100%;object-fit:cover;display:block}
.gstack{position:relative;display:grid;gap:26px;max-width:900px;margin:0 auto}
.greel{overflow:hidden}
.greel-track{display:flex;gap:22px;will-change:transform}
.greel-track .gcell{flex:none;width:min(38vw,420px);aspect-ratio:3/2}
.gmosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.gmosaic .gcol{display:grid;gap:22px}
.ggrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ggrid .gcell{aspect-ratio:3/2}
.gsingles{display:grid;gap:110px}
.gsingles .gcell{aspect-ratio:3/2;cursor:zoom-in}
.gfinale{position:relative;height:230vh}
.gfinale .stick{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.gfinale .gcell{width:var(--gw,42%);aspect-ratio:3/2;transition:none}

/* lightbox */
#lb{position:fixed;inset:0;z-index:9500;background:var(--g-black);display:none;
 align-items:center;justify-content:center;padding:56px 78px}
#lb.on{display:flex}
#lb img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
#lb figcaption{position:absolute;left:0;right:0;bottom:20px;text-align:center;font-size:calc(13px * var(--fs));
 font-weight:600;color:rgba(var(--ink-rgb),.62);padding:0 78px}
#lb button{position:absolute;background:none;border:1px solid rgba(var(--ink-rgb),.45);color:var(--ink);
 width:46px;height:46px;cursor:pointer;font-size:calc(20px * var(--fs));line-height:1}
#lb button:hover{background:var(--ink);color:var(--bg)}
#lbx{top:20px;right:22px} #lbp{left:18px;top:50%;transform:translateY(-50%)}
#lbn{right:18px;top:50%;transform:translateY(-50%)}
#lbc{position:absolute;top:26px;left:26px;font-size:calc(12px * var(--fs));font-weight:700;letter-spacing:.14em;color:rgba(var(--ink-rgb),.62)}

/* gallery teaser on home */
.fan{position:relative;height:min(56vw,560px);max-width:1100px;margin:64px auto 0;overflow:hidden}
.fan .gcell{position:absolute;left:50%;top:50%;width:44%;aspect-ratio:3/2;
 transform:translate(-50%,-50%) rotate(var(--r,0deg)) translateX(var(--x,0));
 transition:transform .9s var(--ease-move);box-shadow:0 22px 60px rgba(0,0,0,.5)}

/* ---- search dropdown ---- */
.search-wrap{position:relative}
#sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--bg);
 border:1px solid var(--rule);max-height:340px;overflow:auto;display:none;z-index:80}
#sugg.on{display:block}
#sugg li a{display:block;padding:11px 18px;font-size:calc(14px * var(--fs));line-height:calc(19px * var(--fs));font-weight:600}
#sugg li a small{display:block;font-size:calc(12px * var(--fs));font-weight:500;color:rgba(var(--ink-rgb),.62);margin-top:2px}
#sugg li a:hover,#sugg li a.sel{background:var(--navy)}
#sugg .none{padding:14px 18px;font-size:calc(13px * var(--fs));color:rgba(var(--ink-rgb),.62)}
#sugg mark{background:none;color:var(--ember2);font-weight:800}

/* ---- newsroom filters ---- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:38px}
.filters button{background:none;border:1px solid var(--rule);color:rgba(var(--ink-rgb),.82);padding:9px 17px;
 font-size:calc(12px * var(--fs));font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
 transition:all .2s var(--ease-move)}
.filters button:hover{border-color:var(--ink);color:var(--ink)}
.filters button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:var(--ink)}
.card.hide{display:none}

/* ============================== reduced motion =========================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
   transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-m]{opacity:1 !important;transform:none !important}
  [data-m="wipe"] > span{transform:none !important}
  .scrib path,.ellipse path,.arrow path{stroke-dashoffset:0 !important}
  .drift > picture > img,.drift > img{transform:none !important}
  .ph img{opacity:1 !important}
  #intro{display:none !important}
  .act2h .l > span{transform:none !important;transition:none}
  .act2rule{transform:scaleX(1) !important;transition:none}
  .act2sub{opacity:1 !important;transform:none !important;transition:none}
  .act2line{opacity:1 !important;position:static;padding:56px 0}
  .act2seal,.act2veil{display:none}
  .quad{filter:none !important}
  .story{height:auto !important}
  .story .stage{position:static;height:auto}
  .act{position:static;opacity:1 !important;pointer-events:auto;padding:80px 0}
  .act.on{opacity:1}
  .receipt li,.receipt .tot,.act2line,.act3copy{opacity:1 !important;transform:none !important}
  .act3shot{position:static;opacity:1 !important;height:auto;aspect-ratio:3/2;margin-top:40px}
  .quads{position:static;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px;
   width:auto;height:auto;transform:none;outline:0}
  .quad{position:static;width:auto;height:auto;aspect-ratio:3/2}
  .step-text{position:static}
  .gfinale{height:auto} .gfinale .stick{position:static;height:auto}
  .gfinale .gcell{width:100%}
  .greel-track{transform:none !important;flex-wrap:wrap}
  .greel{overflow:visible}
  .greel-track .gcell{width:calc(50% - 11px)}
  .rail .dot{transform:scale(1) !important}
  .inline-shot img{opacity:0 !important}
  .inline-shot img:first-child{opacity:1 !important}
}

/* ============================== narrow =================================== */
@media (max-width:1180px){
  .railed{grid-template-columns:1fr;row-gap:14px}
  .rail{padding-right:0;padding-top:0}
  .act-in{grid-template-columns:1fr;gap:30px;width:calc(100vw - 44px)}
  .steps{grid-template-columns:1fr;gap:36px}
  .step-text{position:static;padding-bottom:26px}
  .step-media{gap:36px}
  .gmosaic{grid-template-columns:1fr 1fr}
  .ggrid{grid-template-columns:repeat(2,1fr)}
  .grail{display:none}
  .mega-prev{display:none}
  .fan{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .fan .gcell{position:static;width:auto;transform:none !important;box-shadow:none}
}
@media (max-width:900px){
  .story{height:auto}
  .story .stage{position:static;height:auto}
  .act{position:static;opacity:1;pointer-events:auto;padding:60px 0}
  .act3shot{position:static;opacity:1;height:auto;aspect-ratio:3/2;margin-top:26px}
  .quads{position:static;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;
   width:auto;height:auto;transform:none;outline:0}
  .quad{position:static;width:auto;height:auto;aspect-ratio:3/2;transform:none !important}
  .act2line{position:static;opacity:1;padding:26px 0 0}
  .act3copy{transform:none;opacity:1}
  .gfinale{height:auto} .gfinale .stick{position:static;height:auto;padding:40px 0}
  .gfinale .gcell{width:100%}
  .greel{overflow:auto;-webkit-overflow-scrolling:touch}
  .greel-track{transform:none !important}
  .greel-track .gcell{width:74vw}
}
@media (max-width:760px){
  .ggrid{grid-template-columns:1fr 1fr;gap:12px}
  .gmosaic{grid-template-columns:1fr}
  .gsingles{gap:56px}
  .gchap{padding:70px 0}
  #lb{padding:60px 14px} #lb figcaption{padding:0 16px}
  .fan{grid-template-columns:1fr}
  .inline-shot{display:none}
}

/* ======================================================== puck carousel == */
.pucks{position:relative;overflow:hidden;padding:104px 0 84px;
 border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
 background:var(--bg);isolation:isolate}
.pk-field{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cpath d='M29 22.5v13M22.5 29h13' stroke='%23ffffff' stroke-opacity='.34' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");background-size:58px 58px;
 opacity:.30;pointer-events:none;z-index:0;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.pk-bloom{position:absolute;left:50%;top:44%;width:140%;aspect-ratio:2/1;transform:translate(-50%,-50%);
 background:radial-gradient(closest-side,rgba(59,62,114,.62),rgba(59,62,114,.16) 58%,transparent 78%);
 pointer-events:none;z-index:0}
.pucks .outer,.pk-rows{position:relative;z-index:1}
.pk-head{max-width:840px;margin-bottom:54px}
.pk-head .lead{margin-top:22px;width:100%;max-width:720px;font-size:calc(19px * var(--fs));line-height:calc(29px * var(--fs));
 font-weight:600;color:rgba(var(--ink-rgb),.82)}
.pk-head h2.h2{margin-top:16px}

.pk-rows{display:flex;flex-direction:column;gap:6px;margin:0 -64px}
.pk-row{overflow:hidden;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
.pk-track{display:flex;gap:46px;width:max-content;padding:34px 64px 46px;
 will-change:transform}

.pk{flex:none;width:250px;height:250px;position:relative;display:block;
 perspective:1100px;perspective-origin:50% 42%}
.pk-3d{position:absolute;inset:0;transform-style:preserve-3d;
 transform:rotateX(31deg) rotateZ(-4deg);
 transition:transform .55s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.pk-edge,.pk-side,.pk-face{position:absolute;inset:0;border-radius:50%}
.pk-edge{background:var(--g-panel2);transform:translateZ(-16px)}
.pk-side{background:linear-gradient(180deg,var(--g-pale) 0%,var(--g-soft) 46%,var(--g-mid2) 100%);
 transform:translateZ(0);box-shadow:0 34px 46px -18px rgba(0,0,0,.62)}
.pk-face{background:radial-gradient(120% 120% at 32% 22%,var(--puck-hi) 0%,var(--puck-mid) 40%,var(--puck-lo4) 100%);
 transform:translateZ(21px);display:grid;place-items:center;
 box-shadow:inset 0 -3px 9px rgba(30,36,45,.10),inset 0 2px 0 rgba(var(--ink-rgb),.9)}
.pk-mark{width:calc(var(--pw) * 100%);height:calc(var(--ph) * 100%);display:block}
.pk-mark picture,.pk-mark img{width:100%;height:100%;display:block}
.pk-mark img{object-fit:contain}
.pk-name{position:absolute;left:-14px;right:-14px;bottom:-30px;text-align:center;
 font-size:calc(11.5px * var(--fs));font-weight:700;letter-spacing:.13em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.86);opacity:0;transform:translateY(5px);
 transition:opacity .3s var(--ease-in,cubic-bezier(.16,1,.3,1)),transform .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.pk:hover .pk-3d,.pk:focus-visible .pk-3d{transform:rotateX(31deg) rotateZ(-4deg) translateZ(30px)}
.pk:hover .pk-name,.pk:focus-visible .pk-name{opacity:1;transform:none}
.pk:focus-visible{outline:none}
.pk:focus-visible .pk-face{box-shadow:0 0 0 4px var(--focus),inset 0 -3px 9px rgba(30,36,45,.10)}

.pk-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;
 margin-top:34px;flex-wrap:wrap}
.pk-pause{all:unset;cursor:pointer;font-size:calc(12px * var(--fs));font-weight:700;letter-spacing:.14em;
 text-transform:uppercase;color:rgba(var(--ink-rgb),.66);border-bottom:1px solid rgba(var(--ink-rgb),.28);
 padding-bottom:3px}
.pk-pause:hover{color:var(--ink);border-color:var(--ink)}
.pk-all{display:inline-flex;align-items:center;gap:10px;font-size:calc(14px * var(--fs));font-weight:700;
 letter-spacing:.02em}
.pk-all:hover .arrow{transform:translateX(5px)}
.pk-all .arrow{transition:transform .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}

/* =========================================================== countdown === */
.cdband{padding:0 0 46px}
.cd{position:relative;padding:46px 0 4px}
.cd-lead{display:flex;align-items:center;gap:11px;font-size:calc(13px * var(--fs));font-weight:700;
 letter-spacing:.15em;text-transform:uppercase;color:rgba(var(--ink-rgb),.70)}
.cd-lead .dot{width:7px;height:7px;border-radius:50%;background:var(--ember);flex:none;
 animation:cdpulse 2.4s ease-in-out infinite}
@keyframes cdpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.cd-row{display:flex;gap:44px;margin-top:20px;flex-wrap:wrap}
.cd-u{display:flex;flex-direction:column;gap:6px}
.cd-n{display:flex;font-size:calc(74px * var(--fs));line-height:.86;font-variant-numeric:tabular-nums;
 letter-spacing:-.03em}
.cd-n i{font-style:normal;display:block;min-width:.58em;text-align:center}
.cd-n i.roll{animation:cdroll .30s var(--ease-in,cubic-bezier(.16,1,.3,1)) both}
@keyframes cdroll{from{transform:translateY(48%);opacity:.28}to{transform:none;opacity:1}}
.cd-l{font-size:calc(11.5px * var(--fs));font-weight:700;letter-spacing:.16em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62)}
.cd-sub{margin-top:24px;font-size:calc(16px * var(--fs));line-height:calc(25px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);
 max-width:560px}
.cd.live .cd-lead .dot{background:var(--ok)}
.cd-c .cd-n{font-size:calc(52px * var(--fs))}
.cd-c .cd-row{gap:32px}
.inv .cd-lead{color:var(--icedim)}
.inv .cd-l{color:var(--icedim)}
.inv .cd-sub{color:var(--icedim)}

/* ========================================================== donate bar === */
.dbar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--navy);
 border-top:1px solid var(--navy2);transform:translateY(112%);
 transition:transform .5s var(--ease-in,cubic-bezier(.16,1,.3,1));box-shadow:0 -14px 40px rgba(0,0,0,.34)}
.dbar.on{transform:none}
/* a fixed bar covers the bottom of the page, so the page makes room for it */
body.dbar-on{padding-bottom:var(--dbar-h,66px)}
.dbar-in{max-width:1280px;margin:0 auto;padding:13px 64px;
 display:flex;align-items:center;gap:22px}
.dbar p{margin:0;flex:1 1 auto;font-size:calc(15px * var(--fs));line-height:calc(22px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.88)}
.dbar p b{color:var(--ink)}
.dbar-go{flex:none;display:inline-flex;align-items:center;justify-content:center;height:40px;
 padding:0 24px;background:var(--ink);color:var(--navy);font-size:calc(14px * var(--fs));font-weight:800;
 letter-spacing:.03em;text-transform:uppercase}
.dbar-go:hover{background:var(--g-lilac)}
.dbar-x{all:unset;cursor:pointer;flex:none;width:34px;height:34px;display:grid;place-items:center;
 font-size:calc(21px * var(--fs));line-height:1;color:rgba(var(--ink-rgb),.7);border:1px solid rgba(var(--ink-rgb),.24)}
.dbar-x:hover{color:var(--ink);border-color:var(--ink)}

/* ===================================================== partner detail ==== */
.pp-back{padding:26px 0 0}
.pp-b{display:inline-flex;align-items:center;gap:10px;font-size:calc(13px * var(--fs));font-weight:700;
 letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--ink-rgb),.64)}
.pp-b:hover{color:var(--ink)}
.pp-b .arrow{transform:scaleX(-1);transition:transform .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.pp-b:hover .arrow{transform:scaleX(-1) translateX(4px)}

.pp-id{position:relative;padding:52px 0 78px;overflow:hidden;
 border-bottom:1px solid var(--rule)}
.pp-bd{position:absolute;inset:0;z-index:0;opacity:.13;pointer-events:none}
/* The backdrop fills the band by overflowing it, not by cropping the file.
   Aspect ratio is preserved, the container does the clipping, and the image
   fit check stays clean. */
.pp-bd picture{display:block;position:absolute;inset:0}
.pp-bd img{position:absolute;left:0;top:50%;width:100%;height:auto;
 transform:translateY(-50%)}
.pp-bd::after{content:'';position:absolute;inset:0;
 background:linear-gradient(180deg,var(--bg) 0%,rgba(33,36,38,.35) 45%,var(--bg) 100%)}
.pp-id .outer{position:relative;z-index:1}
.pp-id-in{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:center}
.pp-card{background:var(--ink);padding:34px;display:grid;place-items:center;min-height:200px;
 box-shadow:0 26px 54px -22px rgba(0,0,0,.6)}
.pp-card-in{width:100%;display:grid;place-items:center}
.pp-card img{max-width:100%;max-height:150px;width:auto;height:auto;object-fit:contain}
[data-m="logo"]{opacity:0;transform:translateY(-16px)}
[data-m="logo"].in{opacity:1;transform:none;
 animation:ppsettle .72s var(--ease-in,cubic-bezier(.16,1,.3,1)) both}
@keyframes ppsettle{0%{opacity:0;transform:translateY(-16px)}62%{opacity:1;transform:translateY(4px)}
 100%{opacity:1;transform:none}}
.pp-pills{display:flex;gap:9px;flex-wrap:wrap}
.pp-pill{display:inline-flex;align-items:center;height:27px;padding:0 13px;
 background:var(--ember);color:var(--ink);font-size:calc(11px * var(--fs));font-weight:800;letter-spacing:.13em;
 text-transform:uppercase}
.pp-pill2{background:transparent;border:1px solid rgba(var(--ink-rgb),.4);
 color:rgba(var(--ink-rgb),.86)}
.pp-h1{margin-top:18px;font-size:calc(60px * var(--fs));line-height:.96;letter-spacing:-.035em}
.pp-desc{margin-top:16px;font-size:calc(20px * var(--fs));line-height:calc(29px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);
 max-width:560px}
.pp-id-t .actions{margin-top:30px}
.pp-prose p{font-size:calc(18px * var(--fs));line-height:calc(30px * var(--fs))}
.pp-gives{font-size:calc(21px * var(--fs)) !important;line-height:calc(33px * var(--fs)) !important;color:var(--ink) !important}

.pp-pull{margin-top:40px;max-width:820px}
.pp-ann{margin-top:40px;border:1px solid var(--rule);max-width:820px}
.pp-ann a{display:block;padding:24px 28px;
 transition:background .3s var(--ease-in,cubic-bezier(.16,1,.3,1)),border-color .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.pp-ann a:hover{background:rgba(var(--ink-rgb),.03)}
.pp-ann-l{display:block;font-size:calc(11px * var(--fs));font-weight:800;letter-spacing:.15em;
 text-transform:uppercase;color:var(--ember2)}
.pp-ann-t{display:block;margin-top:11px;font-size:calc(19px * var(--fs));line-height:calc(27px * var(--fs));font-weight:700}
.pp-ann .arrow{margin-top:14px;transition:transform .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.pp-ann a:hover .arrow{transform:translateX(6px)}

.pp-strip{padding:0 0 96px}
.pp-strip .eyebrow{margin-bottom:22px}
.pp-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:16px}
.pp-ph{position:relative}
.pp-photos .gcell,.pp-photos .ph{display:block;width:100%;aspect-ratio:3/2;overflow:hidden}
.pp-photos img{width:100%;height:100%;object-fit:cover}
[data-m="fan"]{opacity:0;transform:translateY(30px) rotate(-1.6deg) scale(.97);
 transition:opacity .62s var(--ease-in,cubic-bezier(.16,1,.3,1)) var(--d),transform .62s var(--ease-in,cubic-bezier(.16,1,.3,1)) var(--d)}
[data-m="fan"].in{opacity:1;transform:none}

.pp-thanks{padding-top:96px}
.pp-note{max-width:800px}
.pp-note-h{font-size:calc(44px * var(--fs));line-height:1;letter-spacing:-.035em;color:var(--navy)}
.pp-note p{margin-top:22px;font-size:calc(21px * var(--fs));line-height:calc(33px * var(--fs));font-weight:600;color:var(--iceink)}
.pp-sig{margin-top:34px;display:flex;align-items:center;gap:20px}
.pp-sig-svg{width:250px;height:60px;flex:none;color:var(--navy)}
.pp-sig-svg path{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);
 transition:stroke-dashoffset 1.15s var(--ease-move,cubic-bezier(.65,0,.35,1)) .12s}
.pp-sig-svg.drawn path{stroke-dashoffset:0}
.pp-sig-t{font-size:calc(15px * var(--fs));font-weight:800;color:var(--iceink);line-height:calc(22px * var(--fs))}
.pp-sig-t span{font-weight:600;color:var(--icedim)}
.pp-next{margin-top:64px;padding-top:26px;border-top:1px solid var(--icerule);
 display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;color:var(--iceink)}
.pp-next-l{font-size:calc(12px * var(--fs));font-weight:700;letter-spacing:.14em;text-transform:uppercase;
 color:var(--icedim)}
.pp-next-n{font-size:calc(26px * var(--fs));letter-spacing:-.03em}
.pp-next .arrow{transition:transform .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.pp-next:hover .arrow{transform:translateX(6px)}

/* ===================================================== partners index ==== */
.ptier{margin-top:72px}
.ptier:first-child{margin-top:44px}
.ptier-h{display:grid;grid-template-columns:240px 1fr;gap:34px;align-items:baseline;
 padding-bottom:20px;border-bottom:1px solid var(--rule)}
.ptier-h p{margin:0;font-size:calc(15px * var(--fs));line-height:calc(24px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);
 max-width:640px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px;
 margin-top:26px}
/* The puck was 110 wide in a 305 wide card, which left 139 pixels for the
   name. "CONSULTANTS" needs 138 of them, so it broke mid word and the cards
   read "MCW CONSULTAN TS". A smaller puck and a smaller name give every
   partner we have room to wrap at a space instead. */
.pcard{display:grid;grid-template-columns:92px 1fr;column-gap:18px;row-gap:14px;
 align-items:center;border:1px solid var(--rule);padding:20px 22px;
 transition:border-color .3s var(--ease-in,cubic-bezier(.16,1,.3,1)),transform .35s var(--ease-in,cubic-bezier(.16,1,.3,1)),background .3s var(--ease-in,cubic-bezier(.16,1,.3,1));
 transform-style:preserve-3d}
.pcard:hover{border-color:rgba(var(--ink-rgb),.62);background:rgba(var(--ink-rgb),.026)}
.pcard-l{width:92px;height:92px;border-radius:50%;background:var(--ink);display:grid;
 place-items:center;flex:none;box-shadow:0 12px 26px -12px rgba(0,0,0,.6)}
.pcard-mark{width:calc(var(--pw) * 92px);height:calc(var(--ph) * 92px);display:block}
.pcard-mark img{width:100%;height:100%;object-fit:contain}
.pcard-t{display:block;min-width:0}
.pcard-t b{display:block;font-size:calc(17px * var(--fs));line-height:1.12;letter-spacing:-.03em}
.pcard-t span{display:block;margin-top:8px;font-size:calc(13.5px * var(--fs));line-height:calc(20px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.82)}
.pcard-go{grid-column:2;display:inline-flex;align-items:center;gap:8px;
 padding-top:12px;border-top:1px solid rgba(var(--ink-rgb),.12);
 font-size:calc(10.5px * var(--fs));font-weight:800;letter-spacing:.14em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62)}
.pcard:hover .pcard-go{color:var(--ink)}
.pcard .arrow{width:20px;transition:transform .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.pcard:hover .arrow{transform:translateX(4px)}

/* Arrows are a navigational cue, not a flourish. The motion layer only draws
   a flourish inside a [data-draw] ancestor, which would leave every inline
   arrow invisible, so they are restored here. */
.arrow path{stroke-dasharray:none;stroke-dashoffset:0}
[data-draw] .arrow path{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200)}
.drawn .arrow path{stroke-dashoffset:0}

/* ============================================== small motion additions == */
[data-mag]{transition:transform .34s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.dcta{display:inline-flex}

/* ============================================== reduced motion =========== */
@media (prefers-reduced-motion:reduce){
  .pk-track{transform:none !important;flex-wrap:wrap;width:100%;justify-content:center;
   padding-left:64px;padding-right:64px}
  .pk-row{-webkit-mask-image:none;mask-image:none;overflow:visible}
  .pk-rows{margin:0}
  .pk-name{opacity:1;transform:none;position:static;margin-top:12px}
  .pk{height:auto}
  .pk-3d{position:relative;height:250px;transform:none}
  .pk-edge,.pk-side{display:none}
  .pk-face{transform:none;border:1px solid var(--g-pale2)}
  .pk:hover .pk-3d{transform:none}
  .cd-n i.roll{animation:none}
  .cd-lead .dot{animation:none}
  .dbar{transition:none}
  [data-m="fan"]{opacity:1 !important;transform:none !important}
  [data-m="logo"]{opacity:1 !important;transform:none !important;animation:none !important}
  .pp-sig-svg path{stroke-dashoffset:0 !important;transition:none}
  .pcard{transform:none !important}
}

/* ============================================== narrow =================== */
@media (max-width:1180px){
  .pp-id-in{grid-template-columns:1fr;gap:34px}
  .pp-card{max-width:340px}
  .pp-h1{font-size:calc(44px * var(--fs))}
  .ptier-h{grid-template-columns:1fr;gap:12px}
  .pk-rows{margin:0 -22px}
  .pk-track{padding-left:22px;padding-right:22px}
  .cd-n{font-size:calc(56px * var(--fs))}
  .cd-row{gap:30px}
}
@media (max-width:900px){
  .pk{width:170px;height:170px}
  .pk-3d{transform:rotateX(24deg) rotateZ(-3deg)}
  .pk:hover .pk-3d{transform:rotateX(24deg) rotateZ(-3deg) translateZ(20px)}
  .pk-track{gap:30px}
  @media (prefers-reduced-motion:reduce){.pk-3d{height:170px;transform:none}}
}
@media (max-width:760px){
  .pucks{padding:64px 0 56px}
  .pk-head{margin-bottom:34px}
  .pp-h1{font-size:calc(34px * var(--fs))}
  .pp-desc{font-size:calc(17px * var(--fs));line-height:calc(26px * var(--fs))}
  .pp-note-h{font-size:calc(32px * var(--fs))}
  .pp-note p{font-size:calc(18px * var(--fs));line-height:calc(29px * var(--fs))}
  .pp-gives{font-size:calc(18px * var(--fs)) !important;line-height:calc(29px * var(--fs)) !important}
  .pp-photos{grid-template-columns:1fr 1fr;gap:10px}
  .pgrid{grid-template-columns:1fr}
  .pcard{grid-template-columns:72px 1fr;padding:16px 18px}
  .pcard-l{width:78px;height:78px}
  .pcard-mark{width:calc(var(--pw) * 78px);height:calc(var(--ph) * 78px)}
  .pcard-go{grid-column:1/-1}
  .cd-n{font-size:calc(40px * var(--fs))}
  .cd-row{gap:22px}
  .cd-c .cd-n{font-size:calc(34px * var(--fs))}
  .dbar-in{padding:11px 18px;gap:12px}
  .dbar p{font-size:calc(13px * var(--fs));line-height:calc(19px * var(--fs))}
  .dbar-go{height:36px;padding:0 16px;font-size:calc(12.5px * var(--fs))}
  .pp-sig{flex-wrap:wrap;gap:12px}
}

/* Any fixed-ratio photo frame in v4. The gallery placeholder is a span, so it
   has to be told to fill its frame, otherwise object-fit crops the photograph
   against a box that is not the frame's shape. */
.cc-face .ph,.cc-face picture,
.lv-shot .ph,.lv-shot picture,
.nx-shot .ph,.nx-shot picture,
.pw-shot .ph,.pw-shot picture,
.pp-photos .ph,.pp-photos picture{display:block;width:100%;height:100%}

/* ====================================================== cost calculator === */
.cc{margin-top:48px}
.cc-head{border-bottom:1px solid var(--rule);padding-bottom:26px}
.cc-lab{display:block;font-size:calc(13px * var(--fs));font-weight:700;letter-spacing:.13em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.66)}
.cc-slide{display:flex;align-items:center;gap:28px;margin-top:18px}
.cc-slide input[type=range]{flex:1 1 auto;min-width:0;-webkit-appearance:none;appearance:none;
 height:6px;background:var(--rule);border-radius:0;cursor:pointer}
.cc-slide input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
 width:26px;height:26px;border-radius:50%;background:var(--ink);border:5px solid var(--navy);cursor:grab;
 box-shadow:0 4px 14px rgba(0,0,0,.45)}
.cc-slide input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;
 background:var(--ink);border:5px solid var(--navy);cursor:grab}
.cc-slide input[type=range]:focus-visible{outline:3px solid var(--focus);outline-offset:6px}
.cc-n{flex:none;min-width:2.1em;text-align:right;font-size:calc(62px * var(--fs));line-height:.9;
 letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.cc-body{display:grid;grid-template-columns:1fr 380px;gap:56px;margin-top:40px;align-items:start}
.cc-tab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.cc-tab th,.cc-tab td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--rule);
 font-size:calc(15px * var(--fs));font-weight:600}
.cc-tab thead th{font-size:calc(11px * var(--fs));font-weight:800;letter-spacing:.13em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62)}
.cc-tab td,.cc-tab tbody th{color:rgba(var(--ink-rgb),.82)}
.cc-tab .cc-unit,.cc-tab .cc-qty,.cc-tab .cc-line{text-align:right;white-space:nowrap}
.cc-tab thead th:nth-child(n+2){text-align:right}
.cc-sub th,.cc-sub td{padding-top:16px;font-weight:800;color:var(--ink)}
.cc-tot th,.cc-tot td{padding-top:16px;padding-bottom:18px;border-bottom:none;
 font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;text-transform:uppercase;
 letter-spacing:-.02em;font-size:calc(24px * var(--fs));color:var(--ink)}
.cc-tot td{text-align:right}
.cc-side{position:sticky;top:120px}
.cc-faces{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.cc-face{width:44px;height:44px;overflow:hidden;border-radius:50%;flex:none;
 opacity:0;transform:scale(.5);transition:opacity .34s var(--ease-in,cubic-bezier(.16,1,.3,1)),transform .34s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.cc-face.on{opacity:1;transform:none}
.cc-face .ph,.cc-face img{width:100%;height:100%;object-fit:cover;display:block}
.cc-say{font-size:calc(18px * var(--fs));line-height:calc(28px * var(--fs));font-weight:700;color:var(--ink);min-height:56px}
.cc-note{margin-top:30px;font-size:calc(14px * var(--fs));line-height:calc(22px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.62);max-width:760px}
.inv .cc-lab,.inv .cc-note{color:var(--icedim)}
.inv .cc-say,.inv .cc-tot th,.inv .cc-tot td,.inv .cc-sub th,.inv .cc-sub td{color:var(--iceink)}
.inv .cc-tab th,.inv .cc-tab td{border-color:var(--icerule);color:var(--g-slate)}
.inv .cc-slide input[type=range]{background:var(--icerule)}

/* ========================================================= gear ledger ==== */
.gl{margin-top:44px}
.gl-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:2px;
 background:var(--rule);border:1px solid var(--rule)}
.gl-list li{background:var(--bg);padding:24px 20px 22px;
 opacity:0;transform:translateY(18px);
 transition:opacity .5s var(--ease-in,cubic-bezier(.16,1,.3,1)) var(--d),transform .5s var(--ease-in,cubic-bezier(.16,1,.3,1)) var(--d)}
.gl-list li.in{opacity:1;transform:none}
.gl-n{display:block;font-size:calc(42px * var(--fs));line-height:.9;letter-spacing:-.035em;
 font-variant-numeric:tabular-nums}
.gl-l{display:block;margin-top:9px;font-size:calc(12px * var(--fs));font-weight:700;letter-spacing:.11em;
 text-transform:uppercase;color:rgba(var(--ink-rgb),.62)}
.gl-tot{margin-top:30px;font-size:calc(19px * var(--fs));line-height:calc(30px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);
 max-width:840px}
.gl-tot b{font-size:calc(26px * var(--fs));color:var(--ink);letter-spacing:-.02em}
.inv .gl-list{background:var(--icerule);border-color:var(--icerule)}
.inv .gl-list li{background:var(--ice)}
.inv .gl-l{color:var(--icedim)}
.inv .gl-tot{color:var(--icedim)} .inv .gl-tot b{color:var(--iceink)}

/* ====================================================== then and now ====== */
.tn{margin-top:48px}
.tn-stage{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--bg);
 --split:50%}
.tn-a,.tn-b{position:absolute;inset:0}
/* the placeholder span must be a block filling the stage, or the photograph
   inside it sizes itself and object-fit crops against a box that is not 3:2 */
.tn-a .ph,.tn-b .ph,.tn-a picture,.tn-b picture{display:block;width:100%;height:100%}
.tn-a img,.tn-b img{width:100%;height:100%;object-fit:cover;display:block}
.tn-b{clip-path:inset(0 0 0 var(--split))}
.tn-tag{position:absolute;bottom:18px;z-index:4;padding:7px 14px;background:rgba(13,15,16,.82);
 font-size:calc(11px * var(--fs));font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.tn-a .tn-tag{left:18px} .tn-b .tn-tag{right:18px}
.tn-bar{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:var(--ink);z-index:5;
 pointer-events:none;box-shadow:0 0 22px rgba(0,0,0,.5)}
.tn-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
 width:52px;height:52px;border-radius:50%;background:var(--ink);
 box-shadow:0 8px 26px rgba(0,0,0,.5)}
.tn-grip::before,.tn-grip::after{content:'';position:absolute;top:50%;width:0;height:0;
 border-top:6px solid transparent;border-bottom:6px solid transparent}
.tn-grip::before{left:13px;transform:translateY(-50%);border-right:8px solid var(--navy)}
.tn-grip::after{right:13px;transform:translateY(-50%);border-left:8px solid var(--navy)}
.tn-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:6;
 -webkit-appearance:none;appearance:none;background:none;margin:0}
.tn-range:focus-visible + .tn-tag,.tn-range:focus-visible{outline:none}
.tn-stage:focus-within .tn-bar{box-shadow:0 0 0 3px var(--focus)}
.tn-cap{margin-top:16px;font-size:calc(14px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.62)}
.inv .tn-cap{color:var(--icedim)}

/* ============================================================ rink map ====
   All of the map furniture is gone: the stage, the drawn lake, the grid, the
   numbered dots and the pucks with letters in them. What is left is a table
   and a list, laid on the same six columns as the rest of the page. */
.rm{margin-top:48px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
 gap:56px;align-items:start}
.rm-h{font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;font-size:calc(13px * var(--fs));
 text-transform:uppercase;letter-spacing:.14em;margin:0 0 20px;color:rgba(var(--ink-rgb),.62)}
.rm-tbl,.rm-side{min-width:0}
.rm-none{color:rgba(var(--ink-rgb),.82)}
.rm-hoods{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px}
.rm-hoods li{font-size:calc(15px * var(--fs));line-height:calc(23px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);
 padding-bottom:16px;border-bottom:1px solid var(--rule)}
.rm-hoods li:last-child{border-bottom:0;padding-bottom:0}
.rm-hoods b{color:var(--ink);display:block;font-size:calc(16px * var(--fs));font-weight:800;letter-spacing:-.01em}
.rm-hoods span{display:block;margin-top:5px}
.rm-note{margin-top:24px;font-size:calc(14px * var(--fs));line-height:calc(22px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.62)}
.inv .rm-hoods li,.inv .rm-note{color:var(--icedim)}
.inv .rm-hoods b{color:var(--iceink)}
@media (max-width:1000px){
  .rm{grid-template-columns:1fr;gap:44px}
}

/* ========================================================= thermometer ==== */
.th{margin-top:46px;border:1px solid var(--rule);padding:34px 36px 32px}
.th-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.th-h{margin-top:14px;font-size:calc(32px * var(--fs));line-height:1;letter-spacing:-.035em}
.th-note{margin-top:12px;font-size:calc(15px * var(--fs));line-height:calc(23px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);
 max-width:460px}
.th-fig{text-align:right}
.th-fig b{display:block;font-size:calc(44px * var(--fs));line-height:1;letter-spacing:-.035em;
 font-variant-numeric:tabular-nums}
.th-fig span{display:block;margin-top:8px;font-size:calc(12px * var(--fs));font-weight:700;letter-spacing:.11em;
 text-transform:uppercase;color:rgba(var(--ink-rgb),.62)}
.th-bar{margin-top:28px;height:16px;background:rgba(var(--ink-rgb),.09);overflow:hidden}
.th-fill{display:block;height:100%;width:0;
 background:linear-gradient(90deg,var(--navy),var(--navy2));
 transition:width 1.3s var(--ease-move,cubic-bezier(.65,0,.35,1)) .15s}
.th.in .th-fill{width:var(--pct)}
.th-say{margin-top:18px;font-size:calc(16px * var(--fs));line-height:calc(25px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.th-say b{color:var(--ink)}
.th .actions{margin-top:26px}
.inv .th{border-color:var(--icerule)}
.inv .th-note,.inv .th-fig span,.inv .th-say{color:var(--icedim)}
.inv .th-say b{color:var(--iceink)}
.inv .th-bar{background:rgba(23,26,28,.09)}

/* ======================================================== giving levels === */
.lvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px;margin-top:52px}
.lv{border:1px solid var(--rule);display:flex;flex-direction:column;overflow:hidden;
 transition:border-color .3s var(--ease-in,cubic-bezier(.16,1,.3,1)),transform .35s var(--ease-in,cubic-bezier(.16,1,.3,1));transform-style:preserve-3d}
.lv:hover{border-color:rgba(var(--ink-rgb),.62)}
.lv-shot{aspect-ratio:3/2;overflow:hidden}
.lv-shot .ph,.lv-shot img{width:100%;height:100%;object-fit:cover;display:block}
.lv-in{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1 1 auto}
.lv-amt{font-size:calc(40px * var(--fs));line-height:1;letter-spacing:-.035em;color:var(--ember2)}
.lv-h{margin-top:12px;font-size:calc(19px * var(--fs));font-weight:800;letter-spacing:-.01em}
.lv-in p{margin-top:12px;font-size:calc(15px * var(--fs));line-height:calc(24px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);
 flex:1 1 auto}
.lv-in .btn{margin-top:24px}
.inv .lv{border-color:var(--icerule)} .inv .lv-in p{color:var(--icedim)}
.inv .lv-amt{color:var(--ember)}

/* =========================================================== monthly ====== */
.mo{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:48px;align-items:start}
.mo-h{margin-top:16px;font-size:calc(38px * var(--fs));line-height:1.02;letter-spacing:-.035em}
.mo-lead p{margin-top:20px;font-size:calc(17px * var(--fs));line-height:calc(28px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.mo-list li{display:grid;grid-template-columns:auto auto 1fr auto;align-items:baseline;gap:14px;
 padding:22px 0;border-bottom:1px solid var(--rule)}
.mo-list li:first-child{border-top:1px solid var(--rule)}
.mo-a{font-size:calc(34px * var(--fs));line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.mo-m{font-size:calc(12px * var(--fs));font-weight:700;letter-spacing:.1em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62)}
.mo-w{font-size:calc(15px * var(--fs));line-height:calc(22px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.mo-go{display:inline-flex;align-items:center;gap:8px;font-size:calc(12px * var(--fs));font-weight:800;
 letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.mo-go .arrow{width:20px;transition:transform .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.mo-go:hover .arrow{transform:translateX(5px)}
.inv .mo-lead p,.inv .mo-w{color:var(--icedim)}
.inv .mo-list li{border-color:var(--icerule)}
.inv .mo-m{color:var(--icedim)}

/* ======================================================= waiting list ===== */
.wl{margin-top:44px;max-width:880px}
.wl-big{font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;text-transform:uppercase;
 letter-spacing:-.035em;font-size:calc(44px * var(--fs));line-height:1.02}
.wl p + p{margin-top:20px}
.wl p:not(.wl-big):not(.wl-small){font-size:calc(18px * var(--fs));line-height:calc(29px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.wl-small{margin-top:22px;font-size:calc(17px * var(--fs));font-weight:800;color:var(--ember2)}
.wl .actions{margin-top:30px}
.inv .wl p:not(.wl-big):not(.wl-small){color:var(--icedim)}
.inv .wl-small{color:var(--ember)}

/* ==================================================== school to rink ====== */
.pw{margin-top:52px;counter-reset:pw}
.pw-step{display:grid;grid-template-columns:96px 1fr 300px;gap:34px;align-items:center;
 padding:30px 0;border-top:1px solid var(--rule);
 opacity:0;transform:translateY(24px);
 transition:opacity .6s var(--ease-in,cubic-bezier(.16,1,.3,1)) var(--d),transform .6s var(--ease-in,cubic-bezier(.16,1,.3,1)) var(--d)}
.pw-step.in{opacity:1;transform:none}
.pw-step:last-child{border-bottom:1px solid var(--rule)}
.pw-n{font-size:calc(56px * var(--fs));line-height:1;letter-spacing:-.04em;color:rgba(var(--ink-rgb),.62)}
.pw-who{font-size:calc(11px * var(--fs));font-weight:800;letter-spacing:.13em;text-transform:uppercase;
 color:var(--ember2)}
.pw-h{margin-top:10px;font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;
 text-transform:uppercase;letter-spacing:-.03em;font-size:calc(26px * var(--fs));line-height:1.04}
.pw-c p{margin-top:12px;font-size:calc(16px * var(--fs));line-height:calc(26px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);
 max-width:620px}
.pw-shot{aspect-ratio:3/2;overflow:hidden}
.pw-shot .ph,.pw-shot img{width:100%;height:100%;object-fit:cover;display:block}
.inv .pw-n{color:rgba(23,26,28,.22)} .inv .pw-c p{color:var(--icedim)}
.inv .pw-step{border-color:var(--icerule)} .inv .pw-who{color:var(--ember)}

/* ====================================================== what comes next === */
.nxs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:52px}
.nx{border:1px solid var(--rule);display:flex;flex-direction:column;overflow:hidden;
 transition:border-color .3s var(--ease-in,cubic-bezier(.16,1,.3,1)),transform .35s var(--ease-in,cubic-bezier(.16,1,.3,1));transform-style:preserve-3d}
.nx:hover{border-color:rgba(var(--ink-rgb),.62)}
.nx-shot{aspect-ratio:3/2;overflow:hidden}
.nx-shot .ph,.nx-shot img{width:100%;height:100%;object-fit:cover;display:block}
.nx-in{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1 1 auto}
.nx-h{font-size:calc(24px * var(--fs));line-height:1.04;letter-spacing:-.03em}
.nx-in p{margin-top:14px;font-size:calc(15px * var(--fs));line-height:calc(24px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);
 flex:1 1 auto}
.nx-in .actions{margin-top:24px}
.inv .nx{border-color:var(--icerule)} .inv .nx-in p{color:var(--icedim)}

/* ========================================================== media room ==== */
.mr-fast{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.mr-fast-c h2{font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;font-size:calc(20px * var(--fs));
 text-transform:uppercase;letter-spacing:-.02em}
.mr-fast-c p{margin-top:12px;font-size:calc(16px * var(--fs));line-height:calc(26px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.mr-fast-c a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.mr-copy h3{font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;font-size:calc(17px * var(--fs));
 text-transform:uppercase;letter-spacing:.02em;margin-top:34px;color:var(--ember2)}
.mr-copy h3:first-child{margin-top:0}
.mr-copy p{margin-top:12px;font-size:calc(17px * var(--fs));line-height:calc(28px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);
 max-width:860px;padding:16px 20px;border-left:2px solid var(--navy2);
 background:rgba(59,62,114,.14)}
.inv .mr-fast-c p,.inv .mr-copy p{color:var(--icedim)}
.inv .mr-fast-c a{color:var(--iceink)}
.inv .mr-copy h3{color:var(--navy)}

/* ============================================================ ice trail === */
.trail{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.trail i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--ink);
 transform:translate(-50%,-50%) scale(1);opacity:.55;
 animation:trailfade 700ms var(--ease-move,cubic-bezier(.65,0,.35,1)) forwards}
@keyframes trailfade{to{opacity:0;transform:translate(-50%,-50%) scale(.25)}}

/* ==================================================== page transitions ==== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .18s var(--ease-move,cubic-bezier(.65,0,.35,1)) both}
::view-transition-new(root){animation:vtIn .30s var(--ease-in,cubic-bezier(.16,1,.3,1)) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}
::view-transition-group(pucklogo){animation-duration:.52s;
 animation-timing-function:var(--ease-in,cubic-bezier(.16,1,.3,1))}

/* ========================================================== site index ==== */
.si{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:44px 34px;
 margin-top:20px}
.si-g{min-width:0}
.si-h{font-size:calc(19px * var(--fs));letter-spacing:.02em;color:var(--ember2);
 padding-bottom:12px;border-bottom:1px solid var(--rule)}
.si-l{margin-top:6px}
.si-l li{border-bottom:1px solid rgba(var(--ink-rgb),.07)}
.si-a{display:block;padding:13px 0}
.si-t{display:block;font-size:calc(16px * var(--fs));line-height:calc(22px * var(--fs));font-weight:700}
.si-n{display:block;margin-top:4px;font-size:calc(13px * var(--fs));line-height:calc(19px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.82)}
.si-u{display:block;margin-top:5px;font-family:Consolas,ui-monospace,monospace;font-size:calc(11.5px * var(--fs));
 color:rgba(var(--ink-rgb),.62);word-break:break-all}
.si-a:hover .si-t{text-decoration:underline;text-underline-offset:3px}
.si-a:hover .si-u{color:var(--ember2)}
@media (max-width:760px){.si{grid-template-columns:1fr;gap:34px}}

/* ============================================== reduced motion =========== */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .cc-face{opacity:1 !important;transform:none !important;transition:none}
  .gl-list li,.pw-step{opacity:1 !important;transform:none !important;transition:none}
  .th-fill{transition:none}
  .th .th-fill{width:var(--pct)}
  .trail{display:none}
  .lv,.nx{transform:none !important}
  .tn-b{clip-path:none;position:static}
  .tn-a{position:static}
  .tn-stage{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;
   align-items:start}
  /* side by side, each photograph at its own shape and nothing cropped */
  .tn-a .ph,.tn-b .ph,.tn-a picture,.tn-b picture{height:auto}
  .tn-a img,.tn-b img{height:auto;object-fit:contain}
  .tn-bar,.tn-range{display:none}
  .tn-a .tn-tag,.tn-b .tn-tag{position:static;display:inline-block;margin-bottom:8px}
}

/* ============================================== narrow =================== */
@media (max-width:1180px){
  .cc-body{grid-template-columns:1fr;gap:36px}
  .cc-side{position:static}
  .mo{grid-template-columns:1fr;gap:34px}
  .pw-step{grid-template-columns:70px 1fr;row-gap:20px}
  .pw-shot{grid-column:1/-1;max-width:420px}
  .nxs{grid-template-columns:1fr}
  .mr-fast{grid-template-columns:1fr;gap:24px}
  .rm-stage{aspect-ratio:4/3}
  /* below this width the labels cannot be kept apart, so the numbered markers
     carry the map and the lists underneath carry the names */
  .rm-lab,.rm-sub{position:absolute;width:1px;height:1px;overflow:hidden;
   clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:760px){
  .cc-n{font-size:calc(44px * var(--fs))}
  .cc-tab th,.cc-tab td{padding:9px 7px;font-size:calc(13px * var(--fs))}
  .cc-tab .cc-unit{display:none}
  .cc-tab thead th:nth-child(2){display:none}
  .cc-tot th,.cc-tot td{font-size:calc(19px * var(--fs))}
  .wl-big{font-size:calc(28px * var(--fs))}
  .th{padding:24px 22px}
  .th-h{font-size:calc(24px * var(--fs))} .th-fig b{font-size:calc(32px * var(--fs))} .th-fig{text-align:left}
  .mo-h{font-size:calc(27px * var(--fs))}
  .mo-list li{grid-template-columns:auto 1fr;row-gap:6px}
  .mo-go{grid-column:1/-1}
  .pw-n{font-size:calc(36px * var(--fs))}
  .pw-h{font-size:calc(20px * var(--fs))}
  .rm-stage{aspect-ratio:1/1}
  .gl-list{grid-template-columns:1fr 1fr}
  .gl-n{font-size:calc(32px * var(--fs))}
  .lv-amt{font-size:calc(32px * var(--fs))}
}

/* ========================================================= team board ===== */
.tb{margin-top:44px}
.tb-filters{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:26px;
 border-bottom:1px solid var(--rule)}
.tb-chip{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
 padding:9px 15px;border:1px solid var(--rule);font-size:calc(12px * var(--fs));font-weight:700;
 letter-spacing:.06em;text-transform:uppercase;color:rgba(var(--ink-rgb),.82);
 transition:border-color .25s var(--ease-in,cubic-bezier(.16,1,.3,1)),background .25s var(--ease-in,cubic-bezier(.16,1,.3,1)),color .25s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.tb-chip b{font-size:calc(11px * var(--fs));font-weight:800;color:rgba(var(--ink-rgb),.62)}
.tb-chip:hover{border-color:rgba(var(--ink-rgb),.62);color:var(--ink)}
.tb-chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.tb-chip.on b{color:var(--navy)}
.tb-chip:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.tb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
 gap:44px 34px;margin-top:38px}
.tb-g{min-width:0;transition:opacity .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.tb-g[hidden]{display:none}
.tb-gh{display:flex;align-items:center;gap:11px;font-family:ArchivoBlack,Archivo,Arial,sans-serif;
 font-weight:400;text-transform:uppercase;letter-spacing:-.02em;font-size:calc(17px * var(--fs));line-height:1.1}
.tb-gk{width:9px;height:9px;border-radius:50%;background:var(--ember);flex:none}
.tb-gc{margin-left:auto;font-family:Archivo,Arial,sans-serif;font-size:calc(11px * var(--fs));font-weight:800;
 letter-spacing:.1em;color:rgba(var(--ink-rgb),.62)}
.tb-gn{margin-top:9px;font-size:calc(13.5px * var(--fs));line-height:calc(20px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.tb-l{margin-top:16px;display:flex;flex-direction:column;gap:2px}

.tb-p{position:relative;display:grid;grid-template-columns:52px 1fr;
 column-gap:15px;row-gap:10px;align-items:center;
 padding:14px 15px 13px;border:1px solid transparent;background:rgba(var(--ink-rgb),.028);
 cursor:default;
 transition:background .25s var(--ease-in,cubic-bezier(.16,1,.3,1)),border-color .25s var(--ease-in,cubic-bezier(.16,1,.3,1)),opacity .25s var(--ease-in,cubic-bezier(.16,1,.3,1)),transform .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.tb-p:hover,.tb-p:focus-visible{background:rgba(var(--ink-rgb),.075);
 border-color:rgba(var(--ink-rgb),.62);transform:translateX(4px)}
.tb-p:focus-visible{outline:none;border-color:var(--focus)}
.tb.dim .tb-p{opacity:.24}
.tb.dim .tb-p.hi{opacity:1;border-color:rgba(var(--ink-rgb),.62)}
.tb.dim .tb-p.chain{opacity:1;border-color:var(--ember)}
.tb-mono{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;
 background:radial-gradient(120% 120% at 32% 22%,var(--puck-hi) 0%,var(--puck-mid) 42%,var(--puck-lo) 100%);
 box-shadow:0 5px 14px -6px rgba(0,0,0,.7),inset 0 -2px 5px rgba(30,36,45,.10)}
.tb-mono i{font-style:normal;font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;
 font-size:calc(16px * var(--fs));letter-spacing:-.02em;color:var(--navy)}
.tb-p.lead .tb-mono{background:linear-gradient(160deg,var(--navy2),var(--navy));
 box-shadow:0 5px 14px -6px rgba(0,0,0,.7)}
.tb-p.lead .tb-mono i{color:var(--ink)}
.tb-txt{min-width:0}
.tb-n{display:block;font-size:calc(15.5px * var(--fs));line-height:1.15;letter-spacing:-.02em}
.tb-r{display:block;margin-top:5px;font-size:calc(12.5px * var(--fs));line-height:calc(18px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.82)}
.tb-note{display:block;margin-top:6px;font-size:calc(12px * var(--fs));line-height:calc(17px * var(--fs));font-weight:600;
 color:var(--ember2)}
/* In the flow as its own row. It used to be pinned to the corner and it ran
   into the role whenever the card narrowed. Nothing is positioned on top of
   anything else here. */
.tb-to{grid-column:2;padding-top:9px;border-top:1px solid rgba(var(--ink-rgb),.09);
 font-size:calc(10px * var(--fs));font-weight:800;letter-spacing:.11em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62);transition:color .25s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.tb-p:hover .tb-to,.tb-p:focus-visible .tb-to{color:rgba(var(--ink-rgb),.62)}
.tb-foot{margin-top:40px;padding-top:24px;border-top:1px solid var(--rule);
 font-size:calc(15px * var(--fs));line-height:calc(24px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);max-width:760px}
.tb-foot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* =========================================================== glossary ===== */
/* The hairlines between the cells were made by colouring the grid itself and
   letting a two pixel gap show through. With ten terms in three columns the
   last row is one cell wide, and the other two thirds of it had nothing to
   cover the colour: a bare slab of it, six hundred pixels across, sat under
   the last definition. The separators are borders on the cells now, so a cell
   that does not exist draws nothing. */
.gs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
 margin-top:44px;background:transparent;border-top:1px solid var(--rule);
 border-left:1px solid var(--rule)}
.gs-i{background:transparent;padding:24px 24px 26px;
 border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.gs-t{font-size:calc(17px * var(--fs));letter-spacing:-.02em;color:var(--ember2)}
.gs-d{margin:11px 0 0;font-size:calc(14.5px * var(--fs));line-height:calc(23px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.inv .gs,.inv .gs-i{border-color:var(--icerule)}
.inv .gs-t{color:var(--navy)} .inv .gs-d{color:var(--icedim)}

/* ======================================================== what to bring === */
.br{margin-top:44px;display:flex;flex-direction:column;gap:2px}
.br-i{display:grid;grid-template-columns:26px 1fr auto;gap:16px;align-items:start;
 padding:20px 22px;background:rgba(var(--ink-rgb),.028);
 opacity:0;transform:translateY(16px);
 transition:opacity .5s var(--ease-in,cubic-bezier(.16,1,.3,1)) var(--d),transform .5s var(--ease-in,cubic-bezier(.16,1,.3,1)) var(--d)}
.br-i.in{opacity:1;transform:none}
.br-k{width:26px;height:26px;border-radius:50%;border:2px solid rgba(var(--ink-rgb),.28);
 margin-top:1px;position:relative}
.br-i.must .br-k{border-color:var(--ember);background:var(--ember)}
.br-i.must .br-k::after{content:'';position:absolute;left:8px;top:4px;width:6px;height:12px;
 border:2px solid var(--ink);border-top:0;border-left:0;transform:rotate(42deg)}
.br-c b{display:block;font-size:calc(17px * var(--fs));font-weight:800;letter-spacing:-.01em}
.br-c span{display:block;margin-top:6px;font-size:calc(14.5px * var(--fs));line-height:calc(22px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.82)}
.br-tag{font-size:calc(10px * var(--fs));font-weight:800;letter-spacing:.12em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62);white-space:nowrap;padding-top:4px}
.br-i.must .br-tag{color:var(--ember2)}
.br-note{margin-top:22px;font-size:calc(14px * var(--fs));font-weight:700;color:rgba(var(--ink-rgb),.62)}

/* ======================================================= eligibility ====== */
.el,.sz{margin-top:40px}
.el-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:640px}
.el-f{min-width:0}
.el-lab{display:block;font-size:calc(12px * var(--fs));font-weight:800;letter-spacing:.12em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62);margin-bottom:10px}
.el-in{width:100%;height:56px;padding:0 18px;background:rgba(var(--ink-rgb),.05);
 border:1px solid var(--rule);color:var(--ink);font:inherit;font-size:calc(19px * var(--fs));font-weight:700;
 border-radius:0;-webkit-appearance:none;appearance:none}
.el-in::placeholder{color:rgba(var(--ink-rgb),.62)}
.el-in:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
.el-out{margin-top:28px;padding:24px 26px;border-left:3px solid var(--rule);
 background:rgba(var(--ink-rgb),.03);max-width:760px;
 transition:border-color .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.el-out.yes{border-left-color:var(--ok)}
.el-out.maybe{border-left-color:var(--ember)}
.el-out.no{border-left-color:rgba(var(--ink-rgb),.62)}
.el-msg{margin:0;font-size:calc(17px * var(--fs));line-height:calc(27px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.el-msg b{color:var(--ink)}
.el-out .actions{margin-top:20px}

/* ============================================================ sizer ======= */
.sz-f{max-width:320px}
.sz-out{margin-top:22px;font-size:calc(16px * var(--fs));line-height:calc(25px * var(--fs));font-weight:700;color:var(--ink);min-height:50px}
.sz-t tbody tr{transition:background .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.sz-t tbody tr.hit{background:rgba(184,54,42,.20)}
.sz-t tbody tr.hit th{color:var(--ink)}
.sz-note{margin-top:20px;font-size:calc(14px * var(--fs));line-height:calc(22px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.62);max-width:760px}

/* ============================================================= dial ======= */
.dl{display:flex;align-items:center;gap:26px;margin-top:38px}
.dl-ring{position:relative;width:132px;height:132px;flex:none}
.dl-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.dl-bg{fill:none;stroke:rgba(var(--ink-rgb),.10);stroke-width:9}
.dl-fg{fill:none;stroke:var(--ember);stroke-width:9;stroke-linecap:round;
 stroke-dasharray:327;stroke-dashoffset:327;
 transition:stroke-dashoffset 1.3s var(--ease-move,cubic-bezier(.65,0,.35,1)) .2s}
.dl.in .dl-fg{stroke-dashoffset:calc(327 - 327 * var(--pct) / 100)}
.dl-n{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(38px * var(--fs));
 letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dl-t b{display:block;font-size:calc(20px * var(--fs));font-weight:800}
.dl-t span{display:block;margin-top:5px;font-size:calc(13px * var(--fs));font-weight:700;letter-spacing:.1em;
 text-transform:uppercase;color:rgba(var(--ink-rgb),.62)}
.dl-note{margin-top:10px !important;text-transform:none !important;letter-spacing:0 !important;
 font-size:calc(14px * var(--fs)) !important;font-weight:600 !important;line-height:calc(21px * var(--fs))}

/* ========================================================== wishlist ====== */
.wl-list{margin-top:40px;display:flex;flex-direction:column;gap:2px}
.wl-list li{display:grid;grid-template-columns:1fr auto auto;gap:22px;align-items:center;
 padding:20px 22px;background:rgba(var(--ink-rgb),.028);
 opacity:0;transform:translateY(14px);
 transition:opacity .5s var(--ease-in,cubic-bezier(.16,1,.3,1)) var(--d),transform .5s var(--ease-in,cubic-bezier(.16,1,.3,1)) var(--d),background .25s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.wl-list li.in{opacity:1;transform:none}
.wl-list li:hover{background:rgba(var(--ink-rgb),.07)}
.wl-i b{display:block;font-size:calc(17px * var(--fs));font-weight:800}
.wl-i span{display:block;margin-top:5px;font-size:calc(13.5px * var(--fs));line-height:calc(20px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.82)}
.wl-c{font-size:calc(26px * var(--fs));letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.wl-go{display:inline-flex;align-items:center;gap:8px;font-size:calc(11px * var(--fs));font-weight:800;
 letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--ember2)}
.wl-go .arrow{width:20px;transition:transform .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.wl-go:hover .arrow{transform:translateX(5px)}

/* ===================================================== volunteer wall ===== */
.vw{margin-top:44px}
.vw-in{font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;text-transform:uppercase;
 letter-spacing:-.02em;font-size:calc(clamp(19px,2.6vw,34px) * var(--fs));line-height:1.28;
 color:rgba(var(--ink-rgb),.62);text-align:center;
 -webkit-user-select:none;user-select:none}
/* These are people's names, so they are readable first and an effect second. */
.vw-in span{transition:color .25s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.vw-in span:hover{color:var(--ink)}
.vw-note{margin-top:26px;text-align:center;font-size:calc(14px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.62)}

/* ======================================================= compare cost ===== */
.cm{margin-top:40px;display:flex;flex-direction:column;gap:2px}
.cm-i{display:grid;grid-template-columns:minmax(180px,1fr) minmax(90px,2fr) auto;gap:22px;
 align-items:center;padding:18px 22px;background:rgba(var(--ink-rgb),.028);
 opacity:0;transform:translateY(14px);
 transition:opacity .5s var(--ease-in,cubic-bezier(.16,1,.3,1)) var(--d),transform .5s var(--ease-in,cubic-bezier(.16,1,.3,1)) var(--d)}
.cm-i.in{opacity:1;transform:none}
.cm-t b{display:block;font-size:calc(16px * var(--fs));font-weight:800;line-height:1.25}
.cm-t span{display:block;margin-top:5px;font-size:calc(13px * var(--fs));line-height:calc(19px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.82)}
.cm-bar{display:block;height:14px;background:rgba(var(--ink-rgb),.07);overflow:hidden}
.cm-bar i{display:block;height:100%;width:0;background:rgba(var(--ink-rgb),.34);
 transition:width 1.1s var(--ease-move,cubic-bezier(.65,0,.35,1)) var(--d)}
.cm-i.in .cm-bar i{width:var(--w)}
.cm-i.us .cm-bar i{background:var(--ember)}
.cm-i.us .cm-c{color:var(--ember2)}
.cm-c{font-size:calc(23px * var(--fs));letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cm-note{margin-top:22px;font-size:calc(14px * var(--fs));line-height:calc(22px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.62);max-width:820px}
.inv .cm-note,.inv .sz-note,.inv .br-note,.inv .vw-note{color:var(--icedim)}

/* =========================================================== archive ====== */
.ars{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:52px}
.ar{border:1px solid var(--rule);overflow:hidden;display:flex;flex-direction:column;
 transition:border-color .3s var(--ease-in,cubic-bezier(.16,1,.3,1)),transform .35s var(--ease-in,cubic-bezier(.16,1,.3,1));transform-style:preserve-3d}
.ar:hover{border-color:rgba(var(--ink-rgb),.62)}
.ar-shot{position:relative;aspect-ratio:3/2;overflow:hidden}
.ar-shot .ph,.ar-shot picture{display:block;width:100%;height:100%}
.ar-shot img{width:100%;height:100%;object-fit:cover;display:block}
.ar-state{position:absolute;left:14px;top:14px;padding:6px 12px;font-size:calc(10px * var(--fs));font-weight:800;
 letter-spacing:.13em;text-transform:uppercase;background:rgba(13,15,16,.84);color:var(--ink)}
.ar-upcoming{background:var(--ember)}
.ar-ongoing{background:var(--navy)}
.ar-in{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1 1 auto}
.ar-h{font-size:calc(23px * var(--fs));line-height:1.05;letter-spacing:-.03em}
.ar-meta{margin:18px 0 0;display:flex;flex-direction:column;gap:9px}
.ar-meta div{display:grid;grid-template-columns:96px 1fr;gap:12px}
.ar-meta dt{font-size:calc(10.5px * var(--fs));font-weight:800;letter-spacing:.11em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62);padding-top:2px}
.ar-meta dd{margin:0;font-size:calc(14px * var(--fs));line-height:calc(20px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.ar-in > p{margin-top:18px;font-size:calc(14.5px * var(--fs));line-height:calc(23px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);
 flex:1 1 auto}
.ar-in .actions{margin-top:22px}

/* ============================================================= roles ====== */
.rls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:18px;margin-top:52px}
.rl{border:1px solid var(--rule);padding:26px 26px 24px;display:flex;flex-direction:column;
 transition:border-color .3s var(--ease-in,cubic-bezier(.16,1,.3,1)),background .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.rl:hover{border-color:rgba(var(--ink-rgb),.62);background:rgba(var(--ink-rgb),.026)}
.rl-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rl-t{font-size:calc(19px * var(--fs));line-height:1.1;letter-spacing:-.025em}
.rl-when{font-size:calc(10px * var(--fs));font-weight:800;letter-spacing:.12em;text-transform:uppercase;
 color:var(--ember2);white-space:nowrap}
.rl-time{margin-top:10px;font-size:calc(12.5px * var(--fs));font-weight:700;letter-spacing:.05em;
 color:rgba(var(--ink-rgb),.62)}
.rl-d{margin-top:13px;font-size:calc(14.5px * var(--fs));line-height:calc(23px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);
 flex:1 1 auto}
.rl-go{margin-top:22px;font-size:calc(11.5px * var(--fs));font-weight:800;letter-spacing:.11em;text-transform:uppercase;
 display:inline-flex;align-items:center;gap:8px}
.rl-go .arrow{width:20px;transition:transform .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.rl:hover .rl-go .arrow{transform:translateX(5px)}

/* ========================================================== changelog ===== */
.cl{margin-top:44px;max-width:900px}
.cl-i{display:grid;grid-template-columns:130px 1fr;gap:28px;padding:22px 0;
 border-top:1px solid var(--rule)}
.cl-i:last-child{border-bottom:1px solid var(--rule)}
.cl-d{font-family:Consolas,ui-monospace,monospace;font-size:calc(13px * var(--fs));font-weight:600;
 color:var(--ember2);padding-top:3px}
.cl-i p{margin:0;font-size:calc(16px * var(--fs));line-height:calc(26px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}

/* ================================================= reading progress ======= */
.rp{position:fixed;left:0;top:0;height:3px;z-index:95;background:var(--ember);
 width:var(--rp,0%);transition:width .12s linear;pointer-events:none}

/* ==================================================== sticky section ====== */
.ssec{position:sticky;top:0;z-index:40;background:var(--bg);
 border-bottom:1px solid var(--rule);transform:translateY(-100%);
 transition:transform .35s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.ssec.on{transform:none}
.ssec-in{max-width:1280px;margin:0 auto;padding:11px 64px;
 display:flex;align-items:center;gap:12px;font-size:calc(11.5px * var(--fs));font-weight:800;
 letter-spacing:.13em;text-transform:uppercase;color:rgba(var(--ink-rgb),.7)}
.ssec-in .dot{width:7px;height:7px;border-radius:50%;background:var(--ember);flex:none}

/* ============================================================ 404 ========= */
.nf-search{margin-top:40px;max-width:620px}
.nf-row{display:flex;gap:12px;margin-top:10px}
.nf-row .el-in{flex:1 1 auto;min-width:0}
.nf-row .btn{flex:none}
.puckplay{position:relative;margin-top:56px;height:230px;border:1px solid var(--rule);
 background:linear-gradient(180deg,rgba(59,62,114,.16),rgba(59,62,114,.04));overflow:hidden;
 touch-action:none;cursor:grab}
.puckplay:active{cursor:grabbing}
.pp-net{position:absolute;right:26px;top:50%;transform:translateY(-50%);
 width:74px;height:110px;border:3px solid rgba(var(--ink-rgb),.34);border-right:0;
 border-radius:6px 0 0 6px;
 background:repeating-linear-gradient(45deg,rgba(var(--ink-rgb),.06) 0 5px,transparent 5px 10px)}
.pp-puck{position:absolute;left:60px;top:104px;width:46px;height:20px;border-radius:50%;
 background:linear-gradient(180deg,var(--g-edge),#15181B);
 box-shadow:0 7px 14px -5px rgba(0,0,0,.75),inset 0 1px 0 rgba(var(--ink-rgb),.18);
 will-change:transform}
.pp-hint{position:absolute;left:22px;bottom:16px;font-size:calc(10.5px * var(--fs));font-weight:800;
 letter-spacing:.13em;text-transform:uppercase;color:rgba(var(--ink-rgb),.62)}
.puckplay.scored .pp-hint::after{content:' He shoots, he scores.';color:var(--ember2)}

/* =========================================================== search ======= */
.sr-none{border-bottom:0 !important;padding:26px 0 0 !important}
.sr-none p{font-size:calc(17px * var(--fs));font-weight:800;margin:0}
.sr-none ul{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.sr-none li{border:0;padding:0;font-size:calc(15.5px * var(--fs));line-height:calc(24px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.82)}
.sr-none a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ============================================================ print ======= */
@media print{
  *{background:var(--ink) !important;color:var(--g-near) !important;box-shadow:none !important}
  header.shell,.foot,.dbar,.ticker,.pucks,.prog,#intro,.pausebtn,.tb-filters,
  .puckplay,.rp,.ssec,.actions,.skip,.marq{display:none !important}
  .story{height:auto !important}
  .act{position:static !important;opacity:1 !important;page-break-inside:avoid}
  main{padding:0}
  .outer{padding:0}
  .sec{padding:18pt 0;page-break-inside:avoid}
  h1,h2,h3{color:var(--g-near) !important;page-break-after:avoid}
  h1.hero-h1{font-size:34pt;line-height:1.02}
  h2.h2{font-size:19pt}
  p,li,td,th{font-size:10.5pt;line-height:1.45;color:#222 !important}
  img{max-width:100% !important;page-break-inside:avoid}
  table.t{page-break-inside:avoid}
  a[href^="http"]::after{content:' (' attr(href) ')';font-size:8pt;color:var(--g-grey) !important}
  a[href^="mailto"]::after{content:' (' attr(href) ')';font-size:8pt;color:var(--g-grey) !important}
  .fact-n,.gl-n,.cc-n,.cm-c,.wl-c{color:var(--g-near) !important}
  .cm-bar i{background:#888 !important;width:var(--w) !important}
  @page{margin:14mm}
}

/* ========================================================= as seen in ===== */
.asi{margin-top:44px}
.asi-l{margin-top:22px;border-top:1px solid var(--rule)}
.asi-a{display:grid;grid-template-columns:minmax(150px,auto) 1fr auto;gap:26px;align-items:baseline;
 padding:20px 4px;border-bottom:1px solid var(--rule);
 transition:background .25s var(--ease-in,cubic-bezier(.16,1,.3,1)),padding-left .25s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.asi-a:hover{background:rgba(var(--ink-rgb),.035);padding-left:14px}
.asi-o{font-size:calc(20px * var(--fs));letter-spacing:-.025em;white-space:nowrap}
.asi-t{font-size:calc(15px * var(--fs));line-height:calc(23px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.asi-d{font-size:calc(11.5px * var(--fs));font-weight:800;letter-spacing:.1em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62);white-space:nowrap}
.asi-note{margin-top:22px;font-size:calc(13.5px * var(--fs));line-height:calc(21px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.62);max-width:760px}
.inv .asi-l,.inv .asi-a{border-color:var(--icerule)}
.inv .asi-t,.inv .asi-d,.inv .asi-note{color:var(--icedim)}
@media (max-width:760px){
  .asi-a{grid-template-columns:1fr;gap:7px;padding:18px 4px}
  .asi-o{font-size:calc(17px * var(--fs))}
}

/* ============================================== reduced motion =========== */
@media (prefers-reduced-motion:reduce){
  .br-i,.wl-list li,.cm-i{opacity:1 !important;transform:none !important;transition:none}
  .cm-i .cm-bar i{width:var(--w);transition:none}
  .dl-fg{transition:none;stroke-dashoffset:calc(327 - 327 * var(--pct) / 100)}
  .tb-p:hover,.tb-p:focus-visible{transform:none}
  .ar,.rl{transform:none !important}
  .rp,.ssec{transition:none}
}

/* ============================================== narrow =================== */
@media (max-width:1180px){
  .ars{grid-template-columns:1fr}
  .cl-i{grid-template-columns:1fr;gap:8px}
  .tb-grid{gap:36px 24px}
}
@media (max-width:900px){
  /* Any table with more columns than a phone can hold scrolls inside its own
     box rather than pushing the whole page sideways. One rule, every table. */
  table.t{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
   max-width:100%}
  table.t thead th{white-space:nowrap}
  .sz-t tbody th,.sz-t td{white-space:nowrap}
}
@media (max-width:760px){
  .el-row{grid-template-columns:1fr;gap:18px}
  .tb-p{grid-template-columns:44px 1fr;padding:13px 14px}
  .tb-mono{width:44px;height:44px} .tb-mono i{font-size:calc(14px * var(--fs))}
  .tb-to{font-size:calc(9px * var(--fs))}
  .wl-list li{grid-template-columns:1fr auto;row-gap:12px}
  .wl-go{grid-column:1/-1}
  .cm-i{grid-template-columns:1fr auto;row-gap:10px}
  .cm-bar{grid-column:1/-1}
  .gs{grid-template-columns:1fr}
  .br-i{grid-template-columns:22px 1fr;row-gap:8px;padding:16px 16px}
  .br-tag{grid-column:2}
  .ar-meta div{grid-template-columns:1fr;gap:2px}
  .dl{flex-direction:column;align-items:flex-start;gap:18px}
}

/* ==================================================== application form ==== */
.af{margin-top:44px}
.af-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.af-sec{padding:34px 0 6px;border-top:1px solid var(--rule)}
.af-sec:first-of-type{border-top:0;padding-top:0}
.af-h{display:flex;align-items:center;gap:15px;font-size:calc(23px * var(--fs));line-height:1.1;
 letter-spacing:-.03em;margin-bottom:8px}
.af-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;flex:none;
 background:var(--navy);color:var(--ink);font-family:Archivo,Arial,sans-serif;font-weight:800;
 font-size:calc(14px * var(--fs));letter-spacing:0}
.af-note{margin:0 0 6px;font-size:calc(14.5px * var(--fs));line-height:calc(23px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);
 max-width:720px}
.af-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;margin-top:22px;
 max-width:880px}
.af-f{min-width:0;display:flex;flex-direction:column}
.af-full{grid-column:1/-1}
.af-half{grid-column:auto}
.af-third{grid-column:auto}
.af-lab{display:flex;align-items:baseline;gap:10px;font-size:calc(13px * var(--fs));font-weight:800;
 letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin-bottom:9px}
.af-opt{font-size:calc(10px * var(--fs));font-weight:700;letter-spacing:.1em;color:rgba(var(--ink-rgb),.62)}
.af-hint{margin:0 0 10px;font-size:calc(13.5px * var(--fs));line-height:calc(20px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.82);max-width:640px}
.af-in{width:100%;min-height:52px;padding:13px 16px;background:rgba(var(--ink-rgb),.05);
 border:1px solid var(--rule);color:var(--ink);font:inherit;font-size:calc(17px * var(--fs));font-weight:600;
 border-radius:0;-webkit-appearance:none;appearance:none}
.af-in::placeholder{color:rgba(var(--ink-rgb),.62)}
.af-in:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
.af-ta{min-height:118px;line-height:calc(26px * var(--fs));resize:vertical}
.af-sel{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
 linear-gradient(135deg,var(--ink) 50%,transparent 50%);
 background-position:calc(100% - 22px) 24px,calc(100% - 15px) 24px;
 background-size:7px 7px,7px 7px;background-repeat:no-repeat;padding-right:46px}
.af-sel option{background:var(--bg);color:var(--ink)}

.af-fs{border:0;padding:0;margin:0}
.af-radios{display:flex;flex-wrap:wrap;gap:10px}
.af-radio,.af-check{display:flex;align-items:center;gap:11px;min-height:52px;
 padding:11px 18px;border:1px solid var(--rule);background:rgba(var(--ink-rgb),.03);
 cursor:pointer;font-size:calc(15.5px * var(--fs));font-weight:600;line-height:calc(22px * var(--fs));
 transition:border-color .2s var(--ease-in,cubic-bezier(.16,1,.3,1)),background .2s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.af-check{align-items:flex-start;padding:16px 18px;min-height:auto}
.af-radio:hover,.af-check:hover{border-color:rgba(var(--ink-rgb),.62)}
.af-radio input,.af-check input{width:22px;height:22px;flex:none;accent-color:var(--navy2);
 margin:0}
.af-check input{margin-top:2px}
.af-radio:has(input:checked){border-color:var(--ember);background:rgba(184,54,42,.14)}
.af-radio:has(input:focus-visible),.af-check:has(input:focus-visible){
 outline:3px solid var(--focus);outline-offset:2px}

.af-err{margin:8px 0 0;font-size:calc(13.5px * var(--fs));line-height:calc(20px * var(--fs));font-weight:700;
 color:var(--ember2);min-height:0}
.af-err:empty{display:none}
.af-f.bad .af-in,.af-f.bad .af-radio,.af-f.bad .af-check{border-color:var(--ember)}

.af-submit{margin-top:38px;padding-top:30px;border-top:1px solid var(--rule);
 display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.af-go{min-height:56px;padding:0 34px;font-size:calc(16px * var(--fs))}
.af-go[aria-busy="true"]{opacity:.65;pointer-events:none}
.af-small{margin:0;font-size:calc(14px * var(--fs));line-height:calc(22px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);
 max-width:420px}
.af-formerr{margin-top:20px;font-size:calc(15px * var(--fs));line-height:calc(24px * var(--fs));font-weight:700;
 color:var(--ember2)}
.af-formerr:empty{display:none}

.af-done{padding:8px 0 4px}
.af-done-k{width:58px;height:58px;border-radius:50%;background:var(--navy);
 position:relative;margin-bottom:26px}
.af-done-k::after{content:'';position:absolute;left:21px;top:15px;width:12px;height:24px;
 border:3px solid var(--ink);border-top:0;border-left:0;transform:rotate(42deg)}
.af-done-h{font-size:calc(42px * var(--fs));line-height:1;letter-spacing:-.04em}
.af-done > p{margin-top:18px;font-size:calc(19px * var(--fs));line-height:calc(30px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.82);max-width:720px}
.af-done-l{margin-top:26px;max-width:760px;display:flex;flex-direction:column;gap:2px}
.af-done-l li{padding:16px 20px;background:rgba(var(--ink-rgb),.03);
 font-size:calc(15.5px * var(--fs));line-height:calc(25px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.af-done-l b{color:var(--ink)}
.af-mono{font-family:Consolas,ui-monospace,monospace;font-size:calc(14px * var(--fs));color:var(--ink)}
.af-done .actions{margin-top:30px}
.af-done-copy{margin-top:24px}

/* ---- the hand off panel, shown only when the automatic send fails ---- */
.af-hand{padding:4px 0 4px;max-width:860px}
.af-hand[hidden]{display:none}
.af-hand-h{font-size:calc(38px * var(--fs));line-height:1.02;letter-spacing:-.04em}
.af-hand-p{margin-top:16px;font-size:calc(18px * var(--fs));line-height:calc(29px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.af-hand-go{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.af-hand-go .btn{min-height:56px}
.af-hand-to{margin-top:24px;font-size:calc(15px * var(--fs));line-height:calc(25px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.af-hand-to a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.af-hand-lab{display:block;margin-top:28px;font-size:calc(12px * var(--fs));font-weight:800;letter-spacing:.11em;
 text-transform:uppercase;color:rgba(var(--ink-rgb),.62);margin-bottom:10px}
.af-text{width:100%;padding:20px 22px;background:rgba(var(--ink-rgb),.05);
 border:1px solid var(--rule);color:var(--ink);border-radius:0;resize:vertical;
 font-family:Consolas,ui-monospace,SFMono-Regular,monospace;font-size:calc(14px * var(--fs));line-height:calc(23px * var(--fs))}
.af-text:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.af-hand-note{margin-top:10px;font-size:calc(13.5px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.62)}
.af-hand-back{margin-top:22px}
.af-link{all:unset;cursor:pointer;font-size:calc(14.5px * var(--fs));font-weight:700;color:var(--ink);
 text-decoration:underline;text-underline-offset:4px}
.af-link:hover{color:var(--ember2)}
.af-link:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.af-link.ok{color:var(--ok);text-decoration:none}

@media (max-width:760px){
  .af-grid{grid-template-columns:1fr;gap:20px}
  .af-half,.af-third{grid-column:1/-1}
  .af-h{font-size:calc(20px * var(--fs))}
  .af-done-h{font-size:calc(30px * var(--fs))}
  .af-hand-h{font-size:calc(26px * var(--fs))}
  .af-hand-go{flex-direction:column;align-items:stretch}
  .af-hand-go .btn{width:100%;justify-content:center}
  .af-text{font-size:calc(13px * var(--fs));padding:16px}
  .af-radios{flex-direction:column}
  .af-radio{width:100%}
  .af-submit{flex-direction:column;align-items:stretch}
  .af-go{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .af-radio,.af-check,.af-in{transition:none}
}

/* ==================================================== impact preview ====== */
.ip{margin-top:44px}
.ip-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;
 align-items:start}
.ip-lab{display:block;font-size:calc(12px * var(--fs));font-weight:800;letter-spacing:.12em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62);margin-bottom:16px}
.ip-range{width:100%;height:44px;background:transparent;-webkit-appearance:none;appearance:none;
 display:block;margin:0}
.ip-range::-webkit-slider-runnable-track{height:6px;background:rgba(var(--ink-rgb),.14)}
.ip-range::-moz-range-track{height:6px;background:rgba(var(--ink-rgb),.14)}
.ip-range::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;margin-top:-14px;
 border-radius:50%;background:radial-gradient(120% 120% at 34% 24%,var(--puck-hi),var(--puck-lo3));
 box-shadow:0 6px 16px -6px rgba(0,0,0,.8);cursor:grab}
.ip-range::-moz-range-thumb{width:34px;height:34px;border:0;border-radius:50%;
 background:radial-gradient(120% 120% at 34% 24%,var(--puck-hi),var(--puck-lo3));cursor:grab}
.ip-range:focus-visible{outline:3px solid var(--focus);outline-offset:6px}
.ip-num{margin-top:22px;display:flex;align-items:center;gap:2px;
 border:1px solid var(--rule);background:rgba(var(--ink-rgb),.05);max-width:260px}
.ip-dollar{padding-left:18px;font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;
 font-size:calc(26px * var(--fs));color:rgba(var(--ink-rgb),.62)}
.ip-in{flex:1;min-width:0;height:64px;padding:0 16px 0 6px;background:transparent;border:0;
 color:var(--ink);font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;font-size:calc(30px * var(--fs));
 letter-spacing:-.02em;-moz-appearance:textfield}
.ip-in::-webkit-outer-spin-button,.ip-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ip-in:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.ip-chips{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.ip-chip{all:unset;cursor:pointer;padding:10px 16px;min-height:44px;box-sizing:border-box;
 display:inline-flex;align-items:center;border:1px solid var(--rule);
 font-size:calc(13px * var(--fs));font-weight:800;letter-spacing:.04em;color:rgba(var(--ink-rgb),.82);
 transition:border-color .2s var(--ease-in,cubic-bezier(.16,1,.3,1)),color .2s var(--ease-in,cubic-bezier(.16,1,.3,1)),background .2s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.ip-chip:hover{border-color:rgba(var(--ink-rgb),.62);color:var(--ink)}
.ip-chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.ip-chip:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.ip-out{padding:26px 28px;border-left:3px solid var(--ember);background:rgba(var(--ink-rgb),.03)}
.ip-big{font-size:calc(clamp(26px,3.4vw,40px) * var(--fs));line-height:1.04;letter-spacing:-.035em}
.ip-say{margin:16px 0 0;font-size:calc(16px * var(--fs));line-height:calc(26px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}

.ip-list{margin-top:38px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
 gap:2px;list-style:none;padding:0}
/* The unreached rows are dimmed by colour, not by opacity. Opacity crushed
   the text under 3:1 against the panel and axe was right to fail it. The tick,
   the panel and the weight carry the state instead. */
.ip-i{display:grid;grid-template-columns:24px 1fr auto;gap:14px;align-items:center;
 padding:15px 18px;background:rgba(var(--ink-rgb),.022);
 transition:background .3s var(--ease-in,cubic-bezier(.16,1,.3,1)),border-color .3s var(--ease-in,cubic-bezier(.16,1,.3,1));
 border-left:2px solid transparent}
.ip-i.got{background:rgba(var(--ink-rgb),.075);border-left-color:var(--ember)}
.ip-k{width:24px;height:24px;border-radius:50%;border:2px solid rgba(var(--ink-rgb),.25);
 position:relative;flex:none;transition:border-color .3s var(--ease-in,cubic-bezier(.16,1,.3,1)),background .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.ip-i.got .ip-k{border-color:var(--ember);background:var(--ember)}
.ip-i.got .ip-k::after{content:'';position:absolute;left:7px;top:3px;width:6px;height:11px;
 border:2px solid var(--ink);border-top:0;border-left:0;transform:rotate(42deg)}
.ip-n{font-size:calc(15px * var(--fs));line-height:calc(22px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);min-width:0}
.ip-i.got .ip-n{color:var(--ink)}
.ip-c{font-family:Archivo,Arial,sans-serif;font-size:calc(14px * var(--fs));font-weight:800;
 font-variant-numeric:tabular-nums;color:rgba(var(--ink-rgb),.68)}
.ip-i.got .ip-c{color:var(--ink)}
.ip-foot{margin-top:34px;padding-top:26px;border-top:1px solid var(--rule)}
.ip-note{margin:0;font-size:calc(15px * var(--fs));line-height:calc(25px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82);max-width:800px}
.ip-note b{color:var(--ink)}
.ip-foot .actions{margin-top:24px}
.inv .ip-out{background:rgba(59,62,114,.06)}
.inv .ip-n,.inv .ip-say,.inv .ip-note{color:var(--icedim)}
.inv .ip-i.got .ip-n,.inv .ip-note b{color:var(--navy)}

/* ======================================================== logo proof ====== */
.lp{margin-top:44px;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:48px;
 align-items:start}
.lp-lab{display:block;font-size:calc(12px * var(--fs));font-weight:800;letter-spacing:.12em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62);margin-bottom:12px}
.lp-in{width:100%;height:54px;padding:0 16px;background:rgba(var(--ink-rgb),.05);
 border:1px solid var(--rule);color:var(--ink);font:inherit;font-size:calc(16px * var(--fs));font-weight:700;border-radius:0}
.lp-in:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
/* The puck sat flush left in a column forty pixels wider than itself, so it
   was the one thing on the page not lining up with anything. It now shares its
   left and right edges with the field above it and the caption below it. */
.lp-puck{margin-top:26px;width:100%;aspect-ratio:1;border-radius:50%;
 display:grid;place-items:center;padding:0 12%;text-align:center;
 background:radial-gradient(120% 120% at 32% 22%,var(--puck-hi) 0%,var(--puck-mid) 44%,var(--puck-lo2) 100%);
 box-shadow:0 26px 50px -22px rgba(0,0,0,.85),inset 0 -3px 8px rgba(30,36,45,.12);
 transition:transform .5s var(--ease-move,cubic-bezier(.65,0,.35,1))}
.lp-puck:hover{transform:translateY(-6px) rotate(-2deg)}
.lp-mark{font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;
 font-size:calc(clamp(15px,2.2vw,22px) * var(--fs));line-height:1.06;letter-spacing:-.03em;color:var(--navy);
 text-transform:uppercase;overflow-wrap:break-word;max-width:100%}
.lp-cap{margin-top:18px;font-size:calc(13.5px * var(--fs));line-height:calc(21px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.62)}
.lp-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.lp-i{padding:19px 22px;background:rgba(var(--ink-rgb),.028)}
.lp-t{display:block;font-size:calc(16.5px * var(--fs));font-weight:800;letter-spacing:-.01em}
.lp-d{display:block;margin-top:7px;font-size:calc(14.5px * var(--fs));line-height:calc(23px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.82)}

/* ===================================================== season report ====== */
.sr{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
 gap:2px;background:var(--rule);border:1px solid var(--rule)}
.sr-b{background:var(--bg);padding:28px 26px 30px}
.sr-n{font-size:calc(clamp(44px,5.4vw,68px) * var(--fs));line-height:.92;letter-spacing:-.045em;color:var(--ember2)}
.sr-l{margin-top:10px;font-size:calc(12px * var(--fs));font-weight:800;letter-spacing:.12em;text-transform:uppercase;
 color:var(--ink)}
.sr-p{margin:14px 0 0;font-size:calc(14.5px * var(--fs));line-height:calc(23px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.inv .sr{background:var(--icerule);border-color:var(--icerule)}
.inv .sr-b{background:var(--ice)} .inv .sr-n{color:var(--ember)}
.inv .sr-l{color:var(--navy)} .inv .sr-p{color:var(--icedim)}

/* ====================================== buttons that lean and catch light = */
.btn{position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;top:-60%;bottom:-60%;left:-40%;width:34%;
 background:linear-gradient(100deg,transparent,rgba(var(--ink-rgb),.30),transparent);
 transform:translateX(-160%) skewX(-16deg);pointer-events:none}
.btn:hover::after,.btn:focus-visible::after{animation:sheen 820ms var(--ease-move,cubic-bezier(.65,0,.35,1)) forwards}
@keyframes sheen{to{transform:translateX(420%) skewX(-16deg)}}
.btn-o::after{background:linear-gradient(100deg,transparent,rgba(var(--ink-rgb),.16),transparent)}
.inv .btn-o::after{background:linear-gradient(100deg,transparent,rgba(59,62,114,.14),transparent)}
[data-lean]{will-change:transform}

@media (max-width:1000px){
  .ip-top{grid-template-columns:1fr;gap:30px}
  .lp{grid-template-columns:1fr;gap:34px}
  .lp-puck{margin-left:auto;margin-right:auto}
}
@media (max-width:760px){
  .ip-i{padding:14px 15px}
  .ip-num{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .btn::after{display:none}
  .lp-puck,.ip-i,.ip-chip{transition:none}
  .btn:hover::after,.btn:focus-visible::after{animation:none}
}

/* ============================================== the settings control ====== */
.stg-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
 height:34px;padding:0 4px;font-size:calc(12px * var(--fs));font-weight:700;letter-spacing:.06em;
 text-transform:uppercase;color:rgba(var(--ink-rgb),.62);transition:color .2s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.stg-btn:hover,.stg-btn[aria-expanded="true"]{color:var(--ink)}
.stg-btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.stg-i{flex:none;transition:transform .5s var(--ease-move,cubic-bezier(.65,0,.35,1))}
.stg-btn:hover .stg-i{transform:rotate(60deg)}

.stg-veil{position:fixed;inset:0;z-index:88;background:rgba(6,8,10,.55);
 opacity:0;transition:opacity .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.stg-veil.on{opacity:1}
.stg-veil[hidden]{display:none}

.stg{position:fixed;top:0;right:0;bottom:0;width:min(452px,100vw);z-index:90;
 background:var(--bg);border-left:1px solid var(--rule);
 display:flex;flex-direction:column;
 transform:translateX(101%);transition:transform .42s var(--ease-move,cubic-bezier(.65,0,.35,1));
 box-shadow:-30px 0 60px -30px rgba(0,0,0,.6)}
.stg.on{transform:none}
.stg[hidden]{display:none}
.stg[dir="rtl"]{right:auto;left:0;border-left:0;border-right:1px solid var(--rule);
 transform:translateX(-101%)}
.stg[dir="rtl"].on{transform:none}
.stg[dir="rtl"] .stg-head,.stg[dir="rtl"] .stg-body{text-align:right}
.ess[dir="rtl"] .ess-in{margin-left:auto;text-align:right}

.stg-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
 padding:26px 30px 20px;border-bottom:1px solid var(--rule);flex:none}
.stg-h{margin:0;font-size:calc(25px * var(--fs));line-height:1;letter-spacing:-.035em}
.stg-x{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;
 border:1px solid var(--rule);color:var(--ink);flex:none;
 transition:background .2s var(--ease-in,cubic-bezier(.16,1,.3,1)),border-color .2s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.stg-x:hover{background:var(--navy);border-color:var(--navy2)}
.stg-x:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.stg-body{padding:8px 30px 40px;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto}
.stg-row{padding:22px 0;border-bottom:1px solid var(--rule)}
.stg-lab{margin:0 0 13px;font-size:calc(11px * var(--fs));font-weight:800;letter-spacing:.14em;
 text-transform:uppercase;color:rgba(var(--ink-rgb),.62)}
.stg-opts{display:flex;flex-wrap:wrap;gap:8px}
.stg-o{all:unset;cursor:pointer;box-sizing:border-box;min-height:44px;padding:11px 17px;
 display:inline-flex;align-items:center;border:1px solid var(--rule);
 font-size:calc(14px * var(--fs));font-weight:700;color:rgba(var(--ink-rgb),.82);
 transition:background .2s var(--ease-in,cubic-bezier(.16,1,.3,1)),border-color .2s var(--ease-in,cubic-bezier(.16,1,.3,1)),color .2s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.stg-o:hover{border-color:rgba(var(--ink-rgb),.62);color:var(--ink)}
.stg-o[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.stg-o:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.stg-langs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stg-l{all:unset;cursor:pointer;box-sizing:border-box;min-height:56px;padding:10px 15px;
 display:flex;flex-direction:column;justify-content:center;gap:3px;
 border:1px solid var(--rule);transition:background .2s var(--ease-in,cubic-bezier(.16,1,.3,1)),border-color .2s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.stg-l:hover{border-color:rgba(var(--ink-rgb),.62)}
.stg-l[aria-checked="true"]{background:var(--navy);border-color:var(--navy2)}
.stg-l:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.stg-l-n{font-size:calc(15px * var(--fs));font-weight:700;line-height:1.2;color:var(--ink)}
.stg-l-e{font-size:calc(10.5px * var(--fs));font-weight:700;letter-spacing:.1em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62)}
.stg-note{margin:16px 0 0;font-size:calc(13px * var(--fs));line-height:calc(20px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.62)}
.stg-all{display:inline-block;margin-top:12px;font-size:calc(13.5px * var(--fs));font-weight:700;
 color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.stg-reset{all:unset;cursor:pointer;margin-top:26px;box-sizing:border-box;min-height:48px;
 width:100%;display:inline-flex;align-items:center;justify-content:center;
 border:1px solid var(--rule);font-size:calc(14px * var(--fs));font-weight:700;color:rgba(var(--ink-rgb),.82);
 transition:border-color .2s var(--ease-in,cubic-bezier(.16,1,.3,1)),color .2s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.stg-reset:hover{border-color:var(--ember);color:var(--ink)}
.stg-reset:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Three kickers and a search box that were styled in the markup. A colour in a
   style attribute cannot be reached by any stylesheet, which is exactly why they
   stayed white when the site went light. */
.panel-kicker{margin-top:12px;font-size:calc(14px * var(--fs));font-weight:700;letter-spacing:.06em;
 text-transform:uppercase;color:rgba(var(--ink-rgb),.62)}
.step-kicker{margin-top:8px;font-size:calc(15px * var(--fs));font-weight:700;letter-spacing:.1em;
 text-transform:uppercase;color:rgba(var(--ink-rgb),.62)}
.bigsearch{width:100%;height:56px;padding:0 18px;background:transparent;
 border:1px solid var(--ink);color:var(--ink);font:inherit;font-size:calc(18px * var(--fs));
 border-radius:0}
.bigsearch::placeholder{color:rgba(var(--ink-rgb),.62)}
.bigsearch:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* A dim note. This exists because four places in the markup were setting a
   colour in a style attribute, which no stylesheet pass can reach and which
   therefore stayed white when the site went light. */
.dimnote{margin-top:32px;font-size:calc(15px * var(--fs));line-height:calc(24px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.62);max-width:820px}
.dimnote-l{font-size:calc(16px * var(--fs));line-height:calc(26px * var(--fs));color:rgba(var(--ink-rgb),.82)}

/* ================================================== the essentials panel == */
.ess{background:var(--navy);color:var(--ink);position:relative;z-index:40;
 border-bottom:1px solid var(--navy2)}
.ess[hidden]{display:none}
.ess-in{padding:38px 0 40px;max-width:900px}
.ess-h{margin:0;font-size:calc(clamp(26px,3.6vw,38px) * var(--fs));line-height:1.04;letter-spacing:-.035em}
.ess-l{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.ess-l li{padding:14px 18px;background:rgba(var(--ink-rgb),.07);
 font-size:calc(16px * var(--fs));line-height:calc(26px * var(--fs));font-weight:600}
.ess-foot{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ess .btn{background:var(--ink);color:var(--navy);border:0}
.ess .btn-o{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.ess-x{all:unset;cursor:pointer;min-height:44px;padding:0 14px;display:inline-flex;
 align-items:center;font-size:calc(13.5px * var(--fs));font-weight:700;color:rgba(var(--ink-rgb),.78);
 text-decoration:underline;text-underline-offset:4px}
.ess-x:hover{color:var(--ink)}
.ess-x:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Archivo has no Ethiopic, Arabic or Han coverage, so anything set in those
   scripts has to name the system faces or it renders as blank boxes. The
   English name sits next to every endonym for exactly the case where a reader's
   device has none of them installed. */
[lang="am"],[lang="am"] *{font-family:'Noto Sans Ethiopic','Kefa','Nyala',
 'Abyssinica SIL','Ethiopia Jiret',Archivo,Arial,sans-serif}
[lang="ar"],[lang="ar"] *{font-family:'Noto Naskh Arabic','Geeza Pro','Segoe UI',
 'Tahoma',Archivo,Arial,sans-serif}
[lang="zh"],[lang="zh"] *{font-family:'Noto Sans SC','PingFang SC',
 'Microsoft YaHei','Hiragino Sans GB',Archivo,Arial,sans-serif}
[lang="am"] .disp,[lang="ar"] .disp,[lang="zh"] .disp{letter-spacing:0}

/* ================================================== the languages page ==== */
.lgs{margin-top:44px;display:flex;flex-direction:column;gap:2px}
.lg{background:rgba(var(--ink-rgb),.028);padding:0}
.lg > summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:14px;
 padding:20px 24px;font-size:calc(19px * var(--fs));font-weight:800;letter-spacing:-.01em}
.lg > summary::-webkit-details-marker{display:none}
.lg > summary:hover{background:rgba(var(--ink-rgb),.06)}
.lg > summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.lg-e{font-size:calc(11px * var(--fs));font-weight:800;letter-spacing:.12em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62)}
.lg-c{margin-left:auto;font-size:calc(11px * var(--fs));font-weight:800;letter-spacing:.1em;
 color:rgba(var(--ink-rgb),.70)}
.lg[open] > summary{border-bottom:1px solid var(--rule)}
.lg-body{padding:20px 24px 26px}
.lg-body ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:11px}
.lg-body li{font-size:calc(16px * var(--fs));line-height:calc(26px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.lg-body[dir="rtl"]{text-align:right}
.lg-body[dir="rtl"] ol{padding-left:0;padding-right:22px}

@media (max-width:760px){
  .stg{width:100vw;border-left:0}
  .stg-head{padding:20px 20px 16px}
  .stg-body{padding:4px 20px 40px}
  .stg-langs{grid-template-columns:1fr}
  .ess-in{padding:28px 0 30px}
  .ess-l li{font-size:calc(15px * var(--fs));line-height:calc(24px * var(--fs))}
  .ess-foot .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .stg,.stg-veil,.stg-i,.stg-o,.stg-l{transition:none}
  .stg{transform:none}
  .stg[hidden]{display:none}
}

/* ==================================================== legal documents ===== */
.lgl{margin-top:44px;display:grid;grid-template-columns:minmax(0,268px) minmax(0,1fr);
 gap:64px;align-items:start}
.lgl-toc{position:sticky;top:150px}
.lgl-toc-h{margin:0 0 14px;font-size:calc(11px * var(--fs));font-weight:800;letter-spacing:.14em;
 text-transform:uppercase;color:rgba(var(--ink-rgb),.62)}
.lgl-toc ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;
 border-left:1px solid var(--rule)}
.lgl-toc a{display:flex;gap:11px;padding:9px 0 9px 16px;margin-left:-1px;
 border-left:2px solid transparent;font-size:calc(14px * var(--fs));line-height:calc(20px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.82);transition:color .2s var(--ease-in,cubic-bezier(.16,1,.3,1)),border-color .2s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.lgl-toc a span{font-variant-numeric:tabular-nums;color:rgba(var(--ink-rgb),.62);flex:none}
.lgl-toc a:hover,.lgl-toc a:focus-visible{color:var(--ink);border-left-color:var(--ember)}

.lgl-doc{min-width:0;max-width:760px}
.lgl-note{margin-bottom:40px}
.lgl-s{padding-top:44px;border-top:1px solid var(--rule)}
.lgl-s:first-child{padding-top:0;border-top:0}
.lgl-s + .lgl-s{margin-top:44px}
.lgl-h{display:flex;gap:16px;align-items:baseline;margin:0 0 20px;
 font-family:ArchivoBlack,Archivo,Arial,sans-serif;font-weight:400;
 font-size:calc(26px * var(--fs));line-height:1.1;letter-spacing:-.03em}
.lgl-n{flex:none;font-family:Archivo,Arial,sans-serif;font-size:calc(13px * var(--fs));font-weight:800;
 letter-spacing:.08em;color:var(--ember2);padding-top:6px}
.lgl-b p{font-size:calc(16.5px * var(--fs));line-height:calc(28px * var(--fs))}
.lgl-b ul,.lgl-b ol{margin-top:16px}
.lgl-b li{font-size:calc(16.5px * var(--fs));line-height:calc(28px * var(--fs))}
.lgl-date{margin-top:26px;font-size:calc(13.5px * var(--fs));font-weight:700;
 color:rgba(var(--ink-rgb),.62)}
.lgl-t{width:100%;margin-top:20px;border-collapse:collapse}
.lgl-t th,.lgl-t td{text-align:left;padding:13px 16px 13px 0;
 border-bottom:1px solid var(--rule);font-size:calc(14.5px * var(--fs));line-height:calc(22px * var(--fs));
 font-weight:600;color:rgba(var(--ink-rgb),.82);vertical-align:top}
.lgl-t thead th{font-size:calc(10.5px * var(--fs));font-weight:800;letter-spacing:.12em;
 text-transform:uppercase;color:rgba(var(--ink-rgb),.62)}
.lgl-t tbody th{color:var(--ink);font-weight:800;white-space:nowrap;padding-right:26px}
.lgl .actions{margin-top:48px}

@media (max-width:1000px){
  .lgl{grid-template-columns:1fr;gap:34px}
  .lgl-toc{position:static}
  .lgl-toc ol{flex-direction:row;flex-wrap:wrap;border-left:0;gap:2px}
  .lgl-toc a{border-left:0;border-bottom:2px solid transparent;padding:8px 12px;
   margin-left:0;background:rgba(var(--ink-rgb),.03)}
  .lgl-toc a:hover{border-left-color:transparent;border-bottom-color:var(--ember)}
}
@media (max-width:760px){
  .lgl-h{font-size:calc(21px * var(--fs));gap:12px}
  .lgl-b p,.lgl-b li{font-size:calc(16px * var(--fs));line-height:calc(27px * var(--fs))}
  .lgl-t th,.lgl-t td{font-size:calc(13.5px * var(--fs));padding:11px 12px 11px 0}
}

/* ===================================================== the bag, unpacked === */
.kt{margin-top:44px}
.kt-grid{list-style:none;margin:0;padding:0;display:grid;
 grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:2px}
.kt-i{position:relative;min-width:0;display:flex;flex-direction:column;
 align-items:center;text-align:center;padding:30px 18px 26px;
 background:rgba(var(--ink-rgb),.028);
 opacity:0;transform:translate(var(--fx,0px),var(--fy,40px)) rotate(var(--fr,0deg));
 transition:opacity .6s var(--ease-in,cubic-bezier(.16,1,.3,1)) calc(var(--i) * 70ms),
            transform .78s var(--ease-move,cubic-bezier(.65,0,.35,1)) calc(var(--i) * 70ms)}
.kt.in .kt-i{opacity:1;transform:none}
.kt-i:nth-child(4n+1){--fx:-70px;--fr:-9deg}
.kt-i:nth-child(4n+2){--fx:-24px;--fr:5deg}
.kt-i:nth-child(4n+3){--fx:24px;--fr:-5deg}
.kt-i:nth-child(4n+4){--fx:70px;--fr:9deg}
/* A percentage height inside a centred grid area has nothing definite to
   resolve against, so the photograph fell back to its natural size and every
   cell overflowed. Constrain it with max dimensions instead, which need no
   containing block to resolve. */
.kt-shot{display:flex;align-items:center;justify-content:center;
 width:100%;height:168px}
.kt-shot picture{display:block;max-width:100%;max-height:100%;line-height:0}
.kt-shot img{max-width:100%;max-height:168px;width:auto;height:auto;
 object-fit:contain}
.kt-n{margin-top:18px;font-size:calc(15px * var(--fs));font-weight:800;letter-spacing:-.01em}
.kt-c{margin-top:6px;font-family:Archivo,Arial,sans-serif;font-size:calc(13px * var(--fs));
 font-weight:800;font-variant-numeric:tabular-nums;color:var(--ember2)}
.kt-d{margin-top:9px;font-size:calc(12.5px * var(--fs));line-height:calc(19px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.62);max-width:210px}
.kt-note{margin-top:30px;font-size:calc(15px * var(--fs));line-height:calc(25px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.82);max-width:820px}
.kt-note b{color:var(--ink)}

/* The white border the cut outs are given: a hard couple of pixels of paper
   all the way round, the way a sticker is trimmed. Eight offset shadows with
   no blur, because each drop-shadow filters the result of the one before it,
   so they compound into an even outline rather than eight separate smudges. */
.stkr img{filter:
 drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink))
 drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink))
 drop-shadow(1.4px 1.4px 0 var(--ink)) drop-shadow(-1.4px 1.4px 0 var(--ink))
 drop-shadow(1.4px -1.4px 0 var(--ink)) drop-shadow(-1.4px -1.4px 0 var(--ink))
 drop-shadow(0 16px 20px rgba(0,0,0,.42))}

/* ============================================================== the lace === */
/* The photograph was the larger half of this block and the instructions were a
   narrow column beside it. That is the wrong way round: the picture is a
   reference and the four lines next to it are the thing a parent came for. */
.lc{margin-top:44px;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
 gap:64px;align-items:center}
.lc-stage{position:relative;min-width:0}
.lc-shot img{width:100%;height:auto;display:block}
.lc-steps{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:22px}
.lc-steps li{font-size:calc(19px * var(--fs));line-height:calc(31px * var(--fs));font-weight:600;color:rgba(var(--ink-rgb),.82)}
.lc-steps b{color:var(--ink);font-weight:800}
.lc-note{grid-column:1/-1;margin:14px 0 0;font-size:calc(16px * var(--fs));line-height:calc(27px * var(--fs));
 font-weight:600;color:rgba(var(--ink-rgb),.62);max-width:820px}

/* ========================================================= the puck drop === */
.pd{margin-top:44px;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
 gap:52px;align-items:center}
.pd-stage{position:relative;aspect-ratio:1;min-width:0;
 background:radial-gradient(closest-side,rgba(var(--ink-rgb),.10),transparent 72%)}
/* The face off circle, drawn rather than photographed, because a circle is a
   circle and a photograph of one would only be a worse circle. */
.pd-ring{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;
 transform:translate(-50%,-50%);border-radius:50%;
 border:2px solid rgba(var(--ink-rgb,255,255,255),.22)}
.pd-ring::after{content:'';position:absolute;left:50%;top:50%;width:14%;
 aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
 background:rgba(var(--ink-rgb,255,255,255),.22)}
.pd-puck{position:absolute;left:50%;top:50%;width:26%;
 transform:translate(-50%,-50%);
 filter:drop-shadow(0 12px 16px rgba(0,0,0,.6))}
.pd-puck img{filter:
 drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink))
 drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink))
 drop-shadow(1.4px 1.4px 0 var(--ink)) drop-shadow(-1.4px 1.4px 0 var(--ink))
 drop-shadow(1.4px -1.4px 0 var(--ink)) drop-shadow(-1.4px -1.4px 0 var(--ink))}
.pd-puck img{width:100%;height:auto;display:block}
.pd.go .pd-puck{animation:pdrop 900ms var(--ease-move,cubic-bezier(.65,0,.35,1)) both}
@keyframes pdrop{
  0%{transform:translate(-50%,-330%) scale(.74)}
  60%{transform:translate(-50%,-50%) scale(1)}
  68%{transform:translate(-50%,-48%) scaleY(.955) scaleX(1.03)}
  82%{transform:translate(-50%,-52%) scaleY(1.01) scaleX(.995)}
  100%{transform:translate(-50%,-50%) scale(1)}}
/* The impact. A white glow sat here first and read as a special effect. What
   a puck actually does to fresh ice is throw a thin ring of snow outward and
   leave a mark, so that is what is drawn: one hairline ring travelling out and
   fading, and nothing else. Restraint is the whole difference. */
.pd-spray{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:5/2;
 transform:translate(-50%,-38%);border-radius:50%;opacity:0;
 border:1.5px solid rgba(244,247,252,.75)}
.pd.go .pd-spray{animation:pspray 900ms var(--ease-in,cubic-bezier(.16,1,.3,1)) 600ms both}
@keyframes pspray{0%{opacity:0;transform:translate(-50%,-38%) scale(.34)}
  18%{opacity:.9}100%{opacity:0;transform:translate(-50%,-38%) scale(2.5)}}
.pd-nums{display:flex;flex-wrap:wrap;gap:12px 38px}
.pd-u{display:flex;flex-direction:column;gap:6px}
.pd-u b{font-size:calc(clamp(38px,5.4vw,64px) * var(--fs));line-height:.9;letter-spacing:-.045em;
 font-variant-numeric:tabular-nums}
.pd-u i{font-style:normal;font-size:calc(11px * var(--fs));font-weight:800;letter-spacing:.15em;
 text-transform:uppercase;color:rgba(var(--ink-rgb),.62)}
.pd-say{margin-top:26px;font-size:calc(18px * var(--fs));line-height:calc(28px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.82);max-width:520px}

/* ==================================================== forty empty seats ==== */
.st{margin-top:44px}
.st-key{display:flex;flex-wrap:wrap;gap:14px 32px;margin-bottom:26px;
 font-size:calc(13px * var(--fs));font-weight:700;color:rgba(var(--ink-rgb),.82)}
.st-key span{display:inline-flex;align-items:center;gap:10px}
.st-sw{width:15px;height:13px;border-radius:3px 3px 1px 1px;background:var(--navy2);
 border:1px solid var(--navy2)}
.st-sw.out{background:transparent;
 border:1px dashed rgba(var(--ink-rgb,255,255,255),.55)}
.st-stand{display:grid;grid-template-columns:repeat(13,1fr);gap:7px;
 max-width:760px;padding:26px 26px 30px;background:rgba(var(--ink-rgb),.028)}
.st-s{aspect-ratio:7/6;border-radius:4px 4px 2px 2px;background:var(--navy2);
 border:1px solid var(--navy2);
 opacity:0;transform:translateY(9px) scale(.86);
 transition:opacity .42s var(--ease-in,cubic-bezier(.16,1,.3,1)) calc((var(--r) * 13 + var(--s)) * 9ms),
            transform .5s var(--ease-move,cubic-bezier(.65,0,.35,1)) calc((var(--r) * 13 + var(--s)) * 9ms),
            background .3s var(--ease-in,cubic-bezier(.16,1,.3,1)),border-color .3s var(--ease-in,cubic-bezier(.16,1,.3,1))}
.st.in .st-s{opacity:1;transform:none}
.st-s.out{background:transparent;
 border:1px dashed rgba(var(--ink-rgb,255,255,255),.46)}
.st.in .st-s.out{animation:seatfade 1.1s var(--ease-in,cubic-bezier(.16,1,.3,1)) calc(1.1s + (var(--r) * 13 + var(--s)) * 9ms) both}
@keyframes seatfade{from{border-color:var(--navy2);background:var(--navy2)}
  to{border-color:rgba(var(--ink-rgb,255,255,255),.46);background:transparent}}
.st-say{margin-top:28px;font-size:calc(17px * var(--fs));line-height:calc(28px * var(--fs));font-weight:600;
 color:rgba(var(--ink-rgb),.82);max-width:820px}
.st .actions{margin-top:26px}

/* ================================================== the resurfacer wipe ==== */
/* Tall enough for the whole machine. It was 132 pixels, and the machine at its
   rendered width is nearly two hundred, so the top half of it was cut off by
   the overflow rule that keeps it from spilling into the sections either side. */
.wp{position:relative;height:228px;overflow:hidden;pointer-events:none;
 --p:0}
.wp-sheet{position:absolute;inset:auto 0 12px 0;height:5px;
 background:linear-gradient(90deg,rgba(244,247,252,.9),rgba(244,247,252,.28));
 transform-origin:0 50%;transform:scaleX(var(--p))}
/* The machine is dropped below the floor of the strip on purpose. The last of
   the backdrop is a band of checkerboard across the bottom fifth of the
   photograph that no rule in the matte could lift without taking the wheel
   rims with it, so the strip's own overflow clips it off. What is left is a
   resurfacer whose contact patch is hidden by the sheet of ice it is laying,
   which is what you see at a rink anyway. */
.wp-mc{position:absolute;bottom:-16px;left:0;width:min(330px,44vw);
 transform:translateX(calc(var(--p) * (100vw + 330px) - 330px));
 filter:drop-shadow(0 18px 22px rgba(0,0,0,.5))}
/* Mirrored, because the photograph faces left and the machine travels right,
   and a resurfacer driving backwards is the first thing anyone notices. The
   conditioner now trails behind it, which is where the fresh sheet comes from.
   The mask takes the last of the backdrop off the bottom of the photograph and
   reads as the contact shadow where the machine meets the ice. */
/* Mirrored, because the photograph faces left and the machine travels right,
   and a resurfacer driving backwards is the first thing anyone notices.
   The gradient does two jobs at once: it takes the last of the backdrop off
   the bottom of the photograph, and it gives the machine a footing. It runs
   long and soft, opaque at the roofline and gone by the ice, so the wheels
   sink into the sheet rather than sitting on top of a hard edge. */
.wp-mc img{width:100%;height:auto;display:block;transform:scaleX(-1);
 -webkit-mask-image:linear-gradient(to bottom,#000 0 52%,rgba(0,0,0,.72) 68%,rgba(0,0,0,.34) 80%,
  rgba(0,0,0,.10) 88%,transparent 94%);
 mask-image:linear-gradient(to bottom,#000 0 52%,rgba(0,0,0,.72) 68%,rgba(0,0,0,.34) 80%,
  rgba(0,0,0,.10) 88%,transparent 94%)}
/* The label was pinned to the middle of the strip, which is exactly where the
   machine passes, so the two sat on top of each other for the length of the
   sweep. It is set against the right hand end instead, above the ice line and
   clear of everything, and it arrives only once the machine is past it. */
.wp-lab{position:absolute;right:8px;top:14px;
 font-size:calc(10.5px * var(--fs));font-weight:800;letter-spacing:.2em;text-transform:uppercase;
 color:rgba(var(--ink-rgb),.62);
 opacity:calc((var(--p) - .55) * 2.6)}

@media (max-width:1000px){
  .kt-grid{grid-template-columns:repeat(2,1fr)}
  .lc,.pd{grid-template-columns:1fr;gap:34px}
  .st-stand{gap:5px;padding:18px}
}
@media (max-width:760px){
  .kt-shot{height:124px}
  .kt-shot img{max-height:124px}
  .kt-i{padding:22px 14px 20px}
  .wp{height:172px}
  .st-key{font-size:calc(12px * var(--fs))}
}
@media (prefers-reduced-motion:reduce){
  .kt-i,.st-s{opacity:1 !important;transform:none !important;
   transition:none;animation:none !important}
  .pd.go .pd-puck,.pd.go .pd-spray{animation:none}
  .pd-spray{display:none}
  .wp{display:none}
}
html[data-theme="light"] .ubtn,
html[data-theme="light"] .ubtn:hover,
html[data-theme="light"] .mega-a:hover,
html[data-theme="light"] .mega-a:focus,
html[data-theme="light"] .btn-n,
html[data-theme="light"] .btn-n:hover,
html[data-theme="light"] .prose li::before,
html[data-theme="light"] .prose ol > li::before,
html[data-theme="light"] .panel li::before,
html[data-theme="light"] .flag,
html[data-theme="light"] .ticker,
html[data-theme="light"] .ticker::after,
html[data-theme="light"] .pausebtn,
html[data-theme="light"] .inv .btn,
html[data-theme="light"] .inv .btn:hover,
html[data-theme="light"] .inv .prose li::before,
html[data-theme="light"] .inv .panel li::before,
html[data-theme="light"] .navyblock,
html[data-theme="light"] .prog,
html[data-theme="light"] .rail .dot,
html[data-theme="light"] .hl,
html[data-theme="light"] .chip,
html[data-theme="light"] .act2rule,
html[data-theme="light"] .grail a.on i,
html[data-theme="light"] #sugg li a:hover,
html[data-theme="light"] #sugg li a.sel,
html[data-theme="light"] .filters button[aria-pressed=true],
html[data-theme="light"] .cd-lead .dot,
html[data-theme="light"] .dbar,
html[data-theme="light"] .pp-pill,
html[data-theme="light"] .th-fill,
html[data-theme="light"] .tb-gk,
html[data-theme="light"] .tb-p.lead .tb-mono,
html[data-theme="light"] .br-i.must .br-k,
html[data-theme="light"] .cm-i.us .cm-bar i,
html[data-theme="light"] .ar-upcoming,
html[data-theme="light"] .ar-ongoing,
html[data-theme="light"] .rp,
html[data-theme="light"] .ssec-in .dot,
html[data-theme="light"] .af-n,
html[data-theme="light"] .af-done-k,
html[data-theme="light"] .ip-i.got .ip-k,
html[data-theme="light"] .stg-x:hover,
html[data-theme="light"] .stg-l[aria-checked="true"],
html[data-theme="light"] .ess,
html[data-theme="light"] .st-sw,
html[data-theme="light"] .st-s,
html[data-theme="light"] .act2seal,
html[data-theme="light"] .act3copy,
html[data-theme="light"] .grail,
html[data-theme="light"] .pk-bloom,
html[data-theme="light"] .tn-tag,
html[data-theme="light"] .ar-state,
html[data-theme="light"] .stg-veil{color:#FFFFFF;--ink:#FFFFFF;--ink-rgb:255,255,255}
html[data-theme="light"] .ubtn .btn-o,
html[data-theme="light"] .ubtn:hover .btn-o,
html[data-theme="light"] .mega-a:hover .btn-o,
html[data-theme="light"] .mega-a:focus .btn-o,
html[data-theme="light"] .btn-n .btn-o,
html[data-theme="light"] .btn-n:hover .btn-o,
html[data-theme="light"] .flag .btn-o,
html[data-theme="light"] .ticker .btn-o,
html[data-theme="light"] .pausebtn .btn-o,
html[data-theme="light"] .inv .btn .btn-o,
html[data-theme="light"] .inv .btn:hover .btn-o,
html[data-theme="light"] .navyblock .btn-o,
html[data-theme="light"] .prog .btn-o,
html[data-theme="light"] .rail .dot .btn-o,
html[data-theme="light"] .hl .btn-o,
html[data-theme="light"] .chip .btn-o,
html[data-theme="light"] .act2rule .btn-o,
html[data-theme="light"] .grail a.on i .btn-o,
html[data-theme="light"] #sugg li a:hover .btn-o,
html[data-theme="light"] #sugg li a.sel .btn-o,
html[data-theme="light"] .filters button[aria-pressed=true] .btn-o,
html[data-theme="light"] .cd-lead .dot .btn-o,
html[data-theme="light"] .dbar .btn-o,
html[data-theme="light"] .pp-pill .btn-o,
html[data-theme="light"] .th-fill .btn-o,
html[data-theme="light"] .tb-gk .btn-o,
html[data-theme="light"] .tb-p.lead .tb-mono .btn-o,
html[data-theme="light"] .br-i.must .br-k .btn-o,
html[data-theme="light"] .cm-i.us .cm-bar i .btn-o,
html[data-theme="light"] .ar-upcoming .btn-o,
html[data-theme="light"] .ar-ongoing .btn-o,
html[data-theme="light"] .rp .btn-o,
html[data-theme="light"] .ssec-in .dot .btn-o,
html[data-theme="light"] .af-n .btn-o,
html[data-theme="light"] .af-done-k .btn-o,
html[data-theme="light"] .ip-i.got .ip-k .btn-o,
html[data-theme="light"] .stg-x:hover .btn-o,
html[data-theme="light"] .stg-l[aria-checked="true"] .btn-o,
html[data-theme="light"] .ess .btn-o,
html[data-theme="light"] .st-sw .btn-o,
html[data-theme="light"] .st-s .btn-o,
html[data-theme="light"] .act2seal .btn-o,
html[data-theme="light"] .act3copy .btn-o,
html[data-theme="light"] .grail .btn-o,
html[data-theme="light"] .pk-bloom .btn-o,
html[data-theme="light"] .tn-tag .btn-o,
html[data-theme="light"] .ar-state .btn-o,
html[data-theme="light"] .stg-veil .btn-o{color:#FFFFFF;border-color:#FFFFFF}
html[data-theme="light"] .skip:focus,
html[data-theme="light"] .navbtn:hover,
html[data-theme="light"] .btn,
html[data-theme="light"] .btn-o:hover,
html[data-theme="light"] .pausebtn:hover,
html[data-theme="light"] .navyblock .btn,
html[data-theme="light"] .navyblock .btn-o:hover,
html[data-theme="light"] #introskip:hover,
html[data-theme="light"] #lb button:hover,
html[data-theme="light"] .dbar-go,
html[data-theme="light"] .pp-card,
html[data-theme="light"] .pcard-l,
html[data-theme="light"] .cc-slide input[type=range]::-webkit-slider-thumb,
html[data-theme="light"] .cc-slide input[type=range]::-moz-range-thumb,
html[data-theme="light"] .tn-bar,
html[data-theme="light"] .tn-grip,
html[data-theme="light"] .trail i,
html[data-theme="light"] .tb-chip.on,
html[data-theme="light"] .ip-chip.on,
html[data-theme="light"] .stg-o[aria-checked="true"],
html[data-theme="light"] .ess .btn{--ink-rgb:255,255,255}
html[data-theme="light"] .skip:focus b,
html[data-theme="light"] .navbtn:hover b,
html[data-theme="light"] .btn b,
html[data-theme="light"] .btn-o:hover b,
html[data-theme="light"] .pausebtn:hover b,
html[data-theme="light"] .navyblock .btn b,
html[data-theme="light"] .navyblock .btn-o:hover b,
html[data-theme="light"] #introskip:hover b,
html[data-theme="light"] #lb button:hover b,
html[data-theme="light"] .dbar-go b,
html[data-theme="light"] .pp-card b,
html[data-theme="light"] .pcard-l b,
html[data-theme="light"] .tn-bar b,
html[data-theme="light"] .tn-grip b,
html[data-theme="light"] .trail i b,
html[data-theme="light"] .tb-chip.on b,
html[data-theme="light"] .ip-chip.on b,
html[data-theme="light"] .stg-o[aria-checked="true"] b,
html[data-theme="light"] .ess .btn b{color:rgba(255,255,255,.74)}
html[data-motion="less"]{scroll-behavior:auto}
html[data-motion="less"] .ticker-track,html[data-motion="less"] .marq-track{animation:none}
html[data-motion="less"] *,html[data-motion="less"] *::before,html[data-motion="less"] *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
   transition-duration:.001ms !important;scroll-behavior:auto !important}
html[data-motion="less"] [data-m]{opacity:1 !important;transform:none !important}
html[data-motion="less"] [data-m="wipe"] > span{transform:none !important}
html[data-motion="less"] .scrib path,html[data-motion="less"] .ellipse path,html[data-motion="less"] .arrow path{stroke-dashoffset:0 !important}
html[data-motion="less"] .drift > picture > img,html[data-motion="less"] .drift > img{transform:none !important}
html[data-motion="less"] .ph img{opacity:1 !important}
html[data-motion="less"] #intro{display:none !important}
html[data-motion="less"] .act2h .l > span{transform:none !important;transition:none}
html[data-motion="less"] .act2rule{transform:scaleX(1) !important;transition:none}
html[data-motion="less"] .act2sub{opacity:1 !important;transform:none !important;transition:none}
html[data-motion="less"] .act2line{opacity:1 !important;position:static;padding:56px 0}
html[data-motion="less"] .act2seal,html[data-motion="less"] .act2veil{display:none}
html[data-motion="less"] .quad{filter:none !important}
html[data-motion="less"] .story{height:auto !important}
html[data-motion="less"] .story .stage{position:static;height:auto}
html[data-motion="less"] .act{position:static;opacity:1 !important;pointer-events:auto;padding:80px 0}
html[data-motion="less"] .act.on{opacity:1}
html[data-motion="less"] .receipt li,html[data-motion="less"] .receipt .tot,html[data-motion="less"] .act2line,html[data-motion="less"] .act3copy{opacity:1 !important;transform:none !important}
html[data-motion="less"] .act3shot{position:static;opacity:1 !important;height:auto;aspect-ratio:3/2;margin-top:40px}
html[data-motion="less"] .quads{position:static;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px;
   width:auto;height:auto;transform:none;outline:0}
html[data-motion="less"] .quad{position:static;width:auto;height:auto;aspect-ratio:3/2}
html[data-motion="less"] .step-text{position:static}
html[data-motion="less"] .gfinale{height:auto}
html[data-motion="less"] .gfinale .stick{position:static;height:auto}
html[data-motion="less"] .gfinale .gcell{width:100%}
html[data-motion="less"] .greel-track{transform:none !important;flex-wrap:wrap}
html[data-motion="less"] .greel{overflow:visible}
html[data-motion="less"] .greel-track .gcell{width:calc(50% - 11px)}
html[data-motion="less"] .rail .dot{transform:scale(1) !important}
html[data-motion="less"] .inline-shot img{opacity:0 !important}
html[data-motion="less"] .inline-shot img:first-child{opacity:1 !important}
html[data-motion="less"] .pk-track{transform:none !important;flex-wrap:wrap;width:100%;justify-content:center;
   padding-left:64px;padding-right:64px}
html[data-motion="less"] .pk-row{-webkit-mask-image:none;mask-image:none;overflow:visible}
html[data-motion="less"] .pk-rows{margin:0}
html[data-motion="less"] .pk-name{opacity:1;transform:none;position:static;margin-top:12px}
html[data-motion="less"] .pk{height:auto}
html[data-motion="less"] .pk-3d{position:relative;height:250px;transform:none}
html[data-motion="less"] .pk-edge,html[data-motion="less"] .pk-side{display:none}
html[data-motion="less"] .pk-face{transform:none;border:1px solid var(--g-pale2)}
html[data-motion="less"] .pk:hover .pk-3d{transform:none}
html[data-motion="less"] .cd-n i.roll{animation:none}
html[data-motion="less"] .cd-lead .dot{animation:none}
html[data-motion="less"] .dbar{transition:none}
html[data-motion="less"] [data-m="fan"]{opacity:1 !important;transform:none !important}
html[data-motion="less"] [data-m="logo"]{opacity:1 !important;transform:none !important;animation:none !important}
html[data-motion="less"] .pp-sig-svg path{stroke-dashoffset:0 !important;transition:none}
html[data-motion="less"] .pcard{transform:none !important}
html[data-motion="less"] .pk-3d{height:170px;transform:none}
@view-transition{navigation:none}
html[data-motion="less"] .cc-face{opacity:1 !important;transform:none !important;transition:none}
html[data-motion="less"] .gl-list li,html[data-motion="less"] .pw-step{opacity:1 !important;transform:none !important;transition:none}
html[data-motion="less"] .th-fill{transition:none}
html[data-motion="less"] .th .th-fill{width:var(--pct)}
html[data-motion="less"] .trail{display:none}
html[data-motion="less"] .lv,html[data-motion="less"] .nx{transform:none !important}
html[data-motion="less"] .tn-b{clip-path:none;position:static}
html[data-motion="less"] .tn-a{position:static}
html[data-motion="less"] .tn-stage{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;
   align-items:start}
html[data-motion="less"] .tn-a .ph,html[data-motion="less"] .tn-b .ph,html[data-motion="less"] .tn-a picture,html[data-motion="less"] .tn-b picture{height:auto}
html[data-motion="less"] .tn-a img,html[data-motion="less"] .tn-b img{height:auto;object-fit:contain}
html[data-motion="less"] .tn-bar,html[data-motion="less"] .tn-range{display:none}
html[data-motion="less"] .tn-a .tn-tag,html[data-motion="less"] .tn-b .tn-tag{position:static;display:inline-block;margin-bottom:8px}
html[data-motion="less"] .br-i,html[data-motion="less"] .wl-list li,html[data-motion="less"] .cm-i{opacity:1 !important;transform:none !important;transition:none}
html[data-motion="less"] .cm-i .cm-bar i{width:var(--w);transition:none}
html[data-motion="less"] .dl-fg{transition:none;stroke-dashoffset:calc(327 - 327 * var(--pct) / 100)}
html[data-motion="less"] .tb-p:hover,html[data-motion="less"] .tb-p:focus-visible{transform:none}
html[data-motion="less"] .ar,html[data-motion="less"] .rl{transform:none !important}
html[data-motion="less"] .rp,html[data-motion="less"] .ssec{transition:none}
html[data-motion="less"] .af-radio,html[data-motion="less"] .af-check,html[data-motion="less"] .af-in{transition:none}
html[data-motion="less"] .btn::after{display:none}
html[data-motion="less"] .lp-puck,html[data-motion="less"] .ip-i,html[data-motion="less"] .ip-chip{transition:none}
html[data-motion="less"] .btn:hover::after,html[data-motion="less"] .btn:focus-visible::after{animation:none}
html[data-motion="less"] .stg,html[data-motion="less"] .stg-veil,html[data-motion="less"] .stg-i,html[data-motion="less"] .stg-o,html[data-motion="less"] .stg-l{transition:none}
html[data-motion="less"] .stg{transform:none}
html[data-motion="less"] .stg[hidden]{display:none}
html[data-motion="less"] .kt-i,html[data-motion="less"] .st-s{opacity:1 !important;transform:none !important;
   transition:none;animation:none !important}
html[data-motion="less"] .pd.go .pd-puck,html[data-motion="less"] .pd.go .pd-spray{animation:none}
html[data-motion="less"] .pd-spray{display:none}
html[data-motion="less"] .wp{display:none}html[data-theme="light"] .story,
html[data-theme="light"] #intro,
html[data-theme="light"] #lb,
html[data-theme="light"] .grail,
html[data-theme="light"] .act2veil,
html[data-theme="light"] .act2line,
html[data-theme="light"] .pucks,
html[data-theme="light"] .pk-rows,
html[data-theme="light"] .pcard-l,
html[data-theme="light"] .pp-card{--bg:#212426;--rule:#373A3C;--navy:#3B3E72;--navy2:#4A4E8C;--navy3:#2A2D55;--ice:#EEF3FB;--iceink:#171A1C;--icedim:#4A5160;--icerule:#CBD5E9;--ember:#B8362A;--ember2:#F0A79C;--ink:#FFFFFF;--focus:#8FA0FF;--ok:#4ADE80;--g-deep:#0B0C0D;--g-black:#0D0F10;--g-panel:#2a2d2f;--g-panel2:#2E3238;--g-slate:#2C3340;--g-edge:#3A3F45;--g-mid:#6C6E70;--g-mid2:#6E757E;--g-soft:#9BA2AB;--g-lav:#717998;--g-pale:#C6CBD2;--g-pale2:#C9CED6;--g-paper:#E6EAEF;--g-lilac:#dfe1ee;--g-hair:#d9dadb;--g-near:#111;--g-grey:#555;--ink-rgb:255,255,255;color:#FFFFFF}
html[data-theme="light"] .story,html[data-theme="light"] .pucks{background:#212426}
html[data-theme="light"] .story .btn{background:#FFFFFF;color:#212426}
html[data-theme="light"] .story .btn-o{background:transparent;color:#FFFFFF;border-color:#FFFFFF;--ink:#FFFFFF;--ink-rgb:255,255,255}
html[data-theme="light"] .story .btn-o:hover{background:#FFFFFF;color:#212426;--ink:#212426}

/* The outline button shares its class with the filled one, so any rule aimed at
   the filled button reaches it too. It is transparent in both themes, so it
   takes the page's ink and not the ink of a surface it does not have. */
html[data-theme="light"] .btn-o{--ink:#14171B;--ink-rgb:0,0,0;
 color:#14171B;border-color:#14171B;background:transparent}
html[data-theme="light"] .btn-o:hover,html[data-theme="light"] .btn-o:focus-visible{
 background:#14171B;color:#FFFFFF;--ink:#FFFFFF;--ink-rgb:255,255,255}
html[data-theme="light"] .inv .btn-o{color:var(--iceink);border-color:var(--iceink);
 --ink:var(--iceink);--ink-rgb:0,0,0}
html[data-theme="light"] .inv .btn-o:hover{background:var(--iceink);color:var(--ice);
 --ink:var(--ice);--ink-rgb:255,255,255}
html[data-theme="light"] .navyblock .btn-o,html[data-theme="light"] .ess .btn-o{
 --ink:#FFFFFF;--ink-rgb:255,255,255;color:#FFFFFF;border-color:#FFFFFF}
/* An empty seat is a dashed outline with no fill. Its filled sibling is painted
   navy, which put white ink on the whole set, and the empty ones then had a
   white dash on a white page. They take the page's ink, because that is what an
   outline with nothing behind it should do. */
html[data-theme="light"] .st-sw.out,html[data-theme="light"] .st-s.out{
 --ink-rgb:0,0,0}
/* An arrow inside a button is drawn in currentColor, so it follows the text of
   whatever it sits in rather than the page. */
html[data-theme="light"] .btn .arrow path,html[data-theme="light"] .btn-o .arrow path{
 stroke:currentColor}