/* 1K · The surface — one sticky stage, nine steps of copy scrolling over it (/1k/surface.js drives the scene from the scroll). */
.fe { position: relative; }
.fe-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.fe-stage canvas { width: 100%; height: 100%; }
.fe-steps { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.fe-step { height: 100vh; height: 100svh; display: flex; align-items: center; padding: var(--head) var(--gutter) 0; width: min(100%, 1440px); margin-inline: auto; }
.fe-step--top { align-items: flex-start; padding-top: calc(var(--head) + 32px); }
.fe-copy { max-width: 34rem; opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .1, 1); }
.fe-step.on .fe-copy { opacity: 1; transform: none; }
.fe-step.on .fe-copy a { pointer-events: auto; }

.fe-kick { color: var(--k-grey-2); margin: 0 0 22px; }
.fe-h { margin: 0; font-size: clamp(44px, 6.6vw, 104px); line-height: .9; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; }
.fe-h--s { font-size: clamp(32px, 3.8vw, 56px); }
.fe-p { margin: 22px 0 0; max-width: 26rem; font-size: 18px; line-height: 1.45; color: var(--k-grey-2); }
.fe-list { margin: 22px 0 0; color: var(--k-white); }
.fe-share { margin: 0 0 26px; font-size: clamp(64px, 9vw, 132px); line-height: 0; }
.fe-share [data-numerals] svg { color: var(--k-white); }
.fe-go { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; }
/* Buttons fill along the 11° cut on hover: the solid one empties to an outline, the outline one fills solid. */
.fe-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; color: var(--k-ink); font-weight: 600; font-size: 15px; background: linear-gradient(101deg, transparent 50%, var(--k-white) 50%) 100% 0 / 230% 100% no-repeat; box-shadow: inset 0 0 0 1px var(--k-white); transition: background-position .5s cubic-bezier(.7, 0, .2, 1), color .35s; }
.fe-btn:hover, .fe-btn:focus-visible { background-position: 0 0; color: var(--k-white); }
.fe-btn--line { color: var(--k-white); background-image: linear-gradient(101deg, var(--k-white) 50%, transparent 50%); box-shadow: inset 0 0 0 1px var(--k-line-d); }
.fe-btn--line:hover, .fe-btn--line:focus-visible { color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-white); }

/* Phones: the scene takes the top, the copy sits at the bottom over a fade. */
@media (max-width: 720px) {
  .fe-step, .fe-step--top { align-items: flex-end; padding: var(--head) 0 0; }
  .fe-copy { width: 100%; max-width: none; padding: 72px var(--gutter) max(28px, env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(7,7,7,0), rgba(7,7,7,.86) 42%); }
  .fe-h { font-size: 40px; }
  .fe-h--s { font-size: 30px; }
  .fe-p { font-size: 16px; margin-top: 14px; }
  .fe-kick { margin-bottom: 14px; }
  .fe-share { font-size: 56px; margin-bottom: 18px; }
}

/* No WebGL: the copy alone, all of it visible. */
.fe.no-gl .fe-stage { display: none; }
.fe.no-gl .fe-steps { margin-top: 0; }
.fe.no-gl .fe-step { height: auto; min-height: 70vh; }
.fe.no-gl .fe-copy { opacity: 1; transform: none; }
.fe.no-gl .fe-copy a { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) { .fe-copy { transition: opacity .2s linear; transform: none; } }

/* The three faces, in order. */
.fe-tri { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; counter-reset: tri; }
.fe-tri li { counter-increment: tri; display: grid; grid-template-columns: 2.4em auto; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--k-line-d); }
.fe-tri li::before { content: "0" counter(tri); grid-row: span 2; font: 500 12px/1 var(--mono, ui-monospace, monospace); letter-spacing: .14em; color: var(--k-grey-2); }
.fe-tri b { font-size: clamp(28px, 3.2vw, 46px); line-height: 1; letter-spacing: -.035em; font-weight: 800; }
.fe-tri span { margin-top: 8px; font-size: 17px; color: var(--k-grey-2); }
.fe-hint { margin: 20px 0 0; color: var(--k-white); }
.fe-stage canvas { touch-action: pan-y; }
@media (max-width: 720px) {
  .fe-tri { margin-top: 14px; }
  .fe-tri li { padding: 9px 0; }
  .fe-tri b { font-size: 26px; }
  .fe-tri span { font-size: 15px; margin-top: 4px; }
}
@media (hover: none) { .fe-hint { display: none; } }

/* The app steps: a meter over the heading, counted by the scene (sample numbers, stamped). */
.fe-meter { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 24px; line-height: 0; }
.fe-meter [data-numerals] { font-size: clamp(72px, 8.4vw, 128px); color: var(--k-white); }
.fe-meter [data-numerals] svg { display: block; }
.fe-meter .mono { line-height: 1; color: var(--k-grey-2); padding-bottom: 6px; }
.fe-meter .fe-meter-alt { color: #8b9bff; }
.fe-meter .fe-sample { color: var(--k-white); padding: 4px 7px 3px; box-shadow: inset 0 0 0 1px currentColor; margin-bottom: 4px; font-size: 10px; }
@media (max-width: 720px) { .fe-meter { margin-bottom: 14px; } .fe-meter [data-numerals] { font-size: 54px; } }

/* Who they are: while the cube turns each face to you, its line lights and the others step back. */
.fe-step .fe-tri li { transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.fe-step.is-cycling .fe-tri li { opacity: .22; }
.fe-step.is-cycling .fe-tri li.is-on { opacity: 1; transform: translateX(12px); }
/* What they publish: each shape keyed by its look — paper, black, colour. */
.fe-tri--plates b::before { content: ""; display: inline-block; width: .62em; height: .62em; margin-right: .32em; vertical-align: .04em; background: #0b0b0b; box-shadow: inset 0 0 0 2px #f4f2ed; }
.fe-tri--plates li:nth-child(2) b::before { background: #f2f0eb; box-shadow: none; }
.fe-tri--plates li:nth-child(3) b::before { background: #031bbe; }

/* ── The copy, scrubbed by the scroll (2026-11-02) ──────────────────────────
   --p on each step is its distance from the centre of the screen (−1 … 1), from the scene's clock. Every word sits in its own mask and
   is pushed up into view as the step arrives, then on up and out as it leaves, one after another (--i), running backwards with the scroll.
   --e = how far in, --x = how far out. Blocks (lists, meters, buttons) do the same as whole units. The last step never leaves. */
.fe--kinetic .fe-copy { opacity: 1; transform: none; transition: none; }
.fe--kinetic .fe-step { --p: -1.2; }
.fe--kinetic .fw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .12em; margin: 0 -.04em -.12em; }
.fe--kinetic .fw-i, .fe--kinetic .fe-u {
  --e: clamp(0, calc((var(--p) + .62 - var(--i) * .03) / .2), 1);
  --x: clamp(0, calc((var(--p) - .26 - var(--i) * .012) / .18), 1);
  display: inline-block; will-change: transform;
}
.fe--kinetic .fw-i { transform: translateY(calc((1 - var(--e)) * 112% - var(--x) * 112%)) rotate(calc((1 - var(--e) + var(--x)) * 5deg)); transform-origin: 0 100%; }
.fe--kinetic .fe-p .fw-i { opacity: calc(var(--e) - var(--x)); transform: translateY(calc((1 - var(--e)) * 70% - var(--x) * 70%)); }
.fe--kinetic .fe-u { display: block; opacity: calc(var(--e) - var(--x)); transform: translateY(calc((1 - var(--e)) * 34px - var(--x) * 34px)); }
.fe--kinetic .fe-tri li.fe-u { display: grid; }
.fe--kinetic .fe-go.fe-u, .fe--kinetic .fe-meter.fe-u { display: flex; }
.fe--kinetic .fe-step:last-child .fw-i, .fe--kinetic .fe-step:last-child .fe-u { --x: 0; }
/* "Who they are" keeps lighting one aspect at a time on top of all this */
.fe--kinetic .fe-step.is-cycling .fe-tri li.fe-u { opacity: calc((var(--e) - var(--x)) * .22); }
.fe--kinetic .fe-step.is-cycling .fe-tri li.fe-u.is-on { opacity: calc(var(--e) - var(--x)); transform: translate(12px, calc((1 - var(--e)) * 34px - var(--x) * 34px)); }
@media (max-width: 720px) {
  /* the fade behind the copy follows the copy */
  .fe--kinetic .fe-copy { background: none; position: relative; }
  .fe--kinetic .fe-copy::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(7,7,7,0), rgba(7,7,7,.86) 42%); opacity: clamp(0, calc((.62 - max(var(--p), calc(var(--p) * -1))) / .22), 1); }
}

/* the chapter rail: a tick per chapter; the current one long and named */
.fe-rail { position: fixed; right: clamp(14px, 2vw, 28px); top: 50%; z-index: 4; display: none; transform: translateY(-50%); }
.fe--kinetic .fe-rail { display: grid; gap: 6px; justify-items: end; }
.fe-rail button { display: grid; grid-template-columns: auto auto 18px; align-items: center; gap: 10px; padding: 3px 0; border: 0; background: none; cursor: pointer; color: #6f6f6f; }
.fe-rail span { font: 500 10px/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em; opacity: 0; transition: opacity .3s; }
.fe-rail b { font: 600 11px/1 var(--mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; color: #f4f2ed; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .5s cubic-bezier(.2, .7, .2, 1); }
.fe-rail i { justify-self: end; display: block; width: 8px; height: 2px; background: currentColor; transition: width .4s cubic-bezier(.2, .7, .2, 1), background .3s; }
.fe-rail button.is-past i { background: #a9a9a9; }
.fe-rail button[aria-current] { color: #f4f2ed; }
.fe-rail button[aria-current] i { width: 18px; height: 3px; }
.fe-rail button[aria-current] b { max-width: 14em; }
.fe-rail button[aria-current] span, .fe-rail button:hover span { opacity: 1; }
.fe-rail button:hover b { max-width: 14em; }
@media (max-width: 1100px) { .fe--kinetic .fe-rail { display: none; } }

/* the chapter's number, huge and hollow, behind the scene */
.fe-num { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fe-num span { position: absolute; right: -2vw; bottom: -6vh; opacity: 0; transform: translateY(14%); transition: opacity .7s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.fe-num span.is-past { transform: translateY(-14%); }
.fe-num span.is-on { opacity: 1; transform: none; }
.fe-num svg { display: block; height: 72vh; width: auto; }
.fe-num path { fill: transparent; stroke: rgba(244, 242, 237, .1); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
/* the three aspects, a band crossing behind the cube */
.fe-band { position: absolute; left: 0; right: 0; top: 50%; pointer-events: none; overflow: hidden; opacity: var(--bw, 0); transform: translateY(-50%) rotate(-4deg); }
.fe-band span { display: block; white-space: nowrap; font: 800 22vh/1 var(--sans, "Helvetica Neue", Helvetica, Arial, sans-serif); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(244, 242, 237, .14); transform: translateX(var(--bx, 0)); }
@media (max-width: 720px) { .fe-num svg { height: 46vh; } .fe-band span { font-size: 13vh; } }
@media (prefers-reduced-motion: reduce) { .fe-num span { transition: none; } }

/* Narrow screens: the chapter rail becomes a bar of twelve under the header; each segment fills as its chapter passes. */
.fe-prog { display: none; }
@media (max-width: 1100px) {
  .fe--kinetic .fe-prog { position: fixed; left: var(--gutter, 16px); right: var(--gutter, 16px); top: calc(var(--head, 56px) + 6px); z-index: 4; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; pointer-events: none; }
  .fe-prog i { display: block; height: 2px; background: linear-gradient(90deg, #f4f2ed calc(var(--f, 0) * 100%), rgba(244, 242, 237, .16) 0); }
}
/* A new chapter: one 11° cut sweeps the stage, left to right. */
.fe-cut { position: absolute; top: -20%; bottom: -20%; left: 0; width: 22vw; pointer-events: none; opacity: 0; transform: translateX(-30vw) skewX(-11deg);
  background: linear-gradient(90deg, transparent, rgba(244, 242, 237, .07) 46%, rgba(244, 242, 237, .5) 50%, rgba(244, 242, 237, .07) 54%, transparent); }
.fe-cut.is-go { animation: fe-cut .9s cubic-bezier(.6, 0, .25, 1) both; }
@keyframes fe-cut { 0% { opacity: 0; transform: translateX(-30vw) skewX(-11deg); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(110vw) skewX(-11deg); } }
.fe-num { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .fe-cut { display: none; } .fe-btn { transition: none; } }