/* =========================================================
   PA WEATHER — editorial almanac stylesheet
   Aesthetic: vintage weather bureau × modern data dashboard
   ========================================================= */

/* -- Tokens ------------------------------------------------ */
:root{
  /* Palette */
  --ink:         #0d1b2a;   /* storm navy — primary type */
  --ink-soft:    #1c2e44;
  --paper:       #f3ecdb;   /* parchment cream bg */
  --paper-warm:  #ead9b8;   /* deeper cream */
  --rule:        #c9b893;   /* rule lines */
  --gold:        #d4a017;   /* keystone gold */
  --rust:        #a33b1f;   /* alerts / editorial red */
  --rust-deep:   #6f2511;
  --moss:        #4a6741;
  --lake:        #2b5d9e;
  --slate:       #5a6270;
  --white:       #fefaf1;

  /* Temperature ramp (used in map + city cards) */
  --t-frigid:  #2b5d9e;
  --t-cold:    #4a8fbf;
  --t-mild:    #d4a017;
  --t-warm:    #c45a3a;
  --t-hot:     #8b2e1f;

  /* Type */
  --display: "Fraunces", "Iowan Old Style", "Source Serif Pro", Georgia, serif;
  --body:    "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Rhythm */
  --wrap: 1240px;
  --gutter: clamp(1rem, 3vw, 2.25rem);
  --radius: 4px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* -- Reset / base ------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  /* subtle grain for paper feel */
  background-image:
    radial-gradient(circle at 20% 10%, rgba(212,160,23,.05) 0, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(43,93,158,.04) 0, transparent 40%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .05 0 0 0 0 .04 0 0 0 0 .02 0 0 0 .06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-attachment: fixed, fixed, fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
em{font-style:italic;color:var(--rust)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}
.skip{
  position:absolute;top:-100px;left:1rem;z-index:200;
  background:var(--ink);color:var(--paper);padding:.6rem 1rem;
  border-radius:var(--radius);font-weight:500
}
.skip:focus{top:1rem}

.wrap{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gutter);
}

/* -- Alerts strip ------------------------------------------ */
.alert-strip{
  background:var(--rust);
  color:var(--white);
  border-bottom:1px solid var(--rust-deep);
  font-size:.9rem;
}
.alert-strip .wrap{
  display:flex;align-items:center;gap:1rem;
  padding-block:.55rem;
}
.alert-strip__label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;background:var(--rust-deep);
  padding:.2rem .55rem;border-radius:2px;flex-shrink:0;
}
.alert-strip__text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alert-strip__link{font-weight:500;text-decoration:underline;text-underline-offset:3px;flex-shrink:0}

/* -- Header ------------------------------------------------ */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(243,236,219,.94);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--rule);
}
.site-head__wrap{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:1.5rem;
  padding-block:.9rem;
}
.brand{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--display);font-weight:800;
  font-size:1.5rem;letter-spacing:-.02em;
  line-height:1;
}
.brand__mark{width:28px;height:28px;flex-shrink:0}
.brand__mark path{fill:var(--gold)}
.brand__word{color:var(--ink)}
.brand__pa{color:var(--rust)}

.nav{justify-self:center}
.nav ul{
  display:flex;gap:.2rem;list-style:none;margin:0;padding:0;
}
.nav a{
  display:block;padding:.5rem .85rem;
  font-size:.92rem;font-weight:500;
  color:var(--ink);
  border-radius:var(--radius);
  transition:background .15s var(--ease), color .15s var(--ease);
  position:relative;
}
.nav a:hover{background:var(--paper-warm)}
.nav a::after{
  content:"";position:absolute;left:50%;bottom:2px;
  width:0;height:2px;background:var(--rust);
  transition:width .2s var(--ease), left .2s var(--ease);
}
.nav a:hover::after{width:calc(100% - 1.7rem);left:.85rem}
.nav a.is-active,
.nav a[aria-current="page"]{color:var(--rust)}
.nav a.is-active::after,
.nav a[aria-current="page"]::after{
  width:calc(100% - 1.7rem);left:.85rem;background:var(--rust);
}
.mobile-nav a[aria-current="page"]{color:var(--rust)}

.head-meta{
  display:flex;align-items:baseline;gap:.4rem;
  font-family:var(--mono);font-size:.78rem;color:var(--slate);
  letter-spacing:.04em;
}
.head-meta__time{color:var(--ink);font-weight:500}

.nav-toggle{
  display:none;background:none;border:0;padding:.4rem;
}
.nav-toggle span{
  display:block;width:22px;height:2px;background:var(--ink);
  margin:5px 0;transition:transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{
  display:flex;flex-direction:column;
  padding:1rem var(--gutter) 1.5rem;
  border-top:1px solid var(--rule);
  background:var(--paper);
}
.mobile-nav[hidden]{display:none}
.mobile-nav a{
  padding:.85rem 0;
  border-bottom:1px dashed var(--rule);
  font-size:1.05rem;font-weight:500;
}

/* -- HERO -------------------------------------------------- */
.hero{
  padding-block:clamp(2rem,5vw,4rem) clamp(2.5rem,6vw,5rem);
  background:
    linear-gradient(180deg, transparent 0, transparent 70%, rgba(13,27,42,.03) 100%),
    radial-gradient(ellipse at 70% 30%, rgba(212,160,23,.08) 0, transparent 50%);
  border-bottom:1px solid var(--rule);
  position:relative;overflow:hidden;
}

/* decorative keystone watermark */
.hero::before{
  content:"";position:absolute;
  right:-80px;top:50%;transform:translateY(-50%);
  width:520px;height:520px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M8 18 L56 18 L48 52 L16 52 Z' fill='%230d1b2a' opacity='.04'/></svg>") no-repeat center/contain;
  pointer-events:none;
}

.hero__dateline{
  display:flex;gap:2rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.75rem;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--slate);
  padding-bottom:1.2rem;margin-bottom:2rem;
  border-bottom:3px double var(--rule);
}
.dateline__date{color:var(--ink);font-weight:500}
.dateline__stamp{margin-left:auto;color:var(--rust)}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}

.hero__kicker{
  font-family:var(--mono);font-size:.8rem;
  text-transform:uppercase;letter-spacing:.22em;
  color:var(--rust);margin:0 0 1.2rem;
}
.hero__h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.6rem, 7vw, 5.5rem);
  line-height:.95;
  letter-spacing:-.025em;
  margin:0 0 1.8rem;
  color:var(--ink);
}
.hero__condition{
  display:block;
  font-style:italic;font-weight:500;
  color:var(--ink-soft);
}
.hero__over{
  display:inline-block;
  font-size:.35em;font-style:italic;
  font-weight:400;color:var(--slate);
  vertical-align:middle;margin:0 .3em;
  transform:translateY(-.3em);
}
.hero__place{
  background:linear-gradient(180deg, transparent 60%, rgba(212,160,23,.4) 60%, rgba(212,160,23,.4) 92%, transparent 92%);
  padding:0 .1em;
}
.hero__lede{
  font-size:1.15rem;
  max-width:36ch;
  color:var(--ink-soft);
  line-height:1.5;
  margin:0;
}

/* Readout panel (right) */
.hero__readout{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding:2rem 2rem 1.5rem;
  border-radius:2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 20px 40px -20px rgba(13,27,42,.4),
    0 4px 12px -4px rgba(13,27,42,.2);
  overflow:hidden;
  isolation:isolate;
}
.hero__readout::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 90% -10%, rgba(212,160,23,.22) 0, transparent 50%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.015) 2px 3px);
  pointer-events:none;z-index:-1;
}
.readout__city{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;border-bottom:1px solid rgba(243,236,219,.15);
  padding-bottom:.8rem;margin-bottom:.5rem;
}
.readout__city h2{
  font-family:var(--display);font-size:1.6rem;font-weight:600;
  margin:0;letter-spacing:-.01em;
}
.readout__label{
  font-family:var(--mono);font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);
}
.readout__temp{
  display:flex;align-items:flex-start;gap:.25rem;
  margin:.5rem 0 1.2rem;
}
.readout__number{
  font-family:var(--display);font-weight:800;
  font-size:clamp(5rem,12vw,7.5rem);
  line-height:.85;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.readout__unit{
  font-family:var(--display);font-size:2rem;
  font-weight:400;opacity:.7;margin-top:.5rem;
}
.readout__stats{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:.9rem 1.5rem;margin:0;
  border-top:1px solid rgba(243,236,219,.15);
  padding-top:1rem;
}
.readout__stats > div{display:flex;flex-direction:column}
.readout__stats dt{
  font-family:var(--mono);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(243,236,219,.55);margin:0;
}
.readout__stats dd{
  margin:.15rem 0 0;font-family:var(--display);
  font-size:1.25rem;font-weight:500;
  font-variant-numeric:tabular-nums;
}
.readout__glyph{
  position:absolute;top:1rem;right:1rem;
  width:80px;height:80px;opacity:.35;
  color:var(--gold);
  pointer-events:none;
}

/* Ticker */
.hero__ticker{
  margin-top:clamp(2rem, 4vw, 3rem);
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.ticker__item{
  padding:1rem 1.2rem;
  display:flex;flex-direction:column;gap:.25rem;
  border-right:1px solid var(--rule);
}
.ticker__item:last-child{border-right:0}
.ticker__k{
  font-family:var(--mono);font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);
}
.ticker__v{
  font-family:var(--display);font-size:1.05rem;
  font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* -- Section heading universal ----------------------------- */
.sec-head{margin-bottom:2rem}
.sec-head--row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;
}
.eyebrow{
  font-family:var(--mono);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.22em;
  color:var(--rust);margin:0 0 .7rem;
}
.eyebrow--warn{color:var(--rust)}
.eyebrow--light{color:var(--gold)}
.sec-head__h{
  font-family:var(--display);
  font-size:clamp(2rem, 4.5vw, 3.5rem);
  font-weight:600;
  line-height:1;letter-spacing:-.02em;
  margin:0;color:var(--ink);
}
.sec-head__note{
  color:var(--slate);margin:.6rem 0 0;max-width:55ch;
}

.btn-ghost{
  font-family:var(--mono);font-size:.8rem;
  text-transform:uppercase;letter-spacing:.15em;
  padding:.7rem 1.2rem;
  border:1px solid var(--ink);
  color:var(--ink);
  transition:background .15s, color .15s;
  border-radius:2px;
}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* -- Cities ------------------------------------------------ */
.cities{padding-block:clamp(3rem, 6vw, 5rem)}

.city-grid{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:0;
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
.city-card{
  display:block;
  padding:1.4rem 1.4rem 1.2rem;
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:transparent;
  transition:background .2s var(--ease), transform .2s var(--ease);
  position:relative;
  overflow:hidden;
}
.city-card::before{
  content:"";position:absolute;inset:0;
  background:var(--card-accent, transparent);
  opacity:0;transition:opacity .2s var(--ease);
}
.city-card:hover{background:var(--white);z-index:1}
.city-card:hover::before{opacity:.06}
.city-card > *{position:relative}

.city-card__head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:.5rem;margin-bottom:.5rem;
}
.city-card__name{
  font-family:var(--display);font-weight:600;
  font-size:1.25rem;margin:0;letter-spacing:-.01em;
}
.city-card__region{
  font-family:var(--mono);font-size:.65rem;
  text-transform:uppercase;letter-spacing:.15em;
  color:var(--slate);margin:.1rem 0 0;
}
.city-card__dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--card-accent, var(--slate));
  margin-top:.5rem;flex-shrink:0;
  box-shadow:0 0 0 3px var(--paper);
}
.city-card__temp{
  display:flex;align-items:baseline;gap:.15rem;
  font-family:var(--display);font-weight:700;
  font-size:2.8rem;line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  margin-block:.4rem .1rem;
}
.city-card__temp small{
  font-size:1rem;font-weight:400;color:var(--slate);
}
.city-card__cond{
  font-size:.92rem;color:var(--ink-soft);
  margin:.3rem 0 .9rem;font-style:italic;
}
.city-card__meta{
  display:flex;gap:1.2rem;
  font-family:var(--mono);font-size:.75rem;
  color:var(--slate);
  padding-top:.7rem;border-top:1px dashed var(--rule);
}
.city-card__meta strong{color:var(--ink);font-weight:500}
.city-card.is-loading .city-card__temp,
.city-card.is-loading .city-card__cond,
.city-card.is-loading .city-card__meta{
  opacity:.3;
}
.city-card.is-loading .city-card__temp::after{
  content:"— ";
}

/* -- Map --------------------------------------------------- */
.map-section{
  padding-block:clamp(3rem, 6vw, 5rem);
  background:var(--paper-warm);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.pa-map{
  width:100%;
  height:clamp(380px, 55vw, 560px);
  border:1px solid var(--ink);
  background:var(--paper);
  box-shadow:8px 8px 0 0 var(--ink);
}
.map-legend{
  display:flex;gap:.8rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.72rem;
  color:var(--slate);
}
.map-legend span{display:flex;align-items:center;gap:.35rem}
.map-legend i{
  display:inline-block;width:14px;height:14px;border-radius:2px;
  border:1px solid rgba(0,0,0,.2);
}
.map-caption{
  margin:1rem 0 0;
  font-size:.85rem;color:var(--slate);font-style:italic;
}
.map-caption a{color:var(--ink);border-bottom:1px solid var(--rule)}
.map-caption a:hover{border-color:var(--rust);color:var(--rust)}

/* leaflet pin styling */
.leaflet-pin{
  width:32px;height:32px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--t-mild);
  border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:2px 2px 0 0 var(--ink);
}
.leaflet-pin span{
  transform:rotate(45deg);
  font-family:var(--mono);font-size:.72rem;font-weight:700;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.leaflet-pin--hot{background:var(--t-hot);color:var(--paper)}
.leaflet-pin--hot span{color:var(--paper)}
.leaflet-pin--warm{background:var(--t-warm);color:var(--paper)}
.leaflet-pin--warm span{color:var(--paper)}
.leaflet-pin--cold{background:var(--t-cold)}
.leaflet-pin--frigid{background:var(--t-frigid);color:var(--paper)}
.leaflet-pin--frigid span{color:var(--paper)}

.leaflet-popup-content-wrapper{
  border-radius:2px;
  font-family:var(--body);
  background:var(--paper);
  border:1px solid var(--ink);
  box-shadow:3px 3px 0 0 var(--ink);
}
.leaflet-popup-tip{background:var(--paper);border:1px solid var(--ink)}
.leaflet-popup-content{margin:.8rem 1rem}
.leaflet-popup-content h4{
  font-family:var(--display);font-size:1.1rem;
  margin:0 0 .3rem;font-weight:600;
}
.leaflet-popup-content .pop-temp{
  font-family:var(--display);font-size:1.8rem;font-weight:700;
  letter-spacing:-.02em;line-height:1;margin:.2rem 0;
}
.leaflet-popup-content .pop-meta{
  font-family:var(--mono);font-size:.72rem;
  color:var(--slate);text-transform:uppercase;letter-spacing:.12em;
}

/* -- Forecast strip --------------------------------------- */
.forecast{padding-block:clamp(3rem, 6vw, 5rem)}
.forecast__picker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.15em;
  color:var(--slate);
}
.forecast__picker select{
  font-family:var(--display);font-size:1rem;
  padding:.5rem .9rem;
  border:1px solid var(--ink);
  background:var(--paper);color:var(--ink);
  border-radius:2px;
  cursor:pointer;
}
.forecast-strip{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr));
  gap:0;
  border:1px solid var(--ink);
  background:var(--white);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
}
.fc-day{
  padding:1.3rem 1rem;
  text-align:center;
  border-right:1px solid var(--rule);
  scroll-snap-align:start;
  min-width:110px;
  transition:background .15s;
}
.fc-day:last-child{border-right:0}
.fc-day:hover{background:var(--paper)}
.fc-day__name{
  font-family:var(--mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--slate);margin:0 0 .1rem;
}
.fc-day__date{
  font-family:var(--mono);font-size:.72rem;
  color:var(--slate);margin:0 0 .8rem;
}
.fc-day__icon{
  width:44px;height:44px;margin:0 auto .6rem;
  color:var(--ink);
}
.fc-day__high{
  font-family:var(--display);font-size:1.65rem;font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);margin:0;
  font-variant-numeric:tabular-nums;
}
.fc-day__low{
  font-family:var(--display);font-size:1.05rem;
  color:var(--slate);margin:.2rem 0 .4rem;
  font-variant-numeric:tabular-nums;
}
.fc-day__cond{
  font-size:.78rem;color:var(--ink-soft);
  font-style:italic;margin:.4rem 0 0;
  min-height:2.4em;
}
.fc-day__precip{
  font-family:var(--mono);font-size:.72rem;
  color:var(--lake);margin-top:.4rem;
  font-variant-numeric:tabular-nums;
}
.fc-day__precip.is-zero{color:var(--slate);opacity:.5}
.fc-day.is-today{
  background:var(--ink);color:var(--paper);
}
.fc-day.is-today .fc-day__name,
.fc-day.is-today .fc-day__date{color:var(--gold)}
.fc-day.is-today .fc-day__high,
.fc-day.is-today .fc-day__low{color:var(--paper)}
.fc-day.is-today .fc-day__icon{color:var(--gold)}
.fc-day.is-today .fc-day__cond{color:rgba(243,236,219,.8)}

/* -- Alerts ------------------------------------------------ */
.alerts-sec{
  padding-block:clamp(3rem, 6vw, 5rem);
  background:var(--paper-warm);
  border-top:1px solid var(--rule);
}
.alerts-list{display:flex;flex-direction:column;gap:1rem}
.alerts-empty{
  font-family:var(--mono);font-size:.85rem;
  color:var(--slate);padding:1.5rem;
  border:1px dashed var(--rule);background:var(--paper);
  text-align:center;
}
.alerts-none{
  display:flex;align-items:center;gap:1rem;
  padding:1.8rem;background:var(--paper);
  border:1px solid var(--rule);
}
.alerts-none__check{
  width:42px;height:42px;border-radius:50%;
  background:var(--moss);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;flex-shrink:0;
}
.alerts-none h3{font-family:var(--display);font-size:1.3rem;margin:0 0 .2rem}
.alerts-none p{margin:0;color:var(--slate);font-size:.9rem}

.alert-card{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:1.5rem;align-items:center;
  padding:1.3rem 1.5rem;
  background:var(--paper);
  border-left:6px solid var(--rust);
  border-top:1px solid var(--rule);
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  transition:transform .15s, box-shadow .15s;
}
.alert-card:hover{
  transform:translateX(3px);
  box-shadow:-3px 4px 0 0 var(--rust);
}
.alert-card[data-severity="moderate"]{border-left-color:var(--gold)}
.alert-card[data-severity="minor"]{border-left-color:var(--slate)}
.alert-card__sev{
  font-family:var(--mono);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--rust);font-weight:700;
  writing-mode:vertical-rl;transform:rotate(180deg);
  padding:.5rem 0;
}
.alert-card[data-severity="moderate"] .alert-card__sev{color:var(--gold)}
.alert-card[data-severity="minor"] .alert-card__sev{color:var(--slate)}
.alert-card__body h3{
  font-family:var(--display);font-size:1.15rem;
  font-weight:600;margin:0 0 .25rem;
}
.alert-card__body p{
  margin:0;font-size:.88rem;color:var(--ink-soft);
  line-height:1.45;
}
.alert-card__area{
  font-family:var(--mono);font-size:.72rem;
  color:var(--slate);margin-top:.35rem !important;
  text-transform:uppercase;letter-spacing:.12em;
}
.alert-card__time{
  font-family:var(--mono);font-size:.72rem;
  color:var(--slate);text-transform:uppercase;letter-spacing:.12em;
  text-align:right;white-space:nowrap;
}

/* -- Explore grid ------------------------------------------ */
.explore{padding-block:clamp(3rem, 6vw, 5rem)}
.explore-grid{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:0;
  border-top:1px solid var(--ink);
  border-left:1px solid var(--ink);
}
.explore-card{
  display:block;
  padding:1.8rem;
  border-right:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background:var(--paper);
  min-height:240px;
  position:relative;
  overflow:hidden;
  transition:background .25s var(--ease);
}
.explore-card::before{
  content:"";position:absolute;
  inset:0;
  background:var(--accent-color, var(--ink));
  opacity:0;
  transition:opacity .25s var(--ease);
  z-index:0;
}
.explore-card[data-accent="storm"]{--accent-color:#0d1b2a}
.explore-card[data-accent="sun"]{--accent-color:#d4a017}
.explore-card[data-accent="alert"]{--accent-color:#a33b1f}
.explore-card[data-accent="brick"]{--accent-color:#7a3e2d}
.explore-card[data-accent="ink"]{--accent-color:#1c2e44}
.explore-card[data-accent="snow"]{--accent-color:#4a8fbf}
.explore-card[data-accent="lake"]{--accent-color:#2b5d9e}
.explore-card[data-accent="sepia"]{--accent-color:#8b6f3f}
.explore-card[data-accent="moss"]{--accent-color:#4a6741}
.explore-card[data-accent="road"]{--accent-color:#5a6270}
.explore-card[data-accent="cyclone"]{--accent-color:#6f2511}
.explore-card[data-accent="slate"]{--accent-color:#334155}

.explore-card > *{position:relative;z-index:1}
.explore-card:hover::before{opacity:1}
.explore-card:hover{color:var(--paper)}
.explore-card:hover .explore-card__num{color:rgba(243,236,219,.3)}

.explore-card__num{
  font-family:var(--mono);font-size:.78rem;
  color:var(--rust);
  letter-spacing:.18em;
  transition:color .25s var(--ease);
}
.explore-card h3{
  font-family:var(--display);font-size:1.55rem;
  font-weight:600;letter-spacing:-.01em;
  margin:.8rem 0 .6rem;line-height:1.1;
}
.explore-card p{
  font-size:.92rem;line-height:1.5;margin:0;
  opacity:.85;
}
.explore-card__go{
  display:inline-block;margin-top:1rem;
  font-family:var(--mono);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.15em;
  border-bottom:1px solid currentColor;
  padding-bottom:.1rem;
  transform:translateX(0);
  transition:transform .2s var(--ease);
}
.explore-card:hover .explore-card__go{transform:translateX(4px)}

/* -- Subscribe --------------------------------------------- */
.subscribe{
  padding-block:clamp(3rem, 6vw, 5rem);
  background:var(--ink);
  color:var(--paper);
  position:relative;overflow:hidden;
}
.subscribe::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 100%, rgba(212,160,23,.15) 0, transparent 50%),
    radial-gradient(ellipse at 80% 0%, rgba(163,59,31,.1) 0, transparent 50%);
  pointer-events:none;
}
.subscribe__wrap{
  display:grid;
  grid-template-columns:1fr auto;
  gap:3rem;
  align-items:center;
  position:relative;
}
.subscribe h2{
  font-family:var(--display);font-size:clamp(2rem, 4vw, 3rem);
  font-weight:600;letter-spacing:-.02em;
  margin:0 0 .6rem;line-height:1.05;
}
.subscribe h2 em{color:var(--gold)}
.subscribe p{margin:0;color:rgba(243,236,219,.8);max-width:45ch}
.subscribe .eyebrow--light{color:var(--gold)}

.subscribe__form{
  display:flex;
  background:var(--paper);
  border:1px solid var(--paper);
  border-radius:2px;
  overflow:hidden;
  min-width:min(420px, 100%);
}
.subscribe__form input{
  flex:1;padding:1rem 1.2rem;
  border:0;outline:none;
  font-family:var(--body);font-size:1rem;
  background:transparent;color:var(--ink);
  min-width:0;
}
.subscribe__form button{
  padding:1rem 1.5rem;border:0;
  background:var(--gold);color:var(--ink);
  font-family:var(--mono);font-size:.85rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;
  transition:background .15s, color .15s;
}
.subscribe__form button:hover{background:var(--rust);color:var(--paper)}

.sub-done{
  padding:1rem 1.2rem;color:var(--gold);
  font-family:var(--display);font-size:1.1rem;
  font-style:italic;
}

/* -- Footer ------------------------------------------------ */
.site-foot{
  background:var(--paper-warm);
  border-top:4px double var(--ink);
  padding-top:3rem;
}
.site-foot__wrap{
  display:grid;
  grid-template-columns:1.5fr repeat(4, 1fr);
  gap:2rem;padding-bottom:2.5rem;
}
.foot__brand{
  display:flex;align-items:flex-start;gap:.8rem;
}
.foot__brand p{margin:0;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.foot__nav h3{
  font-family:var(--mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.2em;
  color:var(--rust);margin:0 0 1rem;
}
.foot__nav ul{list-style:none;margin:0;padding:0}
.foot__nav li{margin-bottom:.5rem}
.foot__nav a{
  font-size:.92rem;color:var(--ink);
  transition:color .15s;
  border-bottom:1px solid transparent;
}
.foot__nav a:hover{color:var(--rust);border-bottom-color:var(--rust)}

.foot__strip{
  border-top:1px solid var(--rule);
  background:var(--paper);
  padding-block:1.2rem;
}
.foot__strip .wrap{
  display:flex;justify-content:space-between;
  align-items:center;gap:1rem;flex-wrap:wrap;
}
.foot__strip p{
  margin:0;font-family:var(--mono);font-size:.72rem;
  color:var(--slate);letter-spacing:.04em;
}
.foot__latlng{color:var(--rust) !important}

/* -- Shared page patterns (sub-pages) ---------------------- */
.hero--page{
  padding-block:clamp(2rem,5vw,3.5rem) clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--rule);
  background:
    linear-gradient(180deg, transparent 0, transparent 70%, rgba(13,27,42,.03) 100%),
    radial-gradient(ellipse at 70% 30%, rgba(212,160,23,.08) 0, transparent 50%);
  position:relative;overflow:hidden;
}
.hero--page::before{
  content:"";position:absolute;
  right:-80px;top:50%;transform:translateY(-50%);
  width:520px;height:520px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M8 18 L56 18 L48 52 L16 52 Z' fill='%230d1b2a' opacity='.04'/></svg>") no-repeat center/contain;
  pointer-events:none;
}
.page-title{
  font-family:var(--display);
  font-size:clamp(2.4rem, 6vw, 4.8rem);
  line-height:.96;letter-spacing:-.025em;
  font-weight:800;margin:0 0 1.2rem;color:var(--ink);
  position:relative;
}
.page-lede{
  font-size:1.12rem;max-width:58ch;
  color:var(--ink-soft);line-height:1.5;margin:0 0 1.8rem;
  position:relative;
}
.last-updated{
  margin-top:1.5rem;
  font-family:var(--mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--slate);
}
.sec-alt{background:var(--paper-warm);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sec-pad{padding-block:clamp(3rem,6vw,5rem)}

/* Data-card: used across forecast, hourly, air, etc. */
.data-card{
  background:var(--paper);
  border:1px solid var(--ink);
  padding:1.5rem;
  box-shadow:5px 5px 0 0 var(--ink);
  border-radius:2px;
}
.data-card h3{
  font-family:var(--display);font-size:1.3rem;
  font-weight:600;margin:0 0 .8rem;letter-spacing:-.01em;
}
.data-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.2rem;
}
.kv{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed var(--rule)}
.kv:last-child{border-bottom:0}
.kv dt{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--slate);margin:0}
.kv dd{margin:0;font-family:var(--display);font-weight:500;font-variant-numeric:tabular-nums}

/* Inline reset button used in empty-state messages */
.inline-reset{background:none;border:0;text-decoration:underline;padding:0;font:inherit;color:var(--rust);cursor:pointer}

/* Map tile shared filter — so any page can import Leaflet tiles with the same look */
.pa-tile-layer{filter:grayscale(.7) sepia(.15) contrast(.95) brightness(1.02)}

/* Big-number readout: used on hourly, air, uv, etc. */
.big-num{
  font-family:var(--display);font-weight:800;
  font-size:clamp(3.5rem, 8vw, 6rem);line-height:.9;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.big-num small{
  font-size:.35em;font-weight:400;color:var(--slate);
  font-family:var(--display);letter-spacing:0;
}

/* -- Animations on load ------------------------------------ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
.hero__headline > *{
  animation:fadeUp .7s var(--ease) both;
}
.hero__kicker{animation-delay:.05s}
.hero__h1{animation-delay:.15s}
.hero__lede{animation-delay:.3s}
.hero__readout{animation:fadeUp .8s var(--ease) .2s both}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* -- Responsive breakpoints -------------------------------- */
@media (max-width: 1080px){
  .site-head__wrap{grid-template-columns:auto 1fr auto auto}
  .head-meta{display:none}
}
@media (max-width: 900px){
  .nav{display:none}
  .nav-toggle{display:block;justify-self:end}
  .site-head__wrap{grid-template-columns:1fr auto auto}
  .site-foot__wrap{grid-template-columns:1fr 1fr 1fr}
  .foot__brand{grid-column:span 3}
  .subscribe__wrap{grid-template-columns:1fr}
  .forecast-strip{
    grid-template-columns:repeat(7, minmax(130px,1fr));
    overflow-x:auto;
  }
}
@media (max-width: 720px){
  .hero__grid{grid-template-columns:1fr;gap:2rem}
  .hero__ticker{grid-template-columns:repeat(2,1fr)}
  .ticker__item:nth-child(2){border-right:0}
  .ticker__item:nth-child(1),
  .ticker__item:nth-child(2){border-bottom:1px solid var(--rule)}
  .alert-card{grid-template-columns:auto 1fr;gap:1rem}
  .alert-card__time{grid-column:2;text-align:left;margin-top:.3rem}
  .site-foot__wrap{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:span 2}
  .foot__strip .wrap{flex-direction:column;align-items:flex-start}
  .hero__dateline{font-size:.7rem;gap:1rem}
  .dateline__stamp{margin-left:0}
}
@media (max-width: 480px){
  .city-grid{grid-template-columns:1fr 1fr}
  .explore-grid{grid-template-columns:1fr}
  .site-foot__wrap{grid-template-columns:1fr}
  .foot__brand{grid-column:span 1}
  .subscribe__form{flex-direction:column}
  .subscribe__form button{padding:.9rem}
}

/* -- Print ------------------------------------------------- */
@media print{
  .site-head,.site-foot,.subscribe,.explore,.alert-strip{display:none}
  body{background:#fff}
}