/* site.css · veldrah-monolith. Tokens and page classes only; the engine's
   [data-sc-*] mechanism is not restyled. */

:root {
  --sc-canvas: #1a120d;
  --sc-surface: #1f1813;
  --sc-ink: #f6efe4;
  --sc-ink-soft: #d2c4b2;
  --sc-accent: #e9b46c;
  --sc-accent-ink: #1a120d;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-font-mono: "Geist Mono", ui-monospace, monospace;
  --sc-shadow-color: 22 40% 4%;

  --plate: rgb(20 14 10 / 0.88);
  --panel: #19120e;
  --rule: color-mix(in oklab, var(--sc-ink) 18%, transparent);
  --scrim-rgb: 14 9 6;
  --smoke-c: #f0caa0;
  --title-c: #fbf3e7;
  --title-halo: rgb(255 196 132 / 0.28);
  --gut: clamp(1rem, 4.2vw, 4.5rem);
  --map-w: 11.5rem;
}
/* Mist: white haze, cold light, the title set dark against it. */
html[data-grade="mist"] {
  --sc-canvas: #11161a;
  --sc-surface: #161c21;
  --sc-ink-soft: #c3ccd2;
  --sc-accent: #b7d2e2;
  --sc-accent-ink: #11161a;
  --plate: rgb(15 20 24 / 0.88);
  --panel: #12181d;
  --scrim-rgb: 10 14 17;
  --smoke-c: #f3f6f8;
  --title-c: #1a2229;
  --title-halo: rgb(255 255 255 / 0.55);
  --sc-shadow-color: 205 25% 4%;
}

html { background: var(--sc-canvas); transition: background-color 600ms; }
body { overflow-x: clip; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip {
  position: fixed; left: var(--gut); top: 0.75rem; z-index: 90;
  padding: 0.6rem 0.9rem; background: var(--sc-ink); color: var(--sc-canvas);
  transform: translateY(-160%); transition: transform 160ms var(--sc-ease-out);
}
.skip:focus-visible { transform: none; }

/* ------------------------------------------------------------ type ---- */
.display {
  font-family: var(--sc-font-display); font-variation-settings: "wdth" 125; font-weight: 300;
  letter-spacing: -0.022em; line-height: 1.0; margin: 0; text-wrap: balance; color: var(--sc-ink);
}
.display--xl { font-size: clamp(2.5rem, 1.1rem + 4.6vw, 6rem); line-height: 0.96; }
.display--lg { font-size: clamp(2.1rem, 1rem + 3.4vw, 4.4rem); }
.display--md { font-size: clamp(1.7rem, 1rem + 2.1vw, 3rem); }
.display--sm { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.soft { color: var(--sc-ink-soft); }
.body { font-size: var(--sc-t-base); line-height: 1.62; color: var(--sc-ink-soft); max-width: 40ch; margin: 0; text-wrap: pretty; }
.body--lg { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 34ch; color: var(--sc-ink); }
.label { font-family: var(--sc-font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink); margin: 0; }
.note { font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink-soft); max-width: 46ch; margin: 0; }

/* ------------------------------------------------------- the canvas --- */
canvas.world { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; display: block; opacity: 0; transition: opacity 900ms var(--sc-ease-out); pointer-events: none; }
.world-live canvas.world { opacity: 1; }
.no-world canvas.world { display: none; }
.world-live .sc-world__poster { visibility: hidden !important; }
.sc-world__seg > picture { position: absolute; inset: 0; }
.sc-world__seg > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.sc-grain { z-index: 4; opacity: 0.06; }

/* ------------------------------------------------------------- bar ---- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(0.75rem, 1.6vw, 1.25rem) var(--gut); pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__brand { display: inline-flex; align-items: center; padding: 0.7rem 0.95rem; background: var(--plate); color: var(--sc-ink); transition: opacity 500ms var(--sc-ease-out), transform 500ms var(--sc-ease-out); }
/* The title card owns the wordmark while it is on screen. */
html.at-title .bar__brand { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.wordmark { width: clamp(7.5rem, 9vw, 9.5rem); height: auto; display: block; }
.bar__end { display: flex; align-items: center; gap: 0.75rem; }

.grade { display: inline-flex; background: var(--plate); padding: 0.3rem; gap: 0.2rem; }
.grade__opt {
  font: 500 0.66rem/1 var(--sc-font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  background: none; border: 0; color: var(--sc-ink-soft); padding: 0.6rem 0.7rem; cursor: pointer;
  transition: background-color 180ms var(--sc-ease-out), color 180ms;
}
.grade__opt:hover { color: var(--sc-ink); }
.grade__opt[aria-pressed="true"] { background: var(--sc-ink); color: var(--sc-canvas); }

.cta {
  font: 500 0.8rem/1 var(--sc-font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  border: 0; cursor: pointer; white-space: nowrap; padding: 0.95rem 1.2rem;
  background: var(--sc-ink); color: var(--sc-canvas);
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.cta:hover { background: var(--sc-accent); color: var(--sc-accent-ink); }
.cta:active { transform: translateY(1px); }
.cta--big { padding: 1.15rem 1.5rem; font-size: 0.84rem; }
.link {
  font: 500 0.74rem/1.2 var(--sc-font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sc-ink); background: none; border: 0; padding: 0.35rem 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--sc-accent); text-underline-offset: 0.35em; text-decoration-thickness: 1px;
  transition: color 140ms var(--sc-ease-out);
}
.link:hover { color: var(--sc-accent); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* ------------------------------------------------------------- map ---- */
.map { position: fixed; left: var(--gut); top: 50%; z-index: var(--sc-z-chrome); transform: translateY(-50%); width: var(--map-w); transition: opacity 600ms var(--sc-ease-out); }
html.at-title .map { opacity: 0; pointer-events: none; }
/* a soft ground behind the map so its labels hold on a bright sky */
.map::before { content: ""; position: absolute; inset: -2.5rem -3rem -2.5rem -6rem; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 30% 50%, rgb(var(--scrim-rgb) / 0.42), rgb(var(--scrim-rgb) / 0) 70%); }
.map__legs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.map__leg {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; background: none; border: 0; padding: 0.35rem 0; cursor: pointer; text-align: left;
  color: var(--sc-ink-soft); font: 500 0.66rem/1 var(--sc-font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  text-shadow: 0 1px 10px rgb(var(--scrim-rgb) / 0.7);
}
.map__tick { width: 0.9rem; height: 1px; background: currentColor; flex: none; transition: width 260ms var(--sc-ease-out), background-color 200ms; }
.map__label { opacity: 0.78; transition: opacity 200ms; }
.map__leg:hover .map__label { opacity: 1; }
.map__leg[aria-current="location"] { color: var(--sc-ink); }
.map__leg[aria-current="location"] .map__tick { width: 2.2rem; background: var(--sc-accent); }
.map__leg[aria-current="location"] .map__label { opacity: 1; }
.map__readout { margin: 1.4rem 0 0; display: grid; gap: 0.45rem; font: 400 0.66rem/1.2 var(--sc-font-mono); letter-spacing: 0.08em; color: var(--sc-ink-soft); text-shadow: 0 1px 10px rgb(var(--scrim-rgb) / 0.7); }
.map__readout div { display: flex; justify-content: space-between; gap: 0.8rem; border-top: 1px solid var(--rule); padding-top: 0.45rem; }
.map__readout dt { text-transform: uppercase; }
.map__readout dd { margin: 0; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.no-world .map__readout { display: none; }

/* ------------------------------------------------------------ copy ---- */
.copy { position: absolute; display: grid; gap: 1.1rem; color: var(--sc-ink); }
.copy--intro { left: calc(var(--gut) + var(--map-w) + 2.5rem); bottom: 12vh; width: min(40rem, 54vw); gap: 1rem; }
.copy--tension { inset: 0; margin: auto; width: min(68rem, 84vw); height: fit-content; text-align: center; }
.copy--caps { left: calc(var(--gut) + var(--map-w) + 2.5rem); right: var(--gut); bottom: 4.5vh; gap: 1.2rem; }
.copy--caps .display { max-width: 18ch; }
.copy--real { left: calc(var(--gut) + var(--map-w) + 2.5rem); bottom: 10vh; width: min(44rem, 52vw); gap: 1.2rem; }
.copy--method { left: calc(var(--gut) + var(--map-w) + 2.5rem); top: 17vh; width: min(46rem, 54vw); }
.copy--steps { right: var(--gut); bottom: 9vh; width: min(28rem, 34vw); }
.copy--work { left: calc(var(--gut) + var(--map-w) + 2.5rem); top: 14vh; width: min(34rem, 40vw); gap: 1.4rem; }
.copy--reach { right: var(--gut); top: 15vh; width: min(32rem, 38vw); gap: 1.2rem; }
.copy--contact { left: 0; right: 0; margin-inline: auto; bottom: 7vh; width: min(46rem, 88vw); text-align: center; justify-items: center; gap: 1.3rem; }
.copy--contact .body { max-width: 44ch; }

/* --------------------------------------------------- the title card --- */
.copy--title { inset: 0; margin: auto; width: 100%; height: fit-content; transform: translateY(-4vh); }
.title { margin: 0; display: grid; justify-items: center; gap: clamp(1.1rem, 2.4vw, 2rem); color: var(--title-c); transition: color 600ms; }
.title__mark { position: relative; display: block; width: min(74vw, 1060px); }
.title__mark svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 42px var(--title-halo)); }
/* one slow pass of light across the letters, as the card first lands */
.title__mark::after {
  content: ""; position: absolute; inset: -20% -10%; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / 0.55) 50%, transparent 65%);
  mix-blend-mode: overlay; transform: translateX(-80%); animation: sweep 2.8s 0.6s var(--sc-ease-out) both;
  -webkit-mask: linear-gradient(#000, #000); mask: linear-gradient(#000, #000);
}
@keyframes sweep { to { transform: translateX(80%); opacity: 0; } }
.title__tag {
  font-family: var(--sc-font-display); font-variation-settings: "wdth" 125; font-weight: 400;
  font-size: clamp(0.72rem, 0.6rem + 0.45vw, 1rem); letter-spacing: 0.58em; text-transform: uppercase;
  padding-left: 0.58em; text-align: center;
}
.title-smoke { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.title-smoke__layer { position: absolute; left: -25%; right: -25%; will-change: transform, opacity; }
.title-smoke__layer > div {
  position: absolute; inset: 0; background: var(--smoke-c);
  -webkit-mask: url("assets/tex/smoke-a.webp") center / 100% 100% no-repeat; mask: url("assets/tex/smoke-a.webp") center / 100% 100% no-repeat;
  animation: drift 46s linear infinite alternate;
}
.title-smoke__layer--a { top: 30%; height: 46%; opacity: 0.5; }
.title-smoke__layer--b { top: 50%; height: 60%; opacity: 0.55; }
.title-smoke__layer--b > div { -webkit-mask-image: url("assets/tex/smoke-b.webp"); mask-image: url("assets/tex/smoke-b.webp"); animation-duration: 60s; animation-direction: alternate-reverse; }
@keyframes drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

/* Scrims: one shape (a soft ellipse of ground) at each copy anchor. ui.js
   ties each scrim's opacity to its block. */
.scrim { position: absolute; pointer-events: none; opacity: 0; }
.scrim::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at var(--sx, 30%) var(--sy, 70%), rgb(var(--scrim-rgb) / 0.84) 0%, rgb(var(--scrim-rgb) / 0.6) 40%, rgb(var(--scrim-rgb) / 0) 74%); }
.scrim--low-lead { left: 0; bottom: 0; width: 78vw; height: 78vh; --sx: 34%; --sy: 76%; }
.scrim--high-lead { left: 0; top: 0; width: 76vw; height: 80vh; --sx: 34%; --sy: 30%; }
.scrim--trail { right: 0; top: 0; width: 64vw; height: 100vh; --sx: 74%; --sy: 44%; }
.scrim--low-trail { right: 0; bottom: 0; width: 62vw; height: 72vh; --sx: 72%; --sy: 72%; }
.scrim--low-wide { left: 0; right: 0; bottom: 0; height: 74vh; --sx: 50%; --sy: 92%; }
.scrim--centre { inset: 0; --sx: 50%; --sy: 50%; }
.scrim--centre::before { background: radial-gradient(ellipse 46% 26% at 50% 50%, rgb(var(--scrim-rgb) / 0.62) 0%, rgb(var(--scrim-rgb) / 0.3) 55%, rgb(var(--scrim-rgb) / 0) 100%); }
.scrim--low-centre { left: 0; right: 0; bottom: 0; height: 84vh; --sx: 50%; --sy: 78%; }
.scrim--title { inset: 0; --sx: 50%; --sy: 46%; }
.scrim--title::before { background: radial-gradient(ellipse 62% 34% at 50% 46%, rgb(var(--scrim-rgb) / 0.42) 0%, rgb(var(--scrim-rgb) / 0.18) 55%, rgb(var(--scrim-rgb) / 0) 100%); }
html[data-grade="mist"] .scrim--title::before { background: radial-gradient(ellipse 62% 34% at 50% 46%, rgb(255 255 255 / 0.5) 0%, rgb(255 255 255 / 0.2) 55%, rgb(255 255 255 / 0) 100%); }

/* ------------------------------------------------- capability cards --- */
.cards { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.9rem; }
.card {
  --lift: 0px;
  position: relative; flex: 0 0 clamp(12.5rem, 15.6vw, 15.5rem); height: clamp(19rem, 23vw, 21.5rem);
  border-radius: 18px; overflow: hidden; isolation: isolate;
  background: var(--panel); color: var(--sc-ink);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 14px 34px -14px rgb(0 0 0 / 0.7);
  outline: 1px solid color-mix(in oklab, var(--cap) 28%, transparent); outline-offset: -1px;
  transform: translateY(var(--lift));
  transition: transform 420ms var(--sc-ease-out), box-shadow 420ms var(--sc-ease-out), outline-color 300ms;
}
.card__img { position: absolute; inset: 0 0 auto 0; width: 100%; height: 58%; object-fit: cover; object-position: 50% 32%; z-index: -1; transform: scale(1.02); transition: transform 900ms var(--sc-ease-out), filter 600ms; filter: saturate(0.92) brightness(0.92); }
.card__panel {
  position: absolute; left: 6px; right: 6px; bottom: 6px; height: 56%;
  background: color-mix(in oklab, var(--cap) 9%, var(--panel)); border-radius: 0 14px 13px 13px;
  padding: 1rem 1rem 0.9rem; display: flex; flex-direction: column; gap: 0.35rem;
}
/* the folder tab, and the curve that carries it into the panel */
.card__panel::before { content: ""; position: absolute; left: 0; top: -17px; width: 46%; height: 18px; background: inherit; border-radius: 13px 13px 0 0; }
.card__panel::after {
  content: ""; position: absolute; left: calc(46% - 1px); top: -17px; width: 18px; height: 18px;
  background: radial-gradient(circle at 100% 0, transparent 17px, color-mix(in oklab, var(--cap) 9%, var(--panel)) 18px);
}
.card__glyph { position: absolute; left: 1rem; top: -0.6rem; width: 2.1rem; height: 2.1rem; color: var(--cap); transition: transform 500ms var(--sc-ease-out); }
.card__glyph svg { width: 100%; height: 100%; display: block; }
.card__arrow { position: absolute; right: 0.9rem; top: 0.85rem; width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--sc-ink); stroke-width: 1.6; transition: transform 380ms var(--sc-ease-out), stroke 300ms; }
.card__name { margin: 1.85rem 0 0; font: 500 0.74rem/1 var(--sc-font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--cap); }
.card__lead { margin: 0.15rem 0 0; font-family: var(--sc-font-display); font-variation-settings: "wdth" 112; font-size: 1.05rem; font-weight: 400; line-height: 1.2; color: var(--sc-ink); }
.card__desc { margin: 0.1rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--sc-ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card__cta {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem;
  font: 500 0.7rem/1 var(--sc-font-mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sc-ink); background: color-mix(in oklab, var(--cap) 16%, transparent); border: 1px solid color-mix(in oklab, var(--cap) 55%, transparent);
  padding: 0.6rem 0.75rem; border-radius: 999px; cursor: pointer;
  transition: background-color 260ms var(--sc-ease-out), color 260ms, border-color 260ms, padding 260ms var(--sc-ease-out);
}
.card__cta::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--cap); box-shadow: 0 0 0 0 color-mix(in oklab, var(--cap) 60%, transparent); animation: beacon 2.4s var(--sc-ease-out) infinite; }
@keyframes beacon { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
/* the whole card is the button's target */
.card__cta::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.card:has(.card__cta:focus-visible) { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.card__cta:focus-visible { outline: none; }

/* the card art was shot in sand; under Mist it turns to silver */
html[data-grade="mist"] .card__img { filter: grayscale(0.9) brightness(1.04) contrast(1.06); }
html[data-grade="mist"] .card.is-active .card__img, html[data-grade="mist"] .card:hover .card__img { filter: grayscale(0.75) brightness(1.1) contrast(1.06); }
.card.is-active { --lift: -6px; outline-color: color-mix(in oklab, var(--cap) 70%, transparent); box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 22px 44px -16px color-mix(in oklab, var(--cap) 45%, transparent); }
.card.is-active .card__img { filter: saturate(1.05) brightness(1.02); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { --lift: -10px; outline-color: var(--cap); box-shadow: 0 1px 0 rgb(255 255 255 / 0.1) inset, 0 26px 50px -16px color-mix(in oklab, var(--cap) 55%, transparent); }
  .card:hover .card__img { transform: scale(1.09); filter: saturate(1.1) brightness(1.06); }
  .card:hover .card__arrow { transform: translate(2px, -2px) rotate(45deg); stroke: var(--cap); }
  .card:hover .card__glyph { transform: rotate(-8deg) scale(1.08); }
  .card:hover .card__cta { background: var(--cap); color: #120d0a; border-color: var(--cap); padding-inline: 0.95rem; }
  .card:hover .card__cta::before { background: #120d0a; }
}

/* real world */
.principles { margin: 0.6rem 0 0; display: grid; gap: 0; }
.principles div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: 0.8rem 0; border-top: 1px solid var(--rule); }
.principles dd { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 0.6rem; padding: 0.95rem 0; border-top: 1px solid var(--rule); opacity: 0.5; transition: opacity 320ms var(--sc-ease-out); }
.step.is-active { opacity: 1; }
.step.is-done { opacity: 0.75; }
.step__n { grid-row: span 2; font: 500 0.74rem/1.6 var(--sc-font-mono); letter-spacing: 0.1em; color: var(--sc-accent); }
.step__name { margin: 0; font-family: var(--sc-font-display); font-variation-settings: "wdth" 125; font-weight: 400; font-size: var(--sc-t-xl); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.05; }
.step p { margin: 0.3rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

/* work */
.works { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.work { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.1rem; align-items: start; padding: 1rem 0; border-top: 1px solid var(--rule); }
.work img { width: 100%; height: 6.2rem; object-fit: cover; object-position: top; display: block; box-shadow: var(--sc-e2); border-radius: 4px; }
.work__name { margin: 0 0 0.3rem; font: 500 0.8rem/1.2 var(--sc-font-mono); letter-spacing: 0.16em; }
.work p { margin: 0 0 0.35rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; }

/* reach */
.geo { color: var(--sc-accent); }
.figs { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.6rem; }
.figs li { display: grid; gap: 0.25rem; padding: 0.8rem 0; border-top: 1px solid var(--rule); }
.figs li:last-child { grid-column: span 2; }
.fig { font-family: var(--sc-font-display); font-variation-settings: "wdth" 125; font-weight: 300; font-size: var(--sc-t-2xl); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.fig__label { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

/* contact */
.contact__actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; justify-content: center; margin-top: 0.4rem; }
.colophon { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); display: grid; gap: 0.5rem; justify-items: center; }
.colophon p { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 52ch; }
.colophon__still { display: none; }
.no-world .colophon__live, .no-world [data-blueprint] { display: none; }
.no-world .colophon__still { display: block; }
.legal { margin: 0.4rem 0 0; font: 400 0.66rem/1.4 var(--sc-font-mono); letter-spacing: 0.1em; color: var(--sc-ink-soft); }
/* the company behind Veldrah, under the copyright (owner, revision 16) */
.legal-entity { margin: 0.15rem 0 0; font: 400 0.66rem/1.4 var(--sc-font-mono); letter-spacing: 0.1em; color: var(--sc-ink-soft); }

/* blueprint mode */
.stats { position: fixed; right: var(--gut); bottom: 1.1rem; z-index: var(--sc-z-chrome); margin: 0; font: 400 0.68rem/1.4 var(--sc-font-mono); letter-spacing: 0.06em; color: var(--sc-accent); background: var(--plate); padding: 0.55rem 0.75rem; display: none; }
.is-blueprint .stats { display: block; }
.is-blueprint .scrim, .is-blueprint .title-smoke { display: none; }

/* ----------------------------------------------------------- cursor --- */
/* The mark's outline. Shown only for fine pointers (ui.js adds .has-cursor). */
.cursor { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; display: none; --cur: var(--sc-ink); }
html.has-cursor .cursor { display: block; }
html.has-cursor, html.has-cursor * { cursor: none !important; }
html.has-cursor :is(input, textarea, select) { cursor: auto !important; }
/* the ring trails the pointer (ui.js writes --ring-t every frame, so no
   transition here); its states scale the shape inside it */
.cursor__ring { position: absolute; left: -13px; top: -11px; width: 26px; height: 22px; transform: var(--ring-t, translate(0, 0)); will-change: transform; }
.cursor__ring svg { width: 100%; height: 100%; overflow: visible; transition: transform 280ms var(--sc-ease-out); }
.cursor__ring polygon { fill: color-mix(in oklab, var(--cur) 0%, transparent); stroke: var(--cur); stroke-width: 2.4; vector-effect: non-scaling-stroke; transition: fill 260ms, stroke 260ms; }
.cursor__dot { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--cur); transition: background-color 260ms, opacity 200ms; }
.cursor__label {
  position: absolute; left: 22px; top: 14px; white-space: nowrap; opacity: 0; transform: translateY(4px);
  font: 500 0.64rem/1 var(--sc-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-canvas);
  background: var(--cur); padding: 0.45rem 0.55rem; transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.cursor.is-link .cursor__ring svg { transform: scale(1.7); }
.cursor.is-link .cursor__ring polygon { fill: color-mix(in oklab, var(--cur) 18%, transparent); }
.cursor.is-art .cursor__ring svg { transform: scale(2.3) rotate(180deg); }
.cursor.is-art .cursor__ring polygon { fill: color-mix(in oklab, var(--cur) 26%, transparent); }
.cursor.is-art .cursor__label { opacity: 1; transform: none; }
.cursor.is-down .cursor__ring svg { transform: scale(0.82); }
.cursor.is-hidden { opacity: 0; }

/* ---------------------------------------------------------- dialogs --- */
.sheet {
  width: min(40rem, 100vw - 2rem); max-height: min(88svh, 52rem); overflow: auto; margin: auto; padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--sc-surface); color: var(--sc-ink); border: 1px solid var(--rule); border-top: 2px solid var(--cap, var(--sc-accent)); box-shadow: var(--sc-e3);
}
.sheet::backdrop { background: rgb(6 5 4 / 0.72); }
.sheet[open] { animation: sheet-in 260ms var(--sc-ease-out); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.sheet__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.sheet__close { font: 500 0.7rem/1 var(--sc-font-mono); letter-spacing: 0.14em; text-transform: uppercase; background: none; border: 1px solid var(--rule); color: var(--sc-ink); padding: 0.6rem 0.75rem; cursor: pointer; }
.sheet__close:hover { border-color: var(--sc-ink); }
.sheet__sub { margin: 1.6rem 0 0.6rem; color: var(--cap, var(--sc-accent)); }
.sheet .body { max-width: none; }
.cap__lead { margin: 0 0 0.6rem; font-family: var(--sc-font-display); font-variation-settings: "wdth" 115; font-size: var(--sc-t-lg); font-weight: 350; letter-spacing: -0.012em; line-height: 1.15; }
.list { margin: 0; padding: 0; list-style: none; columns: 2 14rem; column-gap: 1.6rem; }
.list li { break-inside: avoid; padding: 0.45rem 0; border-top: 1px solid var(--rule); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.models { margin: 0; display: grid; }
.models div { padding: 0.7rem 0; border-top: 1px solid var(--rule); display: grid; gap: 0.25rem; }
.models dt { font-weight: 600; font-size: var(--sc-t-sm); }
.models dd { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.sheet .note { margin-top: 1.2rem; }
.ways { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.way { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--rule); color: var(--sc-ink); text-decoration: none; transition: background-color 160ms var(--sc-ease-out), color 160ms; }
.way:hover { background: var(--sc-ink); color: var(--sc-canvas); }
.way:hover .label { color: var(--sc-canvas); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form label { display: grid; gap: 0.45rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.form__wide, .form__error, .form__done, .form .cta { grid-column: 1 / -1; }
.form input, .form select, .form textarea { font: inherit; font-size: var(--sc-t-base); color: var(--sc-ink); background: transparent; border: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent); padding: 0.75rem 0.85rem; border-radius: 0; }
.form select option { color: #14181c; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 0; border-color: var(--sc-ink); }
.form__error { margin: 0; color: #f6b8a0; font-size: var(--sc-t-sm); min-height: 1.2em; }
.form__done { margin: 0; color: var(--sc-ink); font-size: var(--sc-t-sm); }
.form .cta { justify-self: start; }
html.dialog-open { overflow: hidden; }

/* ------------------------------------------------------------ modes --- */
.poster-mode canvas.world { opacity: 1 !important; transition: none !important; }
.poster-mode .bar, .poster-mode .map, .poster-mode [data-sc-world-copy], .poster-mode .sc-grain, .poster-mode .skip, .poster-mode .stats, .poster-mode .cursor { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .title__mark::after, .title-smoke__layer > div, .card__cta::before { animation: none; }
}

/* No JavaScript: the copy reads as an ordinary page over the first frame. */
.no-js [data-sc-world] { position: fixed; }
.no-js [data-sc-world-copy] { position: relative; inset: auto; pointer-events: auto; padding: 22vh var(--gut) 12vh; display: grid; gap: 18vh; }
.no-js [data-sc-copy] { opacity: 1; pointer-events: auto; position: relative; inset: auto; margin: 0; width: min(60rem, 100%); text-align: left; justify-items: start; background: var(--plate); padding: 2rem; transform: none; }
.no-js .scrim, .no-js .map, .no-js [data-blueprint], .no-js .colophon__live, .no-js .title-smoke, .no-js .grade { display: none; }
.no-js .colophon__still { display: block; }
.no-js .step, .no-js .card { opacity: 1; }
.no-js .cards { flex-wrap: wrap; }

/* ----------------------------------------------------------- mobile --- */
@media (max-width: 1100px) {
  :root { --map-w: 2.6rem; }
  .map__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .map__readout { display: none; }
}
@media (max-width: 860px) {
  :root { --gut: 1rem; }
  .map { top: 50%; left: 0.55rem; }
  .map__leg { padding: 0.45rem 0; }
  .map__tick { width: 0.6rem; }
  .map__leg[aria-current="location"] .map__tick { width: 1.2rem; }
  .cta--bar { padding: 0.8rem 0.75rem; font-size: 0.62rem; letter-spacing: 0.08em; }
  .grade__opt { padding: 0.55rem 0.45rem; font-size: 0.58rem; letter-spacing: 0.08em; }
  .bar__end { gap: 0.4rem; }
  .bar__brand { padding: 0.6rem 0.7rem; }
  .wordmark { width: 5.6rem; }
  .copy, .copy--intro, .copy--tension, .copy--caps, .copy--real, .copy--method, .copy--steps, .copy--work, .copy--reach, .copy--contact {
    left: 2.6rem; right: var(--gut); top: auto; bottom: max(5svh, 1.5rem); width: auto; margin: 0; text-align: left; justify-items: start; height: auto;
  }
  .copy--title { inset: 0; margin: auto; width: 100%; height: fit-content; transform: translateY(-8svh); justify-items: center; text-align: center; }
  .title__mark { width: 84vw; }
  .title__tag { letter-spacing: 0.34em; padding-left: 0.34em; max-width: 30ch; line-height: 1.7; }
  .copy--tension { bottom: auto; top: 38svh; }
  .copy--caps { right: 0; }
  .cards { overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.8rem var(--gut) 0.4rem 0; scrollbar-width: none; overscroll-behavior-x: contain; }
  .cards::-webkit-scrollbar { display: none; }
  .card { flex-basis: 64vw; height: 19rem; scroll-snap-align: start; }
  .contact__actions { justify-content: flex-start; }
  .colophon { justify-items: start; }
  .display--xl { font-size: clamp(2.1rem, 1.2rem + 4.2vw, 2.8rem); }
  .display--lg { font-size: clamp(1.8rem, 1.1rem + 3.6vw, 2.4rem); }
  .scrim, .scrim--low-lead, .scrim--high-lead, .scrim--trail, .scrim--low-trail, .scrim--centre, .scrim--low-centre, .scrim--low-wide { inset: auto 0 0 0; top: auto; width: auto; height: 82svh; }
  .scrim::before { background: linear-gradient(to top, rgb(var(--scrim-rgb) / 0.92) 0%, rgb(var(--scrim-rgb) / 0.74) 42%, rgb(var(--scrim-rgb) / 0) 100%); }
  .principles div { grid-template-columns: 1fr; gap: 0.2rem; }
  .work { grid-template-columns: 5.5rem 1fr; gap: 0.8rem; padding: 0.6rem 0; }
  .work img { height: 3.6rem; }
  .work p { display: none; }
  .figs li { padding: 0.5rem 0; }
  .fig { font-size: var(--sc-t-xl); }
  .step { padding: 0.55rem 0; }
  .stats { left: var(--gut); right: var(--gut); }
  .form { grid-template-columns: 1fr; }
}

/* =============================================================== revision 3 */

/* --- navigation: the arc across the top (default), or the rail (?nav=rail) --- */
.map { display: none; }
html.nav-rail .map { display: block; }
html.nav-rail .arc { display: none; }
.arc { position: fixed; top: clamp(3.6rem, 6vw, 4.6rem); left: 50%; z-index: var(--sc-z-chrome); width: min(64vw, 60rem); height: 6.4rem; transform: translateX(-50%); transition: opacity 600ms var(--sc-ease-out); }
html.at-title .arc { opacity: 0; pointer-events: none; }
.arc::before { content: ""; position: absolute; inset: -3.5rem -12vw -2.5rem; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 50% 35%, rgb(var(--scrim-rgb) / 0.5), rgb(var(--scrim-rgb) / 0) 72%); }
.arc__svg { position: absolute; inset: 0 0 auto 0; width: 100%; height: 4.2rem; overflow: visible; }
.arc__base { fill: none; stroke: color-mix(in oklab, var(--sc-ink) 36%, transparent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.arc__fill { fill: none; stroke: var(--sc-accent); stroke-width: 2.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px color-mix(in oklab, var(--sc-accent) 60%, transparent)); }
.arc__stops { list-style: none; margin: 0; padding: 0; }
.arc__stop { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); background: none; border: 0; padding: 0.6rem; cursor: pointer; color: var(--sc-ink); display: grid; justify-items: center; }
.arc__dot { width: 0.62rem; height: 0.62rem; border-radius: 50%; border: 1.5px solid var(--sc-ink); background: var(--sc-canvas); transition: transform 300ms var(--sc-ease-out), background-color 300ms, border-color 300ms, box-shadow 300ms; }
.arc__stop.is-past .arc__dot { background: var(--sc-ink); }
.arc__stop[aria-current="location"] .arc__dot { transform: scale(1.7); background: var(--sc-accent); border-color: var(--sc-accent); box-shadow: 0 0 0 5px color-mix(in oklab, var(--sc-accent) 25%, transparent); }
.arc__label { position: absolute; top: 1.95rem; white-space: nowrap; font: 500 0.68rem/1 var(--sc-font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink); opacity: 0.66; text-shadow: 0 1px 10px rgb(var(--scrim-rgb) / 0.85); transition: opacity 300ms, transform 300ms var(--sc-ease-out), color 300ms; }
.arc__stop:hover .arc__label { opacity: 1; }
.arc__stop[aria-current="location"] .arc__label { opacity: 1; transform: translateY(2px) scale(1.12); color: var(--sc-accent); }
.arc__readout { position: absolute; left: 50%; top: 5.7rem; transform: translateX(-50%); display: flex; gap: 1.4rem; margin: 0; font: 400 0.62rem/1 var(--sc-font-mono); letter-spacing: 0.1em; color: var(--sc-ink-soft); white-space: nowrap; text-shadow: 0 1px 10px rgb(var(--scrim-rgb) / 0.85); }
.arc__readout div { display: flex; gap: 0.5rem; }
.arc__readout dt { text-transform: uppercase; }
.arc__readout dd { margin: 0; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.no-world .arc__readout { display: none; }
/* the rail, enlarged: the other direction, kept for comparison */
html.nav-rail .map { width: 14rem; }
html.nav-rail .map__leg { font-size: 0.8rem; padding: 0.5rem 0; color: var(--sc-ink); }
html.nav-rail .map__label { opacity: 0.88; }
html.nav-rail .map__tick { width: 1.4rem; height: 2px; }
html.nav-rail .map__leg[aria-current="location"] .map__tick { width: 3.2rem; }
html.nav-rail .map::before { background: radial-gradient(ellipse at 30% 50%, rgb(var(--scrim-rgb) / 0.62), rgb(var(--scrim-rgb) / 0) 72%); }
:root { --map-w: 0rem; }
html.nav-rail { --map-w: 14rem; }

/* --- text reveal: words rise from nearly invisible as the visitor scrolls --- */
.rv { color: color-mix(in srgb, currentColor calc(var(--rv, 1) * 100%), transparent); }

/* --- capability cards: the text waits low and rises to meet the pointer --- */
.card { height: clamp(20rem, 25vw, 23rem); }
.card__img { height: 100%; }
.card__img--mist { display: none; }
html[data-grade="mist"] .card__img { display: none; }
html[data-grade="mist"] .card__img.card__img--mist { display: block; filter: none; }
html[data-grade="mist"] .card.is-active .card__img--mist, html[data-grade="mist"] .card:hover .card__img--mist { filter: brightness(1.06); }
.card__panel { height: 64%; transform: translateY(var(--panel-y, 54%)); transition: transform 620ms var(--sc-ease-out); }
.card__desc { transition: opacity 420ms var(--sc-ease-out) 80ms; }
.card:not(:hover):not(:focus-within) .card__desc { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__panel, .card:focus-within .card__panel { --panel-y: 0%; }
}
@media (hover: none), (pointer: coarse) {
  .card.is-active .card__panel { --panel-y: 0%; }
  .card.is-active .card__desc { opacity: 1; }
}
.card__name { font-size: 0.8rem; }
.card__lead { font-size: 1.12rem; }

/* --- the closing call to action --- */
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.cta--hero {
  position: relative; display: inline-flex; align-items: center; gap: 0.9rem;
  padding: 1.35rem 2rem; font-size: 0.92rem; letter-spacing: 0.16em; isolation: isolate;
  background: var(--sc-ink); color: var(--sc-canvas); border-radius: 2px;
  animation: cta-pulse 2.6s var(--sc-ease-out) infinite;
}
.cta__ring {
  position: absolute; inset: -3px; z-index: -1; border-radius: 4px; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--spin), transparent 0deg, var(--sc-accent) 70deg, transparent 140deg, transparent 220deg, color-mix(in oklab, var(--sc-accent) 70%, #fff) 290deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: cta-spin 3.2s linear infinite;
}
.cta__arrow { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 260ms var(--sc-ease-out); }
.cta--hero:hover { background: var(--sc-accent); color: var(--sc-accent-ink); }
.cta--hero:hover .cta__arrow { transform: translateX(5px); }
@keyframes cta-spin { to { --spin: 360deg; } }
@keyframes cta-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--sc-accent) 55%, transparent), 0 18px 40px -16px rgb(0 0 0 / 0.6); }
  70% { box-shadow: 0 0 0 18px transparent, 0 18px 40px -16px rgb(0 0 0 / 0.6); }
  100% { box-shadow: 0 0 0 0 transparent, 0 18px 40px -16px rgb(0 0 0 / 0.6); }
}

/* --- selected work: a reading list beside the screens --- */
.copy--work { top: auto; bottom: 7vh; width: min(27rem, 32vw); gap: 0.9rem; }
.copy--work .display { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); }
.work__hint { font-size: var(--sc-t-sm); }
.work { grid-template-columns: 1fr auto; gap: 0.2rem 1rem; padding: 0.7rem 0; }
.work p { grid-column: 1 / -1; grid-row: 2; margin: 0; }
.work .link { grid-column: 2; grid-row: 1; padding: 0; }

/* --- steps: the reveal carries them; the active one keeps the accent --- */
.step, .step.is-done { opacity: 1; }
.step:not(.is-active) .step__n { color: var(--sc-ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .cta--hero, .cta__ring { animation: none; }
  .card__panel { transition: none; }
}
@media (max-width: 860px) {
  .arc { top: 3.7rem; width: 94vw; height: 4.6rem; }
  .arc__svg { height: 3rem; }
  .arc__label { display: none; }
  .arc__stop[aria-current="location"] .arc__label { display: block; top: 1.6rem; font-size: 0.6rem; }
  .arc__readout { display: none; }
  html:not(.nav-rail) .copy:not(.copy--title) { left: var(--gut); }
  .copy--work { width: auto; }
  .work p { display: none; }
  .cta--hero { padding: 1.1rem 1.4rem; font-size: 0.78rem; }
}
/* selected work: the project on the screen is the one lit in the list */
.work { opacity: 0.55; transition: opacity 320ms var(--sc-ease-out); }
.work.is-active { opacity: 1; }
.work.is-active .work__name { color: var(--sc-accent); }
.no-js .work { opacity: 1; }
/* the close sits low, so the carved VELDRAH and its tagline stand clear above it */
.copy--contact { bottom: 3vh; gap: 0.95rem; }
.copy--contact .display--lg { font-size: clamp(1.9rem, 1rem + 2.3vw, 3.1rem); }
.copy--contact .colophon { margin-top: 0.5rem; padding-top: 0.8rem; }
/* retracted cards hold nothing below the fold: the description leaves the
   layout until the card rises, and the button is anchored to the panel */
.card__panel { padding-bottom: 3.5rem; }
.card__cta { position: absolute; left: 1rem; bottom: 0.9rem; margin: 0; }
.card:not(:hover):not(:focus-within) .card__desc { display: none; }
@media (hover: none), (pointer: coarse) {
  .card.is-active .card__desc { display: -webkit-box; }
}

/* =============================================================== revision 4 */

/* --- the closing call to action: a pulsar. It beats; it never moves. --- */
.cta--hero, .cta--hero:hover, .cta--hero:active { transform: none; }
.cta--hero { animation: pulsar-beat 2.8s linear infinite; }
.cta--hero:hover .cta__arrow { transform: none; }
.cta__pulse { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.cta__pulse i { position: absolute; inset: 0; border-radius: 4px; border: 1.5px solid var(--sc-accent); opacity: 0; animation: pulsar-ring 2.8s cubic-bezier(0.12, 0.8, 0.3, 1) infinite; }
.cta__pulse i:nth-child(2) { animation-delay: 0.16s; }
.cta__pulse i:nth-child(3) { animation-delay: 0.32s; }
@keyframes pulsar-ring {
  0% { opacity: 0.95; inset: 0; }
  62%, 100% { opacity: 0; inset: -1.9rem -2.8rem; }
}
@keyframes pulsar-beat {
  0%, 22%, 100% { box-shadow: 0 0 0 0 transparent, 0 18px 40px -16px rgb(0 0 0 / 0.6); }
  3% { box-shadow: 0 0 2.2rem 0.35rem color-mix(in oklab, var(--sc-accent) 72%, transparent), 0 18px 40px -16px rgb(0 0 0 / 0.6); }
}

/* --- selected work: each project's visit button, in colour, alive --- */
.work { opacity: 0.74; }
.visit {
  position: relative; display: inline-flex; align-items: center; gap: 0.45rem; overflow: hidden; isolation: isolate;
  font: 600 0.66rem/1 var(--sc-font-mono); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--sc-accent-ink); background: var(--sc-accent); padding: 0.6rem 0.8rem 0.6rem 0.95rem; border-radius: 999px;
  transition: background-color 220ms var(--sc-ease-out), color 220ms var(--sc-ease-out);
}
/* a band of light runs across it, and a ring breathes out of it */
.visit::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / 0.6) 48%, transparent 64%);
  transform: translateX(-120%);
}
.work.is-active .visit { animation: visit-glow 2.4s var(--sc-ease-out) infinite; }
.work.is-active .visit::before { animation: visit-sheen 3s ease-in-out infinite; }
.visit__arrow { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform 260ms var(--sc-ease-out); }
.visit:hover { background: var(--sc-ink); color: var(--sc-canvas); }
.visit:hover .visit__arrow { transform: translate(2px, -2px); }
.work .visit { grid-column: 2; grid-row: 1; align-self: center; }
@keyframes visit-sheen { 0%, 52% { transform: translateX(-120%); } 82%, 100% { transform: translateX(120%); } }
@keyframes visit-glow {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--sc-accent) 60%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.6rem transparent; }
}

/* --- capability cards, off the artefacts: a 2 × 2 grid down the left --- */
.scrim--caps { left: 0; top: 0; bottom: 0; width: 86vw; --sx: 15%; --sy: 62%; }
@media (min-width: 861px) {
  .copy--caps { left: calc(var(--gut) + var(--map-w) + 1.5rem); right: auto; top: 16vh; bottom: 4vh; width: min(30rem, 32vw); align-content: end; gap: 1rem; }
  .copy--caps .display { max-width: 15ch; font-size: clamp(1.5rem, 1rem + 1.2vw, 2.2rem); }
  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .card { height: clamp(14rem, 31vh, 19.5rem); }
  .card__panel { height: 72%; transform: translateY(var(--panel-y, 60%)); }
  .card__lead { font-size: 1.02rem; }
}
/* tablets upright: the four in one row along the bottom */
@media (min-width: 601px) and (max-width: 860px) {
  .copy--caps { right: var(--gut); }
  .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; overflow: visible; padding: 0.6rem 0 0; justify-self: stretch; }
  .card { height: 15.5rem; }
  .card__panel { height: 72%; transform: translateY(var(--panel-y, 60%)); padding-inline: 0.8rem; }
  .card__lead { font-size: 0.95rem; }
  .card__desc, .card.is-active .card__desc { display: none; }
  .card__cta { left: 0.8rem; }
}

/* retracted, a card's lead keeps to the one line that shows; risen, it is whole
   (and nothing hidden under the fold stays in the page's flow) */
.card__lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.card:focus-within .card__lead { -webkit-line-clamp: 4; }
@media (hover: hover) and (pointer: fine) { .card:hover .card__lead { -webkit-line-clamp: 4; } }
@media (hover: none), (pointer: coarse) { .card.is-active .card__lead { -webkit-line-clamp: 4; } }

/* --- the cursor rides in the top layer, so it stays above an open dialog --- */
.cursor[popover] { inset: auto; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; }

/* --- tablets and phones --- */
@media (max-width: 860px) {
  .scrim--caps { inset: auto 0 0 0; top: auto; width: auto; height: 82svh; }
  .copy--work .display { font-size: 1.5rem; }
  .work { padding: 0.55rem 0; }
  .visit { padding: 0.55rem 0.7rem 0.55rem 0.8rem; }
}
@media (max-width: 600px) {
  .card { height: 17.5rem; }
  .cta--hero { padding: 1rem 1.3rem; }
  @keyframes pulsar-ring {
    0% { opacity: 0.95; inset: 0; }
    62%, 100% { opacity: 0; inset: -1.2rem -1.6rem; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta--hero, .cta__pulse i, .work.is-active .visit, .work.is-active .visit::before { animation: none; }
}

/* =============================================================== revision 5 */

/* --- tension: the line sits below the carved name and tagline, not across them --- */
.copy--tension { inset: auto 0 16vh 0; margin: 0 auto; height: auto; }
@media (max-width: 860px) {
  .copy--tension { top: auto; bottom: max(13svh, 5.5rem); }
}

/* --- an artefact under the pointer raises its card, as a card lights its artefact --- */
.card.is-hot { --lift: -10px; outline-color: var(--cap); box-shadow: 0 1px 0 rgb(255 255 255 / 0.1) inset, 0 26px 50px -16px color-mix(in oklab, var(--cap) 55%, transparent); }
.card.is-hot .card__panel { --panel-y: 0%; }
html .cards .card.is-hot .card__desc { display: -webkit-box; opacity: 1; }
.card.is-hot .card__lead { -webkit-line-clamp: 4; }
.card.is-hot .card__img { transform: scale(1.09); filter: saturate(1.1) brightness(1.06); }
.card.is-hot .card__arrow { transform: translate(2px, -2px) rotate(45deg); stroke: var(--cap); }
.card.is-hot .card__glyph { transform: rotate(-8deg) scale(1.08); }
.card.is-hot .card__cta { background: var(--cap); color: #120d0a; border-color: var(--cap); }
.card.is-hot .card__cta::before { background: #120d0a; }
@media (min-width: 601px) and (max-width: 860px) {
  html .cards .card.is-hot .card__desc { display: none; }
}

/* --- phones: the card rail, with arrows and dots to move through it --- */
.rail-nav { display: none; }
@media (max-width: 600px) {
  /* the rail is as wide as the screen and scrolls; it no longer grows to fit all four */
  .cards { touch-action: pan-x pan-y; justify-self: stretch; min-width: 0; width: 100%; }
  .rail-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding-right: var(--gut); margin-top: -0.1rem; }
  .rail-nav__step {
    width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    border: 1px solid color-mix(in oklab, var(--sc-ink) 30%, transparent); background: rgb(var(--scrim-rgb) / 0.55); color: var(--sc-ink);
  }
  .rail-nav__step svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; }
  .rail-nav__dots { display: flex; gap: 0.15rem; }
  .rail-nav__dot { width: 1.6rem; height: 2.75rem; border: 0; padding: 0; background: none; display: grid; place-items: center; cursor: pointer; }
  .rail-nav__dot::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: color-mix(in oklab, var(--sc-ink) 40%, transparent); transition: width 260ms var(--sc-ease-out), background-color 260ms; }
  .rail-nav__dot[aria-current="true"]::before { width: 1.3rem; background: var(--sc-accent); }
}

/* =============================================================== revision 7 */

/* --- scrims: every one is the whole screen, its shade an ellipse that fades
   out inside the screen, so no box edge can ever show over the world --- */
@media (min-width: 861px) {
  .scrim--low-lead, .scrim--high-lead, .scrim--trail, .scrim--low-trail, .scrim--low-wide, .scrim--low-centre, .scrim--caps { inset: 0; width: auto; height: auto; }
  .scrim--low-lead::before, .scrim--high-lead::before, .scrim--trail::before, .scrim--low-trail::before, .scrim--low-wide::before, .scrim--low-centre::before, .scrim--caps::before { background: radial-gradient(ellipse var(--rx, 50vw) var(--ry, 60vh) at var(--sx) var(--sy), rgb(var(--scrim-rgb) / 0.84) 0%, rgb(var(--scrim-rgb) / 0.58) 45%, rgb(var(--scrim-rgb) / 0) 100%); }
  .scrim--low-lead { --sx: 26vw; --sy: 81vh; --rx: 52vw; --ry: 56vh; }
  .scrim--high-lead { --sx: 26vw; --sy: 24vh; --rx: 52vw; --ry: 58vh; }
  .scrim--trail { --sx: 82vw; --sy: 44vh; --rx: 46vw; --ry: 72vh; }
  .scrim--low-trail { --sx: 82vw; --sy: 80vh; --rx: 44vw; --ry: 54vh; }
  .scrim--low-wide { --sx: 50vw; --sy: 94vh; --rx: 76vw; --ry: 62vh; }
  .scrim--low-centre { --sx: 50vw; --sy: 82vh; --rx: 62vw; --ry: 64vh; }
  .scrim--caps { --sx: 14vw; --sy: 62vh; --rx: 46vw; --ry: 74vh; }
}

/* --- languages: the four, under the call to action, top right --- */
.bar__cta { display: grid; justify-items: end; gap: 0.3rem; }
.lang { display: flex; gap: 0.1rem; }
.lang__opt {
  font: 500 0.64rem/1 var(--sc-font-mono); letter-spacing: 0.14em; padding: 0.4rem 0.42rem; cursor: pointer;
  background: none; border: 0; color: var(--sc-ink); opacity: 0.62; text-shadow: 0 1px 10px rgb(var(--scrim-rgb) / 0.9);
  transition: opacity 200ms, color 200ms;
}
.lang__opt:hover { opacity: 1; }
.lang__opt[aria-pressed="true"] { opacity: 1; color: var(--sc-accent); }
@media (max-width: 860px) {
  .bar__cta { gap: 0.15rem; }
  .lang__opt { font-size: 0.58rem; padding: 0.35rem 0.32rem; }
}
@media (max-width: 600px) {
  /* longer languages: the raised card keeps its lead clear of the button */
  .card__panel { height: 76%; }
  .card.is-active .card__desc, html .cards .card.is-hot .card__desc { display: none; }
  .lang__opt { min-width: 1.6rem; min-height: 1.6rem; }
}

/* Revision 12: a capability opens with a click anywhere on its card, and its
   details close with a click anywhere on them */
.card { cursor: pointer; }
.sheet--scope { cursor: pointer; }

/* Revision 13: the showreel. The player is wide and dark; the link to it is
   out of sight unless a keyboard reaches it or the page shows still frames */
.sheet--reel { --cap: #4fb0ff; width: min(72rem, 100vw - 2rem); padding: clamp(0.9rem, 2vw, 1.4rem); }
.sheet--reel .sheet__head { margin-bottom: 0.7rem; }
.reel__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.reel-link:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.no-world .reel-link, .no-js .reel-link { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }