/* Layout: Snow White Workbench, darkened. A graphite ABS chassis with a key rail on the left,
   quiet reading panels, and dark glass displays where the color lives (hero arc, the record). */
:root {
  color-scheme: dark;
  /* enclosure */
  --env: #121310;
  --chassis: #262823;
  --chassis-lo: #1e201b;
  --panel: #2c2f29;
  --panel-lo: #252822;
  --seam: #44483e;
  --seam-dark: #0b0c09;
  --rim: #63675a;
  /* type on the enclosure */
  --ink: #ece7d8;
  --ink-2: #c3c5b4;
  --muted: #959a88;
  --faint: #7a7f6e;
  /* controls */
  --olive-hi: #64735b;
  --olive-lo: #4e5c46;
  --rust-hi: #ba7754;
  --rust-lo: #a65e41;
  --key-text: #fff4df;
  --focus: #e39a6b;
  /* glass */
  --status-glass: #172b24;
  --phosphor: #cee2b4;
  --content-glass: #090f38;
  --content-ink: #fff1da;
  --content-2: #bfc2e9;
  --vga-blue: #445dcc;
  --vga-violet: #7b53ad;
  --vga-coral: #ee9b99;
  --vga-green: #92d48d;
  --vga-gold: #ffd07f;
  /* response edges: spectrum mixed 50% with #d6d1c2 */
  --edge-orange: #c8a48b;
  --edge-1: #b2be98;
  --edge-2: #d7c696;
  --edge-3: #cdac84;
  --edge-4: #be9480;
  /* paper note for mockup annotations */
  --note-bg: #e9e6dc;
  --note-ink: #333a35;
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, "Courier New", monospace;
  --grain: url("img/grain-14bd4497.jpg");
  --key-shadow: inset 1px 2px 1px #6d7164, inset -1px -3px 2px #00000066, 0 4px 0 #0c0d0a, 0 5px 2px #00000080, 0 7px 8px #00000055;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--env); color: var(--ink-2); font: 16px/1.6 var(--sans); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.mono { font-family: var(--mono); }

.mock-banner { background: var(--note-bg); color: var(--note-ink); font: 500 12px/1.4 var(--mono); text-align: center; padding: 8px 16px; }
.mock-banner a { color: var(--note-ink); }

/* chassis */
.env { padding: 18px 16px 28px; }
.shell {
  max-width: 1320px; margin: 0 auto;
  background: linear-gradient(105deg, #2b2d28ee, #222420f2), var(--grain); background-size: auto, 420px;
  border: 1px solid #0a0b08; border-radius: 16px;
  box-shadow: inset 2px 2px 1px #55594d, inset -2px -3px 1px #0d0e0b, 0 5px 0 #080907, 0 10px 13px #0008, 0 28px 60px #0006;
  overflow: clip;
}
.masthead { display: flex; align-items: center; gap: 22px; padding: 16px 26px; border-bottom: 1px solid var(--seam-dark); box-shadow: 0 1px 0 #3d4037, inset 0 -5px 0 #1b1d18; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 700 26px/1 var(--sans); letter-spacing: -1.2px; text-shadow: 0 -1px #000; }
.brand b { font: 400 26px var(--mono); color: var(--faint); letter-spacing: -4px; padding-left: 2px; }
.chassis-label { display: flex; align-items: center; gap: 10px; font: 12px/1.5 var(--mono); letter-spacing: .5px; color: var(--muted); max-width: 210px; margin: 0; text-transform: uppercase; }
.spectrum { width: 26px; height: 9px; flex: none; background: linear-gradient(90deg, #8eaa6f 0 25%, #d8ba6b 25% 50%, #c4874a 50% 75%, #a7563e 75%); }
.vents { flex: 1; min-width: 60px; height: 30px; background: repeating-linear-gradient(0deg, #0a0b08 0 1px, #4a4e43 1px 2px, transparent 2px 6px); opacity: .8; }
.meter { display: flex; align-items: center; gap: 12px; font: 500 12px/1.5 var(--mono); color: var(--phosphor); padding: 9px 16px; background: linear-gradient(135deg, #22382b, var(--status-glass)); border: 2px solid #4b5245; border-radius: 5px; box-shadow: inset 0 2px 6px #000a, 0 1px 0 #3b3f35; text-decoration: none; }
.meter small { display: block; color: #92a88a; font-size: 12px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #b0d47c; box-shadow: 0 0 6px #a7d373; flex: none; }

.deck { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
.rail { position: sticky; top: 0; align-self: start; padding: 22px 14px 24px; border-right: 1px solid var(--seam-dark); box-shadow: 1px 0 0 #3a3d34; }
.rail-label { text-align: center; font: 12px var(--mono); letter-spacing: 1px; color: var(--faint); margin: 0 0 14px; }
.keys { display: flex; flex-direction: column; gap: 14px; }
.key { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 76px; padding: 16px 4px 8px; text-decoration: none; font: 500 12px var(--mono); color: var(--ink-2); background: linear-gradient(105deg, #3b3e36, #2e3029 70%, #292b25); border: 1px solid #0f100d; border-radius: 7px; box-shadow: var(--key-shadow); text-shadow: 0 -1px #0008; transition: transform .12s, box-shadow .12s, background .12s; }
.key svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.key .n { position: absolute; top: 5px; left: 8px; font-size: 11px; color: var(--faint); }
.key::after { content: ""; position: absolute; right: 9px; top: 9px; width: 5px; height: 4px; border-radius: 1px; background: #4d5145; box-shadow: inset 0 1px 1px #000a, 0 1px 0 #55594d; }
.key:hover { background: linear-gradient(105deg, #43463d, #33362e); transform: translateY(-1px); }
.key:active { transform: translateY(3px); box-shadow: inset 1px 2px 3px #000a, 0 1px 0 #0c0d0a; }
.key[aria-current="true"] { color: var(--key-text); background: linear-gradient(110deg, var(--rust-hi), var(--rust-lo)); border-color: #5e3826; box-shadow: inset 1px 2px 4px #5a3523aa, inset -1px -1px #deb389, 0 2px 0 #3c2618, 0 3px 2px #0008; text-shadow: 0 1px #582c1744; }
.key[aria-current="true"] .n { color: #f0d0ad; }
.key[aria-current="true"]::after { background: #edc986; box-shadow: 0 0 4px #f6cb7a99; }
.grille { height: 44px; margin: 28px 6px 22px; background: repeating-linear-gradient(0deg, #0b0c09 0 1px, #484c41 1px 2px, transparent 2px 5px); opacity: .8; }
.serial { font: 10px/1.8 var(--mono); text-align: center; color: var(--faint); }

.main { min-width: 0; padding: 26px 28px 40px; display: grid; gap: 26px; }

/* panels */
.panel { position: relative; background: linear-gradient(105deg, #30332ce6, #282a25f0), var(--grain); background-size: auto, 420px; border: 1px solid #0d0e0b; border-radius: 9px; box-shadow: inset 1px 1px 0 #4f5347, 0 2px 0 #0b0c09, 0 6px 14px #0006; padding: 26px; scroll-margin-top: 16px; }
.panel.receive { animation: receive 1.07s ease-out forwards; }
.panel.latched { box-shadow: inset 0 0 0 3px var(--edge-orange), inset 3px 3px 4px #0009, 0 2px 0 #0b0c09, 0 6px 14px #0006; }
@keyframes receive {
  0%   { box-shadow: inset 0 0 0 0 var(--edge-orange), inset 1px 1px 0 #4f5347, 0 2px 0 #0b0c09, 0 6px 14px #0006; }
  12%  { box-shadow: inset 3px 0 0 0 var(--edge-orange), inset 0 3px 0 0 var(--edge-1), 0 2px 0 #0b0c09, 0 6px 14px #0006; }
  30%  { box-shadow: inset 3px 0 0 0 var(--edge-1), inset 0 3px 0 0 var(--edge-2), inset -3px 0 0 0 var(--edge-3), 0 2px 0 #0b0c09, 0 6px 14px #0006; }
  46%  { box-shadow: inset 3px 0 0 0 var(--edge-2), inset 0 3px 0 0 var(--edge-3), inset -3px 0 0 0 var(--edge-4), inset 0 -3px 0 0 var(--edge-1), 0 2px 0 #0b0c09, 0 6px 14px #0006; }
  70%  { box-shadow: inset 3px 0 0 0 var(--edge-3), inset 0 3px 0 0 var(--edge-4), inset -3px 0 0 0 var(--edge-1), inset 0 -3px 0 0 var(--edge-2), 0 2px 0 #0b0c09, 0 6px 14px #0006; }
  100% { box-shadow: inset 0 0 0 3px var(--edge-orange), inset 3px 3px 4px #0009, 0 2px 0 #0b0c09, 0 6px 14px #0006; }
}
@media (prefers-reduced-motion: reduce) { .panel.receive { animation: none; box-shadow: inset 0 0 0 3px var(--edge-orange), 0 2px 0 #0b0c09, 0 6px 14px #0006; } }
.eyebrow { font: 500 12px/1.5 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.panel h2 { font: 500 clamp(26px, 2.6vw, 36px)/1.15 var(--sans); letter-spacing: -1.2px; color: var(--ink); margin: 0 0 12px; text-wrap: balance; }
.lede { color: var(--ink-2); font-size: 17px; line-height: 1.65; margin: 0 0 24px; max-width: 64ch; }
.sub { margin-top: 36px; }

/* glass displays */
.display { position: relative; background: var(--content-glass); border: 6px solid #12130f; border-radius: 6px; box-shadow: inset 0 0 0 1px #2c2f6a, inset 0 2px 18px #000c, 0 1px 0 #4a4e43, 0 -1px 0 #0a0b08; overflow: hidden; }
.display::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, #ffffff10, transparent 35%); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 16px; text-decoration: none; font: 500 13px/1.4 var(--mono); color: var(--ink-2); background: linear-gradient(105deg, #3b3e36, #2b2d27); border: 1px solid #0f100d; border-radius: 5px; box-shadow: var(--key-shadow); transition: transform .12s, box-shadow .12s; cursor: pointer; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(3px); box-shadow: inset 1px 2px 3px #000a, 0 1px 0 #0c0d0a; }
.btn.rust { color: var(--key-text); background: linear-gradient(105deg, #c18757, #af6f43); border-color: #5e3826; box-shadow: inset 1px 1px 0 #e7b88d, 0 4px 0 #4a2a1a, 0 6px 4px #0007; }
.btn.olive { color: #f3f1dc; background: linear-gradient(105deg, var(--olive-hi), var(--olive-lo)); border-color: #2c3526; box-shadow: inset 1px 1px 0 #a1af82, 0 4px 0 #1f2a19, 0 6px 4px #0007; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tabs button { min-height: 40px; padding: 8px 13px; font: 500 12px var(--mono); color: var(--ink-2); background: linear-gradient(#383b33, #2c2e28); border: 1px solid #0f100d; border-radius: 4px; box-shadow: inset 1px 1px #55594d, 0 3px 0 #0b0c09; cursor: pointer; }
.tabs button[aria-pressed="true"] { color: #e3ecd3; background: #4a5a43; border-color: #2b3427; box-shadow: inset 1px 2px 3px #1a2216, 0 1px #3b3f35; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.hero h1 { font: 500 clamp(40px, 5.4vw, 64px)/1 var(--sans); letter-spacing: -2.4px; color: var(--ink); margin: 6px 0 14px; }
.tagline { font: 500 13px/1.5 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--rust-hi); margin: 0 0 16px; filter: brightness(1.25); }
.bio { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; max-width: 54ch; }
.practice { font: 13px/1.6 var(--mono); color: var(--muted); margin: 0 0 22px; }
.practice a { color: var(--ink); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .display { min-height: 280px; display: grid; place-items: center; background: #010000; box-shadow: inset 0 0 0 1px #2a1d10, inset 0 2px 18px #000c, 0 1px 0 #4a4e43; }
.hero .display canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .display img { position: relative; width: 92%; max-width: 100%; mix-blend-mode: screen; }
.display-legend { position: absolute; left: 12px; bottom: 10px; font: 11px var(--mono); color: #a58f6b; letter-spacing: .6px; z-index: 2; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }
.fact { background: var(--status-glass); border: 2px solid #3b4237; border-radius: 5px; box-shadow: inset 0 2px 6px #000a; padding: 10px 12px; font: 12px/1.4 var(--mono); color: #92a88a; }
.fact b { display: block; font: 500 20px/1.2 var(--mono); color: var(--phosphor); font-variant-numeric: tabular-nums; }

/* now */
.now { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 28px; }
@media (max-width: 640px) { .now { grid-template-columns: 1fr; } }
.now ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.now li { padding-left: 18px; position: relative; color: var(--ink-2); }
.now li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: var(--rust-hi); border-radius: 1px; }
.now li a { color: var(--ink); }
.stamp { font: 12px/1.6 var(--mono); color: var(--faint); }
.draft { display: inline-block; margin-top: 8px; font: 500 11px/1.3 var(--mono); background: var(--note-bg); color: var(--note-ink); padding: 4px 7px; }

/* record display */
.rec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 12px 32px; align-items: end; margin-bottom: 16px; }
@media (max-width: 820px) { .rec-head { grid-template-columns: 1fr; } }
.rec-intro { font: 13px/1.6 var(--mono); color: var(--muted); margin: 0; }
.topics { font: 12px/1.7 var(--mono); color: var(--muted); border-left: 2px solid var(--seam); padding-left: 12px; }
.topics b { display: block; color: var(--ink-2); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }
.record { padding: 22px 20px 18px; }
.record .count { font: 12px var(--mono); color: var(--content-2); margin: 0 0 14px; opacity: .8; }
.tl { position: relative; padding-left: 74px; }
.tl::before { content: ""; position: absolute; left: 58px; top: 4px; bottom: 4px; width: 1px; background: #3a4290; }
.tl-year { position: relative; margin-bottom: 18px; }
.tl-year.empty { display: none; }
.tl-year > .y { position: absolute; left: -74px; width: 46px; text-align: right; font: 500 12px/1.7 var(--mono); color: var(--vga-coral); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.tl-year::before { content: ""; position: absolute; left: -19px; top: 8px; width: 7px; height: 7px; background: var(--vga-gold); box-shadow: 0 0 6px #ffd07f88; }
.tl-entry { font: 14px/1.55 var(--mono); color: var(--content-ink); margin-bottom: 5px; }
.tl-entry a { text-decoration: none; }
.tl-entry a:hover { color: var(--vga-gold); text-decoration: underline; }
.tl-entry .kind { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-left: 7px; padding: 1px 5px; border: 1px solid currentColor; border-radius: 2px; }
.tl-entry[data-k="talk"] .kind { color: var(--vga-gold); }
.tl-entry[data-k="article"] .kind { color: var(--vga-green); }
.tl-entry[data-k="writing"] .kind { color: var(--vga-coral); }
.tl-entry[data-k="project"] .kind { color: #9aa9ff; }
.tl-entry .loc { font-size: 12px; color: var(--content-2); margin-left: 7px; }
.tl-entry .desc { display: block; font: 13px/1.5 var(--sans); color: var(--content-2); margin: 1px 0 6px; }
@media (max-width: 520px) { .tl { padding-left: 58px; } .tl::before { left: 44px; } .tl-year > .y { left: -58px; width: 36px; } }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 11px var(--mono); color: var(--content-2); margin-top: 14px; border-top: 1px solid #252b6a; padding-top: 10px; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.card { background: var(--panel-lo); border: 1px solid #0d0e0b; border-radius: 7px; box-shadow: inset 1px 1px 0 #44483e, 0 2px 0 #0b0c09; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.card .shot { display: block; width: 100%; max-width: 100%; aspect-ratio: 16/10; object-fit: cover; border-bottom: 4px solid #12130f; background: #000; }
.card .shot.contain { object-fit: contain; background: #e9e6dc; }
.card .body { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; }
.card h3 { margin: 0; font: 600 15px/1.35 var(--sans); color: var(--ink); }
.card p { margin: 0; font-size: 14px; line-height: 1.5; }
.card .meta { font: 11px/1.5 var(--mono); color: var(--faint); }
.card .links { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 12px/1.5 var(--mono); margin-top: 4px; }
.card .links a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rust-hi); text-underline-offset: 3px; overflow-wrap: anywhere; }
.oss { display: flex; flex-wrap: wrap; gap: 8px 24px; font: 14px/1.6 var(--mono); }
.oss a { color: var(--ink-2); text-decoration: none; }
.oss a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rust-hi); }
.art { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.art figure { margin: 0; }
.art img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 4px solid #12130f; border-radius: 3px; }
.art figcaption { font: 11px var(--mono); color: var(--faint); margin-top: 4px; }

/* services */
.svc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: center; margin-bottom: 26px; }
@media (max-width: 720px) { .svc-head { grid-template-columns: 1fr; } }
.svc-head .statement { font: 500 clamp(20px, 2.2vw, 26px)/1.3 var(--sans); letter-spacing: -.6px; color: var(--ink); margin: 0 0 8px; }
.svc-head .note { font: 13px/1.6 var(--mono); color: var(--muted); margin: 0; max-width: 60ch; }
.items { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.item { background: var(--panel-lo); border: 1px solid #0d0e0b; border-radius: 6px; box-shadow: inset 1px 1px 0 #44483e; padding: 16px 18px; }
.item h3 { margin: 0 0 6px; font: 500 12.5px/1.4 var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink); display: flex; gap: 8px; align-items: center; }
.item h3::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--olive-hi); box-shadow: inset 0 1px 0 #a1af82; }
.item p { margin: 0; font-size: 15px; line-height: 1.6; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font: 13px var(--mono); color: var(--ink-2); padding: 7px 11px; border: 1px solid #0f100d; border-radius: 4px; background: #2e3029; box-shadow: inset 1px 1px #4a4e43; }

/* contact */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.contact h3 { font: 600 20px var(--sans); color: var(--ink); margin: 0 0 14px; }
.rows { display: grid; gap: 10px; margin-bottom: 18px; }
.row { display: flex; gap: 14px; align-items: flex-start; background: var(--panel-lo); border: 1px solid #0d0e0b; border-radius: 6px; box-shadow: inset 1px 1px 0 #44483e; padding: 12px 14px; }
.row .ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 5px; background: linear-gradient(105deg, var(--olive-hi), var(--olive-lo)); color: #f3f1dc; box-shadow: inset 1px 1px 0 #a1af82, 0 2px 0 #1f2a19; }
.row .ic svg { width: 19px; height: 19px; }
.row .lbl { font: 12px var(--mono); color: var(--muted); }
.row .val { color: var(--ink); font-weight: 500; text-decoration: none; user-select: all; }
.row .s2 { font-size: 13px; color: var(--muted); }
.expect { background: var(--status-glass); border: 2px solid #3b4237; border-radius: 6px; box-shadow: inset 0 2px 6px #000a; padding: 16px 18px; }
.expect b { display: block; font: 500 12px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--phosphor); margin-bottom: 6px; }
.expect p { margin: 0; color: #c2d4ad; font-size: 14px; line-height: 1.65; }
.elsewhere { margin-top: 18px; font: 13px/1.9 var(--mono); }
.elsewhere b { display: block; font-weight: 500; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; font-size: 12px; }
.elsewhere a { color: var(--ink-2); }
form.msg { display: grid; gap: 12px; }
form.msg label { display: block; font: 12px var(--mono); color: var(--ink-2); margin-bottom: 5px; }
form.msg label span { color: var(--faint); }
form.msg input, form.msg textarea { width: 100%; font: 15px var(--sans); color: var(--ink); background: #1b1d18; border: 1px solid #0b0c09; border-radius: 5px; box-shadow: inset 1px 2px 3px #000a, 0 1px 0 #3d4037; padding: 11px 13px; }
form.msg textarea { min-height: 120px; resize: vertical; }
form.msg ::placeholder { color: #6e7363; }
.sent { background: var(--status-glass); border: 2px solid #3b4237; border-radius: 6px; box-shadow: inset 0 2px 6px #000a; padding: 34px 20px; text-align: center; color: #c2d4ad; }
.sent h4 { margin: 0 0 6px; font: 500 16px var(--mono); color: var(--phosphor); }

/* footer plate */
.plate { border-top: 1px solid var(--seam-dark); box-shadow: inset 0 1px 0 #3d4037; padding: 26px 28px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; font-size: 14px; color: var(--muted); }
.plate .name { font: 500 14px var(--mono); letter-spacing: 1px; color: var(--ink); margin: 0 0 8px; }
.plate p { margin: 0 0 4px; }
.plate h4 { font: 500 12px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); margin: 0 0 8px; }
.plate ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.plate a { color: var(--muted); text-decoration: none; }
.plate a:hover { color: var(--ink); }
.plate .bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; border-top: 1px solid #1a1c17; padding-top: 14px; font: 12px var(--mono); }
.plate .bottom div { display: flex; gap: 18px; }

/* narrow: rail becomes a key row */
@media (max-width: 760px) {
  .deck { grid-template-columns: 1fr; }
  .rail { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--seam-dark); background: #232520f5; }
  .rail-label, .grille, .serial { display: none; }
  .keys { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; }
  .key { min-height: 54px; min-width: 66px; padding: 14px 6px 6px; flex: none; }
  .key svg { width: 18px; height: 18px; }
  .main { padding: 18px 12px 28px; }
  .panel { padding: 18px; }
  .masthead { padding: 14px 16px; gap: 14px; }
  .vents { display: none; }
  .env { padding: 10px 8px 20px; }
}

/* inventory */
.inventory { max-width: 1320px; margin: 22px auto 0; background: var(--note-bg); color: var(--note-ink); border-radius: 10px; padding: 26px; }
.inventory h2 { font: 600 19px/1.3 var(--sans); margin: 0 0 6px; }
.inventory > p { margin: 0 0 18px; max-width: 72ch; font-size: 15px; }
.inv { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.inventory h3 { font: 600 12px var(--mono); letter-spacing: 1px; text-transform: uppercase; margin: 0 0 8px; }
.inventory ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 14px; line-height: 1.45; }
.inventory li::before { content: "✓ "; font-weight: 700; }
.inventory li.flag::before { content: "! "; }
/* v5: quieter, professional chassis; games.samelsner.com keys and material response */
#lens { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; background: #04050a; }
.env, .inventory { position: relative; z-index: 1; }
body { background: #04050a; }
.env { padding: clamp(14px, 3vw, 44px) clamp(10px, 3vw, 44px) 28px; }
.shell { max-width: 1180px; background: linear-gradient(105deg, #2a2c27e6, #222420ee), var(--grain); background-size: auto, 560px; backdrop-filter: blur(3px); overflow: visible; }
.panel { background: linear-gradient(105deg, #2e312bf2, #282a25f5), var(--grain); background-size: auto, 560px; scroll-margin-top: 96px; border-radius: 8px; box-shadow: inset 1px 1px 0 #474b40, 0 2px 0 #0b0c09, 0 6px 14px #0005; }

/* masthead: name, one line of focus, plain section keys; stays in reach while reading */
.masthead { position: sticky; top: 0; z-index: 30; gap: 14px 28px; padding: 14px 24px; background: linear-gradient(105deg, #2c2e29, #252722); border-radius: 14px 14px 0 0; box-shadow: 0 1px 0 #3d4037; }
.brand { font: 600 22px/1 var(--sans); letter-spacing: -.6px; }
.chassis-label { max-width: none; text-transform: none; letter-spacing: 0; font: 13px/1.4 var(--sans); color: var(--muted); }
.navkeys { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.deck { display: block; }
.main { padding: 24px 24px 36px; gap: 22px; }

/* keys: games.samelsner.com landing keys, darkened */
.key { display: inline-flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; min-height: 44px; padding: 10px 15px; border: 1px solid #10110e; border-radius: 5px; background: linear-gradient(105deg, #3b3e36, #30332c 70%, #2b2d27); color: #d9dccb; font: 500 13px/1.4 var(--mono); text-decoration: none; cursor: pointer; box-shadow: inset 1px 2px 1px #5c6053, inset -1px -3px 2px #0000004d, 0 3px 0 #0b0c09, 0 4px 2px #00000040, 0 6px 7px #00000030; text-shadow: 0 -1px #0008; position: relative; transition: none; transform: none; }
.key::after, .key .n, .key svg { display: none; }
.key:hover { border-color: #788368; background: linear-gradient(105deg, #3b3e36, #30332c 70%, #2b2d27); transform: none; }
.key:active { transform: none; box-shadow: inset 1px 2px 3px #000a, 0 1px 0 #0b0c09; }
.key.primary { background: linear-gradient(105deg, #64735b, #4e5c46); border-color: #2c3526; color: #f3f1dc; box-shadow: inset 1px 1px 0 #a1af82, 0 3px 0 #1f2a19, 0 5px 4px #0006; text-shadow: none; white-space: nowrap; }
.key[aria-current="true"], .filter[aria-pressed="true"] { background: linear-gradient(105deg, #45503d, #3a4434); box-shadow: inset 1px 2px 3px #12180f, inset -1px -1px #ffffff12, 0 1px #ffffff10; border-color: #232b1e; color: #e3ecd3; text-shadow: none; }
.tabs { gap: 8px; }
.tabs .key { min-height: 40px; padding: 8px 13px; font-size: 12px; }
.key-count { font-size: 11px; opacity: .8; border-left: 1px solid #72826466; padding-left: 9px; }

/* hero */
.hero .display.lens-window { min-height: 300px; background: #04050a; border: 1px solid #0d0e0b; border-radius: 6px; box-shadow: inset 0 0 30px #000a, 0 1px 0 #44483e; }
.hero .display.lens-window::after { background: none; }
#lens-win { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tagline, .display-legend { display: none; }
.fact { background: var(--panel-lo); border: 1px solid #0d0e0b; box-shadow: inset 1px 1px 0 #44483e; color: var(--muted); font: 13px/1.45 var(--sans); }
.fact b { color: var(--ink); font: 600 24px/1.2 var(--sans); }

/* record: a neutral reading surface, not a coloured screen */
.display.record { background: #1d1f1b; border: 1px solid #0d0e0b; border-radius: 6px; box-shadow: inset 0 1px 3px #0008, 0 1px 0 #44483e; }
.display.record::after { background: none; }
.record .count { color: var(--muted); opacity: 1; }
.tl::before { background: #44483e; }
.tl-year > .y { color: var(--ink-2); }
.tl-year::before { width: 6px; height: 6px; top: 9px; left: -18.5px; background: #ba7754; box-shadow: none; border-radius: 1px; }
.tl-entry { font: 15px/1.55 var(--sans); color: var(--ink); }
.tl-entry a:hover { color: #e3b996; text-decoration-color: #ba7754; }
.tl-entry .kind, .tl-entry[data-k] .kind { color: #a3a796; border-color: #55594d; font-size: 10px; }
.tl-entry .loc, .tl-entry .desc { color: var(--muted); }
.legend { display: none; }
.topics { border-left-color: #55594d; }

/* cards and rows: one quiet bevel */
.card, .item, .row { box-shadow: inset 1px 1px 0 #44483e, 0 2px 0 #0b0c09; }
.card .shot { border-bottom: 1px solid #0d0e0b; }
.art img { border: 1px solid #0d0e0b; }
.now li::before { background: #ba7754; }
.draft { background: #3a3d35; color: var(--ink-2); }

.elsewhere-rows { max-width: 560px; }
.main { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .masthead { padding: 12px 14px; gap: 8px 14px; border-radius: 12px 12px 0 0; }
  .chassis-label { display: none; }
  .navkeys { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .navkeys .key { flex: none; padding: 9px 12px; font-size: 12px; }
  .main { padding: 16px 12px 26px; }
  .panel { padding: 18px; scroll-margin-top: 120px; }
  .env { padding: 8px 6px 20px; }
}
/* v6: refined and delicate: hairline edges, small keys, lighter type */
.shell { border-radius: 10px; border: 1px solid #ffffff12; box-shadow: 0 1px 0 #ffffff08 inset, 0 18px 50px #0007; }
.masthead { padding: 12px 24px; border-radius: 10px 10px 0 0; box-shadow: 0 1px 0 #ffffff0d; border-bottom: 0; }
.brand { font: 500 18px/1 var(--sans); letter-spacing: -.3px; text-shadow: none; }
.chassis-label { font-size: 12.5px; }
.navkeys { gap: 6px; }
.key { min-height: 32px; padding: 5px 12px; gap: 8px; border: 1px solid #ffffff17; border-radius: 4px; background: linear-gradient(180deg, #ffffff0a, #ffffff03); color: #cfd2c2; font: 400 12px/1.4 var(--mono); letter-spacing: .2px; box-shadow: inset 0 1px 0 #ffffff12, 0 1px 1px #0005; text-shadow: none; }
.key:hover { border-color: #ffffff2e; background: linear-gradient(180deg, #ffffff12, #ffffff06); }
.key:active { box-shadow: inset 0 1px 2px #0008; }
.key.primary { background: linear-gradient(180deg, #5f6d56, #536049); border-color: #7d8b6c66; color: #f1efdd; box-shadow: inset 0 1px 0 #ffffff24, 0 1px 1px #0005; }
.key[aria-current="true"], .filter[aria-pressed="true"] { background: #3b4434; border-color: #8a9a7466; color: #e3ecd3; box-shadow: inset 0 1px 2px #0006; }
.tabs { gap: 6px; }
.tabs .key { min-height: 30px; padding: 4px 11px; font-size: 11.5px; }
.ctas { gap: 10px; }
.main { padding: 28px 28px 40px; gap: 18px; }
.panel { border: 1px solid #ffffff0f; border-radius: 6px; padding: 30px 32px; background: linear-gradient(180deg, #2b2e28ee, #272924f2), var(--grain); background-size: auto, 560px; box-shadow: inset 0 1px 0 #ffffff0a, 0 1px 2px #0004; }
.eyebrow { font: 400 11px/1.5 var(--mono); letter-spacing: 1.4px; color: var(--faint); }
.hero h1 { font: 400 clamp(36px, 4.4vw, 54px)/1.05 var(--sans); letter-spacing: -1.6px; }
.panel h2 { font: 400 clamp(24px, 2.3vw, 31px)/1.2 var(--sans); letter-spacing: -.8px; }
.bio { font-size: 16.5px; font-weight: 300; }
.lede { font-size: 15.5px; }
.hero .display.lens-window { border: 1px solid #ffffff12; border-radius: 4px; box-shadow: inset 0 0 24px #0009; }
.facts { gap: 0; border-top: 1px solid #ffffff12; margin-top: 28px; padding-top: 6px; }
.fact { background: none; border: 0; box-shadow: none; padding: 10px 0 0; font-size: 12.5px; }
.fact b { font: 300 26px/1.2 var(--sans); }
.display.record { border: 1px solid #ffffff0f; border-radius: 4px; background: #1c1e1acc; box-shadow: none; }
.tl-entry { font-size: 14.5px; font-weight: 300; }
.tl-entry .kind, .tl-entry[data-k] .kind { font-size: 9.5px; padding: 0 5px; border-color: #ffffff21; color: #9a9e8d; }
.card, .item, .row { border: 1px solid #ffffff0f; border-radius: 5px; background: #ffffff05; box-shadow: none; }
.card h3 { font-weight: 500; font-size: 14.5px; }
.card p { font-size: 13.5px; font-weight: 300; }
.card .shot { border-bottom: 1px solid #ffffff0f; }
.art img { border: 1px solid #ffffff12; border-radius: 3px; }
.row .ic { width: 32px; height: 32px; border-radius: 4px; background: none; border: 1px solid #ffffff1a; color: var(--ink-2); box-shadow: none; }
.row .ic svg { width: 16px; height: 16px; }
.txp { box-shadow: none; border-top: 1px solid #ffffff0d; }
.now li { font-weight: 300; }
.now li::before { width: 4px; height: 4px; top: 11px; }
.tl-year::before { width: 5px; height: 5px; }
@media (max-width: 760px) {
  .masthead { padding: 10px 14px; }
  .navkeys .key { padding: 4px 10px; font-size: 11.5px; min-width: 0; min-height: 30px; }
  .main { padding: 16px 10px 26px; }
  .panel { padding: 20px 18px; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* quiet: the response edges and link fade early while the ripple finishes */
.mr-quiet [data-surface-motion] { transition: box-shadow .15s ease-out; }
.mr-quiet .panel[data-surface-motion] { box-shadow: inset 0 1px 0 #ffffff0a, 0 1px 2px #0004 !important; }
.mr-quiet .key[data-surface-motion] { box-shadow: inset 0 1px 0 #ffffff12, 0 1px 1px #0005 !important; }
.mr-quiet .key.primary[data-surface-motion] { box-shadow: inset 0 1px 0 #ffffff24, 0 1px 1px #0005 !important; }
.mr-quiet .filter[aria-pressed="true"][data-surface-motion] { box-shadow: inset 0 1px 2px #0006 !important; }
.mr-quiet .card[data-surface-motion], .mr-quiet .row[data-surface-motion], .mr-quiet .display[data-surface-motion], .mr-quiet .tl-year[data-surface-motion], .mr-quiet .fact[data-surface-motion] { box-shadow: none !important; }
.mr-quiet [data-connection-host] { --edge-link-opacity: 0 !important; }
/* brand: letters that rearrange into the current section */
.brand { display: inline-flex; align-items: baseline; min-width: 96px; }
.brand .morph { position: relative; display: inline-block; height: 1.15em; line-height: 1.15; white-space: pre; transition: width .5s ease; }
.brand .ml { position: absolute; left: 0; top: 0; transform-origin: 0 82%; transition: transform .6s cubic-bezier(.2,.7,.2,1), color .4s; }
.brand .ml.piled { color: var(--faint); transition: transform .55s cubic-bezier(.55,0,.9,.45), color .4s; }
@media (prefers-reduced-motion: reduce) { .brand .ml, .brand .morph { transition: none; } }
.rec-links { margin: 14px 0 0; }
.post { margin: 16px 0 0; padding: 12px 14px; border-left: 2px solid #ba7754; background: #ffffff05; font: 300 14px/1.6 var(--sans); color: var(--ink-2); max-width: 70ch; }
.post-meta { display: block; font: 400 11px/1.5 var(--mono); letter-spacing: .8px; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.post a { color: var(--ink); text-decoration-color: #ba7754; text-underline-offset: 3px; }
.activity { max-width: 68ch; }
.activity p { margin: 0 0 10px; font-weight: 300; color: var(--ink); }
.activity .post-meta { color: var(--faint); }
.activity .tags { font: 400 12px/1.6 var(--mono); color: var(--muted); margin: 4px 0 14px; }
.activity .key { margin-right: 8px; margin-top: 4px; }
.tabs.orgs { margin-top: -6px; }
.tl-entry .org { font: 400 10px var(--mono); letter-spacing: .08em; margin-left: 6px; padding: 0 5px; border-radius: 2px; background: #ffffff0d; color: #b9bca9; }
.tl-entry[data-org="litmus"] .org { color: #c9d6b2; }
.tl-entry[data-org="personal"] .org { color: #d8b89a; }
/* employers above the record; each one is the origin of a timeline tag */
.emps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.emp.tl-entry { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; margin: 0; padding: 12px 14px; background: var(--panel-lo); border: 1px solid #0d0e0b; border-radius: 6px; box-shadow: inset 1px 1px 0 #ffffff0d; font: 14px/1.5 var(--sans); }
.emp-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.emp-name { color: var(--ink); font-weight: 600; }
.emp-role { color: var(--ink-2); }
.emp-place { font: 12px var(--mono); color: var(--muted); }
.emp-now { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #c9d6b2; border: 1px solid #c9d6b266; border-radius: 2px; padding: 0 5px; }
.emp-side { display: flex; align-items: center; gap: 10px; font: 12px var(--mono); color: var(--muted); }
.emp.tl-entry .org { margin-left: 0; }
.emp .draft { margin-top: 0; }
/* hero pane: SightCurve node graph on graph paper */
.hero .display.lens-window { background-color: #010000; background-image: repeating-linear-gradient(20deg, #ffa00a0f 0 .5px, transparent .5px 20px), repeating-linear-gradient(160deg, #ffa00a0f 0 .5px, transparent .5px 20px), repeating-linear-gradient(90deg, #ffa00a0a 0 .5px, transparent .5px 20px); }
#lens-win { cursor: crosshair; touch-action: pan-y; }
.graph-toggle { position: absolute; right: 10px; bottom: 10px; z-index: 2; min-height: 30px; padding: 4px 11px; font: 500 11px var(--mono); letter-spacing: .06em; color: #ffcf8a; background: #120a02cc; border: 1px solid #ffa00a55; border-radius: 4px; cursor: pointer; }
.graph-toggle:hover { border-color: #ffa00aaa; }
.graph-toggle[aria-pressed="true"] { background: #ffa00a22; color: #ffe2b8; }
.graph-toggle { display: flex; padding: 0; overflow: hidden; }
.graph-toggle button { min-height: 30px; padding: 4px 11px; font: 500 11px var(--mono); letter-spacing: .06em; color: #d9b98a; background: transparent; border: 0; cursor: pointer; }
.graph-toggle button + button { border-left: 1px solid #ffa00a44; }
.graph-toggle button[aria-pressed="true"] { background: #ffa00a26; color: #ffe2b8; }
.graph-toggle button:hover { color: #ffe2b8; }
/* employer name as a tag chip; the current employer leads, larger */
.emp.tl-entry .emp-name.org { margin: 0; padding: 3px 9px; border-radius: 3px; font: 500 12px/1.4 var(--mono); letter-spacing: .06em; background: #ffffff0f; border: 1px solid #ffffff1a; }
.emp.tl-entry { padding: 9px 12px; font-size: 13px; }
.emp.tl-entry .emp-role { font-size: 13px; }
.emp.tl-entry.lead { padding: 16px 16px; font-size: 16px; }
.emp.tl-entry.lead .emp-name.org { font-size: 17px; padding: 5px 12px; }
.emp.tl-entry.lead .emp-role { font-size: 16px; color: var(--ink); }
/* open source: Hugo Stack style preview thumbnails, one size for every card */
#work .card .shot { aspect-ratio: 3/1; object-fit: cover; border-bottom: 1px solid #0d0e0b; }
#work .card .shot.contain { object-fit: contain; padding: 18px 40px; background: #e9e6dc; }
/* hero pane: no box. The panel itself deepens into a soft, faintly gridded well that the
   3D graph lives in; nodes fade out toward the edges, and the well opens on load. */
.hero .display.lens-window { background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible; }
.hero .display.lens-window::before { content: ""; position: absolute; inset: -6% -4%; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(20deg, #ffa00a0d 0 .5px, transparent .5px 20px),
    repeating-linear-gradient(160deg, #ffa00a0d 0 .5px, transparent .5px 20px),
    repeating-linear-gradient(90deg, #ffa00a08 0 .5px, transparent .5px 20px),
    radial-gradient(closest-side, #07050399 0, #0705034d 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
  animation: well-open 1.4s cubic-bezier(.2,.7,.2,1) both; }
.hero .display.lens-window::after { display: none; }
#lens-win { position: relative; z-index: 1;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  animation: graph-open 1.8s .25s cubic-bezier(.2,.7,.2,1) both; }
@keyframes well-open { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes graph-open { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) { .hero .display.lens-window::before, #lens-win { animation: none; } }
.emp.tl-entry.edu { margin-top: 6px; border-style: dashed; border-color: #ffffff1f; background: transparent; }
.cards.mini { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.cards.mini .card { text-decoration: none; color: inherit; }
.cards.mini .card:hover h3 { text-decoration: underline; text-decoration-color: var(--rust-hi); text-underline-offset: 3px; }
.cards.mini .card .body { padding: 10px 12px 12px; }
.cards.mini .card h3 { font-size: 14px; }
.cards.mini .card p { font-size: 13px; color: var(--muted); }
#work .cards.mini .card .shot { aspect-ratio: 3/1; }
#work .card .shot { object-position: center top; }
#work .card .shot.app { object-position: left top; }
#work .card .shot.art { object-position: center 45%; }
/* panels: a touch more body again: darker edge, top-left highlight, a 2px ledge and soft drop */
.panel { border: 1px solid #0c0d0a; border-radius: 8px; box-shadow: inset 1px 1px 0 #ffffff17, inset -1px -1px 0 #00000014, 0 2px 0 #1a1b17, 0 5px 12px #0005; }
.mr-quiet .panel[data-surface-motion] { box-shadow: inset 1px 1px 0 #ffffff17, inset -1px -1px 0 #00000014, 0 2px 0 #1a1b17, 0 5px 12px #0005 !important; }
/* panels, Snow White workbench chunk: flat matte moulded plastic with grain, solid moulded
   edge lines instead of glossy highlights, and a short, hard ledge rather than a soft glow */
.panel { background: linear-gradient(#2b2d28ec, #2b2d28ec), var(--grain); background-size: auto, 420px; border: 1px solid #0d0e0b; border-radius: 9px;
  box-shadow: inset 1px 1px 0 #4b4f43, inset -1px -1px 0 #33362e, inset 0 0 0 3px #2e302a, 0 3px 0 #151612, 0 5px 5px #0003; }
.mr-quiet .panel[data-surface-motion] { box-shadow: inset 1px 1px 0 #4b4f43, inset -1px -1px 0 #33362e, inset 0 0 0 3px #2e302a, 0 3px 0 #151612, 0 5px 5px #0003 !important; }
/* intro is a single column now; falling letters */
.hero { grid-template-columns: 1fr; }
.hero .bio { max-width: 62ch; }
.fw { display: inline-block; white-space: nowrap; }
.fc { display: inline-block; transform-origin: 50% 70%; will-change: transform; }
#hero { overflow: visible; }
/* panels, from the Snow White card recipe (rabbits-social workbench console.css .card), in graphite:
   a 105deg diagonal face over the polymer grain, one fine border, a single 1px lit top-left rim,
   a 2px moulded ledge and a soft low cast shadow. De-chunked: no inner rings or lower-right line. */
.panel { background: linear-gradient(105deg, #33352fe0, #2a2c27ec), var(--grain); background-size: auto, 500px; border: 1px solid #10110e; border-radius: 9px;
  box-shadow: inset 1px 1px 0 #ffffff14, 0 2px 0 #161713, 0 6px 14px #0000002e; }
.mr-quiet .panel[data-surface-motion] { box-shadow: inset 1px 1px 0 #ffffff14, 0 2px 0 #161713, 0 6px 14px #0000002e !important; }
/* panels, from the Snow White key recipe (rabbits-social console.css --key-shadow and .sidebar .nav a)
   in graphite, slightly de-chunked: convex 105deg face, lit inset top-left lip, shaded inset lower
   right, a 3px moulded base (key: 4px), short contact shadow and a soft cast shadow */
.panel { background: linear-gradient(105deg, #393b34e6, #30322ce8 70%, #2b2d27ee), var(--grain); background-size: auto, 500px; border: 1px solid #0f100d; border-radius: 9px;
  box-shadow: inset 1px 2px 1px #ffffff1c, inset -1px -3px 2px #00000040, 0 3px 0 #141511, 0 4px 2px #0000004d, 0 6px 8px #00000030; }
/* intro photo (the Hugo site's avatar) on the right, set in a thin Snow White display bezel */
.hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.hero-photo { margin: 0; width: clamp(170px, 20vw, 240px); padding: 6px; background: linear-gradient(105deg, #23241f, #1b1c18); border: 1px solid #0d0e0b; border-radius: 8px;
  box-shadow: inset 1px 1px 0 #ffffff12, inset 0 0 0 1px #00000040, 0 1px 0 #44483e; }
.hero-photo img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: inset 0 0 0 1px #0006; }
@media (max-width: 640px) { .hero { grid-template-columns: 1fr; } .hero-photo { width: 150px; order: -1; } }
/* photo nudged 10 mm left and 5 mm down (CSS mm, 96 dpi) on wide layouts */
@media (min-width: 641px) { .hero-photo { position: relative; left: -10mm; top: 5mm; } }

/* text subpanels inside each host panel: the Snow White content-panel role, gentler than the
   key-style host: a flat plate a shade lighter, hairline border, faint top-left highlight, a 1px
   ledge and no drop shadow */
.panel .txp { padding: 16px 20px 18px; background: linear-gradient(#ffffff06, #ffffff06), linear-gradient(105deg, #363832e0, #31332de8), var(--grain); background-size: auto, auto, 500px;
  border: 1px solid #191a16; border-radius: 7px; box-shadow: inset 1px 1px 0 #ffffff0d, 0 1px 0 #191a16; }
.panel > .txp { margin-bottom: 18px; }
.panel .txp > :first-child { margin-top: 0; }
.panel .txp > :last-child { margin-bottom: 0; }
/* keep the nudged photo clear of the intro plate */
@media (min-width: 641px) { .hero { column-gap: calc(28px + 10mm); } }
@media (max-width: 640px) { .now { grid-template-columns: minmax(0, 1fr); } .now .txp .key { white-space: normal; } }
/* the site's one typeface: IBM Plex Serif, an engineered serif with straight, squared-off
   strokes and no calligraphic curl, so it reads as technical rather than literary. Embedded
   (latin subset, 300-600). Mixed case everywhere */
@font-face { font-family: "IBM Plex Serif"; src: url(fonts/ibm-plex-serif-ee18d7e5.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url(fonts/ibm-plex-serif-21c3cdca.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url(fonts/ibm-plex-serif-96172870.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url(fonts/ibm-plex-serif-d517a1de.woff2) format("woff2"); font-weight: 600; font-display: swap; }
/* small labels (eyebrows, tags, keys, meta) stay in IBM Plex Mono, Snow White's legend face, in mixed case */
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-bb87500e.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/ibm-plex-mono-d32f0e07.woff2) format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url(fonts/geist-f49f83ef.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
:root { --sans: "IBM Plex Serif", Georgia, serif; --mono: "IBM Plex Mono", Menlo, monospace; }
body, body * { text-transform: none !important; }
.eyebrow, .tagline, .chassis-label, .post-meta, .tl-entry .kind, .emp-now, .topics b, .item h3, .expect b, .elsewhere b, .plate h4, .key, .meta, .tl-entry .org, .emp-name, .tl-year .y, .card .meta { letter-spacing: .01em !important; }
.eyebrow { font-size: 13px; }
.hero h1, h2 { letter-spacing: -0.02em; }

/* text plates, darker and recessed per the Snow White recess recipe (rabbits-social design-system.md
   "Recess", console.css display wells): a face darker than the host, an inset contact shadow from the
   upper left, and an opposite bright lip along the lower edge */
.panel .txp { background: linear-gradient(105deg, #222420e6, #1e201ced), var(--grain); background-size: auto, 500px; border: 1px solid #10110e;
  box-shadow: inset 1px 2px 3px #00000066, inset 0 0 0 1px #00000026, 0 1px 0 #ffffff12; }

/* reading face: Geist, an understated, precisely drawn grotesk, replacing Plex Serif; labels stay
   in IBM Plex Mono */
:root { --sans: "Geist", "Helvetica Neue", Arial, sans-serif; }
.hero h1, h2 { letter-spacing: -0.025em; font-weight: 500; }
/* text plates: 10 mm larger in each direction (5 mm more on every side; 2 mm on phones) */
.panel .txp { padding: calc(16px + 5mm) calc(20px + 5mm) calc(18px + 5mm); }
@media (max-width: 640px) { .panel .txp { padding: calc(14px + 2mm) calc(16px + 2mm); } }
/* one face for the whole site: IBM Plex Mono, the Snow White legend mono used in the timeline list
   (years, places, tags), in mixed case. Mono runs wide, so reading sizes come down a touch */
:root { --sans: "IBM Plex Mono", Menlo, monospace; }
.hero h1 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.02em; font-weight: 500; }
h2 { letter-spacing: -0.01em; font-weight: 500; }
.bio, .now p, .card p, .lede, .rec-intro { font-size: 14.5px; }
.tl-entry { font-size: 14px; }

/* the timeline-entry face, Helvetica Neue, on everything except buttons and keys, which stay in the mono
   (matches the games landing pairing). Reading sizes go back up now that text is no longer mono */
:root { --sans: "Helvetica Neue", Helvetica, Arial, sans-serif; }
body, body *:not(.key):not(.key *):not(button):not(button *) { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; }
.key, .key *, button, button * { font-family: "IBM Plex Mono", Menlo, monospace !important; }
.hero h1 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.03em; font-weight: 600; }
h2 { letter-spacing: -0.02em; font-weight: 600; }
.bio, .now p, .card p, .lede, .rec-intro { font-size: 15.5px; }
.tl-entry { font-size: 15px; }
/* Component-owned bevels, transient material blocks and a shared-gutter link. */
@property --edge-top-depth { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --edge-top { syntax: '<color>'; inherits: false; initial-value: #c8a48b; }
@property --edge-right-depth { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --edge-right { syntax: '<color>'; inherits: false; initial-value: #c8a48b; }
@property --edge-bottom-depth { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --edge-bottom { syntax: '<color>'; inherits: false; initial-value: #c8a48b; }
@property --edge-left-depth { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --edge-left { syntax: '<color>'; inherits: false; initial-value: #c8a48b; }
@property --relief-time { syntax: '<number>'; inherits: true; initial-value: 0; }
[data-material-response-root] .material-relief {
  display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;
  overflow:hidden;border-radius:inherit;contain:layout paint;
  --relief-time:0;
}
[data-material-response-root] .material-block {
  --block-lift:clamp(0,min(calc((var(--relief-time) - var(--block-arrival))/80),calc((var(--block-arrival) + 280 - var(--relief-time))/180)),1);
  display:block;position:absolute;pointer-events:none;box-sizing:border-box;
  border-radius:1.5px;opacity:var(--block-lift);
  transform:translate3d(0,calc(var(--block-lift)*-2.5px),0);
  box-shadow:inset .6px .7px .5px #ffffff1a,inset -.5px -.7px .5px #0000002e,
    0 2px 1.5px color-mix(in srgb,var(--block-tone) 22%,#141511),
    0 4px 5px #00000033;
}
[data-material-response-root] .material-block::after {
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,color-mix(in srgb,var(--block-tone) 4%,transparent),transparent 80%);
}
@media (prefers-reduced-motion:reduce) { [data-material-response-root] .material-relief { display:none; } }

/* ===== dark games-landing layer (rabbit-hole games-landing/arcade/landing.css, re-cast in graphite) ===== */
body { background: #121310; }
.shell { border: 1px solid #0c0d0a; border-radius: 14px; background: linear-gradient(105deg, #2c2e29f0, #252722f4), var(--grain); background-size: auto, 560px;
  box-shadow: inset 2px 2px 1px #ffffff14, inset -2px -3px 1px #00000059, 0 5px 0 #0a0b08, 0 10px 13px #0006, 0 28px 60px #0005; }
/* masthead: wordmark, spectrum chip, vents, nav keys, green readout */
.masthead { display: flex; align-items: center; gap: 20px; min-height: 80px; padding: 15px 28px; border-bottom: 1px solid #10110e; border-radius: 14px 14px 0 0;
  background: linear-gradient(105deg, #2e302bf6, #282a25f8), var(--grain); background-size: auto, 560px; box-shadow: 0 1px 0 #ffffff0f, inset 0 -5px 0 #00000026; }
.brand { font: 700 26px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -1.2px; text-shadow: 0 -1px #0008; }
.chassis-label { display: flex; align-items: center; gap: 10px; margin: 0; font: 11px/1.5 var(--sans); letter-spacing: .5px; color: var(--muted); white-space: nowrap; }
.spectrum { display: inline-block; width: 28px; height: 8px; flex: none; background: linear-gradient(90deg, #8eaa6f 0 25%, #d8ba6b 25% 50%, #c4874a 50% 75%, #a7563e 75%); box-shadow: inset 0 1px 1px #0005; }
.vents { flex: 1; min-width: 30px; height: 26px; background: repeating-linear-gradient(0deg, #0c0d0a 0 1px, #ffffff17 1px 2px, transparent 2px 6px); opacity: .8; }
.navkeys { margin-left: 0; flex-wrap: nowrap; }
.readout { display: flex; align-items: center; gap: 12px; flex: none; border: 2px solid #11130f; border-radius: 5px; background: linear-gradient(135deg, #344437, #22382b);
  box-shadow: inset 0 2px 6px #0c1708aa, 0 1px #ffffff14; color: #d0debf; font: 12px/1.5 var(--sans); padding: 7px 14px; white-space: nowrap; }
.readout small { font-size: 10px; color: #bdc9ad; }
.status-dot { width: 6px; height: 6px; background: #b0d47c; border-radius: 50%; box-shadow: 0 0 5px #a7d37355; flex: none; }

/* sections sit straight on the chassis: no host panel, intro text with no plate */
.panel { background: none; border: 0; box-shadow: none !important; border-radius: 0; padding: 30px 0 8px; }
.panel + .panel { border-top: 1px solid #10110e; box-shadow: inset 0 1px 0 #ffffff0b !important; }
.panel .txp { background: none; border: 0; box-shadow: none; padding: 0; }
.panel > .txp { margin-bottom: 22px; }
.eyebrow { margin: 0 0 9px; font: 12px/1.5 var(--sans); letter-spacing: 1px; color: var(--muted); }
body .eyebrow, body .post-meta, body .meta, body .card .meta, body .chassis-label { text-transform: uppercase !important; }
.hero h1 { font-size: clamp(34px, 3.9vw, 56px); font-weight: 600; line-height: 1.1; letter-spacing: -1.9px; }
h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -1.2px; line-height: 1.1; margin: 0; }
.bio, .lede, .rec-intro { color: var(--muted); font-size: 17px; }
.hero { padding: 10px 0 16px; }
.hero-photo { padding: 0; border: 3px solid #11130f; border-radius: 4px; background: #182b25; box-shadow: 0 1px 0 #ffffff10, inset 0 2px 5px #000a; }
.hero-photo img { border-radius: 1px; }

/* recessed plates for the Now item, the facts and the side-card contents */
.activity.txp, .now .activity, .panel .activity.txp { padding: 22px 24px !important; border: 1px solid #0f100d !important; border-radius: 8px !important;
  background: linear-gradient(110deg, #222420, #1e201c) !important; box-shadow: inset 1px 2px 4px #0008, 0 1px 0 #ffffff10 !important; }
.fact { background: linear-gradient(110deg, #222420, #1e201c); border: 1px solid #0f100d; border-radius: 6px; padding: 12px 14px; box-shadow: inset 1px 2px 3px #0007, 0 1px 0 #ffffff10; }
.facts { gap: 14px; border-top: 0; padding-top: 0; }

/* play-wall bar: the timeline count line, tinted dark green and recessed */
.record .count { display: block; margin: 0 0 16px; padding: 12px 16px; border: 1px solid #0f140f; border-radius: 5px; background: linear-gradient(110deg, #26332a, #1f2b23);
  box-shadow: inset 0 1px 3px #0009, 0 1px #ffffff10; color: #c7d6b6 !important; font: 500 13px/1.5 var(--sans); letter-spacing: .5px; text-transform: uppercase !important; }
.display.record { background: none; border: 0; box-shadow: none; padding: 0; }

/* cards: the landing's game card. thin border, 10px inset, soft lift; images in recessed 3px-framed screens */
.card { display: flex; flex-direction: column; padding: 10px; border: 1px solid #0f100d; border-radius: 8px; overflow: visible;
  background: linear-gradient(110deg, #34372ff2, #2d2f2af4); box-shadow: inset 1px 1px 1px #ffffff14, 0 2px 3px #0005; }
.card .shot, #work .card .shot, .cards.mini .card .shot { border: 3px solid #11130f !important; border-radius: 4px; background-color: #182b25; box-shadow: 0 1px 0 #ffffff10, inset 0 2px 5px #000a; }
.card .body { padding: 16px 7px 12px; }
.card h3 { font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -.65px; margin: 0 0 7px; }
.cards.mini .card h3 { font-size: 16px; letter-spacing: -.3px; }
.card p { font-size: 15px; line-height: 1.55; color: var(--muted); font-weight: 400; }
.card .meta { font-size: 11px; letter-spacing: .8px !important; color: var(--faint); margin-bottom: 8px; }

/* footer strip with the coin-slot feel */
.plate { border-top: 1px solid #10110e; box-shadow: inset 0 1px #ffffff0b; background: none; }

@media (max-width: 1080px) { .chassis-label { display: none; } .masthead { gap: 14px; } }
@media (max-width: 860px) { .masthead { flex-wrap: wrap; } .vents { display: none; } .readout { margin-left: auto; } .navkeys { order: 5; width: 100%; overflow-x: auto; } }
@media (max-width: 640px) {
  .shell { border-radius: 10px; }
  .masthead { padding: 14px 14px 10px; border-radius: 10px 10px 0 0; }
  .brand { font-size: 22px; }
  .readout { padding: 5px 9px; font-size: 10px; gap: 8px; } .readout small { font-size: 8px; } .readout .status-dot { display: none; }
  .hero h1 { font-size: 36px; letter-spacing: -1.5px; } h2 { font-size: 30px; }
  .bio, .lede, .rec-intro { font-size: 16px; }
  .card { padding: 8px; } .card .body { padding: 14px 6px 10px; }
  .activity.txp, .now .activity { padding: 16px !important; }
}
.panel .txp h2, .panel h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -1.2px; line-height: 1.1; }
#hero.panel { padding-top: 6px; }
/* the click wave never outlines a section: no edge shadow, border or outline on panels, and the
   wave's tile layer fades out toward every panel edge so clipped tiles don't trace a rectangle */
[data-material-response-root] .panel, .panel[data-surface-motion] { border: 0 !important; outline: 0 !important; box-shadow: none !important; }
.panel + .panel { border-top: 0 !important; }
.panel > .material-relief {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent), linear-gradient(180deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent), linear-gradient(180deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  mask-composite: intersect; }
.panel + .panel::before { content: ""; display: block; height: 1px; margin: -30px 0 29px; background: linear-gradient(90deg, transparent, #0f100d 15%, #0f100d 85%, transparent); box-shadow: 0 1px 0 #ffffff08; }
body .shell .panel[data-surface-motion], body .shell.mr-quiet .panel[data-surface-motion] { box-shadow: none !important; border: 0 !important; outline: 0 !important; }
/* Now: event entries sit as recessed plates inside a larger raised panel (the landing's game-card frame) */
.now .feed { min-width: 0; padding: 14px; border: 1px solid #0f100d; border-radius: 10px; background: linear-gradient(110deg, #34372ff2, #2d2f2af4), var(--grain); background-size: auto, 560px;
  box-shadow: inset 1px 1px 1px #ffffff14, 0 2px 3px #0005; display: grid; gap: 14px; }
.now .feed .activity { max-width: none; margin: 0; }
@media (max-width: 640px) { .now .feed { padding: 8px; } }
/* matched to the Mac site: the larger sub-panel is a recessed well with a 2px frame, and each event
   inside it is a raised plate with a lighter face, a hairline top-left highlight and a soft shadow */
.now .feed { padding: 12px; border: 2px solid #11130f; border-radius: 8px; background: linear-gradient(110deg, #1d1f1b, #1a1c18); box-shadow: inset 0 2px 6px #000a, 0 1px 0 #ffffff10; gap: 10px; }
.now .feed .activity { background: linear-gradient(110deg, #383b33, #30332c) !important; border: 1px solid #0f100d !important; box-shadow: inset 1px 1px 0 #ffffff1a, 0 2px 4px #0006 !important; }
.fcourier { position: absolute; text-align: center; pointer-events: none; z-index: 20; white-space: pre; transform-origin: 50% 60%; }
.record .count { display: none !important; }