:root {
  color-scheme: light;
  --paper: #edf1ee;
  --paper-strong: #f8faf7;
  --ink: #17201c;
  --muted: #5e6c65;
  --line: #c7d1cb;
  --forest: #14785f;
  --forest-deep: #0f5d4a;
  --signal: #e45850;
  --tech: #3277a5;
  --soft-green: #dfeae4;
  --soft-red: #f2dfdd;
  --display-dark: #101814;
  --display-dark-soft: #18241f;
  --display-ink: #f1f5f2;
  --display-muted: #adbbb3;
  --display-line: #3b4a42;
  --accent-mint: #78cfaf;
  --shadow: 0 18px 45px rgba(20, 34, 27, 0.12);
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101613;
  --paper-strong: #171e1a;
  --ink: #edf2ee;
  --muted: #aab5ae;
  --line: #34423a;
  --forest: #54b999;
  --forest-deep: #3ea887;
  --signal: #ec6c62;
  --tech: #72add5;
  --soft-green: #1c2e27;
  --soft-red: #382321;
  --display-dark: #0b110e;
  --display-dark-soft: #141e19;
  --display-ink: #f1f5f2;
  --display-muted: #a7b5ad;
  --display-line: #34423a;
  --accent-mint: #79d2b1;
  --shadow: 0 20px 55px rgba(0, 0, 0, 0.34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: -80px; padding: 10px 14px; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 16px; }

.lab-header { position: sticky; z-index: 20; top: 0; min-height: 76px; display: grid; grid-template-columns: minmax(220px, 1fr) auto 44px; align-items: center; gap: 24px; padding: 0 4vw; background: color-mix(in srgb, var(--paper-strong) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.lab-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lab-brand > span:last-child { display: grid; line-height: 1.2; }
.lab-brand strong { font-family: "Avenir Next", var(--sans); font-size: 17px; font-weight: 750; }
.lab-brand small { color: var(--muted); font-family: var(--mono); font-size: 10px; }
.lab-mark { display: grid; place-items: center; width: 42px; height: 42px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 11px; font-weight: 800; }
.lab-nav { display: flex; align-items: center; gap: 4px; }
.lab-nav a { padding: 9px 12px; color: var(--muted); font-size: 14px; border-bottom: 2px solid transparent; white-space: nowrap; }
.lab-nav a:hover, .lab-nav a.active { color: var(--ink); border-color: var(--signal); }
.theme-toggle { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--paper-strong); color: var(--ink); cursor: pointer; font-size: 18px; }
.theme-toggle:hover { border-color: var(--forest); }

.record-kicker { margin: 0 0 18px; color: var(--signal); font: 700 12px/1.2 var(--mono); text-transform: uppercase; }
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 18px; border: 1px solid var(--ink); border-radius: 3px; font-weight: 700; }
.button.primary { background: var(--forest); color: #fff; border-color: var(--forest); }
.button.primary:hover { background: var(--forest-deep); }
.button.secondary { background: transparent; color: var(--ink); }
.button.secondary:hover { background: var(--paper-strong); }
.text-link { color: var(--forest); font-weight: 750; }

.home-hero { min-height: calc(100vh - 124px); display: grid; grid-template-columns: minmax(330px, 0.72fr) minmax(560px, 1.28fr); align-items: center; gap: 6vw; margin: 0; padding: 7vh max(5vw, calc((100vw - 1480px) / 2)) 8vh; overflow: hidden; background: var(--display-dark); color: var(--display-ink); }
.home-hero .record-kicker { color: var(--signal); }
.kinetic-lab { display: flex; align-items: baseline; gap: 4px; width: fit-content; margin: 0; font-family: "Avenir Next", "Helvetica Neue", var(--sans); font-size: 146px; font-weight: 760; line-height: 0.8; letter-spacing: 0; }
.kinetic-lab span { display: inline-block; transform-origin: 50% 82%; }
.kinetic-lab span:nth-child(1) { --tilt: -2deg; --hop: -10px; color: var(--display-ink); transform: rotate(var(--tilt)); }
.kinetic-lab span:nth-child(2) { --tilt: 3deg; --hop: -18px; color: var(--signal); transform: rotate(var(--tilt)); }
.kinetic-lab span:nth-child(3) { --tilt: -1deg; --hop: -13px; color: var(--accent-mint); transform: rotate(var(--tilt)); }
.hero-signature { margin: 24px 0 0; color: var(--accent-mint); font: 700 11px/1.2 var(--mono); }
.hero-lede { max-width: 570px; margin: 28px 0 30px; color: var(--display-muted); font-size: 17px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.home-hero .button.primary { background: var(--accent-mint); color: var(--display-dark); border-color: var(--accent-mint); }
.home-hero .button.primary:hover { background: var(--display-ink); border-color: var(--display-ink); }
.home-hero .button.secondary { color: var(--display-ink); border-color: var(--display-line); }
.home-hero .button.secondary:hover { background: var(--display-dark-soft); }
.hero-metrics { display: flex; gap: 38px; margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid var(--display-line); }
.hero-metrics div { display: grid; gap: 5px; }
.hero-metrics dt { color: var(--display-muted); font: 11px var(--mono); }
.hero-metrics dd { margin: 0; font: 700 25px var(--mono); }
.hero-workbench { position: relative; min-height: 560px; }
.hero-workbench::before { content: ""; position: absolute; inset: 5% 0 8% 7%; background-color: var(--display-dark-soft); border: 1px solid var(--display-line); }
.bench-main { position: absolute; width: 79%; right: 1%; top: 12%; margin: 0; background: #f8faf7; color: #17201c; border: 1px solid var(--display-line); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28); }
.bench-main img { width: 100%; height: 350px; object-fit: cover; object-position: top; }
.bench-main figcaption, .bench-device figcaption { display: flex; justify-content: space-between; padding: 8px 12px; color: var(--muted); font: 10px var(--mono); border-top: 1px solid var(--line); }
.bench-main figcaption span { color: var(--signal); }
.bench-device { position: absolute; z-index: 2; left: 1%; bottom: 0; width: 28%; margin: 0; padding: 10px 10px 0; background: #f2f5f1; color: #17201c; border: 1px solid var(--display-line); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32); transform: rotate(-2deg); }
.bench-device img { width: 100%; height: 370px; object-fit: cover; object-position: top; }
.bench-device figcaption { color: #5e6c65; border-color: #c7d1cb; }
.bench-note { position: absolute; z-index: 3; right: 0; bottom: 7%; display: grid; gap: 4px; width: 190px; padding: 18px; background: #3b2624; color: #f5ebe9; border-left: 4px solid var(--signal); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3); transform: rotate(1deg); font: 10px/1.5 var(--mono); }
.bench-note strong { color: var(--signal); font-size: 12px; }

.focus-band, .archive-band, .notes-band { padding: 86px max(5vw, calc((100vw - 1380px) / 2)); border-top: 1px solid var(--line); }
.focus-band { background: var(--display-dark-soft); color: var(--display-ink); border-color: var(--display-line); }
.archive-band { background: var(--paper-strong); }
.notes-band { background: var(--paper); }
.section-heading { display: grid; grid-template-columns: 90px 1fr auto; gap: 28px; align-items: start; margin-bottom: 46px; }
.section-heading > span { color: var(--signal); font: 700 12px var(--mono); }
.section-heading h2 { margin: 0 0 6px; font: 600 42px/1.15 var(--serif); }
.section-heading p { margin: 0; color: var(--muted); }
.section-heading > a { color: var(--forest); font-weight: 700; }
.focus-band .section-heading p { color: var(--display-muted); }
.focus-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--display-line); border-bottom: 1px solid var(--display-line); }
.focus-grid a { min-height: 240px; display: flex; flex-direction: column; padding: 26px 24px; border-right: 1px solid var(--display-line); }
.focus-grid a:last-child { border-right: 0; }
.focus-grid span, .focus-grid b { color: var(--display-muted); font: 11px var(--mono); }
.focus-grid h3 { margin: auto 0 4px; font: 500 30px var(--serif); }
.focus-grid p { margin: 0 0 24px; color: var(--display-muted); }
.focus-grid b { color: var(--accent-mint); }
.focus-grid a:hover { background: color-mix(in srgb, var(--display-ink) 6%, transparent); }

.project-ledger { border-top: 2px solid var(--ink); }
.ledger-row { display: grid; grid-template-columns: 110px minmax(300px, 1fr) 130px 110px 28px; gap: 24px; align-items: center; min-height: 94px; padding: 16px 8px; border-bottom: 1px solid var(--line); }
.ledger-row:hover { background: var(--soft-green); }
.ledger-code, .ledger-kind, .ledger-status { color: var(--muted); font: 11px var(--mono); }
.ledger-title { display: grid; }
.ledger-title strong { font: 600 23px var(--serif); }
.ledger-title small { color: var(--muted); }
.ledger-status { color: var(--forest); }
.ledger-arrow { color: var(--signal); font-size: 22px; }

.post-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.post-strip article { min-height: 250px; padding: 26px 28px 20px 0; border-right: 1px solid var(--line); }
.post-strip article + article { padding-left: 28px; }
.post-strip article:last-child { border-right: 0; }
.post-strip time { color: var(--signal); font: 11px var(--mono); }
.post-strip h3 { margin: 48px 0 10px; font: 600 25px/1.35 var(--serif); }
.post-strip p { color: var(--muted); }
.writing-state { min-height: 240px; display: grid; place-content: center; padding: 40px; text-align: center; border: 1px dashed var(--line); background: var(--paper-strong); }
.writing-state span { color: var(--signal); font: 11px var(--mono); }
.writing-state h2, .writing-state h3 { margin: 18px 0 6px; font: 600 32px var(--serif); }
.writing-state p { max-width: 540px; margin: 0; color: var(--muted); }
.method-band { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: end; padding: 100px max(5vw, calc((100vw - 1380px) / 2)); background: var(--display-dark); color: var(--display-ink); }
.method-band h2 { margin: 0; font: 500 54px/1.08 var(--serif); }
.method-copy { max-width: 610px; }
.method-copy p { color: var(--display-muted); font-size: 18px; line-height: 1.85; }
.method-copy .text-link { color: var(--accent-mint); }
.method-band.compact { margin-top: 70px; }

.page-intro { max-width: 1380px; margin: 0 auto; padding: 100px 5vw 72px; border-bottom: 1px solid var(--line); }
.page-intro h1 { max-width: 900px; margin: 0; font: 600 70px/1.04 var(--serif); }
.page-intro > p:not(.record-kicker) { max-width: 760px; margin: 26px 0 0; color: var(--muted); font-size: 18px; }
.segment-links { display: flex; gap: 8px; margin-top: 34px; }
.segment-links a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 3px; }
.segment-links a.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.article-index { max-width: 1240px; margin: 0 auto; padding: 55px 5vw 100px; }
.article-row { display: grid; grid-template-columns: 130px 1fr 40px; gap: 24px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.article-row time { color: var(--signal); font: 11px var(--mono); }
.article-row h2 { margin: 4px 0 8px; font: 600 30px/1.3 var(--serif); }
.article-row p { max-width: 780px; margin: 0; color: var(--muted); }
.article-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.article-tags span, .reading-meta span { color: var(--forest); font: 11px var(--mono); }
.row-arrow { align-self: center; color: var(--signal); font-size: 25px; }

.reading-page { max-width: 900px; margin: 0 auto; padding: 100px 5vw; }
.reading-page > header { padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.reading-page h1 { margin: 0; font: 600 58px/1.13 var(--serif); }
.reading-deck { margin: 24px 0; color: var(--muted); font-size: 20px; }
.reading-meta { display: flex; flex-wrap: wrap; gap: 12px; }
.reading-meta strong { color: var(--signal); }
.reading-cover { width: 100%; max-height: 520px; object-fit: cover; margin: 42px 0; border: 1px solid var(--line); }
.prose { font-size: 17px; line-height: 1.9; overflow-wrap: anywhere; }
.prose h1, .prose h2, .prose h3 { margin: 2.1em 0 0.65em; font-family: var(--serif); line-height: 1.25; }
.prose h2 { font-size: 30px; }
.prose h3 { font-size: 23px; }
.prose a { color: var(--tech); text-decoration: underline; }
.prose img { margin: 30px auto; border: 1px solid var(--line); }
.prose blockquote { margin: 2em 0; padding: 15px 22px; background: var(--soft-green); border-left: 3px solid var(--forest); }
.prose pre { overflow: auto; padding: 18px; background: var(--ink); color: var(--paper); border-radius: 4px; }
.prose table { width: 100%; border-collapse: collapse; }
.prose td, .prose th { padding: 9px; border: 1px solid var(--line); text-align: left; }
.reading-page > footer, .project-back { display: flex; justify-content: space-between; gap: 20px; margin-top: 70px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font: 12px var(--mono); }

.project-gallery { max-width: 1380px; margin: 0 auto; padding: 40px 5vw 110px; }
.project-record { display: grid; grid-template-columns: minmax(340px, 0.9fr) 1.1fr; gap: 7vw; align-items: center; min-height: 440px; padding: 62px 0; border-bottom: 1px solid var(--line); }
.project-visual { min-height: 330px; display: grid; place-items: center; overflow: hidden; background: var(--soft-green); border: 1px solid var(--line); }
.project-visual > img:not(.app-icon-art) { width: 100%; height: 100%; min-height: 330px; object-fit: cover; object-position: top; }
.project-visual .app-icon-art { width: min(52%, 220px); aspect-ratio: 1; object-fit: cover; border-radius: 22%; box-shadow: var(--shadow); }
.project-monogram { color: var(--forest); font: 700 40px var(--mono); }
.project-copy h2 { margin: 20px 0 12px; font: 600 39px/1.2 var(--serif); }
.project-copy > p { max-width: 650px; color: var(--muted); font-size: 17px; }
.project-label { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font: 11px var(--mono); }
.project-label span { padding-right: 8px; border-right: 1px solid var(--line); }
.project-label span:first-child { color: var(--signal); }

.project-page { max-width: 1280px; margin: 0 auto; padding: 95px 5vw; }
.project-page > header h1 { margin: 25px 0 8px; font: 600 70px/1 var(--serif); }
.project-page > header > p { max-width: 800px; margin: 0; color: var(--muted); font-size: 22px; }
.project-page dl { display: flex; gap: 55px; margin: 44px 0; }
.project-page dl div { display: grid; gap: 4px; }
.project-page dt { color: var(--muted); font: 10px var(--mono); }
.project-page dd { margin: 0; font: 700 14px var(--mono); }
.project-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.project-media { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 70px 0; }
.project-media img { width: 100%; max-height: 620px; object-fit: contain; background: var(--paper-strong); border: 1px solid var(--line); }
.project-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 80px; margin-top: 75px; }
.project-body aside { align-self: start; padding: 24px; background: var(--soft-green); border-top: 3px solid var(--forest); }
.project-body aside h2 { margin: 0; font: 600 22px var(--serif); }
.project-body aside p { color: var(--muted); }
.release-log { margin-top: 80px; }
.release-log > h2 { font: 600 36px var(--serif); }
.release-log article { display: grid; grid-template-columns: 140px 160px 1fr; gap: 28px; padding: 26px 0; border-top: 1px solid var(--line); }
.release-log time { color: var(--muted); font: 11px var(--mono); }
.release-log h3 { margin: 0; font: 700 16px var(--mono); }

.about-ledger { max-width: 1280px; margin: 0 auto; padding: 70px 5vw; display: grid; grid-template-columns: repeat(2, 1fr); border-left: 1px solid var(--line); }
.about-ledger > div { min-height: 310px; padding: 35px 45px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-ledger span { color: var(--signal); font: 11px var(--mono); }
.about-ledger h2 { margin: 70px 0 10px; font: 600 30px var(--serif); }
.about-ledger p { color: var(--muted); }

.studio-shell { max-width: 1500px; min-height: 80vh; margin: 0 auto; padding: 70px 4vw; }
.studio-head { display: flex; justify-content: space-between; gap: 25px; padding-bottom: 30px; border-bottom: 2px solid var(--ink); }
.studio-head h1 { margin: 0; font: 600 56px var(--serif); }
.studio-head p:not(.record-kicker) { color: var(--muted); }
.studio-login { max-width: 460px; margin: 70px auto; padding: 32px; background: var(--paper-strong); border: 1px solid var(--line); box-shadow: var(--shadow); }
.studio-login h2 { font-family: var(--serif); }
.studio-login form, .studio-form { display: grid; gap: 15px; }
.studio-login label, .studio-form label, .media-uploader label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.studio-login input, .studio-form input, .studio-form textarea, .studio-form select, .media-uploader input { width: 100%; min-height: 42px; padding: 9px 11px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 3px; }
.studio-form textarea { min-height: 110px; resize: vertical; }
.studio-form textarea.markdown-editor { min-height: 460px; font-family: var(--mono); font-size: 13px; line-height: 1.7; }
.studio-workspace { margin-top: 32px; }
.studio-tabs { display: flex; gap: 5px; border-bottom: 1px solid var(--line); }
.studio-tabs button, .studio-toolbar button, .studio-list button { min-height: 40px; padding: 8px 13px; background: var(--paper-strong); color: var(--ink); border: 1px solid var(--line); border-radius: 3px 3px 0 0; cursor: pointer; }
.studio-tabs button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.studio-panel { padding-top: 28px; }
.studio-split { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 28px; }
.studio-list { max-height: 74vh; overflow: auto; border-top: 1px solid var(--line); }
.studio-list button { width: 100%; display: grid; gap: 4px; padding: 14px; text-align: left; border-width: 0 0 1px; border-radius: 0; }
.studio-list button.active { background: var(--soft-green); box-shadow: inset 3px 0 var(--forest); }
.studio-list small { color: var(--muted); }
.studio-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.studio-toolbar > div { display: flex; flex-wrap: wrap; gap: 6px; }
.studio-editor { min-width: 0; }
.studio-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.studio-form .wide { grid-column: 1 / -1; }
.editor-preview { min-height: 360px; padding: 24px; background: var(--paper-strong); border: 1px solid var(--line); }
.studio-status { color: var(--muted); font: 12px var(--mono); }
.revision-list { display: grid; gap: 8px; margin-top: 18px; }
.revision-list button { text-align: left; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 24px; }
.media-item { padding: 10px; border: 1px solid var(--line); background: var(--paper-strong); }
.media-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--paper); }
.media-item code { display: block; margin-top: 7px; font-size: 10px; overflow-wrap: anywhere; }

.lab-footer { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; min-height: 160px; padding: 42px 4vw; background: var(--display-dark); color: var(--display-ink); }
.lab-footer > div { display: grid; gap: 4px; }
.lab-footer span { color: #aab6af; }
.lab-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 15px; color: #c4cec8; font-size: 12px; }
.lab-footer a:hover { color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .home-hero > *, .page-intro > *, .project-record { animation: reveal 0.55s ease both; }
  .home-hero > *:nth-child(2) { animation-delay: 0.08s; }
  .kinetic-lab span { animation: lab-hop 3.4s cubic-bezier(0.22, 0.78, 0.32, 1) infinite; }
  .kinetic-lab span:nth-child(2) { animation-delay: 0.16s; }
  .kinetic-lab span:nth-child(3) { animation-delay: 0.32s; }
  @keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes lab-hop {
    0%, 62%, 100% { transform: translateY(0) rotate(var(--tilt)); }
    70% { transform: translateY(var(--hop)) rotate(var(--tilt)); }
    77% { transform: translateY(3px) rotate(var(--tilt)); }
    83% { transform: translateY(-4px) rotate(var(--tilt)); }
    89% { transform: translateY(0) rotate(var(--tilt)); }
  }
}

@media (max-width: 1060px) {
  .lab-header { grid-template-columns: 1fr 44px; }
  .lab-nav { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; margin: 0 -4vw; padding: 0 4vw 8px; }
  .lab-nav { scrollbar-width: none; }
  .lab-nav::-webkit-scrollbar { display: none; }
  .lab-header { padding-top: 10px; }
  .home-hero { min-height: auto; grid-template-columns: 1fr; padding-top: 80px; }
  .kinetic-lab { font-size: 112px; }
  .hero-workbench { min-height: 580px; }
  .focus-grid { grid-template-columns: repeat(2, 1fr); }
  .focus-grid a:nth-child(2) { border-right: 0; }
  .focus-grid a:nth-child(-n+2) { border-bottom: 1px solid var(--display-line); }
  .ledger-row { grid-template-columns: 95px 1fr 100px 26px; }
  .ledger-kind { display: none; }
  .project-record { gap: 4vw; }
}

@media (max-width: 720px) {
  .lab-header { position: relative; min-height: 68px; gap: 10px; }
  .lab-brand small { display: none; }
  .lab-nav { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 3px 0 8px; }
  .lab-nav a { padding: 6px 2px; font-size: 12px; text-align: center; }
  .home-hero { position: relative; display: block; min-height: calc(100svh - 180px); padding: 52px 20px 42px; }
  .hero-copy { position: relative; z-index: 2; }
  .kinetic-lab { font-size: 84px; }
  .hero-lede { margin: 24px 0; font-size: 16px; }
  .hero-metrics { gap: 18px; justify-content: space-between; }
  .hero-metrics dt { font-size: 9px; }
  .hero-metrics dd { font-size: 19px; }
  .hero-workbench { position: absolute; inset: auto -15% 0 55%; min-height: 0; height: 170px; margin: 0; opacity: 0.2; pointer-events: none; }
  .hero-workbench::before { inset: 0; }
  .bench-main { width: 100%; right: 0; top: 0; }
  .bench-main img { height: 130px; }
  .bench-device, .bench-note { display: none; }
  .focus-band, .archive-band, .notes-band { padding: 60px 20px; }
  .section-heading { grid-template-columns: 56px 1fr; gap: 10px; }
  .section-heading > a { grid-column: 2; }
  .section-heading h2 { font-size: 34px; }
  .focus-grid { grid-template-columns: 1fr; }
  .focus-grid a { min-height: 190px; border-right: 0; border-bottom: 1px solid var(--display-line); }
  .focus-grid a:last-child { border-bottom: 0; }
  .focus-grid h3 { font-size: 27px; }
  .ledger-row { grid-template-columns: 70px 1fr 24px; gap: 12px; }
  .ledger-title strong { font-size: 20px; }
  .ledger-title small, .ledger-status { display: none; }
  .post-strip { grid-template-columns: 1fr; }
  .post-strip article, .post-strip article + article { min-height: auto; padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .post-strip h3 { margin-top: 24px; }
  .method-band { grid-template-columns: 1fr; padding: 70px 20px; }
  .method-band h2 { font-size: 43px; }
  .page-intro { padding: 70px 20px 50px; }
  .page-intro h1 { font-size: 48px; }
  .article-index { padding: 35px 20px 75px; }
  .article-row { grid-template-columns: 1fr 30px; gap: 12px; }
  .article-row time { grid-column: 1 / -1; }
  .article-row h2 { font-size: 26px; }
  .reading-page { padding: 65px 20px; }
  .reading-page h1 { font-size: 43px; }
  .reading-deck { font-size: 18px; }
  .project-gallery { padding: 20px 20px 75px; }
  .project-record { grid-template-columns: 1fr; min-height: 0; padding: 46px 0; }
  .project-visual { min-height: 250px; }
  .project-copy h2 { font-size: 32px; }
  .project-page { padding: 65px 20px; }
  .project-page > header h1 { font-size: 50px; }
  .project-page dl { gap: 22px; flex-wrap: wrap; }
  .project-media { grid-template-columns: 1fr; }
  .project-body { grid-template-columns: 1fr; gap: 35px; }
  .release-log article { grid-template-columns: 1fr; gap: 7px; }
  .about-ledger { grid-template-columns: 1fr; padding: 35px 20px; border-left: 0; }
  .about-ledger > div { min-height: 260px; padding: 28px 8px; border-right: 0; }
  .about-ledger h2 { margin-top: 45px; }
  .studio-shell { padding: 50px 16px; }
  .studio-head { display: block; }
  .studio-split { grid-template-columns: 1fr; }
  .studio-list { max-height: 280px; }
  .studio-form-grid { grid-template-columns: 1fr; }
  .studio-form .wide { grid-column: auto; }
  .lab-footer { grid-template-columns: 1fr; }
  .lab-footer nav { justify-content: flex-start; }
}