/* ============================================================
   Bonnes Nouvelles — La Carte
   Shared design system. Warm bottle-green / ecru / oxidized brass.
   Fonts loaded the normal way (Google Fonts) so the mockup previews
   true; self-hosted at finalize.
   ============================================================ */


:root{
  /* palette */
  --paper:      #ECE4CF;   /* ecru ground */
  --paper-warm: #E6DCC2;   /* panel */
  --paper-card: #F3EDDD;   /* raised card */
  --ink:        #23291F;   /* near-black green, body text */
  --green:      #223B2E;   /* bottle green */
  --green-mid:  #2E4B3A;
  --green-deep: #16241C;
  --green-dark: #101A13;   /* darkest backing */
  --brass:      #97783B;   /* oxidized brass */
  --brass-deep: #6F5A2C;
  --brass-lit:  #C6A24E;   /* brass on dark */
  --line:       #CDBF9C;   /* hairlines on paper */
  --line-soft:  #DCCFA9;
  --muted:      #6C6444;   /* muted label on paper */
  --muted-2:    #857B5C;
  --on-green:   #ECE4CF;
  --on-green-dim:#B9C4B2;
  --on-green-mut:#8FA090;

  /* type */
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:    'Spectral', Georgia, 'Times New Roman', serif;

  /* scale */
  --wrap: 1240px;
  --wrap-wide: 1420px;
  --measure: 68ch;
  --gutter: clamp(20px, 5vw, 64px);

  --shadow: 0 24px 60px -28px rgba(16,26,19,.55);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:19px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.04;margin:0;color:var(--green);letter-spacing:.005em}
p{margin:0 0 1.1em;text-wrap:pretty}
a{color:var(--brass-deep);text-decoration:none}
a:hover{color:var(--green)}
strong{font-weight:600}
em{font-style:italic}

/* ---- shared helpers ---- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:var(--wrap-wide);margin-inline:auto;padding-inline:var(--gutter)}
.kicker{
  font-family:var(--body);font-weight:500;font-size:13.5px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--brass);
  margin:0;
}
.kicker.on-dark{color:var(--brass-lit)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  border-bottom:2px solid var(--green);padding-bottom:14px;margin-bottom:34px;flex-wrap:wrap}
.section-head h2{font-size:clamp(30px,4vw,46px)}
.section-head .see-all{font-family:var(--body);font-size:15px;letter-spacing:.04em;color:var(--brass-deep);white-space:nowrap}
.eyebrow-serif{font-family:var(--body);font-style:italic;font-size:17px;color:var(--muted-2)}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{background:var(--paper);border-bottom:1px solid var(--line)}
.masthead-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px}
.wordmark{font-family:var(--display);font-weight:700;color:var(--green);
  font-size:clamp(26px,3.4vw,34px);line-height:1;letter-spacing:.01em;white-space:nowrap}
.wordmark span{display:block;font-family:var(--body);font-weight:500;font-size:11px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--brass);margin-top:5px}
.mast-nav{display:flex;gap:clamp(18px,2.4vw,40px);align-items:center}
.mast-nav a{font-family:var(--body);font-size:14px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);position:relative;padding-block:6px}
.mast-nav a:hover{color:var(--brass-deep)}
.mast-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brass)}
.mast-burger{display:none;background:none;border:1px solid var(--line);border-radius:2px;
  width:44px;height:40px;cursor:pointer;color:var(--green)}
.mast-burger svg{width:20px;height:20px;margin:auto;stroke:currentColor;fill:none;stroke-width:1.6}

/* ============================================================
   ARTICLE BODY + long-form component system
   ============================================================ */
.article-body{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter);font-size:20.5px;line-height:1.72}
.article-body > p{margin:0 0 1.15em}
.article-wide .article-body{max-width:760px}

.lead{font-family:var(--body);font-weight:400;font-size:clamp(21px,2.4vw,26px);
  line-height:1.5;color:var(--green-mid);font-style:italic;margin:0 0 1.1em}

/* drop cap + lead opener */
.article-body .has-dropcap::first-letter,
p.dropcap::first-letter{
  font-family:var(--display);font-weight:700;float:left;font-size:4.4em;line-height:.72;
  padding:.06em .12em 0 0;color:var(--brass);
}

/* numbered sections */
.article-body h2{font-size:clamp(27px,3vw,36px);margin:1.7em 0 .5em;position:relative;padding-top:.4em}
.article-body h2 .sec-no{display:block;font-family:var(--body);font-weight:500;font-size:14px;
  letter-spacing:.24em;color:var(--brass);text-transform:uppercase;margin-bottom:.5em}
.article-body h3{font-size:clamp(22px,2.4vw,27px);margin:1.4em 0 .4em}
.article-body h2::before{content:"";position:absolute;top:0;left:0;width:46px;height:2px;background:var(--brass)}

.article-body a{color:var(--brass-deep);border-bottom:1px solid var(--line);transition:border-color .15s,color .15s}
.article-body a:hover{color:var(--green);border-color:var(--brass)}

/* .lead component (styleguide) */
p.lead{font-style:italic}

/* pullquote */
.pullquote{margin:1.8em 0;padding:0;border:0;border-top:2px solid var(--brass);border-bottom:2px solid var(--brass);text-align:center}
.pullquote p{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.6vw,38px);
  line-height:1.24;color:var(--green);margin:0;padding:.7em .2em}
.pullquote cite{display:block;font-family:var(--body);font-style:normal;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass);padding-bottom:1.1em}

/* sourced blockquote */
.blockquote{margin:1.6em 0;padding:.4em 0 .4em 26px;border-left:3px solid var(--brass)}
.blockquote p{font-family:var(--display);font-size:clamp(22px,2.6vw,27px);font-style:italic;
  line-height:1.4;color:var(--green-mid);margin:0 0 .4em}
.blockquote cite{font-family:var(--body);font-style:normal;font-size:15px;color:var(--muted-2)}

/* callout */
.callout{margin:1.7em 0;background:var(--green);color:var(--on-green);padding:26px 30px;
  border-radius:2px;position:relative}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brass-lit)}
.callout p{margin:0;font-size:19px;line-height:1.6;color:var(--on-green)}
.callout p+p{margin-top:.7em}
.callout .callout-label{font-family:var(--body);font-weight:500;font-size:12.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass-lit);display:block;margin-bottom:.6em}

/* note */
.note{margin:1.5em 0;background:var(--paper-warm);border:1px solid var(--line);
  padding:16px 20px;font-size:16.5px;line-height:1.55;color:var(--muted);border-radius:2px}
.note::before{content:"Note — ";font-weight:600;color:var(--brass-deep);font-variant:small-caps;letter-spacing:.04em}

/* key-facts aside (contextual aside) */
.keyfacts{margin:1.8em 0;background:var(--paper-card);border:1px solid var(--line);border-top:3px solid var(--brass);padding:22px 26px}
.keyfacts h4{font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass-deep);margin:0 0 14px}
.keyfacts dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 20px}
.keyfacts dt{font-family:var(--display);font-weight:600;font-size:20px;color:var(--green);font-style:italic}
.keyfacts dd{margin:0;font-size:16px;line-height:1.45;color:var(--ink)}

/* ---- data / comparison ---- */
.versus{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:17px}
.versus caption{font-family:var(--body);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);text-align:left;padding-bottom:10px}
.versus th,.versus td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.versus thead th{font-family:var(--display);font-size:22px;color:var(--green);border-bottom:2px solid var(--green)}
.versus tbody th{font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:.06em;
  color:var(--muted);width:34%;text-transform:uppercase}
.versus tbody tr:last-child td,.versus tbody tr:last-child th{border-bottom:0}

.datatable{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:17px}
.datatable caption{font-family:var(--body);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);text-align:left;padding-bottom:10px}
.datatable th,.datatable td{padding:11px 15px;text-align:left;border-bottom:1px solid var(--line)}
.datatable thead th{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);background:var(--paper-warm)}
.datatable tbody tr:nth-child(even){background:rgba(151,120,59,.05)}
.datatable td:not(:first-child){font-variant-numeric:tabular-nums}

/* statblocks */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:1.8em 0}
.statblock{background:var(--green);color:var(--on-green);padding:22px 20px;border-radius:2px;
  display:flex;flex-direction:column;gap:6px;border-bottom:3px solid var(--brass-lit)}
.stat-num{font-family:var(--display);font-weight:700;font-size:clamp(34px,5vw,46px);line-height:.9;color:var(--brass-lit)}
.stat-label{font-family:var(--body);font-size:14.5px;line-height:1.35;color:var(--on-green-dim)}

/* timeline */
.timeline{list-style:none;margin:1.8em 0;padding:0;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 22px 28px}
.timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;
  background:var(--brass);border:2px solid var(--paper)}
.timeline li:last-child{padding-bottom:0}
.timeline .t-when{display:block;font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass-deep);margin-bottom:3px}
.timeline .t-what{display:block;font-family:var(--display);font-size:21px;line-height:1.25;color:var(--green)}

/* inline SVG charts */
.chart{margin:1.8em 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{font-family:var(--body);font-size:14.5px;font-style:italic;color:var(--muted-2);margin-top:12px;text-align:center}
.chart .bar-rect{fill:var(--green)}
.chart .bar-rect.alt{fill:var(--brass)}
.chart .bar-val{fill:var(--brass-deep);font-family:var(--body);font-weight:600;font-size:13px}
.chart .bar-lab{fill:var(--ink);font-family:var(--body);font-size:13px}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .line-path{fill:none;stroke:var(--brass);stroke-width:2.5}
.chart .line-area{fill:rgba(151,120,59,.12)}
.chart .line-dot{fill:var(--green)}
.chart .grid-line{stroke:var(--line-soft);stroke-width:1}
.chart .donut-track{fill:none;stroke:var(--line-soft);stroke-width:16}
.chart .donut-val{fill:none;stroke:var(--brass);stroke-width:16;stroke-linecap:round}
.chart .donut-num{fill:var(--green);font-family:var(--display);font-weight:700;font-size:30px;text-anchor:middle}

/* ---- media / figures ---- */
.article-figure{margin:2em 0}
.article-figure img{width:100%;height:auto;border:1px solid var(--line);filter:sepia(.08)}
.article-figure figcaption{font-family:var(--body);font-size:15px;font-style:italic;color:var(--muted-2);
  margin-top:10px;padding-left:14px;border-left:2px solid var(--brass)}
.article-figure.breakout{width:min(100%,var(--wrap));max-width:none;margin-inline:calc(50% - 50vw);
  padding-inline:var(--gutter)}
.article-figure.breakout img{max-height:66vh;object-fit:cover}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:2em 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--line);filter:sepia(.08)}
.gallery figcaption{font-family:var(--body);font-size:13.5px;font-style:italic;color:var(--muted-2);margin-top:7px}

.map-figure{margin:2em 0;position:relative}
.map-slot{position:relative;width:100%;aspect-ratio:4/3;background:var(--green-deep);
  border:1px solid var(--green-dark);border-radius:2px;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.map-slot::after{
  content:none;
  position:absolute;bottom:14px;left:16px;right:16px;text-align:center;
  font-family:var(--body);font-size:13px;font-style:italic;letter-spacing:.04em;color:var(--on-green-mut)}
.map-slot .map-mark{width:54px;height:54px;border:1px solid var(--brass-lit);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--brass-lit);opacity:.85}
.map-slot .map-mark svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.4}
.map-figure figcaption{font-family:var(--body);font-size:15px;font-style:italic;color:var(--muted-2);margin-top:10px}
.map-figure figcaption b{font-style:normal;font-weight:600;color:var(--green)}

/* live France map (real geodata injected — no tiles/APIs) */
.map-slot.is-live::after{display:none}
.fr-map{width:100%;height:100%;display:block}
.fr-land{fill:#1c3226;stroke:var(--brass-lit);stroke-width:1;stroke-opacity:.45;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.fr-pin{cursor:pointer}
.fr-regions{pointer-events:none}
.fr-region{fill:var(--on-green-mut);font-family:var(--body);font-weight:500;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;opacity:.62}
.fr-pin .halo{fill:var(--brass-lit);opacity:0;transition:opacity .18s}
.fr-pin .dot{fill:var(--brass-lit);stroke:var(--green-deep);stroke-width:1.5;transition:fill .18s,r .18s}
.fr-pin .pin-label{fill:var(--on-green);font-family:var(--body);font-weight:500;font-size:12.5px;
  opacity:0;transition:opacity .18s;paint-order:stroke;stroke:var(--green-deep);stroke-width:3px}
.fr-pin:hover .halo,.fr-pin.is-active .halo{opacity:.28}
.fr-pin:hover .dot,.fr-pin.is-active .dot{fill:#fff;r:6.5}
.fr-pin:hover .pin-label,.fr-pin.is-active .pin-label{opacity:1}
.map-slot.is-live{overflow:visible}
.fr-pin .pin-label{display:none}
/* hover tooltip */
.fr-tip{position:absolute;z-index:6;width:214px;background:var(--green-dark);border:1px solid var(--brass);
  border-radius:2px;padding:13px 15px;pointer-events:none;box-shadow:0 14px 30px -12px rgba(0,0,0,.7);
  transform:translate(-50%,calc(-100% - 15px));display:flex;flex-direction:column;gap:4px}
.fr-tip[hidden]{display:none}
.fr-tip::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  width:12px;height:12px;background:var(--green-dark);border-right:1px solid var(--brass);
  border-bottom:1px solid var(--brass);rotate:45deg}
.fr-tip .ft-name{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.05;color:var(--on-green)}
.fr-tip .ft-place{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-lit)}
.fr-tip .ft-blurb{font-family:var(--body);font-style:italic;font-size:13.5px;line-height:1.42;color:var(--on-green-mut);margin-top:2px}

/* ---- cards / references ---- */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:1.8em 0}
.profile-card{background:var(--paper-card);border:1px solid var(--line);border-top:3px solid var(--brass);
  padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;filter:sepia(.1);margin-bottom:4px;border:1px solid var(--line)}
.profile-card.no-photo{border-top-color:var(--green)}
.profile-card h3{font-size:24px}
.profile-card .p-role{font-family:var(--body);font-style:italic;font-size:15px;color:var(--brass-deep);margin:0}
.profile-card p{font-size:16px;line-height:1.5;color:var(--ink);margin:0}
.profile-card .p-attr{font-family:var(--body);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.profile-card .p-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:6px}
.profile-card .p-links a{font-size:14.5px;letter-spacing:.04em}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:1.6em 0}
.org-card{display:flex;align-items:center;gap:12px;background:var(--paper-card);border:1px solid var(--line);
  padding:14px 16px;border-radius:2px}
.org-card:hover{border-color:var(--brass)}
.org-logo{width:40px;height:40px;object-fit:contain;flex:none;filter:sepia(.1)}
.org-card.no-logo .org-logo{display:flex;align-items:center;justify-content:center;background:var(--green);
  color:var(--brass-lit);font-family:var(--display);font-weight:700;font-size:20px}
.org-name{font-family:var(--display);font-size:20px;color:var(--green);line-height:1.1}
.org-host{font-family:var(--body);font-size:13px;color:var(--muted-2);margin-left:auto}

.entity-ref{color:var(--brass-deep);border-bottom:1px solid var(--brass);white-space:nowrap}
.entity-ref:hover{color:var(--green)}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:1.4em 0}
.further-grid a{display:flex;flex-direction:column;gap:6px;background:var(--paper-card);border:1px solid var(--line);
  padding:18px 20px;min-height:112px}
.further-grid a:hover{border-color:var(--brass)}
.further-grid .fk{font-family:var(--body);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.further-grid .ft{font-family:var(--display);font-size:22px;line-height:1.1;color:var(--green)}

/* related links list */
.related{border-top:2px solid var(--green);margin-top:3em;padding-top:24px}
.related h3{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass-deep);margin:0 0 18px}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.related-links li{margin:0}
.related-links a{display:block;background:var(--paper-card);border:1px solid var(--line);padding:18px 20px;height:100%}
.related-links a:hover{border-color:var(--brass)}
.related-links .rk{font-family:var(--body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:5px}
.related-links .rt{font-family:var(--display);font-size:23px;line-height:1.1;color:var(--green)}

/* ============================================================
   HOMEPAGE cards / feed
   ============================================================ */
.card{display:flex;flex-direction:column;background:var(--paper-card);border:1px solid var(--line);
  height:100%;overflow:hidden}
.card:hover{border-color:var(--brass)}
.card .card-img{aspect-ratio:16/10;width:100%;object-fit:cover;filter:sepia(.08);background:var(--paper-warm)}
.card .card-body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}
.card .card-meta{font-family:var(--body);font-size:13px;letter-spacing:.08em;color:var(--brass-deep);text-transform:uppercase}
.card h3{font-size:clamp(23px,2.2vw,28px);line-height:1.06;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.12em}
.card .card-dek{font-size:16.5px;line-height:1.5;color:var(--ink);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .card-more{margin-top:auto;padding-top:4px;font-family:var(--body);font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass)}

/* La Carte — writers-and-places pins (signature) */
.carte-pin{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name move" "place move";
  gap:2px 14px;align-items:center;background:var(--green);border:1px solid #2c4436;
  padding:15px 18px;transition:border-color .15s,background .15s}
.carte-pin:hover,.carte-pin.is-active{border-color:var(--brass-lit);background:var(--green-mid)}
.carte-pin .cp-name{grid-area:name;font-family:var(--display);font-size:24px;line-height:1;color:var(--on-green)}
.carte-pin .cp-place{grid-area:place;font-family:var(--body);font-size:14.5px;color:var(--on-green-mut)}
.carte-pin .cp-move{grid-area:move;font-family:var(--body);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-lit);white-space:nowrap}
.carte-pin.is-active .cp-place{color:var(--on-green-dim)}

/* article dossier (end-matter) */
.dossier{max-width:var(--wrap);margin:2.6em auto 0;padding-inline:var(--gutter)}
.dossier-band{background:var(--paper-warm);border:1px solid var(--line);border-top:3px solid var(--brass);
  padding:clamp(24px,4vw,42px)}
.dossier-band > section{margin-top:34px}
.dossier-band > section:first-child{margin-top:0}
.dossier-label{font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass-deep);margin:0 0 16px}
.dossier .statrow,.dossier .timeline,.dossier .profile-grid,.dossier .map-figure{margin-block:0}

/* article top meta / hero */
.article-hero-fig{margin:0 0 clamp(24px,4vw,44px)}
.article-hero-fig img{width:100%;max-height:62vh;object-fit:cover;border-block:1px solid var(--line);filter:sepia(.1)}
.article-hero-fig figcaption{font-family:var(--body);font-size:15px;font-style:italic;color:var(--muted-2);
  margin-top:10px;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ============================================================
   SUPPORTERS — The Patrons' Page (dark backing)
   ============================================================ */
.patrons{background:var(--green-dark);color:var(--on-green-dim)}
.patrons .kicker{color:var(--brass-lit)}
.patrons h2{color:var(--on-green)}
.sponsor{display:flex;flex-direction:column;gap:12px;background:var(--green-deep);
  border:1px solid #26362b;padding:24px;text-decoration:none;transition:border-color .15s}
.sponsor:hover{border-color:var(--brass)}
.sponsor img{height:46px;width:auto;max-width:100%;object-fit:contain;object-position:left;
  brightness(1.9);opacity:.9}
.sponsor .sponsor-blurb{font-family:var(--body);font-size:14.5px;font-style:italic;line-height:1.5;color:var(--on-green-mut)}
.sponsors-featured{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sponsors-regulars{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.sponsors-regulars .sponsor{padding:16px;align-items:center;gap:0}
.sponsors-regulars .sponsor img{height:30px;opacity:.72}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{background:var(--green-dark);color:var(--on-green-mut);border-top:2px solid var(--brass)}
.site-foot .foot-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px;align-items:start;padding-block:52px 38px}
.site-foot .wordmark{color:var(--on-green)}
.site-foot .wordmark span{color:var(--brass-lit)}
.foot-brand .foot-tag{font-family:var(--body);font-style:italic;font-size:16px;line-height:1.55;color:var(--on-green-mut);max-width:34ch;margin:18px 0 0}
.foot-carte{display:inline-block;margin-top:16px;font-family:var(--body);font-size:14px;letter-spacing:.06em;
  color:var(--brass-lit);border-bottom:1px solid var(--brass-deep);padding-bottom:2px}
.foot-carte:hover{color:var(--on-green);border-color:var(--brass-lit)}
.site-foot h4{font-family:var(--body);font-weight:600;font-size:12.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass-lit);margin:0 0 14px}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.site-foot a{color:var(--on-green-dim);font-size:16px}
.site-foot a:hover{color:var(--brass-lit)}
.foot-bottom{display:flex;justify-content:space-between;align-items:baseline;gap:32px;flex-wrap:wrap;
  border-top:1px solid #263229;padding-block:22px 6px}
.site-foot .disclaimer{margin:0;border:0;padding:0;flex:1 1 460px;
  font-family:var(--body);font-style:italic;font-size:14.5px;line-height:1.55;color:var(--on-green-mut);max-width:72ch}
.foot-colophon{flex:0 1 250px;text-align:right;margin:0;
  font-family:var(--body);font-size:13px;font-style:italic;color:var(--on-green-mut)}

/* ============================================================
   PAGE HERO (article + category + simple pages)
   ============================================================ */
.page-hero{padding-block:clamp(40px,7vw,84px)}
.page-hero .kicker{margin-bottom:18px}
.page-hero h1{font-size:clamp(40px,7vw,80px);line-height:1;max-width:18ch}
.page-hero .page-intro{font-family:var(--body);font-style:italic;font-size:clamp(19px,2.2vw,23px);
  color:var(--muted);margin-top:20px;max-width:56ch}
.byline{font-family:var(--body);font-size:15px;letter-spacing:.05em;color:var(--muted-2);margin-top:22px}
.byline b{font-weight:600;font-style:normal;color:var(--green)}

/* category / index list */
.cat-list{list-style:none;margin:0;padding: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:baseline;padding:26px 4px}
.cat-list a:hover{background:rgba(151,120,59,.06)}
.cat-list .cl-no{font-family:var(--display);font-size:24px;color:var(--brass);font-style:italic}
.cat-list .cl-main h3{font-size:clamp(24px,3vw,32px);line-height:1.05;margin-bottom:6px}
.cat-list .cl-main p{font-size:16.5px;line-height:1.5;color:var(--ink);margin:0;max-width:66ch}
.cat-list .cl-meta{font-family:var(--body);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-deep);white-space:nowrap;text-align:right}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  .mast-nav{display:none}
  .mast-burger{display:flex}
  .mast-nav.open{display:flex;position:absolute;left:0;right:0;top:100%;z-index:40;
    flex-direction:column;align-items:flex-start;gap:0;background:var(--paper);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .mast-nav.open a{width:100%;padding:16px var(--gutter);border-top:1px solid var(--line)}
  .masthead .wrap-wide{position:relative}
  .site-foot .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .sponsors-regulars{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .hp-grid{grid-template-columns:1fr !important}
  .hp-cardrow{flex-direction:column !important}
  .hp-cardrow > img{width:100% !important;aspect-ratio:16/10}
}
@media (max-width:640px){
  body{font-size:18px}
  /* wide tables may scroll rather than overflow the page */
  .article-body table,.dossier table,.sg-demo table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .article-body{font-size:18.5px}
  .section-head{align-items:flex-start;flex-direction:column;gap:8px}
  .sponsors-featured{grid-template-columns:1fr}
  .sponsors-regulars{grid-template-columns:repeat(2,1fr)}
  .site-foot .foot-top{grid-template-columns:1fr 1fr}
  .foot-bottom{flex-direction:column;gap:14px}
  .foot-colophon{text-align:left}
  .keyfacts dl{grid-template-columns:1fr;gap:2px 0}
  .keyfacts dd{margin-bottom:10px}
  .cat-list a{grid-template-columns:auto 1fr;gap:6px 16px}
  .cat-list .cl-meta{grid-column:2;text-align:left;margin-top:6px}
  .article-figure.breakout{margin-inline:calc(50% - 50vw)}
  .versus tbody th{width:auto}
}

/* 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-text-contrast: sponsor copy measured against its OWN ground as a WCAG contrast RATIO, not as a
   luminance subtraction. The subtraction passed capitanalatriste's blurbs at a 75-point gap
   while they sat at 2.8:1 and could not be read. Bar is 4.5:1 for body copy, 3:1 for large or
   bold; opacity is folded in, because it compounds down the tree and computed colour ignores
   it. The lift keeps Design's hue and saturation and moves lightness only, by the smallest
   step that clears the bar, so a warm blurb on near-black stays warm. Colour only — size,
   weight, family and spacing are exactly as delivered. */
.sp-domain.sp-domain{color:rgb(164,133,65)!important;opacity:1!important}

/* 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. */
.sponsors-featured .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsors-featured .sponsor.sponsor img{height:46px!important;display:block!important;width:100%!important}
.sponsors-regulars .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.sponsors-regulars .sponsor.sponsor img{height:38px!important;display:block!important;width:100%!important}

/* op-mobile-collapse: two 185px columns plus a 12px gap = 383px in a 350px band. One column
   below 640px. */
@media (max-width:640px){
  .sponsors-regulars{grid-template-columns:minmax(0,1fr)!important}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   2221px at 390, 16% of the whole page. Two columns bring it to
   1301px (41% shorter). Checked before writing: no new overflow, smallest mark still
   116px wide, longest blurb 3 lines, tile heights 145-214px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsors-featured, .sponsors-regulars), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsors-featured{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsors-featured > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsors-featured > * *{min-width:0!important;max-width:100%}
    .sponsors-featured img,.sponsors-featured svg{max-width:100%;height:auto}
  .sponsors-regulars{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsors-regulars > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsors-regulars > * *{min-width:0!important;max-width:100%}
    .sponsors-regulars img,.sponsors-regulars svg{max-width:100%;height:auto}
  .sponsors-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .sponsors-regulars .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsors-featured (3 tiles), .sponsors-regulars (9 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){
  .sponsors-featured:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .sponsors-regulars:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — a.sp-domain reached
   283px in a 320px screen (+15px), inside
   div.sponsor. Remedy: let the words break. 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){
  a.sp-domain,a.sp-domain *{overflow-wrap:anywhere!important;min-width:0!important}
}

/* op-article-width: the article column was capped at 632px (71 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 760px (declared in .article-wide .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 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  main.article div.article-body{max-width:min(1036px, 100%)!important}
}
@media (min-width:1600px){
  main.article div.article-body{max-width:min(clamp(1036px, 71.944vw, 1243px), 100%)!important}
  main.article div.article-body > :is(p.dropcap, p:not([class])){font-size:clamp(20.5px,1.4236vw,24.6px)!important}
}
/* op-article-width:end */

/* op-word-wrap: at 1024 the regulars' repeat(6,1fr) row was pushed 122px past the screen — one domain label ("meanhotties.com") is a single unbreakable word that filled its column. Domain labels may break instead. Money tiles only (money_slots audit, 2026-09-23). */
[data-partner] .sp-domain{overflow-wrap:anywhere!important;min-width:0!important}
/* op-word-wrap:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsors-featured 5 rows at 768, .sponsors-regulars 9 rows at 1024). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sponsors-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
  .sponsors-regulars .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

/* op-hover-pad */
.cat-list a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 600; line-height: 1.04; margin: 0px; color: var(--green); letter-spacing: 0.005em;}
.cat-list .cl-main h2:where(.rt-h3){font-size: clamp(24px, 3vw, 32px); line-height: 1.05; margin-bottom: 6px;}
.contact-method h2:where(.rt-h3){font-family: var(--display); font-size: 23px; color: var(--green); margin: 0px 0px 4px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > figure > img,
  div.article-body > figure.article-figure > img,
  div.hp-grid > a.card > img.card-img,
  div.hp-grid > a.card.hp-cardrow > img,
  div.hp-grid > figure > img,
  div.hp-grid.wrap-wide > figure > img,
  main.article.article-wide > figure.article-hero-fig > img){height:auto}
/* op-img-dims:end */

/* op-domain-line-fit — the partner's domain line broke mid-word wherever its column was narrower than the domain.
   The tile that carries one is the size container; the domain scales down only as far as the column needs
   (12px floor), and a break that is still needed falls at the dot (<wbr>), never inside the name */
.sponsor:has(> .sp-domain){container-type:inline-size}
.sponsor .sp-domain .sp-dn{font-size:max(12px,min(1em,100cqi / var(--n)))}
/* op-domain-line-fit:end */