/* Spectrum Notes — "The Link" Graphite + signal cyan. IBM Plex Sans / Serif / Mono. */ :root{ --ink:#22262B; --ink-deep:#15181B; --panel:#1A1E22; --paper:#F2F4F4; --paper-2:#F7F8F8; --faint:#DFE3E4; --hair:#C6CDCE; --zebra:#EAEDEE; --rule:#9BA5A8; --body:#3A4046; --body-2:#4A5257; --mute:#5B6469; --mute-2:#6C7579; --mute-3:#7E888C; --on-dark:#DFE3E4; --on-dark-2:#AEB7B9; --on-dark-3:#C6CDCE; --edge:#343A40; --edge-2:#2A3036; --edge-3:#23282D; --teal:#1B8C99; --cyan:#2FB6C4; --sans:'IBM Plex Sans',system-ui,sans-serif; --serif:'IBM Plex Serif',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --gutter:clamp(20px,5vw,64px); --measure:68ch; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block} a{color:var(--teal); text-decoration:none} a:hover{color:var(--cyan); text-decoration:underline; text-underline-offset:3px} ::selection{background:var(--cyan); color:var(--ink-deep)} h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.018em; text-wrap:pretty} p{margin:0; text-wrap:pretty} ul,ol{margin:0} :focus-visible{outline:2px solid var(--cyan); outline-offset:3px} .wrap{max-width:1280px; margin:0 auto; padding-inline:var(--gutter)} .kicker{font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); margin:0} .kicker--dark{color:var(--cyan)} .mono{font-family:var(--mono)} .skip{position:absolute; left:-9999px} .skip:focus{left:12px; top:12px; z-index:99; background:var(--ink); color:#fff; padding:10px 14px} /* ---------- header + dropdown nav ---------- */ .site-head{background:var(--paper); border-bottom:1px solid var(--ink); position:relative; z-index:40} .head-row{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 0 22px} .brand{display:flex; align-items:center; gap:13px; text-decoration:none; min-height:44px} .brand:hover{text-decoration:none} .brand svg{flex:none} .brand-word{font-family:var(--mono); font-size:clamp(19px,2.4vw,25px); font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink)} .brand-word span{color:var(--cyan)} .nav{display:flex; align-items:center; gap:26px; list-style:none; padding:0} .nav>li{position:relative} .nav>li>a{font-size:15.5px; color:var(--body); display:inline-flex; align-items:center; gap:7px; padding:6px 0} .nav>li>a:hover{color:var(--cyan); text-decoration:none} .nav>li>a[aria-current]{color:var(--teal); font-weight:600} .has-sub>a::after{content:""; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg)} .nav-sub{ list-style:none; padding:10px 0; margin:0; position:absolute; top:100%; left:-18px; min-width:322px; background:var(--ink); border:1px solid var(--edge); box-shadow:0 22px 44px -22px rgba(21,24,27,.6); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .14s ease, transform .14s ease; } .nav>li::after{content:""; position:absolute; left:-18px; right:-18px; top:100%; height:14px} /* hover bridge */ .nav-sub{margin-top:12px} .nav>li:hover .nav-sub,.nav>li:focus-within .nav-sub{opacity:1; visibility:visible; transform:translateY(0)} .nav-sub a{display:block; padding:9px 20px; font-size:15px; line-height:1.35; color:var(--on-dark)} .nav-sub a:hover{background:var(--panel); color:var(--cyan); text-decoration:none} .nav-sub .sub-head{display:block; padding:4px 20px 9px; margin-bottom:4px; border-bottom:1px solid var(--edge-2); font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-3)} .nav-sub .sub-all{color:var(--cyan); font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase} .nav-tail{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase} .nav-toggle,.sub-toggle{position:absolute; opacity:0; pointer-events:none} .burger{display:none} /* ---------- link-stage ribbon ---------- */ .ribbon{border-bottom:1px solid var(--hair); background:var(--paper)} .ribbon-in{display:flex; min-height:60px; align-items:stretch; flex-wrap:wrap} .ribbon-cell{flex:1 1 140px; display:flex; align-items:center; gap:10px; padding:12px 0 12px 14px; border-left:1px solid var(--faint)} .ribbon-cell:first-child{border-left:0; padding-left:0} .ribbon-cell.span2{flex:2 1 180px} .ribbon-cell i{width:9px; height:9px; flex:none; background:var(--rule)} .ribbon-cell.on i{background:var(--cyan)} .ribbon-cell span{font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--body)} /* ---------- hero ---------- */ .hero{padding:34px 0 38px; display:grid; grid-template-columns:minmax(0,1fr) 452px; gap:52px; align-items:stretch} .hero h1{font-size:clamp(36px,5vw,58px); line-height:1.02; letter-spacing:-.026em; max-width:16ch; margin:12px 0 16px} .hero .dek{font-family:var(--serif); font-size:clamp(18px,1.9vw,21px); line-height:1.45; color:var(--body); max-width:44ch} .hero-meta{margin-top:16px; font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute-2)} .hero-fig{margin:0; display:flex; flex-direction:column} .hero-fig img{width:100%; flex:1 1 auto; min-height:340px; height:auto; object-fit:cover; background:var(--faint)} .figcap{font-family:var(--mono); font-size:12.5px; line-height:1.5; color:var(--mute-2); margin-top:9px} /* ---------- rail ---------- */ .rail{border-top:2px solid var(--ink); padding-top:16px} .rail-title{font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); margin-bottom:8px} .rail-list{list-style:none; padding:0} .rail-list li{border-bottom:1px solid var(--hair)} .rail-list a{display:grid; grid-template-columns:26px 1fr; gap:14px; padding:13px 0; color:inherit} .rail-list a:hover{text-decoration:none} .rail-list a:hover .r-t{color:var(--teal)} .rail-list .r-n{font-family:var(--mono); font-size:12.5px; color:var(--cyan); padding-top:4px} .rail-list .r-t{display:block; font-size:18px; line-height:1.28; font-weight:600; margin-bottom:3px} .rail-list .r-d{display:block; font-size:15px; line-height:1.42; color:var(--body-2)} /* ---------- generic section furniture ---------- */ .band{padding:54px 0 58px} .band--dark{background:var(--ink); color:var(--on-dark)} .band--faint{background:var(--faint)} .band-head{display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; border-bottom:2px solid var(--ink); padding-bottom:12px; margin-bottom:30px} .band-head h2{font-family:var(--mono); font-size:14px; letter-spacing:.2em; text-transform:uppercase} .band-head .note-r{font-family:var(--mono); font-size:12.5px; color:var(--mute)} .band--dark .band-head{border-color:var(--edge)} .band--dark .band-head .note-r{color:var(--mute-3)} .band-intro{display:flex; align-items:flex-end; justify-content:space-between; gap:48px; flex-wrap:wrap; margin-bottom:30px} .band-intro h2{font-size:clamp(28px,3.4vw,40px); line-height:1.08; letter-spacing:-.02em; margin-top:14px} .band-intro p{max-width:48ch; font-size:17.5px; line-height:1.55; color:var(--on-dark-2)} /* ---------- cards ---------- */ .cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px} .card{display:flex; flex-direction:column; gap:12px; color:inherit; height:100%} .card:hover{text-decoration:none} .card:hover .c-t{color:var(--teal)} .card img{width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--faint)} .c-cat{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal)} .c-t{font-size:clamp(21px,2.1vw,25px); line-height:1.18; letter-spacing:-.014em; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.36em} .c-d{font-family:var(--serif); font-size:17px; line-height:1.55; color:var(--body-2); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden} .c-meta{margin-top:auto; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--mute-2)} .card--flat{border-top:2px solid var(--ink); padding-top:16px} /* ---------- instrument panels (signature modules) ---------- */ .panel{border:1px solid var(--edge); background:var(--panel); padding:26px 28px} .panel-head{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-3); border-bottom:1px solid var(--edge-2); padding-bottom:12px; margin-bottom:6px} .readout{font-family:var(--mono); color:var(--cyan)} /* link budget */ .lb-grid{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:36px; align-items:start} .lb-row{display:grid; grid-template-columns:minmax(180px,230px) minmax(0,1fr) 210px; gap:18px; align-items:center; padding:11px 0; border-bottom:1px solid var(--edge-3)} .lb-row .lb-l{font-size:15px; font-weight:500; color:#F2F4F4} .lb-row .lb-n{font-size:13.5px; line-height:1.35; color:var(--mute-3); margin-top:2px} .lb-track{height:12px; background:var(--edge-3); position:relative} .lb-fill{position:absolute; inset:0 auto 0 0; background:var(--cyan); opacity:.85} .lb-fill.loss{background:var(--rule); opacity:.55} .lb-nums{display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:14px} .lb-nums .v{color:var(--on-dark-3)} .lb-nums .lv{color:var(--mute-3)} .lb-total{display:grid; grid-template-columns:minmax(180px,230px) minmax(0,1fr) 210px; gap:18px; align-items:center; padding-top:16px} .lb-total .lb-l{color:var(--cyan); font-weight:600} .lb-total .lb-nums{font-size:18px} .ctrl{border:1px solid var(--edge); background:var(--panel); padding:24px} .ctrl-lab{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-3); margin-bottom:14px} .ctrl-val{font-family:var(--mono); font-size:34px; color:var(--cyan); margin-bottom:14px} input[type=range]{width:100%; height:34px; accent-color:var(--cyan)} .range-ends{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11.5px; color:var(--mute-2); margin-top:6px} .chips{display:flex; gap:1px; background:var(--edge-2); flex-wrap:wrap} .chips button{flex:1 1 auto; min-width:56px; min-height:44px; background:var(--ink); color:var(--on-dark-3); border:0; font-family:var(--mono); font-size:12.5px; cursor:pointer; padding:10px 6px} .chips button:hover{background:var(--cyan); color:var(--ink-deep)} .chips button[aria-pressed=true]{background:var(--cyan); color:var(--ink-deep); font-weight:600} .margin-box{border:1px solid var(--cyan); padding:24px} .margin-box .big{font-family:var(--mono); font-size:clamp(32px,4vw,44px); line-height:1; color:#F2F4F4; margin-bottom:12px} .margin-box p{font-size:15.5px; line-height:1.5; color:var(--on-dark-2)} .footline{font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--mute-2)} /* band chart */ .ruler{position:relative; height:112px; background:#0F1215; border:1px solid var(--edge); display:flex; touch-action:none; cursor:ew-resize; user-select:none} .ruler-band{position:absolute; top:0; bottom:26px; border-left:1px solid var(--edge-2); padding:12px 8px 0; display:flex; flex-direction:column; gap:4px; overflow:hidden} .ruler-band b{font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; color:var(--on-dark-3); font-weight:500} .ruler-band em{font-family:var(--mono); font-size:11px; font-style:normal; color:var(--mute-3)} .ruler-decades{position:absolute; left:0; right:0; bottom:0; height:26px; display:flex} .ruler-decades span{flex:1; border-left:1px solid var(--edge-2); font-family:var(--mono); font-size:10.5px; color:var(--mute-2); padding:7px 0 0 5px} .ruler-decades span:first-child{border-left:0} .cursor{position:absolute; top:0; bottom:0; width:2px; background:var(--cyan); box-shadow:0 0 14px rgba(47,182,196,.7); left:49.4%} .cursor::before,.cursor::after{content:""; position:absolute; left:-6px; width:14px; height:14px; background:var(--cyan)} .cursor::before{top:0} .cursor::after{bottom:0} .readouts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--edge); margin-top:22px} .readouts>div{background:var(--ink); padding:18px 20px} .readouts dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-3); margin-bottom:10px} .readouts dd{margin:0; font-family:var(--mono); font-size:clamp(22px,2.6vw,30px); color:#F2F4F4; letter-spacing:-.01em} .readouts dd.hi{color:var(--cyan)} .band-note{margin-top:20px; font-size:17px; line-height:1.6; color:var(--on-dark-3); max-width:92ch} .band-list{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-wrap:wrap; gap:1px; background:var(--edge)} .band-list li{background:var(--ink); padding:16px 18px; flex:1 1 205px} .band-list b{display:block; font-family:var(--mono); font-size:13px; letter-spacing:.12em; color:var(--cyan); margin-bottom:4px} .band-list em{display:block; font-family:var(--mono); font-style:normal; font-size:12px; color:var(--mute-3); margin-bottom:8px} .band-list span{font-size:15.5px; line-height:1.45; color:var(--on-dark-2)} /* stack explorer (CSS-only) */ .stack{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:32px; align-items:start} .stack-col{display:flex; flex-direction:column; gap:1px; position:relative} .stack-ends{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-2); padding:0 0 8px} .stack-ends--b{padding:8px 0 0} .layer{display:grid; grid-template-columns:34px minmax(0,1fr); align-items:baseline; column-gap:14px; cursor:pointer; background:var(--ink); border-left:4px solid transparent; padding:12px 18px} .layer:hover{background:#2A2F35} .layer b{grid-column:2; font-size:17px; font-weight:600; color:#F2F4F4} .layer span{grid-column:2; font-size:14.5px; line-height:1.38; color:var(--mute-3); margin-top:2px} .layer .lno{grid-column:1; grid-row:1/span 2; font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--cyan)} .stack-detail{border:1px solid var(--edge); background:var(--panel); padding:0; min-height:302px} .sd-head{padding:11px 24px; border-bottom:1px solid var(--edge-2); font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-3); display:flex; justify-content:space-between; gap:12px} .sd-body{padding:24px 28px 26px} .sd-body h3{font-size:clamp(22px,2.5vw,28px); line-height:1.12; color:#F2F4F4; margin-bottom:14px} .sd-body .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); margin-bottom:7px} .sd-body p{font-size:17.5px; line-height:1.55; color:var(--on-dark); max-width:54ch} .sd-panel{display:none} #lay-1:checked~.stack .sd-panel[data-l="1"],#lay-2:checked~.stack .sd-panel[data-l="2"], #lay-3:checked~.stack .sd-panel[data-l="3"],#lay-4:checked~.stack .sd-panel[data-l="4"], #lay-5:checked~.stack .sd-panel[data-l="5"]{display:block} #lay-1:checked~.stack label[for=lay-1],#lay-2:checked~.stack label[for=lay-2], #lay-3:checked~.stack label[for=lay-3],#lay-4:checked~.stack label[for=lay-4], #lay-5:checked~.stack label[for=lay-5]{border-left-color:var(--cyan); background:#2A2F35} /* ---------- tables ---------- */ .table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch} .datatable,.versus{width:100%; border-collapse:collapse; border:1px solid var(--ink); font-size:16.5px} .datatable caption,.versus caption{caption-side:bottom; text-align:left; font-family:var(--mono); font-size:12.5px; color:var(--mute-2); line-height:1.5; padding-top:12px} .datatable th,.versus th{background:var(--ink); color:var(--on-dark); font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; text-align:left; padding:14px 20px} .datatable td,.versus td{padding:18px 20px; border-top:1px solid var(--hair); vertical-align:top; line-height:1.55; color:var(--body-2)} .datatable tbody tr:nth-child(even){background:var(--zebra)} .datatable td:first-child{font-family:var(--mono); font-size:21px; color:var(--teal); white-space:nowrap} .datatable td.prose{color:var(--ink); font-size:17px} .versus tbody tr:nth-child(even){background:var(--zebra)} .versus td:first-child{font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); white-space:normal} /* ---------- article ---------- */ .post-head{padding:34px 0 0; display:grid; grid-template-columns:minmax(0,1fr) 232px; gap:0 56px; align-items:start} .post-head .kicker{grid-column:1; grid-row:1} .post-head h1{grid-column:1; grid-row:2; font-size:clamp(34px,5vw,58px); line-height:1.02; letter-spacing:-.028em; max-width:15ch; margin:12px 0 18px} .standfirst{grid-column:1; grid-row:3; font-family:var(--serif); font-size:clamp(19px,2vw,23px); line-height:1.42; color:var(--body); max-width:46ch} .post-meta{grid-column:2; grid-row:1/span 3; align-self:end; display:flex; flex-direction:column; gap:9px; border-top:2px solid var(--ink); padding-top:13px; margin:0; font-family:var(--mono); font-size:12.5px; line-height:1.35; letter-spacing:.09em; text-transform:uppercase; color:var(--mute-2)} .post-meta span:first-child{color:var(--ink)} .post-hero{margin:30px 0 0; padding-top:26px; border-top:1px solid var(--hair)} .post-hero img{width:100%; height:clamp(240px,38vw,400px); object-fit:cover; background:var(--faint)} /* asymmetric body: text column offset, wide margin for quotes/figures */ .post-body{max-width:1060px; padding:38px 0 20px} .post-body p{font-family:var(--serif); font-size:20px; line-height:1.68; color:var(--ink); margin-bottom:26px; max-width:66ch} .post-body>h2,.post-body>h3{clear:right} .post-body h2{font-size:clamp(24px,3vw,32px); line-height:1.18; letter-spacing:-.02em; margin:16px 0 18px; display:flex; gap:16px} .post-body h2 .sn{font-family:var(--mono); font-size:.55em; color:var(--cyan); letter-spacing:.06em; padding-top:.35em; flex:none} .post-body h3{font-size:22px; margin:8px 0 14px} .post-body ul,.post-body ol{font-family:var(--serif); font-size:19px; line-height:1.6; color:var(--ink); margin:0 0 26px; padding-left:22px} .post-body li{margin-bottom:10px} .post-body>p.lead::first-letter{ float:left; font-family:var(--sans); font-weight:600; font-size:74px; line-height:.78; padding:6px 12px 0 0; color:var(--ink); } .lead{font-size:21.5px !important; color:var(--ink) !important} /* margin-set pull quotes */ .pullquote{float:right; clear:right; width:334px; margin:10px 0 26px 52px; border-left:3px solid var(--cyan); padding:2px 0 2px 24px} .pullquote.inline{float:none; width:auto; max-width:60ch; margin:10px 0 30px} .pullquote p{font-family:var(--serif); font-size:24px; line-height:1.38; font-style:italic; color:var(--ink); margin:0} .pullquote cite{display:block; margin-top:12px; font-family:var(--mono); font-style:normal; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-2)} .blockquote{margin:0 0 26px; padding:22px 26px; background:var(--zebra); border-left:3px solid var(--ink)} .blockquote p{font-family:var(--serif); font-size:20px; line-height:1.55; font-style:italic; margin:0 0 10px} .blockquote cite{font-family:var(--mono); font-style:normal; font-size:12.5px; color:var(--mute)} .callout{margin:0 0 30px; border:1px solid var(--ink); background:var(--paper-2); padding:24px 26px} .callout::before{content:"Takeaway"; display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); margin-bottom:10px} .callout p{font-family:var(--sans); font-size:18px; line-height:1.55; margin:0; color:var(--ink)} .note{font-family:var(--sans) !important; font-size:16.5px !important; line-height:1.55 !important; color:var(--body-2) !important; border-left:2px solid var(--rule); padding-left:18px; margin-bottom:26px !important} .article-figure{margin:6px 0 30px} .article-figure img{width:100%; background:var(--faint); object-fit:cover} .article-figure figcaption{font-family:var(--mono); font-size:12.5px; line-height:1.5; color:var(--mute-2); margin-top:10px} .article-figure--wide{width:100%} .article-figure,.ledger,.table-wrap,.statrow,.timeline,.chart,.gallery,.callout,.profile-grid,.org-grid{clear:both} .gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:30px} .gallery figure{margin:0} .gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--faint)} .gallery figcaption{font-family:var(--mono); font-size:12px; color:var(--mute-2); margin-top:8px} .map-figure{margin:6px 0 30px} .map-slot{aspect-ratio:16/9; border:1px solid var(--hair); background: repeating-linear-gradient(45deg,var(--paper-2) 0 12px,var(--faint) 12px 24px)} .map-figure figcaption{font-family:var(--mono); font-size:12.5px; color:var(--mute-2); margin-top:10px} .post-body .table-wrap{margin-bottom:30px} .statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-bottom:30px} .statblock{background:var(--paper); padding:20px 18px; display:flex; flex-direction:column; gap:8px} .stat-num{font-family:var(--mono); font-size:clamp(24px,3vw,32px); color:var(--teal); line-height:1} .stat-label{font-size:14.5px; line-height:1.4; color:var(--body-2)} .timeline{list-style:none; padding:0; margin:0 0 30px; border-left:2px solid var(--hair)} .timeline li{display:grid; grid-template-columns:minmax(120px,190px) minmax(0,1fr); gap:6px 22px; padding:0 0 22px 22px; position:relative} .timeline li::before{content:""; position:absolute; left:-6px; top:7px; width:10px; height:10px; background:var(--cyan)} .t-when{font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--teal); line-height:1.4} .t-what{font-size:17px; line-height:1.5; color:var(--ink)} .chart{margin:0 0 30px} .chart svg{width:100%; height:auto; display:block; overflow:visible} .chart figcaption{font-family:var(--mono); font-size:12.5px; color:var(--mute-2); margin-top:12px; line-height:1.5} .chart .c-axis{stroke:var(--hair); stroke-width:1} .chart .c-bar{fill:var(--teal)} .chart .c-bar.alt{fill:var(--cyan)} .chart .c-lab{font-family:var(--mono); font-size:11px; fill:var(--mute)} .chart .c-val{font-family:var(--mono); font-size:11px; fill:var(--ink)} .chart .c-line{fill:none; stroke:var(--teal); stroke-width:2} .chart .c-dot{fill:var(--cyan)} .profile-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-bottom:30px} .profile-card{border:1px solid var(--hair); background:var(--paper-2); padding:22px} .profile-card .p-photo{width:64px; height:64px; object-fit:cover; background:var(--faint); margin-bottom:14px} .profile-card h3{font-size:19px; margin-bottom:4px} .profile-card .p-role{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-bottom:10px} .profile-card p{font-family:var(--sans); font-size:15.5px; line-height:1.5; color:var(--body-2); margin-bottom:10px} .profile-card .p-links a{font-size:15px} .profile-card .p-attr{font-family:var(--mono); font-size:11.5px; color:var(--mute-2)} .org-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:30px} .org-card{display:flex; align-items:center; gap:14px; border:1px solid var(--hair); background:var(--paper-2); padding:14px 16px; color:inherit} .org-card:hover{text-decoration:none; border-color:var(--teal)} .org-logo{width:38px; height:38px; object-fit:contain; background:var(--ink)} .org-name{display:block; font-weight:600; font-size:16px} .org-host{display:block; font-family:var(--mono); font-size:12px; color:var(--mute-2)} .entity-ref{font-family:var(--mono); font-size:.92em; white-space:nowrap} .further-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-bottom:10px} .further-grid a{background:var(--paper); padding:20px; font-size:19px; line-height:1.25; font-weight:600; color:inherit; min-height:112px; display:flex; align-items:flex-start} .further-grid a:hover{text-decoration:none; color:var(--teal); background:var(--paper-2)} .related{border-top:2px solid var(--ink); padding:20px 0 0; margin:14px 0 72px} .related h2{font-family:var(--mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:18px} .related-links{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:1px; background:var(--hair); border:1px solid var(--hair)} .related-links li{background:var(--paper); flex:1 1 240px} .related-links a{display:block; padding:20px; font-size:19px; line-height:1.25; font-weight:600; color:inherit; min-height:100px} .related-links a:hover{text-decoration:none; color:var(--teal); background:var(--paper-2)} .related-links .rl-cat{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); font-weight:400; margin-bottom:8px} /* in-article budget ledger, light variant */ .ledger{border:1px solid var(--ink); margin:6px 0 30px} .ledger-cap{background:var(--ink); padding:12px 22px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark)} .ledger-cap b{color:var(--cyan); font-weight:400} .ledger-body{background:var(--paper-2); padding:24px 22px} .ledger-row{display:grid; grid-template-columns:minmax(150px,210px) minmax(0,1fr) 170px; gap:16px; align-items:center; padding:10px 0; border-bottom:1px solid var(--faint)} .ledger-row .l-l{font-size:15.5px; font-weight:500} .ledger-track{height:10px; background:var(--faint); position:relative} .ledger-track i{position:absolute; inset:0 auto 0 0; background:var(--teal)} .ledger-nums{display:flex; justify-content:space-between; gap:10px; font-family:var(--mono); font-size:13.5px} .ledger-nums .lv{color:var(--mute-2)} /* ---------- sponsors: "The Bench" ---------- */ .bench{border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:30px 0; background:var(--paper-2)} .bench-head{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:20px} .bench-head h2{font-family:var(--mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase} .bench-head p{font-family:var(--mono); font-size:12.5px; color:var(--mute-2)} .bench-featured{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px} .bench-roll{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px} .sponsor{display:flex; flex-direction:column; gap:12px; border:1px solid var(--hair); background:var(--paper); padding:16px; color:inherit} .sponsor:hover{text-decoration:none; border-color:var(--teal)} .sponsor img{width:100%; height:64px; object-fit:contain; background:var(--ink); padding:12px} .sponsor-blurb{font-size:15px; line-height:1.45; color:var(--body-2); min-height:1.45em} .bench-featured .sponsor{flex-direction:row; align-items:center; gap:20px; padding:18px} .bench-featured .sponsor img{width:190px; height:74px; flex:none} .bench-featured .sponsor-blurb{font-size:16px} .bench-roll .sponsor img{height:52px} .bench-roll .sponsor-blurb{display:block; font-size:13.5px} .bench-note{font-family:var(--mono); font-size:11.5px; color:var(--mute-2); margin-top:16px} /* ---------- footer ---------- */ .site-foot{background:var(--ink); color:var(--on-dark-2); padding:46px 0 30px; margin-top:0} .foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:30px; padding-bottom:34px} .foot-grid h3{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); margin-bottom:12px} .foot-grid ul{list-style:none; padding:0} .foot-grid li{margin-bottom:9px} .foot-grid a{color:var(--on-dark-2); font-size:15.5px} .foot-grid a:hover{color:var(--cyan)} .foot-grid p{font-size:15.5px; line-height:1.5} .foot-bar{border-top:1px solid var(--edge); padding-top:20px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--mute-2)} /* ---------- category / index pages ---------- */ .cat-head{padding:44px 0 38px; display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:64px; align-items:end} .cat-head h1{font-size:clamp(34px,4.6vw,52px); line-height:1.04; letter-spacing:-.024em; margin-top:14px} .cat-head p{font-family:var(--serif); font-size:19px; line-height:1.6; color:var(--body)} .cat-list{list-style:none; padding:0; border-top:2px solid var(--ink)} .cat-list li{border-bottom:1px solid var(--hair)} .cat-list a{display:grid; grid-template-columns:120px minmax(0,1fr) 150px; gap:26px; align-items:baseline; padding:24px 0; color:inherit} .cat-list a:hover{text-decoration:none; background:var(--paper-2)} .cat-list a:hover .cl-t{color:var(--teal)} .cat-list .cl-n{font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; color:var(--cyan)} .cat-list .cl-t{display:block; font-size:clamp(20px,2.2vw,26px); line-height:1.2; font-weight:600; margin-bottom:6px} .cat-list .cl-d{display:block; font-family:var(--serif); font-size:17px; line-height:1.5; color:var(--body-2); max-width:64ch} .cat-list .cl-m{font-family:var(--mono); font-size:12px; color:var(--mute-2); text-align:right} .hub-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair)} .hub-card{background:var(--paper); padding:26px; display:flex; flex-direction:column; gap:12px; color:inherit; min-height:230px} .hub-card:hover{text-decoration:none; background:var(--paper-2)} .hub-card .h-n{font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--cyan)} .hub-card h2{font-size:25px; line-height:1.16} .hub-card p{font-family:var(--serif); font-size:17px; line-height:1.55; color:var(--body-2)} .hub-card ul{list-style:none; padding:0; margin-top:auto; font-family:var(--mono); font-size:12.5px; color:var(--mute)} .hub-card li{padding-top:6px} /* CSS-only expander */ .more-toggle{position:absolute; opacity:0; pointer-events:none} .more-wrap{display:none} .more-toggle:checked~.more-wrap{display:block} .more-btn{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:12px 22px; margin-top:26px; cursor:pointer; border:1px solid var(--ink); font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink)} .more-btn:hover{background:var(--ink); color:var(--paper)} .more-toggle:checked~.more-btn{display:none} /* simple prose pages */ .page-body{max-width:74ch; padding:44px 0 40px} .page-body h1{font-size:clamp(32px,4.4vw,52px); line-height:1.04; letter-spacing:-.024em; margin-bottom:22px} .page-body h2{font-size:26px; margin:34px 0 14px} .page-body p{font-family:var(--serif); font-size:19.5px; line-height:1.68; margin-bottom:24px; color:var(--ink)} .page-body ul{font-family:var(--serif); font-size:19px; line-height:1.6; padding-left:22px; margin-bottom:24px} .page-body li{margin-bottom:8px} .contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-bottom:30px} .contact-grid div{background:var(--paper); padding:22px} .contact-grid h3{display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin-bottom:10px} .contact-grid svg{flex:none} .contact-grid p{font-family:var(--sans); font-size:16px; line-height:1.5; color:var(--body-2); margin:0} /* styleguide scaffolding */ .sg-item{padding:34px 0; border-top:1px solid var(--hair)} .sg-item>h2{font-family:var(--mono); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); margin-bottom:20px} .sg-note{font-family:var(--mono); font-size:12px; color:var(--mute-2); margin-bottom:18px} .sg-swatches{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px} .sg-swatch{border:1px solid var(--hair)} .sg-swatch i{display:block; height:64px} .sg-swatch span{display:block; font-family:var(--mono); font-size:11.5px; padding:8px 10px; color:var(--body-2)} .sg-demo{max-width:var(--measure)} /* ---------- responsive ---------- */ @media (max-width:1080px){ .hero{grid-template-columns:1fr; gap:28px} .hero-fig img{flex:none; height:clamp(220px,40vw,320px); min-height:0} .lb-grid,.stack,.cat-head{grid-template-columns:1fr; gap:28px} .pullquote{float:none; width:auto; max-width:64ch; margin:10px 0 30px} .cards{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px} .readouts{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:1060px){ .burger{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:10px 14px; border:1px solid var(--ink); font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer} .nav{display:none; flex-direction:column; align-items:stretch; gap:0; width:100%; padding-bottom:18px} .nav-toggle:checked~nav .nav{display:flex} .head-row{flex-wrap:wrap; row-gap:16px} .nav>li{border-top:1px solid var(--hair)} .nav>li>a{padding:14px 0; font-size:17px; min-height:44px} .nav>li::after{display:none} .nav-sub{position:static; opacity:1; visibility:visible; transform:none; display:none; margin:0 0 10px; min-width:0; box-shadow:none} .sub-toggle:checked~.nav-sub{display:block} .sub-label{position:absolute; right:0; top:6px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer} .sub-label::after{content:""; width:8px; height:8px; border-right:2px solid var(--body); border-bottom:2px solid var(--body); transform:translateY(-2px) rotate(45deg)} .sub-toggle:checked~.sub-label::after{transform:translateY(2px) rotate(-135deg)} .has-sub>a::after{display:none} .lb-row,.lb-total{grid-template-columns:1fr; gap:8px; padding:14px 0} .lb-nums{font-size:13.5px} .ledger-row{grid-template-columns:1fr; gap:8px} .timeline li{grid-template-columns:1fr; gap:4px} .ruler{height:132px} .ruler-band em{display:none} } @media (max-width:640px){ body{font-size:16.5px} .cards{grid-template-columns:1fr} .readouts{grid-template-columns:1fr} .post-body p{font-size:18.5px} .lead{font-size:20px !important} .post-body>p.lead::first-letter{font-size:58px} .ribbon-cell{flex:1 1 45%; border-left:0; padding-left:0} .band{padding:40px 0 44px} } @media print{ .site-head,.site-foot,.bench,.ribbon,.more-btn{display:none} body{background:#fff} } /* additions */ .dec-end{position:absolute; right:0; bottom:0; border-left:0 !important; text-align:right; padding-right:6px; flex:none !important} .hero h1 a{color:inherit} .hero h1 a:hover{color:var(--teal); text-decoration:none} .rail--home{margin-top:30px} .stack-h2,.band-intro h2.sm{font-size:clamp(26px,3.2vw,38px)} .band-intro--light{color:var(--body)} .band-intro--light p{color:var(--body-2)} .ctrl-lab--sp{margin:24px 0 12px} .ctrl-lab--cy{color:var(--cyan)} .mt8{margin-top:8px}.mt14{margin-top:14px}.mt16{margin-top:16px}.mt22{margin-top:22px}.mt36{margin-top:36px} .stack-col-wrap{display:grid; gap:26px} .sd-panel p.owns{margin-bottom:22px} .sd-panel p{margin-bottom:0} .foot-link-cy{color:var(--cyan)} .lead-card{display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:34px; padding-bottom:34px; margin-bottom:34px; border-bottom:1px solid var(--hair)} .lead-card img{aspect-ratio:3/2} .lead-card .c-t{font-size:clamp(26px,3.4vw,38px); -webkit-line-clamp:3; min-height:0; margin:12px 0; display:block} .lead-card .c-d{font-size:19px; display:block} .lead-card .c-meta{display:block; margin-top:16px} .band--flush{padding-top:0} .band--tight{padding-bottom:20px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (max-width:860px){ .lead-card{grid-template-columns:1fr; gap:20px} } @media (max-width:1060px){ .nav{display:none} .nav-toggle:checked~nav .nav{display:flex} } @media (max-width:980px){ .ribbon-in{display:grid; grid-template-columns:repeat(3,1fr); gap:0} .ribbon-cell,.ribbon-cell.span2{flex:none; padding:11px 0 11px 14px; border-left:1px solid var(--faint)} .ribbon-cell:nth-child(3n+1){border-left:0; padding-left:0} } @media (max-width:520px){ .ribbon-in{grid-template-columns:repeat(2,1fr)} .ribbon-cell:nth-child(3n+1){border-left:1px solid var(--faint); padding-left:14px} .ribbon-cell:nth-child(2n+1){border-left:0; padding-left:0} } .ruler-band.narrow em{display:none} .ruler-band.narrow b{letter-spacing:.1em} /* charts: line + donut */ .chart .c-seg{transition:none} .donut-row{display:flex; align-items:center; gap:32px; flex-wrap:wrap} .donut-row svg{width:200px; flex:none} .donut-key{list-style:none; padding:0; display:flex; flex-direction:column; gap:12px} .donut-key li{display:flex; align-items:baseline; gap:12px; font-size:16px; color:var(--body-2)} .donut-key i{width:12px; height:12px; flex:none; transform:translateY(1px)} .donut-key b{font-family:var(--mono); color:var(--ink); min-width:44px} .org-card.no-logo{padding:16px 18px} .profile-card.no-photo{border-left:3px solid var(--cyan)} .sg-item .table-wrap,.sg-item .statrow,.sg-item .timeline,.sg-item .chart{max-width:1060px} .band-intro--tight{margin-bottom:22px} /* section-card grids at fixed column counts */ .hub-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))} .hub-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} .hub-grid--5 .hub-card,.hub-grid--4 .hub-card{padding:22px 20px; min-height:0; gap:10px} .hub-grid--5 .hub-card h2,.hub-grid--4 .hub-card h2{font-size:21px; line-height:1.14} .hub-grid--5 .hub-card p,.hub-grid--4 .hub-card p{font-size:16px; line-height:1.45} .hub-grid--5 .hub-card ul,.hub-grid--4 .hub-card ul{font-size:12px; line-height:1.35; padding-top:6px; border-top:1px solid var(--faint); margin-top:14px} .hub-grid--5 .hub-card li,.hub-grid--4 .hub-card li{padding-top:5px} @media (max-width:1080px){ .hub-grid--5,.hub-grid--4{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:760px){ .hub-grid--5,.hub-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:520px){ .hub-grid--5,.hub-grid--4{grid-template-columns:1fr} } @media (max-width:900px){ .post-head{grid-template-columns:1fr; gap:0} .post-head .kicker,.post-head h1,.standfirst{grid-column:1} .post-meta{grid-column:1; grid-row:auto; flex-direction:row; flex-wrap:wrap; gap:8px 20px; margin-top:22px; align-self:start} .standfirst{max-width:56ch} } @media (max-width:640px){ .related{margin-bottom:48px} } /* the two bench tiers sit together at the foot of the page */ .bench--pair{border-bottom:0; padding-bottom:26px} .bench--roll{border-top:0; padding-top:8px} .bench--roll .bench-head{margin-bottom:16px} @media (max-width:640px){ input[type=range]{height:44px} .band-head .note-r a{display:inline-flex; align-items:center; min-height:44px} .figcap a,.footline a{display:inline-flex; align-items:center; min-height:40px} } @media (max-width:640px){ .ruler-band.narrow b{display:none} } @media (max-width:640px){ .ruler-decades span{overflow:hidden; font-size:9.5px; letter-spacing:0} .ruler-decades span:nth-child(2),.ruler-decades span:nth-child(4){visibility:hidden} .dec-end{display:none} } /* tablet band (≈640–1080px) */ @media (max-width:1080px){ .hub-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:860px){ input[type=range]{height:44px} .band-head .note-r a{display:inline-flex; align-items:center; min-height:44px} } @media (max-width:640px){ .bench-featured{grid-template-columns:1fr} .bench-featured .sponsor{flex-direction:column; align-items:stretch} .bench-featured .sponsor img{width:100%} .cat-list a{grid-template-columns:1fr; gap:8px} .cat-list .cl-m{text-align:left} } /* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */ .sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px} /* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's size. width:100% (or one fixed width where copy shares the row) + one height for the tier + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside it. A ground and an inset are added ONLY where none exists — adding a second ground gives co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */ .bench-featured .sponsor.sponsor img{height:74px!important;display:block!important;width:131px!important;max-width:100%!important;flex:none!important} /* op-bigger-and-4up: operator: increase the logo size in general, and the two bottom rows four items max per row. .bench-roll auto-fit at minmax(180px,1fr) was fitting six across; four columns above 900px (Design's auto-fit still owns narrow screens), which also gives the roll tile the width to carry a taller plate. Featured 74 -> 88px, roll 52 -> 64px. */ @media (min-width:900px){ .bench-roll{grid-template-columns:repeat(4,1fr)} } /* ⚠️ the featured mark is pinned by sp-mark-frame at three classes — `.bench-featured .sponsor.sponsor img{height:74px!important;width:131px!important}` — which is also why it measured 111px wide inside a tile with 436px of space to its right. Matched here, and the plate takes the 190px column Design gave it. */ .bench-featured .sponsor.sponsor img{height:88px!important;width:190px!important} .bench-roll .sponsor.sponsor img{height:64px!important} /* op-recentre-plate: the money mark sat off-centre in its own plate (measured 122px of skew: 0px on one side, 122px on the other, with a 190px mark in a 312px plate). ⚠️ THE CAUSE IS OURS, NOT DESIGN'S: sp-mark-frame forces display:block on the plate, which replaces the flex centring Design put there — and with the mark capped by a max-width and no auto margins it drifts to one side. Rather than fight the block display, the mark itself is centred with auto inline margins, which works whatever the plate's display ends up being. */ a.sp-logo{text-align:center} a.sp-logo > img{display:block!important;margin-inline:auto!important} /* op-drawer-row-width: operator — "dotted open menu icons are overlapping". The drawer opened only 191px wide while its labels ("Standards & Generations", "Critical Communications") are wider than that, so each row's chevron — pinned to the right edge of a 191px row — sat on top of the text. Cause: `.head-row` is a wrapping flex row of a.brand 232px + label.burger 65px +