@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;600;700&display=swap');
:root { --navy:#071d2d; --ink:#17242d; --red:#d71920; --ash:#e9edef; --line:#cbd5da; --muted:#64747f; --white:#fff; --green:#42a85f; --yellow:#f2df37; --orange:#f7aa35; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--ash); font-family:"DM Sans",sans-serif; }
button,a { font:inherit; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:1rem; top:1rem; z-index:50; padding:.7rem; background:#fff; }
.topbar { min-height:86px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; padding:0 clamp(1.25rem,5vw,6rem); color:#fff; background:var(--navy); border-bottom:5px solid var(--red); }
.brand { display:flex; align-items:center; gap:.8rem; color:inherit; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; border:2px solid #fff; border-radius:50%; font-family:"Archivo Black"; }
.brand span:last-child { display:grid; }
.brand small { opacity:.65; }
.update-state { display:flex; align-items:center; gap:.65rem; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.update-state i { width:9px; height:9px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 7px rgba(247,170,53,.15); }
.update-state.current i { background:var(--green); box-shadow:0 0 0 7px rgba(66,168,95,.15); }
.update-state.stale i { background:var(--red); box-shadow:0 0 0 7px rgba(215,25,32,.15); }
.portal-link { justify-self:end; color:#fff; font-weight:700; text-underline-offset:4px; }
main { max-width:1700px; margin:auto; background:#fff; }
.hero { min-height:510px; display:grid; grid-template-columns:1.25fr .75fr; gap:5rem; align-items:end; padding:clamp(3rem,7vw,7rem) clamp(1.25rem,5vw,6rem); color:#fff; background:linear-gradient(120deg,rgba(7,29,45,.97),rgba(7,29,45,.8)),linear-gradient(90deg,var(--green) 0 25%,var(--yellow) 25% 50%,var(--orange) 50% 75%,var(--red) 75%); }
.eyebrow { margin:0 0 .8rem; color:var(--red); font-size:.72rem; font-weight:800; letter-spacing:.17em; }
h1,h2,h3 { font-family:"Archivo Black",sans-serif; }
h1 { margin:0; max-width:1000px; font-size:clamp(3.2rem,6.9vw,7.4rem); line-height:.84; letter-spacing:-.055em; }
h1 em { color:var(--red); font-style:normal; }
.hero-copy { max-width:39rem; font-size:1.06rem; line-height:1.7; }
.notice { padding-left:1rem; border-left:3px solid var(--red); color:rgba(255,255,255,.72); font-size:.88rem; }
.status-section,.scale-section { padding:clamp(3.5rem,6vw,6rem) clamp(1.25rem,5vw,6rem); }
.status-section { background:var(--ash); }
.section-head { display:grid; grid-template-columns:1fr auto; align-items:end; gap:3rem; margin-bottom:2rem; }
.section-head h2 { margin:0; font-size:clamp(2rem,4vw,4.3rem); line-height:.95; }
.freshness { display:grid; justify-items:end; gap:.3rem; }
.freshness span { color:var(--muted); font-size:.65rem; font-weight:800; letter-spacing:.1em; }
.freshness strong { color:var(--red); }
.freshness button { margin-top:.45rem; padding:.55rem .8rem; border:1px solid var(--navy); color:#fff; background:var(--navy); font-weight:700; cursor:pointer; }
.status-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(320px,.6fr); gap:1rem; align-items:stretch; }
.status-card,.scale-card { margin:0; background:#fff; }
.status-card { min-width:0; overflow:hidden; }
.status-card-head { display:flex; justify-content:space-between; gap:1rem; padding:1.3rem 1.5rem; color:#fff; background:var(--navy); }
.status-card-head span { color:#aab8c0; text-align:right; }
.status-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; min-height:440px; border-top:5px solid var(--red); background:var(--line); }
.status-row { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-width:0; min-height:160px; padding:1.35rem; overflow:hidden; background:#fff; isolation:isolate; }
.status-row::before { content:""; position:absolute; inset:0 auto 0 0; width:7px; background:var(--level-color,#c9ced1); }
.status-row.featured { grid-row:span 2; min-height:321px; color:#fff; background:linear-gradient(145deg,#071d2d 0%,#123746 100%); }
.status-row.featured::before { width:12px; }
.status-topline { position:absolute; top:1.25rem; right:1.25rem; left:1.35rem; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.status-code { color:var(--muted); font-size:.62rem; font-weight:800; letter-spacing:.15em; }
.featured .status-code { color:rgba(255,255,255,.62); }
.status-bars { display:flex; align-items:flex-end; gap:3px; height:18px; }
.status-bars i { display:block; width:5px; height:7px; background:#d8dfe2; }
.status-bars i:nth-child(2) { height:10px; }
.status-bars i:nth-child(3) { height:14px; }
.status-bars i:nth-child(4) { height:18px; }
.status-bars i.active { background:var(--level-color); }
.status-volcano { position:relative; z-index:2; margin:0; max-width:85%; font-family:"Archivo Black",sans-serif; font-size:clamp(1.25rem,2.3vw,2.25rem); line-height:1; }
.featured .status-volcano { max-width:90%; font-size:clamp(2rem,4.2vw,4.1rem); }
.status-level { position:relative; z-index:2; margin-top:.55rem; color:var(--level-color); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; }
.status-description { position:relative; z-index:2; max-width:28rem; margin:.75rem 0 0; color:var(--muted); font-size:.76rem; line-height:1.45; }
.featured .status-description { color:#b9c8cf; }
.status-rank { position:absolute; right:-.08em; bottom:-.32em; z-index:1; color:var(--level-color); font-family:"Archivo Black",sans-serif; font-size:9rem; line-height:1; opacity:.11; }
.featured .status-rank { right:-.03em; bottom:-.26em; font-size:19rem; opacity:.16; }
.loading,.status-error { margin:0; padding:2rem; color:var(--muted); }
.status-error { border-left:5px solid var(--red); }
.image-button { position:relative; display:grid; place-items:center; width:100%; min-height:560px; padding:1.5rem; border:0; background:#fff; cursor:zoom-in; }
.image-button img { display:block; max-width:100%; max-height:720px; object-fit:contain; }
.image-button>span { position:absolute; right:1rem; bottom:1rem; padding:.6rem .8rem; color:#fff; background:rgba(7,29,45,.9); font-size:.7rem; font-weight:800; letter-spacing:.08em; }
.context-card { padding:clamp(2rem,4vw,4rem); color:#fff; background:var(--navy); }
.context-card h3 { margin:.3rem 0 1.5rem; font-size:clamp(1.7rem,3vw,3rem); line-height:1; }
.context-card p,.context-card li { color:#b6c2c9; line-height:1.6; }
.context-card ul { padding-left:1.2rem; }
.context-card a { display:flex; justify-content:space-between; margin-top:2rem; padding-top:1rem; color:#fff; border-top:1px solid #47606e; font-weight:700; }
.scale-section { background:#fff; }
.scale-head>p { max-width:32rem; margin:0; color:var(--muted); line-height:1.6; }
.scale-card { border:1px solid var(--line); overflow:auto; }
.scale-button { min-width:1000px; min-height:0; padding:0; }
.scale-button img { width:100%; max-width:none; max-height:none; }
dialog { width:min(1600px,96vw); height:min(1000px,94vh); padding:0; border:0; color:#fff; background:#071722; box-shadow:0 30px 90px rgba(0,0,0,.5); }
dialog::backdrop { background:rgba(2,10,16,.9); }
.viewer-head { min-height:92px; display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem; }
.viewer-head h2 { margin:0; }
.viewer-head button { border:0; color:#fff; background:transparent; font-size:2.2rem; cursor:pointer; }
.viewer-body { height:calc(100% - 92px); overflow:auto; background:#101d25; }
.viewer-body img { display:block; max-width:none; min-width:100%; height:auto; margin:auto; object-fit:contain; }
footer { display:flex; justify-content:space-between; gap:1rem; padding:2rem clamp(1.25rem,5vw,6rem); color:#fff; background:var(--navy); }
@media (max-width:1000px) { .topbar { grid-template-columns:1fr auto; } .update-state { display:none; } .hero,.status-layout { grid-template-columns:1fr; gap:2rem; } .section-head { grid-template-columns:1fr; } .freshness { justify-items:start; } }
@media (max-width:700px) { .portal-link { display:none; } .image-button { min-height:0; padding:.8rem; } .status-card-head { display:grid; } .status-card-head span { text-align:left; } .status-list { grid-template-columns:1fr; } .status-row,.status-row.featured { grid-row:auto; min-height:190px; } .status-row.featured { min-height:280px; } footer { display:grid; } }