/* prismet.xyz — the workshop and the register it keeps.
   One hall plan (six wings around a rotunda, the prism in its floor) is the navigation. Night is slate and chalk,
   sampled from Sage's night builds; day is cloud and ink, from the build above the clouds. Brass for labels, one
   lantern, and the six wing hues as inlays. Original amethyst glass and violet filament artwork frame the homepage,
   with input-driven depth confined to decorative layers. */

/* ── fonts (self-hosted, SIL OFL; subset to Latin plus arrows and math symbols) ─────────── */
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/Marcellus.woff2) format('woff2'); }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; src: url(assets/fonts/MartianMono.woff2) format('woff2'); }
/* Fallback with matched metrics, so the swap moves nothing much. */

/* ── tokens ───────────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --ground: #0F161D;        /* the night sky over the dark spire */
  --surface: #17212B;
  --raised: #1E2934;
  --ink: #E6E1D4;           /* chalk */
  --ink-2: #B5BCC0;
  --ink-3: #8C959B;
  --line: #3C5770;          /* survey line, decorative only */
  --hair: rgba(230, 225, 212, .12);
  --rule: rgba(230, 225, 212, .22);
  --brass: #C9A260;
  --brass-ink: #D9B978;
  --on-brass: #17130A;
  --lantern: #F2C27A;
  --live: #9C8BD6;          /* amethyst, from the spire crown: only for things running on prismet.xyz */
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 18px 40px rgba(0, 0, 0, .35);
  /* the six wings (muted inlays) and their text-safe companions */
  --desktop: #A8323E;   --desktop-ink: #F0848F;
  --apps: #C0702B;      --apps-ink: #F2A55A;
  --worlds: #A88A2C;    --worlds-ink: #E3C35A;
  --minecraft: #3F7A5C; --minecraft-ink: #7CC49C;
  --web: #355F8A;       --web-ink: #7FAEE0;
  --ai: #6A4F92;        --ai-ink: #B49AE0;
  --h: var(--brass); --hi: var(--brass-ink);

  --display: 'Marcellus', Georgia, serif;
  --sans: 'Marcellus', Georgia, serif;
  --serif: var(--sans);   /* one reading voice; monospace is reserved for technical data */
  --mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --t-xs: .8125rem; --t-sm: .9375rem; --t-base: 1.0625rem; --t-md: 1.2rem; --t-lg: 1.5rem;
  --t-xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --t-2xl: clamp(2.4rem, 1.2rem + 3.6vw, 4.4rem);
  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1240px;
  --bar: 60px;
  --radius: 2px;         /* corners of cards, plaques, buttons and plates */
  --ease: cubic-bezier(.2, .7, .2, 1);
}
:root[data-theme="light"], :root:not([data-theme="dark"]):not([data-theme="light"]).day {
  color-scheme: light;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } }
:root[data-theme="light"], :root:not([data-theme="dark"]).day { --light: 1; }
/* day tokens: applied by system preference unless the toggle says dark, or by the toggle saying light */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #E4E8EA; --surface: #F3F5F6; --raised: #FFFFFF;
    --ink: #141B22; --ink-2: #45515B; --ink-3: #5C6872;
    --line: #2D5878; --hair: rgba(20, 27, 34, .13); --rule: rgba(20, 27, 34, .28);
    --brass: #73551F; --brass-ink: #6A4D1A; --on-brass: #FBF8F1; --lantern: #B9842E; --live: #5A4890;
    --shadow: 0 1px 0 rgba(20, 27, 34, .06), 0 16px 36px rgba(20, 27, 34, .14);
    --desktop-ink: #A32030; --apps-ink: #9D5112; --worlds-ink: #7E6510; --minecraft-ink: #2F6B4C; --web-ink: #2B5C8A; --ai-ink: #5E4486;
  }
}
:root[data-theme="light"] {
  --ground: #E4E8EA; --surface: #F3F5F6; --raised: #FFFFFF;
  --ink: #141B22; --ink-2: #45515B; --ink-3: #5C6872;
  --line: #2D5878; --hair: rgba(20, 27, 34, .13); --rule: rgba(20, 27, 34, .28);
  --brass: #73551F; --brass-ink: #6A4D1A; --on-brass: #FBF8F1; --lantern: #B9842E; --live: #5A4890;
  --shadow: 0 1px 0 rgba(20, 27, 34, .06), 0 16px 36px rgba(20, 27, 34, .14);
  --desktop-ink: #A32030; --apps-ink: #9D5112; --worlds-ink: #7E6510; --minecraft-ink: #2F6B4C; --web-ink: #2B5C8A; --ai-ink: #5E4486;
}

/* ── base ─────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 var(--t-base)/1.65 var(--serif); font-synthesis: none;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--brass); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: var(--radius); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; margin: 0; font-variation-settings: 'opsz' 72; }
h1 { font-size: var(--t-2xl); font-weight: 400; line-height: 1.02; letter-spacing: -.02em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); font-variation-settings: 'opsz' 48; }
h4 { font-size: var(--t-md); font-variation-settings: 'opsz' 32; }
h1 em, h2 em, h3 em, p em.gold { font-style: normal; color: var(--brass-ink); }
strong { font-weight: 400; }
p { margin: 0; text-wrap: pretty; }
code { font: 500 .86em/1.5 var(--mono); font-stretch: 87.5%; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 20; background: var(--raised); padding: 10px 14px; border: 1px solid var(--rule); }
.ext { display: inline-block; margin-left: .3em; vertical-align: -.02em; opacity: .75; }
section { scroll-margin-top: calc(var(--bar) + 12px); }

/* data: mono, only where it is data */
.mono, .step-n, .chip small, .row-stack { font-family: var(--mono); font-stretch: 87.5%; font-weight: 500; }
.caps { font-family: var(--mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: .72rem; }
.plaque, .facts dt, .directory dt, .ledger-head, .door-text .typeline, .crumbs, .sig-head h2, .p-body h2, .plates h2, .threads h2, .ledger-group h3, .skills-title, .hire h4, .next small, .rack-group h3, .plate figcaption::before { font-family: var(--serif); font-variant-caps: all-small-caps; letter-spacing: .06em; font-weight: 400; font-variation-settings: 'opsz' 20; text-transform: none; font-style: normal; }

/* plaques: a label-holder with a brass hairline. The status of a record, the name of a wing. */
.plaque { display: inline-flex; align-items: center; gap: .55em; font-size: .72rem; line-height: 1; color: var(--ink-2); padding: .65em .85em; border: 1px solid var(--rule); border-radius: var(--radius); }
.plaque.brass { color: var(--brass-ink); border-color: color-mix(in srgb, var(--brass) 55%, transparent); }
.plaque.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--h); }
.plaque.live { color: var(--live); border-color: color-mix(in srgb, var(--live) 60%, transparent); }
.plaque.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }

/* rules: a lintel opens a room */
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; padding-top: 22px; margin-bottom: 28px; border-top: 3px solid var(--rule); position: relative; }
.sec-head::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; border-top: 1px solid var(--rule); }
.sec-head p { color: var(--ink-2); max-width: 40rem; }

/* buttons and links */
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; font: 400 var(--t-sm)/1 var(--serif); padding: 11px 16px; border-radius: var(--radius); border: 1px solid var(--rule); background: transparent; color: var(--ink); min-height: 44px; }
.btn:hover { background: var(--surface); border-color: var(--ink-3); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--ground); font-weight: 400; }
.btn.primary:hover { background: var(--brass); border-color: var(--brass); color: var(--on-brass); }
.link { display: inline-flex; align-items: center; font-size: var(--t-sm); color: var(--ink); min-height: 44px; }

/* ── top bar: the running head ────────────────────────────────────────────────────────────── */
.bar { position: sticky; top: 0; z-index: 10; background: var(--ground); border-bottom: 1px solid var(--hair); }
.bar .wrap { display: flex; align-items: center; gap: 16px; min-height: var(--bar); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-height: 44px; }
.brand .mark { color: var(--ink-2); }
.brand strong { font: 400 1.2rem/1 var(--display); letter-spacing: -.01em; }
.brand span { font: 400 .95rem/1 var(--serif); font-style: italic; color: var(--ink-2); }
.nav { display: flex; gap: 2px; align-items: center; }
.nav a:not(.btn) { text-decoration: none; font: 400 var(--t-sm)/1 var(--serif); color: var(--ink-2); padding: 12px 12px; border-radius: var(--radius); min-height: 44px; display: inline-flex; align-items: center; }
.nav a:not(.btn):hover { color: var(--ink); background: var(--surface); }
.nav .btn { margin-left: 8px; }
.theme { width: 44px; padding: 0; justify-content: center; }
.theme .sun { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.nav > * { flex: none; }                    /* the kept targets never squeeze below 44px; the brand gives way first */
.nav .btn.primary { white-space: nowrap; }
@media (max-width: 760px) {
  .nav a:not(.keep) { display: none; }
  .brand span { display: none; }
  .nav .btn.primary { padding-inline: 12px; }
}
/* Under 360px, Work, Hire me and the toggle need the room: the brand keeps its mark and says "Prismet" to readers only. */
@media (max-width: 359px) {
  .bar .wrap { gap: 10px; }
  .brand { min-width: 44px; }
  .brand strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── entrance ─────────────────────────────────────────────────────────────────────────────── */
.entrance { padding-block: 0; border-bottom: 1px solid var(--hair); }
.entrance .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(28px, 3vw, 40px); }
.salute { font-family: var(--display); font-weight: 400; font-size: var(--t-md); color: var(--brass-ink); margin-top: 18px; letter-spacing: .02em; }
.entrance h1 { margin-top: 8px; font-size: clamp(2rem, 4.2vw, 3.65rem); line-height: 1.08; }
.entrance .lede { margin-top: 18px; font-size: clamp(1.125rem, 1.4vw, 1.25rem); }
.entrance .plan { width: 100%; max-width: 440px; justify-self: center; }
.lede { margin-top: 22px; font-size: var(--t-md); line-height: 1.5; color: var(--ink-2); max-width: 34rem; font-variation-settings: 'opsz' 20; }
.directory { display: flex; flex-wrap: wrap; gap: 20px 28px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--hair); }
.directory div { display: flex; gap: 10px; align-items: baseline; }
.directory dt { font-size: .9rem; color: var(--ink-3); }
.directory dd { margin: 0; font-size: var(--t-sm); }
.directory a { text-decoration: none; border-bottom: 1px solid var(--rule); position: relative; }
.directory a::before { content: ""; position: absolute; inset: -15px -2px; }   /* 44px hit area */
.directory a:hover { border-color: var(--brass); }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* ── enchanted optics: reserved illustration space, separate from words and project evidence ── */
.portfolio-home > .entrance, .portfolio-home > .home-section { position: relative; isolation: isolate; }
.entrance-visual { min-width: 0; width: 100%; max-width: 500px; justify-self: center; }
.hero-optics, .optical-rail { position: relative; pointer-events: none; user-select: none; overflow: clip; }
.hero-optics { width: 100%; padding: 18px; }
.optic-depth { transform: translate(var(--decor-x, 0px), calc(var(--decor-y, 0px) + var(--decor-scroll, 0px))); transition: transform 350ms var(--ease); }
.hero-crystal { width: 100%; height: auto; }
/* The prism occupies the crescent's empty left-centre; its fan points into the surrounding glass. */
.hero-prism { display: block; position: absolute; width: 72%; max-width: 360px; height: auto; left: 0; top: 50%; transform: translateY(-50%); overflow: visible; }
.hero-prism-core { transform-origin: 170px 126px; transform: rotate(var(--hero-prism-turn, 0deg)); transition: transform 220ms var(--ease); }
.hero-prism-fan { transform-origin: 208px 132px; transform: rotate(var(--hero-beam-turn, 0deg)) scaleY(var(--hero-fan-spread, 1)); transition: transform 260ms var(--ease); }
.hero-prism-glass { fill: color-mix(in srgb, var(--ai-ink) 12%, transparent); stroke: var(--brass); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hero-prism-facet { fill: var(--ai-ink); opacity: .2; }
.hero-entry-beam { fill: none; stroke: var(--ink); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.hero-entry-beam.interior { opacity: .55; stroke-width: 1; }
.hero-refraction-edge { fill: none; stroke: var(--brass); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* One companion illustration shares the tools heading row; cards start after this row. */
#lenses .sec-head { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; gap: 20px; }
.optical-rail { width: 240px; padding: 14px; justify-self: end; }
.optical-rail img { width: 100%; height: auto; transform: translateY(var(--decor-scroll, 0px)); transition: transform 400ms var(--ease); }
.wing-more { display: inline-block; white-space: nowrap; }
/* The illustration owns the hero's visual column. The same six wing links become a clear navigation strip. */
.entrance .plan-strip { grid-column: 1 / -1; width: 100%; max-width: none; margin: 0; padding-top: 16px; border-top: 1px solid var(--hair); }
.entrance .plan-strip > svg, .entrance .plan-strip > .lantern { display: none; }
.entrance .plan-strip figcaption { position: static; margin: 0; }
.entrance .plan-strip .wing-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 24px; margin-top: 8px; }
@media (max-width: 900px) {
  .entrance-visual { max-width: 380px; }
  .hero-optics { padding: 10px; }
}
@media (max-width: 600px) {
  .entrance-visual { max-width: 320px; }
  .entrance .plan-strip .wing-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
  #lenses .sec-head { grid-template-columns: 1fr; gap: 8px; }
  .optical-rail { width: 180px; justify-self: center; padding: 8px; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .optic-depth, .optical-rail img, .hero-prism-core, .hero-prism-fan { transform: none; transition: none; }
}

/* the hall plan: surveyed linework. Weights are screen pixels (non-scaling): court 1.5, rotunda 1.25, rooms, walls and
   piers 1, the inner court and inner ring 1 at half strength, inlays 2. Axis-aligned lines snap to the pixel grid. */
.plan { margin: 0; position: relative; --survey: var(--line); --beacon: var(--lantern); --glow: color-mix(in srgb, var(--lantern) 26%, transparent); --glow-blend: screen; --prism-fill: color-mix(in srgb, var(--brass) 14%, transparent); }
:root[data-theme="light"] .plan, :root.day .plan { --survey: #5E7B93; --beacon: var(--brass); --glow: color-mix(in srgb, #F8D0A0 34%, transparent); --glow-blend: multiply; --glow-stop: 58%; --prism-fill: color-mix(in srgb, var(--brass) 8%, transparent); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .plan { --survey: #5E7B93; --beacon: var(--brass); --glow: color-mix(in srgb, #F8D0A0 34%, transparent); --glow-blend: multiply; --glow-stop: 58%; --prism-fill: color-mix(in srgb, var(--brass) 8%, transparent); } }
.plan svg { width: 100%; height: auto; overflow: visible; font-family: var(--serif); }
.plan .court, .plan .rotunda, .plan .room, .plan .wall, .plan .pier { fill: none; stroke: var(--survey); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plan .court { stroke-width: 1.5; }
.plan .rotunda { stroke-width: 1.25; }
.plan .court.inner, .plan .rotunda.inner { stroke-width: 1; stroke-opacity: .5; }
.plan .court, .plan .room, .plan .pier { shape-rendering: crispEdges; }
.plan .pier { fill: color-mix(in srgb, var(--survey) 40%, transparent); }
.plan .prism { fill: var(--prism-fill); stroke: var(--brass); stroke-width: 1.5; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.plan .beam-in { stroke: var(--ink); stroke-width: 1.5; opacity: .85; vector-effect: non-scaling-stroke; }
/* Only light and glass move. The surveyed wings and every link remain stationary. */
.plan .optics { pointer-events: none; transform-origin: 360px 270px; transform: translate(var(--prism-x, 0px), var(--prism-y, 0px)) rotate(var(--prism-turn, 0deg)); transition: transform 220ms var(--ease); }
.plan .refraction { transform-origin: 388px 270px; transform: rotate(var(--fan-turn, 0deg)) scaleY(var(--fan-spread, 1)); transition: transform 280ms var(--ease); }
.plan .prism-halo { opacity: var(--prism-light, .45); transition: opacity 220ms var(--ease); }
.plan .prism-facet { fill: var(--ai-ink); opacity: .18; }
.plan .prism { fill: color-mix(in srgb, var(--ai-ink) 10%, transparent); }
.plan .refraction-edge { stroke: var(--brass); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: reduce) {
  .plan .optics, .plan .refraction { transform: none; }
  .plan .prism-halo { opacity: .45; }
}

.plan .beacon { stroke: var(--beacon); stroke-width: 1; opacity: .7; vector-effect: non-scaling-stroke; }
.plan .inlay { stroke-width: 2; vector-effect: non-scaling-stroke; }
.plan .room-fill { fill: var(--surface); opacity: 0; transition: opacity .25s; }
.plan .room-name { font-family: var(--display); font-size: 18px; fill: var(--ink); font-weight: 400; letter-spacing: .01em; }
.plan .room-lead { font-size: 16px; fill: var(--ink-2); font-weight: 400; }
.plan .wing { cursor: pointer; outline: none; }
.plan .wing:hover .room-fill, .plan .wing:focus-visible .room-fill { opacity: 1; }
.plan .wing:hover .room, .plan .wing:focus-visible .room { stroke: var(--ink); stroke-width: 1.5; }
.plan .wing:focus-visible .room { stroke: var(--brass); stroke-width: 3; }
.plan .wing:hover .room-name { fill: var(--brass-ink); }
/* One lantern. At rest it pools in the rotunda; on a wing it widens to light the room. */
.lantern { position: absolute; left: var(--lx, 50%); top: var(--ly, 50%); width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: var(--lo, .55);
  background: radial-gradient(closest-side, var(--glow), transparent var(--glow-stop, 72%)); mix-blend-mode: var(--glow-blend); transition: left .45s var(--ease), top .45s var(--ease), width .45s var(--ease), opacity .45s; }
.plan:has(.wing:hover, .wing:focus-visible) .lantern { width: 42%; }
.plan figcaption { margin-top: 10px; font-size: var(--t-sm); color: var(--ink-3); font-style: italic; }
/* The caption hangs below the drawing, so the figure is the drawing and the lantern's 50% is the rotunda. */
@media (min-width: 901px) { .plan { margin-bottom: 40px; } .plan figcaption { position: absolute; top: 100%; left: 0; right: 0; } }
.wing-list { display: none; list-style: none; padding: 0; margin: 12px 0 0; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-style: normal; }
.wing-list a { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--hair); }
.wing-list i { width: 14px; height: 3px; background: var(--h); border-radius: var(--radius); flex: none; }
.wing-list small { margin-left: auto; color: var(--ink-3); font-size: .82rem; font-style: italic; text-align: right; }
/* drawing: the plan assembles once per session. The finished state is the default; .draw animates from undrawn. */
.plan.draw [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .9s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 1s); }
.plan.draw .g-court [pathLength] { --d: 0; }
.plan.draw .g-rotunda [pathLength] { --d: .35; }
.plan.draw .wing [pathLength] { --d: calc(.6 + var(--i, 0) * .09); }
.plan.draw .prism, .plan.draw .pier { animation: draw .9s var(--ease) .35s forwards, fill-in .5s var(--ease) 1.1s both; }   /* the inlay fills once its edge is drawn */
.plan.draw text { opacity: 0; animation: appear .4s .9s forwards; }
.plan.draw .wing text { animation-delay: calc(1.3s + var(--i, 0) * .09s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@keyframes fill-in { from { fill-opacity: 0; } }

@media (max-width: 900px) {
  .entrance .wrap { grid-template-columns: 1fr; gap: 28px; }
  .entrance .plan { max-width: none; }
  .plan svg { display: none; }
  .wing-list { display: grid; }
  .lantern { display: none; }
}
@media (max-width: 600px) {
  .entrance .wrap { padding-block: 28px; }
}

/* ── chips (filters) and the wand brackets ───────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; font: 400 var(--t-sm)/1 var(--serif); color: var(--ink); padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--rule); background: transparent; min-height: 44px; }
.chip i { width: 14px; height: 3px; border-radius: var(--radius); background: var(--h); flex: none; }
.chip small { font-size: .7rem; color: var(--ink-3); letter-spacing: .04em; }
.chip:hover { background: var(--surface); }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--surface); }
/* four corner ticks snap onto the thing in hand: from Bayzyl's selection corners and Helm's bracket ticks */
.bracket { position: relative; }
.bracket::before, .bracket::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .16s, inset .16s var(--ease);
  --c: var(--brass); background:
    linear-gradient(var(--c), var(--c)) top left / 12px 1.5px no-repeat, linear-gradient(var(--c), var(--c)) top left / 1.5px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 12px 1.5px no-repeat, linear-gradient(var(--c), var(--c)) top right / 1.5px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 12px 1.5px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1.5px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 12px 1.5px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1.5px 12px no-repeat; inset: -10px; }
.bracket::after { display: none; }
.bracket:hover::before, .bracket:focus-within::before { opacity: 1; inset: -4px; }

/* ── sections ─────────────────────────────────────────────────────────────────────────────── */
section { padding-block: clamp(40px, 6vw, 80px); }
#work { background: var(--surface); border-block: 1px solid var(--hair); }
.count { font-family: var(--mono); font-stretch: 87.5%; text-transform: uppercase; font-variant-numeric: tabular-nums; font-weight: 600; font-size: .72rem; letter-spacing: .1em; color: var(--ink-3); }

/* principal works: four doors, one family. Each module sits on its room's material inside a 16:10 frame, inset by one
   margin (5% of the door's width) with one gutter (3%); below it, typeline, title, subtitle, facts and access share
   rows across each pair of doors, so the two columns keep one rhythm whatever the copy. */
.doors { --door-gap: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 48px); margin-bottom: calc(-1 * var(--door-gap)); }
.door { display: grid; grid-template-rows: auto 1fr; align-content: start; padding-bottom: var(--door-gap); }
@supports (grid-template-rows: subgrid) {
  .door { grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  .door-text { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0; }
}
.door-media { display: block; text-decoration: none; border: 1px solid var(--hair); background: var(--surface); overflow: hidden; position: relative; aspect-ratio: 16 / 10; container-type: inline-size; }
.door-media:hover { border-color: var(--rule); }
.door-media .mod { position: absolute; inset: 0; margin: 0; padding: 5%; padding: 5cqw; }
.door-text > * { align-self: start; }
.door-text .typeline { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--hi); }
.door-text .typeline i { width: 18px; height: 3px; background: var(--h); border-radius: var(--radius); }
.door-text h3 { margin-top: 6px; font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem); }
.door-text h3 a { text-decoration: none; }
.door-text h3 a:hover { color: var(--brass-ink); }
.door-text .sub { margin-top: 8px; color: var(--ink-2); font-size: var(--t-base); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.door-text .facts { margin-top: 16px; align-self: stretch; }
.door-text .access { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
@media (max-width: 760px) { .doors { grid-template-columns: 1fr; } }

/* ── project portfolios: an exhibition of complete interfaces ─────────────────────────── */
#selected.home-section { padding-top: 24px; }
#selected .sec-head { margin-bottom: 12px; }
#selected .project-chapter:first-child { padding-top: 8px; }
.doors.portfolio-chapters { display: block; margin: 0; }
.project-chapter { min-width: 0; padding-block: 28px 54px; border-bottom: 1px solid var(--rule); }
.project-chapter + .project-chapter { padding-top: 48px; }
.project-chapter:last-child { padding-bottom: 0; border-bottom: 0; }
.chapter-heading { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px 24px; align-items: start; margin-bottom: 22px; }
.chapter-number { font: 400 2.2rem/1 var(--display); color: var(--brass-ink); padding-top: 4px; }
.chapter-name .typeline { color: var(--hi); font-size: var(--t-sm); margin-bottom: 8px; }
.chapter-name h3 { font-size: clamp(2rem, 3.2vw, 3.2rem); line-height: 1.05; }
.chapter-name h3 a { text-decoration: none; }
.chapter-name h3 a:hover { color: var(--brass-ink); }
.chapter-stack { margin-top: 14px; font: 400 .7rem/1.8 var(--mono); color: var(--ink-3); }
.hero-freelance { align-self: center; font-size: var(--t-sm); }
.chapter-description > p { color: var(--ink-2); max-width: 36rem; }
.chapter-description .access { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 12px; }
.chapter-fallback { display: block; max-width: 720px; }
.portfolio-gallery { min-width: 0; }
.gallery-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; margin-bottom: 10px; }
.gallery-topline > p { color: var(--ink-3); font-size: var(--t-sm); }
.gallery-controls { display: none; align-items: center; gap: 12px; flex: none; }
.portfolio-gallery.is-ready .gallery-controls { display: flex; }
.gallery-controls output, .viewer-controls output { font: 400 .75rem/1.4 var(--mono); color: var(--ink-2); min-width: 5.5em; text-align: center; }
.gallery-arrow { width: 44px; justify-content: center; font-size: 1.25rem; padding: 8px; }
.gallery-arrow:disabled { opacity: .35; cursor: default; }
.gallery-arrow:disabled:hover { background: transparent; border-color: var(--rule); }
.gallery-track { display: flex; align-items: start; gap: clamp(14px, 2vw, 28px); margin: 0; padding: 4px 4px 18px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 4px; scrollbar-width: thin; scrollbar-color: var(--brass) var(--surface); }
.gallery-slide { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; }
.gallery-slide.portrait { flex-basis: clamp(210px, 28%, 300px); }
.gallery-slide figure { margin: 0; }
.gallery-image { display: flex; align-items: center; justify-content: center; position: relative; height: clamp(280px, 43vw, 520px); background: color-mix(in srgb, var(--surface) 82%, var(--ground)); border: 1px solid var(--rule); text-decoration: none; overflow: hidden; }
.gallery-image img { width: 100%; height: 100%; object-fit: contain; }
.gallery-image:hover, .gallery-image:focus-visible { border-color: var(--brass); }
.gallery-expand { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 32px; height: 32px; color: var(--ink); background: var(--ground); border: 1px solid var(--rule); }
.gallery-slide figcaption { display: flex; align-items: baseline; gap: 14px; padding-top: 12px; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.45; }
.gallery-evidence { display: block; margin-top: 5px; font: 400 .63rem/1.5 var(--mono); color: var(--brass-ink); }
.gallery-image-number { flex: none; color: var(--brass-ink); font: 400 .72rem/1.4 var(--mono); }
.project-portfolio { padding-top: 20px; padding-bottom: 32px; }
.image-viewer { width: calc(100vw - 40px); max-width: 1600px; height: min(1100px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); margin: auto; padding: 20px; border: 1px solid var(--rule); border-radius: 4px; background: var(--ground); color: var(--ink); box-shadow: var(--shadow); }
.image-viewer::backdrop { background: rgb(5 9 14 / .9); }
.image-viewer[open] { display: flex; flex-direction: column; gap: 16px; }
.viewer-head { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.viewer-head h2 { font-size: var(--t-lg); }
.viewer-head .btn { flex: none; }
.viewer-stage { position: relative; min-height: 80px; flex: 1; background: var(--surface); }
.viewer-stage img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.viewer-foot { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; }
.viewer-foot > p { white-space: pre-line; }
.viewer-foot > p, .viewer-status { color: var(--ink-2); font-size: var(--t-sm); }
.viewer-controls { display: flex; align-items: center; gap: 10px; }
.viewer-controls .link { margin-left: 10px; }
html:has(.image-viewer[open]) { overflow: hidden; }
@media (max-width: 760px) {
  .chapter-heading { grid-template-columns: 36px minmax(0, 1fr); gap: 12px 16px; }
  .chapter-number { font-size: 1.7rem; }
  .chapter-description { grid-column: 2; }
  .project-chapter + .project-chapter { padding-top: 36px; }
  .gallery-topline { flex-wrap: wrap; }
  .gallery-controls { margin-left: auto; }
  .gallery-slide { flex-basis: 90%; }
  .gallery-slide.portrait { flex-basis: 72%; }
  .gallery-image { height: clamp(240px, 64vw, 420px); }
  .gallery-slide.portrait .gallery-image { height: clamp(340px, 110vw, 510px); }
  .image-viewer { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); padding: 12px; }
  .viewer-head { align-items: start; }
  .viewer-head h2 { font-size: 1.1rem; }
  .viewer-head .btn { max-width: 140px; line-height: 1.3; }
  .viewer-foot { grid-template-columns: 1fr; gap: 10px; }
  .viewer-controls { justify-content: space-between; flex-wrap: wrap; }
  .viewer-controls .link { margin: 0; }
}

/* door modules */
.bench-door { background: #2A2C2E; display: flex; flex-direction: column; gap: 2.5cqw; }
.bench-door img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: cover; object-position: center 58%; }
.bench-door figcaption { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; color: #FFAA00; font-family: var(--mono); font-stretch: 87.5%; font-size: .78rem; line-height: 1.25; }
.bench-door figcaption span { color: #E6E1D4; font-family: var(--serif); font-style: italic; font-size: .92rem; font-stretch: normal; }
.tile-mosaic { background: #0B0C14; display: grid; grid-template-columns: repeat(3, 24.75cqw); grid-auto-rows: 24.75cqw; gap: 3cqw; justify-content: center; align-content: center; }
.tile-mosaic img { width: 100%; height: 100%; border-radius: 18%; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.face-quad { background: #1C0006; display: flex; flex-direction: column; justify-content: center; gap: 3cqw; }
.face-row { display: grid; gap: 3cqw; }      /* columns are set per row, in proportion to each face */
.face-row img { width: 100%; height: auto; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.plate-door { display: flex; align-items: center; justify-content: center; }
.plate-door img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
[data-room="notebook"] .plate-door { background: #17212B; }   /* a detail of the A/B panel, cut at the panel's own top-left corner */

/* facts: the ledger table */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 0; }
.facts div { padding: 10px 12px 10px 0; min-width: 0; border-right: 1px solid var(--hair); margin-right: 12px; }
.facts div:last-child { border-right: 0; }
.facts dt { font-size: .86rem; color: var(--ink-3); }
.facts dd { margin: 4px 0 0; font: 400 var(--t-sm)/1.35 var(--serif); font-variant-numeric: tabular-nums; }
.facts.small { grid-template-columns: 1fr 1fr; }

/* ── the register: a ruled ledger ─────────────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.filters .chip { padding-inline: 11px; }            /* the seven chips fit one line in the 1128px column at 1440 and up */
.ledger { border-top: 3px solid var(--rule); }
.ledger-head, .row { display: grid; grid-template-columns: 10px 96px minmax(0, 2.6fr) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, .9fr); gap: 16px; align-items: center; }
.ledger-head { padding: 10px 0; font-size: .86rem; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.ledger-group h3 { font-size: 1rem; color: var(--ink-3); padding: 18px 0 6px; }
.row { position: relative; padding: 10px 0; border-bottom: 1px solid var(--hair); min-height: 64px; }
.row:hover, .row:focus-within { background: color-mix(in srgb, var(--raised) 70%, transparent); }
.row-tick { width: 4px; height: 36px; background: var(--h); border-radius: var(--radius); justify-self: start; }
.row-thumb { width: 96px; height: 60px; object-fit: cover; object-position: top; border: 1px solid var(--hair); background: var(--raised); }
.row-thumb.blank { display: block; background: repeating-linear-gradient(135deg, transparent 0 6px, var(--hair) 6px 7px); }
.row-record { min-width: 0; }
.row-record em { display: block; font-style: normal; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.35; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.row-link { font-family: var(--display); font-weight: 400; font-size: 1rem; text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }                         /* the whole row opens the record */
.row-link:hover { color: var(--brass-ink); }
.row-wing { font-size: var(--t-sm); color: var(--hi); }
.row-status { font-size: var(--t-sm); color: var(--ink-2); }
.row-stack { font-size: .72rem; color: var(--ink-3); letter-spacing: .02em; line-height: 1.4; }
.row-access { display: flex; flex-wrap: wrap; gap: 4px 12px; position: relative; z-index: 1; font-size: var(--t-sm); }
.row-access a { text-decoration: none; border-bottom: 1px solid var(--rule); min-height: 32px; display: inline-flex; align-items: center; position: relative; }
.row-access a::before { content: ""; position: absolute; inset: -7px min(-4px, calc((100% - 46px) / 2)); }   /* ≥44×44 hit area; the underline stays where it was */
.row-access a:hover { border-color: var(--brass); color: var(--brass-ink); }
.row[hidden] { display: none; }
.ledger-group[hidden] { display: none; }
.drafting { padding: 18px 0 0; color: var(--ink-3); font-style: italic; font-size: var(--t-sm); }
.drafting span { font-style: normal; color: var(--ink-2); }
@media (min-width: 901px) {
  #work .ledger-head, #work .row { grid-template-columns: 10px 72px minmax(0, 2.6fr) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, .9fr); }
  #work .row { padding-block: 8px; }
  #work .row-thumb { width: 72px; height: 48px; }
  #work .row-record em { display: block; white-space: nowrap; }
}
@media (max-width: 900px) {
  .ledger-head { display: none; }
  .row { grid-template-columns: 10px 72px minmax(0, 1fr) auto; grid-template-areas: "tick thumb record record" "tick thumb status access"; gap: 4px 14px; align-items: start; padding: 12px 0; }
  .row-tick { grid-area: tick; height: 100%; }
  .row-thumb { grid-area: thumb; width: 72px; height: 48px; }
  .row-record { grid-area: record; }
  .row-wing, .row-stack { display: none; }
  .row-status { grid-area: status; align-self: center; }
  .row-access { grid-area: access; justify-self: end; align-self: center; }
}
/* under 700px the wing chips take their short names (projects.json beams[].short); on phones they pair up under a
   full-width "All" instead of one ragged chip per line. display:none swaps the label, so a chip's name is what it shows. */
.chip .short { display: none; }
@media (max-width: 699px) {
  .filters .chip .long { display: none; }
  .filters .chip .short { display: inline; }
}
@media (max-width: 520px) {
  .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .filters .chip { padding-inline: 12px; }
  .filters .chip small { margin-left: auto; }
  .filters .chip[data-filter="all"] { grid-column: 1 / -1; }
}

/* discovery: the seek line, the match Enter opens, threads. All of it needs JS, so without JS none of it shows. */
.seek { display: none; }
.js .seek { display: grid; grid-template-columns: 122px minmax(0, 26rem) minmax(0, 1fr); gap: 8px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--bar) + 16px); }
.seek label { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-stretch: 87.5%; text-transform: uppercase; font-size: .72rem; font-weight: 600; letter-spacing: .06em; font-weight: 500; font-variation-settings: 'opsz' 20; font-size: .95rem; color: var(--ink-2); }
.seek-field { position: relative; display: block; }
.seek input { display: block; width: 100%; min-height: 44px; margin: 0; padding: 9px 44px 9px 12px; font: 400 var(--t-base)/1.3 var(--serif); color: var(--ink); background: var(--ground); border: 1px solid var(--rule); border-radius: var(--radius); -webkit-appearance: none; appearance: none; }
.seek input::placeholder { color: var(--ink-3); font-style: italic; opacity: 1; }
.seek input:hover { border-color: var(--ink-3); }
.seek input:focus { border-color: var(--brass); }
.seek input::-webkit-search-cancel-button { cursor: pointer; }
.seek kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); min-width: 22px; padding: 3px 6px; text-align: center; font: 500 .75rem/1 var(--mono); color: var(--ink-3); border: 1px solid var(--rule); border-radius: var(--radius); pointer-events: none; }
.seek input:focus + kbd, .seek input:not(:placeholder-shown) + kbd { visibility: hidden; }
.seek-hint { font-size: var(--t-sm); font-style: italic; color: var(--ink-3); }
.seek-none { padding: 18px 0 0; color: var(--ink-2); font-style: italic; }
@media (hover: none), (pointer: coarse) { .seek kbd { display: none; } .seek input { padding-right: 12px; } }
@media (max-width: 900px) { .js .seek { grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; } }
@media (max-width: 900px), (hover: none) { .seek-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.row.is-top { background: color-mix(in srgb, var(--raised) 70%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass) 60%, transparent); }
/* threads: the ticks of a held row's related records take a brass ring (box-shadow, so nothing moves) */
.row-tick { transition: box-shadow .16s var(--ease); }
.row.is-thread .row-tick { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--brass); }

/* the Wordgame note on the Prismet page: with JS the tile is a button and the note takes the row under the tile's row */
.tiles { grid-auto-flow: dense; }
.tiles .tile-note { grid-column: 1 / -1; text-align: left; font-size: var(--t-sm); font-style: italic; color: var(--ink-2); padding: 10px 14px; border-left: 2px solid var(--live); background: var(--surface); }
.tiles .tile-note code { font-style: normal; color: var(--ink); overflow-wrap: anywhere; }
.js .tiles .tile-note:not(.is-open) { display: none; }
.tile-btn { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; border-radius: 4px; -webkit-tap-highlight-color: transparent; }
.tile-btn:hover span, .tile-btn[aria-expanded="true"] span { color: var(--brass-ink); }
.tile-btn small::after { content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.2em) rotate(45deg); transition: transform .16s var(--ease); }
.tile-btn[aria-expanded="true"] small::after { transform: translateY(.05em) rotate(-135deg); }

/* ── the plate ────────────────────────────────────────────────────────────────────────────── */
#plate { padding-block: clamp(20px, 3vw, 40px); }
.plate { margin: 0 auto; max-width: 860px; }
.plate img { width: 100%; height: auto; border: 1px solid var(--hair); }
.plate figcaption { margin-top: 10px; font-style: italic; color: var(--ink-2); font-size: var(--t-sm); display: flex; gap: 12px; }
.plate figcaption::before { content: "Plate"; font-size: .9rem; color: var(--ink-3); align-self: center; }
.plate figcaption i { width: 14px; height: 3px; background: var(--h); border-radius: var(--radius); align-self: center; flex: none; }
.plate figcaption a { color: var(--hi); text-decoration: none; border-bottom: 1px solid var(--rule); white-space: nowrap; }

/* ── lenses: live instruments ─────────────────────────────────────────────────────────────── */
.lenses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.lens { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; padding: 18px 0; text-decoration: none; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.lens img { width: 64px; height: 64px; border-radius: 14px; }
.lens h3 { font-style: normal; font-weight: 400; margin-top: 8px; }
.lens h3::after { content: " →"; color: var(--brass-ink); white-space: nowrap; }
.lens:hover, .lens:focus-visible { border-color: var(--brass); }
.lens:hover h3, .lens:focus-visible h3 { color: var(--brass-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lens p { margin-top: 6px; color: var(--ink-2); font-size: var(--t-sm); }

/* ── about + hire: the keeper's desk ──────────────────────────────────────────────────────── */
.about { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); }
.about-text .prose { margin-top: 20px; color: var(--ink-2); font-size: var(--t-md); line-height: 1.55; max-width: 38rem; font-variation-settings: 'opsz' 20; }
.about .prose p + p { margin-top: 14px; }
.about .prose strong { color: var(--ink); font-weight: 400; }
.skills-title { margin-top: 36px; font-size: 1rem; color: var(--ink-3); }
.skills { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 16px; border-top: 1px solid var(--rule); }
.skills li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; padding: 0; border-bottom: 1px solid var(--hair); font-size: var(--t-sm); }
.skills a { text-decoration: none; font-weight: 400; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; flex: none; }
.skills a:hover { color: var(--brass-ink); }
.skills small { color: var(--ink-3); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hire { border-top: 3px solid var(--rule); padding-top: 22px; position: relative; }
.hire::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; border-top: 1px solid var(--rule); }
.hire h3 { font-size: var(--t-lg); }
.hire-list { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; gap: 8px; }
.hire-list li { display: flex; gap: 12px; align-items: baseline; font-weight: 400; }
.hire-list i { width: 14px; height: 3px; border-radius: var(--radius); background: var(--h); flex: none; transform: translateY(-3px); }
.hire-list small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--t-sm); }
.hire h4 { font-size: 1rem; color: var(--ink-3); }
.doors-list { list-style: none; padding: 0; margin: 8px 0 20px; border-top: 1px solid var(--rule); }
.doors-list a { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); text-decoration: none; min-height: 48px; }
.doors-list a:hover strong { color: var(--brass-ink); }
.doors-list strong { font-weight: 400; min-width: 5.5em; }
.doors-list span { color: var(--ink-2); font-size: var(--t-sm); }
.doors-list .ext { margin-left: auto; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

footer { border-top: 1px solid var(--hair); padding-block: 28px 44px; color: var(--ink-3); font-family: var(--serif); font-size: .84rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
footer a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; position: relative; }
footer a::before { content: ""; position: absolute; inset: 0 min(0px, calc((100% - 46px) / 2)); }   /* ≥44px wide hit area for short words */
footer a:hover { color: var(--ink); }

/* ── project page: one skeleton ───────────────────────────────────────────────────────────── */
.p-head { padding-block: clamp(28px, 5vw, 64px) 28px; }
.crumbs { font-size: .95rem; color: var(--ink-3); display: flex; gap: 8px; }
.crumbs a { text-decoration: none; color: var(--ink-2); position: relative; }
.crumbs a::before { content: ""; position: absolute; inset: -11px -4px; }   /* 44px hit area without moving the line */
.crumbs a:hover { color: var(--brass-ink); }
.p-head h1 { margin-top: 18px; }
.p-head .sub { margin-top: 14px; font-size: var(--t-md); color: var(--ink-2); max-width: 42rem; font-variation-settings: 'opsz' 20; }
.p-head .row { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.frontispiece { margin: 0; }
.frontispiece.icon img { max-width: 320px; border: 0; background: none; }
.frontispiece img { width: 100%; height: auto; max-height: 72vh; object-fit: contain; object-position: left top; border: 1px solid var(--hair); background: var(--surface); }
.p-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 5vw, 64px); padding-block: 36px 24px; }
.p-body .prose { font-size: var(--t-md); line-height: 1.6; color: var(--ink-2); max-width: 40rem; font-variation-settings: 'opsz' 20; }
.p-body h2 { font-size: 1rem; color: var(--ink-3); margin: 28px 0 10px; }
.p-body .summary p + p { margin-top: 14px; }
.p-body ul.hl { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; font-size: var(--t-base); }
.p-body ul.hl li { padding-left: 24px; position: relative; color: var(--ink-2); }
.p-body ul.hl li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--h); }
.p-body aside { display: grid; gap: 18px; align-content: start; }
.stack { display: flex; flex-wrap: wrap; gap: 6px; }
.stack span { font-family: var(--mono); font-stretch: 87.5%; font-size: .72rem; padding: 6px 8px; border: 1px solid var(--hair); color: var(--ink-2); border-radius: var(--radius); }
.threads h2 { margin: 6px 0 4px; }
.threads ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.threads a { display: grid; grid-template-columns: 14px 1fr; gap: 4px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hair); text-decoration: none; }
.threads i { width: 14px; height: 3px; background: var(--h); border-radius: var(--radius); }
.threads small { grid-column: 2; color: var(--ink-3); font-style: italic; font-size: var(--t-sm); }
.threads a:hover { color: var(--brass-ink); }
.todo { border: 1px dashed var(--rule); padding: 16px; color: var(--ink-2); font-family: var(--mono); font-size: var(--t-sm); }
.plates { padding-block: 12px 40px; }
.plates h2 { font-size: 1rem; color: var(--ink-3); border-top: 1px solid var(--rule); padding-top: 14px; margin-bottom: 18px; }
.plate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 24px 20px; grid-auto-flow: dense; }
.plate-grid figure { margin: 0; min-width: 0; }
.plate-grid figure.wide { grid-column: 1 / -1; }
.plate-grid figure.tall { max-width: 300px; }
.plate-grid img { width: 100%; height: auto; border: 1px solid var(--hair); background: var(--surface); }
.plate-grid figcaption { margin-top: 8px; font-size: var(--t-sm); font-style: italic; color: var(--ink-2); line-height: 1.4; }
.next { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; border-top: 1px solid var(--rule); padding-block: 24px 40px; }
.next a { text-decoration: none; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
.next small { font-size: .9rem; color: var(--ink-3); margin-bottom: 6px; }
.next strong { font-weight: 400; font-size: var(--t-base); }
.next a:hover strong { color: var(--brass-ink); }
.next .back { font-style: italic; color: var(--ink-2); text-align: center; }
@media (max-width: 860px) { .p-body { grid-template-columns: 1fr; } .next { grid-template-columns: 1fr 1fr; } .next .back { grid-column: 1 / -1; order: 3; } }
@media (max-width: 600px) { .plate-grid { grid-template-columns: 1fr 1fr; gap: 18px 12px; } .plate-grid figure:not(.tall) { grid-column: 1 / -1; } .plate-grid figure.tall { max-width: none; } .plate-grid figure.tall figcaption { font-size: .8rem; } }
.withdrawn, .colophon { padding-block: clamp(36px, 6vw, 80px); min-height: 50vh; }
.withdrawn p, .colophon .prose { margin-top: 18px; color: var(--ink-2); font-size: var(--t-md); max-width: 40rem; }
.colophon .prose p + p { margin-top: 14px; }
.colophon .facts { margin-top: 28px; max-width: 40rem; }
.colophon .btn { margin-top: 28px; }

/* signature sections share a head */
.sig { padding-block: 8px 24px; }
.sig-head { border-top: 1px solid var(--rule); padding-top: 14px; margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.sig-head h2 { font-size: 1rem; color: var(--ink-3); }
.sig-head p { color: var(--ink-2); font-size: var(--t-sm); font-style: italic; }

/* ── rooms: the material of each page ─────────────────────────────────────────────────────── */
[data-room="bench"] .sig { background: #2A2C2E; color: #E6E1D4; --brass: #C9A260; --live: #9C8BD6; --ink: #E6E1D4; --ground: #2A2C2E; --surface: #343639; --ink-2: #C8C3B6; --ink-3: #9A958A; --rule: rgba(230, 225, 212, .22); --hair: rgba(230, 225, 212, .1); --brass-ink: #E0BC6E; }
[data-room="bench"] .sig { padding-block: 28px 32px; }
[data-room] .sig { color-scheme: dark; }   /* every band stays dark in day mode, so native controls and scrollbars do too */
.stepper { display: grid; gap: 14px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; max-width: 820px; }
.js .step { grid-area: 1 / 1; }
.js .step:not([aria-current]) { display: none; }
.step img { width: 100%; height: auto; border: 1px solid var(--hair); }
.step-cmd { margin-top: 12px; font-family: var(--mono); font-stretch: 87.5%; font-size: .9rem; color: #FFAA00; overflow-wrap: anywhere; }
.step-cmd code { font-size: inherit; }
.step-title { margin-top: 6px; color: var(--ink-2); font-style: italic; }
.step-n { font-style: normal; color: var(--ink-3); font-size: .72rem; margin-right: 8px; }
.step-nav { display: none; align-items: center; gap: 12px; }
.js .step-nav { display: flex; }
.step-nav output { font-family: var(--mono); font-stretch: 87.5%; font-size: .74rem; letter-spacing: .06em; color: var(--ink-2); min-width: 7em; text-align: center; }
.step-nav .btn { width: 44px; padding: 0; justify-content: center; }
.js .steps { transition: none; }
/* the bench: the stepper, and beside it the tower drawn in elevation from its command (chalk on stone) */
.bench-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) { .bench-grid { grid-template-columns: minmax(0, 820px) minmax(200px, 232px); justify-content: space-between; } }
.elevation { margin: 0; display: grid; grid-template-columns: min(40%, 200px) minmax(0, 340px); gap: 20px; align-items: end; }
@media (min-width: 1000px) { .elevation { display: block; } }
.elevation svg { width: 100%; height: auto; overflow: visible; font-family: var(--mono); font-stretch: 87.5%; }
.elevation .line, .elevation .fine, .elevation .ground, .elevation .dim, .elevation .axis { fill: none; stroke: var(--ink); vector-effect: non-scaling-stroke; }
.elevation .line { stroke-width: 1.25; stroke-opacity: .92; stroke-linejoin: miter; }
.elevation .ground { stroke-width: 1.5; }
.elevation .fine { stroke-width: 1; stroke-opacity: .38; }
.elevation .dim { stroke: var(--ink-3); stroke-width: 1; }
.elevation .axis { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 14 3 2 3; vector-effect: none; }
.elevation text { font-size: 13px; font-weight: 400; fill: var(--ink-2); dominant-baseline: central; }
@media (max-width: 999px) { .elevation text { font-size: 17px; } }   /* the drawing is smaller beside its caption */
.elevation figcaption { display: grid; gap: 6px; justify-items: start; }
@media (min-width: 1000px) { .elevation figcaption { margin-top: 14px; } }
.elevation .elev-title { font-family: var(--mono); font-stretch: 87.5%; text-transform: uppercase; font-size: .72rem; font-weight: 600; letter-spacing: .06em; font-weight: 500; font-variation-settings: 'opsz' 20; font-size: .95rem; color: var(--ink-3); }
.elevation .cmd { font-size: .76rem; line-height: 1.45; color: #FFAA00; overflow-wrap: anywhere; }
.elevation .cmd b { font-weight: 400; color: var(--ink); white-space: nowrap; }   /* the numbers the drawing is dimensioned from */
.elevation small { margin-top: 2px; font-style: italic; font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); }

[data-room="arcade"] .sig { background: #0B0C14; color: #F2F4FC; --brass: #C9A260; --live: #9C8BD6; --ink: #F2F4FC; --ground: #0B0C14; --surface: #161828; --ink-2: #C3C5D4; --ink-3: #8E91A3; --rule: rgba(242, 244, 252, .2); --hair: rgba(242, 244, 252, .1); --brass-ink: #E2B65C; padding-block: 28px 36px; }
.tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 18px 14px; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 22px 14px; } }   /* 21 tiles, three full rows */
.tiles li { text-align: center; font-size: .9rem; }
.tiles img { width: 72px; height: 72px; margin: 0 auto 8px; border-radius: 17px; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); }
.tiles span { display: block; font-weight: 400; }
.tiles small { display: block; color: var(--live); font-style: italic; font-size: .78rem; }
.tiles a { text-decoration: none; display: block; }
.tiles a:hover span { color: var(--brass-ink); }

[data-room="bridge"] .sig { background: #1C0006; color: #E9DADA; --brass: #C9A260; --live: #9C8BD6; --ink: #E9DADA; --ground: #1C0006; --surface: #2A0A12; --ink-2: #D2BCBC; --ink-3: #A58C8C; --rule: rgba(233, 218, 218, .25); --hair: rgba(233, 218, 218, .1); --brass-ink: #FF4D6A; padding-block: 28px 36px; }
[data-room="bridge"] .sig-head h2 { font-family: var(--mono); font-stretch: 87.5%; font-style: normal; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #FF4D6A; }
[data-room="bridge"] .sig-head h2::after { content: " // KDE PLASMA 6"; color: var(--ink-3); }
.rack-group { margin-top: 18px; }
.rack-group h3 { font-size: .95rem; color: var(--ink-3); margin-bottom: 10px; }
.rack-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rack-row.n2 { grid-template-columns: 2fr 1fr; }
.rack-row figure { margin: 0; }
.rack-row img { width: 100%; height: auto; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
@media (max-width: 700px) { .rack-row.n2 { grid-template-columns: 1fr; } }

[data-room="museum"] .sig { background: #1B1710; color: #EADFC8; --brass: #C9A260; --live: #9C8BD6; --ink: #EADFC8; --ground: #1B1710; --surface: #26211A; --ink-2: #CFC3A8; --ink-3: #9F9480; --rule: rgba(234, 223, 200, .25); --hair: rgba(234, 223, 200, .1); --brass-ink: #F8C060; padding-block: 28px 36px; }
.eras { display: grid; gap: 14px; }
.era-stage { display: grid; aspect-ratio: 16 / 9; border: 1px solid var(--hair); overflow: hidden; max-width: 760px; }
.era-stage img { width: 100%; height: 100%; object-fit: cover; transition: clip-path .5s var(--ease), opacity .5s; }
.js .era-stage img { grid-area: 1 / 1; }
:root:not(.js) .era-stage { grid-template-columns: repeat(3, 1fr); aspect-ratio: auto; }
:root:not(.js) .era-dial { display: none; }
.era-dial { display: flex; gap: 8px; border: 0; padding: 0; margin: 0; }
.era-dial label { position: relative; }
.era-dial input { position: absolute; opacity: 0; inset: 0; }
.era-dial span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--rule); font-style: italic; cursor: pointer; }
.era-dial input:checked + span { background: #EADFC8; color: #1B1710; border-color: #EADFC8; }
.era-dial input:focus-visible + span { outline: 2px solid var(--brass-ink); outline-offset: 3px; }
@media (min-width: 1000px) {   /* the placards stand beside the stage, like labels beside an exhibit */
  .js .eras { grid-template-columns: minmax(0, 760px) auto; justify-content: start; align-items: end; column-gap: 28px; }
  .js .era-dial { flex-direction: column; }
  .js .era-dial label { display: flex; }
  .js .era-dial span { flex: 1; }
}
.js .eras:has(input[value="medieval"]:checked) .era-industrial, .js .eras:has(input[value="medieval"]:checked) .era-dyson { clip-path: inset(0 0 0 100%); }
.js .eras:has(input[value="industrial"]:checked) .era-dyson { clip-path: inset(0 0 0 100%); }
.js .eras:has(input[value="industrial"]:checked) .era-industrial { clip-path: inset(0); }
.js .eras:has(input[value="dyson"]:checked) .era-dyson, .js .eras:has(input[value="dyson"]:checked) .era-industrial { clip-path: inset(0); }
@supports not selector(:has(a)) { .era-dial { display: none; } .era-stage { display: grid; grid-template-columns: repeat(3, 1fr); aspect-ratio: auto; } .era-stage img, .js .era-stage img { grid-area: auto; } }

[data-room="notebook"] .sig { padding-block: 24px 32px; background: #17212B; color: #E6E1D4; --ground: #0F161D; --surface: #17212B; --raised: #1E2934; --ink: #E6E1D4; --ink-2: #B5BCC0; --ink-3: #8C959B; --line: #4E7090; --rule: rgba(230, 225, 212, .22); --hair: rgba(230, 225, 212, .12); --brass: #C9A260; --brass-ink: #D9B978; --live: #9C8BD6; border-block: 1px solid color-mix(in srgb, #2D5878 80%, transparent); }
.notebook-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.notebook-plate { margin: 0; }
.notebook-plate img { width: 100%; height: auto; border: 1px solid var(--hair); }
.notebook-plate figcaption { margin-top: 8px; font-size: var(--t-sm); font-style: italic; color: var(--ink-2); }
@media (max-width: 860px) { .notebook-grid { grid-template-columns: 1fr; } }
.schematic { position: relative; max-width: 760px; }
.schematic svg { width: 100%; height: auto; font-family: var(--serif); }
.schematic .node { fill: var(--surface); stroke: var(--line); stroke-width: 1.4; }
.schematic .node.hot { stroke: var(--brass); stroke-width: 2; }
.schematic .wire { fill: none; stroke: var(--line); stroke-width: 1.6; }
.schematic text { fill: var(--ink); font-size: 16px; }
.schematic text.small { font-size: 13px; }
.schematic text.muted { fill: var(--ink-3); font-style: italic; }
.schematic-note { margin-top: 10px; font-size: var(--t-sm); color: var(--ink-2); }
.schematic-note em { color: var(--ink-3); }
.schematic-labels { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 20px; font-size: var(--t-sm); color: var(--ink-2); }
.schematic-labels span { display: block; color: var(--ink); font-weight: 400; }
.schematic-labels small { display: block; font-style: italic; }

/* ── motion: everything responds to input or draws once; reduced motion shows the finished state ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms var(--ease) both leave; }
::view-transition-new(root) { animation: 240ms var(--ease) both settle; }
@keyframes leave { to { opacity: 0; transform: translateY(-6px); } }
@keyframes settle { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .plan.draw [pathLength] { stroke-dashoffset: 0; }
  .plan.draw text { opacity: 1; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* The bar's source and contact links show from 1100px; below that the contact section and footer carry them. */
.nav .wide { display: none; }
@media (min-width: 1100px) { .nav .wide { display: inline-flex; } }
/* Case notes under a flagship's summary (proposed copy; see content/site.md). */
.case h2 { margin-top: 28px; }
.case .plan-note { color: var(--ink-3); font-size: var(--t-sm); }

/* ── Sage's type preference: Marcellus for words, Martian Mono for technical data.
   Native regular weight throughout; hierarchy comes from size, space and colour. ── */
.plan figcaption, .plan .room-lead, .wing-list small, .drafting, .seek-hint, .tiles .tile-note, .plate figcaption, .threads small,
.plate-grid figcaption, .sig-head p, .elevation small, .notebook-plate figcaption, .row-record em, .skills small, .case .plan-note em,
.lens h3, .era-caption, .step-title, .bench-door figcaption span, em { font-style: normal; }
.brand span { font-family: var(--serif); font-size: .875rem; letter-spacing: .02em; color: var(--ink-3); }
.lede, .p-head .sub, .p-body .prose, .about-text .prose { font-weight: 400; }
.hire h3, .hire h4, .lens h3, .sec-head h2 { font-family: var(--display); }
.btn, .chip, .nav a:not(.btn) { font-weight: 400; }

/* ── library sections: pages and home sections made at /edit (pages/lib/sections.js) ─────── */
.x-sec { padding: clamp(40px, 7vw, 88px) 0; }
.x-page > .x-sec:first-child { padding-top: clamp(56px, 9vw, 120px); }
.x-sec h2 { font: 400 var(--t-xl)/1.1 var(--display); margin-bottom: .7em; }
.x-title { font: 400 var(--t-2xl)/1.02 var(--display); margin-top: .35em; max-width: 18ch; }
.x-sec .prose { color: var(--ink-2); font-size: var(--t-md); line-height: 1.6; max-width: 40rem; }
.x-sec .prose p + p, .x-sec .prose ul { margin-top: 14px; }
.x-sec .prose ul { padding-left: 1.2em; }
.x-split .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.x-split.flip .x-media { order: 2; }
.x-media { margin: 0; }
.x-media img, .x-gallery img { display: block; width: 100%; height: auto; border: 1px solid var(--hair); border-radius: var(--radius); }
.x-stats dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
.x-stats dt { font: 500 var(--t-xs)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-ink); }
.x-stats dd { margin: 8px 0 0; font: 400 var(--t-xl)/1 var(--display); }
.x-quote figure { margin: 0; }
.x-quote blockquote { margin: 0; max-width: 24ch; font: 400 var(--t-xl)/1.2 var(--display); }
.x-quote figcaption { margin-top: 1em; color: var(--ink-3); font: var(--t-xs)/1.3 var(--mono); }
.x-box { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: clamp(24px, 4vw, 48px); }
.x-gallery .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.x-gallery figure { margin: 0; }
.x-gallery figcaption { font: var(--t-xs)/1.3 var(--mono); color: var(--ink-3); margin-top: 6px; }
.x-divider { padding: 0; }
.x-divider hr { border: 0; border-top: 1px solid var(--rule); }
.x-spacer { padding: 0; }
@media (max-width: 760px) { .x-split .wrap { grid-template-columns: 1fr; } .x-split.flip .x-media { order: 0; } }

/* Product destinations remain discoverable on phone widths. */
.product-bar .theme { flex: none; }
.nav.product-nav a:not(.btn) { display: inline-flex; }
@media (max-width: 760px) {
  :root { --bar: 108px; }
  .product-bar .wrap { flex-wrap: wrap; gap: 0 12px; padding-top: 6px; padding-bottom: 4px; }
  .product-bar .brand { flex: 1; }
  .product-bar .brand strong { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .product-nav { order: 3; flex: 1 0 100%; justify-content: space-between; overflow-x: auto; }
  .nav.product-nav a:not(.btn) { padding: 10px 8px; font-size: .88rem; }
}

.minecraft-gallery .gallery-slide { flex-basis: 92%; }
.minecraft-gallery .gallery-image { height: auto; aspect-ratio: 1.593; background: var(--ground); }
.minecraft-gallery .sec-head h2 { margin-top: 10px; font-size: clamp(2rem,4vw,3.4rem); }

/* Portfolio story additions: scoped to case-study pages and chapter footnotes. */
.project-story { padding-top:clamp(30px,4vw,54px);padding-bottom:clamp(30px,4vw,54px);scroll-margin-top:110px; }
.project-story .story-heading { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 24px;padding-bottom:26px;border-bottom:1px solid var(--line); }
.project-story .story-heading .eyebrow { grid-column:1/-1;margin:0; }
.project-story .story-heading h2 { font-size:clamp(27px,3vw,40px);line-height:1.15;max-width:24ch;margin:0; }
.project-story .story-evidence { font-family:var(--mono);font-size:10px;line-height:1.7;color:var(--ink-2);max-width:30ch; }
.project-story .story-body { display:grid;grid-template-columns:.9fr 1.35fr 1fr;gap:clamp(22px,3vw,44px);padding-top:26px; }
.project-story .story-body h3 { font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px;color:var(--ink-2); }
.project-story .story-body h4 { font-size:20px;line-height:1.3;margin:0 0 7px; }
.project-story .story-body p { font-size:15px;line-height:1.75;margin:0; }
.project-story .story-decisions ol { list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:decision; }
.project-story .story-decisions li { position:relative;padding-left:30px;counter-increment:decision; }
.project-story .story-decisions li::before { content:counter(decision,decimal-leading-zero);position:absolute;left:0;top:4px;font-family:var(--mono);font-size:10px;color:var(--brass-ink); }
.project-story .story-outcome .link { display:inline-block;margin-top:18px; }
.project-chapter .chapter-story { display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;padding:17px 0 0; }
.project-chapter .chapter-story p { margin:0;font-size:18px;line-height:1.4; }
.project-chapter .chapter-story a { flex-shrink:0;font-size:12px; }
@media(max-width:800px) {
  .project-story .story-heading { grid-template-columns:1fr;gap:10px; }
  .project-story .story-evidence { max-width:none; }
  .project-story .story-body { grid-template-columns:1fr;gap:26px; }
  .project-story .story-body h3 { margin-bottom:9px; }
  .project-story .story-body p { max-width:65ch; }
  .project-chapter .chapter-story { align-items:flex-start;flex-direction:column;gap:7px; }
}