:root { --ink:#24211d; --muted:#5d625c; --paper:#ffffff; --panel:#ffffff; --line:#dfd5c6; --forest:#315749; --ember:#ab4f2d; --gold:#ca8e36; --low:#719378; --high:#b85134; --medium:#cb913d; }
* { box-sizing:border-box; } body { margin:0; background:#ffffff; color:var(--ink); font:16px/1.68 "Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif; }
.skip-link { position:absolute; left:-999px; } .skip-link:focus { left:1rem; top:1rem; z-index:10; background:#fff; padding:.7rem; }
.hero, main, footer { width:min(1160px, calc(100% - 2.5rem)); margin:auto; } .hero { position:relative; isolation:isolate; min-height:27rem; margin-top:1.4rem; padding:2.7rem 3rem 3.5rem; overflow:hidden; border:1px solid #7b512e; border-radius:7px 7px 24px 24px; background:#50321f url("assets/rim-fire-2013.png") center 58% / cover no-repeat; color:#fffdf8; box-shadow:0 16px 38px rgba(62,44,30,.18); } .hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(22,24,20,.72) 0%,rgba(22,24,20,.43) 51%,rgba(22,24,20,.12) 100%); } .hero-layout { display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; } .eyebrow { text-transform:uppercase; letter-spacing:.1em; color:var(--forest); font-size:.76rem; font-weight:800; margin:0 0 .45rem; } .hero .eyebrow { color:#ffe0a2; } h1 { font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif; font-size:clamp(2.5rem, 6vw, 5.15rem); font-weight:700; letter-spacing:-.035em; line-height:1.04; max-width:12ch; margin:.1rem 0 1rem; } h2 { font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif; font-size:1.55rem; font-weight:700; line-height:1.25; margin:.2rem 0 .65rem; } .hero-copy { max-width:52ch; font-size:1.12rem; color:#fff8ed; } .project-byline { width:17rem; flex:0 0 17rem; margin:0; padding:1rem; border:1px solid rgba(255,253,248,.44); border-radius:4px; background:rgba(24,28,23,.48); backdrop-filter:blur(4px); text-align:center; } .project-byline img { display:block; width:8.4rem; height:8.4rem; margin:0 auto .8rem; border:3px solid #f7efe1; border-radius:50%; object-fit:cover; object-position:center; box-shadow:0 8px 24px rgba(0,0,0,.28); background:#dce8df; } .project-byline figcaption { color:#f7f1e7; font-size:1rem; line-height:1.42; } .project-byline strong { display:block; color:#fffdf8; font-size:1.26rem; } .project-byline span { display:block; margin-top:.28rem; font-weight:700; } .photo-credit { position:absolute; right:1.2rem; bottom:.7rem; margin:0; color:#fffdf8; font-size:.72rem; text-shadow:0 1px 3px #000; } .photo-credit a { color:#fffdf8; text-decoration-color:#ffe0a2; text-underline-offset:2px; } .safety-note { position:relative; max-width:48rem; margin:1.6rem 0 0; padding:.7rem .85rem; border-left:3px solid #ffe0a2; background:rgba(28,30,25,.58); color:#fffdf8; font-size:.88rem; }
main { display:grid; gap:1.6rem; padding:1.8rem 0 3rem; } .status-panel, .panel, .summary-grid article, .learn-panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 6px 18px rgba(56,40,25,.07); } .status-panel { padding:1.35rem; display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; } .status-panel p { margin:.25rem 0; color:var(--muted); } .updated-at { white-space:nowrap; font-size:.87rem; } .risk-date { max-width:72ch; font-size:.87rem; }
.state-loading { position:fixed; z-index:40; top:1rem; left:50%; width:min(28rem,calc(100vw - 2rem)); padding:.8rem 1rem; transform:translateX(-50%); border:1px solid #b9d0c0; border-radius:12px; background:#fffdf9; box-shadow:0 14px 36px rgba(16,42,50,.22); }.loading-copy { display:flex; justify-content:space-between; gap:1rem; color:var(--ink); font-size:.88rem; font-weight:750; }.loading-copy strong { font-variant-numeric:tabular-nums; }.loading-track { height:.52rem; margin-top:.55rem; overflow:hidden; border-radius:999px; background:#dce8df; }.loading-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--forest),#5f9e75); transition:width .18s ease; }
.summary-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; } .summary-grid article { padding:1.18rem; border-top:4px solid #d4b77d; } .summary-grid p, .summary-grid span { margin:0; color:var(--muted); font-size:.9rem; display:block; } .summary-grid strong { font-family:Lora,Georgia,serif; font-size:2rem; display:block; margin:.15rem 0; }
.content-grid { display:grid; grid-template-columns:minmax(0, 1.8fr) minmax(260px, .8fr); gap:1.25rem; } .panel { padding:1.55rem; } .panel-heading { display:flex; justify-content:space-between; gap:1rem; } .legend { color:var(--muted); font-size:.8rem; white-space:nowrap; } .swatch { width:.62rem; height:.62rem; display:inline-block; border-radius:50%; margin:0 .22rem 0 .45rem; } .swatch.high { background:var(--high); }.swatch.medium { background:var(--medium); }.swatch.low { background:var(--low); }.panel-intro, .state-detail p, .methodology p { color:var(--muted); }
.state-map { display:grid; grid-template-columns:repeat(12, minmax(2.25rem, 1fr)); grid-template-rows:repeat(9, 3rem); gap:.28rem; margin:1.2rem 0 .2rem; padding:.55rem; background:linear-gradient(135deg,#edf3ef,#f8fbf7); border:1px solid #dae6dd; border-radius:13px; overflow-x:auto; } .state-button { min-height:2.7rem; border:1px solid color-mix(in srgb, var(--risk-color, #e2e7e0), #fff 35%); border-radius:8px; background:var(--risk-color, #e2e7e0); color:var(--ink); font-weight:850; cursor:pointer; box-shadow:0 1px 0 #ffffff9c inset; } .state-button[data-band="High"] { color:#4b1608; }.state-button:hover,.state-button:focus-visible { outline:3px solid var(--forest); outline-offset:2px; transform:translateY(-1px); }.state-button[disabled] { cursor:not-allowed; opacity:.7; }
.firms-live-badge { display:inline-flex; align-items:center; gap:.5rem; margin:.2rem 0 .25rem; padding:.45rem .7rem; border:1px solid #f0ad74; border-radius:999px; background:#fff0e6; color:#873315; font-size:.78rem; font-weight:800; }.firms-live-badge span { width:.62rem; height:.62rem; border-radius:50%; background:#f04d23; box-shadow:0 0 0 0 #f04d2399; animation:live-pulse 1.4s ease-out infinite; }.firms-live-badge.is-unavailable { color:#705a47; border-color:#d8cab8; background:#f6f0e7; }.firms-live-badge.is-unavailable span { background:#a98e76; animation:none; }.firms-conditions { border-color:#f0c6ad; background:#fff4ec; } @keyframes live-pulse { 70% { box-shadow:0 0 0 9px #f04d2300; } 100% { box-shadow:0 0 0 0 #f04d2300; } }
.map-cta { margin:.75rem 0 .25rem; padding:.65rem .8rem; border-left:4px solid var(--forest); border-radius:0 8px 8px 0; background:#e2efe9; color:var(--ink); }
.metrics { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin:1.25rem 0; }.metrics div { border-top:1px solid var(--line); padding-top:.55rem; }.metrics dt { color:var(--muted); font-size:.8rem; }.metrics dd { margin:.08rem 0; font-size:1.15rem; font-weight:800; }.live-conditions { margin:1.25rem 0; padding:1rem; border:1px solid #c9ddd0; border-radius:12px; background:#edf5ef; }.live-conditions h3 { margin:.1rem 0 .45rem; font-size:1rem; }.live-conditions p { margin:.35rem 0; font-size:.9rem; }.live-time { color:var(--muted); font-size:.8rem !important; }.resource-link { color:var(--forest); font-weight:800; }
.learn-panel { padding:1.7rem; display:grid; grid-template-columns:.85fr 1.4fr; gap:1.8rem; background:#e8efe6; border-left:5px solid #74937d; }.learn-panel ol { margin:0; padding-left:1.2rem; }.learn-panel li { margin:.55rem 0; }.methodology a { color:var(--forest); font-weight:800; } footer { padding:1.8rem 0 3rem; color:var(--muted); font-size:.88rem; }
.concentration-panel { padding-bottom:1.55rem; }.panel-meta { font-size:.84rem; color:var(--muted); }.concentration-list { display:grid; gap:.45rem; margin-top:1.2rem; }.concentration-row { display:grid; grid-template-columns:2.5rem minmax(7.5rem, 1fr) minmax(8rem, 3fr) 3.8rem; gap:.65rem; align-items:center; width:100%; text-align:left; border:0; border-radius:8px; padding:.38rem .45rem; background:transparent; color:var(--ink); cursor:pointer; }.concentration-row:hover,.concentration-row:focus-visible { background:#edf3ef; outline:2px solid var(--forest); }.rank { font:700 .78rem/1 ui-monospace,monospace; color:var(--muted); }.chart-state { font-weight:760; }.bar-track { height:.72rem; overflow:hidden; border-radius:999px; background:#e3e8e2; }.bar-fill { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#dcaa43,#ca552d); }.concentration-row strong { text-align:right; font-variant-numeric:tabular-nums; }.empty-chart { color:var(--muted); }
.county-panel { position:fixed; z-index:30; inset:clamp(.75rem,2.5vw,2rem); width:min(1080px,calc(100vw - 1.5rem)); max-height:calc(100dvh - 1.5rem); margin:auto; overflow:auto; background:var(--panel); box-shadow:0 24px 70px rgba(16,42,50,.45); }.county-panel:focus { outline:none; } body.county-open { overflow:hidden; }.county-controls { display:flex; align-items:center; justify-content:flex-end; gap:.8rem; }.county-controls .panel-meta { margin:0; }.county-close { border:1px solid var(--line); border-radius:999px; padding:.45rem .85rem; background:var(--paper); color:var(--ink); font:inherit; font-weight:700; cursor:pointer; }.county-close:hover,.county-close:focus-visible { border-color:var(--accent); outline:2px solid var(--accent); outline-offset:2px; }.county-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(13rem,.65fr); gap:1rem; align-items:stretch; margin-top:1rem; }.county-map-wrap { min-height:31rem; display:grid; place-items:center; overflow:hidden; border-radius:14px; background:radial-gradient(circle at 40% 35%,#edf7f0,#dcebe1); border:1px solid #d4e1d8; }.county-map-wrap svg { width:min(100%,40rem); height:auto; max-height:37rem; }.county-path { stroke:#fffdf9; stroke-width:1; opacity:0; transform-box:fill-box; transform-origin:center; animation:county-reveal .55s cubic-bezier(.16,1,.3,1) forwards; cursor:pointer; }.county-path:hover,.county-path:focus { stroke:#102a32; stroke-width:2.5; outline:none; filter:brightness(.9); }.state-overview-tile rect { stroke:#fffdf9; stroke-width:1; }.state-overview-tile text { fill:#102a32; font:700 11px/1 ui-sans-serif,system-ui,sans-serif; pointer-events:none; }.state-overview-tile.selected rect { stroke:#102a32; stroke-width:3; filter:brightness(.9); }.state-overview-tile.selected text { font-weight:900; }.county-tooltip { padding:1.15rem; border-radius:12px; background:#f7f3ea; border:1px solid var(--line); }.county-tooltip h3 { font-family:Georgia,serif; font-size:1.35rem; margin:.2rem 0 .6rem; }.county-tooltip p { color:var(--muted); }.county-metrics { display:grid; grid-template-columns:1fr; gap:.7rem; }.county-metrics div { border-top:1px solid var(--line); padding-top:.55rem; }.county-metrics dt { font-size:.78rem; color:var(--muted); }.county-metrics dd { margin:.1rem 0; font-size:1.1rem; font-weight:800; }.county-note { font-size:.83rem; }.map-loading { fill:var(--muted); font-size:16px; } @keyframes county-reveal { from { opacity:0; transform:scale(.78); } to { opacity:1; transform:scale(1); } }
.firms-dot { fill:#f04d23; stroke:#fff8e9; stroke-width:1.4; opacity:.9; filter:drop-shadow(0 1px 2px #64200d88); animation:firms-pulse 1.6s ease-in-out infinite; pointer-events:auto; } @keyframes firms-pulse { 50% { opacity:.45; transform:scale(1.25); transform-origin:center; } }
@media (max-width:760px) { .hero,main,footer{width:min(100% - 1.3rem,1160px)}.hero{min-height:0;margin-top:.65rem;padding:2.3rem 1.35rem 4rem}.hero-layout{display:block}.project-byline{width:auto; margin:1.4rem 0 0; text-align:left}.project-byline img{width:7.5rem;height:7.5rem;margin:0 0 .75rem}.project-byline figcaption{font-size:1.08rem}.project-byline strong{font-size:1.35rem}.photo-credit{right:1.25rem;left:1.25rem;bottom:.85rem}.summary-grid,.content-grid,.learn-panel,.county-layout{grid-template-columns:1fr}.status-panel{display:block}.updated-at{white-space:normal}.state-map{grid-template-columns:repeat(12,2.6rem); min-width:38rem}.legend{white-space:normal}.panel-heading{display:block}.concentration-row{grid-template-columns:2rem minmax(5.5rem,1fr) minmax(4rem,2fr) 3.2rem;gap:.35rem;font-size:.85rem}.county-map-wrap{min-height:24rem} }