/* site.css v2 — base, type roles, header (spec band), links, buttons, footer. Values: tokens.css / DESIGN.md */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; scroll-behavior: auto; background: var(--ground); }
html.is-locked { overflow: hidden; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font-serif); font-size: var(--fs-serif); line-height: var(--lh-serif); font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern" 1, "liga" 1;
  min-height: 100vh;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 300; font-family: var(--font-sans); }
::selection { background: var(--red); color: var(--ground); }
:focus-visible { outline: 1px solid var(--red); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: fixed; top: -100px; left: var(--margin); z-index: 200; background: var(--ink); color: var(--ground); padding: 8px 12px; font: 500 var(--fs-cap)/1 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; }
.skip:focus { top: 8px; }
.icon { width: 12px; height: 12px; fill: currentColor; flex: 0 0 auto; shape-rendering: crispEdges; }

/* ---- type roles ---- */
.sans { font-family: var(--font-sans); }
.serif { font-family: var(--font-serif); }
.caps { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-cap); letter-spacing: var(--track-caps); text-transform: uppercase; }
.micro { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-micro); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.mono { font-family: var(--font-mono); font-size: var(--fs-cap); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.small { font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1.45; }
.sep { color: var(--ink-3); margin: 0 .55em; }
.grow { flex: 1; }
.lede { font-family: var(--font-serif); font-size: var(--fs-serif-l); line-height: 1.38; color: var(--ink); max-width: 44ch; text-wrap: pretty; }
.lede-2 { margin-top: .8em; color: var(--ink-2); }
.num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

/* ---- ledger layout: label column + content column ---- */
.ledger { display: grid; grid-template-columns: minmax(150px, 21%) 1fr; column-gap: var(--gutter); padding: 0 var(--margin); }
.ledger-l { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-cap); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); padding-top: .4em; display: flex; gap: 10px; align-items: baseline; }
.ledger-l .n { font-weight: 400; color: var(--ink-3); }
@media (max-width: 720px) { .ledger { grid-template-columns: 1fr; row-gap: 14px; } }

/* ---- header: a spec band. cells divided by hairlines; the docked wordmark in the centre cell; a scroll rule underneath ---- */
.hdr {
  position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: var(--z-header);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  padding: 0 var(--margin); background: var(--ground); border-bottom: 1px solid var(--rule);
}
.hdr-l, .hdr-r { display: flex; align-items: center; gap: 0; }
.hdr-r { justify-content: flex-end; }
.hdr-cell { display: inline-flex; align-items: center; height: 100%; padding: 0 16px; border-right: 1px solid var(--rule-2); font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-cap); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.hdr-l .hdr-cell:first-child { padding-left: 0; }
.hdr-r .hdr-cell { border-right: 0; border-left: 1px solid var(--rule-2); }
.hdr-r .hdr-cell:last-child { padding-right: 0; }
.hdr-cell.dim { color: var(--ink-3); font-weight: 400; }
.hdr-time { font-variant-numeric: tabular-nums; }
.hdr-mark { align-self: center; font-family: var(--font-sans); font-weight: 200; font-size: 16px; letter-spacing: var(--track-display); line-height: 1; white-space: nowrap; position: relative; padding: 0 14px; color: transparent; }
.hdr-mark::before, .hdr-mark::after { content: ''; position: absolute; top: 50%; width: 1px; height: 8px; background: var(--red); transform: translateY(-50%) scaleY(0); transition: transform 160ms var(--ease-out); }
.hdr-mark::before { left: 0; } .hdr-mark::after { right: 0; }
.hdr-mark.is-on::before, .hdr-mark.is-on::after { transform: translateY(-50%) scaleY(1); }
.hdr-mark:focus-visible { outline: 1px solid var(--red); }
.hdr-rule { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.hdr-night { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); transition: background-color 150ms var(--ease-out), transform 90ms var(--ease-out); }
.hdr-night .icon { width: 11px; height: 11px; }
.hdr-night[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
@media (hover:hover) and (pointer:fine) { .hdr-night:hover { background: var(--ground-2); } .hdr-night[aria-pressed="true"]:hover { background: var(--ink); } }
.hdr-night:active { transform: scale(.94); }
/* ---- glass nav (html[data-nav="glass"]): three detached liquid-glass pieces (left · centre wordmark · right), after Aave's
   "Building Glass for the Web". js/glass.js owns the refraction (an SVG feDisplacementMap over the backdrop, Chromium only) and sets
   --glass-* from its params; non-Chromium gets html.glass-fallback (blur + a masked rim lens). Layers per piece, bottom to top:
   refraction (backdrop-filter) · tint (--ground mixed to --glass-tint) · rim (inset highlights) · ::before specular ring at --glass-spec ·
   ::after top sheen + pointer glow (--gl-x/--gl-y from app.js) · drop shadow. Pieces hug their content: the columns stay 1fr auto 1fr but
   the pills are max-content, justified to the outer edges. In refract mode the filter sits on a lens behind each piece (#glass-lenses,
   one z under the header, padded by the push so the rim can read the backdrop just outside the pill); the piece's own blur is then off. ---- */
#glass-lenses { position: fixed; inset: 0; z-index: calc(var(--z-header) - 1); pointer-events: none; }
.glass-lens { position: absolute; pointer-events: none; transition: opacity 300ms var(--ease-out); }
:root { --glass-blur: 6px; --glass-tint: 26%; --glass-edge: .5; --glass-glow: .1; --glass-sheen: .25; --glass-sat: 1.35; --glass-spec: 45deg; --glass-hi-k: 1; --glass-lo-k: 1; }
html[data-mode="dark"], html[data-palette="ink"], html[data-palette="black"], html[data-palette="kelvin"], html[data-palette="cobalt"], html[data-palette="moss"], html[data-palette="plum"] { --glass-hi-k: .45; --glass-lo-k: 2.2; }
html[data-palette="grey40"] { --glass-hi-k: .7; --glass-lo-k: 1.6; }
html[data-nav="glass"] .hdr { inset: 12px 0 auto 0; height: 48px; padding: 0 var(--margin); background: transparent; border: 0; pointer-events: none; align-items: center; }
html[data-nav="glass"] .hdr > * { pointer-events: auto; }
html[data-nav="glass"] .hdr-l { justify-self: start; width: max-content; }
html[data-nav="glass"] .hdr-r { justify-self: end; width: max-content; }
html[data-nav="glass"] .hdr-l, html[data-nav="glass"] .hdr-r, html[data-nav="glass"] .hdr-mark {
  --gl-x: 50%; --gl-y: 30%;
  position: relative; height: 44px; border-radius: 999px; overflow: hidden; isolation: isolate;
  background: color-mix(in srgb, var(--ground) var(--glass-tint), transparent);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255, calc(var(--glass-edge) * var(--glass-hi-k))),
    inset 0 1px 0 rgba(255,255,255, calc(var(--glass-edge) * 1.3 * var(--glass-hi-k))),
    inset 0 -1px 0 rgba(0,0,0, calc(.10 * var(--glass-lo-k))),
    0 0 0 1px rgba(0,0,0, calc(.05 * var(--glass-lo-k))),
    0 14px 34px -18px rgba(0,0,0, calc(.45 * var(--glass-lo-k))),
    0 1px 2px rgba(0,0,0, calc(.06 * var(--glass-lo-k)));
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
/* specular ring: the outermost 1.5px, lit from --glass-spec (top-left bright, a faint echo bottom-right) */
html[data-nav="glass"] .hdr-l::before, html[data-nav="glass"] .hdr-r::before, html[data-nav="glass"] .hdr-mark::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; width: auto; height: auto; transform: none; left: 0; right: 0; top: 0;
  padding: 1.5px; -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, linear-gradient(#000 0 0); mask-composite: exclude;
  background: linear-gradient(calc(var(--glass-spec) + 90deg), rgba(255,255,255, calc(.9 * var(--glass-hi-k))), rgba(255,255,255, calc(.15 * var(--glass-hi-k))) 30%, rgba(255,255,255,0) 50%, rgba(255,255,255, calc(.08 * var(--glass-hi-k))) 72%, rgba(255,255,255, calc(.45 * var(--glass-hi-k))));
  opacity: var(--glass-sheen);
}
/* sheen along the top edge + the pointer glow */
html[data-nav="glass"] .hdr-l::after, html[data-nav="glass"] .hdr-r::after, html[data-nav="glass"] .hdr-mark::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; width: auto; height: auto; transform: none; left: 0; right: 0; top: 0; transition: opacity 300ms var(--ease-out);
  background:
    radial-gradient(140px 70px at var(--gl-x) var(--gl-y), rgba(255,255,255, calc(var(--glass-glow) * 3.2 * var(--glass-hi-k))), rgba(255,255,255, calc(var(--glass-glow) * .8 * var(--glass-hi-k))) 45%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255, calc(var(--glass-sheen) * .55 * var(--glass-hi-k))), rgba(255,255,255, calc(var(--glass-sheen) * .12 * var(--glass-hi-k))) 38%, rgba(255,255,255,0) 60%),
    linear-gradient(calc(var(--glass-spec) + 90deg), rgba(255,255,255, calc(var(--glass-sheen) * .22 * var(--glass-hi-k))), rgba(255,255,255,0) 45%);
}
/* fallback (Safari, Firefox, mobile): the rim is a masked 5px ring with a heavier blur + brightening, so it still reads as a lens */
html.glass-fallback[data-nav="glass"] .hdr-l::before, html.glass-fallback[data-nav="glass"] .hdr-r::before, html.glass-fallback[data-nav="glass"] .hdr-mark::before {
  padding: 5px; opacity: 1;
  -webkit-backdrop-filter: blur(3px) brightness(1.16) saturate(1.3); backdrop-filter: blur(3px) brightness(1.16) saturate(1.3);
  background: linear-gradient(calc(var(--glass-spec) + 90deg), rgba(255,255,255, calc(.55 * var(--glass-sheen) * 2 * var(--glass-hi-k))), rgba(255,255,255, calc(.06 * var(--glass-hi-k))) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255, calc(.35 * var(--glass-sheen) * 2 * var(--glass-hi-k))));
}
html[data-nav="glass"] .hdr-l > *, html[data-nav="glass"] .hdr-r > *, html[data-nav="glass"] .hdr-mark > * { position: relative; z-index: 1; }
html[data-nav="glass"] .hdr-l, html[data-nav="glass"] .hdr-r { padding: 0 6px; }
html[data-nav="glass"] .hdr-cell { border: 0 !important; padding: 0 12px; height: 44px; }
html[data-nav="glass"] .hdr-r .hdr-cell:last-child { padding-right: 8px; }
/* the mark piece appears when the wordmark docks. opacity + visibility only (no transform: hero.js measures the slot with is-on toggled, so
   a transformed hidden state would put the docked wordmark 4px off) */
html[data-nav="glass"] .hdr-mark { padding: 0 22px; display: inline-flex; align-items: center; opacity: 0; visibility: hidden; transform: none; pointer-events: none !important; transition: opacity 300ms var(--ease-out), visibility 0s 300ms, box-shadow 300ms var(--ease-out); }
html[data-nav="glass"] .hdr-mark.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto !important; transition: opacity 300ms var(--ease-out), visibility 0s, box-shadow 300ms var(--ease-out); }
html[data-nav="glass"] .hdr-mark::before { display: block; }
html[data-nav="glass"] .hdr-mark.is-on::before, html[data-nav="glass"] .hdr-mark.is-on::after { transform: none; }
html[data-nav="glass"] .hdr-mark .hdr-mark-t { position: relative; z-index: 1; }
html[data-nav="glass"] .hdr-rule { display: none; }
html[data-nav="glass"] .hdr-map { color: var(--ink-2); }
html[data-nav="glass"] .map-name { min-width: 12ch; } /* the longest section name (particulars, 11 glyphs + tracking): the pill keeps one width across sections, so no map regeneration on scroll */
html[data-nav="glass"] .crops i:nth-child(1), html[data-nav="glass"] .crops i:nth-child(2) { top: 10px; }
/* mobile: one full-width glass bar. the .hdr itself is the piece; the inner pieces lose their glass; About | docked mark | moon + config */
@media (max-width: 720px) {
  html[data-nav="glass"] .hdr {
    --gl-x: 50%; --gl-y: 30%;
    inset: 8px 8px auto 8px; height: 44px; padding: 0 4px; border-radius: 999px; overflow: hidden; isolation: isolate;
    grid-template-columns: 1fr auto 1fr; align-items: center;
    background: color-mix(in srgb, var(--ground) var(--glass-tint), transparent);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255, calc(var(--glass-edge) * var(--glass-hi-k))),
      inset 0 1px 0 rgba(255,255,255, calc(var(--glass-edge) * 1.3 * var(--glass-hi-k))),
      inset 0 -1px 0 rgba(0,0,0, calc(.10 * var(--glass-lo-k))),
      0 0 0 1px rgba(0,0,0, calc(.05 * var(--glass-lo-k))),
      0 14px 34px -18px rgba(0,0,0, calc(.45 * var(--glass-lo-k))),
      0 1px 2px rgba(0,0,0, calc(.06 * var(--glass-lo-k)));
  }
  html[data-nav="glass"] .hdr::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
    padding: 1.5px; -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, linear-gradient(#000 0 0); mask-composite: exclude;
    background: linear-gradient(calc(var(--glass-spec) + 90deg), rgba(255,255,255, calc(.9 * var(--glass-hi-k))), rgba(255,255,255, calc(.15 * var(--glass-hi-k))) 30%, rgba(255,255,255,0) 50%, rgba(255,255,255, calc(.08 * var(--glass-hi-k))) 72%, rgba(255,255,255, calc(.45 * var(--glass-hi-k))));
    opacity: var(--glass-sheen);
  }
  html.glass-fallback[data-nav="glass"] .hdr::before {
    padding: 4px; opacity: 1;
    -webkit-backdrop-filter: blur(3px) brightness(1.16) saturate(1.3); backdrop-filter: blur(3px) brightness(1.16) saturate(1.3);
    background: linear-gradient(calc(var(--glass-spec) + 90deg), rgba(255,255,255, calc(.55 * var(--glass-sheen) * 2 * var(--glass-hi-k))), rgba(255,255,255, calc(.06 * var(--glass-hi-k))) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255, calc(.35 * var(--glass-sheen) * 2 * var(--glass-hi-k))));
  }
  html[data-nav="glass"] .hdr::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
    background:
      radial-gradient(140px 70px at var(--gl-x) var(--gl-y), rgba(255,255,255, calc(var(--glass-glow) * 3.2 * var(--glass-hi-k))), rgba(255,255,255, calc(var(--glass-glow) * .8 * var(--glass-hi-k))) 45%, rgba(255,255,255,0) 70%),
      linear-gradient(180deg, rgba(255,255,255, calc(var(--glass-sheen) * .55 * var(--glass-hi-k))), rgba(255,255,255, calc(var(--glass-sheen) * .12 * var(--glass-hi-k))) 38%, rgba(255,255,255,0) 60%);
  }
  html[data-nav="glass"] .hdr > * { position: relative; z-index: 1; }
  html[data-nav="glass"] .hdr-l, html[data-nav="glass"] .hdr-r, html[data-nav="glass"] .hdr-mark { height: 44px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; isolation: auto; overflow: visible; padding: 0; width: auto; }
  html[data-nav="glass"] .hdr-l::before, html[data-nav="glass"] .hdr-l::after, html[data-nav="glass"] .hdr-r::before, html[data-nav="glass"] .hdr-r::after, html[data-nav="glass"] .hdr-mark::before, html[data-nav="glass"] .hdr-mark::after { display: none; }
  html[data-nav="glass"] .hdr-l { justify-self: start; }
  html[data-nav="glass"] .hdr-r { justify-self: end; }
  html[data-nav="glass"] .hdr-mark { justify-self: center; padding: 0 12px; }
  html[data-nav="glass"] .hdr-cell { height: 44px; padding: 0 10px; }
  html[data-nav="glass"] .hdr-r .hdr-cell:last-child { padding-right: 6px; }
}
/* the docked wordmark: heavier so it holds against the pieces on either side (a stroke thickens without reflow) */
.hdr-mark { font-size: 19px; }
.wm.is-docked .wm-t { -webkit-text-stroke: .5px currentColor; paint-order: stroke fill; }
/* minimap: a hairline with section ticks and a red playhead; the current section name decodes beside it */
.hdr-map { gap: 12px; color: var(--ink-3); }
.map-track { position: relative; width: 96px; height: 10px; }
.map-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule); }
.map-tick { position: absolute; top: 2px; left: calc(var(--x) * 100%); width: 1px; height: 6px; background: var(--ink-3); cursor: pointer; }
.map-tick::after { content: ''; position: absolute; left: -5px; top: -4px; width: 11px; height: 14px; }
.map-head { position: absolute; top: 1px; left: 0; width: 3px; height: 8px; margin-left: -1px; background: var(--red); transform: translateX(0); }
.map-name { display: inline-block; min-width: 7ch; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* magnetic header links: text leans toward the pointer; four corner marks appear (a bounding box that is not an enclosure) */
.mag { position: relative; --cursor-inset: 10px 4px; }
.mag .mag-i { display: inline-block; will-change: transform; }
.mag::after { content: ''; position: absolute; inset: 12px 6px; pointer-events: none; opacity: 0; transition: opacity 160ms var(--ease-out), inset 200ms var(--ease-out);
  --c: var(--ink-3); --l: 4px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--l) no-repeat; }
@media (hover:hover) and (pointer:fine) { .mag:hover::after, .mag:focus-visible::after { opacity: .55; inset: 10px 4px; } }
html.no-corners .mag::after { display: none; }
html[data-nav="band"] .hdr-l .mag:first-child { --cursor-inset: 10px 4px 10px -6px; }
html[data-nav="band"] .hdr-l .mag:first-child::after { left: -6px; }
/* letter-swap hover: each glyph rolls up and its twin rises from below (split-flap) */
.swap .sw { display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
.swap .sw > span { display: block; transition: transform 320ms var(--ease-out); transition-delay: calc(var(--i) * 18ms); }
.swap .sw > span + span { position: absolute; left: 0; top: 100%; color: var(--red); }
@media (hover:hover) and (pointer:fine) { .swap:hover .sw > span, .swap:focus-visible .sw > span { transform: translateY(-100%); } html.no-flip .swap .sw > span { transform: none !important; } }
.hdr-tune { margin-left: 6px; }
.hdr-tune[aria-expanded="true"] { background: var(--ink); color: var(--ground); }
@media (max-width: 720px) {
  .hdr { grid-template-columns: auto 1fr auto; }
  .hdr .lnk-mail, .hdr .hdr-ver, .hdr .hdr-map, .hdr .hdr-time, .hdr .hdr-l a[href="#index"] { display: none; }
  .hdr-mark { justify-self: center; }
  .hdr-cell { padding: 0 10px; }
}

/* ---- print artefacts: viewport crop marks ---- */
.crops { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
html.no-crops .crops { display: none; }
.crops i { position: absolute; width: 18px; height: 18px; opacity: .55; }
.crops i::before, .crops i::after { content: ''; position: absolute; background: var(--ink); }
.crops i::before { width: 1px; height: 12px; } .crops i::after { width: 12px; height: 1px; }
.crops i:nth-child(1) { left: 10px; top: calc(var(--header-h) + 8px); } .crops i:nth-child(1)::before { left: 6px; top: -4px; } .crops i:nth-child(1)::after { left: -4px; top: 6px; }
.crops i:nth-child(2) { right: 10px; top: calc(var(--header-h) + 8px); } .crops i:nth-child(2)::before { right: 6px; top: -4px; } .crops i:nth-child(2)::after { right: -4px; top: 6px; }
.crops i:nth-child(3) { left: 10px; bottom: 10px; } .crops i:nth-child(3)::before { left: 6px; bottom: -4px; } .crops i:nth-child(3)::after { left: -4px; bottom: 6px; }
.crops i:nth-child(4) { right: 10px; bottom: 10px; } .crops i:nth-child(4)::before { right: 6px; bottom: -4px; } .crops i:nth-child(4)::after { right: -4px; bottom: 6px; }
@media (max-width: 720px) { .crops { display: none; } }

/* ---- glitch theme (js/glitch.js adds .is-glitching for ~400ms) ---- */
.is-glitching { animation: glitch-slice 380ms steps(1) both; }
@keyframes glitch-slice {
  0% { clip-path: inset(0 0 72% 0); transform: translateX(-3px); text-shadow: 2px 0 var(--sig-azure), -2px 0 var(--red); }
  15% { clip-path: inset(30% 0 40% 0); transform: translateX(3px); }
  30% { clip-path: inset(60% 0 10% 0); transform: translateX(-2px); text-shadow: -2px 0 var(--sig-azure), 2px 0 var(--red); }
  45% { clip-path: inset(10% 0 70% 0); transform: translateX(2px); }
  60% { clip-path: inset(45% 0 30% 0); transform: translateX(-1px); text-shadow: 1px 0 var(--sig-azure), -1px 0 var(--red); }
  75% { clip-path: inset(0 0 0 0); transform: translateX(1px); }
  100% { clip-path: inset(0 0 0 0); transform: none; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .is-glitching { animation: none; } }

/* ---- links ---- */
.lnk { position: relative; color: var(--ink); }
/* `>` prompt-prefix (reserved 1ch, slides in) + a red rule that draws left→right */
.lnk-prompt { padding-left: 1ch; }
.lnk-prompt::before { content: '>'; position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: .95em; line-height: inherit; color: var(--red); opacity: 0; transform: translateX(-4px); transition: opacity 100ms var(--ease-out), transform 100ms var(--ease-out); }
.lnk-prompt::after { content: ''; position: absolute; left: 1ch; right: 0; bottom: -2px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform 120ms var(--ease-out); }
@media (hover:hover) and (pointer:fine) {
  .lnk-prompt:hover::before, .lnk-prompt:focus-visible::before { opacity: 1; transform: none; transition-duration: 150ms; }
  .lnk-prompt:hover::after, .lnk-prompt:focus-visible::after { transform: scaleX(1); transform-origin: left; transition-duration: 180ms; }
}
/* ink-flood: the rule swells into a highlight from the baseline; text inverts a beat later */
.flood { position: relative; display: inline-block; isolation: isolate; color: var(--ink); font-family: var(--font-serif); font-size: var(--fs-serif-l); line-height: 1.25; padding: 0 .06em; transition: color 120ms var(--ease-out) 0ms; }
.flood::after { content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: 1px; background: var(--red); z-index: -1; transform-origin: 50% 100%; transition: transform 120ms var(--ease-out), height 0s 120ms; }
@media (hover:hover) and (pointer:fine) {
  .flood:hover, .flood:focus-visible { color: var(--ground); transition-delay: 60ms; }
  .flood:hover::after, .flood:focus-visible::after { height: 100%; transform: none; transition: height 0s, transform 180ms var(--ease-out); }
}
.flood.is-copied { background: var(--red-soft); animation: heal 800ms var(--ease-out-soft) forwards; }
.flood.is-copied::before { content: 'copied'; position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); font: 500 var(--fs-micro)/1 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--red); animation: fadeout 1400ms var(--ease-out) forwards; }
@keyframes heal { from { background-color: var(--red-soft); } to { background-color: transparent; } }
@keyframes fadeout { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---- buttons: 1-bit hard-shadow pills (Xerox Star / Mac 1984). press: the button drops onto its shadow ---- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px;
  border: 1px solid var(--ink); border-radius: 999px; background: var(--ground); color: var(--ink);
  font: 500 var(--fs-cap)/1 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; white-space: nowrap;
  box-shadow: 2px 2px 0 0 var(--ink); transform: translate(0,0);
  transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out), background-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine) { .btn:hover { background: var(--ground-2); } }
.btn:active, .btn.is-down { transform: translate(2px, 2px); box-shadow: 0 0 0 0 var(--ink); }
.btn.is-on, .btn[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.btn.sq { border-radius: 2px; }
.btn.icon-only { padding: 6px; width: 30px; height: 30px; justify-content: center; }
.btn:disabled { opacity: .4; cursor: default; box-shadow: 1px 1px 0 0 var(--ink); }
.btn.ghost { border-color: var(--rule); box-shadow: none; }
.btn.ghost:active { transform: scale(.97); }

/* ---- expandables: dashed red rule (visible on every ground) + numbered superscript marker via CSS counters ---- */
[data-xp], .about-body { counter-reset: xp; }
.xp { text-decoration: none !important; counter-increment: xp; }
.xp .xp-t { text-decoration: none !important; }
.xp .xp-t { background-image: linear-gradient(to right, var(--red) 55%, transparent 55%); background-size: 5px 1px; background-repeat: repeat-x; background-position: 0 calc(100% - 1px); padding-bottom: 1px; }
.xp[aria-expanded="true"] .xp-t { background-image: linear-gradient(to right, var(--ink-3) 55%, transparent 55%); }
.xp .xp-k { visibility: hidden; position: relative; display: inline-block; width: 1ch; margin-left: 2px !important; }
.xp .xp-k::before { content: counter(xp); visibility: visible; position: absolute; left: 0; top: 0; font: 500 9px/1 var(--font-sans); color: var(--red); letter-spacing: 0; }
.xp[aria-expanded="true"] .xp-k::before { color: var(--ink-3); }
/* inline caps chips + inline icons in prose (life without motion) */
.k { display: inline-flex; align-items: center; gap: 5px; vertical-align: baseline; font: 500 calc(var(--fs-cap) + 1px)/1 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink); padding: 0 .1em; position: relative; top: -.08em; }
.k .icon { width: 11px; height: 11px; color: var(--red); }
.strike { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 1px; }
.subtext .reg-i { display: inline-block; vertical-align: -1px; margin-right: 6px; color: var(--ink-2); }

/* ---- reveal pre-states ---- */
[data-reveal="rise"] { opacity: 0; transform: translateY(8px); }
[data-reveal="rise"].is-in { opacity: 1; transform: none; transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
[data-reveal="words"] { visibility: hidden; }
[data-reveal="words"].is-split { visibility: visible; }
[data-reveal="words"] .w { display: inline-block; } /* perf C4: will-change is set by reveal.js right before the tween and cleared after */
@media (prefers-reduced-motion: reduce) { [data-reveal="rise"] { opacity: 1; transform: none; } [data-reveal="words"] { visibility: visible; } }

/* ---- sections ---- */
.clients { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }

/* ---- footer: marquee-copy email + colophon strip with CMYK bar and registration mark ---- */
.foot { margin-top: var(--section-gap); border-top: 1px solid var(--rule); }
.marquee { position: relative; overflow: hidden; padding: clamp(28px, 5vh, 64px) 0; user-select: none; }
.marquee-track { display: flex; white-space: nowrap; will-change: transform; }
.marquee-track span { font-family: var(--font-sans); font-size: clamp(56px, 11vw, 200px); font-weight: 200; letter-spacing: var(--track-display); line-height: .95; padding-right: .5em; color: var(--ink); }
.marquee-track span i { font-style: normal; color: var(--ink-3); }
.marquee .stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(var(--rot, -3deg)) scale(.96); font: 500 var(--fs-cap)/1 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--red); border: 1px solid var(--red); padding: .5em .8em; background: var(--ground); pointer-events: none; opacity: 0; }
.marquee .stamp.is-on { animation: thunk 240ms var(--ease-out) forwards, stampout 1600ms var(--ease-out) forwards; }
@keyframes thunk { 0% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--rot)) scale(1.35); } 60% { opacity: 1; transform: translate(-50%,-50%) rotate(var(--rot)) scale(.96); } 100% { opacity: 1; transform: translate(-50%,-50%) rotate(var(--rot)) scale(1); } }
@keyframes stampout { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.colophon { display: flex; align-items: center; padding: 14px var(--margin) 18px; border-top: 1px solid var(--rule-2); font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-micro); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); flex-wrap: wrap; row-gap: 8px; }
.colophon .lnk { color: var(--ink-2); }
.colophon .num { font-variant-numeric: tabular-nums; }
.cmyk { display: inline-flex; gap: 2px; margin-right: 14px; }
.cmyk i { width: 8px; height: 8px; display: block; }
.cmyk i:nth-child(1) { background: #00b3e6; } .cmyk i:nth-child(2) { background: #ec008c; } .cmyk i:nth-child(3) { background: #fff100; } .cmyk i:nth-child(4) { background: var(--ink); }
.reg { width: 14px; height: 14px; margin-right: 12px; color: var(--ink-2); }
@media (max-width: 720px) { .colophon .sep:nth-of-type(2), #foot-xy { display: none; } }