/* Mammoth homepages. One system, three layouts.
   Buttons, hover and image treatment are defined once here so they cannot drift. */
:root[data-theme="dark"] { --tray: #000; --panel: #101012; --bg-3: #232327; --inv: #f4f2ee; --inv-ink: #070708; }
:root[data-theme="light"] { --tray: #d3cdc2; --panel: #f3efe8; --inv: #0a0a0b; --inv-ink: #f4f2ee; }
body { background: var(--tray); }
html { scroll-padding-top: calc(var(--head) + 28px); scroll-behavior: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Type */
.t1 { font-family: var(--display); font-weight: 900; line-height: .98; letter-spacing: -.035em; }
.t2 { font-family: var(--display); font-weight: 900; font-size: clamp(38px, 5.4vw, 88px); line-height: .96; letter-spacing: -.035em; }
.t3 { font-family: var(--display); font-weight: 900; font-size: clamp(21px, 1.9vw, 29px); line-height: 1.04; letter-spacing: -.022em; }
.lead { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.38; }
.muted { color: var(--mut); }
.eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); display: block; }

/* One button family. The notch closes and the arrow moves, everywhere. */
.btn--xl { height: 66px; padding: 0 32px; font-size: 14px; }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.btn--line:hover { background: var(--ink); color: var(--bg); clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%); }
.on-inv .btn--line { color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.on-inv .btn--line:hover { background: var(--inv-ink); color: var(--inv); }

/* One hover for everything clickable: the image eases in. Rows use .wipe. */
.hv { position: relative; }
.hv img { transition: transform .7s var(--ease); }
.hv:hover img { transform: scale(1.03); }

/* Renders: every image sits in the same frame, swapping with the theme */
.pic { position: relative; overflow: hidden; background: #0b0b0d; }
:root[data-theme="light"] .pic { background: #eadfd0; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease, transform .7s var(--ease); }
:root[data-theme="dark"] .pic .l, :root[data-theme="light"] .pic .d { opacity: 0; }

/* Board and connected line */
.board { position: relative; padding: 0 16px 16px; --n: 22px; }
.sec { position: relative; z-index: 1; margin-top: 64px; scroll-margin-top: calc(var(--head) + 28px); }
.p { position: relative; background: var(--panel); padding: clamp(22px, 2.6vw, 40px); transition: background-color .45s; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.grid > * { min-width: 0; }
.i-mega { overflow: hidden; }
.inv { background: var(--inv); color: var(--inv-ink); }
.inv .muted, .inv .eyebrow { color: inherit; opacity: .68; }
.blue-p { background: var(--blue); color: #fff; }
.blue-p .eyebrow { color: inherit; opacity: .8; }
.cut-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--n) * 2), calc(100% - var(--n)) calc(100% - var(--n) * 2), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n) * 2) calc(100% - var(--n)), calc(100% - var(--n) * 2) 100%, 0 100%); }
.cut-tr { clip-path: polygon(0 0, calc(100% - var(--n) * 2) 0, calc(100% - var(--n) * 2) var(--n), calc(100% - var(--n)) var(--n), calc(100% - var(--n)) calc(var(--n) * 2), 100% calc(var(--n) * 2), 100% 100%, 0 100%); }
.cut-bl { clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--n) * 2) 100%, calc(var(--n) * 2) calc(100% - var(--n)), var(--n) calc(100% - var(--n)), var(--n) calc(100% - var(--n) * 2), 0 calc(100% - var(--n) * 2)); }

.wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.wires .base { fill: none; stroke: var(--mut); stroke-width: 1; opacity: .55; }
.wires .run { fill: none; stroke: var(--glow); stroke-width: 2; filter: drop-shadow(0 0 5px var(--glow)); }
.wires .head { fill: var(--glow); filter: drop-shadow(0 0 7px var(--glow)); }
.wires rect.node { fill: var(--tray); stroke: var(--mut); }

/* Section tags are stops on the line: click one and travel to the next */
.tag { position: absolute; z-index: 4; top: -15px; left: var(--x, 10%); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px; background: var(--ink); color: var(--bg); white-space: nowrap; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: background-color .25s, color .25s; }
.tag::after { content: "↓"; transition: transform .25s var(--ease); }
.tag:hover::after { transform: translateY(3px); }
.tag.now, .tag:hover { background: var(--blue); color: #fff; }

/* Shared hero */
.stage { position: relative; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--head) + 28px) var(--gut) 18px; background: var(--bg); transition: background-color .45s; }
.word { position: relative; z-index: 1; width: 100%; margin: 0; }
.mega { display: block; line-height: .78; }
.mega > span { display: inline-block; }
.beast { position: absolute; z-index: 2; aspect-ratio: 1585 / 1376; transform: translate(calc(-50% + var(--mx, 0px)), var(--my, 0px)); transition: transform .5s var(--ease); }
.beast img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
:root[data-theme="dark"] .beast { filter: brightness(1.15) drop-shadow(0 0 70px rgba(31, 107, 255, .22)); }
:root[data-theme="light"] .beast { filter: drop-shadow(0 26px 30px rgba(10, 10, 11, .26)); }
:root[data-theme="dark"] .beast .l, :root[data-theme="light"] .beast .d { display: none; }

/* As seen in */
.seen { overflow: hidden; }
.seen__track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.seen:hover .seen__track { animation-play-state: paused; }
.seen__track span { display: grid; place-items: center; padding: 0 clamp(26px, 3.4vw, 54px); min-height: 104px; font-family: var(--display); font-weight: 800; font-size: clamp(19px, 1.9vw, 30px); letter-spacing: -.02em; white-space: nowrap; color: var(--mut); transition: color .2s; }
.seen__track span:hover { color: var(--ink); }
@keyframes slide { to { transform: translateX(-50%); } }

/* Proof */
.shot { display: block; width: 100%; padding: 0; background: #000; text-align: left; cursor: zoom-in; overflow: hidden; }
.shot__m { position: relative; overflow: hidden; }
.shot__m img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.shot__c { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--panel); color: var(--ink); font-size: 14px; transition: background-color .45s; }
.shot__c b { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--glow); white-space: nowrap; }
:root[data-theme="light"] .shot__c b { color: var(--blue); }

/* Video */
.vid { display: block; width: 100%; padding: 0; background: var(--panel); text-align: left; color: inherit; cursor: pointer; }
.vid__m { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.vid__m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid__m i { position: absolute; left: 0; bottom: 0; z-index: 2; width: 52px; height: 52px; background: var(--blue); transition: width .3s var(--ease); }
.vid:hover .vid__m i { width: 76px; }
.vid__m i::after { content: ""; position: absolute; left: 20px; top: 16px; border-left: 16px solid #fff; border-block: 10px solid transparent; }
.vid__t { padding: 16px 18px 20px; }

/* Testimonials */
.who { display: flex; align-items: center; gap: 13px; font-size: 14px; }
.who img { width: 60px; height: 60px; object-fit: cover; flex: none; }
.who b { display: block; font-weight: 700; font-size: 16px; }
.who a { color: var(--mut); transition: color .2s; }
.who a:hover { color: var(--glow); }
blockquote { margin: 0; }

/* FAQ */
details { border-bottom: 1px solid var(--line); }
details:last-child { border-bottom: 0; }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-family: var(--display); font-weight: 800; font-size: clamp(19px, 1.6vw, 25px); line-height: 1.12; letter-spacing: -.015em; transition: color .2s; }
summary:hover { color: var(--glow); }
summary::-webkit-details-marker { display: none; }
summary i { flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center/100% 2px no-repeat, linear-gradient(currentColor, currentColor) center/2px 100% no-repeat; transition: transform .25s var(--ease); }
details[open] summary i { transform: rotate(45deg); color: var(--glow); }
details p { padding: 0 38px 24px 0; color: var(--mut); max-width: 42em; }

/* Footer */
.foot { position: relative; z-index: 1; background: var(--panel); padding: clamp(28px, 3.2vw, 48px) var(--gut) 22px; transition: background-color .45s; }
.foot__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 28px; margin-bottom: clamp(40px, 6vw, 84px); }
.foot__cols a, .foot__cols span.s { display: block; padding: 4px 0; color: var(--mut); font-size: 15px; transition: color .15s; }
.foot__cols a:hover { color: var(--ink); }
.foot__cols span.s em { font-style: normal; font-size: 12px; opacity: .7; }
.foot__cols .eyebrow { margin-bottom: 10px; }
.foot__mark { display: block; width: 100%; aspect-ratio: 960 / 114; background: currentColor; -webkit-mask: url(logo/wordmark.svg) center/contain no-repeat; mask: url(logo/wordmark.svg) center/contain no-repeat; }
.foot__bar { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; color: var(--mut); }

/* Lightbox */
dialog.lb { border: 0; padding: 0; background: none; max-width: min(1240px, 92vw); max-height: 90vh; width: 100%; color: #fff; }
dialog.lb::backdrop { background: rgba(0, 0, 0, .86); }
dialog.lb img { display: block; width: 100%; height: auto; }
dialog.lb iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
dialog.lb button { position: fixed; top: 18px; right: 18px; width: 44px; height: 44px; background: var(--blue); color: #fff; font-size: 20px; }

/* Reveal */
@media (prefers-reduced-motion: no-preference) {
  .js .up { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s var(--ease), background-color .45s, box-shadow .3s; transition-delay: var(--d, 0s); }
  .js .up.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .seen__track { animation: none; } }

/* ---------- Layout 1: Monument ---------- */
.step .eyebrow { color: var(--glow); margin-bottom: 8px; }
:root[data-theme="light"] .step .eyebrow { color: var(--blue); }
.step p { margin: 10px 0 0; font-size: 16px; line-height: 1.42; color: var(--mut); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.stat { display: flex; flex-direction: column; justify-content: space-between; gap: 34px; min-height: 210px; }
.stat b { font-family: var(--display); font-weight: 900; font-stretch: 62%; font-size: clamp(64px, 8.2vw, 136px); line-height: .84; letter-spacing: -.02em; text-transform: uppercase; }
.q blockquote { font-size: clamp(19px, 1.6vw, 25px); line-height: 1.26; font-weight: 500; letter-spacing: -.012em; }
.final { position: relative; min-height: min(84svh, 760px); overflow: hidden; display: flex; align-items: center; padding: clamp(28px, 4vw, 64px); }
.final .pic { position: absolute; inset: 0; }
.final__in { position: relative; z-index: 2; width: min(560px, 46%); }
.final__in .t2 { margin-bottom: 20px; }
.final__in .lead { margin-bottom: 26px; }

/* ---------- Layout 1: Monument ----------
   No panels. Full-bleed type, whole renders, one line down the left edge. */
.l1 body { background: var(--bg); }
:is(.l1, .l4) .stage .intro { position: absolute; z-index: 3; top: calc(var(--head) + 38px); left: var(--gut); width: min(620px, 45vw); }
:is(.l1, .l4) h1.t1 { font-size: clamp(36px, 4.4vw, 70px); margin-bottom: 26px; }
:is(.l1, .l4) .beast { left: 72%; bottom: 10.6vw; width: min(48vw, calc((100svh - 10.6vw - 96px) * 1.15)); }
.l1 .board { padding: 0; }
.l1 .wires { z-index: 2; }
.l1 .wires .run { filter: none; stroke-width: 2; }
.wires rect.head { filter: none; width: 10px; height: 10px; padding: 0; border: 0; position: static; backdrop-filter: none; background: none; }
.l1 .sec { --pad: calc(var(--gut) + 44px); margin: 0; padding: clamp(96px, 11vw, 170px) var(--gut) clamp(80px, 9vw, 140px) var(--pad); }
.l1 .sec.band { z-index: 3; }
.l1 .tag { top: clamp(32px, 4vw, 56px); left: var(--pad); transform: none; }
.xl { font-family: var(--display); font-weight: 900; font-size: clamp(44px, min(8vw, 15svh), 136px); line-height: .92; letter-spacing: -.04em; margin: 0; }

/* Render shown whole, soft edges bled into the page */
.fit { position: relative; }
.fit img { display: block; max-width: 100%; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s ease; }
.fit .l { position: absolute; inset: 0; }
:root[data-theme="dark"] .fit .d { filter: contrast(1.01) brightness(1.32); }
:root[data-theme="dark"] .fit .l, :root[data-theme="light"] .fit .d { opacity: 0; }

/* Hover: a solid block rises behind the row and the type inverts */
.wipe { position: relative; isolation: isolate; transition: color .22s, padding-left .32s var(--ease); }
.wipe::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .32s var(--ease); }
.wipe:hover, .wipe:focus-visible { color: var(--bg); padding-left: 16px; }
.wipe:hover::before, .wipe:focus-visible::before { transform: none; }
.wipe:hover .eyebrow, .wipe:hover b { color: inherit; }

.seen-s.sec { padding-block: clamp(84px, 8vw, 110px) 16px; }
.l1 .seen { margin-right: calc(var(--gut) * -1); }
.idea-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 90px); align-items: center; margin-top: clamp(16px, 2vw, 32px); }
.idea-art { aspect-ratio: 4 / 3; margin-left: -4%; }
.idea-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }

/* Process: pinned. Scrolling or clicking builds the object. */
.l1 .sec--pin { padding: 0; }
.pin { height: 420svh; }
.pin__s { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; padding: calc(var(--head) + 24px) var(--gut) 24px var(--pad); }
.pin__l { width: min(44%, 620px); }
.pin__l .t2, .ps__b, .ps > p { position: relative; z-index: 2; }
.pin__l .t2 { font-size: clamp(36px, min(4.6vw, 9svh), 76px); margin-bottom: clamp(16px, 3svh, 34px); }
.pss { list-style: none; margin: 0; padding: 0; }
.ps { border-top: 1px solid var(--line); }
.ps__b { display: flex; align-items: baseline; gap: 18px; width: 100%; padding: 13px 0; background: none; color: var(--mut); text-align: left; cursor: pointer; transition: color .25s; }
.ps__b .eyebrow { color: inherit; flex: none; }
.ps__t { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(21px, min(2.2vw, 4svh), 34px); line-height: 1.04; letter-spacing: -.022em; }
.ps__b:hover, .ps.on .ps__b { color: var(--ink); }
.ps > p { display: grid; margin: 0; padding-left: 44px; font-size: 17px; line-height: 1.4; color: var(--mut); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s var(--ease), opacity .3s, padding-bottom .3s; }
.ps.on > p { max-height: 130px; opacity: 1; padding-bottom: 16px; }
.ps__art { position: absolute; z-index: 1; right: var(--gut); top: calc(var(--head) + 8px); bottom: 8px; width: 52%; opacity: 0; transform: translateY(30px) scale(.94); transition: opacity .5s ease, transform .7s var(--ease); pointer-events: none; }
.ps.on .ps__art { opacity: 1; transform: none; }

.lab-h { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.lab-h--stack { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.lab-h--stack .lead { max-width: 38em; }
.lab-art { aspect-ratio: 16 / 9; margin-top: 8px; }
.figs { display: flex; justify-content: space-between; gap: clamp(24px, 5vw, 80px); }
.fig b { display: block; font-family: var(--display); font-weight: 900; font-stretch: 62%; font-size: clamp(84px, 15vw, 270px); line-height: .82; letter-spacing: -.02em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.fig span { display: block; margin-top: 16px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); max-width: 24ch; }
.fig:last-child b { color: var(--blue); }
:root[data-theme="dark"] .fig:last-child b { color: var(--glow); }

/* Proof: run down the questions, the answer appears beside them */
.px { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(32px, 5vw, 76px); }
.pl { border-top: 1px solid var(--line); }
.pr { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; width: 100%; padding: 15px 0; background: none; color: var(--ink); text-align: left; font-family: var(--display); font-weight: 800; font-size: clamp(17px, 1.45vw, 23px); line-height: 1.12; letter-spacing: -.012em; border-bottom: 1px solid var(--line); cursor: zoom-in; }
.pr b { flex: none; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.pr.on { color: var(--blue); } :root[data-theme="dark"] .pr.on { color: var(--glow); }
.pr.on:hover { color: var(--bg); }
.pv { position: sticky; top: calc(var(--head) + 24px); align-self: start; height: calc(100svh - var(--head) - 48px); max-height: 760px; display: grid; }
.pv__i { grid-area: 1 / 1; min-height: 0; padding: 0; background: none; opacity: 0; visibility: hidden; transition: opacity .3s; cursor: zoom-in; }
.pv__i.on { opacity: 1; visibility: visible; }
.pv__i img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left top; }
.pv__c { display: none; }

.tk { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(32px, 5vw, 76px); }
.tk .vid { background: none; }
.tk .vid__t { padding: 18px 0 0; }
.tk .vid .t3 { font-size: clamp(26px, 2.8vw, 44px); }
.tk .vid:hover img { transform: none; }
.vr { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; width: 100%; padding: 14px 0; background: none; color: var(--ink); text-align: left; border-top: 1px solid var(--line); cursor: pointer; }
.vr:last-child { border-bottom: 1px solid var(--line); }
.vr img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vr__t { display: block; margin-top: 6px; font-family: var(--display); font-weight: 800; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.1; letter-spacing: -.015em; }
.tk__l .wipe:hover { padding-left: 0; }

.l1 .band .tag { background: #fff; color: var(--blue); }
.l1 .band.blue-p { padding-top: clamp(110px, 11vw, 170px); }
.l1 .bigq blockquote { font-size: clamp(30px, min(4.6vw, 8svh), 78px); line-height: 1.02; }
.names button { cursor: pointer; }

.fq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.fq .xl { position: sticky; top: calc(var(--head) + 28px); }
.fq__l details:first-child { border-top: 1px solid var(--line); }
.l1 summary:hover { color: inherit; }
.l1 details[open] summary i { color: inherit; }

.l1 .end { padding-right: 0; padding-left: 0; padding-bottom: 0; overflow: hidden; }
.l1 .end .tag { left: var(--pad); }
.end__t { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; padding: 0 var(--gut) 0 var(--pad); position: relative; z-index: 1; }
.end__c { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.end__art { width: 100%; aspect-ratio: 16 / 9; margin-top: clamp(-90px, -6vw, -20px); }
.l1 .foot { background: var(--bg); }

/* ---------- Layout 4: Panels. The home.html board with the real content ---------- */
.l4 .wires .run { filter: none; }
.l4 .wires rect.head { filter: none; }
.l4 .fit { width: 100%; }
/* A well keeps the page colour, so a render always sits whole and clean inside its panel */
.well { box-shadow: inset 0 0 0 1px var(--line); background: var(--bg); padding: 0; display: grid; place-items: center; overflow: hidden; transition: background-color .45s; }
.l4 .idea-w { grid-column: 1 / 7; min-height: 560px; }
.l4 .idea-w .fit { aspect-ratio: 4 / 3; }
.l4 .idea-p { grid-column: 7 / 13; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.stair { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.stair__t { position: absolute; top: 24px; left: 0; width: 49%; }
.l4 .step { padding: 0; display: flex; flex-direction: column; }
.l4 .step:nth-of-type(1) { margin-top: 390px; } .l4 .step:nth-of-type(2) { margin-top: 260px; } .l4 .step:nth-of-type(3) { margin-top: 130px; }
.l4 .step .well .fit { aspect-ratio: 1; }
.step__t { padding: 20px 24px 26px; min-height: 216px; }
.l4 .step:nth-of-type(4) .step__t { background: var(--inv); color: var(--inv-ink); }
.l4 .step:nth-of-type(4) p, .l4 .step:nth-of-type(4) .eyebrow { color: inherit; opacity: .78; }
.lab4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; overflow: hidden; }
.lab4__t { padding: clamp(26px, 3.6vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.lab4 .well .fit { aspect-ratio: 16 / 9; }
.lab4__f { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); padding: clamp(26px, 3vw, 44px) clamp(26px, 3.6vw, 56px) clamp(48px, 4.4vw, 66px); }
.lab4 .fig b { font-size: clamp(64px, 9.4vw, 158px); }
.lab4 .fig span, .inv .fig span { color: inherit; opacity: .72; }
.lab4 .fig:last-child b { color: var(--blue); }
/* Proof: one result at a time on a black stage. Screenshots are dark, so it stays black in both themes. */
.pst { --pad: clamp(28px, 4.4vw, 72px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr auto; grid-template-areas: "top view" "q view" "nav view"; column-gap: clamp(36px, 5.6vw, 96px); padding: var(--pad); background: #000; color: #f4f2ee; }
.pst__top { grid-area: top; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.pst__top .eyebrow { color: rgba(244, 242, 238, .62); }
.pst__pl { padding: 6px 12px; background: var(--blue); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pst__q { grid-area: q; align-self: center; margin: 32px 0; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 3.9vw, 66px); line-height: 1; letter-spacing: -.03em; transition: opacity .25s; }
.pst__q.off { opacity: 0; }
.pst__v { grid-area: view; position: relative; height: min(68svh, 640px); }
.ss { position: absolute; inset: 0; padding: 0; background: none; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .4s ease, transform .6s var(--ease), visibility .4s; cursor: zoom-in; }
.ss.on { opacity: 1; visibility: visible; transform: none; }
.ss img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pst__nav { grid-area: nav; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.ticks { display: flex; flex-wrap: wrap; }
.tick { width: 24px; height: 28px; padding: 0; background: none; cursor: pointer; }
.tick::before { content: ""; display: block; width: 12px; height: 12px; background: rgba(244, 242, 238, .28); transition: background-color .2s, transform .2s var(--ease); }
.tick:hover::before { background: #f4f2ee; }
.tick.on::before { background: var(--glow); transform: scale(1.3); }
.pst__ar { display: flex; gap: 2px; flex: none; }
.ar { width: 58px; height: 58px; background: #f4f2ee; color: #000; font-size: 20px; cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); transition: background-color .3s, color .3s, clip-path .3s var(--ease); }
.ar:hover, .ar:focus-visible { clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%); }
.ar[data-go="1"] { background: var(--blue); color: #fff; }

.vg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vg__t { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.vg__t .t2 { font-size: clamp(34px, 3.8vw, 60px); }
.vg .vid { transition: background-color .25s; }
.vg .vid:hover { background: var(--bg-3); }
.qg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.qg__h { grid-column: 1 / 5; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.qg__h .t2 { font-size: clamp(36px, 4.2vw, 66px); }
.qg .q { grid-column: span 4; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.l4 .faq-t { grid-column: 1 / 6; position: sticky; top: calc(var(--head) + 28px); align-self: start; }
.l4 .faq-l { grid-column: 6 / 13; padding-block: 8px; }
.l4 summary:hover { color: inherit; opacity: .7; }
.book4 { position: relative; aspect-ratio: 2400 / 1340; overflow: hidden; background: var(--bg); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--n) * 2), calc(100% - var(--n)) calc(100% - var(--n) * 2), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n) * 2) calc(100% - var(--n)), calc(100% - var(--n) * 2) 100%, 0 100%); }
.book4 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease; }
:root[data-theme="dark"] .book4 .l, :root[data-theme="light"] .book4 .d { opacity: 0; }
.book4__in { position: absolute; z-index: 2; left: clamp(26px, 3.6vw, 56px); top: clamp(26px, 3.6vw, 56px); width: 33%; }
.book4 .t2 { font-size: clamp(34px, 4.3vw, 72px); margin-bottom: 18px; }
.book4 .lead { margin-bottom: 24px; }

/* Interview section options */
.tv-page { padding-top: calc(var(--head) + 30px); }
.tv-page .wires { display: none; }
.tv-page .sec { margin-top: 84px; }
.tv-page .sec:first-of-type { margin-top: 20px; }
.tv-note { margin: 0; padding: 26px 0 16px; text-align: center; color: var(--ink); font-size: 16px; }
.tvh { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: end; }
.tvh .lead { margin: 0; }
.pb { position: absolute; left: 0; bottom: 0; z-index: 2; width: 56px; height: 56px; background: var(--blue); transition: width .3s var(--ease); }
.pb::after { content: ""; position: absolute; left: 21px; top: 17px; border-left: 17px solid #fff; border-block: 11px solid transparent; }
.tvplay { position: relative; display: block; width: 100%; padding: 0; background: #000; overflow: hidden; cursor: pointer; }
.tvplay img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .7s var(--ease); }
.tvplay:hover img { transform: scale(1.025); }
.tvplay:hover .pb { width: 84px; }

/* A: one box, player plus thumbnails */
.tva { padding: clamp(24px, 3.4vw, 54px); }
.tva__b { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 48px); margin-top: clamp(26px, 3.4vw, 50px); }
.tva__c { padding-top: 18px; }
.tva__c .t3 { margin: 8px 0 0; font-size: clamp(24px, 2.5vw, 40px); }
.tva__l { display: flex; flex-direction: column; justify-content: space-between; border-top: 1px solid var(--line); }
.tvr { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; padding: 12px 10px 12px 0; background: none; color: var(--ink); text-align: left; border-bottom: 1px solid var(--line); cursor: pointer; }
.tvr img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tvr b { display: block; margin-top: 5px; font-family: var(--display); font-weight: 800; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.1; letter-spacing: -.015em; }
.tvr.on { background: var(--ink); color: var(--panel); padding-left: 10px; }
.tvr.on .eyebrow { color: inherit; opacity: .7; }
.tvr.wipe:hover, .tvr.wipe:focus-visible { color: var(--panel); padding-left: 10px; }

/* B: gapless contact sheet */
.tvb { padding: 0; }
.tvb .tvh { padding: clamp(24px, 3.4vw, 54px); }
.tvb__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* The same move as the buttons: a square bite from the bottom right that closes on hover. Nothing else moves. */
.tile { --c: 28px; position: relative; padding: 0; background: #000; overflow: hidden; color: inherit; text-align: left; cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%); transition: clip-path .3s var(--ease); }
.tile:first-child { --c: 44px; grid-column: span 2; grid-row: span 2; }
.tile:hover, .tile:focus-visible { clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%); }
.tile img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tile__c { display: none; }

/* C: sliding panels */
.tvc { padding: clamp(24px, 3.4vw, 54px); --sl: 84px; container-type: inline-size; }
.acc { display: flex; gap: 2px; margin-top: clamp(26px, 3.4vw, 50px); height: calc((100cqw - 4 * var(--sl) - 8px) * .5625 + 112px); }
.sl { position: relative; flex: 0 0 var(--sl); min-width: 0; overflow: hidden; background: var(--bg); transition: flex-grow .55s var(--ease), flex-basis .55s var(--ease), background-color .25s; }
.sl.on { flex: 1 1 0; }
.sl__h { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; padding: 22px 0; background: none; color: var(--ink); cursor: pointer; transition: color .22s, opacity .2s; }
.sl:not(.on):hover { background: var(--ink); }
.sl:not(.on):hover .sl__h { color: var(--bg); }
.sl__n { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; }
.sl__t { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.1; letter-spacing: -.012em; white-space: nowrap; }
.sl.on .sl__h { opacity: 0; pointer-events: none; }
.sl__b { position: absolute; top: 0; left: 0; bottom: 0; width: calc(100cqw - 4 * var(--sl) - 8px); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.sl.on .sl__b { opacity: 1; visibility: visible; transition-delay: .22s; }
.sl__c { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 22px; }
.sl__c .t3 { margin: 0; }

/* Panels stay put while scrolling, so the line never shows before its section */
.js.l4 .up { opacity: 1; transform: none; transition: none; }
/* Clear separation between sections, and between dark panels and the black page */
.l4 .sec { margin-top: clamp(76px, 7.4vw, 116px); }
:root[data-theme="dark"].l4 .p, :root[data-theme="dark"].l4 .pst, :root[data-theme="dark"].l4 .book4, :root[data-theme="dark"].l4 .well { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); }
:root[data-theme="dark"].l4 .blue-p, :root[data-theme="dark"].l4 .inv { box-shadow: none; }

/* ---------- Inner pages ---------- */
/* The logo as a small mark: two squares meeting at a blue seam */
:root { --mark: linear-gradient(currentColor, currentColor) 0 100% / 44% 44% no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 44% 44% no-repeat; }
.l4 .nav__link, .l4 .foot__cols a, .l4 .mega-menu__col a, .l4 .link, .l4 .who a, .jobrow { position: relative; }
.l4 .foot__cols a { transition: color .15s, padding-left .22s var(--ease); }
.l4 .mega-menu__col a { padding: 9px 14px; margin: 0 -14px; transition: color .15s, background-color .15s, padding-left .22s var(--ease); }
.l4 .foot__cols a::before, .l4 .mega-menu__col a::before, .l4 .nav__link::before, .l4 .link::before { content: ""; position: absolute; width: 11px; height: 11px; background: var(--mark); color: var(--blue); opacity: 0; transition: opacity .18s; pointer-events: none; }
:root[data-theme="dark"] .l4 .foot__cols a::before, :root[data-theme="dark"] .l4 .mega-menu__col a::before, :root[data-theme="dark"] .l4 .nav__link::before, :root[data-theme="dark"] .l4 .link::before { color: var(--glow); }
.l4 .foot__cols a::before, .l4 .mega-menu__col a::before { left: 0; top: 50%; margin-top: -5.5px; }
.l4 .mega-menu__col a::before { left: 14px; }
.l4 .foot__cols a:hover { padding-left: 18px; }
.l4 .mega-menu__col a:hover { padding-left: 34px; }
.l4 .nav__link::before { left: 50%; bottom: 8px; margin-left: -5.5px; }
.l4 .link::before { right: -18px; top: 2px; }
.l4 .foot__cols a:hover::before, .l4 .mega-menu__col a:hover::before, .l4 .nav__link:hover::before, .l4 .nav__item.open .nav__link::before, .l4 .link:hover::before { opacity: 1; }
.l4 .link:hover { border-color: currentColor; color: inherit; }
/* Buttons: the mark lands in the corner when the notch closes */
.l4 .btn::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 9px; height: 9px; background: var(--mark); color: currentColor; opacity: 0; transition: opacity .2s; }
.l4 .btn:hover::after { opacity: .9; }
/* Panels: the mark sits quietly in the bottom corner */
.card, .sc, .l4 .q, .step__t { position: relative; }
.box::after, .l4 .q::after, .step__t::after { content: ""; position: absolute; right: 18px; bottom: 18px; width: 14px; height: 14px; background: var(--mark); color: var(--blue); }
:root[data-theme="dark"] .box::after, :root[data-theme="dark"].l4 .q::after, :root[data-theme="dark"] .step__t::after { color: var(--glow); }
.btn--w { background: #fff; color: var(--blue); }
.btn--w:hover { background: #fff; }
.btn--k { background: #000; color: #fff; box-shadow: none; }
.btn--k:hover { background: #000; color: #fff; }

/* ---- Inner page openings ---- */
.hx { position: relative; overflow: hidden; background: var(--bg); padding: calc(var(--head) + clamp(36px, 5vw, 72px)) var(--gut) clamp(36px, 4vw, 60px); transition: background-color .45s; }
.hx .eyebrow { margin: 0; color: var(--blue); }
:root[data-theme="dark"] .hx .eyebrow { color: var(--glow); }
.hx__d { margin: 0; font-family: var(--display); font-weight: 900; line-height: .94; letter-spacing: -.04em; }
.hx .lead { margin: 0; }
.hx--stage { min-height: 100svh; }
.hx--stage .hx__d { position: relative; z-index: 2; margin-top: 18px; font-size: clamp(50px, min(8vw, 15svh), 150px); text-wrap: balance; }
.hx--stage .hx__b { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; width: min(40%, 560px); margin-top: clamp(30px, 5svh, 64px); }
.hx--stage .hx__art { position: absolute; right: var(--gut); bottom: 0; width: min(44vw, 72svh); aspect-ratio: 4 / 3; }
.hx--center { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; padding-bottom: 0; }
.hx--center .hx__d { font-size: clamp(44px, min(6.8vw, 13svh), 118px); max-width: 12.5em; }
.hx--center .lead { max-width: 42em; }
.hx--center .hx__art { width: min(62vw, 800px); aspect-ratio: 4 / 3; margin-top: -10px; }
.hx__fit .mega { font-family: var(--display); font-weight: 900; line-height: .9; letter-spacing: -.04em; }
.hx--fit .hx__fit { margin: 0; }
.hx__r { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 70px); align-items: center; margin-top: 12px; }
.hx__r .hx__art { aspect-ratio: 4 / 3; }
.hx__r .hx__b { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.hx--blue { background: var(--blue); color: #fff; min-height: 88svh; display: flex; flex-direction: column; justify-content: flex-end; gap: 26px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), calc(100% - 32px) calc(100% - 64px), calc(100% - 32px) calc(100% - 32px), calc(100% - 64px) calc(100% - 32px), calc(100% - 64px) 100%, 0 100%); }
:root[data-theme] .hx--blue .eyebrow { color: #fff; opacity: .9; }
.hx--blue .hx__d { font-size: clamp(54px, min(11vw, 21svh), 200px); max-width: 9.6em; }
.hx--blue .hx__b { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(24px, 6vw, 100px); }
.hx--blue .hx__b .lead { max-width: 36em; }
.hx--blue .btn { flex: none; }
.hx--full { padding: 0; aspect-ratio: 2400 / 1340; min-height: 620px; width: 100%; }
.hx--full > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 100%; transition: opacity .5s ease; }
:root[data-theme="dark"] .hx--full .l, :root[data-theme="light"] .hx--full .d { opacity: 0; }
.hx--full .hx__b { position: absolute; z-index: 2; left: var(--gut); top: calc(var(--head) + clamp(24px, 3vw, 48px)); width: min(35%, 520px); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hx--full .hx__d { font-size: clamp(36px, min(4.7vw, 9.4svh), 78px); line-height: .98; }
.hx--full .lead { font-size: clamp(16px, 1.25vw, 19px); }
.hx--list .hx__d { margin-top: 18px; font-size: clamp(46px, min(6.4vw, 12svh), 116px); max-width: calc(100% - min(38vw, 66svh) - 24px); }
.hx--list .hx__art { position: absolute; right: var(--gut); top: calc(var(--head) + 24px); width: min(38vw, 66svh); aspect-ratio: 4 / 3; }
.hx--list .hx__b { display: grid; gap: 12px; max-width: min(42em, calc(100% - min(38vw, 66svh) - 24px)); margin-top: 26px; }
.jobrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: clamp(16px, 3vw, 48px); margin-top: clamp(30px, 4vw, 52px); padding: 22px 0; border-block: 1px solid var(--line); transition: padding-left .22s var(--ease); }
.jobrow b { font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2.6vw, 42px); letter-spacing: -.025em; }
.jobrow__m { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.jobrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--mark); color: var(--blue); opacity: 0; transition: opacity .18s; }
.jobrow:hover { padding-left: 28px; }
.jobrow:hover::before { opacity: 1; }
.hx--mani { text-align: center; padding-top: calc(var(--head) + 8px); }
.hx--mani .hx__art { width: min(44vw, 58svh); aspect-ratio: 4 / 3; margin: 0 auto; }
.hx--mani .hx__d { margin-top: 12px; font-size: clamp(46px, min(8.6vw, 15svh), 150px); }
.hx__c { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3.4vw, 56px); margin-top: clamp(30px, 4vw, 56px); padding-top: 22px; border-top: 1px solid var(--line); text-align: left; }
.hx__c .lead { font-size: clamp(17px, 1.3vw, 20px); }

/* Pixel cursor: an arrow of squares with the logo's second block beside it */
.l4, .l4 * { cursor: url(cursor/arrow.png) 0 0, auto; cursor: -webkit-image-set(url(cursor/arrow.png) 1x, url(cursor/arrow@2x.png) 2x) 0 0, auto; }
.l4 a, .l4 a *, .l4 button, .l4 button *, .l4 summary, .l4 summary *, .l4 .tog, .l4 .tog * { cursor: url(cursor/hand.png) 0 0, pointer; cursor: -webkit-image-set(url(cursor/hand.png) 1x, url(cursor/hand@2x.png) 2x) 0 0, pointer; }
:root[data-theme="dark"] .fit canvas.fx { filter: contrast(1.01) brightness(1.32); }
canvas.fx { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; image-rendering: pixelated; }

/* FAQs: no lines above the first question, and answers ease open */
:root[data-theme="dark"].l4 .faq-l, :root[data-theme="dark"].l4 .box--faq { box-shadow: none; }
details { overflow: hidden; }
summary i { transition: transform .28s var(--ease), color .2s; }

/* Closing mammoth: edge to edge, melting into the page above and the footer below */
.l4 { overflow-x: clip; }
.l4 .book4, .l4 .in .book4 { --m: linear-gradient(to bottom, transparent 0, #000 15%, #000 88%, transparent 100%); width: 100vw; max-width: none; margin-left: calc(50% - 50vw); aspect-ratio: 2400 / 1588; overflow: visible; clip-path: none; background: linear-gradient(var(--tray) 0 62%, var(--panel) 62% 100%); box-shadow: none !important; transition: none; }
.l4 .book4 img { object-fit: cover; -webkit-mask-image: var(--m); mask-image: var(--m); }
.l4 .book4__in, .l4 .in .book4__in { left: max(var(--gut), calc((100vw - 1180px) / 2)); top: 19%; width: min(31%, 440px); }
.l4 .board:has(.book4) { padding-bottom: 0; }
.l4 .foot { margin-top: 0; }
.foot .run-w { margin-inline: calc(var(--gut) * -1); }

/* Closing text: an even rhythm between headline, copy and button */
.l4 .book4__in, .l4 .in .book4__in { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.l4 .book4__in > *, .l4 .in .book4 .t2, .l4 .in .book4 .lead, .l4 .book4 .t2, .l4 .book4 .lead { margin: 0; }
.l4 .book4__in .lead + .lead { margin-top: -8px; }
.l4 .book4__in .btn { margin-top: 12px; }

/* Footer wordmark options (review page) */
.fo-page ~ .foot { display: none; }
.fo { padding: clamp(30px, 4.4vw, 64px) clamp(20px, 3.4vw, 52px); overflow: hidden; }
.fo { --soft: #cbc4b7; --mid: #8d877b; }
:root[data-theme="dark"] .fo { --soft: #3a3a41; --mid: #6b6c75; }
.wm { display: block; width: 100%; height: auto; overflow: visible; }
.wa { position: relative; --p: 0%; }
.wa .wm--line path { fill: none; stroke: var(--mid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wa .wm--fill { position: absolute; inset: 0; color: var(--blue); clip-path: inset(-2px calc(100% - var(--p)) -2px 0); }
.wb { overflow: hidden; }
.wb .wm { overflow: hidden; color: var(--soft); }
.wb .lt { transform: translateY(112%); transition: transform .9s var(--ease), color .45s ease; transition-delay: calc(var(--i) * 70ms), 0s; }
.wb.in .lt { transform: none; }
.wb .lt.on { color: var(--blue); }
.wb .lt:hover { color: var(--blue); }
.wc { position: relative; --dx: 1.5px; --dy: 1.5px; margin: 0 26px 26px 0; }
.wc .wm { position: absolute; inset: 0; color: #0a2f8f; transform: translate(calc(var(--i) * var(--dx)), calc(var(--i) * var(--dy))); }
.wc .wm:first-child { position: relative; z-index: 2; color: var(--blue); transform: none; }
.run-w { overflow: hidden; margin-inline: clamp(-52px, -3.4vw, -20px); }
.run { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); width: max-content; will-change: transform; }
.run span { font-family: var(--display); font-weight: 900; font-size: clamp(64px, 11vw, 176px); line-height: 1; letter-spacing: -.04em; white-space: nowrap; color: var(--ink); }
.run span:nth-of-type(even) { color: var(--blue); }
.run img { width: clamp(52px, 8vw, 128px); height: auto; flex: none; }
.we canvas { display: block; width: 100%; }

/* ---- Inner pages: contained width, calmer type, one box per topic ---- */
.in { --edge: max(var(--gut), calc((100vw - 1180px) / 2)); }
.in .hx { padding-inline: var(--edge); }
.in .hx--full { padding: 0; aspect-ratio: 2400 / 1588; }
.in .hx--full > img { object-position: 50% 100%; -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent); mask-image: linear-gradient(to bottom, #000 88%, transparent); }
.in .hx--full { background: var(--tray); }
.in .hx--full .hx__b { left: var(--edge); width: min(36%, 460px); }
.in .board { max-width: 1212px; margin-inline: auto; padding: 16px 16px clamp(48px, 5vw, 80px); }
.in .sec { margin-top: clamp(68px, 6vw, 92px); }
.in .sec:first-of-type { margin-top: 24px; }
.in .t2 { margin: 0; font-size: clamp(28px, 2.9vw, 44px); line-height: 1.04; letter-spacing: -.03em; }
.in .t3 { margin: 0; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.12; }
.in .lead { margin: 0; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.5; }
.in .hx--stage .hx__d { font-size: clamp(44px, min(6.4vw, 12svh), 104px); }
.in .hx--stage .hx__art { right: var(--edge); width: min(40vw, 62svh, 560px); }
.in .hx--center .hx__d { font-size: clamp(40px, min(5.2vw, 10.5svh), 84px); }
.in .hx--center .hx__art { width: min(54vw, 640px); }
.in .hx--blue { min-height: 74svh; }
.in .hx--blue .hx__d { font-size: clamp(48px, min(8vw, 15svh), 132px); }
.in .hx--full .hx__d { font-size: clamp(34px, min(3.9vw, 8svh), 62px); }
.in .hx--list .hx__d { font-size: clamp(42px, min(5.2vw, 10svh), 84px); max-width: 620px; }
.in .hx--list .hx__art { right: var(--edge); width: min(34vw, 56svh, 460px); }
.in .hx--list .hx__b { max-width: 600px; }
.in .hx--mani .hx__d { font-size: clamp(42px, min(6.2vw, 11.5svh), 104px); }
.in .hx--mani .hx__art { width: min(36vw, 48svh); }
.hx--mani .hx__c .lead, .in .hx--mani .lead { font-size: clamp(16px, 1.1vw, 17px); }
.box { position: relative; padding: clamp(28px, 4.2vw, 64px); }
.box__h { max-width: 44em; margin-bottom: clamp(26px, 3vw, 44px); display: grid; gap: 14px; }
.box--side { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.box--side .box__h { position: sticky; top: calc(var(--head) + 28px); margin-bottom: 0; }
.in .box--bg { background: var(--bg); }
.box__end { margin-top: 28px !important; padding-top: 22px; border-top: 1px solid var(--line); font-weight: 500; }
.box__b > .row3:first-child { padding-top: 0; }
.box__b > .row3:last-child { padding-bottom: 0; }
.in .row3 { padding: 20px 0; }
.in .row3 p { font-size: 16px; line-height: 1.5; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px); }
.two .row3 { padding: 22px 0 0; border-top: 2px solid var(--blue); border-bottom: 0; }
.in .strip { padding: 0; background: none; box-shadow: none; }
.in .strip .sc { padding: 0 clamp(18px, 2.4vw, 34px); }
.in .strip .sc:first-child { padding-left: 0; }
.in .strip .sc:last-child { padding-right: 0; }
.in .sc__n { margin-bottom: 20px; font-size: clamp(32px, 3vw, 46px); }
.in .strip[style*="--k:2"] { gap: 30px clamp(30px, 5vw, 70px); }
.in .strip[style*="--k:2"] .sc { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); }
.in .strip[style*="--k:2"] .sc__n { margin-bottom: 12px; }
.in .feat { align-items: center; gap: clamp(28px, 4.5vw, 72px); padding: clamp(24px, 3.4vw, 52px); background: var(--bg); }
.feat__a .fit { aspect-ratio: 4 / 3; }
.feat__t { display: grid; gap: 20px; }
.feat.flip .feat__a { order: 2; }
.band2 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); padding: clamp(32px, 4.8vw, 72px); }
.band2 .stk { gap: 16px; }
.band2--c { grid-template-columns: minmax(0, 1fr); gap: 20px; justify-items: center; text-align: center; }
.band2--c .t2 { max-width: 16em; }
.band2--c .stk { max-width: 36em; justify-items: center; }
.pair2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
.pair2 > div { padding: clamp(30px, 4.2vw, 64px); display: grid; gap: 22px; align-content: start; }
.pair2 > div + div { border-left: 1px solid rgba(128, 128, 128, .35); }
.wk2 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(24px, 3.4vw, 52px); }
.wk2__t { display: grid; gap: 20px; }
.lm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lm__i { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 2; background: #000; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); transition: clip-path .3s var(--ease); }
.lm__i:hover { clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%, 0 100%); }
.lm__i img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lm__i figcaption { position: absolute; z-index: 2; left: 0; bottom: 0; right: 0; display: grid; gap: 2px; padding: 34px 16px 12px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.lm__i b { font-family: var(--display); font-weight: 900; font-size: clamp(19px, 1.7vw, 25px); letter-spacing: -.02em; line-height: 1; }
.lm__i span { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.in .fig b { font-size: clamp(52px, 6vw, 92px); }
.gal2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gal2 img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gal2 img:first-child { grid-column: span 2; grid-row: span 2; }
.person { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; padding: clamp(24px, 3.4vw, 52px); }
.person img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; }
.person > div { display: grid; gap: 20px; }
.ppl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 4.6vw, 70px); }
.pp img { display: block; width: 100%; max-width: 300px; aspect-ratio: 1; object-fit: cover; object-position: 50% 14%; margin-bottom: 20px; }
.pp__n { margin: 6px 0 14px; font-family: var(--display); font-weight: 900; font-size: clamp(23px, 2vw, 30px); letter-spacing: -.025em; }
.pp p { color: var(--mut); font-size: 16px; line-height: 1.5; }
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 38px); }
.st4 .fit { aspect-ratio: 1; margin-bottom: 8px; }
.st4 .eyebrow { color: var(--blue); }
:root[data-theme="dark"] .st4 .eyebrow { color: var(--glow); }
.st4 .t3 { margin: 6px 0 10px; }
.st4 p { margin: 0 0 10px; color: var(--mut); font-size: 15px; line-height: 1.48; }
.role { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(30px, 5.4vw, 84px); align-items: start; padding: clamp(28px, 4.6vw, 70px); }
.role__s { position: sticky; top: calc(var(--head) + 28px); display: grid; gap: 18px; justify-items: start; }
.role__s .eyebrow { color: var(--blue); }
:root[data-theme="dark"] .role__s .eyebrow { color: var(--glow); }
.role .meta { color: var(--mut); }
.role .meta li { font-size: 10px; padding: 5px 9px; }
.role__h { margin: clamp(36px, 3.6vw, 52px) 0 10px; font-family: var(--display); font-weight: 900; font-size: clamp(21px, 1.8vw, 27px); letter-spacing: -.022em; }
.in .blocks li { padding: 11px 0 11px 26px; font-size: 16px; }
.in .blocks li::before { top: 17px; }
.in .book4 { margin: 0; }
.in .book4__in { width: 31%; }
.in .book4 .t2 { font-size: clamp(28px, 3.1vw, 46px); margin-bottom: 14px; }
.in .book4 .lead { margin-bottom: 14px; }
.in summary { padding: 15px 0; font-size: clamp(17px, 1.3vw, 19px); }
.in details p { padding: 0 30px 18px 0; font-size: 16px; }

/* ---- Section shapes ---- */
.strip { --k: 3; display: grid; grid-template-columns: repeat(var(--k), minmax(0, 1fr)); padding: 0; }
.sc { padding: clamp(24px, 2.8vw, 42px) clamp(18px, 2vw, 30px) clamp(36px, 3.4vw, 54px); border-left: 1px solid var(--line); }
.sc:first-child { border-left: 0; }
.sc__n { display: block; margin-bottom: clamp(36px, 5vw, 76px); font-family: var(--display); font-weight: 900; font-stretch: 62%; font-size: clamp(44px, 4.6vw, 76px); line-height: .85; color: var(--blue); }
:root[data-theme="dark"] .sc__n { color: var(--glow); }
.sc .t3 { margin: 0; }
.sc p { margin: 10px 0 0; color: var(--mut); font-size: 16px; line-height: 1.42; }
.brows { padding-block: 6px; }
.br { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 56px); align-items: start; padding: clamp(24px, 2.8vw, 40px) 44px clamp(24px, 2.8vw, 40px) 0; border-bottom: 1px solid var(--line); }
.br:last-child { border-bottom: 0; }
.br__t { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(25px, 2.7vw, 44px); line-height: 1; letter-spacing: -.03em; }
.br p { font-size: 18px; line-height: 1.42; color: var(--mut); }
.bandp--c { text-align: center; display: flex; flex-direction: column; align-items: center; }
.bandp--c .t2 { max-width: 13em; }
.stk { display: grid; gap: 14px; }
.stk p { margin: 0; }
.pn { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; }
.pn .btn { margin-top: 6px; }
.pn > h2, .pn > h3 { margin: 0; }
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.feat .well .fit { aspect-ratio: 4 / 3; }
.feat.flip .well { order: 2; }
.bandp { padding: clamp(36px, 6vw, 96px) clamp(26px, 5vw, 84px); }
.bandp .t2 { max-width: 15em; }
.bandp .stk { margin-top: 26px; max-width: 46em; }
.bandp .lead { margin: 0; }
.l4 .stair--low .step:nth-of-type(1) { margin-top: 132px; } .l4 .stair--low .step:nth-of-type(2) { margin-top: 88px; } .l4 .stair--low .step:nth-of-type(3) { margin-top: 44px; }
.split .t2 { font-size: clamp(34px, 3.9vw, 62px); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; }
.rows { padding-block: 8px; }
.row3 { padding: 22px 0; border-bottom: 1px solid var(--line); }
.row3:last-child { border-bottom: 0; }
.row3 .t3 { margin: 0; }
.row3 p { margin: 8px 0 0; color: var(--mut); font-size: 17px; line-height: 1.42; }
.inv .row3 p { color: inherit; opacity: .74; }
.tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; gap: 12px; }
.card .t3 { margin: 0; }
.card p { margin: 0; color: var(--mut); font-size: 17px; line-height: 1.42; }
.hd { margin-bottom: 16px; }
.hd .t2 { margin: 0; }
.hd .lead { margin: 16px 0 0; max-width: 42em; }
.note { margin-top: 16px; }
.note p { margin: 0; }
.blocks { list-style: none; margin: 0; padding: 0; }
.blocks li { position: relative; padding: 13px 0 13px 28px; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.4; }
.blocks li:last-child { border-bottom: 0; }
.blocks li::before { content: ""; position: absolute; left: 0; top: 19px; width: 11px; height: 11px; background: var(--blue); }
.blocks b { font-weight: 700; }
.city { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.city span { padding: clamp(20px, 2.4vw, 34px) 0; font-family: var(--display); font-weight: 900; font-size: clamp(24px, 3vw, 50px); letter-spacing: -.03em; }
.wk { display: flex; flex-direction: column; gap: 24px; }
.wk .city { border-top: 1px solid var(--line); margin-top: 8px; }
.lab4__f.solo { padding: 0; margin-top: clamp(26px, 3vw, 44px); }
.gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.ph2 { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 12px; text-align: center; color: var(--mut); background: repeating-linear-gradient(135deg, transparent 0 9px, var(--line) 9px 10px); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.gal .ph2:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.bio { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px; }
.bio__p { padding: 0; overflow: hidden; background: var(--bg); }
.bio__p img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.bio__p.none { display: grid; place-items: center; min-height: 360px; }
.bio__p.none b { display: grid; place-items: center; width: 120px; height: 120px; background: var(--blue); color: #fff; font-family: var(--display); font-weight: 900; font-size: 44px; }
.bio__p.none span { margin-top: -20%; color: var(--mut); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.bio + .bio { margin-top: 16px; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.meta li { padding: 6px 12px; box-shadow: inset 0 0 0 1px currentColor; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.bigq { min-height: 340px; display: grid; }
.bigq > figure { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .4s; }
.bigq > figure.on { opacity: 1; visibility: visible; }
.bigq blockquote { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 4.2vw, 72px); line-height: 1; letter-spacing: -.03em; }
.names { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.names button { display: flex; gap: 12px; align-items: center; padding: 12px 0 0; border-top: 2px solid rgba(255, 255, 255, .3); color: inherit; text-align: left; font-weight: 700; font-size: 15px; line-height: 1.15; opacity: .7; transition: opacity .2s, border-color .2s; }
.names button:hover { opacity: 1; }
.names button.on { border-color: #fff; opacity: 1; }
.names img { width: 46px; height: 46px; object-fit: cover; flex: none; }


@media (max-width: 960px) {
  .wires { display: none; }
  .board { padding: 0 10px 10px; --n: 16px; }
  .sec { margin-top: 38px; }
  .tag { left: 14px; transform: none; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .grid > * { grid-column: 1 !important; grid-row: auto !important; }
  .stage { min-height: 0; display: block; padding-bottom: 14px; }
  .beast { position: relative; left: 50% !important; top: auto !important; bottom: auto !important; width: 100% !important; }
  .word { margin-top: 26px; }
  .stats { grid-template-columns: 1fr; gap: 12px; } .stat { min-height: 0; gap: 18px; }
  .foot__cols { grid-template-columns: 1fr 1fr; } .foot__cols > :first-child { grid-column: 1 / -1; }
  .final { display: block; min-height: 0; padding: 26px 22px 74vw; }
  .final .pic img { object-position: 74% 100%; }
  .final__in { width: auto; }
  dialog.lb { max-width: 96vw; }
  .l4 .idea-w { min-height: 0; }
  .stair { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .stair__t { position: static; width: auto; padding-top: 16px; }
  .l4 .step:nth-of-type(n) { margin-top: 0; }
  .step__t { min-height: 0; }
  .l4 .step .well .fit { width: 78%; }
  .lab4 { grid-template-columns: minmax(0, 1fr); }
  .lab4__f { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lab4 .fig b { font-size: 24vw; }
  .pst { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "top" "q" "view" "nav"; padding: 24px 18px 34px; }
  .pst__q { margin: 22px 0; font-size: 30px; min-height: 2em; }
  .pst__v { height: 68vw; margin-bottom: 18px; }
  .ar { width: 48px; height: 48px; }
  .vg { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .qg { display: flex; flex-direction: column; gap: 12px; }
  .book4 { aspect-ratio: auto; padding: 26px 22px 58vw; }
  .book4 img { top: auto; bottom: 0; height: 56vw; }
  .book4__in { position: static; width: auto; }
  .tv-page { padding-top: calc(var(--head) + 14px); }
  .tv-page .sec { margin-top: 50px; }
  .tv-note { padding: 24px 6px 12px; text-align: left; }
  .tvh { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tva__b { grid-template-columns: minmax(0, 1fr); }
  .tvr { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .tvb__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { display: flex; flex-direction: column; background: var(--panel); --c: 16px; }
  .tile:first-child { --c: 16px; }
  .tile__c { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 18px; min-height: 92px; }
  .tile:first-child { grid-column: span 2; grid-row: auto; }
  .tile b { font-family: var(--display); font-weight: 900; font-size: 16px; line-height: 1.08; letter-spacing: -.02em; }
  .tile .eyebrow { font-size: 10px; letter-spacing: .08em; }
  .tile .pb { bottom: auto; top: 0; width: 44px; height: 44px; }
  .tile .pb::after { left: 16px; top: 12px; border-left-width: 14px; border-block-width: 9px; }
  .acc { flex-direction: column; height: auto; }
  .sl, .sl.on { flex: none; }
  .sl__h { position: static; flex-direction: row; gap: 14px; padding: 16px 14px; text-align: left; }
  .sl__t { writing-mode: horizontal-tb; transform: none; white-space: normal; font-size: 17px; }
  .sl.on .sl__h { display: none; }
  .sl__b { position: static; width: auto; display: none; }
  .sl.on .sl__b { display: block; }
  .sl__c { padding: 14px; }
  .book4 .btn { height: auto; min-height: 52px; padding-block: 12px; white-space: normal; line-height: 1.3; }
  .hx { padding: calc(var(--head) + 30px) 18px 28px; }
  .hx--stage { min-height: 0; }
  .hx--stage .hx__d, .hx--list .hx__d, .hx--mani .hx__d { font-size: 13vw; }
  .hx--stage .hx__b { width: auto; }
  .hx--stage .hx__art, .hx--list .hx__art { position: static; width: 100%; margin-top: 14px; }
  .hx--center { padding-bottom: 0; }
  .hx--center .hx__d { font-size: 12vw; }
  .hx--center .hx__art { width: 100%; margin-top: 0; }
  .hx__r { grid-template-columns: minmax(0, 1fr); }
  .hx--blue { min-height: 0; clip-path: none; }
  .hx--blue .hx__d { font-size: 16vw; }
  .hx--blue .hx__b { flex-direction: column; align-items: flex-start; }
  .hx--full { aspect-ratio: auto; min-height: 0; padding: calc(var(--head) + 26px) 18px 60vw; }
  .hx--full > img { top: auto; bottom: 0; height: 56vw; }
  .hx--full .hx__b { position: static; width: auto; }
  .hx--full .hx__d { font-size: 12vw; }
  .hx--list .hx__d, .hx--list .hx__b { max-width: none; }
  .jobrow { grid-template-columns: minmax(0, 1fr) auto; }
  .jobrow .eyebrow, .jobrow__m { grid-column: 1 / -1; }
  .jobrow > span[aria-hidden] { grid-row: 2; grid-column: 2; }
  .jobrow:hover { padding-left: 0; }
  .hx--mani .hx__art { width: 86%; }
  .hx__c { grid-template-columns: minmax(0, 1fr); }
  .box--side, .band2, .pair2, .wk2, .person, .ppl, .steps4, .role, .two, .feat, .in .strip { grid-template-columns: minmax(0, 1fr); }
  .box--side .box__h, .role__s { position: static; }
  .pair2 > div + div { border-left: 0; border-top: 1px solid rgba(128, 128, 128, .35); }
  .feat.flip .feat__a { order: 0; }
  .in .strip .sc, .in .strip .sc:first-child, .in .strip .sc:last-child { padding: 18px 0; }
  .in .strip .sc:first-child { padding-top: 0; }
  .gal2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in .hx--full { padding: calc(var(--head) + 26px) 18px 60vw; }
  .in .hx--full .hx__b { width: auto; }
  .in .hx--full .hx__d { font-size: 11vw; }
  .in .hx--list .hx__d, .in .hx--list .hx__b { max-width: none; }
  .in .hx--stage .hx__art, .in .hx--list .hx__art { width: 100%; }
  .in .hx--center .hx__art, .in .hx--mani .hx__art { width: 92%; }
  .in .hx--blue { min-height: 0; }
  .in .hx--blue .hx__d { font-size: 15vw; }
  .in .hx--center .hx__d { font-size: 10.5vw; }
  .in .hx--stage .hx__d, .in .hx--list .hx__d, .in .hx--mani .hx__d { font-size: 12vw; }
  .l4 .book4, .l4 .in .book4 { aspect-ratio: auto; padding: 44px 18px 62vw; }
  .l4 .book4 img { height: 66vw; }
  .l4 .book4__in, .l4 .in .book4__in { position: static; width: auto; }
  .in .board { padding-inline: 10px; }
  .strip { grid-template-columns: minmax(0, 1fr); }
  .sc { border-left: 0; border-top: 1px solid var(--line); }
  .sc:first-child { border-top: 0; }
  .sc__n { margin-bottom: 14px; }
  .br { grid-template-columns: minmax(0, 1fr); padding-right: 30px; }
  .feat, .split, .tri, .duo, .bio { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .feat.flip .well { order: 0; }
  .city { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bio__p { aspect-ratio: 4 / 4.4; }
  .bio__p.none { aspect-ratio: auto; min-height: 220px; }
  .l1 .sec { --pad: 18px; padding: 76px 18px 60px; }
  .l1 .tag { top: 24px; left: 18px; }
  :is(.l1, .l4) .stage .intro { position: static; width: auto; }
  :is(.l1, .l4) .word { margin-top: 26px; }
  :is(.l1, .l4) .beast { margin-top: -5vw; }
  .l1 .seen { margin-right: -18px; }
  .seen-s.sec { padding-block: 66px 8px; }
  .idea-row, .lab-h, .px, .tk, .fq, .end__t { grid-template-columns: minmax(0, 1fr); }
  .idea-art { margin-left: 0; }
  .l1 .sec--pin { padding: 76px 18px 40px; }
  .pin { height: auto; }
  .pin__s { position: static; height: auto; overflow: visible; display: block; padding: 0; }
  .pin__l { width: auto; }
  .pin__l .t2 { font-size: 40px; }
  .ps__b { color: var(--ink); cursor: default; }
  .ps > p, .ps.on > p { max-height: none; opacity: 1; padding: 0 0 12px; }
  .ps__art, .ps.on .ps__art { position: static; width: 78%; aspect-ratio: 1; margin: 0 auto 14px; opacity: 1; transform: none; }
  .figs { flex-direction: column; gap: 30px; }
  .fig b { font-size: 26vw; }
  .pl { display: none; }
  .pv { position: static; height: auto; max-height: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -18px; padding-bottom: 8px; }
  .pv__i { flex: none; width: 84vw; opacity: 1; visibility: visible; scroll-snap-align: start; text-align: left; color: var(--ink); }
  .pv__i img { height: 58vw; object-fit: cover; }
  .pv__c { display: block; padding-top: 10px; font-size: 14px; }
  .vr { grid-template-columns: 104px minmax(0, 1fr); }
  .wipe:hover, .wipe:focus-visible { padding-left: 0; }
  .fq .xl { position: static; }
  .l1 .end { padding: 76px 0 0; }
  .end__t { padding: 0 18px; }
  .end__art { margin-top: 18px; }
  .names { grid-template-columns: 1fr 1fr; }
}


/* ---------- Tablet and phone refinements ---------- */
.step__t { padding-bottom: 44px; }
.head__cta { white-space: nowrap; }
@media (max-width: 1180px) {
  .nav__link { padding-inline: 9px; font-size: 14px; }
  .head__cta { padding-inline: 13px; font-size: 13px; }
}
@media (max-width: 1100px) {
  /* the closing text keeps clear of the tusk */
  .l4 .book4__in, .l4 .in .book4__in { top: 14%; gap: 16px; }
  .l4 .book4 .t2, .l4 .in .book4 .t2 { font-size: clamp(26px, 3.4vw, 40px); }
  .l4 .book4 .lead, .l4 .in .book4 .lead { font-size: 15px; line-height: 1.42; }
}
@media (max-width: 960px) {
  .hx--list { display: flex; flex-direction: column; }
  .in .hx--list .hx__art { order: 9; margin: 8px auto 0; width: 100%; max-width: 420px; }
  .in .hx--full { aspect-ratio: auto; padding: calc(var(--head) + 26px) 18px 62vw; }
  .in .hx--full > img { top: auto; bottom: 0; height: 66vw; object-fit: cover; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 90%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 90%, transparent); }
  .in .hx--full { background: var(--bg); }
  .in .hx--full .hx__b { position: relative; z-index: 2; left: auto; top: auto; width: auto; }
  .tick { width: 28px; height: 36px; }
  .link { padding-block: 10px 6px; }
  .pst__nav { flex-wrap: wrap; }
}
/* iPad portrait: use the width, two columns instead of the phone stack */
@media (min-width: 640px) and (max-width: 960px) {
  .l4 .stage { padding-inline: 28px; }
  .l4 .beast { width: 80% !important; margin-inline: auto; }
  .in .hx { padding-inline: 32px; }
  .in .board { padding-inline: 16px; }
  .in .hx--stage .hx__art { width: 66%; margin-inline: auto; display: block; }
  .in .hx--center .hx__art, .in .hx--mani .hx__art { width: 62%; }
  .in .hx--stage .hx__d, .in .hx--list .hx__d, .in .hx--mani .hx__d { font-size: 9vw; }
  .in .hx--center .hx__d { font-size: 8vw; }
  .in .hx--blue .hx__d { font-size: 12vw; }
  .in .hx--full .hx__d { font-size: 7vw; }
  .in .hx--full .hx__b { max-width: 560px; }
  .hx__r, .feat, .in .feat, .person, .ppl, .wk2, .pair2, .duo, .two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk2 { grid-template-columns: minmax(0, 1fr); }
  .feat.flip .feat__a { order: 2; }
  .pair2 > div + div { border-top: 0; border-left: 1px solid rgba(128, 128, 128, .35); }
  .stair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stair__t { grid-column: 1 / -1; }
  .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in .strip { grid-template-columns: repeat(var(--k), minmax(0, 1fr)); }
  .in .strip .sc, .in .strip .sc:first-child, .in .strip .sc:last-child { padding: 0 16px; }
  .in .strip .sc { border-top: 0; border-left: 1px solid var(--line); }
  .in .strip .sc:first-child { padding-left: 0; border-left: 0; }
  .in .strip .sc:last-child { padding-right: 0; }
  .in .strip[style*="--k:2"] .sc { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .lab4__f { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lab4 .fig b { font-size: 11vw; }
  .qg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qg__h { grid-column: 1 / -1; grid-row: auto; }
  .qg .q { grid-column: auto; }
  .tvb__g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pst__v { height: 56vw; }
  .foot__cols { grid-template-columns: 2fr repeat(4, 1fr); }
  .foot__cols > :first-child { grid-column: auto; }
}
@media (max-width: 1180px) {
  .link { padding-block: 10px 6px; }
  .in .hx--list .hx__d, .in .hx--list .hx__b { max-width: calc(100% - min(34vw, 56svh, 460px) - 32px); }
}
@media (max-width: 960px) {
  .l4 .nav__link::before { display: none; }
  .l4 .mega-menu__col a:hover { padding-left: 0; }
  .l4 .mega-menu__col a::before { display: none; }
  .in .hx--list .hx__d, .in .hx--list .hx__b { max-width: none; }
}
@media (max-width: 1180px) { .tick { width: 28px; height: 36px; } }
.tile { display: block; text-decoration: none; }