/* ============================================================================
   Forecast Michigan — shared network theme, Great Lakes State character.
   Sibling of weather.city + squall.cloud; companion of the other Forecast <State>
   sites. Same Overpass type and Interstate guide-sign color system —
       GREEN  #04663d  guide / primary          (regions, wayfinding)
       BLUE   #0a5ca8  services / action        (cities, search, links)
       BROWN  #6b4b2f  recreation / culture      (parks, trails, water)
       RED    #b0242e  route shields / alerts    (severe weather, warnings)
   Michigan's character: a cool lakeshore paper and a GREAT LAKES TEAL accent, on lake-blue water — the green/blue/brown/red
   Interstate roles stay put, so the whole network reads as a matched set.
   GENERATED by forecast-network/build.py — edit the template, not this file.
   ========================================================================== */
:root{
  --paper:#e5e4dd; --paper2:#eff0ea; --card:#ffffff; --ink:#14181a; --ink2:#3f484c;
  --sign:#04663d; --sign-dk:#013d26; --sign-tx:#ffffff; --sign-sub:#bdebcf;
  --blue:#0a5ca8; --navy:#103e7e; --blue-sub:#cfe2f6;
  --brown:#6b4b2f; --brown-dk:#4a3320; --brown-sub:#e6d8c7;
  --red:#b0242e; --red-dk:#7d1620;
  --gold:#0f8a84; --teal:#0f8a84; --teal-dk:#0a635f; --clay:#dce8ee;
  --line:#c7c8c0; --line2:#e2e2da; --mut:#85898a;
  --maxw:1140px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper)}
body{color:var(--ink);font-family:'Overpass',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--sign)}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.mono{font-family:'Overpass Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ── utility strip (dark, green underline) ──────────────────────────────── */
.util{background:var(--ink);color:#cfccc4;border-bottom:3px solid var(--sign);
  font-family:'Overpass Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.06em}
.util .wrap{display:flex;align-items:center;gap:16px;height:36px}
.util a{color:#cfccc4}.util a:hover{color:var(--sign-sub)}
.util .sp{flex:1}
.util .live{display:inline-flex;align-items:center;gap:6px;color:#e9e7e0}
.util .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(242,167,27,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(242,167,27,.5)}70%{box-shadow:0 0 0 7px rgba(242,167,27,0)}100%{box-shadow:0 0 0 0 rgba(242,167,27,0)}}
@media(max-width:640px){.util .hidesm{display:none}}

/* ── masthead — green interstate guide sign ─────────────────────────────── */
.mast{background:var(--sign);border-radius:12px;color:#fff;padding:15px 22px;margin:16px 0;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;
  box-shadow:inset 0 0 0 4px var(--sign),inset 0 0 0 6px rgba(255,255,255,.92),0 12px 30px rgba(0,0,0,.16)}
.mast .brand{display:flex;align-items:center;gap:13px;min-width:0}
.mast .word{font-weight:900;font-size:clamp(20px,3.4vw,27px);letter-spacing:.005em;color:#fff;line-height:1}
.mast .word .yl{color:var(--sign-sub)}
.mast .tag{font-family:'Overpass Mono',monospace;font-weight:700;font-size:11.5px;
  letter-spacing:.1em;color:var(--sign-sub);text-transform:uppercase}
.mast nav{display:flex;gap:6px;flex-wrap:wrap}
.mast nav a{font-family:'Overpass Mono',monospace;font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#eafff2;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);border-radius:7px;padding:7px 12px}
.mast nav a:hover,.mast nav a.on{background:#fff;color:var(--sign)}

/* mini reflective shield used in the masthead */
.shield{flex:none;width:44px;height:48px;border-radius:7px;position:relative;overflow:hidden;
  background:#fff;box-shadow:0 2px 9px rgba(0,0,0,.28);display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;padding-bottom:5px}
.shield:before{content:"";position:absolute;top:0;left:0;right:0;height:13px;background:var(--red)}
.shield b{color:var(--navy);font-weight:900;font-size:17px;line-height:1;z-index:1;letter-spacing:-.03em}
.shield i{position:absolute;top:2px;font-style:normal;color:#fff;font-weight:800;font-size:6.5px;
  letter-spacing:.08em;z-index:1}

/* ── section rule — uppercase color-coded heading with dashed sign line ──── */
.rule{display:flex;align-items:center;gap:12px;margin:34px 0 16px}
.rule h2{margin:0;font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;
  white-space:nowrap;color:var(--sign)}
.rule .ln{height:3px;flex:1;background:repeating-linear-gradient(90deg,currentColor 0 18px,transparent 18px 34px);color:var(--sign);opacity:.55}
.rule .sub{font-family:'Overpass Mono',monospace;color:var(--mut);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.rule.blue h2,.rule.blue .ln{color:var(--blue)}
.rule.brown h2,.rule.brown .ln{color:var(--brown)}
.rule.red h2,.rule.red .ln{color:var(--red)}

/* ── cards & grids ──────────────────────────────────────────────────────── */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06)}
.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:15px 16px;box-shadow:0 5px 16px rgba(0,0,0,.05);transition:transform .12s,box-shadow .12s,border-color .12s;position:relative}
.tile:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.11);border-color:var(--sign)}
.tile .k{font-family:'Overpass Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mut)}
.tile .t{font-weight:900;font-size:17px;letter-spacing:.005em;color:var(--ink);margin:3px 0 4px}
.tile .d{font-size:12.5px;color:var(--ink2);line-height:1.42}
.tile .edge{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--sign);border-radius:10px 0 0 10px}
.tile.blue:hover{border-color:var(--blue)} .tile.blue .edge{background:var(--blue)}
.tile.brown:hover{border-color:var(--brown)} .tile.brown .edge{background:var(--brown)}
.tile.red:hover{border-color:var(--red)} .tile.red .edge{background:var(--red)}
.tile.pl{padding-left:20px}

/* pill / chip row */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:'Overpass Mono',monospace;font-weight:700;font-size:12px;letter-spacing:.03em;
  background:var(--card);color:var(--ink2);border:1px solid var(--line);border-radius:20px;
  padding:7px 14px;transition:.12s}
.chip:hover{border-color:var(--sign);color:var(--sign);transform:translateY(-1px)}

/* ── search "on-ramp" ───────────────────────────────────────────────────── */
form.ramp{display:flex;background:#fff;border:4px solid #fff;border-radius:9px;overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.22)}
form.ramp input{flex:1;min-width:0;border:0;outline:0;padding:16px 17px;font-family:'Overpass',sans-serif;
  font-weight:700;font-size:16px;color:var(--ink);letter-spacing:.01em}
form.ramp input::placeholder{color:#9b978e}
form.ramp button{border:0;cursor:pointer;background:var(--blue);color:#fff;font-family:'Overpass',sans-serif;
  font-weight:900;font-size:15px;letter-spacing:.06em;padding:0 24px}
form.ramp button:hover{background:var(--navy)}

/* ── footer (dark, green top border) ────────────────────────────────────── */
footer{margin-top:46px;background:var(--ink);color:#cfccc4;border-top:4px solid var(--sign);padding:26px 0 30px;font-size:13px}
footer .cols{display:flex;flex-wrap:wrap;gap:26px 44px;justify-content:space-between}
footer .fw{font-weight:900;font-size:20px;color:#fff}
footer .fw .yl{color:var(--sign-sub)}
footer h4{font-family:'Overpass Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);margin:0 0 9px}
footer a{color:#cfccc4;display:block;padding:3px 0}
footer a:hover{color:var(--sign-sub)}
footer .net a{display:inline-block;padding:0}
footer .fine{color:var(--mut);font-size:11.5px;margin-top:18px;line-height:1.55;max-width:640px}