/* ==========================================================================
   Inner pages
   --------------------------------------------------------------------------
   Every page other than the landing page opens with a *cover*: a centred
   lockup of that page's own words over an animated, page-specific artefact
   drawn in flat SVG. The artefacts are diagrams of the work — a signal
   pipeline, an equity curve, a specification sheet, a milestone rail — so the
   graphic explains the page instead of decorating it, and no page borrows
   another page's visual.

   The layer is deliberately separate from `site.css`: the landing page keeps
   its own typography and motion, and everything here can be reasoned about
   without scrolling past fifteen sections of hero.
   ========================================================================== */

/* ------------------------------------------------------------- page cover */
.cover {
  position: relative; overflow: clip;
  padding-block: clamp(1.2rem, 2.6vw, 2.2rem) clamp(2.4rem, 5vw, 4.4rem);
}
.cover::before {
  content: ""; position: absolute; inset: -30% -12% auto -12%; height: 130%;
  background:
    radial-gradient(46% 58% at 76% 14%, color-mix(in oklab, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(44% 56% at 16% 6%, color-mix(in oklab, var(--accent-2) 11%, transparent), transparent 72%);
  pointer-events: none;
}
.cover > * { position: relative; }

.cover__head {
  display: grid; gap: var(--space-3); justify-items: center; text-align: center;
  max-width: 880px; margin-inline: auto;
}
.cover__badge {
  display: grid; place-items: center; width: 50px; height: 50px; margin-block-end: var(--space-2);
  border-radius: 16px; color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
  background:
    linear-gradient(150deg, color-mix(in oklab, var(--accent) 18%, transparent), transparent 72%),
    var(--surface-2);
  box-shadow: 0 20px 38px -28px color-mix(in oklab, var(--accent) 85%, transparent),
              inset 0 1px 0 color-mix(in oklab, #fff 10%, transparent);
}
.cover__badge .icon svg { width: 24px; height: 24px; }
.cover__head h1 { margin: 0; font-size: clamp(1.55rem, 1rem + 2.1vw, 2.6rem); line-height: 1.28; }
.cover__head .eyebrow { margin: 0; }
.cover__lead { margin: 0; max-width: 64ch; color: var(--muted); font-size: clamp(0.92rem, 0.88rem + 0.25vw, 1.05rem); }
.cover__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-block-start: var(--space-2); }
.cover__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: center; margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.cover__facts li { display: grid; gap: 2px; text-align: center; }
.cover__facts b { font-size: 0.98rem; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.cover__facts span { font-size: 0.72rem; color: var(--muted); }
.cover__crumbs { margin-block-end: clamp(1rem, 2.4vw, 1.8rem); }
.cover__crumbs ol { justify-content: center; }

/* The scanning band that passes over a drawing is a light sweep, not a panel:
   softened and lightened so it reads as motion over the artwork. */
.art__scan { filter: blur(7px); }

/* The artwork panel: one instrument, framed the same way on every page, so
   the family reads as one product while each drawing stays its own. */
.cover__art {
  position: relative; margin: clamp(1.6rem, 3.2vw, 2.8rem) auto 0;
  max-width: 960px; padding: clamp(0.9rem, 2.2vw, 1.7rem);
  border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: clip;
  background:
    radial-gradient(120% 140% at 14% -24%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
    linear-gradient(180deg, var(--surface-1), var(--surface-2));
  box-shadow: var(--shadow-2), inset 0 1px 0 color-mix(in oklab, #fff 6%, transparent);
}
.cover__art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(130% 130% at 50% 42%, #000 34%, transparent 100%);
  mask-image: radial-gradient(130% 130% at 50% 42%, #000 34%, transparent 100%);
}
.cover__art-tag {
  position: absolute; inset-block-start: 12px; inset-inline-end: 16px; z-index: 2;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}

/* ------------------------------------------------------- art primitives */
/* Flat, two-dimensional and vector: strokes, bars and nodes. Nothing here is a
   perspective transform, so the drawings stay crisp at any size and never
   pretend to be a photograph of a physical object. */
.art {
  position: relative; display: block; width: 100%; height: auto;
  direction: ltr; /* diagrams are geometry: they never mirror with the language */
  color: var(--accent);
}
.art__frame { fill: color-mix(in oklab, var(--surface-1) 78%, transparent); stroke: var(--border); }
.art__panel { fill: color-mix(in oklab, var(--surface-2) 62%, transparent); stroke: var(--border); }
.art__axis { stroke: color-mix(in oklab, var(--border-strong) 62%, transparent); stroke-width: 1; }
.art__wire { fill: none; stroke: color-mix(in oklab, var(--accent) 34%, transparent); stroke-width: 1.6; }
.art__wire--soft { stroke: color-mix(in oklab, var(--border-strong) 85%, transparent); }
.art__wire--warn { stroke: color-mix(in oklab, var(--warn) 55%, transparent); }
.art__draw {
  fill: none; stroke: var(--accent); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: art-draw 2.6s var(--ease-out) 0.2s both;
}
@keyframes art-draw { to { stroke-dashoffset: 0; } }
.art__draw--area { fill: color-mix(in oklab, var(--accent) 15%, transparent); stroke: none; }
.art__flow {
  fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 14 210;
  animation: art-flow 4.6s linear infinite;
}
@keyframes art-flow { from { stroke-dashoffset: 224; } to { stroke-dashoffset: 0; } }
.art__node { fill: var(--surface-1); stroke: color-mix(in oklab, var(--accent) 52%, transparent); stroke-width: 2; }
.art__node--on { fill: var(--accent); stroke: var(--accent); }
.art__node--soft { stroke: color-mix(in oklab, var(--border-strong) 90%, transparent); }
.art__dot { fill: var(--accent-2); }
.art__bar { fill: color-mix(in oklab, var(--muted) 24%, transparent); }
.art__bar--hot { fill: color-mix(in oklab, var(--accent) 62%, transparent); }
.art__bar--warn { fill: color-mix(in oklab, var(--warn) 55%, transparent); }
.art__chip { fill: color-mix(in oklab, var(--accent) 14%, transparent); stroke: color-mix(in oklab, var(--accent) 30%, transparent); }
.art__glow { fill: color-mix(in oklab, var(--accent) 24%, transparent); filter: blur(22px); }
.art__scan {
  fill: color-mix(in oklab, var(--accent) 9%, transparent);
  animation: art-scan 6.4s ease-in-out infinite;
}
@keyframes art-scan {
  0%, 100% { transform: translateY(-10px); opacity: 0.5; }
  50% { transform: translateY(var(--scan, 200px)); opacity: 1; }
}
.art__rise { animation: art-rise 0.9s var(--ease-out) both; animation-delay: var(--d, 0ms); }
@keyframes art-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.art__fade { animation: art-fade 1.1s var(--ease-out) both; animation-delay: var(--d, 0ms); }
@keyframes art-fade { from { opacity: 0; } to { opacity: 1; } }
.art__pulse { animation: art-pulse 3s ease-in-out infinite; animation-delay: var(--d, 0ms); }
@keyframes art-pulse { 0%, 100% { opacity: 0.28; } 50% { opacity: 1; } }
.art__ring {
  fill: none; stroke: color-mix(in oklab, var(--accent) 45%, transparent); stroke-width: 1.4;
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: art-ring 4.6s ease-out infinite; animation-delay: var(--d, 0ms);
}
@keyframes art-ring { 0% { transform: scale(0.28); opacity: 0.85; } 100% { transform: scale(1); opacity: 0; } }
.art__turn {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: art-turn 26s linear infinite;
}
@keyframes art-turn { to { transform: rotate(360deg); } }
.art__text { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; fill: color-mix(in oklab, var(--muted) 92%, transparent); }
.art__text--strong { fill: var(--text-strong); }
.art__text--accent { fill: var(--accent); }
.art__num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- page sections */
.page-body { display: grid; gap: clamp(2.2rem, 4.6vw, 4rem); }
.page-block { display: grid; gap: var(--space-5); }
.page-block__head { display: grid; gap: var(--space-2); max-width: 760px; margin-inline: auto; text-align: center; justify-items: center; }
.page-block__head h2 { margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); }
.page-block__head p { margin: 0; color: var(--muted); }

/* --------------------------------------------------- services: catalogue */
/* Services are bands rather than a card wall: each one gets a full row with
   its own icon, copy and capability chips, which is what a catalogue of work
   should look like. The row number is the only ornament. */
.catalogue { display: grid; gap: var(--space-4); counter-reset: band; }
.svc-band {
  position: relative; counter-increment: band; overflow: clip;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(0.9rem, 2.4vw, 2rem); align-items: start;
  padding: clamp(1.1rem, 2.4vw, 1.9rem);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out);
}
.svc-band:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.svc-band__mark {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
  background:
    linear-gradient(150deg, color-mix(in oklab, var(--accent) 16%, transparent), transparent 74%),
    var(--surface-2);
}
.svc-band__mark .icon svg { width: 24px; height: 24px; }
.svc-band__body { display: grid; gap: 0.5rem; text-align: start; }
.svc-band__index {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--muted);
}
.svc-band__index::before { content: counter(band, decimal-leading-zero); }
.svc-band__body h2 { margin: 0; font-size: clamp(1.05rem, 0.96rem + 0.6vw, 1.45rem); line-height: 1.4; }
.svc-band__body p { margin: 0; color: var(--muted); max-width: 62ch; }
.svc-band__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 0.35rem; }
.svc-band__side { display: grid; gap: 0.7rem; justify-items: end; align-content: center; }
.svc-band__mods { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 260px; }
.svc-band::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out);
}
body.page--fa .svc-band::after { transform-origin: right; }
.svc-band:hover::after { transform: scaleX(1); }

/* --------------------------------------------------- service detail */
.split {
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3.4vw, 3rem); align-items: start;
}
.split__aside { position: sticky; inset-block-start: calc(var(--header-height) + var(--space-5)); display: grid; gap: var(--space-4); }
.panel {
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
}
.panel__title {
  margin: 0 0 var(--space-3); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
}
.panel__meta { display: grid; gap: var(--space-2); margin: 0; }
.panel__meta div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.panel__meta dt { margin: 0; color: var(--muted); font-size: 0.82rem; }
.panel__meta dd { margin: 0; font-family: var(--font-mono); font-size: 0.84rem; color: var(--text-strong); }

/* The body of a service page is a numbered rail: every block keeps its index
   tile in the margin and puts its content in the column beside it, so the page
   scans as one ordered document instead of a stack of centred strips. The grid
   folds to a single column under 640px, tile above the copy. */
.svc-page {
  counter-reset: svc-block;
  /* One rail geometry for the whole page: the numbered tile, the content column
     beside it and the closing action all measure from these two values, so no
     part of the page drifts a few pixels out of line with the rest. */
  --svc-rail: 54px;
  --svc-rail-gap: clamp(1rem, 2.6vw, 2rem);
}
.svc-page .page-body { gap: clamp(2.4rem, 5vw, 4.6rem); }

.svc-block {
  counter-increment: svc-block;
  display: grid; grid-template-columns: var(--svc-rail) minmax(0, 1fr);
  column-gap: var(--svc-rail-gap); row-gap: var(--space-3); align-items: start;
}
.svc-block__rail { position: relative; align-self: stretch; display: grid; justify-items: center; }
.svc-block__no {
  display: inline-grid; place-items: center; width: 44px; height: 34px;
  border-radius: 11px; font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent);
  background: var(--accent-soft);
}
.svc-block__no::before { content: counter(svc-block, decimal-leading-zero); }
.svc-block__rail::after {
  content: ""; position: absolute; inset-block: 42px 0; inset-inline-start: 50%; width: 1px;
  background: linear-gradient(180deg, var(--border-strong), transparent 92%);
}
.svc-block__main { display: grid; gap: var(--space-4); min-width: 0; text-align: start; }

.svc-head { display: grid; gap: var(--space-2); max-width: 76ch; text-align: start; }
/* The eyebrow is an inline pill, but an inline box becomes a block inside a
   grid and then stretches: a wide empty bar with a short word at one end.
   Sized to its content it hugs its label, the way it does elsewhere. */
.svc-head .eyebrow { margin: 0; justify-self: start; }
.svc-head h2 { margin: 0; font-size: clamp(1.22rem, 1.02rem + 0.85vw, 1.7rem); line-height: 1.4; }
.svc-head__lead { margin: 0; color: var(--muted); font-size: 0.95rem; }
.svc-head__body { display: grid; gap: var(--space-2); max-width: 76ch; justify-items: start; }
/* The head with a stamp keeps the reading width of every other head, so the
   stamp sits beside the copy it counts rather than at the far page corner. */
.svc-head--split { grid-template-columns: minmax(0, 1fr); }

/* The tally of the handover list, stamped in the corner of its head: the count
   over its unit, never wrapping. The rows used to carry that number each, at
   the far end of the row, which left an empty sheet between item and index. */
.svc-stamp {
  display: grid; gap: 2px; justify-items: center; margin: 0; justify-self: start;
  min-width: 72px; padding: 8px 16px 9px; text-align: center;
  border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
  border-radius: 14px; background: var(--accent-soft);
}
.svc-stamp b {
  font-family: var(--font-mono); font-size: 1.3rem; line-height: 1.1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.svc-stamp span { font-size: 0.68rem; line-height: 1; color: var(--muted); white-space: nowrap; }
/* Only once the head is genuinely wide does the stamp take the far column;
   below that it stays under the copy, where it belongs to the text. */
@media (min-width: 900px) {
  .svc-head--split { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-5); align-items: start; }
  .svc-head--split .svc-stamp { justify-self: end; }
}

/* What the client receives is a handover sheet: one framed checklist that fills
   the sheet instead of a table with a hole in the middle of it. Two columns as
   soon as there is room for two, one column below that, and a lone last item
   spans the full width, so no service ever renders a half-empty row. */
.svc-pack {
  list-style: none; margin: 0; padding: 0; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--accent) 5%, transparent), transparent 58%),
    var(--panel);
}
.svc-pack__item {
  min-width: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3); align-items: center;
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--border);
  transition: background 0.3s var(--ease-out);
}
.svc-pack__item:first-child { border-block-start: 0; }
.svc-pack__item:hover { background: color-mix(in oklab, var(--accent) 7%, transparent); }
.svc-pack__tick {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
}
.svc-pack__tick .icon svg { width: 15px; height: 15px; stroke-width: 2; }
.svc-pack__text { color: var(--text-strong); font-size: 0.95rem; line-height: 1.7; overflow-wrap: anywhere; }
.svc-pack__note { margin: 0; color: var(--muted); font-size: 0.8rem; max-width: 76ch; border-inline-start: 2px solid var(--border-strong); padding-inline-start: var(--space-3); }
@media (min-width: 720px) {
  .svc-pack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-pack__item:nth-child(-n+2) { border-block-start: 0; }
  .svc-pack__item:nth-child(even) { border-inline-start: 1px solid var(--border); }
  .svc-pack__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* The coverage cards sit two to a row and read as a list: the icon holds the
   start column, title and body line up beside it. */
.svc-page .value-grid { grid-template-columns: repeat(auto-fit, minmax(min(390px, 100%), 1fr)); }
.svc-page .value-card { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--space-3); row-gap: 3px; align-items: start; }
.svc-page .value-card__icon { grid-row: 1 / span 2; }
.svc-page .value-card h3 { grid-column: 2; grid-row: 1; }
.svc-page .value-card p { grid-column: 2; grid-row: 2; }

/* A service page keeps its long-form paragraphs in the reading direction:
   centred body copy is decoration, and decoration is not worth the cost of
   reading a specification sideways. */
.svc-page .prose { text-align: start; max-width: 78ch; margin-inline: 0 auto; }
.svc-page .prose p { margin-block: 0 var(--space-3); color: var(--muted); line-height: 1.95; }
.svc-page .prose p:last-child { margin-block-end: 0; }

/* A service page is a landing page, so it carries parts the catalogue does not
   need: the audience the offer fits, its own closing call to action and the
   snapshot panel in the rail. The delivery track and the coverage cards reuse
   the process list and the value cards already defined for the landing page. */
.svc-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.svc-fit__card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: var(--space-3); row-gap: 3px; align-items: start;
  padding: var(--space-4); min-width: 0; text-align: start;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 5%, transparent), transparent);
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.svc-fit__card:hover { border-color: color-mix(in oklab, var(--accent) 36%, transparent); transform: translateY(-3px); }
.svc-fit__mark {
  grid-row: 1 / span 2;
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 12px; color: var(--accent); background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
}
.svc-fit__card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1rem; }
.svc-fit__card p { grid-column: 2; grid-row: 2; margin: 0; color: var(--muted); font-size: 0.88rem; }

/* The closing action lines up with the content column of the blocks above it
   instead of running wider than them, and carries the accent, so it reads as
   the end of the page rather than one more panel. */
.svc-cta {
  display: grid; gap: var(--space-3); justify-items: center; text-align: center;
  margin-block-start: var(--space-6);
  margin-inline-start: calc(var(--svc-rail) + var(--svc-rail-gap));
}
.panel.svc-cta {
  border-color: color-mix(in oklab, var(--accent) 26%, transparent);
  background:
    radial-gradient(120% 150% at 78% -14%, color-mix(in oklab, var(--accent) 15%, transparent), transparent 62%),
    linear-gradient(180deg, var(--surface-1), var(--surface-2));
}
.svc-cta h2 { margin: 0; font-size: clamp(1.15rem, 1rem + 0.9vw, 1.6rem); }
.svc-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* The snapshot panel is a specification ledger: label, dotted leader and value
   on one line, the way a spec sheet states a property. */
.svc-facts { display: grid; gap: var(--space-3); margin: 0; }
.svc-facts div { display: grid; grid-template-columns: auto minmax(1.4rem, 1fr) auto; gap: 8px; align-items: baseline; }
.svc-facts__lead { align-self: center; border-block-end: 1px dotted color-mix(in oklab, var(--border-strong) 90%, transparent); }
.svc-facts dt { margin: 0; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.svc-facts dd { margin: 0; color: var(--text-strong); font-size: 0.9rem; text-align: end; }
.svc-facts__note { margin: var(--space-4) 0 0; color: var(--muted); font-size: 0.76rem; }

/* --------------------------------------------------- portfolio showcase */
/* Each project gets its own panel with a deterministic accent, so the grid
   reads as a set of distinct pieces of work rather than a repeated template. */
.showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-4); }
.showcase .project-card { height: 100%; }
.project-card__art {
  position: relative; aspect-ratio: 16 / 7; overflow: clip; border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 140% at 20% -30%, color-mix(in oklab, var(--art-tone, var(--accent)) 22%, transparent), transparent 66%),
    linear-gradient(180deg, var(--surface-1), var(--surface-2));
}
.project-card__art .art { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------------------------------------------------- case studies board */
.board { display: grid; gap: var(--space-4); }
.board-row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.6vw, 2.4rem); align-items: center;
  padding: clamp(1.1rem, 2.4vw, 1.9rem);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
}
.board-row__body { display: grid; gap: 0.6rem; text-align: start; }
.board-row__body h2 { margin: 0; font-size: clamp(1.05rem, 0.96rem + 0.6vw, 1.4rem); }
.board-row__body p { margin: 0; color: var(--muted); }
.board-row__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-3); margin: 0; }
.board-row__facts div { display: grid; gap: 2px; }
.board-row__facts dt { margin: 0; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.board-row__facts dd { margin: 0; font-family: var(--font-mono); font-size: 0.84rem; color: var(--text-strong); }

/* ------------------------------------------------------- knowledge page */
.featured-post {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center;
  padding: clamp(1.2rem, 2.6vw, 2rem);
  border: 1px solid var(--border-strong); border-radius: var(--radius-xl);
  background:
    radial-gradient(110% 140% at 10% -20%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 62%),
    linear-gradient(180deg, var(--surface-1), var(--surface-2));
}
.featured-post__body { display: grid; gap: 0.7rem; text-align: start; }
.featured-post__body h2 { margin: 0; font-size: clamp(1.15rem, 1rem + 0.9vw, 1.7rem); }
.featured-post__body p { margin: 0; color: var(--muted); }

/* --------------------------------------------------------- article page */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
.article-aside { position: sticky; inset-block-start: calc(var(--header-height) + var(--space-5)); display: grid; gap: var(--space-3); }
.article-aside .progress { position: relative; height: 3px; border-radius: 999px; background: var(--tile); overflow: hidden; }
.article-aside .progress i { display: block; height: 100%; width: 0; background: var(--brand-gradient); }
.reading-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.reading-meter__value { min-width: 3.2ch; color: var(--accent); font: 600 0.72rem var(--font-mono); text-align: end; }
.related-list { display: grid; gap: 9px; list-style: none; margin: 0; padding: 0; }
.related-list li { min-width: 0; }
.related-list a { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--glass); color: var(--text); transition: border-color .25s var(--ease-out), transform .25s var(--ease-out), background .25s var(--ease-out); }
.related-list a:hover { border-color: color-mix(in oklab, var(--accent) 45%, transparent); background: color-mix(in oklab, var(--accent) 7%, var(--glass)); transform: translateY(-2px); }
.related-list__index { color: var(--accent); font: 600 .7rem var(--font-mono); }
.related-list__arrow { color: var(--muted); font-size: 1rem; }
.article, .article p, .article li { text-align: start; }
.article > * { max-width: 72ch; }
.article h2 { margin-block-start: var(--space-6); }
/* The article's own main image, above the body. */
.article__cover { margin-block: 0 var(--space-5); }
.article__cover img { display: block; width: 100%; height: auto; }

/* The body is rich text from the editor now, so everything an author can drop
   into it — image, table, quote — is styled here instead of inheriting
   whatever markup the editor happened to emit. */
.article__body > :first-child { margin-block-start: 0; }
.article__body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.article__body figure { margin: var(--space-5) 0; }
.article__body figure img { display: block; margin-inline: auto; }
.article__body figcaption { margin-block-start: var(--space-2); color: var(--muted); font-size: 0.78rem; }
.article__body .image-style-align-left { float: left; max-width: 46%; margin-inline-end: var(--space-4); }
.article__body .image-style-align-right { float: right; max-width: 46%; margin-inline-start: var(--space-4); }
.article__body .image-style-align-center,
.article__body .image-style-block-align-center { display: block; margin-inline: auto; }
.article__body .image-style-block-align-left { margin-inline: 0 auto; }
.article__body .image-style-block-align-right { margin-inline: auto 0; }
.article__body blockquote {
  margin: var(--space-5) 0; padding-inline-start: var(--space-4);
  border-inline-start: 3px solid color-mix(in oklab, var(--accent) 55%, transparent);
  color: var(--muted); font-style: italic;
}
.article__body ul, .article__body ol { padding-inline-start: 1.4em; display: grid; gap: var(--space-2); }
.article__body table { width: 100%; border-collapse: collapse; margin-block: var(--space-5); }
.article__body caption { margin-block-end: var(--space-2); color: var(--muted); font-size: 0.78rem; }
.article__body th, .article__body td { padding: var(--space-2) var(--space-3); border: 1px solid var(--border); text-align: start; }
.article__body th { color: var(--text-strong); background: color-mix(in oklab, var(--accent) 6%, transparent); }
.article__body hr { margin-block: var(--space-6); border: 0; border-block-start: 1px solid var(--border); }
.article__body a { text-decoration: underline; text-underline-offset: 3px; }
.article__body .article-list { list-style: disc; }

/* Embedded media: the editor keeps the provider's markup in the body, and the
   renderer only lets an approved host through. On the page the player fills the
   column, so a pasted link never arrives as a fixed 560px box. */
.article__body iframe {
  display: block; width: 100%; aspect-ratio: 16 / 9; height: auto;
  border: 0; border-radius: var(--radius);
  margin-block: var(--space-5);
}
.article__body figure.media { margin: var(--space-5) 0; }
.article__body figure.media > div { display: grid; }

/* Code: inline snippets and whole blocks share the mono face and the console
   surface, because both are read as code rather than as prose. */
.article__body code {
  font-family: var(--font-mono); font-size: 0.86em;
  padding: 0.12em 0.4em; border-radius: 6px;
  background: color-mix(in oklab, var(--accent) 10%, var(--surface-2));
  color: var(--text-strong);
}
.article__body pre {
  margin-block: var(--space-5); padding: var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); overflow-x: auto;
}
.article__body pre code {
  padding: 0; background: none; color: var(--text);
  font-size: 0.82rem; line-height: 1.75;
}

/* Task lists (``todoList``): the checkbox markup is stripped on the way out, so
   the bullet becomes a marker drawn in CSS instead of a form control. */
.article__body ul.todo-list { list-style: none; padding-inline-start: 0; }
.article__body ul.todo-list > li { position: relative; padding-inline-start: 1.7em; }
.article__body ul.todo-list > li::before {
  content: "\2713"; position: absolute; inset-inline-start: 0;
  color: var(--accent); font-weight: 700;
}

/* Highlight markers. CKEditor writes a class per colour, so the palette has to
   exist in the page stylesheet too or the highlight would only show in the
   editor. */
.article__body .marker-yellow { background: #ffe680; color: #1b1b1b; }
.article__body .marker-green { background: #b6f0c6; color: #10301c; }
.article__body .marker-pink { background: #ffc4dd; color: #35101f; }
.article__body .marker-blue { background: #bfe4ff; color: #0d2436; }
.article__body .pen-red { background: none; color: #ff6b6b; }
.article__body .pen-green { background: none; color: #2fd07a; }

/* The paragraph styles offered in the editor's ``style`` dropdown. */
.article__body .article-lead { font-size: 1.08rem; color: var(--text-strong); line-height: 2; }
.article__body .article-note { color: var(--muted); font-size: 0.88rem; }
.article__body .article-callout {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.article__body .article-caption { color: var(--muted); font-size: 0.78rem; text-align: center; }
.article__body .article-code { font-family: var(--font-mono); font-size: 0.84rem; }

/* --------------------------------------------------------- contact page */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
.contact-channels { display: grid; gap: var(--space-4); text-align: start; }
.contact-channels h2 { margin: 0; font-size: 1.15rem; }
.contact-channels > p { margin: 0; color: var(--muted); }
.office-card { display: grid; gap: var(--space-3); }
.office-card__map {
  position: relative; aspect-ratio: 16 / 8; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2);
}
.contact-map-iframe { display: block; width: 100%; height: 100%; min-height: 220px; border: 0; }
.office-card__status { margin: -8px 0 0; color: var(--accent); font-size: .82rem; font-weight: 700; }
.newsletter-card { position: relative; overflow: hidden; display: grid; gap: 14px; padding: clamp(1rem, 2.5vw, 1.35rem); border-color: color-mix(in oklab, var(--accent) 30%, var(--border)); background: linear-gradient(145deg, color-mix(in oklab, var(--accent) 9%, var(--panel)), var(--panel)); }
.newsletter-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--brand-gradient); }
.newsletter-card__mark { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); border-radius: 12px; color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); font: 700 1.05rem var(--font-mono); }
.newsletter-card__head { display: grid; gap: 6px; }
.newsletter-card__eyebrow { color: var(--accent-2); font: 600 .62rem var(--font-mono); letter-spacing: .08em; }
.newsletter-card__head .panel__title { margin: 0; }
.newsletter-card__head p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.75; }
.newsletter-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; }
.newsletter-form input { min-width: 0; min-height: 48px; font-size: .86rem; }
.newsletter-form .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding-inline: 14px; white-space: normal; text-align: center; line-height: 1.45; }
.newsletter-form .btn span:last-child { font-size: 1rem; line-height: 1; }
.newsletter-card__note { margin: 0; color: var(--muted); font-size: .68rem; opacity: .85; }
@media (max-width: 520px) { .newsletter-form { grid-template-columns: minmax(0, 1fr); } .newsletter-form .btn { width: 100%; } }
.article-back { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 12px 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); color: var(--text-strong); box-shadow: var(--shadow-1); transition: transform .25s var(--ease-out), border-color .25s var(--ease-out), background .25s var(--ease-out); }
.article-back:hover { color: var(--text-strong); transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent) 45%, transparent); background: color-mix(in oklab, var(--accent) 7%, var(--panel)); }
.article-back__arrow { display: grid; place-items: center; grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); font-size: 1.05rem; }
.article-back__meta { grid-column: 2; color: var(--muted); font: .65rem var(--font-mono); }
body.page--fa .article-back__arrow { transform: scaleX(-1); }

/* --------------------------------------------------------- about page */
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); }
.fact {
  display: grid; gap: 4px; padding: var(--space-4); text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.fact:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.fact b { font-size: 1.5rem; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.fact span { font-size: 0.8rem; color: var(--text); }
.fact small { color: var(--muted); font-size: 0.72rem; }
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.value-card { display: grid; gap: var(--space-2); padding: var(--space-4); text-align: start; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); }
.value-card__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent); background: var(--accent-soft); }
.value-card h3 { margin: 0; font-size: 1rem; }
.value-card p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.team-card { display: grid; gap: var(--space-2); padding: var(--space-4); text-align: start; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); }
.team-card__head { display: flex; align-items: center; gap: var(--space-3); }
.team-card__avatar {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent);
  background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent);
}
.team-card strong { display: block; font-size: 0.95rem; }
.team-card small { color: var(--muted); font-size: 0.76rem; }
.team-card p { margin: 0; color: var(--muted); font-size: 0.84rem; }

/* ------------------------------------------------------- privacy page */
.policy { display: grid; gap: var(--space-4); max-width: 80ch; margin-inline: auto; }
.policy__stamp {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: center;
  padding: var(--space-2) var(--space-4); border: 1px dashed var(--border-strong);
  border-radius: 999px; font-size: 0.78rem; color: var(--muted);
}
.policy__section {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4);
  padding-block: var(--space-4); border-block-start: 1px solid var(--border);
  text-align: start;
}
.policy__section:first-of-type { border-block-start: 0; }
.policy__num {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent);
  letter-spacing: 0.08em; padding-block-start: 2px;
}
.policy__section h2 { margin: 0 0 var(--space-2); font-size: 1.05rem; }
.policy__body p { margin: 0 0 var(--space-3); color: var(--muted); line-height: 1.95; }
.policy__body p:last-child { margin-block-end: 0; }
.policy__body ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 6px; }
.policy__body li {
  position: relative; padding-inline-start: 1.35em; color: var(--muted); line-height: 1.9;
}
.policy__body li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* The two cards a reader may actually need: where to write, and how to assert
   a right. They close the policy rather than sitting at the top of it. */
.policy__cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.policy__card {
  display: grid; gap: var(--space-3); align-content: start;
  padding: var(--space-4) var(--space-5); border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--glass); text-align: start;
}
.policy__card h2 { margin: 0; font-size: 1rem; }
.policy__card p { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.9; }
.policy__facts { display: grid; gap: var(--space-2); margin: 0; }
.policy__facts > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }
.policy__facts dt { color: var(--muted); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
.policy__facts dd { margin: 0; font-size: 0.86rem; overflow-wrap: anywhere; }
.policy__facts dd a { color: var(--accent); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-aside { position: static; }
}
@media (max-width: 980px) {
  .split, .contact-layout, .featured-post, .board-row { grid-template-columns: minmax(0, 1fr); }
  .split__aside { position: static; }
  .svc-band { grid-template-columns: auto minmax(0, 1fr); }
  .svc-band__side { grid-column: 2; justify-items: start; }
  .svc-band__mods { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .showcase { grid-template-columns: minmax(0, 1fr); }
  .svc-block { grid-template-columns: minmax(0, 1fr); }
  .svc-block__rail { align-self: start; justify-items: start; }
  .svc-block__rail::after { display: none; }
  .svc-cta { margin-inline-start: 0; }
  .policy__section { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .cover__facts { gap: var(--space-2) var(--space-4); }
}

/* --------------------------------------------------------- project record
   Three blocks turn a project page from a claim into something checkable: who
   it was for, what the delivery looked like, and the figures the test produced.
   They read as one system — the ledger borrows the panel surface, the timeline
   borrows the same rule colour — so the page does not look like three widgets. */
.cover__client {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  justify-content: center;
  margin-block-start: var(--space-3);
  color: var(--muted);
  font-size: 0.9rem;
}
.cover__client-name { color: var(--text-strong); font-weight: 650; }
.cover__client-role::before { content: "·"; margin-inline-end: 0.4rem; }

.client-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  text-align: start;
}
.client-card__name { margin: 0; font-size: 1.15rem; font-weight: 650; }
.client-card__facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin: 0; }
.client-card__facts dt {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.client-card__facts dd { margin: 0.15rem 0 0; }
.client-card__ref { font-variant-numeric: tabular-nums; }

.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: start;
}
.ledger__item { display: grid; gap: 0.25rem; padding: var(--space-4); background: var(--surface-1); }
.ledger__value {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.ledger__label { color: var(--muted); font-size: 0.82rem; }
.ledger__note { color: var(--muted); font-size: 0.75rem; }

.phases { list-style: none; margin: 0; padding: 0; display: grid; text-align: start; }
.phases__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--border);
}
.phases__item:first-child { border-block-start: 0; }
.phases__index {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.phases__item--active .phases__index { color: var(--accent); }
.phases__body { display: grid; gap: 0.4rem; }
.phases__head { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.phases__head h3 { margin: 0; font-size: 1rem; }
.phases__window { margin: 0; color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; text-align: start; }
.link-list a { color: var(--accent); text-decoration: none; }
.link-list a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .client-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .phases__item { gap: var(--space-3); }
  .ledger { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* --------------------------------------------------------------- 404 page */
/* The number is the artwork: the candles are drawn first, then rise into place
   one after another, and a slow scan line keeps the picture moving without
   asking the reader to wait for it. */
.notfound { padding-block: clamp(2.4rem, 7vw, 5.5rem) clamp(3rem, 8vw, 6rem); text-align: center; }
.notfound__art { margin: 0 auto clamp(1.4rem, 3.4vw, 2.4rem); max-width: 880px; }

.art--candles404 { display: block; width: 100%; height: auto; overflow: visible; color: var(--accent); }
.candles404__plate { pointer-events: none; }

.candle { animation: candle-rise 0.62s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 38ms); }
@keyframes candle-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.candle__body {
  fill: color-mix(in oklab, var(--accent) 72%, transparent);
  stroke: color-mix(in oklab, var(--accent) 92%, transparent);
  stroke-width: 1;
}
.candle__wick { stroke: color-mix(in oklab, var(--accent) 66%, transparent); stroke-width: 1.8; stroke-linecap: round; }
.candle--down .candle__body {
  fill: color-mix(in oklab, var(--danger) 58%, transparent);
  stroke: color-mix(in oklab, var(--danger) 88%, transparent);
}
.candle--down .candle__wick { stroke: color-mix(in oklab, var(--danger) 62%, transparent); }

/* A handful of candles stay lit: enough movement to look like a live chart, not
   enough to make the number hard to read. */
.candle--live .candle__body, .candle--live .candle__wick {
  animation: candle-lit 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes candle-lit {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.42; }
}

.candles404__scan {
  fill: color-mix(in oklab, var(--accent) 55%, transparent);
  animation: candles404-scan 7s ease-in-out infinite;
}
@keyframes candles404-scan {
  0%, 100% { transform: translateY(26px); opacity: 0.35; }
  50% { transform: translateY(300px); opacity: 0.9; }
}

.notfound__head { display: grid; justify-items: center; gap: var(--space-3); max-width: 62ch; margin-inline: auto; }
.notfound__head h1 { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); }
.notfound__lead { margin: 0; color: var(--muted); line-height: 2; }
.notfound__head .cover__actions { justify-content: center; margin-block-start: var(--space-3); }

.notfound__map { margin-block-start: clamp(2rem, 5vw, 3.4rem); }
.notfound__map-title {
  margin: 0 0 var(--space-4); font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.notfound__map ul {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.notfound__map a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3);
  align-items: center; height: 100%; padding: var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass);
  text-align: start; color: var(--text);
  transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.notfound__map a:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.notfound__map-icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent);
}
.notfound__map-body { display: grid; gap: 2px; min-width: 0; }
.notfound__map-body strong { font-size: 0.95rem; }
.notfound__map-body small { color: var(--muted); font-size: 0.78rem; line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
  .candle, .candle--live .candle__body, .candle--live .candle__wick { animation: none; }
  .candles404__scan { display: none; }
}

/* Motion is the only thing dropped when motion is reduced: every diagram keeps
   its final state, drawn and readable, just not animating. */
@media (prefers-reduced-motion: reduce) {
  .art__draw { stroke-dashoffset: 0; animation: none; }
  .art__flow, .art__scan, .art__ring, .art__turn, .art__pulse,
  .art__rise, .art__fade { animation: none !important; }
  .art__ring { opacity: 0.4; }
  .art__scan { opacity: 0.35; }
}