/* Nexxen v4 — About page (Lusion /about structure, Nexxen version). Shared tokens/nav/footer live in v4.css.
   Choreography: assets/js/about.js (DOM, one lerped engine) + assets/js/about-gl.js (the page's one WebGL renderer). */

body.about { background: var(--obs); color: var(--cream); }
.has-gl body.about { background: transparent; }
.about em { font-style: italic; }
.about .t-obs { --bg: var(--obs); }

/* Lusion's row of "+" marks across the middle of a frame */
.ab-plusrow { position: absolute; left: var(--pad); right: var(--pad); top: 50%; display: flex; justify-content: space-between; pointer-events: none; opacity: .5; z-index: 1; }
.ab-plus { width: 13px; height: 13px; position: relative; display: block; }
.ab-plus::before, .ab-plus::after { content: ""; position: absolute; background: rgba(244, 241, 234, .75); }
.ab-plus::before { left: 6px; top: 0; width: 1px; height: 13px; }
.ab-plus::after { left: 0; top: 6px; width: 13px; height: 1px; }

/* ------------------------------------------------------------------ 1 · HERO */
.ab-hero { --len: 400vh; }
.ab-hero__still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-mark { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(58px, 8vh, 92px); margin: 0; z-index: 2; transform-origin: 50% 100%; will-change: transform, opacity; }
.ab-mark img { width: 100%; height: auto; max-width: none; filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .55)); }
.ab-scroll { position: absolute; right: var(--pad); bottom: 20px; z-index: 2; font-size: clamp(14px, 1.45vw, 21px); text-transform: uppercase; letter-spacing: .01em; color: var(--cream); }
.ab-hero__copy { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(44px, 7.5vh, 76px); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; pointer-events: none; z-index: 2; }
.ab-we, .ab-craft { font-size: clamp(30px, 4.35vw, 66px); line-height: 1.02; text-transform: uppercase; font-weight: 440; letter-spacing: -.012em; color: #fff; text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }
.ab-we .ln, .ab-craft .ln { display: block; overflow: hidden; padding: 0 .06em .05em 0; margin-bottom: -.05em; }
.ab-we .ln > *, .ab-craft .ln > * { display: inline-block; transform: translate3d(0, 110%, 0); will-change: transform; }
.ab-craft { text-align: right; }
.no-js .ab-we .ln > *, .no-js .ab-craft .ln > *, .no-gl .ab-we .ln > *, .no-gl .ab-craft .ln > * { transform: none; }
.ab-pin { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.ab-pin__dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 233, 166, .9), 0 0 18px rgba(250, 208, 66, .8); }
.ab-pin__dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(255, 233, 166, .45); animation: pinPulse 2.4s var(--ease) infinite; }
@keyframes pinPulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.ab-pin__line { position: absolute; left: 6px; top: -1px; width: 86px; height: 1px; background: linear-gradient(90deg, rgba(255, 233, 166, .9), rgba(255, 233, 166, .2)); transform-origin: 0 50%; transform: rotate(-32deg); }
.ab-pin__label { position: absolute; left: 80px; top: -64px; white-space: nowrap; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: #FFE9A6; }
.ab-pin__label b { display: block; margin-top: 4px; font-weight: 500; letter-spacing: .12em; color: rgba(244, 241, 234, .65); }
.ab-pin.is-left .ab-pin__line { left: auto; right: 6px; transform-origin: 100% 50%; transform: rotate(32deg); }
.ab-pin.is-left .ab-pin__label { left: auto; right: 80px; text-align: right; }
.ab-credit { position: absolute; left: var(--pad); bottom: 14px; z-index: 2; color: rgba(244, 241, 234, .55); }
/* hidden until the page script choreographs them (no-JS: everything simply shows) */
.js .ab-wa, .js .ab-person, .js .ab-founder__bio, .js .ab-pixel, .js .ab-credit, .js .ab-exp__hint { opacity: 0; }

/* ------------------------------------------------------------------ 2 · STATEMENT */
.ab-state { --len: 250vh; }
.ab-state__a, .ab-state__b { position: absolute; z-index: 2; font-size: clamp(28px, 3.55vw, 54px); line-height: 1.16; letter-spacing: -.012em; font-weight: 430; word-spacing: .14em; color: #fff; }
.ab-state__a { left: calc(var(--pad) + 2.2vw); top: clamp(104px, 15vh, 150px); max-width: 16.5em; }
.ab-state__b { right: var(--pad); bottom: clamp(44px, 8vh, 84px); max-width: 15em; text-align: right; }
.ab-state .w { opacity: .14; will-change: opacity; }
.no-js .ab-state .w, .no-gl .ab-state .w { opacity: 1; }
.ab-plusrow--mid { top: 50%; }

/* ------------------------------------------------------------------ 3 · FOUNDER (Lusion TEAM block) */
.ab-founder { --len: 290vh; }
.ab-founder__title { position: absolute; right: var(--pad); top: clamp(92px, 14vh, 128px); z-index: 2; display: flex; margin: 0; font-size: clamp(44px, 7.4vw, 108px); line-height: 1; font-weight: 380; text-transform: uppercase; color: #fff; }
.ab-founder__title span { display: block; width: .98em; text-align: center; opacity: .14; }
.ab-founder__title span:last-child { width: auto; }
.ab-hud { position: absolute; inset: 0; z-index: 1; pointer-events: none; font-family: "JetBrains Mono", ui-monospace, monospace; color: rgba(244, 241, 234, .75); }
.ab-hud__id { position: absolute; left: var(--pad); top: calc(clamp(92px, 14vh, 128px) + 20px); font-size: 10px; letter-spacing: .1em; }
.ab-hud__id b { font-weight: 400; margin: 0 1.6em; }
.ab-hud__ruler { position: absolute; left: 30%; width: 13%; height: 12px;
  background: linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px) 0 0 / 50% 12px repeat-x, linear-gradient(90deg, currentColor 0 1px, transparent 1px) 0 3px / 10% 6px repeat-x; }
.ab-hud__ruler--top { top: calc(clamp(92px, 14vh, 128px) + 20px); }
.ab-hud__ruler--bot { bottom: 48px; }
.ab-hud__dots { position: absolute; left: 61%; top: calc(clamp(92px, 14vh, 128px) + 20px); width: 92px; height: 12px; background: radial-gradient(circle, currentColor 0 1px, transparent 1.4px) 0 0 / 8px 4px; opacity: .8; }
.ab-holo-fallback { display: none; }
.no-gl .ab-holo-fallback { display: block; position: absolute; left: 22%; top: 24%; font-size: 26vh; font-weight: 800; color: transparent; -webkit-text-stroke: 2px var(--g1); letter-spacing: -.04em; }
.ab-pixel { position: absolute; left: 57%; bottom: clamp(48px, 9vh, 90px); z-index: 2; width: clamp(62px, 6.6vw, 96px); aspect-ratio: 6 / 8; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; }
.ab-pixel i { display: block; background: #fff; opacity: 0; transition: opacity .25s; }
.ab-pixel i.on { opacity: 1; }
.ab-pixel i.g { background: var(--g1); }
.ab-wa { position: absolute; left: 66%; top: 50%; z-index: 3; width: clamp(108px, 9.6vw, 138px); aspect-ratio: 1; margin: calc(clamp(108px, 9.6vw, 138px) / -2) 0 0 calc(clamp(108px, 9.6vw, 138px) / -2); border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: 6px; color: #1a1205; background: radial-gradient(circle at 35% 30%, #FFE9A6, #FAD042 38%, #E8A52C 72%, #B1771E);
  box-shadow: 0 0 0 1px rgba(255, 233, 166, .6), 0 20px 60px -12px rgba(232, 165, 44, .55); transition: box-shadow .5s var(--ease); }
.ab-wa span { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.ab-wa svg { transition: transform .6s var(--ease); }
.ab-wa:hover svg { transform: translateX(5px); }
.ab-wa:hover { box-shadow: 0 0 0 1px rgba(255, 233, 166, .9), 0 0 0 10px rgba(250, 208, 66, .12), 0 20px 60px -12px rgba(232, 165, 44, .7); }
.ab-person { position: absolute; left: var(--pad); bottom: clamp(48px, 9vh, 90px); z-index: 2; }
.ab-person__name { display: flex; align-items: center; gap: 12px; font-size: clamp(16px, 1.25vw, 19px); color: #fff; font-weight: 480; }
.ab-person__name i { width: 7px; height: 7px; background: radial-gradient(circle, #fff 0 1.3px, transparent 1.6px) 0 0 / 3.5px 3.5px; flex: none; }
.ab-person__role { margin-top: 9px; font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; color: rgba(244, 241, 234, .55); }
.ab-person__bar { display: block; width: clamp(150px, 12.5vw, 180px); height: 2px; margin-top: 22px; background: rgba(244, 241, 234, .2); overflow: hidden; }
.ab-person__bar i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.ab-founder__bio { position: absolute; right: var(--pad); bottom: clamp(48px, 9vh, 90px); z-index: 2; width: min(340px, 25vw); font-size: 14px; line-height: 1.45; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .9); }
.ab-founder__bio::before, .ab-person::before { content: ""; position: absolute; inset: -40px -50px; z-index: -1; background: radial-gradient(closest-side, rgba(5, 5, 6, .78), rgba(5, 5, 6, 0)); pointer-events: none; }
.ab-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.ab-tags li { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: 5px 9px; border-radius: 999px; color: #FFE9A6; box-shadow: inset 0 0 0 1px rgba(250, 208, 66, .4); background: rgba(5, 5, 6, .55); }
.ab-contact { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--cream-2); }
.ab-contact a { color: #fff; }

/* ------------------------------------------------------------------ 4 · BUILT WITH */
.ab-built { position: relative; z-index: 1; padding: clamp(110px, 18vh, 200px) var(--pad) clamp(40px, 8vh, 90px); }
.ab-built__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(40px, 7vh, 80px); }
.ab-h { font-size: clamp(38px, 5.5vw, 80px); line-height: .95; text-transform: uppercase; font-weight: 440; letter-spacing: -.02em; color: #fff; }
.ab-h .ln { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
.ab-h .ln > span { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform 1.1s var(--ease); }
.ab-h.in .ln > span, .no-js .ab-h .ln > span { transform: none; }
.ab-built__cap { max-width: 17em; text-align: right; font-size: 12px; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-2); font-weight: 600; }
.ab-built__grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.ab-built__grid li { height: clamp(108px, 15vh, 150px); display: grid; place-items: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); perspective: 500px; position: relative; overflow: hidden; }
.ab-built__grid li::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 120%, rgba(250, 208, 66, .14), transparent 60%); opacity: 0; transition: opacity .5s; }
.ab-built__grid li:hover::after { opacity: 1; }
.ab-tech { display: block; font-size: clamp(17px, 1.75vw, 26px); font-weight: 520; letter-spacing: -.015em; color: #fff; text-align: center; padding: 0 10px; transform-origin: 50% 50% -20px; backface-visibility: hidden; }
.ab-tech.out { animation: techOut .42s var(--ease-io) forwards; }
.ab-tech.in { animation: techIn .6s var(--ease) both; }
@keyframes techOut { to { transform: rotateX(90deg); opacity: 0; } }
@keyframes techIn { from { transform: rotateX(-90deg); opacity: 0; } }
.js .ab-built__grid li { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .8s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 50ms); }
.js .ab-built__grid.in li { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ 5 + 6 · LISTS (Lusion awards / articles / talks) */
.ab-lists { position: relative; z-index: 1; overflow: clip; padding-bottom: clamp(90px, 14vh, 170px); }
.ab-ghost { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-around; pointer-events: none; z-index: 0; }
.ab-ghost__w { display: block; font-size: clamp(120px, 21vw, 330px); line-height: .9; font-weight: 520; text-transform: uppercase; white-space: nowrap; color: transparent;
  -webkit-text-stroke: 1px rgba(244, 241, 234, .09); letter-spacing: -.03em; will-change: transform; }
.ab-ghost__w:nth-child(even) { -webkit-text-stroke-color: rgba(232, 165, 44, .13); }
.ab-list { position: relative; z-index: 1; padding-top: clamp(70px, 11vh, 130px); }
.ab-list__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; padding: 0 var(--pad) 26px; border-bottom: 1px solid var(--line); }
.ab-count { display: flex; align-items: center; gap: 22px; padding-bottom: .3em; padding-left: 82px; font-size: clamp(24px, 2.3vw, 34px); font-weight: 400; color: #fff; }
.ab-count b { font-weight: 400; font-variant-numeric: tabular-nums; }
.ab-ico { color: #fff; flex: none; }
.ab-ico--spark { animation: spin 14s linear infinite; }
.ab-ico--dots { animation: spin 22s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.calm .ab-ico { animation-duration: 60s; }
.ab-rows > li { border-bottom: 1px solid var(--line); }
.ab-row { display: grid; grid-template-columns: 1fr 64px minmax(0, .8fr) minmax(0, 1fr); gap: 0 18px; align-items: baseline; padding: 20px var(--pad); }
.ab-row::before { content: ""; }
.ab-row__n { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 15px; color: #FFE9A6; letter-spacing: .02em; }
.ab-row__t { font-size: clamp(17px, 1.35vw, 20px); color: #fff; font-weight: 470; letter-spacing: -.01em; }
.ab-row__d { font-size: 15px; line-height: 1.45; color: var(--cream-2); }
.js .ab-rows > li { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .8s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .ab-rows.in > li { opacity: 1; transform: none; }
.ab-rows--links .ab-link { display: grid; grid-template-columns: 1fr minmax(0, .9fr) minmax(0, .9fr); gap: 0 18px; align-items: baseline; padding: 22px var(--pad); position: relative; transition: background-color .5s; }
.ab-rows--links .ab-link::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(250, 208, 66, .1), transparent 70%); transform-origin: 0 50%; transform: scaleX(0); transition: transform .7s var(--ease); }
.ab-rows--links .ab-link:hover::before, .ab-rows--links .ab-link:focus-visible::before, .ab-rows--links li.hot .ab-link::before { transform: scaleX(1); }
.ab-rows--links .ab-row__t { font-size: clamp(24px, 2.7vw, 40px); letter-spacing: -.03em; font-weight: 450; position: relative; }
.ab-rows--links .ab-row__d, .ab-rows--links .ab-row__m { position: relative; transition: color .4s; }
.ab-rows--links .ab-row__m { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: rgba(244, 241, 234, .4); }
.ab-rows--links .ab-link:hover .ab-row__m, .ab-rows--links li.hot .ab-row__m { color: #FFE9A6; }
.ab-rows--links li.armed .ab-row__m::after { content: "  ·  Tap again to open ↗"; color: #fff; }
.ab-rows--links li.armed .ab-link::before { transform: scaleX(1); background: linear-gradient(90deg, rgba(250, 208, 66, .18), transparent 80%); }

/* ------------------------------------------------------------------ 7 · AREA OF EXPERTISE — gold panel, obsidian cards */
.ab-exp { --len: 380vh; z-index: 2; }
.ab-exp .sticky { overflow: visible; }
.ab-exp__panel { position: absolute; inset: 0; color: #140e04; overflow: hidden;
  background: radial-gradient(120% 80% at 18% 0%, #FFE08A 0%, rgba(255, 224, 138, 0) 55%), radial-gradient(90% 70% at 100% 100%, #B1771E 0%, rgba(177, 119, 30, 0) 60%), linear-gradient(160deg, #F6C649 0%, #E8A52C 52%, #CF8F25 100%);
  clip-path: inset(var(--it, 0px) var(--ix, 0px) 0px var(--ix, 0px) round var(--ir, 0px)); will-change: clip-path; }
.ab-exp__panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: soft-light;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .0) 0 22px, rgba(255, 255, 255, .22) 22px 23px); }
.ab-exp__head { position: absolute; left: var(--pad); right: var(--pad); top: clamp(100px, 15vh, 150px); display: grid; grid-template-columns: 1fr auto; gap: 24px; will-change: transform, opacity; }
.ab-exp__title { margin: 0; font-size: clamp(56px, 11.6vw, 184px); line-height: .9; text-transform: uppercase; font-weight: 450; letter-spacing: -.035em; color: #120c03; }
.ab-exp__title > span { display: block; }
.ab-exp__l2 { padding-left: 24%; }
.ab-exp__side { padding-top: .6vw; max-width: 270px; }
.ab-exp__side p { font-size: 12px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; font-weight: 650; }
.ab-exp__keys { display: flex; gap: 9px; margin-top: 18px; }
.ab-exp__keys li { width: 30px; height: 38px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px currentColor; display: grid; place-items: center; font-size: 10px; font-weight: 700; font-family: "JetBrains Mono", ui-monospace, monospace; }
.ab-deck { --cw: clamp(150px, 17.5vw, 270px); position: absolute; left: 50%; top: 52%; width: 0; height: 0; perspective: 1600px; }
.ab-card { position: absolute; width: var(--cw); height: calc(var(--cw) * 1.5); left: calc(var(--cw) * -.5); top: calc(var(--cw) * -.75); cursor: pointer; will-change: transform; outline: none; }
.ab-card__in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.ab-card__back, .ab-card__face { position: absolute; inset: 0; border-radius: calc(var(--cw) * .07); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
  background: linear-gradient(160deg, #141217, #070608 60%); box-shadow: inset 0 0 0 3px #FFE3A0, inset 0 0 0 5px #0a090c, 0 30px 60px -24px rgba(60, 35, 0, .65); }
.ab-card__back { color: #F2B544; display: grid; place-items: center; }
.ab-card__back svg { width: 88%; height: 88%; }
.ab-card__face { transform: rotateY(180deg); padding: calc(var(--cw) * .1) calc(var(--cw) * .09); display: flex; flex-direction: column; color: var(--cream); }
.ab-card__n { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: #FFE9A6; letter-spacing: .1em; }
.ab-card__face h3 { margin: 10px 0 12px; font-size: clamp(15px, 1.45vw, 22px); line-height: 1.05; text-transform: uppercase; font-weight: 520; letter-spacing: -.01em; color: #FAD042; }
.ab-card__face ul { font-size: clamp(11px, .9vw, 13.5px); line-height: 1.3; }
.ab-card__face li { padding: calc(var(--cw) * .022) 0; border-top: 1px solid rgba(250, 208, 66, .2); }
.ab-card__go { margin-top: auto; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 650; color: #FFE9A6; }
.ab-card:focus-visible .ab-card__back, .ab-card:focus-visible .ab-card__face { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #0a090c, 0 0 0 3px #120c03; }
.ab-exp__hint { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; opacity: 0; }
.ab-defs { position: absolute; }

/* ------------------------------------------------------------------ 8 · CTA (Pearl) */
.ab-morph { height: 70vh; position: relative; z-index: 1; }
.ab-cta { position: relative; z-index: 1; padding: clamp(40px, 8vh, 100px) var(--pad) clamp(80px, 14vh, 160px); text-align: center; color: var(--ink); }
.ab-cta__k { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 650; color: var(--ink-2); }
.ab-cta__title { margin: clamp(20px, 3vh, 34px) 0 clamp(30px, 5vh, 52px); font-size: clamp(46px, 8.8vw, 152px); line-height: .95; letter-spacing: -.05em; font-weight: 500; }
.ab-cta__l { display: block; }
.rs { display: inline-flex; flex-direction: column; height: 1.24em; margin: -.14em 0 -.1em; overflow: hidden; vertical-align: top; }
.rs > span { display: block; height: 1.24em; line-height: 1.24em; will-change: transform; }
.rs > span + span { color: #B1771E; }
.ab-cta__actions { display: flex; justify-content: center; align-items: center; gap: 26px; flex-wrap: wrap; }
.ab-cta__mail { font-size: 15px; font-weight: 560; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.ab-cta__nou { margin-top: clamp(36px, 6vh, 64px); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 650; color: var(--ink-3); }

/* no-JS: the expertise deck becomes a plain grid of card faces */
.no-js .ab-exp { --len: auto; }
.no-js .ab-exp .sticky { position: relative; height: auto; }
.no-js .ab-exp__panel { position: relative; clip-path: none; padding: 140px var(--pad) 80px; }
.no-js .ab-exp__head { position: relative; top: 0; left: 0; right: 0; }
.no-js .ab-deck { position: relative; left: 0; top: 0; width: auto; height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 48px; }
.no-js .ab-card { position: relative; left: 0; top: 0; }
.no-js .ab-card__in { transform: rotateY(180deg); }

/* ------------------------------------------------------------------ phones: same storyline, shorter pins (~60 %) */
@media (max-width: 820px) {
  .ab-hero { --len: 240vh; }
  .ab-state { --len: 160vh; }
  .ab-founder { --len: 190vh; }
  .ab-exp { --len: 240vh; }
  .ab-mark { bottom: 64px; }
  .ab-scroll { font-size: 12px; bottom: 26px; }
  .ab-hero__copy { top: 76px; bottom: 54px; flex-direction: column; justify-content: space-between; align-items: stretch; }
  .ab-we, .ab-craft { font-size: clamp(28px, 8.4vw, 40px); }
  .ab-craft { align-self: flex-end; }
  .ab-credit { right: var(--pad); font-size: 9.5px; line-height: 1.35; }
  .ab-pin__label { left: 54px; top: -50px; font-size: 10px; }
  .ab-pin.is-left .ab-pin__label { right: 54px; }
  .ab-pin__line { width: 60px; }
  .ab-state__a, .ab-state__b { font-size: clamp(23px, 6.5vw, 32px); word-spacing: .08em; }
  .ab-state__a { left: var(--pad); top: 74px; right: var(--pad); }
  .ab-state__b { bottom: 56px; left: var(--pad); }
  .ab-founder__title { left: var(--pad); right: var(--pad); top: 70px; justify-content: space-between; font-size: clamp(40px, 12vw, 60px); }
  .ab-founder__title span { width: auto; }
  .ab-hud__id { top: 140px; }
  .ab-hud__ruler--top { top: 141px; left: 42%; width: 28%; }
  .ab-hud__dots { top: 141px; left: auto; right: var(--pad); width: 60px; }
  .ab-hud__ruler--bot { display: none; }
  .ab-wa { left: 76%; top: 60%; }
  .ab-pixel { left: var(--pad); right: auto; bottom: 282px; width: 50px; }
  .ab-person { bottom: 32px; }
  .ab-founder__bio { left: var(--pad); right: var(--pad); width: auto; bottom: 130px; font-size: 13px; }
  .ab-tags { margin: 10px 0 0; }
  .ab-contact { display: none; }
  .ab-built { padding-top: 110px; }
  .ab-built__head { flex-direction: column; align-items: flex-start; }
  .ab-built__cap { text-align: left; }
  .ab-built__grid { grid-template-columns: repeat(2, 1fr); }
  .ab-built__grid li { height: 84px; }
  .ab-list__head { grid-template-columns: 1fr auto; }
  .ab-count { gap: 12px; font-size: 22px; padding-left: 0; }
  .ab-count svg { width: 24px; height: 24px; }
  .ab-row { grid-template-columns: 44px 1fr; padding: 18px var(--pad); }
  .ab-row::before { display: none; }
  .ab-row__d { grid-column: 2; margin-top: 4px; font-size: 14px; }
  .ab-rows--links .ab-link { grid-template-columns: 1fr; gap: 4px; padding: 20px var(--pad); }
  .ab-rows--links .ab-row__t { font-size: 26px; }
  .ab-exp__head { top: 84px; grid-template-columns: 1fr; gap: 14px; }
  .ab-exp__title { font-size: clamp(48px, 15vw, 74px); }
  .ab-exp__l2 { padding-left: 10%; }
  .ab-exp__side { max-width: 240px; }
  .ab-exp__keys { display: none; }
  .ab-deck { --cw: min(43vw, 178px); top: 59%; }
  .ab-card { height: calc(var(--cw) * 1.64); top: calc(var(--cw) * -.82); }
  .ab-card__face { padding: 14px 12px; }
  .ab-card__face h3 { font-size: 14px; margin: 6px 0 8px; }
  .ab-card__face ul { font-size: 10.8px; line-height: 1.25; }
  .ab-card__face li { padding: 3.5px 0; }
  .ab-morph { height: 50vh; }
  .ab-cta__title { font-size: clamp(42px, 12.5vw, 64px); }
}
@media (max-width: 380px) {
  .ab-card__face li:nth-child(n+6) { display: none; }
}