/* ============================================================
   Domfront — an independent visitor guide
   Shared stylesheet. Fonts loaded per-page via Google Fonts
   (self-hosted/vendored at finalize). Palette: warm sandstone
   + slate-roof grey + orchard-green + perry-pear amber.
   ============================================================ */

:root{
  --paper:#F4EDDD;        /* warm sandstone paper */
  --paper-2:#EDE3CC;      /* deeper sand panel */
  --paper-3:#E6DABE;      /* card sand */
  --ink:#26221B;          /* warm near-black */
  --ink-2:#4B4535;        /* body ink */
  --ink-3:#756B54;        /* muted / meta */
  --line:#D8C6A0;         /* sandstone rule */
  --line-2:#C9B590;
  --slate:#586470;        /* slate-roof grey */
  --slate-d:#3B434C;
  --green:#5B6E43;        /* orchard green */
  --green-d:#485838;
  --amber:#C0801F;        /* perry-pear amber */
  --amber-l:#DCA43A;
  --dark:#22241A;         /* dark olive backing (supporters/footer) */
  --dark-2:#2C2F22;
  --dark-ink:#E7E0CC;
  --dark-mute:#A49C82;

  --font-display:"Marcellus", Georgia, serif;
  --font-body:"Spectral", Georgia, serif;
  --font-label:"Archivo", system-ui, sans-serif;

  --wrap:1240px;
  --measure:70ch;
  --gutter:clamp(20px, 5vw, 56px);
  --radius:3px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:19px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--green-d); text-decoration:none}
a:hover{color:var(--amber)}
::selection{background:var(--amber-l); color:var(--ink)}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:400; color:var(--ink); line-height:1.08; margin:0}
p{margin:0 0 1.1em}
hr.rule{height:1px; background:var(--line); border:0; margin:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter)}
.wrap-narrow{max-width:900px; margin:0 auto; padding-inline:var(--gutter)}

/* kicker / labels */
.kicker{font-family:var(--font-label); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); font-weight:600}
.eyebrow{font-family:var(--font-label); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); font-weight:500}

/* ---------- Header / masthead ---------- */
.site-head{position:sticky; top:0; z-index:100; background:rgba(244,237,221,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.masthead{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 0}
.brand{display:flex; flex-direction:column; line-height:1; text-decoration:none}
.brand b{font-family:var(--font-display); font-size:27px; letter-spacing:.04em; color:var(--ink); font-weight:400}
.brand span{font-family:var(--font-label); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); margin-top:5px}
.mainnav{display:flex; align-items:center; gap:4px; font-family:var(--font-label)}
.mainnav > .navitem{position:relative}
.mainnav a.nav-l{display:inline-block; padding:9px 13px; font-size:13.5px; letter-spacing:.02em; color:var(--ink-2); border-radius:var(--radius)}
.mainnav a.nav-l:hover{color:var(--ink); background:var(--paper-3)}
.nav-map{margin-left:6px; display:inline-flex; align-items:center; gap:7px; background:var(--green-d); color:var(--paper)!important; padding:9px 15px!important; border-radius:var(--radius)}
.nav-map:hover{background:var(--ink)}
.nav-map svg{width:15px; height:15px}
/* dropdown submenu */
.submenu{position:absolute; top:100%; left:0; min-width:250px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 20px 40px -20px rgba(38,34,27,.4); padding:8px; opacity:0; visibility:hidden; transform:translateY(6px); transition:.16s; z-index:10}
.navitem:hover .submenu, .navitem:focus-within .submenu{opacity:1; visibility:visible; transform:translateY(0)}
.submenu a{display:block; padding:8px 11px; font-family:var(--font-body); font-size:15px; color:var(--ink-2); border-radius:2px; line-height:1.3}
.submenu a:hover{background:var(--paper-3); color:var(--ink)}
.submenu .sub-head{font-family:var(--font-label); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); padding:6px 11px 4px}
.navtoggle{display:none; background:none; border:1px solid var(--line-2); border-radius:var(--radius); padding:8px 10px; cursor:pointer; color:var(--ink)}
.navtoggle svg{width:20px; height:20px; display:block}

/* ---------- Section scaffolding ---------- */
.band{padding:clamp(48px,7vw,88px) 0}
.band-sand{background:var(--paper-2)}
.band-dark{background:var(--dark); color:var(--dark-ink)}
.band-slate{background:var(--slate-d); color:#EAEDF0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:34px}
.sec-head h2{font-size:clamp(30px,4vw,44px)}
.sec-head .lead-in{max-width:38ch; color:var(--ink-3); font-size:17px; margin:0}
.band-dark .sec-head h2{color:#F4EDDD}
.band-dark .sec-head .lead-in{color:var(--dark-mute)}
.seclink{font-family:var(--font-label); font-size:13px; letter-spacing:.04em; color:var(--green-d); border-bottom:1.5px solid var(--amber); padding-bottom:2px; white-space:nowrap}
.seclink:hover{color:var(--amber)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-label); font-size:14px; font-weight:600; letter-spacing:.02em; padding:13px 24px; border-radius:var(--radius); cursor:pointer; border:1.5px solid transparent; transition:.15s}
.btn-amber{background:var(--amber); color:#fff}
.btn-amber:hover{background:#a86c17; color:#fff}
.btn-ghost{border-color:var(--line-2); color:var(--ink-2); background:transparent}
.btn-ghost:hover{border-color:var(--green-d); color:var(--green-d)}
.btn svg{width:16px;height:16px}
/* hero CTA — tuned for the dark hero image */
.hero-cta .btn{padding:14px 26px; box-shadow:0 10px 26px -14px rgba(0,0,0,.55)}
.hero-cta .btn-amber{background:var(--amber-l); color:#231a08}
.hero-cta .btn-amber:hover{background:#e7b24d; color:#231a08}
.hero-cta .btn-ghost{border-color:rgba(244,237,221,.6); color:#F4EDDD; background:rgba(20,20,14,.14); backdrop-filter:blur(2px)}
.hero-cta .btn-ghost:hover{border-color:#fff; color:#fff; background:rgba(244,237,221,.16)}

/* ---------- FRONT / hero ---------- */
.hero{position:relative}
.hero-figure{position:relative; height:clamp(420px,60vh,600px); border-radius:var(--radius); overflow:hidden; background:linear-gradient(150deg,#8994a0,#9a8767 55%,#c2913a)}
/* bocage texture — an irregular hedgerow-field patchwork laid over hero imagery */
.hero-figure::after, .art-figure-hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:soft-light; opacity:.5;
  background-image:
    repeating-linear-gradient(17deg, rgba(40,55,30,.55) 0 1.5px, transparent 1.5px 74px),
    repeating-linear-gradient(102deg, rgba(40,55,30,.42) 0 1.5px, transparent 1.5px 96px),
    repeating-linear-gradient(63deg, rgba(30,45,22,.30) 0 1px, transparent 1px 132px),
    radial-gradient(140% 120% at 30% 12%, transparent 55%, rgba(28,34,18,.5) 100%);}
.hero-figure .hero-inner{z-index:2} .hero-cap{z-index:2} .art-figure-hero figcaption{z-index:2}
.hero-figure.hero-full{border-radius:0; height:clamp(480px,74vh,720px)}
.hero-full .hero-inner{padding-left:0; padding-right:0}
.hero-full .hero-inner .wrap{width:100%}
.hero-figure img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-figure .scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(30,28,22,.12),rgba(30,28,22,.62))}
.hero-inner{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(24px,4vw,52px)}
.hero-inner .kicker{color:var(--amber-l); margin-bottom:16px}
.hero-title{font-size:clamp(44px,7vw,88px); color:#F6EFDE; line-height:.98; letter-spacing:.005em; margin:0 0 18px; text-shadow:0 2px 24px rgba(0,0,0,.35); max-width:14ch}
.hero-dek{font-size:clamp(17px,2vw,21px); color:#EDE4D2; max-width:40ch; margin:0 0 26px; text-shadow:0 1px 10px rgba(0,0,0,.45)}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-cap{position:absolute; right:16px; bottom:14px; font-family:var(--font-label); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.85); text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* ---------- Feed / browse ---------- */
.browse{display:flex; gap:9px; flex-wrap:wrap; margin:36px 0 26px}
.chip{font-family:var(--font-label); font-size:13px; letter-spacing:.03em; padding:8px 16px; border-radius:100px; border:1.5px solid var(--line-2); background:transparent; color:var(--ink-2); cursor:pointer; transition:.14s}
.chip:hover{border-color:var(--amber)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}

.feed{display:grid; grid-template-columns:repeat(12,1fr); gap:22px}
.card{display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; transition:transform .16s, box-shadow .16s}
.card:hover{transform:translateY(-3px); box-shadow:0 20px 38px -22px rgba(38,34,27,.5)}
.card-img{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--paper-3)}
.card-img img{width:100%; height:100%; object-fit:cover}
.card-cat{position:absolute; left:12px; top:12px; font-family:var(--font-label); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:rgba(244,237,221,.92); padding:4px 10px; border-radius:100px}
.card-body{display:flex; flex-direction:column; flex:1; padding:18px 20px 20px}
.card h3{font-size:24px; line-height:1.12; margin:0 0 9px}
.card .dek{font-size:15.5px; color:var(--ink-3); line-height:1.5; margin:0 0 16px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card .meta{margin-top:auto; font-family:var(--font-label); font-size:12.5px; letter-spacing:.02em; color:var(--ink-3); display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.card .meta .dot{width:3px; height:3px; border-radius:50%; background:var(--line-2)}
/* feed spans — varied editorial rhythm */
.feed .card{grid-column:span 4}
.feed .card.lead-card{grid-column:span 12; flex-direction:row}
.feed .card.lead-card .card-img{aspect-ratio:auto; width:52%; min-height:300px}
.feed .card.lead-card .card-body{flex:1; justify-content:center; padding:30px 32px}
.feed .card.lead-card h3{font-size:34px}
.feed .card.lead-card .dek{font-size:17px; -webkit-line-clamp:4}
.feed .card.wide{grid-column:span 6}

/* ---------- Section feature rows ---------- */
.feature-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px}
.feature-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.feature-grid.cols-3{grid-template-columns:repeat(3,1fr)}

/* ---------- THE MAP band ---------- */
.map-wrap{display:grid; grid-template-columns:1.5fr 1fr; gap:26px; align-items:stretch}
.map-figure{position:relative; margin:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-2); min-height:460px; background:
  radial-gradient(120% 130% at 30% 15%, #47533f 0%, #333c2f 45%, #262c22 100%)}
.map-slot{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center}
.map-slot::before{content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(190,200,175,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(190,200,175,.09) 1px,transparent 1px);
  background-size:46px 46px}
.map-slot .slot-note{position:relative; font-family:var(--font-label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(226,231,214,.5); border:1px dashed rgba(226,231,214,.32); padding:9px 16px; border-radius:var(--radius); background:rgba(20,24,16,.3)}
.map-compass{position:absolute; right:16px; top:16px; width:44px; height:44px; opacity:.55}
.sights{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column}
.sights-head{font-family:var(--font-label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); padding:14px 18px; border-bottom:1px solid var(--line)}
.sight{display:flex; gap:13px; align-items:flex-start; padding:13px 18px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; transition:background .12s}
.sight:last-child{border-bottom:0}
.sight:hover, .sight.is-active{background:var(--paper-3)}
.sight .pin{flex:none; width:26px; height:26px; border-radius:50% 50% 50% 2px; transform:rotate(-45deg); display:grid; place-items:center; margin-top:2px}
.sight .pin span{transform:rotate(45deg); font-family:var(--font-label); font-size:11px; font-weight:700; color:#fff}
.sight .s-name{font-family:var(--font-display); font-size:17.5px; color:var(--ink); line-height:1.2}
.sight .s-blurb{font-size:13.5px; color:var(--ink-3); line-height:1.45; margin-top:2px}
.sight .s-type{font-family:var(--font-label); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); margin-top:3px; display:inline-block}

/* pin type colours */
.t-sight{background:var(--amber)} .t-quarter{background:var(--green)} .t-nature{background:var(--slate)}
.t-country{background:var(--green-d)} .t-daytrip{background:#9a7b3f}

/* ---------- Interactive coordinate map (real geodata) ---------- */
.town-map{position:absolute; inset:0; width:100%; height:100%; display:block}
.tm-grid{stroke:rgba(190,200,175,.10); stroke-width:1}
.tm-ref{stroke:rgba(220,164,58,.28); stroke-width:1; stroke-dasharray:3 4}
.tm-ref-label{font-family:var(--font-label); font-size:10px; fill:rgba(226,231,214,.45); letter-spacing:.08em}
.tm-pin{cursor:pointer}
.tm-pin .tm-hit{fill:transparent}
.tm-pin .tm-dot{stroke:rgba(244,237,221,.75); stroke-width:2; transition:r .15s, stroke .15s}
.tm-pin .tm-num{font-family:var(--font-label); font-size:12px; font-weight:700; fill:#211f16; text-anchor:middle; dominant-baseline:central; pointer-events:none}
.tm-pin .tm-tip{font-family:var(--font-label); font-size:12px; fill:#F4EDDD; text-anchor:middle; opacity:0; transition:opacity .15s; pointer-events:none; paint-order:stroke; stroke:rgba(20,22,15,.85); stroke-width:4px}
.tm-pin.on .tm-dot, .tm-pin:hover .tm-dot{stroke:#fff}
.tm-pin.on .tm-tip, .tm-pin:hover .tm-tip{opacity:1}
.tm-fill-sight{fill:var(--amber)} .tm-fill-quarter{fill:var(--green)} .tm-fill-nature{fill:var(--slate)} .tm-fill-country{fill:var(--green-d)}
.tm-compass{opacity:.6}
.tm-scale-label{font-family:var(--font-label); font-size:10px; letter-spacing:.1em; fill:rgba(226,231,214,.5)}
.tm-daytrip{position:absolute; display:flex; align-items:center; gap:8px; background:rgba(26,28,20,.82); border:1px solid #4a5340; border-radius:100px; padding:7px 13px; text-decoration:none; backdrop-filter:blur(4px); transition:.15s}
.tm-daytrip:hover, .tm-daytrip.on{border-color:var(--amber-l); background:rgba(40,44,30,.9)}
.tm-daytrip .tm-dt-dot{width:10px; height:10px; border-radius:50%; background:#9a7b3f; flex:none}
.tm-daytrip .tm-dt-name{font-family:var(--font-label); font-size:12px; color:#EBE3D0; white-space:nowrap}
.tm-daytrip .tm-dt-dist{font-family:var(--font-label); font-size:10.5px; color:var(--dark-mute)}
.tm-info{position:absolute; left:16px; right:16px; bottom:16px; background:rgba(20,22,15,.9); border:1px solid #4a5340; border-radius:var(--radius); padding:13px 16px; backdrop-filter:blur(6px); pointer-events:none; opacity:0; transform:translateY(6px); transition:.18s}
.tm-info.show{opacity:1; transform:translateY(0)}
.tm-info .tmi-name{font-family:var(--font-display); font-size:18px; color:var(--amber-l); margin:0 0 3px}
.tm-info .tmi-blurb{font-size:14px; color:#D6CFBB; line-height:1.45; margin:0}
.map-scan{font-family:var(--font-label); font-size:11px; letter-spacing:.04em; color:var(--ink-3); margin:12px 2px 0}

/* ---------- Gazetteer A-Z ---------- */
.gaz-tools{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:22px}
.gaz-search{flex:1; min-width:220px; position:relative}
.gaz-search input{width:100%; font-family:var(--font-body); font-size:16px; padding:12px 14px 12px 42px; border:1px solid var(--line-2); border-radius:var(--radius); background:var(--paper); color:var(--ink)}
.gaz-search input:focus{outline:2px solid var(--amber); outline-offset:1px}
.gaz-search svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--ink-3)}
.gaz-alpha{display:flex; gap:3px; flex-wrap:wrap}
.gaz-alpha button{font-family:var(--font-label); font-size:12px; width:28px; height:28px; border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2); border-radius:2px; cursor:pointer}
.gaz-alpha button:hover:not(:disabled){border-color:var(--amber); color:var(--amber)}
.gaz-alpha button:disabled{opacity:.32; cursor:default}
.gaz-list{columns:2; column-gap:30px; margin:0; padding:0; list-style:none}
.gaz-entry{break-inside:avoid; border-top:1px solid var(--line); padding:15px 0; display:flex; gap:14px}
.gaz-entry .g-letter{font-family:var(--font-display); font-size:26px; color:var(--amber); line-height:1; width:26px; flex:none}
.gaz-entry .g-name{font-family:var(--font-display); font-size:20px; color:var(--ink); line-height:1.15}
.gaz-entry a.g-name:hover{color:var(--amber)}
.gaz-entry .g-type{font-family:var(--font-label); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-left:8px}
.gaz-entry .g-blurb{font-size:14.5px; color:var(--ink-3); line-height:1.5; margin:4px 0 0}
.gaz-empty{padding:30px 0; color:var(--ink-3); font-style:italic}

/* ---------- Plan band ---------- */
.plan-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:26px}
.plan-item{border-top:2px solid var(--amber); padding-top:15px}
.plan-item .p-k{font-family:var(--font-label); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:8px}
.plan-item h3{font-size:22px; margin-bottom:8px}
.plan-item p{font-size:15.5px; color:var(--ink-3); line-height:1.55; margin:0}

/* ---------- Supporters ---------- */
.makers-head{text-align:center; max-width:44ch; margin:0 auto 40px}
.makers-head .kicker{color:var(--amber-l)}
.makers-head h2{font-size:clamp(28px,4vw,38px); color:#F4EDDD; margin:12px 0 12px}
.makers-head p{color:var(--dark-mute); font-size:16px; margin:0}
.sponsor{background:var(--dark-2); border:1px solid #3a3d2c; border-radius:var(--radius); text-decoration:none; display:flex; transition:border-color .15s}
.sponsor:hover{border-color:var(--amber)}
.sponsor img{background:#191b12}
.featured-makers{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.featured-makers .sponsor{flex-direction:column; padding:22px}
.featured-makers .sponsor img{width:100%; height:74px; object-fit:contain; border-radius:2px; margin-bottom:16px; padding:8px}
.featured-makers .sponsor .sponsor-blurb{font-family:var(--font-body); font-size:14px; color:var(--dark-mute); line-height:1.45; min-height:2.9em}
.featured-makers .sponsor .m-name{font-family:var(--font-display); font-size:19px; color:#F4EDDD; margin-bottom:6px}
.makers-divider{display:flex; align-items:center; gap:16px; margin:38px 0 26px; color:var(--dark-mute)}
.makers-divider .eyebrow{color:var(--dark-mute)}
.makers-divider hr{flex:1; height:1px; background:#3a3d2c; border:0}
.roll-makers{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.roll-makers .sponsor{align-items:center; gap:11px; padding:10px 16px}
.roll-makers .sponsor img{width:30px; height:30px; object-fit:contain; border-radius:2px}
.roll-makers .sponsor .sponsor-blurb{display:none}
.roll-makers .sponsor .m-name{font-family:var(--font-label); font-size:13px; color:#C7C0AC}

/* ---------- Footer ---------- */
.site-foot{background:#191B12; color:#8E886F; padding:52px 0 40px}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; padding-bottom:34px; border-bottom:1px solid #2b2d20}
.foot-brand b{font-family:var(--font-display); font-size:26px; color:#E8DFCC; display:block; margin-bottom:10px}
.foot-brand p{font-size:14px; line-height:1.55; max-width:34ch; margin:0}
.foot-col h4{font-family:var(--font-label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-l); margin-bottom:14px}
.foot-col a{display:block; color:#B2AB92; font-size:14.5px; padding:5px 0}
.foot-col a:hover{color:#E8DFCC}
.foot-legal{padding-top:26px; font-size:13px; color:#6f6a55; line-height:1.5}

/* ============================================================
   ARTICLE / POST SYSTEM
   ============================================================ */
.article-hero{position:relative}
.crumb{font-family:var(--font-label); font-size:12px; letter-spacing:.04em; color:var(--ink-3); padding:22px 0 0}
.crumb a{color:var(--ink-3)} .crumb a:hover{color:var(--amber)}
.crumb .sep{opacity:.5; margin:0 7px}
.art-head{padding:20px 0 30px}
.art-head .kicker{margin-bottom:16px}
.art-title{font-size:clamp(38px,6vw,68px); line-height:1.02; letter-spacing:.004em; max-width:18ch; margin:0 0 18px}
.art-standfirst{font-family:var(--font-body); font-size:clamp(19px,2.4vw,24px); line-height:1.45; color:var(--ink-2); max-width:42ch; margin:0 0 22px; font-style:italic}
.art-byline{font-family:var(--font-label); font-size:13.5px; letter-spacing:.03em; color:var(--ink-3); display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.art-byline .dot{width:3px; height:3px; border-radius:50%; background:var(--line-2)}
.art-figure-hero{position:relative; aspect-ratio:21/9; border-radius:var(--radius); overflow:hidden; margin:8px 0 0; background:linear-gradient(150deg,#9a8767,#7a6a52 55%,#b99a6a)}
.art-figure-hero img{width:100%; height:100%; object-fit:cover}
.art-figure-hero figcaption{position:absolute; left:16px; bottom:12px; font-family:var(--font-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.9); text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* article layout: wide asymmetric measure, breakout figures */
.article-body{max-width:var(--measure); margin:44px auto 0; padding-inline:var(--gutter); font-size:20px; line-height:1.72}
.article-body > *{max-width:100%}
.article-body h2{font-size:clamp(26px,3.4vw,36px); margin:1.7em 0 .5em; line-height:1.1; display:flex; gap:16px; align-items:baseline}
.article-body h2 .h-num{font-family:var(--font-label); font-size:14px; font-weight:600; color:var(--amber); letter-spacing:.05em; flex:none; padding-top:.35em}
.article-body h3{font-size:24px; margin:1.4em 0 .4em}
.article-body p{margin:0 0 1.1em}
.article-body p a, .article-body li a{color:var(--green-d); border-bottom:1px solid rgba(91,110,67,.35)}
.article-body p a:hover{color:var(--amber); border-color:var(--amber)}
.lead{font-size:1.18em; line-height:1.5; color:var(--ink-2)}
.lead::first-letter, .has-dropcap::first-letter{float:left; font-family:var(--font-display); font-size:4.2em; line-height:.66; padding:.06em .12em 0 0; color:var(--amber)}

/* breakout width helpers */
.article-body .breakout{max-width:min(1080px, 92vw); margin-inline:calc(50% - min(540px,46vw)); }
@media(max-width:1160px){ .article-body .breakout{max-width:100%; margin-inline:0} }

/* ---------- Palette components ---------- */
.pullquote{margin:1.6em 0; border:0; padding:0}
.pullquote p{font-family:var(--font-display); font-size:clamp(24px,3.2vw,34px); line-height:1.22; color:var(--ink); border-left:3px solid var(--amber); padding-left:26px; margin:0}
.blockquote{margin:1.5em 0; padding:0 0 0 24px; border-left:3px solid var(--line-2)}
.blockquote p{font-size:1.05em; font-style:italic; color:var(--ink-2); margin:0 0 .4em}
.blockquote cite{font-family:var(--font-label); font-size:13px; font-style:normal; letter-spacing:.03em; color:var(--ink-3)}
.callout{margin:1.6em 0; background:var(--paper-2); border:1px solid var(--line); border-left:3px solid var(--green); border-radius:var(--radius); padding:22px 26px}
.callout p{font-size:17px; line-height:1.55; margin:0}
.callout .c-head{font-family:var(--font-label); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--green-d); margin-bottom:8px; display:block}
.note{font-size:16px; line-height:1.55; color:var(--ink-2); background:var(--paper-3); border-radius:var(--radius); padding:14px 18px; margin:1.4em 0}
.note b{font-family:var(--font-label); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); font-weight:600; margin-right:6px}

/* end-notes (editorial footnotes) */
.notemark{font-family:var(--font-label); font-size:.62em; font-weight:700; color:var(--amber); vertical-align:super; text-decoration:none; padding:0 1px}
.notemark:hover{color:var(--green-d)}
.endnotes{margin:2.4em 0 0; border-top:1px solid var(--line); padding-top:20px}
.endnotes h3{font-family:var(--font-label); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px}
.endnotes ol{margin:0; padding-left:1.3em}
.endnotes li{font-size:16px; line-height:1.55; color:var(--ink-2); margin-bottom:10px}
.endnotes li::marker{color:var(--amber); font-family:var(--font-label)}

/* versus / compare */
.versus, .datatable{width:100%; border-collapse:collapse; margin:1.6em 0; font-size:16px}
.versus th, .versus td, .datatable th, .datatable td{padding:12px 15px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.45}
.versus thead th, .datatable thead th{font-family:var(--font-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); background:var(--paper-2)}
.versus tbody th{font-family:var(--font-display); font-size:17px; color:var(--ink); font-weight:400; width:26%}
.datatable tbody tr:nth-child(even){background:var(--paper-2)}
.datatable caption, .versus caption{font-family:var(--font-label); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding-bottom:8px}

/* statblocks */
.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:16px; margin:1.6em 0}
.statblock{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px; text-align:center}
.statblock .stat-num{display:block; font-family:var(--font-display); font-size:40px; line-height:1; color:var(--amber); margin-bottom:8px}
.statblock .stat-label{font-family:var(--font-label); font-size:12px; letter-spacing:.03em; color:var(--ink-3); line-height:1.35}

/* timeline */
.timeline{list-style:none; margin:1.7em 0; padding:0; border-left:2px solid var(--line-2)}
.timeline li{position:relative; padding:0 0 22px 26px}
.timeline li::before{content:""; position:absolute; left:-7px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--amber); border:2px solid var(--paper)}
.timeline .t-when{display:block; font-family:var(--font-label); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); font-weight:600; margin-bottom:3px}
.timeline .t-what{display:block; font-size:16.5px; line-height:1.5; color:var(--ink-2)}

/* charts */
.chart{margin:1.7em 0}
.chart svg{width:100%; height:auto; display:block; overflow:visible}
.chart figcaption{font-family:var(--font-label); font-size:12px; letter-spacing:.03em; color:var(--ink-3); margin-top:12px}
.bar-track{fill:var(--paper-3)} .bar-fill{fill:var(--amber)} .bar-fill.alt{fill:var(--green)}
.bar-label{font-family:var(--font-label); font-size:12px; fill:var(--ink-2)}
.bar-val{font-family:var(--font-label); font-size:12px; font-weight:600; fill:var(--ink)}
.axis-line{stroke:var(--line-2); stroke-width:1}
.line-path{fill:none; stroke:var(--green); stroke-width:2.5}
.line-dot{fill:var(--amber)}

/* figures */
.article-figure{margin:1.8em 0}
.article-figure img{width:100%; border-radius:var(--radius); background:var(--paper-3); aspect-ratio:16/10; object-fit:cover}
.article-figure figcaption{font-family:var(--font-label); font-size:13px; letter-spacing:.02em; color:var(--ink-3); margin-top:10px; line-height:1.45}
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:1.8em 0}
.gallery figure{margin:0}
.gallery img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--radius); background:var(--paper-3)}
.gallery figcaption{font-family:var(--font-label); font-size:12px; color:var(--ink-3); margin-top:7px}

/* locator map inside article */
.article-body .map-figure{min-height:320px; margin-block:1.8em}
.map-figure figcaption{font-family:var(--font-label); font-size:13px; letter-spacing:.02em; color:var(--ink-3); padding:12px 2px 0}

/* profile / org cards */
.profile-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:1.8em 0}
.profile-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.profile-card .p-photo{width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--paper-3); margin-bottom:14px}
.profile-card.no-photo::before{content:""; display:block; width:64px; height:64px; border-radius:50%; background:var(--green); margin-bottom:14px; opacity:.18}
.profile-card h3{font-size:21px; margin-bottom:4px}
.profile-card .p-role{font-family:var(--font-label); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); margin-bottom:10px}
.profile-card p{font-size:15px; color:var(--ink-2); line-height:1.5; margin:0 0 10px}
.profile-card .p-links a{font-family:var(--font-label); font-size:13px; margin-right:14px}
.profile-card .p-attr{font-size:12.5px; color:var(--ink-3); font-style:italic}
.org-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,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:var(--radius); padding:13px 15px; text-decoration:none; color:inherit}
.org-card:hover{border-color:var(--amber)}
.org-card .org-logo{width:38px; height:38px; object-fit:contain; border-radius:2px; background:var(--paper-3)}
.org-card.no-logo .org-logo{background:var(--slate); opacity:.2}
.org-card .org-name{font-family:var(--font-display); font-size:16px; color:var(--ink); display:block; line-height:1.2}
.org-card .org-host{font-family:var(--font-label); font-size:11px; color:var(--ink-3); display:block; margin-top:2px}
.entity-ref{font-family:var(--font-label); font-size:.92em; color:var(--green-d); border-bottom:1px solid var(--line-2); white-space:nowrap}
.entity-ref:hover{color:var(--amber)}

/* lexicon / definition blocks */
.lexicon{margin:1.9em 0; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px}
.lexicon .lx-head{font-family:var(--font-label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--green-d); margin:0 0 8px}
.deflist{margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 34px}
.deflist > div{padding:11px 0; border-top:1px solid var(--line)}
.deflist dt{font-family:var(--font-display); font-size:17.5px; color:var(--ink); line-height:1.2}
.deflist dd{margin:3px 0 0; font-size:14.5px; color:var(--ink-3); line-height:1.48}
@media(max-width:760px){.deflist{grid-template-columns:1fr}}

/* related */
.related{margin:2.6em auto 0; max-width:var(--measure); padding-inline:var(--gutter)}
.related h3{font-family:var(--font-label); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); border-top:2px solid var(--amber); padding-top:16px; margin-bottom:16px}
.related-links, .further-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.related-links a, .further-grid a{display:block; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; text-decoration:none; color:inherit; transition:.15s}
.related-links a:hover, .further-grid a:hover{border-color:var(--amber); transform:translateY(-2px)}
.related-links .r-cat{font-family:var(--font-label); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); display:block; margin-bottom:6px}
.related-links .r-title{font-family:var(--font-display); font-size:19px; color:var(--ink); line-height:1.2}

/* article foot / prevnext */
.art-foot{margin-top:36px}

/* ---------- Category index pages ---------- */
.cat-hero{padding:44px 0 30px}
.cat-hero .kicker{margin-bottom:14px}
.cat-hero h1{font-size:clamp(40px,6vw,64px); max-width:16ch; margin:0 0 18px}
.cat-hero .cat-intro{font-size:clamp(18px,2.2vw,22px); color:var(--ink-2); max-width:44ch; line-height:1.5}
.cat-list{list-style:none; margin:0; padding:0; display:grid; gap:0}
.cat-list li{border-top:1px solid var(--line)}
.cat-list li:last-child{border-bottom:1px solid var(--line)}
.cat-list a{display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; padding:26px 4px; text-decoration:none; color:inherit; transition:padding .15s}
.cat-list a:hover{padding-left:14px}
.cat-list .c-num{font-family:var(--font-label); font-size:13px; color:var(--amber); font-weight:600}
.cat-list .c-main h3{font-size:clamp(24px,3vw,32px); margin:0 0 6px}
.cat-list .c-main p{font-size:16px; color:var(--ink-3); margin:0; line-height:1.5; max-width:60ch}
.cat-list .c-meta{font-family:var(--font-label); font-size:12.5px; color:var(--ink-3); text-align:right; white-space:nowrap}
.cat-list .c-arrow{color:var(--ink-3)}

/* ---------- simple content pages (about/contact/404) ---------- */
.page-hero{padding:52px 0 20px}
.page-hero h1{font-size:clamp(38px,6vw,64px); max-width:16ch; margin:0 0 18px}
.page-hero .page-dek{font-size:clamp(18px,2.2vw,22px); color:var(--ink-2); max-width:44ch; line-height:1.5}
.prose{max-width:var(--measure); font-size:19px; line-height:1.7}
.prose h2{font-size:28px; margin:1.5em 0 .4em}
.prose p{margin:0 0 1.1em}
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin:1.6em 0}
.contact-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.contact-card svg{width:24px; height:24px; color:var(--amber); margin-bottom:12px}
.contact-card h3{font-size:20px; margin-bottom:6px}
.contact-card p{font-size:15px; color:var(--ink-3); margin:0; line-height:1.5}
.err-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}

/* ---------- styleguide helpers ---------- */
.sg-section{padding:40px 0; border-top:1px solid var(--line)}
.sg-label{font-family:var(--font-label); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:18px}
.sg-swatches{display:flex; flex-wrap:wrap; gap:12px}
.sw{width:120px}
.sw i{display:block; height:64px; border-radius:var(--radius); border:1px solid rgba(0,0,0,.08)}
.sw span{font-family:var(--font-label); font-size:11px; color:var(--ink-3); display:block; margin-top:6px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .feed .card, .feed .card.wide{grid-column:span 6}
  .feed .card.lead-card{grid-column:span 12}
  .map-wrap{grid-template-columns:1fr}
  .map-figure{min-height:360px}
  .feature-grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body{font-size:18px}
  .mainnav{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:8px; box-shadow:0 20px 30px -20px rgba(38,34,27,.4)}
  .mainnav.open{display:flex}
  .mainnav a.nav-l{padding:12px 14px}
  .nav-map{margin:6px 0 0}
  .submenu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; border-left:2px solid var(--line); border-radius:0; margin:0 0 4px 14px; padding:0 0 0 6px}
  .navtoggle{display:block}
  .feed .card, .feed .card.wide, .feed .card.lead-card{grid-column:span 12}
  .feature-grid.cols-4, .feature-grid.cols-3{grid-template-columns:1fr}
  .feed .card.lead-card{flex-direction:column}
  .feed .card.lead-card .card-img{width:100%; min-height:0; aspect-ratio:16/10}
  .feed .card.lead-card .card-body{padding:20px}
  .feed .card.lead-card h3{font-size:26px}
  .featured-makers{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .gaz-list{columns:1}
  .article-body{font-size:18px}
  .art-figure-hero{aspect-ratio:4/3}
  .cat-list a{grid-template-columns:auto 1fr; gap:14px}
  .cat-list .c-meta{grid-column:2; text-align:left}
  .cat-list .c-arrow{display:none}
  .article-body h2{gap:10px}
  .statrow{grid-template-columns:1fr 1fr}
}
@media(max-width:400px){
  .hero-title{font-size:38px}
  .statrow{grid-template-columns:1fr 1fr}
}

/* fix run-on: stack the sight name / blurb / type */
.sight>span:last-child{display:flex;flex-direction:column;min-width:0}
.sight .s-name{display:block}
.sight .s-blurb{display:block;margin-top:4px}

/* breathing room before the dark footer (was: .related glued to footer) */
main{padding-bottom:4.75rem}

/* roll sponsor logos: normalize by HEIGHT so mixed-orientation marks (square + ultra-wide)
   read at even visual weight instead of square logos ballooning to fill a 30x30 box */
.roll-makers .sponsor{padding:13px 18px}
.roll-makers .sponsor img{width:auto; height:27px; max-width:118px; min-width:26px; object-fit:contain; background:transparent; border-radius:0}

/* article-locator-fix: break out to lexicon width + lift caption off the dark map */
.article-body .map-figure.breakout{max-width:min(1080px,92vw);margin-inline:calc(50% - min(540px,46vw))}
@media (max-width:820px){.article-body .map-figure.breakout{max-width:100%;margin-inline:0}}
.article-body .map-figure{background:transparent;border:0;overflow:visible;min-height:0;border-radius:0}
.article-body .map-figure .loc-map{display:block;width:100%;height:auto;border:1px solid var(--line-2);border-radius:var(--radius)}
.article-body .map-figure figcaption{color:var(--ink-3);background:transparent;padding:14px 2px 0}

/* 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. */
.roll-makers .sponsor.sponsor img{height:38px!important;display:block!important;width:118px!important;max-width:100%!important;flex:none!important}

/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .wrap.masthead{padding-inline:var(--gutter)}
}

/* op-money-grid-fill: the supporters grid left a measurable band of unused width.
   Fixed pixel tracks (often `repeat(auto-fit,<length>)`, which can never fill) are
   restated as `minmax(min(<track>,100%),1fr)`: Design's track size becomes the
   MINIMUM and the tracks share the remainder, so the tiles stay equal and the row
   fills. Measured per width, and only applied where more than half a tile of width
   was going unused. Tile ground, padding, borders and logo sizing are untouched. */
.roll-makers > .sponsor{flex:1 1 auto;max-width:100%}

/* op-roll-mark-centre: operator — "not centered logos". Filling the roll tiles (above) made
   them wider and left the marks stranded: measured at 540 the mark sat 19px from the left edge
   of a 237px tile with 100px empty to its right. `.roll-makers .sponsor` is a flex row whose
   default justification is flex-start, which was invisible while the tiles were only as wide
   as their contents. Placement only — the mark's own size, the tile ground, border and padding
   are Design's. */
/* ⚠️ scoped to phone widths on the operator's instruction: "We basically want to
     desktop grid design to stay as-is ... We are strictly re-working how mobile is
     displaying." the marks were only stranded once the tiles filled at phone width. */
@media (max-width:900px){.roll-makers .sponsor{justify-content:center}}

/* op-article-width: the article column was capped at 588px (67 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1440 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1440px){
  div.article-body{--measure:min(101.200ch, 100%)!important}
}
@media (min-width:1600px){
  div.article-body{--measure:min(clamp(101.200ch, 70.278vw, calc(101.200ch * 1.2)), 100%)!important}
  div.article-body > :is(p:not([class])){font-size:clamp(20px,1.3889vw,24.0px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--font-display); font-weight: 400; color: var(--ink); line-height: 1.08; margin: 0px;}
.cat-list .c-main h2:where(.rt-h3){font-size: clamp(24px, 3vw, 32px); margin: 0px 0px 6px;}
.contact-card h2:where(.rt-h3){font-size: 20px; margin-bottom: 6px;}
/* op-heading-levels:end */


/* op-tablet-fit — dropdowns of the last two nav items open leftwards so a hidden one never widens the page */
.mainnav > .navitem:last-child .submenu, .mainnav > .navitem:nth-last-child(2) .submenu{left:auto;right:0}
/* op-tablet-fit:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:901px) and (max-width:1299px){
  div.wrap.masthead{padding-left:max(var(--gutter), 18px);padding-right:max(var(--gutter), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > span.card-img > img,
  a.card.lead-card > span.card-img > img,
  div.article-body > figure.article-figure.breakout > img,
  div.breakout.gallery > figure > img,
  div.wrap > figure.art-figure-hero > img,
  section > figure.hero-figure.hero-full > img){height:auto}
/* op-img-dims:end */