.logo-hero { padding:58px 0 32px; }
.logo-hero h1 { font-size:clamp(66px,10vw,146px); line-height:.98; letter-spacing:-.07em; margin:22px 0 34px; }
.logo-hero-copy { display:grid; grid-template-columns:1fr 1fr; gap:60px; max-width:1100px; }
.logo-hero-copy p { margin:0; color:var(--muted); }
.logo-hero-copy p:first-child { font-size:24px; line-height:1.5; color:var(--ink); letter-spacing:-.025em; }
.logo-hero-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:18px 0; gap:10px; }
.logo-hero-strip figure { margin:0; }
.logo-hero-strip img { width:100%; height:auto; display:block; background:#fff; }
.logo-hero-strip figcaption { font-size:12px; padding:12px 3px 0; }
.logo-hero-strip figcaption span { display:block; font:11px var(--mono); color:var(--muted); margin-bottom:5px; }
.logo-ledger { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin:40px 0; }
.logo-ledger span { font:11px/1.6 var(--mono); color:var(--muted); }
.logo-ledger strong { display:block; font:46px/1.2 var(--sans); color:var(--ink); letter-spacing:-.04em; }
.logo-index { display:flex; flex-wrap:wrap; gap:10px 24px; padding:22px 0 36px; border-bottom:1px solid var(--rule); font:12px/1.6 var(--mono); }
.logo-index a { max-width:100%; overflow-wrap:anywhere; }
.logo-primer { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; padding:56px 0; }
.logo-primer h2,.logo-section h2 { font-size:clamp(28px,4vw,43px); line-height:1.2; letter-spacing:-.04em; }
.logo-primer dl { margin:0; }
.logo-primer dl div { border-bottom:1px solid var(--rule); padding:16px 0; }
.logo-primer dt { font-weight:600; }
.logo-primer dd { margin:5px 0 0; color:var(--muted); }
.logo-case { border-top:1px solid var(--rule-strong); padding:46px 0 58px; scroll-margin-top:24px; }
.logo-case-header { display:grid; grid-template-columns:1fr 1.1fr; gap:60px; padding-bottom:30px; }
.logo-case-header h2 { font-size:clamp(28px,3.8vw,43px); letter-spacing:-.04em; line-height:1.2; max-width:18ch; margin:16px 0; }
.logo-case-header p { margin-top:0; }
.logo-source { font:12px/1.8 var(--mono); color:var(--muted); }
.logo-workbench { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:28px; align-items:start; }
.logo-comparison { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.logo-comparison figure { margin:0; min-width:0; }
.logo-comparison figcaption { padding:10px 0; font:11px/1.6 var(--mono); color:var(--muted); }
.logo-comparison img { width:100%; height:auto; display:block; border:1px solid var(--rule); background:#fff; }
.logo-scrub { margin:20px 0 10px; }
.logo-scrub label { display:block; font:12px var(--mono); }
.logo-scrub input { width:100%; margin:12px 0 0; min-height:32px; accent-color:var(--ink); cursor:ew-resize; }
.logo-frame-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.logo-frame-controls a { font-size:12px; margin-left:auto; }
.logo-readout { display:block; font:11px/1.8 var(--mono); margin:16px 0; overflow-wrap:anywhere; }
.logo-load-status { font-size:12px; }
.logo-phase-note { border-left:2px solid var(--ink); padding:4px 0 4px 18px; margin:18px 0; min-height:110px; }
.logo-phase-note strong { font-size:17px; }
.logo-phase-note p { margin:5px 0; color:var(--muted); font-size:14px; }
.logo-phase-list { padding-top:2px; }
.logo-phase-list .kicker { margin:8px 0 18px; }
.logo-phase-list button { display:block; width:100%; border:0; border-top:1px solid var(--rule); background:transparent; color:var(--ink); padding:12px 14px; text-align:left; font-size:13px; cursor:pointer; }
.logo-phase-list button span { display:block; font:10px var(--mono); color:var(--muted); margin-bottom:5px; }
.logo-phase-list button[aria-pressed='true'] { background:var(--ink); color:var(--paper); }
.logo-phase-list button[aria-pressed='true'] span { color:var(--paper); }
.logo-phase-list button:hover:not([aria-pressed='true']) { background:var(--field); }
.logo-context,.logo-notes { border-block:1px solid var(--rule); padding:16px 0; margin-top:26px; }
.logo-context summary,.logo-notes summary { cursor:pointer; font-weight:600; }
.logo-context video { display:block; width:100%; max-width:960px; margin:20px auto; background:#fff; }
.logo-context .motion-controls { padding-block:12px; }
.logo-context .sampling { max-width:80ch; }
.logo-reading { display:grid; grid-template-columns:1.15fr 1fr; gap:50px; padding-top:20px; }
.logo-reading h3 { font-size:17px; }
.logo-reading ul,.logo-reading ol,.logo-notes ol { padding-left:21px; }
.logo-reading li,.logo-notes li { padding-left:4px; margin-bottom:13px; }
.logo-reading p,.logo-reading li,.logo-notes li { color:var(--muted); font-size:14px; }
.logo-section { border-top:1px solid var(--rule-strong); padding:48px 0; }
.logo-section > p { max-width:90ch; }
.logo-table-wrap { width:100%; overflow-x:auto; border:1px solid var(--rule); margin-top:26px; }
.logo-table { width:100%; min-width:800px; border-collapse:collapse; text-align:left; font-size:13px; }
.logo-table th,.logo-table td { padding:17px 18px; border-bottom:1px solid var(--rule); vertical-align:top; }
.logo-table thead { background:var(--field); font:11px/1.6 var(--mono); }
.logo-table td { color:var(--muted); }
.logo-table th span { display:block; font:10px/1.6 var(--mono); color:var(--muted); margin-top:8px; }
.logo-table tbody th { min-width:220px; max-width:310px; }
.logo-table tbody td:last-child { min-width:150px; }
@media(max-width:1050px) { .logo-workbench { grid-template-columns:minmax(0,1fr) 230px; gap:20px; } .logo-frame-controls a { margin-left:0; } }
@media(max-width:780px) { .logo-hero-copy,.logo-case-header,.logo-primer,.logo-reading { grid-template-columns:1fr; gap:20px; } .logo-workbench { grid-template-columns:1fr; } .logo-phase-list { display:grid; grid-template-columns:1fr 1fr; gap:4px; } .logo-phase-list > p { grid-column:1 / -1; } .logo-ledger { grid-template-columns:1fr 1fr; } .logo-hero-strip { grid-template-columns:repeat(3,minmax(0,1fr)); } .logo-hero-copy p:first-child { font-size:21px; } .logo-case-header h2 { max-width:none; } .logo-primer { padding:32px 0; } .logo-reading { gap:0; } }
@media(max-width:420px) { .logo-comparison { gap:6px; } .logo-comparison figcaption { font-size:9px; } .logo-frame-controls .video-button { padding:9px 11px; font-size:12px; } .logo-hero-strip { grid-template-columns:1fr 1fr; } .logo-hero-strip figure:last-child { grid-column:1 / -1; max-width:50%; } }