/* ============================================================
   Fargo Dads — design system
   Refined editorial: warm paper, deep navy, gold used as accent.
   Self-hosted variable fonts; no third-party font requests.
   ============================================================ */

/* ---------- fonts (self-hosted, same-origin, no render-blocking 3rd party) ---------- */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("/assets/fonts/bricolage-grotesque-latin-var.woff2") format("woff2-variations"),
      url("/assets/fonts/bricolage-grotesque-latin-var.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Hanken Grotesk";
  src:url("/assets/fonts/hanken-grotesk-latin-var.woff2") format("woff2-variations"),
      url("/assets/fonts/hanken-grotesk-latin-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* --- brand ---------------------------------------------------- */
  --ink:#0f1e2d;            /* deepest navy — footers, utility bar   */
  --sky:#16324e;            /* primary brand navy                    */
  --sky-2:#1e4267;          /* raised navy — hover on dark           */
  --gold:#d29a34;           /* accent (on dark)                      */
  --gold-bright:#e3ad48;    /* accent highlight on dark              */
  --gold-deep:#8a5f10;      /* accent as TEXT on light (AA on cream) */
  --rust:#a4462a;
  --field:#546f49;
  --sage:#4b7157;           /* success surfaces                      */

  /* --- surfaces ------------------------------------------------- */
  --paper:#ffffff;
  --cream:#faf7f0;
  --cream-2:#f2ece0;
  --line:#e6ddcc;
  --line-strong:#d6c9b1;

  /* --- text ----------------------------------------------------- */
  --body:#32404e;           /* long-form body copy                   */
  --slate:#4f5e70;          /* secondary/meta (AA on cream)          */

  /* --- type scale (fluid) --------------------------------------- */
  --fs-2xs:.6875rem; --fs-xs:.75rem;  --fs-sm:.8125rem; --fs-md:.9375rem;
  --fs-base:1rem;    --fs-lg:1.0625rem;
  --fs-h4:1.0625rem;
  --fs-h3:clamp(1.15rem,.95rem + .7vw,1.4rem);
  --fs-h2:clamp(1.6rem,1.2rem + 1.7vw,2.45rem);
  --fs-h1:clamp(1.9rem,1.35rem + 2.4vw,3rem);
  --fs-display:clamp(2.35rem,1.5rem + 3.9vw,4.15rem);

  /* --- spacing -------------------------------------------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:88px;
  --sec-y:clamp(48px,6vw,80px);

  /* --- shape & depth -------------------------------------------- */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(15,30,45,.05), 0 1px 1px rgba(15,30,45,.04);
  --sh-2:0 2px 4px rgba(15,30,45,.05), 0 4px 12px rgba(15,30,45,.06);
  --sh-3:0 4px 8px rgba(15,30,45,.06), 0 12px 28px rgba(15,30,45,.10);
  --sh-4:0 8px 16px rgba(15,30,45,.08), 0 24px 48px rgba(15,30,45,.13);

  --maxw:1200px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--cream);color:var(--body);
  font-size:var(--fs-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.display{
  font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  line-height:1.08;letter-spacing:-.021em;color:var(--sky);
  font-weight:700;text-wrap:balance;
}
h1{font-size:var(--fs-h1)}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* accessible focus ring, everywhere */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:3px}

/* skip link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--ink);
  padding:12px 20px;font-weight:700;font-size:var(--fs-md);border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* shared label/eyebrow treatment — uppercase lives HERE, not on headings */
.eyebrow,.crumb,.kicker,.tag,footer h5,.aside-box h4,aside .box h4,.sec-head .more,
.utility a,nav.main>.wrap>ul>li>a,.pill,.btn-inline,.submenu .head{
  text-transform:uppercase;letter-spacing:.09em;
}

/* ---------- utility bar ---------- */
.utility{background:var(--ink);color:#a9b6c6;font-size:var(--fs-xs)}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:var(--s4)}
.utility a{color:#a9b6c6;font-weight:600;margin-right:var(--s5);transition:color .18s var(--ease)}
.utility a:hover{color:var(--gold-bright)}
.utility .right a{margin:0 0 0 var(--s2);display:inline-grid;place-items:center;width:28px;height:28px;
  border:1px solid rgba(255,255,255,.16);border-radius:50%;font-size:var(--fs-2xs);letter-spacing:.02em}
.utility .right a:hover{border-color:var(--gold);background:var(--gold);color:var(--ink)}

/* ---------- brand band ---------- */
.brandband{background:var(--cream);border-bottom:1px solid var(--line);padding:var(--s5) 0}
.brandband .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
.logo{display:inline-flex;align-items:center;gap:var(--s3)}
.logo .mark-img{width:44px;height:44px;border-radius:10px;display:block;flex:none}
.logo .mark{width:48px;height:48px;border-radius:12px;background:var(--sky);display:grid;place-items:center;
  color:var(--gold);font-family:"Bricolage Grotesque";font-weight:800;font-size:24px;box-shadow:var(--sh-2)}
.logo .word{font-family:"Bricolage Grotesque";font-weight:800;font-size:clamp(24px,3.2vw,31px);
  color:var(--sky);line-height:.95;letter-spacing:-.025em}
.logo .word small{display:block;font-family:"Hanken Grotesk";font-weight:600;font-size:var(--fs-2xs);
  letter-spacing:.22em;color:var(--gold-deep);text-transform:uppercase;margin-top:6px}
.brandband .cta{display:flex;gap:var(--s2);align-items:center}
.pill{font-size:var(--fs-xs);font-weight:700;padding:11px 19px;border-radius:var(--r-pill);
  border:1.5px solid var(--line-strong);color:var(--sky);transition:all .18s var(--ease);white-space:nowrap}
.pill:hover{border-color:var(--sky);background:var(--sky);color:#fff}
.pill.solid{background:var(--sky);border-color:var(--sky);color:#fff}
.pill.solid:hover{background:var(--ink);border-color:var(--ink)}
@media(max-width:820px){.brandband .cta{display:none}}

/* ---------- nav ---------- */
nav.main{background:var(--sky);position:sticky;top:0;z-index:60;box-shadow:var(--sh-2)}
nav.main .wrap{display:flex;align-items:stretch;justify-content:center;flex-wrap:wrap}
nav.main ul{list-style:none;display:flex;align-items:stretch}
nav.main>.wrap>ul>li{position:relative}
nav.main>.wrap>ul>li>a{display:flex;align-items:center;gap:6px;height:52px;padding:0 18px;
  color:#dbe5ef;font-weight:600;font-size:var(--fs-xs);transition:color .16s var(--ease),background .16s var(--ease);
  position:relative}
nav.main>.wrap>ul>li>a::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease)}
nav.main>.wrap>ul>li:hover>a,nav.main>.wrap>ul>li>a:focus-visible{color:#fff;background:var(--sky-2)}
nav.main>.wrap>ul>li:hover>a::after{transform:scaleX(1)}
.caret{font-size:7px;opacity:.6;transform:translateY(1px)}
.submenu{position:absolute;top:100%;left:0;flex-direction:column;min-width:272px;background:var(--paper);
  border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:0 0 var(--r-md) var(--r-md);
  box-shadow:var(--sh-4);padding:var(--s2) 0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
nav.main li:hover>.submenu,nav.main li:focus-within>.submenu{opacity:1;visibility:visible;transform:translateY(0)}
nav.main>.wrap>ul>li:nth-last-child(-n+2)>.submenu{left:auto;right:0}
.submenu li a{display:block;padding:9px 20px;font-size:var(--fs-md);font-weight:500;color:var(--body);
  border-left:2px solid transparent;transition:all .14s var(--ease)}
.submenu li a:hover{background:var(--cream);border-left-color:var(--gold);color:var(--sky)}
.submenu .head{padding:8px 20px 4px;font-size:var(--fs-2xs);color:var(--slate);font-weight:700}
.search-btn{display:flex;align-items:center;height:52px;padding:0 18px;color:#dbe5ef;font-size:16px;
  border-left:1px solid rgba(255,255,255,.09);transition:color .16s var(--ease)}
.search-btn:hover{color:var(--gold-bright)}
.menu-toggle{display:none}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(420px,52vw,510px);display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;background:var(--sky)}
.hero .bg{position:absolute;inset:0}
.hero .bg svg,.hero .bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,26,40,.30) 0%,rgba(12,26,40,.55) 46%,rgba(12,26,40,.90) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:var(--s8) 24px var(--s7)}
.kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.10);color:#fff;
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);
  font-weight:700;font-size:var(--fs-2xs);padding:7px 14px;border-radius:var(--r-pill);margin-bottom:var(--s4)}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-bright);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-size:var(--fs-display);font-weight:800;max-width:15ch;color:#fff;letter-spacing:-.028em;
  text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero h1 .u{color:var(--gold-bright)}
.hero p{font-size:clamp(1rem,.9rem + .45vw,1.175rem);max-width:54ch;margin:var(--s4) 0 var(--s6);
  color:#dbe4ee;font-weight:400;line-height:1.55}

/* ---------- hero buttons ---------- */
.hero .btns{display:flex;gap:var(--s3);flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:var(--s2);background:var(--gold);color:var(--ink);
  font-weight:700;font-size:var(--fs-xs);letter-spacing:.09em;text-transform:uppercase;
  padding:15px 26px;border-radius:var(--r-sm);box-shadow:var(--sh-2);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease)}
.btn:hover{background:var(--gold-bright);transform:translateY(-2px);box-shadow:var(--sh-3)}
.btn.ghost{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.38);
  box-shadow:none;backdrop-filter:blur(6px)}
.btn.ghost:hover{background:rgba(255,255,255,.16);border-color:#fff;color:#fff;transform:translateY(-2px);box-shadow:none}

/* ---------- stat bar ---------- */
.statbar{background:var(--ink);color:#c2cedd;border-top:1px solid rgba(255,255,255,.07)}
.statbar .wrap{display:flex;justify-content:space-around;flex-wrap:wrap;padding:var(--s5) 24px;gap:var(--s4)}
.stat{text-align:center;padding:2px var(--s3)}
.stat b{display:block;font-family:"Bricolage Grotesque";font-weight:700;font-size:clamp(24px,3vw,30px);
  color:var(--gold-bright);line-height:1.1;letter-spacing:-.02em}
.stat span{font-size:var(--fs-2xs);letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  display:block;margin-top:5px;color:#9dabbc}

/* ---------- sections ---------- */
section{padding:var(--sec-y) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;margin-bottom:var(--s3)}
.sec-head .eyebrow{font-size:var(--fs-2xs);font-weight:700;color:var(--gold-deep);margin-bottom:var(--s2)}
.sec-head h2{font-size:var(--fs-h2);font-weight:700;color:var(--sky)}
.sec-head h2 .u{color:var(--gold-deep)}
.sec-head .more{font-weight:700;font-size:var(--fs-xs);color:var(--sky);padding-bottom:3px;white-space:nowrap;
  border-bottom:2px solid var(--gold);transition:color .16s var(--ease)}
.sec-head .more:hover{color:var(--gold-deep)}
.sec-sub{color:var(--slate);max-width:64ch;margin-bottom:var(--s6);font-size:var(--fs-lg)}

/* ---------- feature cards ---------- */
.mag{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--s5)}
.mag .col{display:grid;gap:var(--s5)}
.card{position:relative;border-radius:var(--r-lg);overflow:hidden;display:block;min-height:230px;color:#fff;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-4)}
.card .ph{position:absolute;inset:0}
.card .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,26,40,0) 30%,rgba(12,26,40,.55) 62%,rgba(12,26,40,.90) 100%)}
.bg-sky{background:linear-gradient(150deg,#16324e,#2a5074)}
.bg-gold{background:linear-gradient(150deg,#9c6a12,#d29a34)}
.bg-rust{background:linear-gradient(150deg,#7f3520,#b05430)}
.bg-field{background:linear-gradient(150deg,#374b31,#617f52)}
.bg-dusk{background:linear-gradient(160deg,#16324e 0%,#54614f 68%,#c08c2c 100%)}
.card .tag{position:absolute;top:14px;left:14px;z-index:3;background:var(--gold);color:var(--ink);
  font-size:var(--fs-2xs);font-weight:700;padding:5px 11px;border-radius:var(--r-xs)}
.card .ic{position:absolute;top:16px;right:18px;z-index:3;font-size:30px;opacity:.4}
.card .meta-wrap{position:absolute;left:0;bottom:0;z-index:3;padding:var(--s5)}
.card h3{font-size:var(--fs-h3);font-weight:700;color:#fff;letter-spacing:-.018em}
.card .m{font-size:var(--fs-sm);font-weight:500;color:#cdd7e3;margin-top:var(--s2)}
.card .m b{color:var(--gold-bright);font-weight:700}
.mag .lead{min-height:460px}
.mag .lead .ph{background:var(--sky)}
.mag .lead h3{font-size:clamp(1.4rem,1.05rem + 1.3vw,1.95rem);max-width:17ch}
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s5)}
.tri .card{min-height:262px}

/* ---------- categories (dark band) ---------- */
.cats{background:var(--sky);color:#fff;position:relative;overflow:hidden}
.cats::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1100px 420px at 78% -10%,rgba(210,154,52,.13),transparent 62%)}
.cats .sec-head h2{color:#fff}
.cats .sec-head h2 .u{color:var(--gold-bright)}   /* gold-deep is for light surfaces only */
.cats .sec-head .eyebrow{color:var(--gold-bright)}
.cats .sec-head .more{color:#fff}
.cats .sec-head .more:hover{color:var(--gold-bright)}
.cats .sec-sub{color:#b9c6d5}
/* light alternate band — same rhythm as .cats, but on paper (no dark-context overrides) */
.sec-alt{background:var(--cream-2)}

.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);position:relative;z-index:2}
.cat{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;display:flex;align-items:flex-end;
  padding:var(--s5);transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.cat:hover{transform:translateY(-4px);box-shadow:var(--sh-4)}
.cat .ph{position:absolute;inset:0}
.cat .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(12,26,40,.88) 6%,rgba(12,26,40,.12) 72%)}
.cat .label{position:relative;z-index:2}
.cat small{display:block;font-weight:700;font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-bright);margin-bottom:6px}
.cat span{font-family:"Bricolage Grotesque";font-weight:700;font-size:var(--fs-h3);line-height:1.1;color:#fff}
.cat .arrow{position:absolute;top:16px;right:16px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.13);display:grid;place-items:center;color:#fff;
  border:1px solid rgba(255,255,255,.24);transition:all .2s var(--ease)}
.cat:hover .arrow{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* ---------- topic tiles ---------- */
.topics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-top:var(--s5)}
.topic{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5) var(--s5) var(--s5);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
  position:relative;overflow:hidden}
.topic::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .24s var(--ease)}
.topic:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--line-strong)}
.topic:hover::before{transform:scaleX(1)}
.topic .ic{font-size:24px;margin-bottom:var(--s3)}
.topic h4{font-size:var(--fs-h4);color:var(--sky);font-weight:700;margin-bottom:var(--s1)}
.topic p{font-size:var(--fs-md);color:var(--slate);line-height:1.5}

/* ---------- split: latest + sidebar ---------- */
.split{display:grid;grid-template-columns:1fr 340px;gap:var(--s7);position:relative;z-index:2}
.latest .item{display:grid;grid-template-columns:158px 1fr;gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--line);
  transition:background .18s var(--ease)}
.latest .item:first-child{padding-top:0}
.latest .item:last-child{border-bottom:none}
.latest .thumb{aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;position:relative;background:var(--sky)}
.latest h3{font-size:var(--fs-h4);color:var(--sky);font-weight:700;margin-bottom:5px;line-height:1.25;transition:color .16s var(--ease)}
.latest .item:hover h3{color:var(--gold-deep)}
.latest .meta{font-size:var(--fs-sm);color:var(--slate);font-weight:500}
.latest .meta b{color:var(--gold-deep);font-weight:700}
.latest p{font-size:var(--fs-md);color:var(--body);margin-top:6px;line-height:1.55}

aside .box,.aside-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s5);margin-bottom:var(--s5);box-shadow:var(--sh-1)}
aside .box h4,.aside-box h4{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  font-size:var(--fs-2xs);color:var(--sky);font-weight:700;padding-bottom:var(--s3);margin-bottom:var(--s3);
  border-bottom:1px solid var(--line);position:relative}
aside .box h4::after,.aside-box h4::after{content:"";position:absolute;left:0;bottom:-1px;width:34px;height:2px;background:var(--gold)}
.live{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2xs);color:var(--gold-deep);font-weight:700}
.live .dot{width:7px;height:7px;border-radius:50%;background:#1f9e6f;animation:pulse 2s infinite}
.evt{display:flex;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.evt:last-child{border-bottom:none}
.evt .date{flex:0 0 50px;text-align:center;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r-xs);padding:7px 0;line-height:1}
.evt .date .mo{font-size:var(--fs-2xs);font-weight:700;color:var(--gold-deep);text-transform:uppercase;letter-spacing:.06em}
.evt .date .d{font-size:20px;font-weight:700;color:var(--sky);font-family:"Bricolage Grotesque"}
.evt .info{font-size:var(--fs-md);min-width:0}
.evt .info a{font-weight:700;color:var(--sky)}
.evt .info a:hover{color:var(--gold-deep)}
.evt .info .v{display:block;font-size:var(--fs-sm);color:var(--slate);margin-top:2px}
.evt .info .t{font-size:var(--fs-sm);color:var(--gold-deep);font-weight:600}
.evt-empty{font-size:var(--fs-md);color:var(--slate);padding:var(--s2) 0}
.weather{display:flex;align-items:center;gap:var(--s4)}
.weather .temp{font-family:"Bricolage Grotesque";font-weight:700;font-size:44px;color:var(--sky);line-height:1}
.weather .cond{font-size:var(--fs-md);color:var(--slate);text-transform:capitalize}
.socials{display:flex;flex-direction:column;gap:var(--s2)}
.soc{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-radius:var(--r-sm);
  color:#fff;font-weight:600;font-size:var(--fs-md);transition:transform .16s var(--ease),filter .16s var(--ease)}
.soc:hover{filter:brightness(1.07);transform:translateX(2px)}
.soc.fb{background:#2b4a86}.soc.ig{background:#8e4079}.soc.yt{background:#a83029}
.soc .n{font-size:var(--fs-sm);opacity:.85}

/* ---------- newsletter band ---------- */
.news{position:relative;color:#fff;overflow:hidden;background:var(--sky)}
.news .bg{position:absolute;inset:0;opacity:.26}
.news .bg svg{width:100%;height:100%;object-fit:cover}
.news .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,50,78,.78),rgba(15,30,45,.93))}
.news .wrap{position:relative;z-index:2;padding:var(--s9) 24px;text-align:center}
.news h2{font-size:var(--fs-h2);font-weight:700;color:#fff}
.news h2 .u{color:var(--gold-bright)}
.news p{color:#c2cfdd;max-width:52ch;margin:var(--s3) auto var(--s6);font-size:var(--fs-lg)}
.news form{display:flex;gap:var(--s2);max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.news input{flex:1;min-width:230px;padding:15px 17px;border:1px solid transparent;border-radius:var(--r-sm);
  font-size:var(--fs-base);font-family:inherit}
.news input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(210,154,52,.3)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#9dabbc;padding:var(--s8) 0 0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s6);padding-bottom:var(--s7)}
footer .word{font-family:"Bricolage Grotesque";font-weight:800;font-size:26px;color:#fff;letter-spacing:-.02em}
footer .word .u{color:var(--gold-bright)}
footer p{font-size:var(--fs-md);margin-top:var(--s3);max-width:38ch;line-height:1.6}
footer h5{color:#fff;font-size:var(--fs-2xs);margin-bottom:var(--s3);font-weight:700}
footer ul{list-style:none}
footer ul li{margin-bottom:var(--s2)}
footer ul a{font-size:var(--fs-md);transition:color .16s var(--ease)}
footer ul a:hover{color:var(--gold-bright)}
.subfoot{border-top:1px solid rgba(255,255,255,.09);padding:var(--s4) 0;font-size:var(--fs-sm)}
.subfoot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s2)}

/* ---------- responsive: layout ---------- */
@media(max-width:980px){
  .mag{grid-template-columns:1fr}.mag .lead{min-height:330px}
  .tri,.cat-grid{grid-template-columns:1fr 1fr}
  .topics{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  /* collapse nav to a stacked hamburger so it never overflows */
  nav.main>.wrap{justify-content:space-between}
  nav.main ul.menu{display:none;flex-direction:column;width:100%}
  nav.main ul.menu.open{display:flex;max-height:calc(100vh - 56px);overflow-y:auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:var(--s2)}
  nav.main>.wrap>ul>li{width:100%;border-top:1px solid rgba(255,255,255,.09)}
  nav.main>.wrap>ul>li>a{height:auto;padding:14px 4px;justify-content:space-between}
  nav.main>.wrap>ul>li>a::after{display:none}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;
    border-radius:0;min-width:0;padding:0 0 var(--s2) var(--s4);background:transparent}
  .submenu li a{color:#c3d0dd;padding:8px 0}
  .submenu li a:hover{background:transparent;color:var(--gold-bright);border-left-color:transparent}
  .submenu .head{color:#8496a8;padding:8px 0 2px}
  .menu-toggle{display:flex;align-items:center;height:52px;color:#fff;font-weight:600;background:none;
    border:none;font-size:var(--fs-base);cursor:pointer;gap:var(--s2)}
}
@media(max-width:680px){
  .tri,.cat-grid,.topics{grid-template-columns:1fr}
  .utility .left{display:none}
  .latest .item{grid-template-columns:1fr}
  .latest .thumb{max-width:280px}
  .foot-grid{grid-template-columns:1fr}
  .hero-inner{padding:var(--s7) 24px var(--s6)}
}

/* ============ SUBPAGE ============ */
.ph svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero{position:relative;min-height:290px;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--sky)}
.phero-bg{position:absolute;inset:0}
.phero-bg svg{width:100%;height:100%;object-fit:cover}
.phero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,26,40,.42) 0%,rgba(12,26,40,.66) 52%,rgba(12,26,40,.90) 100%)}
.phero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:var(--s7) 24px var(--s6)}
.crumb{font-size:var(--fs-2xs);font-weight:700;color:var(--gold-bright);margin-bottom:var(--s3)}
.crumb a{color:var(--gold-bright);transition:color .16s var(--ease)}
.crumb a:hover{color:#fff}
.crumb b{opacity:.72;color:#fff;font-weight:500}
.phero h1{font-size:var(--fs-h1);font-weight:800;max-width:22ch;color:#fff;letter-spacing:-.026em;
  text-shadow:0 2px 18px rgba(0,0,0,.32)}
.phero .dek{font-size:clamp(1rem,.92rem + .4vw,1.15rem);max-width:60ch;margin-top:var(--s3);color:#d8e1ea;line-height:1.55}

.article{padding:var(--sec-y) 0}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--s7)}
.prose p{font-size:var(--fs-lg);color:var(--body);margin-bottom:var(--s4);max-width:70ch;line-height:1.7}
.prose h3{font-size:var(--fs-h3);color:var(--sky);font-weight:700;margin:var(--s6) 0 var(--s3);letter-spacing:-.018em}

/* listing cards — each line on its own row (fixes run-together description + CTA) */
.list-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin:var(--s2) 0 var(--s3)}
.lcard{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r-sm);padding:var(--s4) var(--s4)}
.lcard b{display:block;color:var(--sky);font-size:var(--fs-base);font-weight:700;margin-bottom:3px;line-height:1.3}
.lcard span{display:block;font-size:var(--fs-md);color:var(--slate);line-height:1.5}
a.lcard.linked{display:block;text-decoration:none;position:relative;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
a.lcard.linked:hover{border-left-color:var(--rust);transform:translateY(-2px);box-shadow:var(--sh-2)}
a.lcard.linked .lcard-go{display:block;margin-top:var(--s2);font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep)}
a.lcard.linked:hover .lcard-go{color:var(--rust)}

.tipbox{background:var(--sky);color:#fff;border-radius:var(--r-md);padding:var(--s5);margin:var(--s6) 0;
  display:flex;gap:var(--s4);align-items:flex-start;box-shadow:var(--sh-2)}
.tipbox .k{flex:0 0 auto;background:var(--gold);color:var(--ink);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.09em;text-transform:uppercase;padding:6px 10px;border-radius:var(--r-xs)}
.tipbox p{font-size:var(--fs-base);color:#e3ebf3;margin:0;line-height:1.6}
.btn-inline{display:inline-flex;align-items:center;gap:var(--s2);background:var(--sky);color:#fff;
  font-weight:700;font-size:var(--fs-xs);padding:13px 22px;border-radius:var(--r-sm);margin-top:var(--s1);
  border:none;cursor:pointer;transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn-inline:hover{background:var(--ink);color:#fff;transform:translateY(-1px);box-shadow:var(--sh-2)}
.related a{display:block;padding:10px 0;border-bottom:1px solid var(--line);font-weight:600;
  color:var(--sky);font-size:var(--fs-md);line-height:1.4;transition:color .16s var(--ease)}
.related a:last-child{border:none}
.related a:hover{color:var(--gold-deep)}

.hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.hcard{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:200px;color:#fff;display:flex;
  align-items:flex-end;transition:transform .26s var(--ease),box-shadow .26s var(--ease)}
.hcard:hover{transform:translateY(-4px);box-shadow:var(--sh-4)}
.hcard .sc{position:absolute;inset:0}
.hcard .sc::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(12,26,40,.90) 8%,rgba(12,26,40,.16) 72%)}
.hcard .lab{position:relative;z-index:2;padding:var(--s5)}
.hcard small{display:block;font-weight:700;font-size:var(--fs-2xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-bright);margin-bottom:5px}
.hcard h3{font-size:var(--fs-h3);font-weight:700;color:#fff}

.cal{display:flex;flex-direction:column;gap:var(--s2)}
.calrow{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:var(--s4);align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3) var(--s4);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease)}
.calrow:hover{border-color:var(--gold);box-shadow:var(--sh-2);transform:translateY(-1px)}
.calrow .cd{text-align:center;line-height:1;background:var(--cream);border-radius:var(--r-xs);padding:8px 0}
.calrow .cd .mo{font-size:var(--fs-2xs);font-weight:700;color:var(--gold-deep);text-transform:uppercase;letter-spacing:.06em}
.calrow .cd .d{font-size:21px;font-weight:700;color:var(--sky);font-family:"Bricolage Grotesque"}
.calrow .cn b{display:block;color:var(--sky);font-size:var(--fs-base);font-weight:700;line-height:1.3}
.calrow .cn span{font-size:var(--fs-md);color:var(--slate)}
.calrow .ct{font-size:var(--fs-md);color:var(--gold-deep);font-weight:600;white-space:nowrap}

/* ---------- forms ---------- */
.form{max-width:600px}
.form label{display:block;font-weight:600;font-size:var(--fs-md);color:var(--sky);margin:var(--s4) 0 6px}
.form input,.form textarea,.form select{width:100%;padding:13px 14px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);font-family:inherit;font-size:var(--fs-base);background:var(--paper);color:var(--body);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(210,154,52,.22)}
.form textarea{min-height:130px;resize:vertical}
.concept-note{background:#fdf6e6;border:1px solid #e6cd96;color:#7a5a12;font-size:var(--fs-md);font-weight:500;
  border-radius:var(--r-sm);padding:11px 14px;margin-bottom:var(--s5)}
.news-form input{border:1px solid var(--line-strong)}

@media(max-width:980px){.article-grid{grid-template-columns:1fr}.hubgrid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){
  .list-grid,.hubgrid{grid-template-columns:1fr}
  .calrow{grid-template-columns:52px minmax(0,1fr)}
  .calrow .ct{grid-column:2;text-align:left}
}

/* photo layer over SVG scenes */
.photo-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .5s var(--ease);z-index:0}
.photo-layer.on{opacity:1}

/* ============ BLOG / SEARCH / STATES ============ */
.muted{font-size:var(--fs-md);color:var(--slate)}
.lead-p{font-size:clamp(1.075rem,1rem + .45vw,1.25rem);line-height:1.6;color:var(--sky);font-weight:500;
  max-width:64ch;margin-bottom:var(--s5)}
.related-more{display:inline-block;margin-top:var(--s3);font-weight:700;font-size:var(--fs-sm);color:var(--gold-deep)}
.related-more:hover{color:var(--rust)}

.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--sh-1);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),border-color .24s var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--line-strong)}
.pcard-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sky)}
.pcard-img .ph{position:absolute;inset:0}
.pcard-img .tag{position:absolute;top:12px;left:12px;z-index:3;background:var(--gold);color:var(--ink);
  font-weight:700;font-size:var(--fs-2xs);letter-spacing:.09em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-xs)}
.pcard-body{padding:var(--s5)}
.pcard-body h3{font-size:var(--fs-h4);font-weight:700;color:var(--sky);line-height:1.3;margin-bottom:var(--s2);
  transition:color .16s var(--ease)}
.pcard:hover .pcard-body h3{color:var(--gold-deep)}
.pcard-body .meta{font-size:var(--fs-sm);color:var(--slate);margin-bottom:var(--s2)}
.pcard-body .meta b{color:var(--rust);font-weight:600}
.pcard-body p{font-size:var(--fs-md);color:var(--body);line-height:1.55}

.searchbox{width:100%;padding:17px 20px;border:1px solid var(--line-strong);border-radius:var(--r-md);
  font-family:inherit;font-size:var(--fs-lg);background:var(--paper);color:var(--body);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.searchbox:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(210,154,52,.22)}
.result-item{display:block;padding:var(--s4) var(--s5);margin-top:var(--s3);background:var(--paper);
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r-sm);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.result-item:hover{transform:translateX(3px);box-shadow:var(--sh-2)}
.result-item b{display:block;font-size:var(--fs-h4);color:var(--sky);font-weight:700;line-height:1.3}
.result-item .rs{display:block;font-size:var(--fs-2xs);letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:700;margin:4px 0 6px}
.result-item .rd{display:block;font-size:var(--fs-md);color:var(--slate);line-height:1.5}

.form-ok{background:var(--sage);color:#fff;border-radius:var(--r-md);padding:var(--s5);font-size:var(--fs-lg);font-weight:600}
.form-err{margin-top:var(--s3);background:#fbeaea;color:#8a1c1c;border:1px solid #e3b7b7;border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);font-size:var(--fs-md);font-weight:500}
.form-err a{color:#8a1c1c;text-decoration:underline}

@media(max-width:980px){.bloggrid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.bloggrid{grid-template-columns:1fr}}

/* clickable event rows */
a.evt{cursor:pointer;text-decoration:none;border-radius:var(--r-xs);transition:background .16s var(--ease)}
a.evt:hover{background:rgba(210,154,52,.07)}
a.evt:hover .en{color:var(--gold-deep)}
.evt .en{display:block;font-weight:700;color:var(--sky);font-size:var(--fs-md);line-height:1.35}
.evt .v,.evt .t{pointer-events:none}

/* ---------- rich guide content ---------- */
.prose .spot{border-left:2px solid var(--gold);padding:2px 0 2px var(--s4);margin:var(--s5) 0}
.prose .spot h4{font-family:"Bricolage Grotesque";font-size:var(--fs-h3);color:var(--sky);margin:0 0 6px;
  line-height:1.2;font-weight:700}
.prose .spot .spot-loc{display:inline-block;margin-left:var(--s2);font-family:"Hanken Grotesk";
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--gold-deep);
  vertical-align:middle}
.prose .spot p{margin:0 0 var(--s2)}
.prose ul.facts{list-style:none;margin:0 0 var(--s2);padding:0;display:flex;flex-wrap:wrap;gap:5px var(--s5)}
.prose ul.facts li{font-size:var(--fs-md);color:var(--slate)}
.prose ul.facts li b{color:var(--sky);font-weight:700}
.spot-go{display:inline-block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-deep)}
.spot-go:hover{color:var(--rust)}
.ftable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s4) 0 var(--s1);
  border:1px solid var(--line);border-radius:var(--r-sm)}
table.ftable{border-collapse:collapse;width:100%;min-width:580px;font-size:var(--fs-md)}
table.ftable th{background:var(--sky);color:#e3ebf3;text-align:left;padding:11px 13px;font-size:var(--fs-2xs);
  letter-spacing:.07em;text-transform:uppercase;font-weight:700;white-space:nowrap}
table.ftable td{padding:11px 13px;border-bottom:1px solid var(--line);color:var(--body)}
table.ftable tbody tr:last-child td{border-bottom:none}
table.ftable td.rowh{font-weight:700;color:var(--sky);white-space:nowrap}
table.ftable tbody tr:nth-child(even){background:var(--cream)}
.ftable-note{font-size:var(--fs-sm);color:var(--slate);margin:7px 0 0;font-style:italic}
.faq{margin-top:var(--s6);border-top:1px solid var(--line);padding-top:var(--s5)}
.faq h2{font-size:var(--fs-h3);color:var(--sky);margin:0 0 var(--s3);font-weight:700}
.faq .faq-q{margin:0 0 var(--s4)}
.faq .faq-q h3{font-size:var(--fs-h4);color:var(--sky);margin:0 0 4px;font-weight:700}
.faq .faq-q p{margin:0}
.weather + .weather{margin-top:var(--s2);border-top:1px solid var(--line);padding-top:var(--s2)}

/* ---------- packing list tool ---------- */
.pack-controls{display:flex;flex-wrap:wrap;gap:var(--s2);margin:6px 0 var(--s3)}
.pack-pick{font-family:inherit;font-weight:600;font-size:var(--fs-md);padding:10px 17px;
  border:1px solid var(--line-strong);background:var(--paper);border-radius:var(--r-pill);cursor:pointer;
  color:var(--sky);transition:all .16s var(--ease)}
.pack-pick:hover{border-color:var(--gold);background:var(--cream)}
.pack-pick.active{background:var(--sky);color:#fff;border-color:var(--sky)}
.pack-ages{margin:0 0 var(--s5);font-size:var(--fs-md);color:var(--slate)}
.pack-ages label{cursor:pointer;display:inline-flex;align-items:center;gap:var(--s2)}
.pack-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin:0 0 var(--s3)}
.pack-head h2{font-size:var(--fs-h3);color:var(--sky);margin:0;font-weight:700}
.pack-tip{background:var(--cream-2);border-left:3px solid var(--gold);padding:var(--s3) var(--s4);
  border-radius:var(--r-sm);margin:0 0 var(--s5);font-size:var(--fs-md)}
.pack-group{margin:0 0 var(--s5)}
.pack-group h3{font-size:var(--fs-h4);color:var(--sky);margin:0 0 6px;font-weight:700}
.pack-list{list-style:none;margin:0;padding:0}
.pack-list li{display:flex;align-items:flex-start;gap:11px;padding:9px 2px;border-bottom:1px solid var(--line);
  font-size:var(--fs-base);cursor:pointer;transition:color .14s var(--ease)}
.pack-list li::before{content:"";flex:none;width:18px;height:18px;border:2px solid var(--gold-deep);
  border-radius:var(--r-xs);margin-top:2px;transition:background .14s var(--ease)}
.pack-list li.done::before{background:var(--gold-deep)}
.pack-list li.done{color:var(--slate);text-decoration:line-through}

/* ---------- print ---------- */
@media print{
  .utility,.brandband,nav.main,footer,.news,.statbar,aside,.search-btn,.pack-controls,.pack-ages,
  .pack-print,.phero-bg,.phero-scrim,.skip-link,.wx-alert{display:none !important}
  body{background:#fff;color:#000}
  .phero{min-height:0;padding:0;background:#fff}
  .phero-in{position:static;color:#000;padding:0 0 10px}
  .phero-in h1,.phero-in .dek{color:#000;text-shadow:none}
  .article-grid{display:block}
  a{color:#000;text-decoration:none}
  .pack-list li::before{border-color:#000}
}

/* ---------- weather widget ---------- */
.wx-loc{padding:1px 0}
.wx-loc + .wx-loc{margin-top:var(--s3);border-top:1px solid var(--line);padding-top:var(--s3)}
.wx-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.wx-city{font-weight:600;font-size:var(--fs-md);color:var(--sky)}
.wx-temp{font-family:"Bricolage Grotesque";font-weight:700;font-size:28px;color:var(--sky);line-height:1}
.wx-cond{font-size:var(--fs-sm);color:var(--slate);text-transform:capitalize;margin:2px 0 var(--s2)}
.wx-days{display:flex;gap:5px}
.wx-day{flex:1;text-align:center;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-xs);padding:6px 3px}
.wx-day b{display:block;font-size:var(--fs-2xs);letter-spacing:.05em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.wx-day i{display:block;font-style:normal;font-size:var(--fs-sm);color:var(--sky);font-weight:700;margin-top:3px}
.wx-day span{display:block;font-size:10px;line-height:1.25;color:var(--slate);text-transform:capitalize;margin-top:2px}

/* ---------- NWS alert banner ---------- */
.wx-alert{background:#7a1420;color:#fff}
.wx-alert[hidden]{display:none}
.wx-alert-in{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;padding:10px 0;color:#fff;
  text-decoration:none;font-size:var(--fs-md)}
.wx-alert-ev{font-weight:700}
.wx-alert-area{opacity:.86;font-size:var(--fs-sm)}
.wx-alert-more{margin-left:auto;background:rgba(255,255,255,.18);padding:2px 9px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:600}
.wx-alert-in:hover{text-decoration:underline}

/* ---------- air-quality badge ---------- */
.wx-aqi{display:inline-block;font-size:var(--fs-2xs);font-weight:700;padding:1px 8px;border-radius:var(--r-pill);
  vertical-align:middle;white-space:nowrap}
.aqi-good{background:#e0f2de;color:#1d6129}
.aqi-mod{background:#fbf0cf;color:#7d5f0f}
.aqi-usg{background:#fbe2c8;color:#984c13}
.aqi-unh{background:#f9d6d6;color:#992020}
.aqi-vunh{background:#ecd9f0;color:#63237a}
.aqi-haz{background:#eccfd2;color:#66111d}