@font-face{font-family:"Behind The Nineties";src:url("assets/fonts/Behind-The-Nineties-Rg.otf");font-weight:400;font-display:swap}
@font-face{font-family:"Behind The Nineties";src:url("assets/fonts/Behind-The-Nineties-Md.otf");font-weight:500;font-display:swap}
@font-face{font-family:"Behind The Nineties";src:url("assets/fonts/Behind-The-Nineties-Smbd.otf");font-weight:600;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("assets/fonts/InterTight-VariableFont_wght.ttf");font-weight:100 900;font-display:swap}
:root{
  --ink-50:#fcfcfc;--ink-100:#f7f7f7;--ink-200:#e6e6e5;--ink-300:#ccc;--ink-700:#5c5c5c;--ink-800:#3d3d3d;--ink-950:#141414;
  --sky-100:#e9f2f6;--sky-300:#d4e5ee;--sky-500:#bed8e5;
  --yellow-500:#f1ed92;--orange-400:#fe9b82;--navy-300:#5e84aa;--navy-400:#356595;--navy-800:#072340;--navy-900:#04172b;
  --surface:var(--ink-50);--text:var(--ink-950);--muted:var(--ink-800);--rule:var(--ink-950);--hair:var(--ink-300);
  --serif:"Behind The Nineties",Georgia,"Times New Roman",serif;--sans:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --focus:var(--navy-400);--gutter:96px;--col:82px;--gap:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--surface);color:var(--text);font-family:var(--serif);font-size:22px;line-height:1.55;-webkit-font-smoothing:antialiased}
figure{margin:0}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--navy-800);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,video:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.skip{position:absolute;left:var(--gutter);top:-80px;background:var(--navy-800);color:var(--ink-50);padding:12px 16px;font-family:var(--sans);z-index:5}
.skip:focus{top:12px}
.wrap{padding-inline:var(--gutter);max-width:1440px;margin-inline:auto}
.label{font-family:var(--sans);font-size:15px;font-weight:600;margin:0}
/* hero */
.hero{background:var(--sky-500)}
.hero .wrap{padding-block:56px 96px}
.bar{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--sans);font-size:15px;font-weight:500;margin-bottom:128px}
.bar a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
h1{font-weight:500;font-size:96px;line-height:1.04;letter-spacing:-.01em;margin:20px 0 40px;max-width:1200px}
.lede{font-size:26px;line-height:1.4;max-width:760px;margin:0}
/* metadata */
.meta{background:var(--yellow-500)}
.meta dl{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin:0;padding-block:32px}
.meta dl>div{border-left:1px solid var(--rule);padding-left:20px}
.meta dl>div:first-child{border-left:0;padding-left:0}
.meta dt{font-family:var(--sans);font-size:14px;font-weight:600}
.meta dd{margin:6px 0 0;font-size:20px;line-height:1.35}
/* numbers */
.nums{padding-block:72px 40px}
.nums ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.nums li{border-top:1px solid var(--rule);padding-top:20px}
.nums .n{display:block;font-weight:500;font-size:112px;line-height:1;letter-spacing:-.02em}
.nums .c{display:block;font-family:var(--sans);font-size:15px;line-height:1.4;color:var(--muted);margin-top:14px;max-width:260px}
.nums .label{margin-bottom:28px}
.nums .src{font-family:var(--sans);font-size:13px;color:var(--ink-700);margin:24px 0 0}
/* full-bleed figure */
.bleed{margin:0}
.bleed img{width:100%}
figcaption{font-family:var(--sans);font-size:14px;line-height:1.45;color:var(--muted);margin-top:12px;max-width:760px}
.bleed figcaption{padding:14px var(--gutter) 18px;margin:0;max-width:none}
/* sections */
.sec{padding-block:0 96px}
.sec>.wrap{border-top:0}
.row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);border-top:4px solid var(--phase,var(--rule));padding-top:32px}
.sec{--phase:var(--navy-800)}
.p-discover{--phase:var(--sky-500)}.p-define{--phase:var(--yellow-500)}.p-design{--phase:var(--orange-400)}.p-reflect{--phase:var(--navy-800)}
.head{grid-column:1/5}
.head h2{font-weight:500;font-size:60px;line-height:1.05;margin:10px 0 0;letter-spacing:-.01em}
.body{grid-column:5/13;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap)}
.body>*{margin:0 0 1em}
.body .full{grid-column:1/3}
.body p,.body li{max-width:34em}
b,strong{font-weight:600}
ul.tight{list-style:none;padding:0;margin:0}
ul.tight li{padding:10px 0;border-top:1px solid var(--hair)}
ul.tight li:first-child{border-top:0;padding-top:0}
blockquote{margin:0;padding:0}
blockquote p{font-size:34px;line-height:1.2;font-weight:500;margin:0 0 12px}
blockquote footer{font-family:var(--sans);font-size:14px;color:var(--muted)}
.skim{background:var(--ink-100);padding-block:48px;margin-bottom:96px}
.skim .row{border-top:0;padding-top:0}
/* decisions */
.dec{grid-column:1/3;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap);border-top:1px solid var(--hair);padding-top:20px;margin-bottom:28px}
.dec h3{grid-column:1/3;font-family:var(--sans);font-size:22px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
.dec p{margin:0 0 .6em;font-size:19px;line-height:1.5}
.dec .k{font-family:var(--sans);font-size:14px;font-weight:600;display:block;color:var(--ink-700)}
/* before after */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:48px}
.ba img{width:100%;border:1px solid var(--hair)}
.fig{margin:48px 0 0}
.fig img{width:100%}
.ba{align-items:start}
.shot{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);margin-top:48px;align-items:start}
.shot figcaption{grid-column:1/5;grid-row:1;margin:0;font-size:16px;color:var(--text)}
.shot figcaption b{display:block;font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.15;margin-bottom:8px}
.shot img{grid-column:5/13;width:100%;border:1px solid var(--hair)}
.nums .c{text-wrap:pretty}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}
table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:16px;margin-top:40px}
th,td{text-align:left;padding:12px 16px 12px 0;border-top:1px solid var(--hair);vertical-align:top}
th{font-size:14px}thead th{border-top:1px solid var(--rule)}tbody th{font-weight:600}caption{text-align:left;padding-bottom:12px}
.video{margin-top:56px}
.video video{width:100%;background:var(--navy-900)}
.ctrl{font-family:var(--sans);font-size:15px}
details{margin-top:12px;font-family:var(--sans);font-size:15px;max-width:760px}
summary{cursor:pointer}
footer.end{border-top:1px solid var(--rule);padding-block:40px 80px;font-family:var(--sans);font-size:15px}
footer.end .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
@media (max-width:1100px){:root{--gutter:48px}h1{font-size:76px}.head{grid-column:1/13}.body{grid-column:1/13;margin-top:20px}.shot figcaption,.shot img{grid-column:1/13}.shot img{grid-row:2;margin-top:12px}.nums .n{font-size:80px}.meta dl,.nums ul{grid-template-columns:1fr 1fr;row-gap:28px}.meta dl>div:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:640px){
  :root{--gutter:20px}
  body{font-size:19px}
  .bar{margin-bottom:72px}
  h1{font-size:46px;margin-bottom:24px}.lede{font-size:21px}
  .hero .wrap{padding-block:28px 56px}
  .head h2{font-size:42px}
  .body,.dec{grid-template-columns:1fr}.body .full,.dec h3{grid-column:1}
  .nums .n{font-size:64px}.nums{padding-block:48px 24px}
  .ba{grid-template-columns:1fr}
  .shot figcaption,.shot img{grid-column:1/13}.shot img{grid-row:2;margin-top:12px}
  .row{padding-top:20px}.sec{padding-bottom:56px}
  blockquote p{font-size:26px}
  table{font-size:14px}
  .meta dl{grid-template-columns:1fr}.meta dl>div{border-left:0;padding-left:0}
  .skim{margin-bottom:56px;padding-block:32px}
}

.scroll{overflow-x:auto}
.scroll:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media (max-width:640px){.scroll img{min-width:820px;max-width:none}}
