/* AI usage ledger page. Shares design-tokens.css with the portfolio, like brief.css does for the research brief.
   Header, language toggle, focus ring and section rhythm repeat the rules in portfolio.css so the two pages read as one site.
   Layout: an IR-style ledger. Main column 8 of 12, margin notes in the aside, one ink board holding the hero numeral. */
:root {
  --ink: var(--color-primary, #193a47);
  --paper: var(--color-surface, #eaf0f1);
  --accent: var(--color-accent, #e8a282);
  --muted: var(--color-muted, #596e77);
  --white: #f8faf9;
  --line: #b8c7cc;
  --hair: #d3dee1;
  --dark-line: #58707a;
  --dark-muted: #bccbd0;
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "Manrope", "Noto Sans KR", system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 88px);
  --c-claude: #193a47; --c-codex: #4a7f91; --c-deepseek: #88aab7; --c-higgs: #e8a282;
  --board: #193a47; --board-tile: #21495a; --board-line: #0e2832; --board-ink: #eaf0f1; --board-muted: #9fb6c0;
  --h0: #dce6e9; --h1: #b5cbd3; --h2: #7fa1ae; --h3: #3f6b7d; --h4: #193a47;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 16px/1.7 var(--sans); word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { color: inherit; font: inherit; cursor: pointer; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid #b3532d; outline-offset: 5px; }
.board :focus-visible, .ledger-end :focus-visible { outline-color: var(--accent); }
::selection { background: var(--accent); color: var(--ink); }
.page-pad { padding-inline: var(--gutter); }
.nowrap { white-space: nowrap; }
.skip-link { position: fixed; left: 20px; top: -100px; z-index: 100; padding: 12px 20px; background: var(--ink); color: var(--white); }
.skip-link:focus { top: 12px; }
.i18n-wait main, .i18n-wait .site-header { visibility: hidden; }

/* site header, same as the portfolio */
.site-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; font-size: 14px; line-height: 1.25; font-weight: 800; letter-spacing: .055em; flex-shrink: 0; }
.wordmark:hover { color: #315967; }
.wordmark-name { display: block; }
.wordmark-sub { display: block; font-size: 8px; line-height: 1.4; letter-spacing: .125em; font-weight: 500; color: var(--muted); }
.site-header nav { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 40px); font-size: 12px; font-weight: 600; }
.site-header nav > a { padding-block: 8px; }
.site-header nav > a > span { margin-left: 4px; font-size: 9px; vertical-align: super; color: var(--muted); }
.site-header nav > a:hover, .site-header nav > a.active { color: #9b5135; }
.site-header nav .nav-contact { border-bottom: 1px solid var(--ink); padding-block: 6px; }
.site-header .nav-contact > span { vertical-align: baseline; font-size: 16px; color: inherit; }
.lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; }
.lang-toggle button { border: 0; padding: 8px; background: transparent; font-size: 10px; font-weight: 700; line-height: 1; }
.lang-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.lang-toggle button:hover { box-shadow: inset 0 0 0 1px var(--ink); }

.eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
#eyebrow { color: var(--muted); }
h1, h2, h3 { font-weight: 500; letter-spacing: -.065em; line-height: 1.3; text-wrap: balance; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { letter-spacing: -.035em; }
html[lang="en"] p { letter-spacing: 0; }

/* ticker tape: the one ambient motion on the page */
.tape { border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tape-track { display: inline-flex; gap: 36px; padding: 11px 0; animation: tape 110s linear infinite; will-change: transform; }
.tape:hover .tape-track { animation-play-state: paused; }
.ti { display: inline-flex; align-items: center; gap: 8px; }
.ti i { display: inline-block; width: 8px; height: 8px; background: var(--c); }
.ti b { color: var(--ink); font-weight: 700; }
@keyframes tape { to { transform: translateX(-50%); } }

/* hero */
.hero { padding-top: clamp(32px, 3vw, 48px); padding-bottom: clamp(40px, 6vw, 80px); }
.jump-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 28px; flex-wrap: wrap; }
.jump { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.jump a { padding: 4px 0; color: var(--muted); border-bottom: 1px solid transparent; }
.jump a:hover { color: #9b5135; border-color: currentColor; }
.hero h1 { font-size: clamp(35px, 4.6vw, 74px); line-height: 1.22; margin: 18px 0 20px; max-width: 18em; }
html[lang="en"] .hero h1 { font-size: clamp(36px, 4.5vw, 70px); line-height: 1.14; }
.hero h1 .n { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
mark { background: none; color: inherit; box-shadow: inset 0 -.36em 0 var(--accent); padding: 0 .07em; }
.lede { max-width: 66ch; color: var(--muted); font-size: clamp(14px, 1.35vw, 16px); line-height: 1.9; margin: 0 0 clamp(22px, 3vw, 32px); }
.lede b { color: var(--ink); font-weight: 700; }

.board { background: var(--board); color: var(--board-ink); border-radius: 2px; padding: clamp(16px, 2.4vw, 28px); }
.board-head, .board-foot { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; font: 700 11px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--board-muted); }
.board-foot b { color: var(--board-ink); font-weight: 700; }
.board-foot { align-items: center; }
.btn { font: 700 12px/1 var(--sans); padding: 10px 13px; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 2px; transition: background .12s, border-color .12s, color .12s; }
.btn:hover { border-color: var(--ink); }
.board .bbtn { color: var(--board-ink); border-color: #3f6070; padding: 7px 11px; letter-spacing: .04em; text-transform: none; }
.board .bbtn:hover { border-color: var(--board-ink); }
.motion-off #replayFlap { display: none; }
.flap { display: flex; align-items: flex-end; gap: clamp(3px, .45vw, 6px); margin: clamp(14px, 2vw, 22px) 0; --tw: clamp(16px, 5.2vw, 74px); --th: calc(var(--tw) * 1.42); }
.tile { position: relative; width: var(--tw); height: var(--th); perspective: 520px; font: 800 calc(var(--th) * .74)/var(--th) var(--sans); color: var(--board-ink); flex: none; }
.tile .half { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; background: var(--board-tile); backface-visibility: hidden; }
.tile .top, .tile .ft { top: 0; border-radius: 2px 2px 0 0; }
.tile .bot, .tile .fb { bottom: 0; border-radius: 0 0 2px 2px; }
.tile .half b { position: absolute; left: 0; width: 100%; height: var(--th); text-align: center; font-weight: 800; }
.tile .top b, .tile .ft b { top: 0; }
.tile .bot b, .tile .fb b { top: calc(var(--th) * -.5); }
.tile .ft { transform-origin: 50% 100%; z-index: 3; }
.tile .fb { transform-origin: 50% 0; transform: rotateX(90deg); z-index: 4; }
.tile::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--board-line); z-index: 6; }
@keyframes ftA { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes fbA { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
.tile.go .ft { animation: ftA var(--fd, 48ms) ease-in forwards; }
.tile.go .fb { animation: fbA var(--fd, 48ms) var(--fd, 48ms) ease-out both; }
.sep { align-self: flex-end; flex: none; width: .34em; font: 800 calc(var(--th) * .5)/1 var(--sans); padding-bottom: calc(var(--th) * .06); color: var(--board-muted); text-align: center; }

.split { margin-top: clamp(22px, 3vw, 34px); }
.split-bar { display: flex; gap: 2px; height: 14px; clip-path: inset(0); }
.split-bar i { display: block; height: 100%; }
.split-lab { display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin-top: 8px; font: 600 12.5px/1.5 var(--sans); color: var(--muted); }
.split-lab b { color: var(--ink); font-weight: 700; }
.split-note { margin: 10px 0 0; max-width: 68ch; font-size: 13px; line-height: 1.85; color: var(--muted); }
.key-sq { display: inline-block; width: 10px; height: 10px; margin-right: 7px; vertical-align: -1px; background: var(--c); }

.ledger { margin-top: clamp(24px, 4vw, 40px); border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(120px, 170px) 1fr minmax(130px, 190px); gap: 4px 22px; align-items: center; padding: 15px 0 14px; border-bottom: 1px solid var(--hair); }
.row .nm { display: flex; align-items: center; gap: 10px; font: 700 15px var(--sans); }
.row .sw { width: 10px; height: 10px; background: var(--c); flex: none; }
.row .bar { height: 8px; background: var(--hair); position: relative; overflow: hidden; }
.row .bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c); transform-origin: left; }
.row .val { text-align: right; font: 800 clamp(17px, 1.9vw, 21px)/1.2 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .val small { font: 600 12px var(--sans); color: var(--muted); margin-left: 5px; }
.row .meta { grid-column: 2 / 4; font: 500 12px/1.6 var(--sans); color: var(--muted); }
.row-note { padding: 12px 0 2px; font: 600 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.motion-on .motion-ready .row .bar i { transform: scaleX(0); }
.motion-on .motion-ready.in .row .bar i { transform: scaleX(1); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 90ms + 900ms); }
.motion-on .motion-ready .split-bar { clip-path: inset(0 100% 0 0); }
.motion-on .motion-ready.in .split-bar { clip-path: inset(0); transition: clip-path 1.1s var(--ease) 700ms; }

.plate { margin: clamp(28px, 4vw, 48px) 0 0; position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: var(--ink); }
.plate img, .plate video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.plate video { opacity: 0; transition: opacity .8s var(--ease); }
.plate video.on { opacity: 1; }
.plate figcaption { position: absolute; inset: auto 0 0; padding: 56px 28px 23px; display: flex; align-items: end; justify-content: space-between; gap: 24px; color: #fff; background: linear-gradient(transparent, #102b37a6); }
.plate figcaption > span:first-child { font-size: 12px; font-weight: 600; letter-spacing: .075em; line-height: 1.4; }
.plate figcaption > span:last-child { text-align: right; font-size: 10px; line-height: 1.5; }
.motion-off .plate video { display: none; }

/* sections */
.sec { padding-block: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 48px); }
.section-top { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; border-top: 1px solid var(--line); padding-top: 20px; font-size: 11px; font-weight: 500; letter-spacing: .07em; }
.section-top > span:last-child:not(:first-child) { color: var(--muted); letter-spacing: 0; text-align: right; }
.sec-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 12px; margin: clamp(26px, 3.6vw, 44px) 0 clamp(26px, 3.6vw, 44px); }
.sec-head h2 { grid-column: 1 / span 9; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.4; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 12px; row-gap: 28px; align-items: start; }
.main { grid-column: 1 / span 8; min-width: 0; }
.aside { grid-column: 10 / span 3; min-width: 0; font-size: 13px; line-height: 1.8; color: var(--muted); }
.aside p { margin: 0 0 16px; padding-top: 10px; border-top: 1px solid var(--line); }
.aside b { color: var(--ink); font-weight: 700; }
.aside a, .spec a, .worklist a, .sublist .a a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.worklist a:hover, .sublist .a a:hover, .aside a:hover, .spec a:hover { color: #9b5135; }
.sub { font: 700 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 34px 0 10px; }
.sub:first-child { margin-top: 0; }
html[lang] .sub { font-weight: 700; letter-spacing: .1em; line-height: 1.7; text-wrap: wrap; }
@media (max-width: 900px) { .main, .aside, .sec-head h2 { grid-column: 1 / -1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.motion-on .rv.in { animation: rise .65s var(--ease) both; animation-delay: var(--d, 0ms); }

/* charts */
.chart { position: relative; min-width: 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.axis text { fill: var(--muted); font: 500 11px var(--sans); }
.axis .tick-lab { font-variant-numeric: tabular-nums; }
.lab { fill: var(--ink); font: 700 11px var(--sans); }
.lab-sm { fill: var(--muted); font: 600 10px var(--sans); }
.grid-l { stroke: var(--hair); stroke-width: 1; }
.base-l { stroke: var(--line); stroke-width: 1.5; }
.dim { fill: var(--paper); opacity: .72; pointer-events: none; }
.ph { stroke: var(--ink); stroke-width: 1.5; pointer-events: none; }
.xh { stroke: var(--muted); stroke-width: 1; pointer-events: none; }
@keyframes growY { from { transform: scaleY(0); } }
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } }
@keyframes cellIn { from { opacity: 0; transform: scale(.55); } }
@keyframes growX { from { transform: scaleX(0); } }
.motion-on .play:not(.done) .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: growY .75s var(--ease) both; animation-delay: calc(var(--i) * 7ms); }
.motion-on .play:not(.done) .area { animation: reveal 1.2s var(--ease) both; }
.motion-on .play:not(.done) .cell { animation: cellIn .45s var(--ease) both; animation-delay: var(--wd, 0ms); }
.motion-on .play:not(.done) .track i { animation: growX 1s var(--ease) both; }

.ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.ctrl .btn.pbtn { min-width: 96px; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ctrl .btn.pbtn:hover { background: #0f2a35; }
input[type=range] { flex: 1 1 220px; min-width: 140px; accent-color: var(--ink); height: 28px; margin: 0; cursor: pointer; }
.readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; margin: 4px 0 12px; font-variant-numeric: tabular-nums; }
.readout .d { font: 800 13px var(--sans); letter-spacing: .04em; min-width: 116px; }
.readout .cum { font: 800 clamp(22px, 3.1vw, 34px)/1.1 var(--sans); letter-spacing: -.01em; }
.readout .cum small { font: 600 12px var(--sans); color: var(--muted); margin-left: 7px; letter-spacing: 0; }
.dayvals { display: flex; flex-wrap: wrap; gap: 4px 20px; font: 600 12px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.dayvals span { display: inline-flex; align-items: center; gap: 6px; }
.dayvals i { display: inline-block; width: 10px; height: 10px; background: var(--c); }
.dayvals b { color: var(--ink); font-weight: 800; }
.keys { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 6px; font: 600 12px var(--sans); color: var(--muted); }
.keys span { display: inline-flex; align-items: center; gap: 7px; }
.keys i { display: inline-block; width: 10px; height: 10px; background: var(--c); }

#tip { position: fixed; z-index: 60; pointer-events: none; background: var(--white); border: 1px solid var(--line); padding: 10px 12px 9px; min-width: 160px; max-width: 260px; font: 500 12px/1.5 var(--sans); border-radius: 2px; box-shadow: 0 8px 22px -14px rgba(25, 58, 71, .55); }
#tip[hidden] { display: none; }
#tip .t-title { font: 800 12px var(--sans); margin-bottom: 5px; letter-spacing: .02em; }
#tip .t-row { display: flex; align-items: center; gap: 8px; }
#tip .t-key { width: 12px; height: 2px; flex: none; }
#tip .t-val { font: 800 13px var(--sans); font-variant-numeric: tabular-nums; min-width: 62px; text-align: right; }
#tip .t-name { color: var(--muted); }

details.twin { margin-top: 14px; }
details.twin summary { cursor: pointer; font: 700 12px var(--sans); color: var(--muted); letter-spacing: .04em; list-style: none; display: inline-flex; gap: 8px; align-items: center; padding: 6px 0; }
details.twin summary::-webkit-details-marker { display: none; }
details.twin summary::before { content: "+"; font-weight: 800; width: 10px; }
details.twin[open] summary::before { content: "\2212"; }
details.twin summary:hover { color: var(--ink); }
.scroll { overflow: auto; max-height: 340px; border-top: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 13px; }
thead th { font: 700 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); white-space: nowrap; }
td, tbody th { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--hair); white-space: nowrap; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
tbody th { font-weight: 600; }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
td.l, th.l { text-align: left; }
#srcTable td, #srcTable tbody th, #monthTable td, #monthTable tbody th { white-space: normal; vertical-align: top; line-height: 1.55; }
#srcTable td:nth-child(2) { min-width: 170px; }
#monthTable td.l > div > div + div { margin-top: 3px; }

/* composition */
.mixrow { display: grid; grid-template-columns: minmax(110px, 150px) 1fr; gap: 6px 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.mixrow:first-of-type { border-top: 1px solid var(--line); }
.mixrow .who { font: 800 14px var(--sans); display: flex; align-items: center; gap: 9px; }
.mixrow .who i { width: 10px; height: 10px; background: var(--c); flex: none; }
.mixrow .who small { display: block; font: 600 11.5px var(--sans); color: var(--muted); margin-top: 1px; }
.mixbar { display: flex; gap: 2px; height: 22px; }
.mixbar span { display: block; height: 100%; min-width: 3px; position: relative; }
.mixbar .cache { background: var(--line); }
.mixbar .fresh { background: var(--muted); }
.mixbar .out { background: var(--ink); }
.mixbar .cache em { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font: 700 11px var(--sans); font-style: normal; color: var(--ink); white-space: nowrap; }
.mixnote { grid-column: 2; font: 600 12px/1.5 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.mixnote b { color: var(--ink); font-weight: 800; }
.share { display: grid; grid-template-columns: 120px 52px; align-items: center; gap: 10px; justify-content: end; }
.share > span:last-child { text-align: right; }
.share .tr { width: 120px; height: 6px; background: var(--hair); position: relative; flex: none; }
.share .tr i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c); }
.mname { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.mname i { display: inline-block; width: 10px; height: 10px; background: var(--c); flex: none; }
.prov { color: var(--muted); font-weight: 500; }

/* rhythm */
.seg { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 2px; width: max-content; max-width: 100%; }
.seg button { font: 700 12px/1 var(--sans); padding: 10px 14px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); transition: background .12s, color .12s; }
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.heat { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.heat .rl { font: 600 11px var(--sans); color: var(--muted); }
.heat .hl { font: 600 10px var(--sans); color: var(--muted); text-align: left; height: 16px; white-space: nowrap; }
.cell { aspect-ratio: 1; background: var(--h0); position: relative; }
.cell[data-l="1"] { background: var(--h1); } .cell[data-l="2"] { background: var(--h2); } .cell[data-l="3"] { background: var(--h3); } .cell[data-l="4"] { background: var(--h4); }
@media (hover: hover) { .cell:hover { outline: 2px solid var(--ink); outline-offset: -1px; z-index: 2; } }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; font: 600 11.5px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 12px; height: 12px; }
.calgrid { display: grid; grid-template-rows: 16px repeat(7, auto); gap: 3px; max-width: 500px; }
.calgrid .cm { font: 600 10px var(--sans); color: var(--muted); white-space: nowrap; align-self: start; }
.calgrid .cd { font: 600 10px var(--sans); color: var(--muted); align-self: center; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); margin: 30px 0 0; }
.stat { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--hair); }
.stat .l, .kpi .l { font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stat .v { font: 800 clamp(19px, 2.3vw, 26px)/1.2 var(--sans); margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .s, .kpi .s { font: 500 12px/1.5 var(--sans); color: var(--muted); }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* kpis and credits */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); margin-bottom: 34px; }
.kpi { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--hair); }
.kpi .v { font: 800 clamp(21px, 2.5vw, 30px)/1.15 var(--sans); margin-top: 4px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.catrow { display: grid; grid-template-columns: 70px 1fr 150px; gap: 4px 18px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.catrow:first-of-type { border-top: 1px solid var(--line); }
.catrow .nm { font: 800 14px var(--sans); }
.catrow .tr { height: 10px; background: var(--hair); position: relative; }
.catrow .tr i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c-higgs); }
.catrow .v { text-align: right; font: 700 13px var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.catrow .v small { color: var(--muted); font-weight: 600; margin-left: 6px; }

/* limits */
.mrow { display: grid; grid-template-columns: minmax(150px, 230px) 1fr minmax(120px, 170px); gap: 4px 22px; align-items: center; padding: 15px 0 14px; border-bottom: 1px solid var(--hair); }
.mrow:first-of-type { border-top: 1px solid var(--line); }
.mrow .nm { font: 800 14px var(--sans); }
.mrow .nm small { display: block; font: 600 11.5px var(--sans); color: var(--muted); }
.track { height: 10px; background: var(--hair); position: relative; overflow: hidden; }
.track i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--ink); transform-origin: left; }
.track i.warn { background: var(--accent); }
.mrow .v { text-align: right; font: 800 clamp(17px, 1.9vw, 21px)/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.mrow .v small { font: 600 12px var(--sans); color: var(--muted); margin-left: 5px; }
.mrow .meta { grid-column: 2 / 4; font: 500 12px/1.6 var(--sans); color: var(--muted); }

/* impact */
.impact-kpis { margin: clamp(22px, 3vw, 34px) 0 clamp(26px, 3.4vw, 40px); }
.impact-kpis .kpi { padding-block: 18px; }
.impact-kpis .v { font-size: clamp(34px, 4.6vw, 56px); line-height: 1; letter-spacing: -.02em; margin-top: 8px; font-family: var(--serif); font-weight: 400; }
.impact-kpis .s { margin-top: 8px; }
.worklist .w { display: grid; grid-template-columns: 64px 1fr auto; gap: 2px 18px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.worklist .w:first-child { border-top: 1px solid var(--line); }
.worklist .k { font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.worklist .t { font: 700 15px var(--sans); }
.worklist .t small { font: 500 12px var(--sans); color: var(--muted); margin-left: 8px; }
.worklist .d { font: 600 12px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.worklist .n { grid-column: 2 / 4; font: 500 12px/1.6 var(--sans); color: var(--muted); }
.pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
.pair { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.pair .l { font: 700 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pair .v { font: 800 clamp(24px, 3vw, 34px)/1.2 var(--sans); margin-top: 4px; font-variant-numeric: tabular-nums; }
.pair .v i { font-style: normal; color: var(--muted); font-weight: 600; margin: 0 .35em; }
.pair .s { font: 500 12px/1.6 var(--sans); color: var(--muted); }
.sublist .s1 { display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; padding: 11px 0; border-bottom: 1px solid var(--hair); align-items: center; }
.sublist .s1:first-child { border-top: 1px solid var(--line); }
.sublist .a { font: 700 14px var(--sans); }
.sublist .b { grid-column: 1; font: 500 12px/1.6 var(--sans); color: var(--muted); }
.sublist .tag { grid-row: 1 / span 2; grid-column: 2; }
.tag { display: inline-block; padding: 2px 8px; border: 1px solid var(--line); font: 700 11px/1.5 var(--sans); border-radius: 2px; white-space: nowrap; color: var(--muted); }
.tag.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 700px) { .impact-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pairs { grid-template-columns: minmax(0, 1fr); } .worklist .w { grid-template-columns: 48px 1fr; } .worklist .d, .worklist .n { grid-column: 2; } }

/* making of */
.swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.swatches div { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hair); font: 600 12px/1.5 var(--sans); color: var(--muted); }
.swatches i { display: block; height: 38px; margin-bottom: 8px; background: var(--c); }
.swatches b { display: block; color: var(--ink); font-weight: 800; }
@media (max-width: 700px) { .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
dl.spec { margin: 26px 0 0; border-top: 1px solid var(--line); }
dl.spec > div { display: grid; grid-template-columns: 130px 1fr; gap: 4px 18px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
dl.spec dt { font: 700 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
dl.spec dd { font-size: 14px; line-height: 1.8; }
@media (max-width: 560px) { dl.spec > div { grid-template-columns: 1fr; } }

/* end band: dark, like the portfolio's contact section */
.ledger-end { margin-top: clamp(40px, 6vw, 80px); padding-top: 56px; background: var(--ink); color: var(--paper); }
.end-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; padding-bottom: 38px; }
.end-row a { display: inline-flex; gap: 14px; align-items: center; border-bottom: 1px solid var(--dark-line); padding-bottom: 12px; font-size: clamp(18px, 2vw, 29px); letter-spacing: -.025em; }
.end-row a:hover { color: var(--accent); }
.ledger-end footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; border-top: 1px solid var(--dark-line); color: var(--dark-muted); font-size: 11px; letter-spacing: .03em; }
.ledger-end footer a:hover { color: var(--accent); }
.motion-toggle { padding: 4px 0; border: 0; border-bottom: 1px solid var(--dark-line); background: none; font-size: 11px; color: var(--dark-muted); }
.motion-toggle:hover { color: var(--accent); }
.motion-toggle:empty { display: none; }
.noscript { padding: 20px; background: var(--white); border: 1px solid var(--line); margin: 20px 0; }

/* No motion may become a condition of access to content. */
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition: none !important; }
.motion-off { scroll-behavior: auto; }

@media (min-width: 1700px) { :root { --gutter: max(88px, calc((100vw - 1440px) / 2)); } }
@media (max-width: 850px) {
  .site-header nav { gap: 16px; font-size: 11px; }
  .wordmark { font-size: 12px; }
}
@media (max-width: 640px) {
  .row { grid-template-columns: 1fr auto; }
  .row .nm { grid-column: 1; grid-row: 1; } .row .val { grid-column: 2; grid-row: 1; }
  .row .bar { grid-column: 1 / -1; grid-row: 2; } .row .meta { grid-column: 1 / -1; grid-row: 3; }
  .mrow { grid-template-columns: 1fr auto; }
  .mrow .nm { grid-column: 1; grid-row: 1; } .mrow .v { grid-column: 2; grid-row: 1; }
  .mrow .track { grid-column: 1 / -1; grid-row: 2; } .mrow .meta { grid-column: 1 / -1; grid-row: 3; }
  .mixrow { grid-template-columns: 1fr; } .mixnote { grid-column: 1; }
  .catrow { grid-template-columns: 56px 1fr; } .catrow .v { grid-column: 1 / -1; text-align: left; }
  .share { grid-template-columns: 70px 48px; }
  .stat .l, .kpi .l { letter-spacing: .06em; }
  td, th { padding-inline: 7px; }
  .plate { aspect-ratio: 4 / 3; }
  .plate figcaption { padding: 42px 22px 16px; gap: 15px; }
  .plate figcaption > span:first-child { font-size: 9px; }
  .plate figcaption > span:last-child { font-size: 9px; max-width: 155px; }
}
@media (max-width: 600px) {
  :root { --gutter: 22px; }
  html { scroll-padding-top: 125px; }
  .site-header { display: grid; grid-template-columns: 1fr; padding-block: 13px; gap: 13px; align-items: center; }
  .wordmark { gap: 4px; font-size: 13px; }
  .site-header nav { width: 100%; gap: 10px; justify-content: space-between; }
  .site-header nav > a { font-size: 10px; }
  .site-header nav > a > span { display: none; }
  .site-header nav .nav-contact { padding-block: 5px; }
  .lang-toggle button { padding: 8px 6px; font-size: 9px; }
  .eyebrow, .section-top { font-size: 9px; }
  .section-top { padding-top: 16px; gap: 20px; }
  .jump { font-size: 10px; }
  .ledger-end footer { font-size: 9px; gap: 15px 20px; }
}
@media (max-width: 360px) {
  :root { --gutter: 18px; }
  .site-header nav { gap: 8px; }
  .hero h1 { font-size: 31px; }
  .sec-head h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .plate video { display: none; }
}
@media (forced-colors: active) {
  a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible { outline-color: Highlight; }
  .cell, .legend i { forced-color-adjust: none; border: 1px solid CanvasText; }
  .cell[data-l="0"] { background: Canvas; } .cell[data-l="1"] { background: color-mix(in srgb, CanvasText 25%, Canvas); }
  .cell[data-l="2"] { background: color-mix(in srgb, CanvasText 50%, Canvas); } .cell[data-l="3"] { background: color-mix(in srgb, CanvasText 75%, Canvas); }
  .cell[data-l="4"] { background: CanvasText; }
  .row .bar, .track, .share .tr, .catrow .tr, .split-bar { outline: 1px solid CanvasText; }
}
@media print { .site-header, .tape, .motion-toggle, .jump { display: none; } .ledger-end { background: none; color: var(--ink); } }