/* ============================================================
   Le Midi — an independent guide to Languedoc-Roussillon
   Self-contained stylesheet. No external fonts or assets.
   ============================================================ */

:root {
  --paper:   #F4EDDF;
  --paper-2: #FBF6EC;
  --paper-3: #EBE2CF;
  --ink:     #241F18;
  --ink-2:   #3A3327;
  --ink-soft:#5E5344;
  --muted:   #8A7E68;
  --line:    rgba(36, 31, 24, .14);
  --line-2:  rgba(36, 31, 24, .09);

  --places:  #B4532E;   /* terracotta   */
  --history: #45566A;   /* slate blue   */
  --food:    #7C2E3B;   /* wine         */
  --flora:   #5F6A3C;   /* olive        */
  --gold:    #9A7433;   /* aged brass   */

  --accent:  var(--places);
  --dark:    #201B14;

  --serif: "Hoefler Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1300px;
  --measure: 44rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--food); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; color: inherit; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.12; letter-spacing: -.01em; margin: 0; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
::selection { background: rgba(180,83,46,.22); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 40px; }
.eyebrow {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* pillar color helpers */
.c-places  { color: var(--places); }
.c-history { color: var(--history); }
.c-food    { color: var(--food); }
.c-flora   { color: var(--flora); }
.b-places  { background: var(--places); }
.b-history { background: var(--history); }
.b-food    { background: var(--food); }
.b-flora   { background: var(--flora); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244, 237, 223, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  min-height: 84px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.brand { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; }
.brand .wordmark {
  font-family: var(--serif); font-size: 25px; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase; color: var(--ink);
}
.brand .tagline {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--muted);
}
.mainnav { display: flex; align-items: center; gap: 4px; }
.mainnav .navlink {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  padding: 12px 15px; display: inline-block; position: relative;
}
.mainnav .navlink::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 7px;
  height: 2px; background: currentColor; transform: scaleX(0);
  transform-origin: left; transition: transform .22s ease;
}
.mainnav .navlink:hover { opacity: .74; }
.mainnav .navlink:hover::after { transform: scaleX(1); }
.nav-sep { width: 1px; height: 20px; background: var(--line); margin: 0 8px; }

/* v1 dropdown sub-menus (CSS-only; links live in static HTML) */
.navitem { position: relative; display: inline-flex; }
.submenu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(7px);
  min-width: 268px; background: var(--paper-2); border: 1px solid var(--line);
  box-shadow: 0 24px 46px -24px rgba(36,31,24,.5); padding: 15px; border-radius: 4px;
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease; z-index: 120;
}
.submenu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.navitem:hover .submenu, .navitem:focus-within .submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.submenu-bar { display: block; width: 34px; height: 3px; margin-bottom: 12px; }
.submenu a { display: block; font-family: var(--serif); font-size: 16.5px; color: var(--ink); padding: 8px; border-radius: 3px; }
.submenu a:hover { background: var(--paper-3); }
.submenu .submenu-all { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-top: 7px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ============================================================
   HOMEPAGE — intro + browse controls
   ============================================================ */
.home-intro { padding: 56px 0 26px; position: relative; isolation: isolate; overflow: hidden; }
.home-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -1; opacity: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 52%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 52%, transparent 100%);
  animation: sceneIn 1.9s ease .15s both;
}
@keyframes sceneIn { from { opacity: 0; transform: scale(1.04); } to { opacity: .17; transform: none; } }
.home-intro .lede {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap;
}
.home-intro h1 {
  font-size: clamp(34px, 4.6vw, 52px); font-weight: 400; max-width: 18ch;
}
.home-intro h1 em { font-style: italic; color: var(--ink-soft); }
.home-intro .sub {
  font-family: var(--sans); font-size: 15px; color: var(--ink-soft);
  max-width: 34ch; line-height: 1.55;
}

.browse-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px 30px; flex-wrap: wrap; padding: 30px 0 20px;
}
.filter-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.chip {
  font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; padding: 8px 15px;
  border-radius: 22px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-soft); transition: all .18s;
}
.chip:hover { background: rgba(36,31,24,.05); }
.chip[data-pillar="places"]  { color: var(--places);  border-color: rgba(180,83,46,.4); }
.chip[data-pillar="history"] { color: var(--history); border-color: rgba(69,86,106,.42); }
.chip[data-pillar="food"]    { color: var(--food);    border-color: rgba(124,46,59,.42); }
.chip[data-pillar="flora"]   { color: var(--flora);   border-color: rgba(95,106,60,.45); }
.chip[aria-pressed="true"] { background: var(--dark); color: var(--paper); border-color: var(--dark); }
.chip[data-pillar="places"][aria-pressed="true"]  { background: var(--places); border-color: var(--places); }
.chip[data-pillar="history"][aria-pressed="true"] { background: var(--history); border-color: var(--history); }
.chip[data-pillar="food"][aria-pressed="true"]    { background: var(--food); border-color: var(--food); }
.chip[data-pillar="flora"][aria-pressed="true"]   { background: var(--flora); border-color: var(--flora); }

.viewtoggle { display: flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.viewtoggle button {
  border: 0; background: transparent; color: var(--ink-soft);
  font-family: var(--sans); font-size: 12.5px; letter-spacing: .07em;
  text-transform: uppercase; padding: 10px 20px; display: inline-flex; align-items: center; gap: 8px;
}
.viewtoggle button svg { width: 15px; height: 15px; }
.viewtoggle button[aria-pressed="true"] { background: var(--dark); color: var(--paper); }

/* ============================================================
   THE MAP
   ============================================================ */
.map-panel {
  display: grid; grid-template-columns: 1fr 400px;
  border: 1px solid var(--line); background: var(--paper-2);
  box-shadow: 0 40px 80px -50px rgba(36,31,24,.5);
}
.map-stage { position: relative; padding: 22px; border-right: 1px solid var(--line-2); }
.map-frame {
  position: relative; aspect-ratio: 16 / 10; width: 100%;
  background: #EFE7D6;
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.map-frame > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-hint { margin-top: 12px; font-family: var(--sans); font-size: 13px; color: var(--muted); }

.map-pin {
  position: absolute; transform: translate(-50%, -50%);
  background: none; border: 0; padding: 0; width: 16px; height: 16px;
  display: block; transition: opacity .35s; z-index: 2;
}
.map-pin .dot {
  position: absolute; inset: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(239,231,214,.9), 0 2px 6px rgba(36,31,24,.4);
  transition: transform .18s;
}
.map-pin:hover, .map-pin:focus-visible { z-index: 5; }
.map-pin:hover .dot, .map-pin.is-active .dot { transform: scale(1.4); }
.map-pin.is-active { z-index: 4; }
.map-pin .plabel {
  position: absolute; left: 50%; top: 20px; transform: translateX(-50%);
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .02em;
  color: var(--ink); background: rgba(239,231,214,.9); padding: 2px 7px;
  border-radius: 3px; white-space: nowrap; pointer-events: none;
}
.map-pin:hover .plabel, .map-pin.is-active .plabel { background: var(--ink); color: var(--paper); z-index: 6; }
.map-pin[data-lpos="above"] .plabel { top: auto; bottom: 20px; }
.map-pin[data-lpos="left"]  .plabel { left: auto; right: 20px; top: 50%; transform: translateY(-50%); }
.map-pin[data-lpos="right"] .plabel { left: 20px; top: 50%; transform: translateY(-50%); }
.map-pin.dimmed { opacity: .18; }

.map-side { padding: 26px 30px 30px; }
.map-side .ps-media {
  position: relative; aspect-ratio: 5 / 3; border-radius: 4px; overflow: hidden;
  margin-bottom: 18px; background: var(--paper-3);
}
.map-side .ps-media img { width: 100%; height: 100%; object-fit: cover; }
.map-side .ps-media .ps-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(24,18,10,.6), transparent 55%);
}
.map-side .ps-media .ps-region {
  position: absolute; left: 15px; bottom: 12px; color: #fff;
  font-family: var(--sans); font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
}
.map-side .ps-kicker { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 8px; }
.map-side h2 { font-size: 30px; font-weight: 400; margin-bottom: 10px; }
.map-side .ps-dek { font-size: 17px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 20px; }
.map-side .ps-read {
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; border-bottom: 1px solid var(--accent); padding-bottom: 2px; display: inline-block;
}
.map-side .ps-nearby { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.map-side .ps-nearby h3 { font-family: var(--sans); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 11px; font-weight: 600; }
.map-side .ps-nearby a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dotted var(--line); font-size: 16px; color: var(--ink); }
.map-side .ps-nearby a:hover { color: var(--accent); }
.map-side .ps-nearby a span { font-family: var(--sans); font-size: 12px; color: var(--muted); }

/* ============================================================
   ARTICLE CARDS / GRID / LIST
   ============================================================ */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px 30px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  display: flex; flex-direction: column; gap: 11px; text-align: left;
  background: none; border: 0; padding: 0; height: 100%;
}
.card .card-media {
  position: relative; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden;
  background: var(--paper-3);
}
.card .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.045); }
.card .kick { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.card h3 {
  font-size: 23px; font-weight: 400; line-height: 1.15;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .card-dek {
  font-size: 16px; color: var(--ink-soft); line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .card-meta { margin-top: auto; font-family: var(--sans); font-size: 13px; color: var(--muted); padding-top: 4px; }

/* list view (crawlable archive) */
.list-view { border-top: 1px solid var(--line); }
.list-row {
  display: grid; grid-template-columns: 230px 1fr auto; gap: 28px; align-items: center;
  padding: 24px 6px; border-bottom: 1px solid var(--line); text-align: left;
  background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; transition: background .18s;
}
.list-row:hover { background: var(--paper-2); }
.list-row .lr-media { aspect-ratio: 16 / 10; border-radius: 3px; overflow: hidden; background: var(--paper-3); }
.list-row .lr-media img { width: 100%; height: 100%; object-fit: cover; }
.list-row .lr-body { display: flex; flex-direction: column; gap: 6px; }
.list-row .kick { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.list-row h3 { font-size: 26px; font-weight: 400; line-height: 1.12; }
.list-row .lr-dek { font-size: 16.5px; color: var(--ink-soft); line-height: 1.5; max-width: 60ch; }
.list-row .lr-meta { font-family: var(--sans); font-size: 13px; color: var(--muted); white-space: nowrap; }

.mode-view { display: none; }
.mode-view.is-on { display: block; animation: fade .3s ease both; }

/* ============================================================
   PILLARS BAND + TIMELINE TEASER
   ============================================================ */
.pillars-band { background: var(--paper-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pillars-band .wrap { padding-block: 54px; }
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.pillar-card { display: flex; flex-direction: column; gap: 12px; text-align: left; background: none; border: 0; padding: 0; }
.pillar-card .pc-media { position: relative; aspect-ratio: 3 / 2; border-radius: 4px; overflow: hidden; background: var(--paper); }
.pillar-card .pc-media img { width: 100%; height: 100%; object-fit: cover; }
.pillar-card .pc-media .ps-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(24,18,10,.45), transparent 60%); }
.pillar-card .pc-tag { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.pillar-card .pc-tag .bar { width: 22px; height: 2px; }
.pillar-card h3 { font-size: 22px; font-weight: 400; }
.pillar-card p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.5; margin: 0; }

.tl-teaser .wrap { padding-block: 58px; }
.tl-teaser .tt-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.tl-teaser h2 { font-size: 30px; font-weight: 400; }
.tt-more { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.tt-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 2px solid rgba(69,86,106,.4); }
.tt-item { padding: 20px 24px 0 0; position: relative; display: block; transition: transform .18s ease; }
.tt-item:hover { transform: translateY(-3px); }
.tt-item:hover .tt-what { color: var(--history); }
.tt-item::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--history); }
.tt-item .tt-when { display: block; font-family: var(--serif); font-style: italic; font-size: 23px; color: var(--gold); }
.tt-item .tt-what { display: block; font-size: 18px; line-height: 1.3; margin-top: 6px; color: var(--ink); }

/* ============================================================
   SPONSORS — single quiet strip
   ============================================================ */
.sponsors { border-top: 1px solid var(--line); background: var(--paper-2); }
.sponsors .wrap { padding-block: 40px; }
.sponsors .sp-head { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 24px; }
.sponsor-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.sponsor { display: flex; flex-direction: column; gap: 7px; }
.sponsor img { width: 100%; aspect-ratio: 3 / 1; object-fit: contain; box-sizing: border-box; padding: 8px 14px; border-radius: 3px; background: #2A2A2E; }
.sponsor-blurb { font-family: var(--sans); font-size: 12px; line-height: 1.4; color: var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sponsor-blurb:empty { display: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--dark); color: #E6DCC8; margin-top: auto; }
.site-footer .wrap { padding: 54px 40px 40px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 40px; }
.site-footer .f-brand .wordmark { font-family: var(--serif); font-size: 23px; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer .f-brand p { font-size: 15px; line-height: 1.6; color: #B4AA95; max-width: 30ch; }
.site-footer .f-col h4 { font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8C8069; margin-bottom: 14px; font-weight: 600; }
.site-footer .f-col a { display: block; font-size: 15.5px; color: #E6DCC8; padding: 5px 0; }
.site-footer .f-col a:hover { color: #E0A56E; }
.site-footer .f-base { border-top: 1px solid rgba(230,220,200,.16); }
.site-footer .f-base .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 20px 40px; font-family: var(--sans); font-size: 12.5px; letter-spacing: .04em; color: #8C8069; }

/* ============================================================
   SECTION / CATEGORY PAGES
   ============================================================ */
.page-head { padding: 56px 0 30px; }
.page-head .back { font-family: var(--sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: inline-block; margin-bottom: 20px; }
.page-head .p-tag { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.page-head .p-tag .bar { width: 38px; height: 3px; }
.page-head .p-tag span { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.page-head h1 { font-size: clamp(38px, 5vw, 54px); font-weight: 400; margin-bottom: 14px; }
.page-head .p-intro { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.55; color: var(--ink-soft); max-width: 44ch; }

.cat-layout { display: grid; grid-template-columns: 420px 1fr; gap: 46px; align-items: start; padding-bottom: 66px; }
.cat-map { position: sticky; top: 104px; }
.cat-map h4 { font-family: var(--sans); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-weight: 600; }
.cat-map .map-frame { aspect-ratio: 4 / 3; }
.cat-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 28px; }
@media (max-width: 1000px) { .cat-layout { grid-template-columns: 1fr; } .cat-map { position: static; } }

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.article-hero { position: relative; min-height: 60vh; display: flex; align-items: flex-end; background: var(--paper-3); }
.article-hero img.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-hero .hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,15,8,.8), rgba(20,15,8,.15) 55%, rgba(20,15,8,.35)); }
.article-hero .hero-inner { position: relative; max-width: 900px; margin-inline: auto; width: 100%; padding: 0 40px 46px; }
.article-hero .back { font-family: var(--sans); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.82); display: inline-block; margin-bottom: 16px; }
.article-hero .back:hover { color: #fff; }
.article-hero .a-kicker { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.article-hero h1 { font-size: clamp(34px, 5.2vw, 60px); font-weight: 400; color: #fff; max-width: 16ch; margin-bottom: 16px; }
.article-hero .a-dek { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.3vw, 24px); line-height: 1.4; color: rgba(255,255,255,.92); max-width: 40ch; }

.article-body {
  max-width: var(--measure); margin-inline: auto;
  padding-inline: 24px; padding-top: 48px; padding-bottom: 20px;
  font-size: 21px; line-height: 1.75;
}
.article-body > * { margin-inline: auto; }
.a-meta {
  font-family: var(--sans); font-size: 14.5px; letter-spacing: .04em; color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 34px;
}
.a-meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

.lead { font-size: 24px; line-height: 1.62; color: var(--ink); margin-bottom: 1.1em; }
.article-body p.drop::first-letter,
.lead.drop::first-letter {
  font-family: var(--serif); float: left; font-size: 5.1em; line-height: .74;
  padding: 8px 14px 0 0; color: var(--accent); font-weight: 500;
}
.article-body h2 {
  font-size: 30px; font-weight: 500; margin: 1.7em 0 .55em; position: relative; padding-top: .3em;
}
.article-body h2 .h-num {
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .13em;
  color: var(--accent); display: block; margin-bottom: 8px;
}
.article-body h3 { font-size: 23px; margin: 1.4em 0 .5em; }
.article-body p { margin-bottom: 1.05em; }
.article-body a:not(.entity-ref) { border-bottom: 1px solid rgba(180,83,46,.4); }

/* inline glossary term */
.gloss { border-bottom: 1px dotted var(--gold); cursor: help; color: inherit; }

/* ============================================================
   PALETTE COMPONENTS
   ============================================================ */
.pullquote { margin: 1.6em 0; padding: 0 0 0 26px; border-left: 3px solid var(--accent); }
.pullquote p { font-family: var(--serif); font-style: italic; font-size: 28px; line-height: 1.34; color: var(--ink-2); margin: 0; }

.blockquote { margin: 1.5em 0; padding: 22px 26px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; }
.blockquote p { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.45; margin: 0 0 .5em; }
.blockquote cite { font-family: var(--sans); font-style: normal; font-size: 14px; letter-spacing: .04em; color: var(--muted); }

.callout {
  margin: 1.6em 0; padding: 22px 26px; background: rgba(180,83,46,.07);
  border: 1px solid rgba(180,83,46,.28); border-radius: 4px; position: relative;
}
.callout::before {
  content: "Note"; position: absolute; top: -10px; left: 20px; background: var(--paper);
  padding: 0 8px; font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.callout p { font-size: 18px; line-height: 1.55; margin: 0; color: var(--ink-2); }

.note {
  font-family: var(--sans); font-size: 16px; line-height: 1.55; color: var(--ink-soft);
  padding: 14px 18px; border-left: 3px solid var(--line); background: var(--paper-2); margin: 1.4em 0;
}

/* versus */
.versus { width: 100%; border-collapse: collapse; margin: 1.7em 0; font-size: 17px; }
.versus caption { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); text-align: left; padding-bottom: 10px; }
.versus th { width: 50%; text-align: left; font-family: var(--sans); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 12px 16px; color: #fff; }
.versus thead th:first-child { background: var(--history); border-radius: 4px 0 0 0; }
.versus thead th:last-child { background: var(--places); border-radius: 0 4px 0 0; }
.versus td { padding: 14px 16px; border: 1px solid var(--line); vertical-align: top; line-height: 1.5; background: var(--paper-2); }

/* datatable */
.datatable { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-family: var(--sans); font-size: 16px; }
.datatable caption { font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); text-align: left; padding-bottom: 10px; }
.datatable th { text-align: left; background: var(--paper-3); padding: 11px 14px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--line); }
.datatable td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.datatable tr:hover td { background: var(--paper-2); }
.datatable td:last-child, .datatable th:last-child { text-align: right; }

/* statblocks */
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 1.7em 0; }
.statblock {
  border-top: 3px solid var(--accent); padding: 16px 4px 4px;
  display: flex; flex-direction: column; gap: 6px;
}
.stat-num { font-family: var(--serif); font-size: 42px; line-height: 1; font-weight: 500; color: var(--ink); }
.stat-label { font-family: var(--sans); font-size: 14px; line-height: 1.35; color: var(--ink-soft); }

/* timeline */
.timeline { margin: 1.7em 0; position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: rgba(69,86,106,.35); }
.timeline li { position: relative; padding-bottom: 24px; }
.timeline li::before { content: ""; position: absolute; left: -30px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--history); box-shadow: 0 0 0 4px var(--paper); }
.timeline .t-when { display: block; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--gold); margin-bottom: 3px; }
.timeline .t-what { display: block; font-size: 18px; line-height: 1.4; }

/* charts */
.chart { margin: 1.7em 0; }
.chart svg { width: 100%; height: auto; overflow: visible; display: block; }
.chart figcaption { font-family: var(--sans); font-size: 13.5px; color: var(--muted); margin-top: 12px; line-height: 1.4; }
.chart .bar-rect { fill: var(--accent); }
.chart .bar-label { font-family: var(--sans); font-size: 13px; fill: var(--ink-2); }
.chart .bar-val { font-family: var(--sans); font-size: 13px; font-weight: 600; fill: var(--ink); }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .gridline { stroke: var(--line-2); stroke-width: 1; }
.chart .line-path { fill: none; stroke: var(--history); stroke-width: 2.5; }
.chart .line-dot { fill: var(--history); }
.chart .line-lbl { font-family: var(--sans); font-size: 12px; fill: var(--muted); }

/* figures */
.article-figure { margin: 1.8em 0; }
.article-figure img { width: 100%; border-radius: 4px; background: var(--paper-3); aspect-ratio: 3 / 2; object-fit: cover; }
.article-figure figcaption { font-family: var(--sans); font-size: 14px; color: var(--muted); margin-top: 10px; line-height: 1.45; }
.article-figure.wide { max-width: none; width: 100%; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 1.8em 0; }
.gallery figure { margin: 0; }
.gallery img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; background: var(--paper-3); }
.gallery figcaption { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* locator map */
.map-figure { margin: 1.8em 0; }
.map-figure .loc-frame { position: relative; aspect-ratio: 16 / 9; background: #EFE7D6; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.map-figure svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-figure figcaption { font-family: var(--sans); font-size: 14px; color: var(--muted); margin-top: 10px; }
.loc-dot { fill: var(--places); stroke: var(--paper); stroke-width: 3; }
.loc-ring { fill: none; stroke: var(--places); stroke-width: 1.5; opacity: .4; }

/* "Find it on" open-map click-out links */
.find-on { font-family: var(--sans); font-size: 13px; letter-spacing: .02em; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.find-on:hover { color: var(--accent); border-color: var(--accent); }
.map-figure figcaption .find-on { margin-left: 6px; }
.cat-map .find-on { display: inline-block; margin-top: 12px; }
.ps-find { display: inline-block; margin-top: 12px; font-family: var(--sans); font-size: 12.5px; letter-spacing: .02em; color: var(--muted); border-bottom: 1px solid var(--line); }
.ps-find:hover { color: var(--accent); border-color: var(--accent); }

/* CSS-only “Show all” for article footer lists */
.more-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.more-btn { display: inline-block; margin-top: 16px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; cursor: pointer; }
.more-btn:hover { color: var(--food); }
.more-close { display: none; }
.more-toggle:checked ~ .more-btn .more-open { display: none; }
.more-toggle:checked ~ .more-btn .more-close { display: inline; }
.more-toggle:focus-visible ~ .more-btn { outline: 2px solid var(--accent); outline-offset: 3px; }
.pp-collapse .profile-grid > .profile-card:nth-child(n+3) { display: none; }
.pp-collapse .more-toggle:checked ~ .profile-grid > .profile-card { display: flex; }
.gloss-collapse .glossary dl > div:nth-child(n+5) { display: none; }
.gloss-collapse .more-toggle:checked ~ .glossary dl > div { display: block; }

/* profile cards */
.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 1.7em 0; }
.profile-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 5px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.profile-card .p-photo { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; background: var(--paper-3); }
.profile-card.no-photo { border-left: 3px solid var(--accent); }
.profile-card h3 { font-size: 21px; font-weight: 500; }
.profile-card .p-role { font-family: var(--sans); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.profile-card p { font-size: 16px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.profile-card .p-links a { font-family: var(--sans); font-size: 14px; }
.profile-card .p-attr { font-family: var(--sans); font-size: 12.5px; color: var(--muted); }

/* org cards */
.org-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 1.6em 0; }
.org-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 5px; }
.org-card:hover { border-color: var(--accent); }
.org-logo { width: 100%; aspect-ratio: 3 / 1; object-fit: contain; background: #2A2A2E; border-radius: 3px; padding: 8px; }
.org-card.no-logo .org-logo { display: none; }
.org-name { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.org-host { font-family: var(--sans); font-size: 13px; color: var(--muted); }

.entity-ref { color: var(--accent); border-bottom: 1px solid rgba(180,83,46,.35); white-space: nowrap; }

/* glossary strip */
.glossary { margin: 2.2em 0 0; padding: 26px 0 0; border-top: 2px solid var(--line); }
.glossary h4 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.glossary dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 30px; margin: 0; }
.glossary dt { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink); }
.glossary dd { margin: 3px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--ink-soft); }

/* further reading / related */
.related { margin-top: 2.4em; }
.further-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-links li { border-bottom: 1px solid var(--line); }
.related-links a, .further-grid a {
  display: block; padding: 16px; background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 5px; font-size: 18px; line-height: 1.25; transition: all .18s;
}
.further-grid a { min-height: 100%; }
.further-grid a:hover { border-color: var(--accent); background: var(--paper); }
.further-grid a .fg-kick { display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--accent); margin-bottom: 7px; }

/* article footer band */
.article-end { border-top: 1px solid var(--line); margin-top: 46px; }
.article-end .wrap { padding-block: 46px; }
.article-end h4 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }

/* ============================================================
   STYLEGUIDE PAGE
   ============================================================ */
.sg-body { max-width: 920px; margin-inline: auto; padding: 40px; }
.sg-section { margin-bottom: 56px; }
.sg-section > h2 { font-size: 15px; font-family: var(--sans); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 26px; }
.sg-label { font-family: var(--sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 26px 0 10px; }

/* ============================================================
   SIMPLE / TEXT PAGES (about, contact, legal, 404)
   ============================================================ */
.prose { max-width: var(--measure); margin-inline: auto; padding: 20px 24px 60px; font-size: 20px; line-height: 1.72; }
.prose h2 { font-size: 27px; margin: 1.5em 0 .5em; }
.prose p { margin-bottom: 1.05em; }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 1.6em 0; }
.contact-card { display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; }
.contact-card svg { width: 26px; height: 26px; flex: none; color: var(--accent); }
.contact-card h3 { font-family: var(--sans); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.contact-card a, .contact-card p { font-size: 18px; margin: 0; }
.notfound { text-align: center; padding: 100px 40px; }
.notfound .big { font-family: var(--serif); font-size: 120px; line-height: 1; color: var(--places); }

/* ============================================================
   ANIMATION + MISC
   ============================================================ */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--dark); color: #fff; padding: 10px 16px; z-index: 200; }
.skip-link:focus { left: 12px; top: 12px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .map-panel { grid-template-columns: 1fr; }
  .map-stage { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .card-grid, .pillar-grid, .tt-grid, .further-grid, .org-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .sponsor-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  body { font-size: 19px; }
  .wrap { padding-inline: 22px; }
  .site-header .wrap { min-height: 0; padding-block: 12px; }
  .mainnav { gap: 0; flex-wrap: wrap; }
  .mainnav .navlink { padding: 8px 10px; font-size: 12px; }
  .nav-sep { display: none; }
  .submenu { display: none; }
  .home-intro .lede { align-items: flex-start; }
  .card-grid, .cat-list, .pillar-grid, .tt-grid, .profile-grid, .further-grid, .org-grid, .gallery, .statrow, .contact-grid, .glossary dl { grid-template-columns: 1fr; }
  .tt-grid { border-top: 0; }
  .tt-item { border-top: 2px solid rgba(69,86,106,.4); padding-top: 18px; margin-bottom: 8px; }
  .list-row { grid-template-columns: 1fr; gap: 12px; }
  .list-row .lr-media { aspect-ratio: 16 / 9; }
  .list-row .lr-meta { white-space: normal; }
  .sponsor-strip { grid-template-columns: repeat(2, 1fr); }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .article-hero { min-height: 0; }
  .article-hero .hero-inner { padding: 200px 22px 30px; }
  .article-body { font-size: 19px; padding-inline: 22px; }
  .lead { font-size: 21px; }
  .article-body p.drop::first-letter, .lead.drop::first-letter { font-size: 4em; }
  .versus, .datatable { font-size: 15px; }
  .versus th, .versus td, .datatable th, .datatable td { padding: 9px 10px; }
  .stat-num { font-size: 34px; }
  .prose { font-size: 18px; padding-inline: 22px; }
}
@media (max-width: 420px) {
  .sponsor-strip { grid-template-columns: 1fr 1fr; }
  .article-hero .hero-inner { padding-top: 160px; }
}

/* pipeline: sponsor link-treatment variety (footprint) */
.sponsor::before{content:none!important;}
.sponsor a.sp-logo{display:contents;}   /* logo link is layout-transparent so Design's img sizing still applies */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.sponsor-blurb a:hover{opacity:.8;}
.sponsor .sp-domain{display:inline-block;margin-top:8px;color:inherit;text-decoration:none;opacity:.75;font-size:.9em;letter-spacing:.02em;}
.sponsor .sp-domain:hover{text-decoration:underline;opacity:1;}

/* 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. */
.sponsor-blurb.sponsor-blurb{color:rgb(122,112,92)!important;opacity:1!important}

/* op-page-overflow: the page scrolled sideways at 320 — div.f-col reached
   334px in a 320px screen (+14px), inside
   div.wrap. 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){
  div.f-col,div.f-col *{overflow-wrap:anywhere!important;min-width:0!important}
}

/* op-article-width: the article column was capped at 656px (74 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 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.article-body{--measure:min(951px, 100%)!important}
}
@media (min-width:1600px){
  div.article-body{--measure:min(clamp(951px, 66.042vw, 1141px), 100%)!important}
  div.article-body > :is(p:not([class])), div.article-body > :is(ol.timeline) > li{font-size:clamp(21px,1.4583vw,25.2px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (656px) and was left behind when the text went to 903px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1024px){
  div.hero-inner{max-width:min(983px, 100%)!important}
}
@media (min-width:1600px){
  div.hero-inner{max-width:min(calc(clamp(903px, 62.708vw, 1084px) + 80px), 100%)!important}
}
/* op-article-head:end */
/* op-heading-levels */
h2:where(.rt-h4){font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; margin: 0px;}
.site-footer .f-col h2:where(.rt-h4){font-family: var(--sans); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(140, 128, 105); margin-bottom: 14px; font-weight: 600;}
.cat-map h2:where(.rt-h4){font-family: var(--sans); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-weight: 600;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > span.card-media > img,
  a.list-row > span.lr-media > img,
  a.pillar-card > span.pc-media > img,
  article > div.article-hero > img.hero-img,
  aside.map-side > div.ps-media > img,
  div.article-body > figure.article-figure > img,
  main > section.home-intro > img.home-bg){height:auto}
/* op-img-dims:end */
.mainnav > .navitem:last-of-type > .submenu{left:auto!important;right:0!important;transform:translateY(7px)!important}.mainnav > .navitem:last-of-type:hover > .submenu,.mainnav > .navitem:last-of-type:focus-within > .submenu{transform:translateY(0)!important}