@font-face{font-family:"Fraunces";src:url("../fonts/Fraunces.woff2") format("woff2");font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/Fraunces-Italic.woff2") format("woff2");font-weight:300 500;font-style:italic;font-display:swap}

:root{
  --paper:#F3ECDF;--linen:#FAF6EE;--sand:#E3D7C3;
  --ink:#1B1A1D;--ink-2:#55504C;--ink-3:#6E665D;
  --chalk:#9A4B35;
  --line:rgba(27,26,29,.16);--line-light:rgba(250,246,238,.2);
  --pad:max(24px,5vw);
  --section:128px;
  --out:cubic-bezier(.2,0,0,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.still{scroll-behavior:auto}
html.still [data-reveal]{opacity:1;transform:none;transition:none}
body{background:var(--paper);color:var(--ink);font-family:"Fraunces",Georgia,serif;font-size:18px;line-height:28px;font-optical-sizing:auto;font-variation-settings:"SOFT" 0,"WONK" 0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none}

.gl-stage{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:1;pointer-events:none}
body.menu-open .gl-stage,body.menu-closing .gl-stage{z-index:15}
main,.foot{position:relative;z-index:2}
.wrap{max-width:1296px;margin-inline:auto;padding-inline:var(--pad)}

.label{font-size:13px;line-height:20px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
h1,.big{font-weight:300;font-size:clamp(44px,5.6vw,88px);line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
h2{font-weight:400;font-size:clamp(28px,3vw,44px);line-height:1.18;letter-spacing:-.015em;text-wrap:balance}
h3{font-weight:400;font-size:24px;line-height:32px;letter-spacing:-.01em}
p{color:var(--ink-2);max-width:62ch}
.lead{font-size:clamp(18px,1.5vw,22px);line-height:1.55;color:var(--ink)}
.narrow{max-width:56ch}
em{font-style:italic;font-variation-settings:"SOFT" 0,"WONK" 1}
section{padding-block:var(--section)}

/* actions */
.actions{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;min-height:56px;padding:16px 32px;border-radius:999px;background:var(--ink);color:var(--linen);font-size:18px;line-height:24px;text-decoration:none;transition:background-color .18s var(--out),transform .12s var(--out)}
.btn:active{transform:scale(.97)}
.link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--line);transition:text-decoration-color .18s var(--out),color .18s var(--out)}
@media (hover:hover){.btn:hover{background:var(--chalk)}.link:hover{text-decoration-color:currentColor}}
:focus-visible{outline:2px solid var(--chalk);outline-offset:4px;border-radius:4px}
.btn:focus-visible{border-radius:999px}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .4s var(--out),transform .4s var(--out);transition-delay:calc(var(--i,0)*70ms)}
[data-reveal].in{opacity:1;transform:none}

/* top bar: switches to the light set while ink is behind it */
.top{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:24px var(--pad);color:var(--ink);pointer-events:none}
.top .light{display:none}
.top.on-dark{color:var(--linen)}
.top.on-dark .ink{display:none}
.top.on-dark .light{display:block}
.top>*{pointer-events:auto}
.top-brand img{height:13px;width:auto}
.top-brand{transition:opacity .24s var(--out)}
.top.scrolled .top-brand{opacity:0;pointer-events:none}
.top-menu{display:flex;align-items:center;gap:16px;background:none;border:0;color:inherit;font:inherit;font-size:13px;line-height:20px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;min-height:48px}
.top-menu img{width:48px;height:48px;transition:transform .24s var(--out)}
@media (hover:hover){.top-menu:hover img{transform:scale(1.06) rotate(-4deg)}}
.top-menu:active img{transform:scale(.97)}

/* menu */
.menu{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;justify-content:center;gap:48px;padding:128px var(--pad) 64px;color:var(--linen);visibility:hidden;pointer-events:none}
body.menu-open .menu{visibility:visible;pointer-events:auto}
.menu-list li{overflow:hidden}
.menu-list a{display:flex;align-items:baseline;gap:24px;font-weight:300;font-size:clamp(32px,5.2vw,80px);line-height:1.12;letter-spacing:-.025em;text-decoration:none;transform:translateY(110%);transition:transform .32s var(--out),color .18s var(--out)}
.menu-list span{font-size:13px;line-height:20px;letter-spacing:.1em;color:rgba(250,246,238,.6);font-weight:400;min-width:24px}
body.menu-open .menu-list a{transform:none;transition-duration:.4s}
body.menu-open .menu-list li:nth-child(1) a{transition-delay:.42s}
body.menu-open .menu-list li:nth-child(2) a{transition-delay:.48s}
body.menu-open .menu-list li:nth-child(3) a{transition-delay:.54s}
body.menu-open .menu-list li:nth-child(4) a{transition-delay:.60s}
body.menu-open .menu-list li:nth-child(5) a{transition-delay:.66s}
body.menu-open .menu-list li:nth-child(6) a{transition-delay:.72s}
@media (hover:hover){.menu-list a:hover{font-style:italic;font-variation-settings:"SOFT" 0,"WONK" 1}}
.menu-foot{display:flex;gap:32px;font-size:13px;line-height:20px;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,246,238,.7);opacity:0;transition:opacity .3s var(--out)}
body.menu-open .menu-foot{opacity:1;transition-delay:.8s}
.menu-foot a{text-decoration:none;display:inline-block;padding:12px 0}

/* hero */
.hero{min-height:100svh;display:flex;align-items:center;padding-block:128px 96px}
.hero-grid{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:center;width:100%}
.hero-mark{aspect-ratio:1280/1506;max-height:76svh;justify-self:center;width:min(100%,calc(76svh*1280/1506))}
.hero-text .label{margin-bottom:24px}
.hero-text .lead{margin-top:32px}
.hero-text .actions{margin-top:48px}
.fallback{display:none;width:100%;height:100%;object-fit:contain}
.no-gl .fallback{display:block}
.no-gl .blindfold-photo .fallback{object-fit:cover}

/* war */
.war-grid{display:grid;grid-template-columns:6fr 5fr;gap:64px;align-items:center}
.war-text h2{margin-top:24px}
.lines{margin-top:48px;border-top:1px solid var(--line)}
.lines li{padding:16px 0;border-bottom:1px solid var(--line);font-size:clamp(20px,1.8vw,26px);line-height:1.35;color:var(--ink)}
.war-text>p:last-child{margin-top:32px}
.war-blot{aspect-ratio:1/1;width:100%}

/* blindfold */
.blindfold-grid{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center}
.blindfold-photo{aspect-ratio:1600/894;width:100%}
.blindfold-text h2{margin-top:24px}
.years{margin-top:32px;border-top:1px solid var(--line)}
.years>div{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.years dt{font-size:13px;line-height:28px;letter-spacing:.1em;color:var(--ink-3)}
.years dd{color:var(--ink-2)}
.blindfold-text>p:last-child{margin-top:32px}

/* the return: the stage paints the ink behind this section */
.return{color:var(--linen);padding-block:192px}
.no-gl .return{background:var(--ink)}
.return .label{color:rgba(250,246,238,.66)}
.return p{color:rgba(250,246,238,.82)}
.return .big{margin-top:24px}
.return .lead{margin-top:32px;color:var(--linen)}
.outcomes{margin-top:96px;border-top:1px solid var(--line-light)}
.outcomes li{padding:24px 0;border-bottom:1px solid var(--line-light);font-weight:300;font-size:clamp(28px,3.6vw,56px);line-height:1.12;letter-spacing:-.02em}
.get{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center;margin-top:128px}
.get-rings svg{width:100%;max-width:400px;display:block}
.get-rings .label{margin-top:16px}
.get-rings ellipse{fill:none;stroke:var(--linen);stroke-width:1.4;opacity:.16;transition:opacity .4s var(--out)}
.get-rings ellipse.on{opacity:1}
.get-text p{margin-top:16px}
.plan{margin-top:32px;border-top:1px solid var(--line-light)}
.plan>div{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-light)}
.plan dt{font-size:13px;line-height:28px;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,246,238,.66)}
.plan dd{color:var(--linen)}

/* voices */
.voices h2{margin-top:24px}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 32px;margin-top:64px}
.quotes figure{border-top:1px solid var(--line);padding-top:24px}
.quotes blockquote{font-style:italic;font-variation-settings:"SOFT" 0,"WONK" 1;font-size:clamp(20px,1.6vw,24px);line-height:1.4;color:var(--ink)}
.quotes figcaption{margin-top:16px;font-size:13px;line-height:20px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* fit */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.rows{margin-top:24px;border-top:1px solid var(--line)}
.rows li{padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink-2);max-width:56ch}

/* door */
.door{padding-block:160px 192px}
.door .big{margin-top:24px;max-width:16ch}
.door .lead{margin-top:32px}
.door .actions{margin-top:48px}

.foot{border-top:1px solid var(--line);padding-block:32px}
.foot-grid{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.foot img{height:13px;width:auto}
.foot p{display:flex;gap:32px;font-size:13px;line-height:20px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.foot a{text-decoration:none;display:inline-block;padding:12px 0}

@media (max-width:900px){
  :root{--section:96px}
  .hero{padding-block:112px 64px}
  .hero-grid,.war-grid,.blindfold-grid,.get,.fit-grid{grid-template-columns:1fr;gap:48px}
  .hero-mark{width:min(76vw,calc(48svh*1280/1506));max-height:48svh}
  .war-blot{order:-1;max-width:320px;justify-self:center}
  .quotes{grid-template-columns:1fr;gap:32px}
  .return{padding-block:128px}
  .get{margin-top:96px}
  .top-menu-label{display:none}
  .plan>div{grid-template-columns:112px 1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .menu-list a{transform:none;transition:none}
}