/* ============================================================
   Monroe County — an independent local guide
   Warm foothills palette: forest green · mountain gold · sky blue
   ============================================================ */


:root{
  --ink:#26382c;          /* warm near-black green */
  --ink-2:#5b5346;        /* body secondary */
  --ink-3:#857b67;        /* meta / captions */
  --paper:#F4E9D2;        /* warm golden cream base */
  --paper-2:#FBF3E4;      /* card / raised */
  --paper-3:#EFDCB8;      /* warm tan band */
  --green:#2E5D46;
  --green-2:#3E7A54;
  --green-d:#22301f;
  --gold:#D79A3C;
  --gold-d:#a5732a;
  --sky:#5A7A8C;
  --rust:#B4552E;
  --line:#e7d4ac;
  --line-2:#dcc496;
  --dark:#232c25;         /* dark bands / sponsor bg */
  --dark-2:#2d3a2f;

  --display:'Newsreader',Georgia,serif;
  --sans:'Public Sans',system-ui,sans-serif;

  --wrap:1240px;
  --gut:clamp(20px,5vw,56px);
  --radius:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:18px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.1;margin:0;color:var(--ink);text-wrap:balance}
p{margin:0 0 1em}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--gold-d)}
::selection{background:var(--gold);color:#231f16}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:920px;margin-inline:auto;padding-inline:var(--gut)}

/* ---------- shared bits ---------- */
.kicker{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gold-d)}
.kicker.on-dark{color:var(--gold)}
.eyebrow{font-family:var(--sans);font-size:12.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:16px;
  padding:13px 24px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.15s}
.btn-primary{background:var(--green);color:var(--paper)}
.btn-primary:hover{background:var(--green-d);color:#fff}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.tag{display:inline-block;font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  padding:5px 11px;border-radius:5px;background:var(--green);color:var(--paper)}
.tag.visit{background:#2E5D46}.tag.outdoors{background:#3E7A54}.tag.food{background:#c98a2e;color:#231f16}
.tag.community{background:#5A7A8C}.tag.events{background:#B4552E}
.icon{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(243,238,223,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand .mark{width:38px;height:38px;flex:none}
.brand .name{font-family:var(--display);font-weight:700;font-size:25px;line-height:1;color:var(--ink)}
.brand .sub{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-d);margin-top:3px}
.nav{display:flex;gap:6px;align-items:center}
.nav a{font-family:var(--sans);font-weight:600;font-size:15.5px;color:var(--ink-2);padding:9px 14px;border-radius:999px;transition:.15s;white-space:nowrap}
.nav a:hover{color:var(--green);background:rgba(46,93,70,.08)}
.nav a.active{color:var(--green);background:rgba(46,93,70,.1)}
.nav-toggle{display:none;background:none;border:1px solid var(--line-2);border-radius:10px;padding:9px;cursor:pointer;color:var(--ink)}
.nav-toggle svg{width:22px;height:22px}

/* ---------- footer ---------- */
.site-footer{background:var(--green-d);color:#c6d4c2;margin-top:80px}
.site-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-block:56px 34px;border-bottom:1px solid rgba(255,255,255,.1)}
.site-footer h4{color:var(--paper);font-family:var(--display);font-size:24px;margin-bottom:10px}
.site-footer .fcol h5{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.site-footer .fcol a{display:block;color:#c6d4c2;font-size:15.5px;padding:5px 0}
.site-footer .fcol a:hover{color:#fff}
.site-footer .about p{color:#9db199;font-size:15.5px;max-width:34ch}
.disclaimer{padding-block:22px 30px;color:#8a9d86;font-size:14px;line-height:1.5}

/* ============================================================
   HOMEPAGE
   ============================================================ */
/* hero */
.hero{position:relative;min-height:640px;display:flex;align-items:flex-end;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,32,24,.82) 0%,rgba(20,32,24,.5) 42%,rgba(20,32,24,.05) 74%),linear-gradient(0deg,rgba(20,32,24,.6),transparent 45%);pointer-events:none}
.hero .inner{position:relative;padding-block:56px;max-width:640px}
.hero h1{font-size:clamp(40px,5.4vw,68px);color:#fbf6ec;margin:16px 0 14px;line-height:1.02}
.hero .dek{font-size:clamp(18px,2vw,21px);color:#eae2d2;margin:0 0 26px;max-width:44ch}
.hero .meta{color:#d9cdb6;font-size:15px;font-weight:600;margin-bottom:22px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hero .meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}

/* section heading */
.sec{padding-block:72px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(28px,3.4vw,40px)}
.sec-head .lead-line{color:var(--ink-2);font-size:17px;margin:8px 0 0;max-width:52ch}
.sec-head .rule{border:0;border-top:2px solid var(--green);margin:14px 0 0}

/* at a glance */
.glance{background:var(--green);color:var(--paper)}
.glance .sec-head h2{color:var(--paper)}
.glance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.glance-grid.with-map{grid-template-columns:1fr 1fr 1fr;grid-auto-rows:1fr}
.gcard{background:var(--paper-2);border-radius:12px;padding:24px;display:flex;flex-direction:column}
.gcard .glabel{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-d);margin-bottom:12px}
.gcard .glabel .icon{width:18px;height:18px;stroke:var(--gold-d)}
.gcard h3{font-size:22px;margin-bottom:8px}
.gcard p{font-size:15.5px;color:var(--ink-2);margin:0}
.gcard .spots{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.gcard .spots span{background:var(--paper-3);color:var(--ink);font-size:14px;font-weight:600;padding:7px 13px;border-radius:999px}
.map-card{background:var(--paper-3);border-radius:12px;padding:18px 20px 8px;grid-column:span 1}
.map-card .glabel{color:var(--gold-d)}
.map-card .mholder{background:var(--paper-2);border-radius:8px;padding:6px}
.map-card .mholder svg{border-radius:6px}

/* what's on (seasons) */
.whatson{background:var(--paper-3)}
.season-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.season-tabs button{font-family:var(--sans);font-size:15px;font-weight:700;padding:10px 20px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--paper-2);color:var(--ink-2);cursor:pointer;transition:.15s}
.season-tabs button:hover{border-color:var(--green)}
.season-tabs button[aria-selected="true"]{background:var(--green);color:var(--paper);border-color:var(--green)}
.season-panels .panel{display:none;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 36px;gap:26px;align-items:center}
.season-panels .panel[data-active="true"]{display:grid;grid-template-columns:auto 1fr}
.season-panels .season-name{font-family:var(--display);font-size:clamp(30px,4vw,46px);color:var(--green);padding-right:32px;border-right:2px solid var(--line);line-height:1}
.season-panels .season-desc{font-size:clamp(18px,2vw,22px);color:var(--ink);margin:0;max-width:46ch}

/* featured cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.card-grid.feat{grid-template-columns:repeat(4,1fr)}
.card{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:100%;transition:.18s}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(35,44,37,.55)}
.card .thumb{aspect-ratio:16/10;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:.4s}
.card:hover .thumb img{transform:scale(1.04)}
.card .body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.card .tagrow{margin-bottom:10px}
.card h3{font-size:21px;line-height:1.16;margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card p{font-size:15px;color:var(--ink-2);margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .cmeta{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--ink-3);display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* lead feature (asymmetric) */
.lead-feature{display:grid;grid-template-columns:1.5fr 1fr;gap:0;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:26px}
.lead-feature .thumb{aspect-ratio:auto;min-height:340px}
.lead-feature .thumb img{width:100%;height:100%;object-fit:cover}
.lead-feature .body{padding:36px 40px;display:flex;flex-direction:column;justify-content:center}
.lead-feature h3{font-size:clamp(26px,3vw,36px);line-height:1.08;margin:12px 0 12px}
.lead-feature p{font-size:17px;color:var(--ink-2);margin:0 0 18px;max-width:46ch}
.lead-feature .cmeta{font-size:14px;font-weight:600;color:var(--ink-3)}

/* CSS-only "more" expander */
.more-toggle{display:block;text-align:center;margin-top:34px}
.more-toggle label{cursor:pointer}
input.more-cb{position:absolute;opacity:0;pointer-events:none}
.more-hidden{display:none}
.more-cb:checked ~ .more-hidden{display:grid}
.more-cb:checked ~ .more-toggle{display:none}

/* ============================================================
   SPONSORS (native "Friends of the guide" furniture)
   ============================================================ */
.supporters{background:var(--dark);color:#c6d4c2}
.supporters .sec-head h2{color:var(--paper)}
.supporters .sec-head .lead-line{color:#9db199}
.sponsor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sponsor-grid.recommended{grid-template-columns:repeat(3,1fr)}
.sponsor{display:flex;flex-direction:column;gap:10px;background:var(--dark-2);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:18px;transition:.15s;min-height:120px}
.sponsor:hover{border-color:rgba(215,154,60,.5);background:#33422f}
.sponsor img{width:100%;height:64px;object-fit:contain;border-radius:6px;background:#1c241c}
.sponsor .sponsor-blurb{font-size:13.5px;color:#a9b6a2;line-height:1.45}
.sponsor .sponsor-blurb:empty{min-height:.6em}
.supporters .grouplabel{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);margin:0 0 16px}

/* ============================================================
   ARTICLE
   ============================================================ */
.article-hero{position:relative;min-height:560px;display:flex;align-items:flex-end;overflow:hidden}
.article-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-hero .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,32,24,.9) 2%,rgba(20,32,24,.4) 45%,rgba(20,32,24,.15) 100%);pointer-events:none}
.article-hero .inner{position:relative;padding-block:48px;max-width:900px}
.article-hero h1{font-size:clamp(34px,5vw,60px);color:#fbf6ec;margin:16px 0 16px;line-height:1.03}
.article-hero .dek{font-size:clamp(18px,2.1vw,22px);color:#eae2d2;margin:0 0 20px;max-width:52ch}
.amETA,.article-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:#d9cdb6;font-size:15px;font-weight:600}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}

.article-body{max-width:74ch;margin-inline:auto;padding-inline:clamp(20px,5vw,32px);padding-block:56px;font-size:20px;line-height:1.75;color:#33302a}
.article-body>p{margin:0 0 1.15em}
.article-body h2.sec-num{font-size:clamp(26px,3vw,34px);margin:2em 0 .6em;padding-top:.4em;display:flex;gap:16px;align-items:baseline}
.article-body h2.sec-num .n{font-family:var(--sans);font-weight:800;font-size:16px;color:var(--gold-d);letter-spacing:1px;flex:none;padding-top:6px}
.article-body h3{font-size:24px;margin:1.6em 0 .5em}
.article-body a{color:var(--green);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.article-body a:hover{text-decoration-color:var(--gold)}
.article-body .lead::first-letter,.dropcap::first-letter{float:left;font-family:var(--display);font-weight:600;font-size:4.6em;line-height:.78;padding:6px 12px 0 0;color:var(--green)}

/* ---------- palette components ---------- */
.lead{font-size:23px;line-height:1.55;color:var(--ink);font-weight:400;margin:0 0 1.1em}
.pullquote{margin:1.8em -4px;padding:0 0 0 26px;border-left:4px solid var(--gold)}
.pullquote p{font-family:var(--display);font-size:clamp(24px,3.2vw,32px);line-height:1.22;color:var(--green);font-style:italic;margin:0}
.blockquote{margin:1.6em 0;padding:22px 26px;background:var(--paper-3);border-radius:12px}
.blockquote p{font-family:var(--display);font-size:21px;font-style:italic;color:var(--ink);margin:0 0 8px}
.blockquote cite{font-family:var(--sans);font-size:15px;font-style:normal;font-weight:700;color:var(--ink-3)}
.callout{margin:1.7em 0;padding:24px 26px;background:var(--paper-2);border:1px solid var(--line);border-left:5px solid var(--green);border-radius:12px}
.callout p{font-size:18px;margin:0;color:var(--ink)}
.callout .callout-title{font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--green);margin-bottom:8px;display:flex;gap:8px;align-items:center}
.note{margin:1.5em 0;padding:16px 20px;background:rgba(90,122,140,.1);border-radius:10px;font-size:16.5px;color:var(--ink-2)}
.note strong{color:var(--sky)}

/* key-facts panel */
.keyfacts{margin:1.8em 0;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:26px 28px}
.keyfacts .kf-head{font-family:var(--sans);font-weight:800;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold-d);margin-bottom:16px;display:flex;gap:9px;align-items:center}
.keyfacts dl{margin:0;display:grid;grid-template-columns:1fr;gap:14px}
.keyfacts .kf{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.keyfacts .kf:last-child{border-bottom:0;padding-bottom:0}
.keyfacts dt{font-weight:700;color:var(--green);font-size:16.5px}
.keyfacts dd{margin:0;font-size:16px;color:var(--ink-2);line-height:1.5}

/* statblocks */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:1.9em 0}
.statblock{background:var(--paper-2);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:12px;padding:22px 20px;display:flex;flex-direction:column;gap:6px}
.statblock .stat-num{font-family:var(--display);font-weight:600;font-size:clamp(28px,4vw,38px);color:var(--green);line-height:1}
.statblock .stat-label{font-size:14.5px;color:var(--ink-2);line-height:1.4}

/* timeline */
.timeline{list-style:none;margin:1.9em 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line-2)}
.timeline li{position:relative;padding:0 0 22px 40px}
.timeline li::before{content:"";position:absolute;left:2px;top:5px;width:16px;height:16px;border-radius:50%;background:var(--gold);border:3px solid var(--paper)}
.timeline li:last-child{padding-bottom:0}
.timeline .t-when{display:block;font-family:var(--sans);font-weight:800;font-size:14px;letter-spacing:.4px;text-transform:uppercase;color:var(--green);margin-bottom:3px}
.timeline .t-what{display:block;font-size:17px;color:var(--ink);line-height:1.5}

/* versus / datatable */
.versus,.datatable{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:16.5px}
.versus th,.versus td,.datatable th,.datatable td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.datatable thead th,.versus thead th{background:var(--green);color:var(--paper);font-family:var(--sans);font-size:13.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;border-bottom:0}
.datatable thead th:first-child{border-radius:8px 0 0 0}.datatable thead th:last-child{border-radius:0 8px 0 0}
.datatable tbody tr:nth-child(even),.versus tbody tr:nth-child(even){background:var(--paper-2)}
.versus tbody th{background:var(--paper-3);font-weight:700;color:var(--ink);width:34%}
.datatable caption,.versus caption{caption-side:bottom;font-size:14px;color:var(--ink-3);padding-top:10px;text-align:left}

/* charts */
.chart{margin:1.9em 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{font-size:14.5px;color:var(--ink-3);margin-top:12px;line-height:1.5}
.chart .bar-rect{fill:var(--green)}
.chart .bar-rect.alt{fill:var(--gold)}
.chart .axis{stroke:var(--line-2);stroke-width:1}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .lbl{font-family:var(--sans);font-size:12.5px;fill:var(--ink-2)}
.chart .val{font-family:var(--sans);font-size:12px;font-weight:700;fill:var(--ink)}
.chart .line-path{fill:none;stroke:var(--green);stroke-width:2.5}
.chart .line-area{fill:rgba(46,93,70,.12)}
.chart .dot{fill:var(--gold)}

/* figures / gallery */
.article-figure{margin:2em 0}
.article-figure img{width:100%;border-radius:14px}
.article-figure figcaption,.map-figure figcaption{font-size:14.5px;color:var(--ink-3);margin-top:12px;line-height:1.5;max-width:70ch}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:2em 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px}

/* map figure */
.map-figure{margin:2.2em 0}
.map-figure .map-slot{background:var(--paper-3);border:1px solid var(--line);border-radius:14px;padding:16px}
.map-figure .map-slot svg{width:100%;height:auto;border-radius:8px;background:var(--paper-2)}
.map-figure .map-slot:empty{min-height:260px;display:grid;place-items:center}
.map-figure .map-slot:empty::after{content:"Locator map";color:var(--ink-3);font-size:15px}

/* profile / org cards */
.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:1.9em 0}
.profile-card{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.profile-card .p-photo{width:66px;height:66px;border-radius:50%;object-fit:cover;margin-bottom:12px}
.profile-card.no-photo{border-left:4px solid var(--sky)}
.profile-card h3{font-size:20px;margin:0 0 3px}
.profile-card .p-role{font-family:var(--sans);font-size:13.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--gold-d);margin:0 0 10px}
.profile-card p{font-size:15.5px;color:var(--ink-2);margin:0 0 8px;line-height:1.5}
.profile-card .p-links a{font-size:14.5px;font-weight:700;margin-right:14px}
.org-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:1.6em 0}
.org-card{display:flex;align-items:center;gap:12px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.org-card:hover{border-color:var(--green)}
.org-card .org-logo{width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--paper-3);flex:none}
.org-card.no-logo .org-logo{display:grid;place-items:center}
.org-card .org-name{font-weight:700;color:var(--ink);font-size:16px;display:block}
.org-card .org-host{font-size:13px;color:var(--ink-3);display:block}
.entity-ref{font-weight:700;color:var(--green);white-space:nowrap}
.entity-ref:hover{color:var(--gold-d)}

/* related / further */
.further-grid,.related-links{margin:0}
.related{background:var(--paper-3);border-top:1px solid var(--line)}
.related h2{font-size:clamp(24px,3vw,32px);margin-bottom:24px}
.further-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
ul.related-links{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
ul.related-links li{margin:0}
.further-grid a,ul.related-links a{display:flex;flex-direction:column;gap:8px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:22px 24px;height:100%;transition:.15s}
.further-grid a:hover,ul.related-links a:hover{transform:translateY(-3px);box-shadow:0 16px 34px -22px rgba(35,44,37,.5)}
.further-grid a .r-tag,ul.related-links a .r-tag{font-size:11.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--gold-d)}
.further-grid a .r-title,ul.related-links a .r-title{font-family:var(--display);font-size:20px;color:var(--ink);line-height:1.15}

/* ============================================================
   CATEGORY / SECTION pages
   ============================================================ */
.cat-hero{position:relative;min-height:380px;display:flex;align-items:flex-end;overflow:hidden}
.cat-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-hero .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,32,24,.88),rgba(20,32,24,.25))}
.cat-hero .inner{position:relative;padding-block:44px;max-width:760px}
.cat-hero h1{font-size:clamp(38px,5.5vw,64px);color:#fbf6ec;margin:14px 0 12px}
.cat-hero .dek{font-size:clamp(18px,2vw,22px);color:#eae2d2;margin:0;max-width:48ch}
ul.cat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
ul.cat-list>li{margin:0}
.cat-list .card{height:100%}

/* sections hub / about */
.prose{max-width:70ch;margin-inline:auto;padding-inline:clamp(20px,5vw,32px);font-size:19px;line-height:1.75;color:#33302a}
.prose h2{font-size:30px;margin:1.6em 0 .5em}
.prose p{margin:0 0 1.1em}
.prose a{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}

/* styleguide */
.sg-section{padding-block:40px;border-bottom:1px solid var(--line)}
.sg-section>h2{font-size:30px;margin-bottom:6px}
.sg-section>.sg-note{color:var(--ink-3);font-size:15px;margin-bottom:24px}
.sg-swatches{display:flex;flex-wrap:wrap;gap:14px}
.sw{width:120px}
.sw .chip{height:70px;border-radius:10px;border:1px solid rgba(0,0,0,.08)}
.sw code{font-size:12px;color:var(--ink-3);display:block;margin-top:6px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .glance-grid,.glance-grid.with-map{grid-template-columns:1fr 1fr}
  .card-grid,.card-grid.feat{grid-template-columns:repeat(2,1fr)}
  .sponsor-grid,.sponsor-grid.recommended{grid-template-columns:repeat(2,1fr)}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .further-grid,ul.related-links{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:17px}
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;background:var(--paper-2);
    border-bottom:1px solid var(--line);padding:14px var(--gut) 22px;transform:translateY(-130%);transition:transform .25s;box-shadow:0 20px 40px -20px rgba(0,0,0,.3)}
  .nav[data-open="true"]{transform:none}
  .nav a{padding:13px 12px;font-size:17px;border-radius:10px}
  .nav-toggle{display:inline-flex}
  .glance-grid,.glance-grid.with-map{grid-template-columns:1fr}
  .map-card{grid-column:auto}
  .card-grid,.card-grid.feat{grid-template-columns:1fr}
  .lead-feature{grid-template-columns:1fr}
  .lead-feature .thumb{min-height:220px;aspect-ratio:16/10}
  .season-panels .panel[data-active="true"]{grid-template-columns:1fr}
  .season-panels .season-name{border-right:0;border-bottom:2px solid var(--line);padding:0 0 12px;margin-bottom:4px}
  .profile-grid{grid-template-columns:1fr}
  .keyfacts .kf{grid-template-columns:1fr;gap:4px}
  .sponsor-grid,.sponsor-grid.recommended{grid-template-columns:1fr 1fr}
  .site-footer .cols{grid-template-columns:1fr;gap:24px}
  .further-grid,ul.related-links,ul.cat-list{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .sec{padding-block:52px}
  .article-body{padding-block:40px}
}
@media (max-width:380px){
  .sponsor-grid,.sponsor-grid.recommended,.gallery{grid-template-columns:1fr}
  .statrow{grid-template-columns:1fr 1fr}
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain;background:transparent}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-grid.recommended .sponsor.sponsor img{box-sizing:border-box!important;padding:10px 17px!important}
.sponsor-grid .sponsor.sponsor img{box-sizing:border-box!important;padding:10px 17px!important}

/* op-footer-compact: the footer printed 5 rows for 5 link(s) in
   1 list(s) — 869px at 390, 6% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too, and the group holder takes two columns,
   measured 869 -> 639px (26% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:min(0.42vw,6px)!important;row-gap:8px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:26px}
}

/* op-blurb-rows: money blurbs ran to 8 rows at 390, 1421px of tier across
   11 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsor-grid.recommended .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:60px!important;min-height:0!important;overflow:hidden!important}
  .sponsor-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:60px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-grid.recommended (3 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sponsor-grid.recommended:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — button.nav-toggle reached
   347px in a 320px screen (+27px), inside
   div.wrap.bar. Remedy: let the row wrap. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  div.wrap.bar{flex-wrap:wrap!important}
  button.nav-toggle{min-width:0!important;max-width:100%!important}
}

/* op-edge-gutter: copy sat against the screen edge at phone width — div.body — with no gutter at all
   (1 runs of text measured within 2px of the glass; 1 remain, in full-bleed
   elements that are set to the edge deliberately).
   ⚠️ THE 20px IS NOT MINE: it is the gutter this build already uses on its own full-width
   containers at the same width, taken as the median of them. Only the columns that TOUCH are
   padded — operator, on kaanet: "Only items needed padding are the ones touching edges of
   browsers ... Not globally." Phone widths only. */
@media (max-width:390px){
  div.body{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important}
}
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0px; color: var(--ink); text-wrap: balance;}
.card h2:where(.rt-h3){font-size: 21px; line-height: 1.16; margin: 0px 0px 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.article-body h2:where(.rt-h3){font-size: 24px; margin: 1.6em 0px 0.5em;}
.profile-card h2:where(.rt-h3){font-size: 20px; margin: 0px 0px 3px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > div.thumb > img,
  a.lead-feature > div.thumb > img,
  article > div.article-hero > img,
  body > div.cat-hero > img,
  body > section.hero > img){height:auto}
/* op-img-dims:end */
@media (min-width:761px) and (max-width:899px){.nav { position: fixed; inset: 64px 0px auto; flex-direction: column; align-items: stretch; gap: 2px; background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 14px var(--gut) 22px; transform: translateY(-130%); transition: transform 0.25s; box-shadow: rgba(0, 0, 0, 0.3) 0px 20px 40px -20px; }.nav[data-open="true"] { transform: none; }.nav a { padding: 13px 12px; font-size: 17px; border-radius: 10px; }.nav-toggle { display: inline-flex; }}