/* self-hosted fonts (vendored) */
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/s-0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/s-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/s-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/s-0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/s-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/s-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/s-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/s-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(assets/fonts/s-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/s-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/s-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/s-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/s-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/s-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/s-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/s-3.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/s-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/s-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/s-6.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/s-7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/s-8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/s-6.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/s-7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/s-8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/s-6.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/s-7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/s-8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/s-6.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/s-7.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/s-8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   Cheval Aquitaine — "Le Guide"
   Shared stylesheet · design tokens + full component system
   Plain CSS. No build step. Fonts loaded per-page via <link>.
   ========================================================================= */

:root{
  /* palette */
  /* Littoral — cool Atlantic-coast heritage (default) */
  --paper:#eef2f1;
  --paper-2:#e2e9e7;
  --paper-3:#d4ddda;
  --card:#f8fbfa;
  --ink:#15222b;           /* deep slate-navy */
  --ink-soft:#3c4a52;
  --muted:#7c8a8d;
  --line:#d8ded6;
  --line-2:#c3ccc4;
  --accent:#1f5c5a;        /* marine teal — primary */
  --accent-2:#c1863a;      /* warm ochre — eyebrows/warm */
  --forest:#33524a;        /* muted pine — secondary */
  --chip:#101a20;          /* dark backing chip for light logos */

  /* type */
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --grote:"Space Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* scale — deliberately generous */
  --fs-micro:.82rem;
  --fs-meta:.95rem;
  --fs-body:1.18rem;
  --fs-lead:1.42rem;
  --fs-h3:1.5rem;
  --fs-h2:2.15rem;
  --fs-shelf:2.4rem;
  --fs-hero:clamp(2.4rem,4.4vw,3.6rem);

  /* rhythm */
  --wrap:1320px;
  --measure:70ch;
  --gut:clamp(20px,4.5vw,64px);
  --radius:7px;
  --shadow:0 24px 60px -34px rgba(21,34,43,.5);
  --shadow-sm:0 10px 26px -18px rgba(21,34,43,.42);
}

/* ---- ALTERNATIVE PALETTE · "Terroir" (warm countryside) ----
   Flip by adding data-theme="terroir" to <html>. Default is Littoral above. */
html[data-theme="terroir"]{
  --paper:#f6f3ec;
  --paper-2:#efeadd;
  --paper-3:#e8e1cf;
  --card:#fffdf8;
  --ink:#1b1712;
  --ink-soft:#4a443b;
  --muted:#857d6d;
  --line:#e0d9c8;
  --line-2:#d3cab5;
  --accent:#7a2e2e;        /* oxblood — primary */
  --accent-2:#c25b3a;      /* terracotta — eyebrows/warm */
  --forest:#2c4a37;        /* deep green — secondary */
  --chip:#211c16;
  --shadow:0 24px 60px -34px rgba(27,23,18,.5);
  --shadow-sm:0 10px 26px -18px rgba(27,23,18,.4);
}

*{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:var(--fs-body);line-height:1.62;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.1;margin:0}
ul,ol{margin:0}

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

/* ---- label / eyebrow / arrow-link ------------------------------------- */
.eyebrow{
  font-family:var(--grote);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent-2);
}
.kicker{font-family:var(--grote);font-weight:500;font-size:var(--fs-meta);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.arrow{font-family:var(--grote);font-weight:600;font-size:var(--fs-meta);
  letter-spacing:.04em;color:var(--accent);display:inline-flex;align-items:center;gap:.4em}
.arrow svg{width:1em;height:1em}
a.arrow:hover{gap:.65em}

.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--grote);font-weight:600;font-size:var(--fs-meta);letter-spacing:.02em;
  background:var(--ink);color:var(--paper);border:0;border-radius:100px;
  padding:.8em 1.5em;cursor:pointer;transition:background .18s;
}
.btn:hover{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink)}

/* =========================================================================
   ANNOTATION SYSTEM
   Homepage ships as empty [data-fill] shells. Real copy is injected later.
   Until then the spec renders (from the attribute) as a wireframe note.
   Filled elements (with text) hide the annotation automatically.
   ========================================================================= */
[data-fill]:empty::before{
  content:"“ "attr(data-fill)" ”";
  font-family:var(--grote);font-weight:400;font-style:normal;
  font-size:.72em;letter-spacing:.01em;line-height:1.35;
  color:#a2603f;background:rgba(194,91,58,.08);
  border:1px dashed rgba(194,91,58,.5);border-radius:4px;
  padding:.15em .5em;display:inline-block;text-transform:none;
}
[data-fill]:empty{min-height:0}

/* =========================================================================
   HEADER + NAV (dropdown sub-menus, hover-safe)
   ========================================================================= */
.site-header{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:32px;
  padding-block:18px;max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
.brand{font-family:var(--grote);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;
  color:var(--ink);white-space:nowrap}
.brand .dot{color:var(--accent)}
.brand:hover{color:var(--ink)}

.mainnav{margin-left:auto}
.mainnav>ul{list-style:none;display:flex;gap:6px;padding:0}
.mainnav>ul>li{position:relative}
.mainnav>ul>li>a{
  display:inline-flex;align-items:center;gap:.35em;
  font-family:var(--grote);font-weight:500;font-size:var(--fs-meta);
  color:var(--ink);padding:10px 14px;border-radius:6px;letter-spacing:.01em;
}
.mainnav>ul>li>a>span[data-fill]:empty::before,
.header-search span[data-fill]:empty::before{font-size:.66rem;padding:.1em .4em}
.mainnav>ul>li:hover>a{background:var(--paper-2);color:var(--accent)}
.mainnav .caret{width:.7em;height:.7em;opacity:.6}

/* dropdown */
.submenu{
  position:absolute;top:calc(100% + 2px);left:0;min-width:230px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:8px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;
}
.mainnav li:hover>.submenu,
.mainnav li:focus-within>.submenu{opacity:1;visibility:visible;transform:none}
.submenu a{display:block;padding:9px 12px;border-radius:5px;color:var(--ink-soft);
  font-family:var(--serif);font-size:1.02rem}
.submenu a:hover{background:var(--paper-2);color:var(--accent)}

.header-search{display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line-2);border-radius:100px;padding:8px 16px;
  color:var(--muted);font-family:var(--grote);font-size:var(--fs-meta);cursor:pointer;background:var(--card)}
.header-search:hover{border-color:var(--ink);color:var(--ink)}
.header-search svg{width:16px;height:16px}

.nav-toggle{display:none}

/* =========================================================================
   HERO — split feature (image + one spotlit guide)
   ========================================================================= */
.feature{padding-block:clamp(28px,4vw,52px)}
.feature-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:0;
  background:var(--ink);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.feature-media{position:relative;min-height:440px}
.feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature-body{padding:clamp(28px,3vw,52px);display:flex;flex-direction:column;
  justify-content:center;color:var(--paper);background:var(--ink)}
.feature-body .eyebrow{color:var(--accent-2)}
.feature-body h1{font-size:var(--fs-hero);font-weight:500;margin:.4em 0 .35em;color:#fdf9f1;letter-spacing:-.01em}
.feature-body .dek{font-size:var(--fs-lead);line-height:1.45;color:#d9d2c4;
  max-width:44ch;margin:0 0 1.4em}
.feature-body .meta{font-family:var(--grote);font-size:var(--fs-meta);color:#a49c8c;margin-bottom:1.4em}
.feature-body .btn{align-self:flex-start;background:var(--paper);color:var(--ink)}
.feature-body .btn:hover{background:var(--accent-2);color:#fff}

/* =========================================================================
   REFINE BAR (filters — vanilla JS enhancement)
   ========================================================================= */
.refine{background:var(--paper-2);border-block:1px solid var(--line)}
.refine-inner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-block:18px;max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
.refine .refine-label{font-family:var(--grote);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.filter{position:relative}
.filter>select,.filter>.filter-btn{
  appearance:none;font-family:var(--grote);font-size:var(--fs-meta);color:var(--ink);
  background:var(--card);border:1px solid var(--line-2);border-radius:100px;
  padding:10px 40px 10px 18px;cursor:pointer;line-height:1;
}
.filter::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.filter>select:hover,.filter>.filter-btn:hover{border-color:var(--ink)}
.refine .count{margin-left:auto;font-family:var(--grote);font-size:var(--fs-meta);color:var(--muted)}
.refine .count b{color:var(--accent);font-weight:600}

/* =========================================================================
   SHELVES — numbered intent rows + even-height card rows
   ========================================================================= */
.shelf{padding-block:clamp(34px,4vw,58px);border-bottom:1px solid var(--line)}
.shelf.alt{background:var(--paper-2)}
.shelf-head{display:flex;align-items:flex-end;gap:20px;margin-bottom:26px}
.shelf-num{font-family:var(--grote);font-weight:700;font-size:clamp(2.2rem,4vw,3.1rem);
  line-height:.8;color:var(--line-2)}
.shelf-titles{flex:1;min-width:0}
.shelf-titles h2{font-size:var(--fs-shelf);font-weight:600;letter-spacing:-.01em}
.shelf-titles .blurb{font-family:var(--grote);font-size:var(--fs-meta);color:var(--muted);margin-top:6px}
.shelf-head .arrow{white-space:nowrap;padding-bottom:.4em}

/* even-height card grid */
.card-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card-row.three{grid-template-columns:repeat(3,1fr)}
.card{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .18s,box-shadow .18s;height:100%}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.card .thumb{aspect-ratio:3/2;overflow:hidden;background:var(--paper-3)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .thumb img{transform:scale(1.045)}
.card .card-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.card .card-cat{font-family:var(--grote);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:9px}
.card h3{font-size:var(--fs-h3);font-weight:500;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.2em}
.card .card-dek{color:var(--ink-soft);font-size:1.02rem;line-height:1.5;margin-top:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .card-meta{margin-top:auto;padding-top:14px;
  font-family:var(--grote);font-size:var(--fs-micro);color:var(--muted);
  border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap}
.card[hidden]{display:none}

/* feed variety: a lead card that spans wider */
.card.lead-card{grid-column:span 2}
.card.lead-card .thumb{aspect-ratio:16/9}
.card.lead-card h3{font-size:1.95rem}

/* CSS-only "more" expander */
.more-toggle{display:none}
.more-row{display:none;margin-top:24px}
.more-toggle:checked ~ .more-row{display:grid}
.more-label{display:inline-flex;align-items:center;gap:.5em;margin-top:24px;cursor:pointer;
  font-family:var(--grote);font-weight:600;font-size:var(--fs-meta);color:var(--accent)}
.more-toggle:checked ~ .more-label .more-more{display:none}
.more-label .more-less{display:none}
.more-toggle:checked ~ .more-label .more-less{display:inline}

/* =========================================================================
   CLUBS DIRECTORY (Learn shelf)
   ========================================================================= */
.clubs{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin-bottom:28px}
.clubs-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 22px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.clubs-head .t{font-family:var(--grote);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
table.clubs-table{width:100%;border-collapse:collapse}
.clubs-table th{font-family:var(--grote);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;
  padding:12px 22px;border-bottom:1px solid var(--line)}
.clubs-table td{padding:15px 22px;border-bottom:1px solid var(--line);vertical-align:top}
.clubs-table tr:last-child td{border-bottom:0}
.clubs-table tr:hover td{background:var(--paper)}
.clubs-table .club-name{font-family:var(--serif);font-weight:500;font-size:1.12rem;color:var(--ink)}
.clubs-table .club-dept{font-family:var(--grote);font-size:var(--fs-meta);color:var(--ink-soft)}
.clubs-table .club-disc{font-family:var(--grote);font-size:var(--fs-meta);color:var(--muted)}
.clubs-table .club-town{color:var(--muted);font-size:.9rem}

/* =========================================================================
   SPONSORS — tiered: featured band + separate toned-down strip
   Slots numbered continuously 1..10.
   ========================================================================= */
/* fixed injection markup: a.sponsor > img + span.sponsor-blurb (no wrapper) */
.sponsor{display:flex;flex-direction:column;gap:11px;color:inherit}
.sponsor:hover{color:inherit}
.sponsor>img{width:100%;object-fit:contain;background:var(--chip);border-radius:6px;
  aspect-ratio:3.4/1;padding:16px 22px}
.sponsor:hover>img{outline:2px solid var(--accent-2);outline-offset:2px}
.sponsor-blurb{font-family:var(--grote);font-size:var(--fs-meta);color:var(--ink-soft);line-height:1.45}

.sponsors-featured{padding-block:clamp(26px,3vw,40px);border-bottom:1px solid var(--line);background:var(--paper-2)}
.sponsors-featured .sp-head{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.sponsors-featured .sp-head .kicker{color:var(--muted)}
.sp-featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.sponsors-featured .sponsor{gap:13px;text-align:left;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.sponsors-featured .sponsor:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.sponsors-featured .sponsor>img{width:auto;max-width:180px;aspect-ratio:2.6/1;padding:11px 16px}
/* empty blurb renders as a neutral 3-line paragraph slot (placeholder contract) */
.sponsors-featured .sponsor-blurb:empty{width:100%;height:3.4em;border-radius:4px;
  background:linear-gradient(var(--line) 0 0) no-repeat,linear-gradient(var(--line) 0 0) no-repeat,linear-gradient(var(--line) 0 0) no-repeat;
  background-size:100% 9px,100% 9px,55% 9px;background-position:0 1px,0 18px,0 35px}

/* toned-down strip — smaller logos, no blurb, lives in footer region */
.sponsors-strip{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.sponsors-strip .sponsor{flex:0 0 auto;width:158px}
.sponsors-strip .sponsor>img{aspect-ratio:3.2/1;padding:9px 14px;background:rgba(255,255,255,.09)}
.sponsors-strip .sponsor:hover>img{outline-color:#b3ab9a}
.sponsors-strip .sponsor-blurb{display:none}

/* =========================================================================
   FOOTER — dark band
   ========================================================================= */
.site-footer{background:var(--ink);color:#c7bfae}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
  padding-block:clamp(40px,5vw,64px);max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
.footer-brand .brand{color:#fdf9f1;font-size:1.7rem}
.footer-brand p{color:#a49c8c;max-width:38ch;margin:14px 0 0;font-size:1.05rem}
.footer-col h4{font-family:var(--grote);font-weight:600;font-size:var(--fs-micro);
  letter-spacing:.16em;text-transform:uppercase;color:#8a8271;margin-bottom:14px}
.footer-col ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{color:#d7cfbe;font-family:var(--grote);font-size:var(--fs-meta)}
.footer-col a:hover{color:#fff}
.footer-partners{border-top:1px solid rgba(255,255,255,.1);
  padding-block:26px;max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
.footer-partners .kicker{color:#8a8271;margin-bottom:16px;display:block}
.footer-legal{border-top:1px solid rgba(255,255,255,.1);color:#8a8271;
  font-family:var(--grote);font-size:var(--fs-micro);
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  padding-block:20px;max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
.footer-legal a{color:#8a8271}.footer-legal a:hover{color:#c7bfae}
.footer-legal .sep{opacity:.4}

/* =========================================================================
   ARTICLE — two-column reading layout + margin rail
   ========================================================================= */
.post-hero{position:relative;background:var(--ink);color:var(--paper)}
.post-hero .post-hero-media{aspect-ratio:21/9;overflow:hidden;opacity:.62}
.post-hero .post-hero-media img{width:100%;height:100%;object-fit:cover}
.post-hero-body{position:absolute;inset:auto 0 0 0;
  background:linear-gradient(0deg,rgba(15,12,9,.9),transparent);padding-top:80px}
.post-hero-inner{max-width:var(--wrap);margin-inline:auto;padding:0 var(--gut) 44px}
.post-hero .eyebrow{color:var(--accent-2)}
.post-hero h1{font-size:clamp(2.1rem,4.2vw,3.4rem);font-weight:500;color:#fdf9f1;
  margin:.35em 0 .35em;max-width:20ch}
.post-hero .standfirst{font-size:var(--fs-lead);color:#e4ddce;max-width:52ch;font-style:italic}
.post-meta{font-family:var(--grote);font-size:var(--fs-meta);color:#b3ab9a;margin-top:18px;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.post-meta .sep{opacity:.5}

.article{max-width:1180px;margin:0 auto;padding:clamp(36px,5vw,64px) var(--gut) 40px;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:56px}
.article-body{grid-column:1;min-width:0;max-width:var(--measure);
  font-size:1.24rem;line-height:1.72}
.article-body>p{margin:0 0 1.3em}
.article-rail{grid-column:2;position:relative}
.article-body h2{font-size:1.95rem;font-weight:500;margin:1.9em 0 .5em;
  padding-top:.4em}
.article-body h2 .sec-no{font-family:var(--grote);font-weight:700;color:var(--accent-2);
  font-size:.7em;margin-right:.5em}
.article-body h3{font-size:1.4rem;margin:1.5em 0 .4em}
.article-body a{border-bottom:1px solid rgba(122,46,46,.35)}
.article-body a:hover{border-color:var(--accent-2)}

/* drop cap on lead */
p.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--ink);font-style:normal;margin:0 0 1.1em}
p.lead::first-letter{}
.article-body>p.has-dropcap::first-letter,
.dropcap::first-letter{
  font-family:var(--grote);font-weight:700;float:left;font-size:3.5em;line-height:.72;
  padding:.06em .12em 0 0;color:var(--accent)}

/* margin rail cards */
.rail-card{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:6px;padding:15px 17px;margin-bottom:22px;font-family:var(--grote)}
.rail-card .rc-kind{font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.rail-card .rc-kind svg{width:13px;height:13px}
.rail-card .rc-term{font-family:var(--serif);font-weight:600;font-size:1.12rem;color:var(--ink);margin-bottom:4px}
.rail-card .rc-body{font-size:.98rem;line-height:1.45;color:var(--ink-soft)}
.rail-card.term{border-left-color:var(--forest)}
.rail-card.term .rc-kind{color:var(--forest)}
.rail-card.place{border-left-color:var(--accent-2)}
.rail-card.place .rc-kind{color:var(--accent-2)}
.rail-card.stat{border-left-color:var(--ink)}
.rail-card.stat .rc-kind{color:var(--ink)}
.rail-card.stat .rc-term{font-family:var(--grote);font-weight:700;font-size:2rem;color:var(--accent)}
.rail-card.person .p-photo{width:100%;aspect-ratio:5/3;object-fit:cover;border-radius:4px;margin-bottom:8px}
/* linked rail card — jumps to its first mention in the body */
a.rail-card{display:block;color:inherit;transition:border-color .16s,box-shadow .16s,transform .16s}
a.rail-card:hover{color:inherit;box-shadow:var(--shadow-sm);transform:translateX(2px)}
.rail-card .rc-jump{margin-top:10px;font-family:var(--grote);font-weight:600;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:5px}
a.rail-card:hover .rc-jump{color:var(--accent)}
.rail-card .rc-jump svg{width:12px;height:12px}
/* in-body reference marker — target flash on jump */
.entity-ref{scroll-margin-top:90px}
.entity-ref:target{background:rgba(194,91,58,.16);border-radius:3px;
  box-shadow:0 0 0 3px rgba(194,91,58,.16)}

/* =========================================================================
   PALETTE COMPONENTS (articles + styleguide)
   ========================================================================= */
.lead{font-size:var(--fs-lead);line-height:1.5}

.pullquote{margin:1.8em 0;padding:0 0 0 26px;border-left:4px solid var(--accent-2)}
.pullquote p{font-size:1.75rem;line-height:1.28;font-weight:500;color:var(--ink);margin:0;font-style:italic}

.blockquote{margin:1.8em 0;padding:22px 26px;background:var(--paper-2);border-radius:var(--radius)}
.blockquote p{font-size:1.3rem;line-height:1.42;margin:0 0 .5em;font-style:italic}
.blockquote cite{font-family:var(--grote);font-style:normal;font-size:var(--fs-meta);color:var(--muted)}

.callout{margin:1.8em 0;padding:22px 26px;background:#f3ede0;border:1px solid var(--line-2);
  border-radius:var(--radius);position:relative}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--accent);border-radius:var(--radius) 0 0 var(--radius)}
.callout p{margin:0;font-size:1.16rem;line-height:1.55}
.callout p+p{margin-top:.7em}

.note{margin:1.6em 0;padding:14px 16px 14px 46px;background:var(--paper-2);border-radius:6px;
  font-family:var(--grote);font-size:1.02rem;line-height:1.5;color:var(--ink-soft);position:relative}
.note::before{content:"i";position:absolute;left:14px;top:14px;width:20px;height:20px;
  background:var(--forest);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.8rem;font-style:italic}

/* tables */
.versus,.datatable{width:100%;border-collapse:collapse;margin:1.8em 0;
  font-family:var(--grote);font-size:1.02rem}
.versus th,.datatable th{background:var(--ink);color:var(--paper);font-weight:600;
  text-align:left;padding:13px 16px;letter-spacing:.02em}
.versus td,.datatable td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.datatable tr:nth-child(even) td{background:var(--paper-2)}
.versus td:first-child{font-weight:600;color:var(--ink);background:var(--paper-2)}
.versus th:first-child{background:var(--accent)}
.datatable caption,.versus caption{font-family:var(--grote);font-size:var(--fs-meta);
  color:var(--muted);text-align:left;margin-bottom:8px;caption-side:top}

/* statblocks */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin:1.8em 0}
.statblock{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;text-align:center;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--grote);font-weight:700;font-size:2.6rem;line-height:.9;color:var(--accent);overflow-wrap:break-word}
.stat-num.small{font-size:1.55rem;line-height:1.12}
.statblock .stat-cap{font-family:var(--grote);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.stat-label{font-family:var(--grote);font-size:.92rem;color:var(--ink-soft);line-height:1.35}

/* timeline */
.timeline{list-style:none;padding:0;margin:1.8em 0;position:relative}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line-2)}
.timeline li{position:relative;padding:0 0 22px 40px}
.timeline li::before{content:"";position:absolute;left:3px;top:6px;width:14px;height:14px;
  border-radius:50%;background:var(--accent);border:3px solid var(--paper)}
.timeline .t-when{display:block;font-family:var(--grote);font-weight:600;font-size:1.02rem;color:var(--ink)}
.timeline .t-what{display:block;color:var(--ink-soft);font-size:1.08rem;line-height:1.5;margin-top:3px}

/* charts */
.chart{margin:1.8em 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{font-family:var(--grote);font-size:var(--fs-meta);color:var(--muted);margin-top:12px}
.chart .bar-rect{fill:var(--accent)}
.chart .bar-rect.alt{fill:var(--forest)}
.chart .bar-label{font-family:var(--grote);font-size:13px;fill:var(--ink-soft)}
.chart .bar-val{font-family:var(--grote);font-size:13px;font-weight:600;fill:var(--ink)}
.chart .axis{stroke:var(--line-2);stroke-width:1}
.chart .line-path{fill:none;stroke:var(--accent);stroke-width:2.5}
.chart .line-dot{fill:var(--accent)}
/* donut */
.chart.donut{display:flex;flex-wrap:wrap;align-items:center;gap:26px;justify-content:center}
.chart.donut svg{max-width:230px;flex:0 0 auto}
.chart.donut .seg{fill:none;stroke-width:26}
.chart-legend{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-family:var(--grote);font-size:var(--fs-meta)}
.chart-legend li{display:flex;align-items:center;gap:10px;color:var(--ink-soft)}
.chart-legend .dot{width:13px;height:13px;border-radius:3px;flex:0 0 auto}
.chart-legend b{color:var(--ink);font-weight:600;margin-left:auto;padding-left:16px}

/* table scroll-wrapper — keeps wide tables from pushing page-level horizontal scroll */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.8em 0}
.table-wrap .versus,.table-wrap .datatable{margin:0;min-width:460px}

/* native CSS-only expander for long lists */
details.sg-more{margin:1em 0}
details.sg-more>summary{list-style:none;cursor:pointer;font-family:var(--grote);font-weight:600;
  font-size:var(--fs-meta);color:var(--accent);display:inline-flex;align-items:center;gap:.5em;padding:6px 0}
details.sg-more>summary::-webkit-details-marker{display:none}
details.sg-more>summary::after{content:"+ show all";font-weight:600}
details.sg-more[open]>summary::after{content:"– show fewer"}
details.sg-more>summary span{display:none}

/* figures + gallery + map */
.article-figure{margin:1.9em 0}
.article-figure img{width:100%;border-radius:var(--radius)}
.article-figure figcaption,.map-figure figcaption{font-family:var(--grote);font-size:var(--fs-meta);
  color:var(--muted);margin-top:10px;line-height:1.45}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1.9em 0}
.gallery figure{margin:0}
.gallery img{aspect-ratio:1;object-fit:cover;border-radius:6px}
.map-figure{margin:1.9em 0;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px}
.map-figure svg{width:100%;height:auto;display:block;background:#e9ecdf;border-radius:6px}

/* profile / org / entity / further */
.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:1.8em 0}
.profile-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.profile-card .p-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:12px}
.profile-card h3{font-size:1.25rem;margin-bottom:2px}
.profile-card .p-role{font-family:var(--grote);font-size:var(--fs-meta);color:var(--accent-2);margin:0 0 10px}
.profile-card p{font-size:1.04rem;line-height:1.5;color:var(--ink-soft);margin:0 0 10px}
.profile-card .p-links a,.profile-card .p-attr{font-family:var(--grote);font-size:var(--fs-meta)}
.profile-card.no-photo{border-top:4px solid var(--forest)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:1.8em 0}
.org-card{display:flex;flex-direction:column;gap:6px;padding:16px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius)}
.org-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)}
.org-logo{height:34px;width:auto;object-fit:contain;align-self:flex-start;
  background:var(--chip);border-radius:4px;padding:6px 10px}
.org-card.no-logo .org-logo{display:none}
.org-name{font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--ink)}
.org-host{font-family:var(--grote);font-size:.9rem;color:var(--muted)}

.entity-ref{font-weight:500;white-space:nowrap;border-bottom:1px solid rgba(122,46,46,.4)}

.further-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:1.4em 0}
.further-grid a{display:block;padding:18px 20px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);font-family:var(--serif);font-size:1.15rem;font-weight:500;color:var(--ink);
  line-height:1.3;transition:.16s}
.further-grid a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}

/* related links shell — collapses when empty */
.related-block{border-top:1px solid var(--line);margin-top:40px;padding-top:28px}
.related-block h2{font-size:1.6rem;margin-bottom:18px}
.related-links{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.related-links:empty{display:none}
.related-links:empty ~ *,.related-block:has(.related-links:empty){}
.related-links li a{display:block;padding:16px 18px;background:var(--paper-2);border-radius:var(--radius);
  font-family:var(--serif);font-weight:500;color:var(--ink)}
.related-links li a:hover{color:var(--accent)}

/* =========================================================================
   ARCHIVE / CATEGORY + SECTIONS HUB
   ========================================================================= */
.page-head{padding-block:clamp(36px,5vw,60px);background:var(--paper-2);border-bottom:1px solid var(--line)}
.page-head .eyebrow{margin-bottom:12px;display:block}
.page-head h1{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:500;max-width:18ch}
.page-head .intro{font-size:var(--fs-lead);color:var(--ink-soft);max-width:60ch;margin-top:16px}
.cat-list{list-style:none;padding:0;display:grid;grid-template-columns:1fr;gap:0}
.cat-list li{border-bottom:1px solid var(--line)}
.cat-list li a{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
  padding:22px 0;color:var(--ink)}
.cat-list li a:hover .cl-title{color:var(--accent)}
.cat-list .cl-no{font-family:var(--grote);font-weight:700;font-size:1.4rem;color:var(--line-2)}
.cat-list .cl-title{font-size:1.6rem;font-weight:500}
.cat-list .cl-dek{font-family:var(--grote);font-size:var(--fs-meta);color:var(--muted);margin-top:4px}
.cat-list .cl-meta{font-family:var(--grote);font-size:var(--fs-meta);color:var(--muted);white-space:nowrap}

/* generic page body (About/Contact) */
.page-body{max-width:var(--measure);margin-inline:auto;padding:clamp(34px,5vw,56px) var(--gut);
  font-size:1.2rem;line-height:1.7}
.page-body h2{font-size:1.8rem;margin:1.5em 0 .5em}
.page-body ul{padding-left:1.2em;margin:1em 0}
.page-body li{margin-bottom:.6em}

/* contact methods with SVG icons */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:1.6em 0}
.contact-card{display:flex;gap:14px;align-items:flex-start;padding:20px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius)}
.contact-card svg{width:24px;height:24px;color:var(--accent);flex:0 0 auto;margin-top:2px}
.contact-card .cc-label{font-family:var(--grote);font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.contact-card .cc-val{font-family:var(--serif);font-size:1.15rem;color:var(--ink)}

/* 404 */
.err-wrap{min-height:56vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px var(--gut)}
.err-wrap .code{font-family:var(--grote);font-weight:700;font-size:clamp(4rem,12vw,8rem);
  color:var(--line-2);line-height:.9}
.err-wrap h1{font-size:2rem;margin:.4em 0}
.err-wrap p{color:var(--ink-soft);max-width:44ch;margin:0 0 1.6em}

/* styleguide scaffolding */
.sg-section{padding-block:40px;border-bottom:1px solid var(--line)}
.sg-section>h2{font-family:var(--grote);font-weight:700;font-size:1.1rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:24px}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.sg-swatch{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sg-swatch .chip{height:70px}
.sg-swatch .lab{font-family:var(--grote);font-size:.82rem;padding:8px 10px;color:var(--ink-soft)}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:1180px){
  .card-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1080px){
  .card-row.three{grid-template-columns:1fr}
  .sp-featured-grid{grid-template-columns:1fr}
  .sponsors-featured .sponsor>img{max-width:205px}
  .footer-top{grid-template-columns:1fr 1fr}
  .article{grid-template-columns:1fr;max-width:var(--measure)}
  .article-rail{grid-column:1;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .rail-card{margin-bottom:0}
  .profile-grid,.further-grid,.gallery{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  :root{--fs-body:1.1rem}
  .header-inner{gap:16px;flex-wrap:wrap}
  .nav-toggle{display:inline-flex;margin-left:auto;background:none;border:1px solid var(--line-2);
    border-radius:6px;padding:8px 10px;cursor:pointer}
  .nav-toggle svg{width:22px;height:22px;color:var(--ink)}
  .header-search{order:3}
  .mainnav{order:4;flex-basis:100%;margin-left:0;display:none}
  .mainnav.open{display:block}
  .mainnav>ul{flex-direction:column;gap:2px}
  .mainnav>ul>li>a{padding:12px 8px}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--line);border-radius:0;margin:2px 0 6px 14px;padding:2px 0}
  .feature-grid{grid-template-columns:1fr}
  .feature-media{min-height:240px;aspect-ratio:16/10}
  .shelf-head{flex-wrap:wrap;gap:12px}
  .card-row,.card-row.three{grid-template-columns:1fr;gap:18px}
  .card.lead-card{grid-column:span 1}
  .footer-top{grid-template-columns:1fr}
  .article-rail{grid-template-columns:1fr}
  .profile-grid,.further-grid,.gallery{grid-template-columns:1fr}
  .clubs-table thead{display:none}
  .clubs-table,.clubs-table tbody,.clubs-table tr,.clubs-table td{display:block;width:100%}
  .clubs-table tr{border-bottom:1px solid var(--line);padding:8px 0}
  .clubs-table td{border:0;padding:4px 22px}
  .cat-list li a{grid-template-columns:auto 1fr;gap:14px}
  .cat-list .cl-meta{grid-column:2}
  .pullquote p{font-size:1.4rem}
}

/* 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(117,140,154)!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-strip .sponsor.sponsor img{box-sizing:border-box!important;height:38px!important;object-fit:contain!important;padding:8px 12px!important;background:#121013!important;box-sizing:border-box!important}

/* op-footer-compact: the footer printed 9 rows for 13 link(s) in
   2 list(s) — 1018px at 390, 8% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 1018 -> 787px (23% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(10px,2.78vw,40px)!important;row-gap:10px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-blurb-rows: money blurbs ran to 4 rows at 390, 662px of tier across
   3 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sp-featured-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:66px!important;min-height:0!important;overflow:hidden!important}
}
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--serif); font-weight: 500; line-height: 1.1; margin: 0px;}
.card h2:where(.rt-h3){font-size: var(--fs-h3); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.2em;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > span.thumb > img,
  div.article-body > figure.article-figure > img,
  div.feature-grid > div.feature-media > img,
  div.post-hero > div.post-hero-media > img,
  main.page-body > figure.article-figure > img){height:auto}
/* op-img-dims:end */
@media (min-width:621px) and (max-width:1439px){.sponsors-strip.sponsors-strip:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(158px,calc(50% - 7px)),1fr))!important;column-gap:14px!important;row-gap:14px!important;justify-content:stretch!important;align-items:stretch!important}.sponsors-strip.sponsors-strip > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}
@media (min-width:761px) and (max-width:899px){.header-inner { gap: 16px; flex-wrap: wrap; }.nav-toggle { display: inline-flex; margin-left: auto; background: none; border: 1px solid var(--line-2); border-radius: 6px; padding: 8px 10px; cursor: pointer; }.nav-toggle svg { width: 22px; height: 22px; color: var(--ink); }.header-search { order: 3; }.mainnav { order: 4; flex-basis: 100%; margin-left: 0px; display: none; }.mainnav.open { display: block; }.mainnav > ul { flex-direction: column; gap: 2px; }.mainnav > ul > li > a { padding: 12px 8px; }.submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-top: 0px; border-right: 0px; border-bottom: 0px; border-image: none; border-left: 2px solid var(--line); border-radius: 0px; margin: 2px 0px 6px 14px; padding: 2px 0px; }}

/* op-entity-wrap: long reference links wrap like the text around them (nowrap ran them off phone screens) */
.entity-ref.entity-ref{white-space:normal!important}
@media (min-width:700px) and (max-width:1099px){.sp-featured-grid:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-gap,16px)!important}.sp-featured-grid:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}