.scale-panel { display:grid; grid-template-columns:2fr 1fr; gap:28px; padding:42px 5vw; border-top:1px solid var(--black); background:#fff; } .scale-panel h2 { font-size:32px; } .scale-panel p:not(.eyebrow) { max-width:680px; line-height:1.6; } .scale-panel code { font-family:"Courier New",monospace; font-size:.9em; } .scale-control { border:1px solid var(--black); padding:24px; align-self:center; } .scale-control > p:first-child { font:12px "Courier New",monospace; line-height:1.6; min-height:38px; } .scale-buttons { display:flex; align-items:center; justify-content:space-between; gap:18px; } .scale-buttons strong { font:54px Georgia,serif; } button { width:54px; height:54px; border:1px solid var(--black); border-radius:0; background:var(--black); color:var(--white); font:34px Georgia,serif; cursor:pointer; } button:hover:not(:disabled) { background:var(--red); border-color:var(--red); } button:disabled { cursor:not-allowed; color:#777; background:#e4e4e0; border-color:#aaa; } .scale-message { min-height:22px; margin:16px 0 0; color:#5a1111; font-size:13px; } @media (max-width:760px) { .scale-panel { display:block; } .scale-control { margin-top:24px; } }
:root { --black:#0A0A0A; --white:#FAFAFA; --off:#F2F2F0; --red:#CC0000; --red-l:#F8EDED; --green:#1A5C1A; --green-l:#EAF2EA; --gold:#B8921A; }
* { box-sizing:border-box; } body { margin:0; color:var(--black); background:var(--white); font-family:Inter,Arial,sans-serif; } .masthead { display:flex; justify-content:space-between; align-items:center; padding:20px 5vw; border-bottom:1px solid #d3d3d0; font-size:13px; letter-spacing:.03em; } .brand { font-family:Georgia,serif; font-size:18px; font-weight:bold; } .brand span { color:var(--red); } .kicker,.eyebrow,footer { font-family:"Courier New",monospace; font-size:11px; letter-spacing:.12em; } main { max-width:1280px; margin:auto; } .hero { padding:82px 5vw 58px; background:var(--off); border-bottom:8px solid var(--black); } .eyebrow { color:var(--red); font-weight:bold; } h1,h2 { font-family:Georgia,serif; margin:.2em 0; } h1 { font-size:clamp(48px,8vw,104px); line-height:.88; letter-spacing:-.06em; } h1 em { color:var(--red); font-weight:normal; } .lede { font-size:20px; max-width:620px; line-height:1.55; margin:32px 0; } .status-line { display:flex; flex-wrap:wrap; gap:12px; align-items:center; font-size:14px; } .status-line strong { letter-spacing:.08em; } .dot { width:12px; height:12px; border-radius:50%; background:var(--gold); display:inline-block; } .dot.healthy { background:var(--green); } .dot.attention,.dot.unknown { background:var(--red); } .metrics { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--black); } .metrics article { min-height:178px; padding:26px 24px; border-right:1px solid var(--black); } .metrics article:last-child { border:0; } .metrics p { font:11px "Courier New",monospace; letter-spacing:.09em; margin:0 0 24px; } .metrics strong { display:block; font:44px Georgia,serif; line-height:1; } .metrics span { font-size:12px; color:#4a4a4a; } .detail-grid { display:grid; grid-template-columns:repeat(3,1fr); } .detail { padding:38px 28px; min-height:265px; border-right:1px solid var(--black); } .detail:last-child { border:0; } .detail h2 { font-size:31px; } .detail p:not(.eyebrow) { font-size:15px; line-height:1.6; } .boundary { background:var(--red-l); } .capacity { margin-top:30px; font-family:"Courier New",monospace; font-size:14px; line-height:2; } footer { display:flex; justify-content:space-between; gap:20px; padding:18px 5vw; color:var(--white); background:var(--black); } @media (max-width:760px) { .masthead,.metrics,.detail-grid,footer { display:block; } .masthead > *,footer > * { display:block; margin-bottom:10px; } .metrics article,.detail { border-right:0; border-bottom:1px solid var(--black); min-height:auto; } }