/* Jakub's story site (grew out of design direction C · Quiet). Light, content first, calm motion.
   Default = readable without JS / with reduced motion. html.motion adds the animation. */

:root {
  --bg: #fbfbfd;
  --bg-2: #f5f5f7;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --line: #d2d2d7;
  --accent: #e4550f;      /* one warm accent, used sparingly */
  --holo: #33b5e5;        /* Android 4.0 blue, only inside the phone */
  --sans: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 5vw, 64px);
  --ink: #000;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.story, .short { scroll-margin-top: 72px; }
@media (max-width: 999px) { .story { scroll-margin-top: 130px; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 19px/1.5 var(--sans); letter-spacing: -.005em; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
::selection { background: rgba(228, 85, 15, .2); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 60px; z-index: 50; background: var(--text); color: #fff; padding: 8px 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* nav: translucent, like a product page's local nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 40; background: rgba(251, 251, 253, .78); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(0,0,0,.08); }
.nav-in { max-width: 1120px; margin: 0 auto; height: 52px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; }
.nav a { text-decoration: none; }
.nav-name { font-weight: 640; font-size: 19px; letter-spacing: -.01em; }
.nav-name span { font-weight: 400; color: var(--text-2); font-size: 14px; }
.nav-r { display: flex; align-items: center; gap: 22px; font-size: 13px; }
.pill { background: var(--text); color: #fff; padding: 5px 12px; border-radius: 99px; }
.pill:hover { background: #333; }

.eyebrow { margin: 0 0 14px; font-size: 17px; font-weight: 600; color: var(--accent); letter-spacing: 0; }
.btn { display: inline-block; text-decoration: none; background: var(--text); color: #fff; padding: 12px 22px; border-radius: 99px; font-size: 17px; }
.btn:hover { background: #333; }
.link { text-decoration: none; color: var(--accent); font-size: 17px; }
.link:hover { text-decoration: underline; }

/* ---------- opening ---------- */
.intro { min-height: 88vh; min-height: 88svh; display: grid; place-items: center; text-align: center; padding: 100px var(--gutter) 80px; position: relative; }
.me-name { margin: 0; font-weight: 700; font-size: clamp(3.2rem, 10vw, 8.4rem); line-height: .95; letter-spacing: -.045em; }
.w { display: inline-block; font-stretch: var(--wd, 100%); }
.story h2 { font-stretch: var(--wd, 100%); }
.h2w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.h2w > span { display: inline-block; }
.me { margin: 5vh auto 0; max-width: 620px; text-align: left; }
.me-row { position: relative; display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; padding: 14px 0; }
.me-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform-origin: 0 50%; transform: scaleX(var(--rule, 1)); }
.me dt { font: 600 12px/1.9 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.me dd { margin: 0; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.45; color: var(--text); }
.intro-ways { margin-top: 34px; display: flex; gap: 14px 26px; justify-content: center; align-items: center; flex-wrap: wrap; }
.cue { position: absolute; left: 50%; bottom: 28px; width: 1px; height: 44px; background: var(--line); overflow: hidden; }
.cue span { display: block; width: 100%; height: 40%; background: var(--text); }
html.motion .cue span { animation: cue 2s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(260%); } }

/* ---------- the story, with a split-flap board keeping time ---------- */
.life { position: relative; overflow-x: clip; background: var(--bg-2); padding: 14vh var(--gutter) 8vh; }

/* each story: a calm column, but the composition varies down the page (left / right / centred / wide) */
.story { position: relative; z-index: 1; width: min(640px, 100%); margin: 0 auto; padding: 0 0 max(14vh, 150px); }
@media (min-width: 1000px) {
  .life { --wrap: min(1180px, calc(100vw - 2 * var(--gutter))); }
  .s-left  { margin-left: calc((100% - var(--wrap)) / 2); margin-right: auto; }
  .s-right { margin-right: calc((100% - var(--wrap)) / 2); margin-left: auto; }
  .s-mid   { margin-left: auto; margin-right: auto; }
  .believe, .looking { width: min(760px, 100%); }
  /* wide: the visual breaks out, the text stays readable */
  .story.wide { width: min(1080px, 100%); }
  .story.wide > :not(.visual):not(.labnet-wrap) { max-width: 640px; }
  .story.wide > .projects, .story.wide > .stack { max-width: 760px; }
  /* the wall: a statement across the page */
  .story.statement { width: var(--wrap); }
  .story.statement > :not(h2) { max-width: 640px; }
  .story.statement h2 { font-size: clamp(3rem, 6.4vw, 6rem); line-height: .98; letter-spacing: -.045em; max-width: 14ch; }
}

/* the year/age/place readout: plain text whose characters flip softly */
.board { display: none; }
html.motion .board {
  display: grid; position: fixed; z-index: 45; top: 0; height: 52px; left: 50%; transform: translateX(-50%);
  grid-auto-flow: column; align-items: center; gap: 22px;
  opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s;
}
html.motion .board.on { opacity: 1; visibility: visible; }
@media (min-width: 1000px) and (max-width: 1199px) { .b-k { display: none; } }
.b-row { display: grid; grid-auto-flow: column; align-items: center; gap: 7px; }
.b-k { font: 600 9.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.b-v { display: flex; }
.flap {
  --h: 26px; position: relative; width: calc(var(--h) * .58); height: var(--h); perspective: 300px;
  font: 700 calc(var(--h) * .9)/var(--h) var(--sans); letter-spacing: -.02em; color: var(--text); text-align: center; font-variant-numeric: tabular-nums;
}
.b-v[data-field="age"] .flap { --h: 22px; font-weight: 600; }
.b-v[data-field="place"] { overflow: hidden; }
.pl { display: block; font: 600 15px/1.3 var(--sans); letter-spacing: -.01em; color: var(--text); white-space: nowrap; transition: color .8s ease; }
.board[data-mood="wall"] .pl { color: #aeaeb2; } .board[data-mood="warm"] .pl { color: #c4520f; }
.flap > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden; }
.flap > span i { display: block; font-style: normal; height: var(--h); }
.flap .top, .flap .ftop { top: 0; transform-origin: 50% 100%; }
.flap .bot, .flap .fbot { bottom: 0; transform-origin: 50% 0; }
.flap .bot i, .flap .fbot i { margin-top: calc(var(--h) * -.5); }
.flap .ftop, .flap .fbot { z-index: 2; background: #f8f8fa; }
.board[data-mood="wall"] .flap { color: #aeaeb2; }
.board[data-mood="warm"] .flap { color: #c4520f; }
.flap { transition: color .8s ease; }

.when { position: relative; margin: 0 0 10px; font-size: 15px; color: var(--text-2); }
.when b { font-size: 15px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; margin-right: 6px; }
.story h2 { margin: 0 0 14px; font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 700; }
.story p { margin: 0 0 12px; font-size: clamp(1.02rem, 1.2vw, 1.12rem); line-height: 1.55; color: #424245; max-width: 50ch; }
.story em { font-style: normal; color: var(--text); font-weight: 600; }
.story .aside { color: var(--text); font-weight: 600; letter-spacing: -.01em; }
.k { color: var(--text); font-weight: 600; padding: 0 .12em; margin: 0 -.06em; border-radius: 3px;
  background: linear-gradient(rgba(228, 85, 15, .16), rgba(228, 85, 15, .16)) no-repeat 0 0 / var(--k, 100%) 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.story h2 .k, .aside .k { font-weight: inherit; }
/* the running joke: a quiet margin note, not a headline */
.story .refrain { margin-top: 18px; padding-left: 14px; border-left: 2px solid var(--accent); font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.05rem; color: var(--text-2); }
.ph { background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0 2px; padding-bottom: 1px; }
.visual { position: relative; margin: 4vh 0 3vh; display: grid; justify-items: start; }

.story.next h2 { color: #86868b; }
.story.next { padding-bottom: 4vh; }


/* the soldered cable (shared idea with A) */
.rig { position: relative; }
.cable { display: none; }
html.motion .cable { display: block; position: absolute; left: 0; bottom: calc(100% - 4px); width: calc(var(--ph, 60vh) * .55); height: 11vh; overflow: visible; }
.cable path, .cable circle { fill: none; }
.cable-main { stroke: #3a3a3c; stroke-width: 8; stroke-linecap: round; }
.mod-wire { stroke: var(--accent); stroke-width: 2.5; }
.mod-blob { fill: #b8b8bd !important; }
.mod-label { fill: var(--text-2); font: 500 11px var(--mono); }
.spark circle { fill: rgba(255, 190, 120, .8) !important; filter: blur(3px); }
.spark path { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }



/* the soldered cable (shared idea with A) */
.rig { position: relative; }
.cable { display: none; }
html.motion .cable { display: block; position: absolute; left: 0; bottom: calc(100% - 4px); width: calc(var(--ph, 60vh) * .55); height: 16vh; overflow: visible; }
.cable path, .cable circle { fill: none; }
.cable-main { stroke: #3a3a3c; stroke-width: 8; stroke-linecap: round; }
.mod-wire { stroke: var(--accent); stroke-width: 2.5; }
.mod-blob { fill: #b8b8bd !important; }
.mod-label { fill: var(--text-2); font: 500 11px var(--mono); }
.spark circle { fill: rgba(255, 190, 120, .8) !important; filter: blur(3px); }
.spark path { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }

.short { padding: 16vh var(--gutter); }
.short-in { max-width: 860px; margin: 0 auto; }
.short h2 { margin: 0 0 40px; font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -.03em; }
.short dl { display: grid; grid-template-columns: max-content 1fr; gap: 16px 32px; margin: 0; border-top: 1px solid var(--line); padding-top: 26px; }
.short dt { color: var(--text-2); font-size: 15px; padding-top: 3px; }
.short dd { margin: 0; }
.short-cta { margin-top: 40px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.short-note { margin-top: 36px; font-size: 13px; color: var(--text-2); }
.short-more { margin: 10px 0 0; }

/* ---------- the CV, through the reader's lens (markup: script/build-cv.py from cv/cv.json; paper: css/cv-sheet.css;
   camera + lenses + matcher: js/cv.js) ---------- */
.cvx { background: var(--bg-2); padding: 10vh var(--gutter) 12vh; scroll-margin-top: 52px; }
.cvx-in { max-width: 1320px; margin: 0 auto; }
.cvx-side h2 { margin: 0 0 10px; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.05; letter-spacing: -.03em; }
.cvx-intro { margin: 0 0 22px; color: #424245; font-size: 17px; }
.lens { display: flex; flex-wrap: wrap; gap: 8px; }
.lens[hidden], .ask[hidden], .res[hidden] { display: none; }
.lens-b { font: inherit; font-size: 15px; padding: 8px 15px; border: 0; border-radius: 99px; cursor: pointer; background: #fff; color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s, box-shadow .2s; }
.lens-b:hover { box-shadow: inset 0 0 0 1px var(--text); }
.lens-b[aria-pressed="true"] { background: var(--text); color: #fff; box-shadow: none; }
.ask { margin-top: 22px; }
.ask label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.ask textarea { width: 100%; resize: vertical; min-height: 84px; padding: 12px 14px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line);
  font: 16px/1.45 var(--sans); color: var(--text); }
.ask textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.ask-row { margin-top: 10px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ask .btn { border: 0; cursor: pointer; font: inherit; font-size: 15px; padding: 10px 18px; }
.ask .btn[disabled] { opacity: .5; cursor: progress; }
.ask-note { font-size: 13px; color: var(--text-2); }
.res { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.res-why { margin: 0 0 12px; font-size: 16px; line-height: 1.45; color: var(--text); }
.res-why .k2 { color: var(--accent); font-weight: 600; }
.res-list { margin: 0; padding: 0; list-style: none; counter-reset: m; display: grid; gap: 2px; }
.res-list button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 26px 1fr; gap: 0 8px; padding: 7px 8px; border-radius: 10px; font-size: 15px; line-height: 1.35; }
.res-list button:hover, .res-list button:focus-visible, .res-list button.now { background: #fff; }
.res-list button:focus-visible { outline: 2px solid var(--accent); }
.res-n { font: 600 12px/1.9 var(--mono); color: var(--accent); }
.res-t b { font-weight: 600; }
.res-t span { display: block; color: var(--text-2); font-size: 14px; }
.res-gaps { margin: 12px 0 0; font-size: 14px; color: var(--text-2); }
.res-gaps:empty { display: none; }
.res-clear { margin-top: 10px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 15px; }
/* the traditional way in: download it, or switch the camera off and just read */
.cvx-quick { margin: 0 0 22px; display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; }
.cvx-quick .btn { font: inherit; font-size: 15px; padding: 10px 18px; border: 0; cursor: pointer; }
.cvx-quick .btn-2 { box-shadow: inset 0 0 0 1px var(--line); }
.cvx-quick .link { font-size: 15px; }
.plain-b[hidden] { display: none; }
@media (max-width: 999px) { .plain-b { display: none; } }

/* the stage: the two pages lie on a desk; the camera (js/cv.js) glides and zooms over them */
.stage { position: relative; }
.cam .cvdoc { display: flex; gap: 180px; }
.cam .pg { flex: none; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 50px rgba(0,0,0,.09); }
.stage-ui { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; z-index: 2; }
.stage-ui button { font: 500 13px/1 var(--sans); padding: 8px 13px; border: 0; border-radius: 99px; cursor: pointer; background: rgba(29,29,31,.86); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.stage-ui button[hidden] { display: none; }
@media (min-width: 1000px) {
  .cvx { padding-top: 8vh; padding-bottom: 8vh; }
  .cvx-in { display: grid; grid-template-columns: minmax(300px, 360px) 1fr; gap: 44px; align-items: start; }
  .cvx-side { position: sticky; top: 80px; }
  .stage { height: calc(100vh - 120px); height: calc(100svh - 120px); min-height: 560px; overflow: hidden; border-radius: 22px;
    background: radial-gradient(120% 90% at 50% 40%, #fafafc, #e6e6eb); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); cursor: zoom-in; }
  .stage.zoomed { cursor: zoom-out; }
  .cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
}
/* while Claude reads the role: a slow light passes over the pages */
.stage.scanning::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; pointer-events: none; z-index: 1;
  background: linear-gradient(rgba(228,85,15,0), rgba(228,85,15,.10) 70%, rgba(228,85,15,.35) 99%, rgba(228,85,15,0)); animation: scan 1.6s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(340%); } }
@media (prefers-reduced-motion: reduce) { .stage.scanning::after { animation: none; background: rgba(228,85,15,.06); height: 100%; } }
/* a /for/<slug> link: a short note for that company at the top of the page */
.forme { position: relative; z-index: 3; max-width: 720px; margin: 76px auto -40px; padding: 18px 22px; border-radius: 18px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px rgba(0,0,0,.05); margin-left: max(var(--gutter), calc(50% - 360px)); margin-right: max(var(--gutter), calc(50% - 360px)); }
.forme-k { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.forme-t { margin: 0 0 10px; font-size: 17px; line-height: 1.5; white-space: pre-line; }
@media (max-width: 999px) { .forme { margin-top: 112px; } }

/* read mode (wide screens): no camera, no desk; the two pages sit one under the other at reading size */
@media (min-width: 1000px) {
  .cvx.plain .stage { height: auto; min-height: 0; overflow: visible; background: none; box-shadow: none; border-radius: 0; cursor: auto; }
  .cvx.plain .cam { position: static; transform: none !important; }
  .cvx.plain .cam .cvdoc { flex-direction: column; gap: 22px; zoom: var(--z, 1); }
  .cvx.plain .stage-ui { display: none; }
  .cvx.plain .note { position: static; width: auto; margin-top: 1mm; transform: none; grid-column: 2; }
  .cvx.plain .cs-grid .note { grid-column: auto; }
}

/* phones and narrow windows: the pages simply reflow into one readable column, no camera */
@media (max-width: 999px) {
  .cvx-side { margin-bottom: 26px; }
  .cam .cvdoc { flex-direction: column; gap: 16px; }
  .cam .pg { width: auto; height: auto; padding: 22px 18px 18px; font-size: 13.5px; border-radius: 14px; }
  .cam .pg-in { height: auto; }
  .cam .cvh { grid-template-columns: 1fr 76px; }
  .cam .cvh-photo { width: 76px; height: 92px; }
  .cam .cvh-name { font-size: 30px; }
  .cam .ce { grid-template-columns: 1fr; }
  .cam .ce-when { padding: 0 0 2px; }
  .cam .sk-grid { grid-template-columns: 1fr 1fr; }
  .cam .cs-grid { grid-template-columns: 1fr; }
  .cam .tl { display: none; }
  .cam .note { position: static; display: none; width: auto; margin: 4px 0 0; transform: none; grid-column: 1 / -1; }
  .cam .cvdoc[data-lens] .note.show { display: block; opacity: 1; }
  .stage-ui { display: none; }
}

/* ---------- phone (shared with A, shot like a product photo on light) ---------- */
.phone {
  --ph: min(64vh, 560px);
  position: relative; height: var(--ph); aspect-ratio: 10 / 19;
  padding: calc(var(--ph) * .07) calc(var(--ph) * .028) calc(var(--ph) * .085);
  background:
    linear-gradient(160deg, rgba(255,255,255,.09), transparent 30%),
    repeating-linear-gradient(45deg, #151515 0 2px, #1b1b1b 2px 4px); /* kevlar-ish */
  clip-path: polygon(9% 0, 91% 0, 100% 5%, 100% 95%, 94% 100%, 6% 100%, 0 95%, 0 5%); /* RAZR's chamfered corners */
  box-shadow: inset 0 0 0 2px #2c2c2a;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.7));
}
.phone::after { /* chrome rim */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  clip-path: inherit; border: 1px solid rgba(255,255,255,.12);
}
.phone-speaker { position: absolute; top: 3.2%; left: 38%; right: 38%; height: 4px; border-radius: 4px; background: #050505; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: #000; border-radius: 2px;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif; /* phone UI, not the site's voice */
  box-shadow: 0 0 0 1px #000;
}
.screen::after { /* glass reflection */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.08) 0 18%, transparent 18.5% 100%);
}
.keys { position: absolute; left: 0; right: 0; bottom: 2.6%; display: flex; justify-content: space-around; padding: 0 14%; color: rgba(255,255,255,.4); font-size: calc(var(--ph) * .026); }

.layer { position: absolute; inset: 0; opacity: 0; }
/* static mode: show the happy ending */
.s-home2 { opacity: 1; }

.s-boot { display: grid; place-items: center; background: #000; }
.s-boot span { font: 700 calc(var(--ph) * .03)/1 Arial, sans-serif; letter-spacing: .32em; color: #e9e9e9; }

.s-home, .s-home2 { color: #fff; padding: 0; }
.s-home { background: radial-gradient(120% 60% at 20% 110%, rgba(51,181,229,.55), transparent 60%), radial-gradient(90% 50% at 90% -10%, rgba(120,200,40,.35), transparent 60%), #05080c; }
.s-home2 { background: radial-gradient(120% 70% at 80% 110%, rgba(255,91,31,.55), transparent 60%), radial-gradient(80% 40% at 0% 0%, rgba(255,91,31,.18), transparent 60%), #0a0605; }
.sb { display: flex; justify-content: space-between; padding: 3px 6px; background: #000; font-size: calc(var(--ph) * .02); color: var(--holo); }
.s-home2 .sb { color: var(--accent); }
.clock { margin-top: 16%; text-align: center; font-weight: 200; font-size: calc(var(--ph) * .11); letter-spacing: -.02em; line-height: 1; }
.clock span { color: var(--holo); }
.s-home2 .clock span { color: var(--accent); }
.date { text-align: center; font-size: calc(var(--ph) * .019); text-transform: uppercase; letter-spacing: .1em; opacity: .7; margin-top: 4px; }
.apps { position: absolute; left: 9%; right: 9%; bottom: 20%; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--ph) * .03) 12%; }
.apps i, .dock i, .dock b { display: block; aspect-ratio: 1; border-radius: 22%; background: rgba(255,255,255,.18); }
.apps i:nth-child(3n) { background: rgba(51,181,229,.5); }
.s-home2 .apps i:nth-child(3n) { background: rgba(255,91,31,.6); }
.dock { position: absolute; left: 6%; right: 6%; bottom: 4%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10%; padding-top: 4%; border-top: 1px solid rgba(255,255,255,.12); }
.dock b { border-radius: 50%; background: rgba(255,255,255,.4); }

.s-term { background: #000; color: #e6e6e6; font: 400 calc(var(--ph) * .022)/1.6 var(--mono); padding: 0 8px; }
.s-term .tl { margin: 0 -8px 8px; padding: 6px 8px; background: #1d1d1d; color: #bbb; font-size: .9em; }
.s-term p { margin: 0; }
.caret { animation: blink 1s steps(1) infinite; color: var(--holo); }
@keyframes blink { 50% { opacity: 0; } }

.s-rec { background: #000; color: #f2a33a; font: 400 calc(var(--ph) * .019)/1.55 var(--mono); padding: 8px; }
.s-rec .rh { color: #fff; border-bottom: 1px solid #333; padding-bottom: 4px; margin-bottom: 6px; }
.s-rec p { margin: 0; white-space: nowrap; }
.s-rec .z { color: #fff; margin: 4px 0; }
.s-rec .dim { color: #888; }
.bar-prog { height: 6px; margin-top: 10px; background: #222; }
.bar-prog i { display: block; height: 100%; width: 100%; background: #f2a33a; transform: scaleX(0); transform-origin: 0 50%; }

.s-glitch { display: grid; grid-template-rows: repeat(5, 1fr); background: #000; }
.s-glitch i { display: block; background: linear-gradient(90deg, #ff2d55 0 12%, var(--holo) 12% 40%, #fff 40% 44%, #7cff00 44% 70%, transparent 70%); mix-blend-mode: screen; }

.s-fast { background: #000; color: #fff; font: 400 calc(var(--ph) * .021)/1.5 "Courier New", var(--mono); padding: 14px 10px; }
.s-fast p { margin: 0; }
.f-st { display: grid; }
.f-st > div { grid-area: 1 / 1; }
.s-fast .f-ok { opacity: 0; }
.s-fast .f-prog i { background: #fff; }

.phone { --ph: min(50vh, 460px); filter: drop-shadow(0 30px 40px rgba(0,0,0,.22)) drop-shadow(0 8px 10px rgba(0,0,0,.12)); }

/* ---------- quick links: Index ---------- */
.index { position: relative; font-size: 13px; }
.index summary { list-style: none; cursor: pointer; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); }
.index summary::-webkit-details-marker { display: none; }
.index summary::after { content: " ▾"; color: var(--text-2); }
.index[open] summary { background: var(--text); color: #fff; border-color: var(--text); }
.index-panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(340px, calc(100vw - 32px)); max-height: min(70vh, 640px); overflow: auto;
  background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(0,0,0,.08); border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.3); padding: 10px 8px 12px;
}
.index-panel a { display: grid; grid-template-columns: 4.6em 1fr; gap: 8px; padding: 7px 10px; border-radius: 10px; text-decoration: none; font-size: 15px; }
.index-panel a:hover, .index-panel a:focus-visible { background: var(--bg-2); }
.index-panel b { font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.ix-k { margin: 10px 10px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); }
.btn-2 { background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn-2:hover { background: var(--bg-2); }

/* ---------- story visuals ---------- */
.choices { list-style: none; margin: 18px 0 16px; padding: 0; display: grid; gap: 6px; font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 700; letter-spacing: -.02em; }
.choices li { position: relative; justify-self: start; }
.choices .no { color: #a1a1a6; text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--accent); }
.choices .yes::after { content: " ✓"; color: var(--accent); }
html.motion .choices .no { text-decoration: none; }
html.motion .choices .no::after { content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: 3px; background: var(--accent); transform: scaleX(var(--strike, 0)); transform-origin: 0 50%; }

.grade { justify-items: start; margin: 3vh 0 2vh; }
.grade-n { margin: 0 !important; font-size: clamp(4.5rem, 10vw, 8rem) !important; font-weight: 700; letter-spacing: -.05em; line-height: .9 !important; color: var(--text) !important; font-variant-numeric: tabular-nums; }
.grade-n small { font-size: .28em; color: var(--text-2); letter-spacing: 0; margin-left: 8px; font-weight: 500; }
.grade-l { margin: 8px 0 0 !important; color: var(--text-2) !important; }

.paste { grid-template-columns: 1fr 1fr; gap: 14px; justify-items: stretch; margin: 3vh 0 1vh; }
.paste .col { background: #fff; border-radius: 14px; padding: 16px 18px; box-shadow: inset 0 0 0 1px var(--line); }
.paste .col-k { margin: 0 0 8px !important; font-size: 12px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2) !important; display: flex; justify-content: space-between; align-items: center; }
.paste ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 14.5px; line-height: 1.35; color: var(--text); }
.paste .dup { background: #fbfbfd; }
.kbd { font: 600 11px var(--sans); letter-spacing: 0; padding: 2px 6px; border-radius: 5px; background: var(--text); color: #fff; }
.paste-verdict { grid-column: 1 / -1; margin: 6px 0 0 !important; font-weight: 700; color: var(--text) !important; letter-spacing: -.01em; }
.letter { margin: 0; width: min(420px, 100%); }
.letter-paper { background: #fff; border-radius: 6px; padding: 30px 30px 26px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 50px -24px rgba(0,0,0,.35); transform: rotate(-1.2deg); }
.letter-k { margin: 0 0 18px !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .12em; color: var(--text-2) !important; }
.letter-line { height: 8px; margin: 0 0 10px !important; border-radius: 4px; background: #ececf0; max-width: none !important; }
.letter-line.ln-short { width: 60%; }
.letter-quote { margin: 0 0 14px !important; font-size: 16px !important; font-family: "Newsreader", Georgia, serif; font-style: italic; line-height: 1.45 !important; color: var(--text) !important; background: linear-gradient(transparent 55%, rgba(228,85,15,.22) 55%); }
.letter-sig { margin: 16px 0 0 !important; font-size: 13px !important; color: var(--text-2) !important; }
.letter figcaption { margin-top: 18px; font-weight: 600; letter-spacing: -.01em; }

/* ---------- glider: the real photo + clip ---------- */
.glider-media { grid-template-columns: 1fr; gap: 14px; justify-items: stretch; }
.gm { margin: 0; position: relative; }
.gm img, .gm video { display: block; width: 100%; height: auto; border-radius: 16px; background: #d9d9de; }
.gm figcaption { margin-top: 8px; font-size: 14px; color: var(--text-2); }
.gm-video figcaption { font-weight: 600; color: var(--text); }
.datestamp { position: absolute; right: 14px; top: 12px; font: 600 15px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .04em; color: #ff8a2a; text-shadow: 0 0 6px rgba(255, 120, 20, .6); }
@media (min-width: 1000px) { .glider-media:not(.solo) { grid-template-columns: 1fr 1.25fr; align-items: end; } }

/* tech or business: the two words start at the screen edges, meet, and become Medialogy */
.tug-h { position: relative; }
.tg-m { display: none; }
html.motion .tg-l, html.motion .tg-r, html.motion .tg-or { display: inline-block; }
html.motion .tg-m { display: block; position: absolute; left: 0; right: 0; top: 0; color: var(--accent); opacity: 0; }
@media (min-width: 1000px) {
  .story.tugstory { width: min(900px, 100%); text-align: center; }
  .story.tugstory > p { margin-left: auto; margin-right: auto; }
  .story.tugstory .tug-h { font-size: clamp(3rem, 6.5vw, 6rem); line-height: 1; margin-bottom: 4vh; }
}
/* (old slider styles below are unused now) */
.tug { margin: 3vh 0 1vh; justify-items: stretch; }
.tug-track { position: relative; height: 54px; }
.tug-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, var(--text), #c7c7cc 50%, var(--text)); }
.tug-l, .tug-r { position: absolute; top: calc(50% + 10px); font-size: 13px; font-weight: 700; color: var(--text); }
.tug-l { left: 0; } .tug-r { right: 0; }
.tug-knob { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px rgba(228,85,15,.15); }
.tug-knob span { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--accent); }
html.motion .tug-knob span { opacity: 0; }
.small-note { font-size: 14px !important; color: var(--text-2) !important; }

/* the phone, staged: callouts around it light up with each step (wide screens, motion only) */
.callouts { display: none; }
.side-text .steps { margin: 14px 0; }
.side-text .steps .ph { font-weight: 600; color: var(--text); }
/* text left (sticks while the scene plays), the scene right: the phone, the world map */
@media (min-width: 1000px) {
  html.motion .sidebyside { width: var(--wrap); margin-left: auto; margin-right: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; text-align: left; padding-bottom: 0; }
  html.motion .sidebyside > * { max-width: none !important; }
  html.motion .sidebyside > .hold { grid-column: 2; grid-row: 1; }
  html.motion .sidebyside > .side-text { grid-column: 1; grid-row: 1; position: sticky; top: var(--top); height: calc(100svh - var(--top)); display: flex; flex-direction: column; justify-content: center; }
  html.motion .sidebyside > .side-text h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
  html.motion .sidebyside > .side-text p { max-width: 46ch; }
  html.motion #phone .phone-stage { padding: 0 !important; margin: 0 !important; display: grid; justify-items: center; }
}

/* Medialogy: a fix for every problem */
.fixes { list-style: none; margin: 3vh 0 3vh; padding: 0; display: grid; gap: 2px; }
.fixes li { display: grid; grid-template-columns: 1fr 28px 1.15fr; align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.fixes li:last-child { border-bottom: 1px solid var(--line); }
.fixes .pr { position: relative; color: var(--text-2); font-size: 15px; line-height: 1.35; }
.fixes .pr::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 1.5px; background: var(--text-2); transform-origin: 0 50%; transform: scaleX(var(--strike, 1)); }
.fixes .ar { color: var(--accent); font-weight: 700; text-align: center; }
.fixes .fx { font-weight: 600; font-size: 15.5px; line-height: 1.35; color: var(--text); }
@media (max-width: 760px) { .fixes li { grid-template-columns: 1fr; gap: 2px; } .fixes .ar { display: none; } }

/* uni projects (inside the Medialogy story) */
.proj.uni { margin: 3vh 0 2vh; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.uni-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: 15px; line-height: 1.45; color: #424245; }
.uni-list b { color: var(--text); }
.uni-part { display: block; color: var(--text-2); font-size: 14px; }
.uni-links a { font-size: 14px; font-weight: 600; text-decoration: none; margin-right: 10px; }

/* ---------- the radio: a cinematic frame, title in the sky, telemetry in the corner ---------- */
.cine-frame { position: relative; z-index: 1; }
.story.cine, .story#world { z-index: 2; } /* their frames grow past the story's edges at the start */
.cine .gm-video video { border-radius: 16px; }
.hud { display: none; }
html.motion .hud { display: flex; position: absolute; left: 14px; bottom: 12px; gap: 14px; align-items: center;
  font: 600 12px/1 "JetBrains Mono", ui-monospace, monospace; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); letter-spacing: .03em; }
.hud b { color: #b8ff8a; font-weight: 700; }
.hud b.low { color: #ffcf5a; } .hud b.crit { color: #ff6b5a; }
.h-lost { display: none; padding: 3px 7px; border-radius: 4px; background: #ff3b30; color: #fff; text-shadow: none; }
.hud.lost .h-lost { display: inline-block; animation: lost-blink .5s steps(1) infinite; }
@keyframes lost-blink { 50% { opacity: .2; } }
.cols p { margin-bottom: 12px; }
@media (min-width: 1000px) {
  .story.cine { width: min(1080px, 100%); }
  .story.cine > .cols { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 3vh; }
  .story.cine .cols p { max-width: 46ch; }
  .cine .gm-video { position: relative; }
  .cine .cine-title { position: absolute; z-index: 2; left: 0; top: 0; right: 0; padding: 30px 36px 70px; border-radius: 16px 16px 0 0;
    background: linear-gradient(rgba(245,245,247,.88), rgba(245,245,247,.55) 55%, rgba(245,245,247,0)); pointer-events: none; }
  .cine .cine-title h2 { max-width: 16ch; font-size: clamp(2.2rem, 3.8vw, 3.4rem); margin-bottom: 0; }
  .cine .datestamp { top: auto; bottom: 12px; right: 14px; }
}
.cine-text { margin-top: 10px; }
.cine-text p { margin: 0 0 8px; }
.cine-cap { font-size: 14px; font-weight: 600; color: var(--text-2); }
@media (min-width: 760px) {
  html.motion .cine-text { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 70px 22px 40px 22px; border-radius: 0 0 16px 16px; color: #fff;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.62) 55%); text-shadow: 0 1px 4px rgba(0,0,0,.6); pointer-events: none; }
  html.motion .cine-text p { max-width: 62ch; font-size: clamp(14px, 1.25vw, 17px); line-height: 1.45; color: #fff; }
  html.motion .cine-text .k { color: #fff; background: rgba(255,255,255,.2); }
  html.motion .cine-text .cine-cap { margin: 0; font-size: 13px; font-weight: 500; opacity: .8; }
}

/* ---------- first job: a waterfall that folds into a scrum loop ---------- */
.visual.wf { display: block; position: relative; height: 270px; max-width: 560px; margin: 3vh 0 4vh; }
.wf-p { position: absolute; transform: translate(-50%, -50%); padding: 7px 13px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 600 13px/1.2 var(--sans); white-space: nowrap; color: var(--text); }
.wf-p .b { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; color: var(--accent); }
/* static (no JS): the waterfall as a staircase */
.wf-p[data-i="0"] { left: 14%; top: 12%; } .wf-p[data-i="1"] { left: 32%; top: 31%; } .wf-p[data-i="2"] { left: 50%; top: 50%; }
.wf-p[data-i="3"] { left: 68%; top: 69%; } .wf-p[data-i="4"] { left: 86%; top: 88%; }
.wf-loop { position: absolute; opacity: 0; overflow: visible; pointer-events: none; }
.wf-loop path { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 2 3; }
.wf-loop .wf-head { stroke-dasharray: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wf-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; font: 700 15px/1.15 var(--sans); color: var(--text); opacity: 0; }
html:not(.motion) .wf-loop, html:not(.motion) .wf-mid { display: none; }


/* ---------- RISMA: the job description writes itself ---------- */
.visual.jd { display: block; max-width: 580px; margin: 3vh 0 4vh; padding: 26px 30px 22px; background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 50px -26px rgba(0,0,0,.35); }
.jd-k { margin: 0 0 6px !important; font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace !important; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2) !important; }
.jd-title { position: relative; margin: 0 0 18px !important; font-size: clamp(1.3rem, 2vw, 1.6rem) !important; font-weight: 700; letter-spacing: -.02em; color: var(--text) !important; }
.jd-title .t1 { position: relative; color: #a1a1a6; text-decoration: line-through; text-decoration-color: var(--accent); }
.jd-title .t2 { display: inline-block; color: var(--text); white-space: nowrap; }
.jd-title .arr { color: var(--accent); margin: 0 4px; }
html.motion .jd-title .t1 { color: var(--text); text-decoration: none; }
html.motion .jd-title .t1::after { content: ""; position: absolute; left: 0; right: 0; top: 55%; height: 2px; background: var(--accent); transform: scaleX(var(--strike, 0)); transform-origin: 0 50%; }
html.motion .jd-title .t2 { opacity: 0; }
.jd-empty { display: none; }
html.motion .jd-empty { display: block; margin: 0 !important; font-style: italic; color: #a1a1a6 !important; }
.jd-caret { color: var(--accent); font-style: normal; animation: blink 1s steps(1) infinite; }
.jd-list { list-style: none; margin: 0; padding: 0; }
.jd-list li { padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 15px; line-height: 1.45; color: var(--text); }
.jd-list li:last-child { border-bottom: 0; }
.jd-list em { color: var(--text-2); }

/* ---------- building with friends: a small network assembles ---------- */
.netwrap { margin: 3vh 0 1vh; justify-items: stretch; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) { .net { min-width: 560px; } }
.net { width: 100%; max-width: 640px; height: auto; overflow: visible; }
.net-e { fill: none; stroke: #c7c7cc; stroke-width: 1.5; }
.net-n circle { fill: #fff; stroke: var(--text); stroke-width: 1.5; }
.net-n.hub circle { fill: var(--text); }
.net-n.me circle { fill: var(--accent); stroke: var(--accent); }
.net-n.friend circle { fill: #e5e5ea; stroke: #aeaeb2; }
.net-n.proj circle { fill: #fff3ec; stroke: var(--accent); }
.net-n.soft circle { fill: #fff; stroke: #aeaeb2; stroke-dasharray: 3 3; }
.net-l { font: 700 14px var(--sans); fill: var(--text); }
.net-n.hub .net-l { font-size: 15px; }
.net-s, .net-lab-f { font: 500 11.5px var(--sans); fill: var(--text-2); }

/* ---------- the flat: real renders, rooms light up ---------- */
.flat { justify-items: stretch; }
.flat-stage { position: relative; width: min(100%, calc((100vh - 140px) * 1.953)); margin: 0 auto; aspect-ratio: 1600 / 819; border-radius: 16px; overflow: hidden; background: #0b0b0c; }
.flat-cam { position: absolute; inset: 0; transform-origin: 50% 50%; }
.fl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fl.lit { mix-blend-mode: lighten; }      /* each render is one lit room on black: lighten adds them up */
.fl.day { opacity: 0; }
.hachip { position: absolute; display: none; padding: 5px 9px; border-radius: 99px; font: 600 11.5px/1.2 var(--sans); white-space: nowrap;
  color: #1d1d1f; background: rgba(255,255,255,.92); box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); }
html.motion .hachip { display: block; opacity: 0; }
html.motion .fl.lit { opacity: 0; }
.plan-key li { transition: opacity .3s, color .3s; }
html.motion .plan-key li { opacity: .3; }
html.motion .plan-key li.seen { opacity: .55; }
html.motion .plan-key li.on { opacity: 1; color: var(--text); font-weight: 600; }
@media (max-width: 760px) { .hachip { font-size: 9.5px; padding: 3px 6px; } }

/* ---------- the lab ---------- */
.lab { width: min(760px, 100%); isolation: isolate; }
/* the lab, as a small live diagram */
.labnet-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) { .labnet { min-width: 620px; } }
.labnet { display: block; width: 100%; height: auto; margin: 22px 0 6px; overflow: visible; }
.ln-edge { fill: none; stroke: #c7c7cc; stroke-width: 1.5; stroke-dasharray: 3 6; }
.ln-lab { font: 600 11px var(--sans); fill: var(--text-2); text-anchor: middle; }
.ln-pkt { fill: var(--accent); }
html:not(.motion) .ln-pkt { display: none; }
.ln-node rect { fill: #fff; stroke: #d2d2d7; stroke-width: 1.2; }
.ln-node .t { font: 700 13px var(--sans); fill: var(--text); text-anchor: middle; }
.ln-node .s { font: 500 10px var(--sans); fill: var(--text-2); text-anchor: middle; }
.ln-node.hub rect { fill: var(--text); stroke: var(--text); }
.ln-node.hub .t { fill: #fff; } .ln-node.hub .s { fill: #c7c7cc; }
.ln-node.live rect { fill: #fff3ec; stroke: var(--accent); }
.ln-node.live .t { fill: var(--accent); }

@media (min-width: 1000px) { .lab { width: min(760px, calc(100% - 340px)); } }
.stack { list-style: none; margin: 18px 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stack li { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.stack li span { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; background: var(--text); color: #fff; padding: 3px 7px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.stack li:hover span { opacity: 1; }
.stack li:hover { box-shadow: inset 0 0 0 1px var(--text); }
.ti { width: 20px; height: 20px; fill: #3a3a3c; flex: none; }
.ti.mini { width: 15px; height: 15px; fill: #8e8e93; }
.stack .noicon { width: auto; padding: 0 10px; font-size: 12px; color: #3a3a3c; }
.stack .noicon span { position: static; transform: none; opacity: 1; background: none; color: inherit; padding: 0; }
.projects { border-top: 1px solid var(--line); }
.proj { border-bottom: 1px solid var(--line); }
.proj summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 16px 4px; }
.proj summary::-webkit-details-marker { display: none; }
.proj-name { font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 700; letter-spacing: -.02em; }
.proj-kind { grid-column: 1; font-size: 13px; color: var(--accent); font-weight: 600; }
.proj-pitch { grid-column: 1; font-size: 15px; color: #424245; line-height: 1.4; margin-top: 2px; }
.proj-icons { grid-column: 1; display: flex; gap: 8px; margin-top: 8px; }
.proj-plus { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); position: relative; transition: transform .3s ease, background .2s; }
.proj-plus::before, .proj-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; background: var(--text); transform: translate(-50%, -50%); }
.proj-plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s ease; }
.proj[open] .proj-plus { background: var(--text); }
.proj[open] .proj-plus::before, .proj[open] .proj-plus::after { background: #fff; }
.proj[open] .proj-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.proj summary:hover .proj-name { color: var(--accent); }
.proj-body { padding: 0 4px 20px; overflow: hidden; }
.proj-points { margin: 0 0 14px; padding-left: 1.1em; display: grid; gap: 4px; font-size: 15px; line-height: 1.45; color: #424245; }
.proj-k { margin: 0 0 8px !important; font-size: 11px !important; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2) !important; }
.proj-tech { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.proj-tech li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
.proj-tech .ti { width: 14px; height: 14px; }
.proj-runs, .proj-who { margin: 0 0 4px !important; font-size: 14px !important; color: var(--text-2) !important; }
.proj-runs b { color: var(--text); font-weight: 600; }
.proj-link { margin-left: 6px; font-weight: 600; text-decoration: none; }

/* projects: a grid of cards you can read without opening anything (markup: script/build-lab.py) */
.lab.story { width: min(1080px, 100%); }
.story.wide.lab > .pgrid, .story.wide.lab > .stack, .story.wide.lab > .labnet-wrap { max-width: none; }
.pgrid { margin: 26px 0 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.pcard { position: relative; display: flex; flex-direction: column; padding: 20px 20px 14px; border-radius: 18px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.03); transition: box-shadow .25s, transform .25s; scroll-margin-top: 90px; }
.pcard:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 14px 34px rgba(0,0,0,.07); transform: translateY(-2px); }
.pcard:target { box-shadow: inset 0 0 0 2px var(--accent), 0 14px 34px rgba(0,0,0,.07); }
.story .pc-kind { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--accent); }
.pc-name { margin: 0 0 6px; font-size: 1.3rem; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.story .pc-pitch { margin: 0 0 10px; font-size: 15.5px; line-height: 1.45; color: var(--text); }
.pc-points { margin: 0 0 12px; padding-left: 1.05em; display: grid; gap: 3px; font-size: 14px; line-height: 1.42; color: #515154; }
.pc-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-foot .proj-icons { margin: 0; }
.pc-open { font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.pc-open:hover { text-decoration: underline; }
.pc-more { margin-top: 10px; border-top: 1px solid var(--line); }
.pc-more summary { list-style: none; cursor: pointer; padding: 10px 0 2px; font-size: 14px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.pc-more summary::-webkit-details-marker { display: none; }
.pc-more summary::after { content: "+"; font-weight: 500; font-size: 17px; line-height: 1; transition: transform .25s; }
.pc-more[open] summary::after { transform: rotate(45deg); }
.pc-more summary:hover { color: var(--text); }
.pc-more[open] { padding-bottom: 6px; }
.pc-more .proj-points { margin-top: 10px; font-size: 14px; }
.lab-h { margin: 44px 0 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }

/* nav: projects and the CV are always one tap away */
.nav-k { font-size: 13px; color: var(--text); }
.nav-k:hover { color: var(--accent); }
@media (max-width: 560px) { .nav-k { display: none; } }

/* the opening: two doors next to the story (the CV, the projects) */
.doors { margin: 34px auto 0; max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.door { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 14px 18px 14px 14px; border-radius: 18px; background: #fff;
  text-decoration: none; color: var(--text); box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); transition: box-shadow .25s, transform .25s; }
.door:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 14px 34px rgba(0,0,0,.08); }
.door-t { display: flex; flex-direction: column; gap: 3px; }
.door-t b { font-size: 17px; letter-spacing: -.01em; }
.door-t span { font-size: 14px; line-height: 1.4; color: var(--text-2); }
.door-t i { font-style: normal; font-size: 14px; font-weight: 600; color: var(--accent); margin-top: 2px; }
/* the CV card: the whole card opens the CV; the PDF link sits on top of it */
.door-cv { position: relative; }
.door-links { display: flex; gap: 16px; align-items: center; margin-top: 2px; }
.door-t .door-links a { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.door-main::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.door-t .door-links .door-pdf { position: relative; z-index: 1; color: var(--text); padding: 3px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); }
.door-pdf:hover { box-shadow: inset 0 0 0 1px var(--text); }
.door-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.door-art { position: relative; height: 116px; border-radius: 10px; background: var(--bg-2); overflow: hidden; }
/* a real miniature of the CV's first page (js/cv.js clones it in); without JS, a sketch of a page */
.door-paper { position: absolute; left: 12px; top: 10px; width: 72px; height: 102px; border-radius: 2px; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 6px 14px rgba(0,0,0,.08); overflow: hidden; transform: rotate(-3deg); transition: transform .35s cubic-bezier(.3,.7,.3,1);
  background-image: linear-gradient(#1d1d1f, #1d1d1f), repeating-linear-gradient(#d2d2d7 0 2px, transparent 2px 7px);
  background-size: 34px 5px, 54px 70px; background-position: 8px 9px, 8px 26px; background-repeat: no-repeat; }
.door-paper .cvdoc { position: absolute; left: 0; top: 0; transform: scale(.0907); transform-origin: 0 0; pointer-events: none; }
.door-paper.real { background-image: none; }
.door:hover .door-paper { transform: rotate(0deg) scale(1.06); }
.door-lab .door-art { display: grid; grid-template-columns: repeat(3, 1fr); place-items: center; padding: 10px; gap: 4px; }
.door-lab .door-art .ti { width: 20px; height: 20px; fill: #3a3a3c; transition: transform .35s cubic-bezier(.3,.7,.3,1); }
.door-lab:hover .door-art .ti { transform: scale(1.12); }
@media (max-width: 760px) {
  .doors { grid-template-columns: 1fr; margin-top: 26px; }
  .door { grid-template-columns: 76px 1fr; }
  .door-art { height: 92px; }
  .door-paper { left: 8px; top: 8px; width: 58px; height: 80px; }
  .door-paper .cvdoc { transform: scale(.073); }
}
@media (prefers-reduced-motion: reduce) { .door, .door-paper, .pcard, .door-lab .door-art .ti { transition: none; } }

/* the CV, inside the story's flow (after the projects) */
.life .cvx { position: relative; z-index: 1; background: none; padding: 0 0 max(14vh, 150px); margin: 0 auto; width: min(var(--wrap, 100%), 100%); }
.life .cvx-in { max-width: none; }

/* ---------- small text details (js adds the motion; static text is unchanged) ---------- */
[data-fx="crash"], [data-fx="shake"], [data-fx="drift"], [data-fx="beat"] { display: inline-block; }
.fx-score { font: 600 .82em "JetBrains Mono", ui-monospace, monospace; color: var(--accent); font-variant-numeric: tabular-nums; }
html:not(.motion) .fx-score { display: none; }
[data-fx="strike"] { position: relative; }
html.motion [data-fx="strike"]::after { content: ""; position: absolute; left: -2%; right: -2%; top: 55%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.6,0,.2,1); }
html.motion [data-fx="strike"].on::after { transform: scaleX(1); }
html.motion [data-fx="strike"].on { color: var(--text-2); }
html:not(.motion) [data-fx="strike"] { text-decoration: line-through; text-decoration-color: var(--accent); }
.ch { display: inline-block; white-space: pre; }
.chs { white-space: nowrap; } /* a split word must not break between its letters */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fx-ghost { position: absolute; left: 0; top: 0; pointer-events: none; color: var(--accent); opacity: 0; white-space: nowrap; }
[data-fx="dup"] { position: relative; }
.fx-tick { display: inline-block; color: var(--accent); font-weight: 700; margin-left: 3px; }

.countries { display: flex; align-items: center; gap: 14px; margin: 6px 0 0 !important; }
.c-n { font-size: clamp(3rem, 6vw, 4.6rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; min-width: 2ch; }
.c-t { font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--text); }
.c-t small { font-size: 14px; font-weight: 400; color: var(--text-2); }

.plan-key { margin: 14px 0 0; padding-left: 1.4em; display: grid; gap: 4px; font-size: 15px; line-height: 1.4; color: #424245; max-width: 52ch; }
.plan-key li::marker { font-weight: 700; color: var(--text); }
.live { margin-top: 14px; text-decoration: none; font-size: 15px; color: var(--text); }
.live span { color: var(--accent); }
.live:hover span { text-decoration: underline; }

.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; justify-items: stretch; width: 100%; }
.stat { border-top: 2px solid var(--text); padding-top: 12px; }
.stat p { margin: 0 !important; font-size: 14px !important; color: var(--text-2) !important; line-height: 1.35 !important; }
.stat .n { font-size: clamp(2rem, 3.6vw, 3rem) !important; font-weight: 700; letter-spacing: -.04em; color: var(--text) !important; line-height: 1.05 !important; margin-bottom: 6px !important; font-variant-numeric: tabular-nums; }

.story.quiet h2 { color: #3a3a3c; }
/* a smaller beat: one interest among others, not an ultimatum */
.story.compact h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.story.compact p { font-size: 15.5px; }
.story.warm { padding-bottom: 40px; margin-bottom: max(14vh, 150px); }

.story.warm::before { content: ""; position: absolute; inset: -40px -40px 0 -40px; border-radius: 28px; background: linear-gradient(160deg, #fbefe1, #f6e2cc); z-index: -1; }
html.motion .story.warm::before { opacity: var(--warm, 1); }
.sub { margin: 3vh 0 1vh; padding: 22px 24px; border-radius: 14px; background: #111; justify-items: start; }
.sub-line { margin: 0 !important; color: #f5f5f7 !important; font-size: clamp(1.05rem, 1.6vw, 1.3rem) !important; line-height: 2.1 !important; font-weight: 500; text-shadow: 0 1px 2px #000; }
.hw { position: relative; border-radius: 4px; padding: 1px 3px; background: rgba(255, 196, 0, .9); color: #111; text-shadow: none; }
.hw::after { content: attr(data-g); position: absolute; left: 50%; top: 100%; transform: translate(-50%, 2px); white-space: nowrap; font-size: 11px; line-height: 1; color: #ffd76a; font-weight: 500; }
html.motion .hw { background: transparent; color: inherit; transition: background .5s ease, color .5s ease; }
html.motion .hw::after { opacity: 0; transition: opacity .5s ease; }
html.motion .hw.on { background: rgba(255, 196, 0, .92); color: #111; text-shadow: none; }
html.motion .hw.on::after { opacity: 1; }

.chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li > * { display: inline-block; padding: 7px 13px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; text-decoration: none; color: var(--text); }
.chips a { color: var(--accent) !important; }
.chips a:hover { box-shadow: inset 0 0 0 1px var(--accent); }

.beliefs { list-style: none; margin: 10px 0 0; padding: 0; counter-reset: b; }
.beliefs li { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.5; color: #424245; }
.beliefs li b { display: block; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -.03em; color: var(--text); margin-bottom: 6px; }
.beliefs a { color: var(--accent); text-decoration: none; font-size: 14px; margin-left: 6px; white-space: nowrap; }
.beliefs a:hover { text-decoration: underline; }
.close { margin-top: 6vh !important; font-size: clamp(2rem, 4.6vw, 3.8rem) !important; line-height: 1.02 !important; letter-spacing: -.04em; font-weight: 700; color: var(--text) !important; max-width: 16ch !important; }
.close span { color: var(--accent); }
.story a { color: var(--accent); }

/* ---------- values + what I'm looking for: one dark band ---------- */
.story.band { color: #f5f5f7; padding-top: 10vh; padding-bottom: 6vh; }
.story.band::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vw; right: -100vw; background: #141415; }
.story.band:not(.band-end) { margin-bottom: 0; }
.story.band-end { padding-top: 4vh; padding-bottom: 14vh; margin-bottom: 0; }
.story.band .when { color: #8e8e93; }
.story.band h2, .story.band .close { color: #f5f5f7 !important; }
.story.band p { color: #c7c7cc; }
.story.band .k { color: #fff; background-image: linear-gradient(rgba(228,85,15,.45), rgba(228,85,15,.45)); }
.band-h { font-size: clamp(1.9rem, 3.4vw, 2.8rem) !important; }
.values { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; }
.values li { display: grid; grid-template-columns: 2.2em 1fr; gap: 2px 10px; align-content: start; }
.v-n { grid-row: span 2; font: 700 13px/1.9 "JetBrains Mono", ui-monospace, monospace; color: var(--accent); }
.values b { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.v-d { font-size: 14px; line-height: 1.45; color: #a1a1a6; }
.v-proof a { color: #ff8a4c; text-decoration: none; white-space: nowrap; }
.v-proof a:hover { text-decoration: underline; }
@media (max-width: 999px) {
  .board[data-mood="dark"] .flap, .board[data-mood="dark"] .pl { color: #f5f5f7; }
  .board[data-mood="dark"] .b-k { color: #8e8e93; }
  .board[data-mood="dark"] .flap > span.ftop, .board[data-mood="dark"] .flap > span.fbot { background: #141415; }
}
@media (max-width: 760px) { .values { grid-template-columns: 1fr; gap: 16px; } html.motion .board[data-mood="dark"] { background: rgba(20,20,21,.92); } }

.short-cta a[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.foot { padding: 30px var(--gutter) 40px; text-align: center; font-size: 13px; color: var(--text-2); }
.foot a { color: inherit; }

@media (max-width: 760px) {
  .nav-name span { display: none; }
  .life { padding-top: 8vh; }
  .story { padding-bottom: 12vh; }
  .phone { --ph: min(40svh, 380px); }
  .story h2 { font-size: 1.75rem; }
  .stats { grid-template-columns: 1fr 1fr; }
  .paste ul { font-size: 13px; }
  .paste .col { padding: 12px 12px; }
  .story.warm { padding-bottom: 22px; }
  .story.warm::before { inset: -24px -12px 0 -12px; border-radius: 20px; }
  .nav-r { gap: 10px; }
  .intro-ways .btn { width: 100%; text-align: center; }
  .me-row { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .br { display: none; }
  .index-panel { position: fixed; top: 60px; left: 12px; right: 12px; width: auto; max-height: calc(100svh - 80px); }
  .short dl { grid-template-columns: 1fr; gap: 2px; }
  .short dd { margin-bottom: 14px; }
}


/* ---------- the travel year: the world map, panning from South America to Asia ---------- */
.world { justify-items: stretch; margin-top: 3vh; max-width: min(1100px, 100%); width: 100%; }
.world-frame { position: relative; width: min(100%, calc((100vh - 270px) * 1.81)); margin: 0 auto; }
.world-map { display: block; width: 100%; height: auto; }
.world-map path { fill: #dcdce1; stroke: #f5f5f7; stroke-width: .6; stroke-linejoin: round; }
.world-map path.v { fill: var(--accent); }
.world .countries { margin-top: 14px !important; }

/* the board as a slim strip under the nav on narrower screens (after the base rules on purpose) */
@media (max-width: 999px) {
  html.motion .board {
    top: 52px; left: 0; right: 0; transform: none; padding: 6px var(--gutter);
    grid-auto-flow: column; justify-content: start; gap: 16px; align-items: center;
    background: rgba(245, 245, 247, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .b-row { grid-auto-flow: column; align-items: center; gap: 6px; }
  .b-k { display: none; }
  .flap, .b-v[data-field="age"] .flap { --h: 22px; font-weight: 700; }
  .pl { font-size: 15px; font-weight: 500; color: var(--text-2); }
}

/* ---------- wide screens: every story uses the page, each with its own editorial grid ---------- */
@media (min-width: 1000px) {
  .story { padding-bottom: clamp(70px, 10vh, 120px); }
  .story.warm { margin-bottom: clamp(70px, 10vh, 120px); }
  .story.ed { width: var(--wrap); margin-left: auto; margin-right: auto; display: grid; column-gap: clamp(40px, 5vw, 80px); align-items: start; }
  .story.ed > * { min-width: 0; grid-column: 1; }
  .story.ed > .when, .story.ed > h2 { grid-column: 1 / -1; }
  .story.ed p { max-width: 54ch; }

  /* Medialogy: the story left, the problem → fix list and the uni projects right */
  #medialogy { grid-template-columns: 1fr 1fr; }
  #medialogy > .ml-l { grid-column: 1; grid-row: 3; }
  #medialogy > .ml-r { grid-column: 2; grid-row: 3; }
  #medialogy .ml-r .fixes { margin-top: 0; }
  #medialogy .ml-l > p { max-width: 54ch; }

  /* first job: text + letter left, the waterfall → scrum loop right */
  #startup { grid-template-columns: 1fr 1fr; }
  #startup > .wf { grid-column: 2; grid-row: 3 / span 3; align-self: center; margin: 0 auto; width: 100%; max-width: 560px; height: 380px; }
  #startup .wf-p { font-size: 15px; padding: 9px 16px; }
  #startup .wf-mid { font-size: 18px; }
  #startup > .visual:not(.wf) { grid-column: 1; }

  /* RISMA: the job description big on the left; how I got there + the numbers on the right */
  #risma { grid-template-columns: 1.15fr 1fr; }
  #risma > .jd { grid-column: 1; grid-row: 3 / span 2; margin: 0; max-width: none; }
  #risma > p:not(.when) { grid-column: 2; grid-row: 3; }
  #risma > .stats { grid-column: 2; grid-row: 3 / span 2; align-self: center; grid-template-columns: 1fr; gap: 14px; }
  #risma .stat { display: grid; grid-template-columns: 7.5rem 1fr; align-items: baseline; column-gap: 12px; }

  /* Madrid: two paragraphs side by side, the subtitle across the bottom like a TV */
  #madrid { grid-template-columns: 1fr 1fr; }
  #madrid > p:not(.when):nth-of-type(2) { grid-column: 1; grid-row: 3; }
  #madrid > p:not(.when):nth-of-type(3) { grid-column: 2; grid-row: 3; }
  #madrid > .sub { grid-column: 1 / -1; }

  /* building with friends: text left, the network fills the right half from the top */
  #now { grid-template-columns: .9fr 1.1fr; }
  #now > .when, #now > h2, #now > p, #now > .chips { grid-column: 1; }
  #now > .netwrap { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }

  /* what I keep coming back to: the headline left, the words right */

  /* the wall: the statement left, what happened right */
  #wall { grid-template-columns: 1.2fr 1fr; }
  #wall > .when { grid-column: 1; }
  #wall > h2 { grid-column: 1; grid-row: 2 / span 3; }
  #wall > p:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  #wall > p:nth-of-type(3) { grid-column: 2; grid-row: 3; }
  #wall > .aside { grid-column: 2; grid-row: 4; }
}


/* ---------- Aalborg → Copenhagen ---------- */
.move { margin: 3vh 0 0; max-width: 420px; }
.move-map { display: block; width: 100%; height: auto; overflow: visible; }
.mv-track { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.mv-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.mv-stop { fill: #fff; stroke: var(--text-2); stroke-width: 2; }
.mv-stop.b { stroke: var(--accent); }
.mv-dot { fill: var(--accent); }
.mv-l { font: 600 15px var(--sans); fill: var(--text); text-anchor: middle; }
.mv-cap { margin: 8px 0 0 !important; font-size: 14px !important; color: var(--text-2) !important; }
.mv-cap b { color: var(--accent); margin-right: 6px; }
html:not(.motion) .mv-dot { transform: translate(340px, 30px); }
@media (min-width: 1000px) {
}

/* ---------- holds: Apple-style sticky scenes. The wrapper is tall; its panel sticks under the nav while your scroll
   plays the animation, then the page carries on. Plain CSS, so nothing has to be measured or released. ---------- */
:root { --top: 52px; }
@media (max-width: 999px) { :root { --top: 106px; } } /* nav + the year strip */
.hold { width: 100%; }
html.motion .hold { height: calc(100vh - var(--top) + var(--len) * 100vh); height: calc(100svh - var(--top) + var(--len) * 100svh); }
html.motion .hold-in { position: sticky; top: var(--top); height: calc(100vh - var(--top)); height: calc(100svh - var(--top));
  display: grid; align-content: center; justify-items: center; }
html.motion .hold-in > * { width: 100%; margin-top: 0 !important; margin-bottom: 0 !important; }
html.motion .hold-in:has(.flat-stage) { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 48px); align-items: center; justify-items: stretch; }
html.motion .hold-in > .flat-stage { width: 100%; }
html.motion .hold-in > .flat-side { width: auto; }
.flat-side .plan-key { margin-top: 0; font-size: 16px; gap: 14px; }
@media (max-width: 999px) {
  html.motion .hold-in:has(.flat-stage) { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; gap: 14px; padding-top: 8px; }
  .flat-side .plan-key { font-size: 14px; list-style: none; padding-left: 0; }
  html.motion .flat-side .plan-key li:not(.on) { display: none; }
}
.visual.world { justify-items: center; }
.world .countries { width: min(100%, calc((100vh - 270px) * 1.81)); }
@media (max-width: 999px) { html.motion .hold-in .phone-stage { justify-items: center; } }
/* phones: the clip is already full width, so it just sits in the page */
@media (max-width: 759px) {
  html.motion .hold[data-hold="glider"] { height: auto; }
  html.motion .hold[data-hold="glider"] .hold-in { position: static; height: auto; }
}

/* ---------- Madrid: a script that became a product (meant to be impossible to miss) ---------- */
.evo { margin: 5vh 0 0; display: grid; gap: 22px; }
.evo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.evo-steps li { position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; padding: 0 0 22px; }
.evo-steps li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 2px; width: 2px; background: rgba(196, 82, 15, .3); transform-origin: top; transform: scaleY(var(--grow, 1)); }
.evo-n { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--sans); background: #fff; color: #c4520f; box-shadow: inset 0 0 0 2px rgba(196, 82, 15, .35); }
.evo-steps b { font-size: 1.15rem; letter-spacing: -.02em; color: var(--text); line-height: 34px; }
.evo-steps li > span:last-child { font-size: 15px; color: var(--text-2); }
.evo-steps .evo-now .evo-n { background: var(--accent); color: #fff; box-shadow: none; }
.evo-steps .evo-now b { color: var(--accent); }
.evo-card { padding: clamp(24px, 3.4vw, 40px); border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 30px 60px -30px rgba(120, 50, 10, .45); }
.evo-name { margin: 0 0 6px !important; font-size: clamp(2.6rem, 6vw, 4.6rem) !important; font-weight: 800; letter-spacing: -.05em; line-height: .95 !important; color: var(--text) !important; max-width: none !important; }
.evo-pitch { margin: 0 0 18px !important; font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important; line-height: 1.35 !important; color: var(--text) !important; font-weight: 600; max-width: 32ch !important; }
.evo-points { margin: 0 0 22px; padding: 0 0 0 1.1em; display: grid; gap: 6px; color: #424245; font-size: 16px; line-height: 1.45; }
.evo-points li::marker { color: var(--accent); }
.evo-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 0 0 12px !important; }
.evo-cta a { font-weight: 600; text-decoration: none; }
.evo-go { padding: 12px 22px; border-radius: 99px; background: var(--accent); color: #fff !important; }
.evo-go:hover { filter: brightness(1.08); }
.evo-who { margin: 0 !important; font-size: 14px !important; color: var(--text-2) !important; }
@media (min-width: 1000px) {
  #madrid > .evo { grid-column: 1 / -1; grid-template-columns: minmax(220px, .7fr) 1.6fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
}

/* ---------- values band: what I keep coming back to ---------- */
.drive { margin-top: 56px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,.14); }
.drive-k { margin: 0 0 8px !important; font: 600 12px/1 var(--sans) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--accent) !important; }
.drive-h { margin: 0 0 14px !important; font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important; font-weight: 700; letter-spacing: -.035em; line-height: 1.05 !important; color: #fff !important; }
.drive-p { max-width: 60ch !important; }
.drive-a { color: #fff !important; font-weight: 600; }

/* round 3 */
.story .lead { font-size: 1.3rem; line-height: 1.4; color: var(--text-2); }
.story .lead .k { color: var(--text); font-weight: 700; }
.story .home-line { margin-top: 18px; font-size: 1.45rem; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.story .home-line b { color: var(--accent); }
.more { font: inherit; font-size: 15px; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0 0 0 4px; cursor: pointer; }
.more:hover { text-decoration: underline; }
.pop { margin: auto; padding: 28px 30px 24px; width: min(440px, calc(100vw - 32px)); border: 0; border-radius: 18px; background: #fff; color: var(--text); box-shadow: 0 30px 80px -20px rgba(0,0,0,.35); }
.pop::backdrop { background: rgba(0,0,0,.35); }
.pop h3 { margin: 0 0 10px; font-size: 1.5rem; letter-spacing: -.02em; }
.pop p { margin: 0 0 10px; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.pop a { font-weight: 600; text-decoration: none; }
.pop-x { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f0f0f2; font-size: 20px; line-height: 1; cursor: pointer; color: var(--text); }
.story .pivot { margin-top: 3vh; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.2; font-weight: 700; letter-spacing: -.03em; color: var(--text); }
.story .pivot span { color: var(--accent); }
.story.quiet .aside { font-size: 1.25rem; line-height: 1.35; }
.flat-head { grid-column: 1 / -1; text-align: left; }
.flat-head h2 { margin-bottom: 8px; }
.flat-head p { max-width: 60ch; }
#home { padding-bottom: 0 !important; }
html.motion .hold-in:has(.flat-stage) { align-content: center; row-gap: 18px; }
@media (min-width: 1000px) { #wall > .pivot { grid-column: 1 / -1; } }