/* Tallest Peak — design system. Ported from the v27 LP deck (_deckwork/lpdocs/tp.css). One file; every page links it. Nine type sizes exist and no more. The v27 deck shipped 25 sizes because new pages reached for the nearest convenient value instead of the nearest scale step, and no gate caught it (CHANGELOG_v27_deck.md). Here a gate does: scripts/verify-type-scale.mjs rejects any font-size that is not var(--t1..--t9). Add a step only by changing the scale deliberately. */ @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-sans-400.woff2) format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plex-sans-500.woff2) format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/plex-sans-600.woff2) format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/plex-sans-700.woff2) format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-mono-400.woff2) format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plex-mono-500.woff2) format('woff2')} :root{ --ink:#0F172A; --body:#334155; --muted:#55637A; --accent:#C2410C; --accent-hover:#9A3412; --hair:#E4E9F0; --hair2:#D3DBE6; --panel:#F5F7FA; --wash:#FDF1E9; --bg:#FFFFFF; --dark-bg:#0F172A; --dark-fg:#F8FAFC; --dark-body:#C8D2E0; --dark-lab:#94A3B8; --dark-line:#1E293B; --t9:clamp(40px,5.2vw,64px); --t8:clamp(32px,4vw,44px); --t7:clamp(26px,3vw,34px); --t6:26px; --t5:21px; --t4:19px; --t3:17px; --t2:13px; --t1:11px; --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --pad:clamp(20px,4vw,56px); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:var(--bg);color:var(--body);font-family:var(--sans); font-size:var(--t3);line-height:1.65;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer} img,svg{display:block;max-width:100%} ::selection{background:var(--wash);color:var(--ink)} /* --- device 6: reveal-on-scroll. Progressive enhancement only --------- The inline script adds .js to before paint if JS runs at all; .rv items outside that scope (JS disabled) render normally, never stuck at opacity 0. See the prefers-reduced-motion block below for the other half of the contract. */ .js .rv{opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease} .js .rv.in{opacity:1;transform:none} /* Sentence case, never uppercase, never mono. */ h1,h2,h3,h4{font-family:var(--sans);font-weight:700;color:var(--ink); letter-spacing:-.015em;line-height:1.14} h1{font-size:var(--t8)} h2{font-size:var(--t7)} h3{font-size:var(--t5)} p{max-width:68ch} .lede{font-size:var(--t4);line-height:1.6;color:var(--body);max-width:60ch} .wrap{max-width:1140px;margin:0 auto;padding:0 var(--pad)} .section{padding:clamp(56px,7.5vw,96px) 0} .section-panel{background:var(--panel);border-top:1px solid var(--hair); border-bottom:1px solid var(--hair)} .section-ink{background:var(--dark-bg);color:var(--dark-body)} .section-ink h1,.section-ink h2,.section-ink h3{color:var(--dark-fg)} /* --- device 1: the numbered section head ------------------------------ Accent mono label over a heavy ink rule. Nothing else on the page gets an ink rule; that is what makes it read as a section boundary. */ .sechead{border-bottom:1.5px solid var(--ink);padding-bottom:6px;margin-bottom:28px} .sechead-num{display:block;font-family:var(--mono);font-size:var(--t1);font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:var(--accent); margin-bottom:10px} .section-ink .sechead{border-bottom-color:var(--dark-lab)} /* --- device 2: the figure row ----------------------------------------- */ .figs{display:flex;flex-wrap:wrap;gap:0;margin-top:28px;border-top:2px solid var(--ink)} .fig{flex:1 1 200px;padding:14px 20px 0 0} .fig+.fig{border-left:1px solid var(--hair);padding-left:20px} /* .fig-wide: the check-size claim (a full sentence, ~100 characters) shares a row with two short single-clause .val.txt cells (Stage, Geography). Giving it double flex-grow keeps it inside the two-line cap the other .val cells already meet without it. */ .fig.fig-wide{flex:3 1 340px} .fig .lab{display:block;font-family:var(--mono);font-size:var(--t1);font-weight:500; letter-spacing:.11em;text-transform:uppercase;color:var(--muted)} .fig .val{font-size:var(--t6);font-weight:700;color:var(--ink);line-height:1.06;margin-top:6px} .fig .val.acc{color:var(--accent)} /* .val is specified as a large bold numeral. A site-wide check (deck-alignment polish, 2026-08-29) found 29 of 59 .val cells actually hold a sentence or a role title, not a figure — the worst case a 67-character sentence set at 26px/700 in a one-third column. .val.txt is the prose variant: same family and column, sized for reading instead of for a number. Applied wherever a .val cell's content is a full sentence or a role/job title; short parallel labels (anchor names, category names) stay on plain .val. */ .fig .val.txt{font-size:var(--t4);font-weight:600;line-height:1.4} .fig .sub{font-size:var(--t2);color:var(--muted);margin-top:6px;line-height:1.4} .section-ink .figs{border-top-color:var(--dark-lab)} .section-ink .fig+.fig{border-left-color:var(--dark-line)} .section-ink .fig .val{color:var(--dark-fg)} .section-ink .fig .lab,.section-ink .fig .sub{color:var(--dark-lab)} /* --- device 3: flat panels. No radius, no shadow. --------------------- */ .panel{background:var(--panel);padding:22px 24px;margin-top:24px} .panel-wash{background:var(--wash)} .plab{display:block;font-family:var(--mono);font-size:var(--t1);font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px} /* --- device 4: the wedge --------------------------------------------- */ .wedge{border-left:4px solid var(--accent);padding-left:20px;margin-top:28px} .wedge p{font-size:var(--t5);font-weight:700;color:var(--ink);line-height:1.36;max-width:44ch} .section-ink .wedge p{color:var(--dark-fg)} /* --- device 5: the basis note ---------------------------------------- Source and date on the same surface as the claim. This is the whole credibility argument of the redesign; do not drop it to save space. */ .basis{margin-top:20px;padding-top:10px;border-top:1px solid var(--hair); font-size:var(--t1);line-height:1.5;color:var(--muted);max-width:88ch} .section-ink .basis{border-top-color:var(--dark-line);color:var(--dark-lab)} /* --- the cascade: proportional bars on one shared scale --------------- */ .cascade{margin-top:28px;border-top:2px solid var(--ink);padding-top:16px} .cascade-row{display:grid;grid-template-columns:minmax(0,15em) 1fr auto; gap:14px;align-items:center;padding:9px 0; border-bottom:1px solid var(--hair)} .cascade-row .name{font-size:var(--t2);color:var(--body)} .cascade-row .bar{height:14px;background:var(--accent)} .cascade-row .bar.dim{background:var(--hair2)} .cascade-row .amt{font-size:var(--t2);font-weight:700;color:var(--ink);white-space:nowrap} .label{display:inline-block;font-family:var(--mono);font-size:var(--t2);font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:var(--muted);line-height:1.5} /* Flat buttons: no radius, no lift, no shadow. */ .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--t2); line-height:1;padding:14px 24px;border:1px solid transparent; transition:background .2s,border-color .2s,color .2s} .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-hover)} .btn-ghost{border-color:var(--hair2);color:var(--ink);background:var(--bg)} .btn-ghost:hover{border-color:var(--muted);background:var(--panel)} /* --- small layout utilities: a gap-row for adjacent .btn CTAs, and a gap-stacked plain list, replacing line-break hacks in link groups --- */ .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .link-list{list-style:none;display:flex;flex-direction:column;gap:10px} .skip-link{position:fixed;top:-60px;left:12px;z-index:1000;background:var(--ink); color:#fff;padding:12px 18px;font-family:var(--mono);font-size:var(--t2); transition:top .2s} .skip-link:focus{top:12px} a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .nav{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--hair)} .nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px; height:66px;max-width:1140px;margin:0 auto;padding:0 var(--pad)} .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:var(--t3); color:var(--ink);letter-spacing:-.01em;white-space:nowrap;flex:none} .brand .peak{width:0;height:0;border-left:8px solid transparent; border-right:8px solid transparent;border-bottom:14px solid var(--accent);flex:none} .navlinks{display:flex;gap:clamp(14px,1.9vw,26px)} .navlinks a{font-size:var(--t2);font-weight:500;color:var(--body);padding:6px 0} .navlinks a:hover{color:var(--ink)} .nav-right{display:flex;align-items:center;gap:16px;flex:none} .eco{font-size:var(--t2);font-weight:500;color:var(--muted)} .eco:hover{color:var(--ink)} .menu-toggle{display:none;font-size:var(--t2);font-weight:600; border:1px solid var(--hair2);padding:9px 14px} .mobile-panel{display:none;flex-direction:column;gap:2px;border-top:1px solid var(--hair); background:var(--bg);padding:8px var(--pad) 16px} .mobile-panel.open{display:flex} .mobile-panel a{font-size:var(--t3);font-weight:500;padding:12px 0; border-bottom:1px solid var(--hair)} .footer{background:var(--dark-bg);color:var(--dark-body);padding:56px 0 32px} .footer h2{font-family:var(--mono);font-size:var(--t1);font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:var(--dark-lab);margin-bottom:14px} .footer a:hover{color:var(--dark-fg)} .footer .legal{margin-top:32px;padding-top:20px;border-top:1px solid var(--dark-line); font-size:var(--t1);line-height:1.6;color:var(--dark-lab);max-width:88ch} /* --- footer grid: Task 12 fix-wave restoration ------------------------- Dropped in Task 1's extraction and rediscovered three times since (.rv, .eco, .cta{background}); this is the fourth and last piece: every footer rendered as one undifferentiated left-aligned stack because .f-grid never made it into tp.css. main's version was a fixed four-column `2.1fr 1fr 1fr 1fr` (brand + Navigate + Connect + Contact); this rebuild consolidated Connect/Contact into one column, so real footers here carry two columns (Navigate, Connect) or three (adding a brand column on press.html/state-of-the-network.html) -- never four. auto-fit/minmax restores the same device (a real grid, evenly sharing the row) without leaving main's fixed fourth track as dead whitespace on pages that don't populate it, and collapses to one column at narrow widths on its own. */ .f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px} /* .footer ul{list-style:none;display:grid;gap:10px} and .footer ul a:hover{color: var(--dark-fg)} were removed here (deck-alignment polish, 2026-08-29): every