/* Base: reset, type scale, buttons, figures, captions. Nothing inline anywhere (the apex sends a 'self'-only policy). */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
/* no scroll-behavior:smooth on html: ScrollTrigger measures by jumping to the top and back, and smooth scrolling
   turned those jumps into animations, so a reload inside the 3D story landed near the top of the page. In-page links
   glide by script instead (sections.js). */
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
::selection{background:#f4d6e1}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r-sm);text-decoration:none}
.skip:focus{top:12px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
section{position:relative;padding:var(--section) 0}
.alt{background:var(--paper-2)}
.rule-top{border-top:1px solid var(--rule)}

/* type */
.d1{font-size:clamp(42px,6.2vw,84px);line-height:.98;letter-spacing:-.035em;font-weight:700}
.d2{font-size:clamp(32px,4.2vw,56px);line-height:1.04;letter-spacing:-.03em;font-weight:700}
.d3{font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.015em;font-weight:650}
.lead{font-size:clamp(18px,1.55vw,21px);line-height:1.5;color:var(--ink-2)}
.body{color:var(--ink-2)}
.small{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.label{font:500 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}

/* the section header: an index and a name on the left, the title and the standfirst on the right */
.sh{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px;margin-bottom:clamp(40px,5vw,64px)}
.sh .label{padding-top:12px;border-top:1px solid var(--ink);align-self:start}
.sh .label b{color:var(--ink);font-weight:500;margin-right:10px}
.sh-body{display:grid;gap:18px;max-width:820px}
.sh-body .lead{max-width:62ch}
@media (max-width:860px){.sh{grid-template-columns:1fr;gap:16px}.sh .label{border-top:0;padding-top:0}}

/* buttons: ink and outline, rectangular with a small radius */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;border-radius:var(--r-sm);font:600 15.5px/1 var(--text);text-decoration:none;white-space:nowrap;border:1px solid var(--ink);transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#2a2f36;border-color:#2a2f36}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn:active{transform:translateY(1px)}
.btn .i{width:16px;height:16px}
.btn-sm{min-height:38px;padding:0 14px;font-size:14.5px}
.ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.link{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--rule-2)}
.link:hover{text-decoration-color:var(--accent);color:var(--accent-ink)}
.i{width:1em;height:1em;flex:none;fill:currentColor}

/* figures: a hairline frame, a caption in mono under it */
.fig{display:grid;gap:12px;align-content:start}
.shot{border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden;background:#0c0d10;box-shadow:0 1px 0 rgba(13,15,18,.04),0 24px 48px -32px rgba(13,15,18,.35)}
.shot img{width:100%;height:auto}
.cap{font:400 13px/1.55 var(--mono);color:var(--ink-3);max-width:90ch}
.cap b{font-weight:500;color:var(--ink)}

/* reveals: a short rise, once */
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}}