/* Luberon in Provence — "By Height"
   Everything is filed by altitude; the type and the rules follow the same logic:
   a dark spine, warm stone grounds, one ochre accent. */

:root{
  --paper:#FBF8F2;
  --stone:#E4DDD0;
  --stone-2:#F2EDE4;
  --ink:#191713;
  --ink-2:#33302A;
  --ink-3:#5C5548;
  --quiet:#8A8172;
  --rule:#D9D0C0;
  --rule-2:#EDE6D9;
  --dark:#23241F;
  --dark-2:#2C2D26;
  --dark-rule:#3A3B32;
  --dark-ink:#EFE7D8;
  --dark-quiet:#9E9A8D;
  --accent:#B96A22;
  --accent-deep:#8C3F17;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --step--1:clamp(.82rem,.8rem + .1vw,.9rem);
  --step-0:clamp(1.06rem,1.02rem + .2vw,1.18rem);
  --step-1:clamp(1.25rem,1.18rem + .35vw,1.45rem);
  --step-2:clamp(1.5rem,1.35rem + .7vw,1.9rem);
  --step-3:clamp(1.9rem,1.6rem + 1.4vw,2.7rem);
  --step-4:clamp(2.4rem,1.8rem + 2.8vw,4.1rem);
  --gut:clamp(20px,4vw,44px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--stone);color:var(--ink);
  font:400 var(--step-0)/1.62 var(--serif);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-weight:400;letter-spacing:-.015em;text-wrap:balance;margin:0}
p{margin:0 0 1.1em;text-wrap:pretty}
ul,ol{text-wrap:pretty}
hr{border:0;border-top:1px solid var(--rule);margin:2.4rem 0}
::selection{background:#E9CDA8}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:1400px;margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:1100px;margin-inline:auto;padding-inline:var(--gut)}
.kicker{font:600 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.kicker--accent{color:var(--accent)}
.sheet{background:var(--paper)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--dark);color:var(--dark-ink);padding:10px 16px}

/* ---------- masthead ---------- */
.masthead{background:var(--paper);border-bottom:1px solid var(--rule)}
.masthead__strip{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--rule-2);
  font:600 .66rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.masthead__strip span{display:block}
.masthead__main{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;padding:22px 0 16px}
.wordmark{font:300 clamp(1.8rem,1.1rem + 2.4vw,2.5rem)/.92 var(--serif);color:var(--ink);text-decoration:none;letter-spacing:-.02em;display:block}
.wordmark em{font-style:italic;color:var(--accent)}
.wordmark__sub{display:block;font:600 .62rem/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--quiet);margin-top:9px}
.nav{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline}
.nav a{font:600 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--rule)}
.nav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
.nav__alt{font:600 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep)}

/* ---------- colophon / partners ---------- */
.colophon{background:var(--dark);color:var(--dark-ink);padding:26px 0 30px}
.colophon__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--dark-rule);padding-bottom:12px;margin-bottom:20px}
.colophon__head h2{font:400 1.35rem/1 var(--serif);color:var(--dark-ink)}
.colophon__head p{margin:6px 0 0;max-width:62ch;font:400 .95rem/1.5 var(--serif);color:var(--dark-quiet)}
.colophon__note{font:600 .6rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#C89A63;text-align:right}
.colophon__run{display:flex;flex-wrap:nowrap;gap:12px;align-items:stretch}
.colophon__run + .colophon__run{margin-top:14px;padding-top:16px;border-top:1px solid var(--dark-rule)}
.sponsor{flex:1 1 0;min-width:0;
  background:var(--dark-2);border:1px solid var(--dark-rule);padding:16px 14px 18px;
  display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.sponsor:hover{border-color:#5A5B4E}
.sponsor img{height:44px;max-height:44px;width:auto;max-width:min(200px,100%);object-fit:contain;margin:0 auto;display:block}
.sponsor-name{display:block;text-align:center;font:600 .66rem/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:#C4BFB1;
  border-top:1px solid var(--dark-rule);padding-top:10px}
.sponsor-blurb{display:block;min-height:90px;font:400 .92rem/1.45 var(--serif);color:var(--dark-quiet)}

/* ---------- the spine ---------- */
.spine{background:var(--paper);border-bottom:1px solid var(--rule)}
.spine__intro{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding:clamp(28px,4vw,48px) 0 clamp(22px,3vw,34px)}
.spine__intro h1{font-size:var(--step-4);line-height:1.02;font-weight:300;letter-spacing:-.025em;max-width:16ch}
.spine__intro p{font-size:var(--step-1);line-height:1.5;color:var(--ink-2);margin:0}
.spine__intro .note{margin-top:14px}
.band{display:grid;grid-template-columns:200px minmax(0,1fr);border-top:1px solid var(--rule)}
.band__height{background:var(--dark);color:var(--dark-ink);padding:22px 22px 24px;display:flex;flex-direction:column;gap:6px}
.band__m{font:300 2.1rem/1 var(--serif)}
.band__m span{font:600 .68rem/1 var(--sans);color:var(--dark-quiet);margin-left:4px}
.band__name{font:600 .64rem/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.band__body{padding:22px clamp(16px,2vw,30px) 26px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(18px,3vw,40px);align-items:start}
.band:nth-of-type(even) .band__body{background:var(--stone-2)}
.band__body h2{font-size:var(--step-2);margin-bottom:8px}
.band__body>div>p{margin:0 0 12px;color:var(--ink-3);max-width:62ch}
.band__links{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.band__links a{display:inline-block;font:600 .64rem/22px var(--sans);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule);color:var(--ink-3);padding:0 10px;text-decoration:none;background:var(--paper)}
.band__links a:hover{border-color:var(--ink);color:var(--ink)}
.band__aside{font:400 .95rem/1.55 var(--serif);color:var(--quiet);border-left:2px solid var(--accent);padding-left:16px}
.band__aside img{margin-bottom:0}
.band__fig{margin:0}
.band__fig img{width:100%;height:150px;object-fit:cover}
.band__fig figcaption{font:600 .58rem/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);margin-top:6px}

/* ---------- generic sections ---------- */
.strip{padding:clamp(30px,5vw,58px) 0}
.strip--paper{background:var(--paper);border-block:1px solid var(--rule)}
.strip--dark{background:var(--dark);color:var(--dark-ink)}
.strip__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid var(--ink);padding-bottom:10px;margin-bottom:22px}
.strip--dark .strip__head{border-bottom-color:var(--dark-rule)}
.strip__head h2{font-size:var(--step-2)}
.strip__head p{margin:0;font:400 .98rem/1.5 var(--serif);color:var(--quiet);max-width:52ch}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2vw,26px)}
.cards--five{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
@media (max-width:1180px) and (min-width:861px){
  .cards--five img{display:none}
  .cards--five .card__body{padding:14px}
  .cards--five p{font-size:.9rem}
  .cards--five .card__alt{flex-direction:column;gap:2px}
  .cards--five h3{font-size:1.16rem;line-height:1.18;min-height:0}
  .cards--five .card__meta{font-size:.55rem;padding-top:10px}
}
@media (max-width:860px){
  .cards--five{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
  .cards--five>*{scroll-snap-align:start}
}
@media (min-width:600px) and (max-width:860px){.cards--five{grid-auto-columns:44%}}
.card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);text-decoration:none;color:var(--ink);height:100%}
.card:hover{border-color:var(--ink)}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card__body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 18px;flex:1}
.card__alt{display:flex;justify-content:space-between;gap:12px;font:600 .6rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card__alt em{font-style:normal;color:var(--quiet)}
.card h3{font-size:var(--step-1);line-height:1.2;min-height:2.4em}
.card p{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink-3)}
.card__meta{margin-top:auto;padding-top:12px;font:600 .6rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}

.strip--dark .card,.strip--dark .panel,.strip--dark .related-links a,.strip--dark .further-grid a{color:var(--ink)}
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(16px,2vw,28px)}
.panel{background:var(--paper);border:1px solid var(--rule);display:flex;flex-direction:column}
.panel img{width:100%;aspect-ratio:16/9;object-fit:cover}
.panel__body{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:10px;flex:1}
.panel__body h3{font-size:var(--step-2)}
.panel__body p{margin:0;color:var(--ink-3)}
.panel ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.panel li{border-top:1px solid var(--rule-2)}
.panel li a{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:9px 0;text-decoration:none;color:var(--ink);font-size:1rem}
.panel li a:hover{color:var(--accent-deep)}
.panel li span{font:600 .58rem/1 var(--sans);letter-spacing:.1em;color:var(--quiet);white-space:nowrap}
.panel__more{margin-top:auto;padding-top:14px;font:600 .62rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase}

.statement{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0}
.statement__tag{background:var(--dark);color:var(--dark-quiet);padding:22px;font:600 .62rem/1.6 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.statement__body{background:var(--stone-2);padding:clamp(22px,3vw,38px);border:1px solid var(--rule);border-left:0}
.statement__body blockquote{margin:0;font:300 var(--step-3)/1.22 var(--serif);letter-spacing:-.02em;max-width:26ch}
.statement__body p{margin:16px 0 0;max-width:66ch;color:var(--ink-3)}

/* ---------- footer ---------- */
.foot{background:var(--dark);color:var(--dark-quiet);padding:clamp(30px,4vw,48px) 0 34px;font-size:.95rem}
.foot__cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(150px,1fr));gap:clamp(20px,3vw,40px)}
.foot h2{font:400 1.5rem/1 var(--serif);color:var(--dark-ink)}
.foot h3{font:600 .62rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#C89A63;margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot a{color:var(--dark-quiet);text-decoration:none}
.foot a:hover{color:var(--dark-ink)}
.foot__disclaimer{margin-top:clamp(24px,3vw,38px);padding-top:16px;border-top:1px solid var(--dark-rule);
  font-style:italic;color:#8E8878;max-width:70ch}

/* ---------- article ---------- */
.hero{position:relative;background:var(--dark)}
.hero img{width:100%;height:clamp(240px,42vw,520px);object-fit:cover;opacity:.92}
.hero figcaption{position:absolute;right:0;bottom:0;background:rgba(35,36,31,.82);color:#BDB8AA;
  font:600 .58rem/1 var(--sans);letter-spacing:.08em;padding:7px 12px}
.article-head{background:var(--paper);border-bottom:1px solid var(--rule);padding:clamp(24px,3.5vw,44px) 0 clamp(20px,3vw,32px)}
.article-head__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(22px,4vw,60px);align-items:end}
.article-head h1{font-size:var(--step-4);line-height:1.03;font-weight:300;letter-spacing:-.028em}
.byline{margin-top:14px;font:600 .66rem/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--quiet)}
.byline a{color:var(--quiet)}
.filed{border-left:2px solid var(--accent);padding-left:18px}
.filed__m{font:300 2.6rem/1 var(--serif)}
.filed__m span{font:600 .7rem/1 var(--sans);color:var(--quiet);margin-left:4px}
.filed p{margin:8px 0 0;font-size:1rem;line-height:1.5;color:var(--ink-3)}
.filed .kicker{display:block;margin-bottom:8px}

/* altitude gauge — horizontal, not a rail */
.gauge{background:var(--dark);color:var(--dark-quiet);padding:14px 0 16px}
.gauge__inner{display:flex;align-items:stretch;gap:0;border:1px solid var(--dark-rule)}
.gauge__step{flex:1 1 0;min-width:0;padding:9px 10px;border-right:1px solid var(--dark-rule);
  font:600 .58rem/1.35 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#75705F;text-decoration:none;text-align:center}
.gauge__step:last-child{border-right:0}
.gauge__step b{display:block;font:400 1.05rem/1.2 var(--serif);letter-spacing:0;text-transform:none;color:#8E8878}
.gauge__step:hover{background:#2A2B24;color:var(--dark-ink)}
.gauge__step[aria-current]{background:var(--accent);color:#1B1509}
.gauge__step[aria-current] b{color:#1B1509}

.article{background:var(--paper);padding:clamp(26px,4vw,48px) 0 clamp(30px,5vw,60px)}
.article-body{display:grid;
  grid-template-columns:[full-start] minmax(var(--gut),1fr) [main-start] min(68ch,100%) [main-end] minmax(var(--gut),1fr) [full-end];}
.article-body>*{grid-column:main}
.article-body>.full{grid-column:full;margin:clamp(26px,4vw,44px) 0}
.article-body p{font-size:var(--step-1);line-height:1.62;margin:0 0 1.05em}
.article-body h2{font-size:var(--step-2);margin:1.7em 0 .5em;max-width:30ch}
.article-body h3{font-size:var(--step-1);margin:1.5em 0 .4em}
.article-body ul,.article-body ol{font-size:var(--step-1);padding-left:1.1em;margin:0 0 1.2em}
.article-body li{margin-bottom:.4em}
.lead{font:400 var(--step-2)/1.4 var(--serif);color:var(--ink);margin:0 0 1.1em!important;letter-spacing:-.01em}

/* interruption panels (Notes for Design material) */
.interruption{background:var(--stone-2);border-block:1px solid var(--rule);padding:clamp(20px,3vw,34px) var(--gut)}
.interruption--dark{background:var(--dark);border-color:var(--dark-rule);color:var(--dark-ink)}
.interruption__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.interruption__head h3{font-size:var(--step-2)}
.interruption--dark .interruption__head h3{color:var(--dark-ink)}
.glossary{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.interruption--dark .glossary{background:var(--dark-rule);border-color:var(--dark-rule)}
.glossary>div{background:var(--stone-2);padding:14px 16px 16px}
.interruption--dark .glossary>div{background:var(--dark)}
.glossary dt{font:600 .72rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.glossary dd{margin:0;font-size:.98rem;line-height:1.5;color:var(--ink-3)}
.interruption--dark .glossary dd{color:var(--dark-quiet)}

.timeline{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.timeline li{background:var(--paper);display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:clamp(12px,2vw,26px);padding:13px 16px}
.timeline .t-when{font:600 .72rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep)}
.timeline .t-what{font-size:1rem;line-height:1.5;color:var(--ink-2)}

.versus{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--rule);font-size:1rem}
.versus th,.versus td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--rule-2);vertical-align:top;line-height:1.5}
.versus thead th{font:600 .66rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);background:var(--stone-2)}
.versus tbody th{font-family:var(--serif);font-weight:400;font-size:1.1rem;width:26%;color:var(--ink)}
.versus tr:last-child th,.versus tr:last-child td{border-bottom:0}

.datatable{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--rule);font-size:1rem}
.datatable caption{caption-side:top;text-align:left;font:600 .62rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);padding-bottom:8px}
.datatable th,.datatable td{padding:10px 14px;border-bottom:1px solid var(--rule-2);text-align:left;line-height:1.45}
.datatable thead th{font:600 .64rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;background:var(--stone-2);color:var(--ink-3)}
.datatable td.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.statblock{background:var(--paper);padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}
.stat-num{font:300 2.3rem/1 var(--serif);color:var(--ink)}
.stat-label{font:600 .62rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}

.pullquote{margin:clamp(22px,3vw,34px) 0;padding:0 0 0 22px;border-left:3px solid var(--accent)}
.pullquote p{font:300 var(--step-2)/1.28 var(--serif)!important;letter-spacing:-.015em;margin:0!important;max-width:26ch}
.blockquote{margin:clamp(20px,3vw,30px) 0;padding:18px 22px;background:var(--stone-2);border:1px solid var(--rule)}
.blockquote p{margin:0 0 .6em!important;font-size:var(--step-1)!important;font-style:italic}
.blockquote cite{font:600 .64rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--quiet)}
.callout{margin:clamp(20px,3vw,30px) 0;padding:18px 22px;background:var(--dark);color:var(--dark-ink);border-left:3px solid var(--accent)}
.callout p{margin:0!important;font-size:var(--step-0)!important;line-height:1.55;color:var(--dark-ink)}
.note{font-size:.98rem!important;line-height:1.55;color:var(--ink-3);border-left:2px solid var(--rule);padding-left:14px;font-style:italic}

.article-figure{margin:clamp(22px,3vw,34px) 0}
.article-figure img{width:100%}
.article-figure figcaption,.map-figure figcaption,.gallery figcaption{
  font:400 .95rem/1.5 var(--serif);color:var(--quiet);margin-top:8px;font-style:italic}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:clamp(22px,3vw,34px) 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.map-figure{margin:clamp(22px,3vw,34px) 0}
.map-figure .map-slot{background:#E9E2D5;border:1px solid var(--rule);min-height:clamp(260px,32vw,440px);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.map-figure .map-slot img{width:100%;height:100%;object-fit:contain}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:24px 0}
.profile-card{background:var(--paper);border:1px solid var(--rule);padding:18px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:6px}
.profile-card h3{font-size:var(--step-1)}
.profile-card .p-role{font:600 .62rem/1.3 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin:0}
.profile-card p{margin:0;font-size:.98rem;line-height:1.5;color:var(--ink-3)}
.profile-card .p-links,.profile-card .p-attr{font:600 .62rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;margin-top:auto;padding-top:8px}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:22px 0}
.org-card{display:flex;flex-direction:column;gap:6px;background:var(--stone-2);border:1px solid var(--rule);padding:14px 16px;text-decoration:none;color:inherit}
.org-card:hover{border-color:var(--ink)}
.org-logo{height:34px;width:auto;max-width:150px;object-fit:contain;margin:0}
.org-name{font-size:1.05rem}
.org-host{font:600 .6rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}
.entity-ref{white-space:nowrap}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.further-grid a{display:block;background:var(--stone-2);border:1px solid var(--rule);padding:14px 16px;
  text-decoration:none;color:var(--ink);font-size:1.05rem;line-height:1.35}
.further-grid a:hover{border-color:var(--ink)}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.related-links li{display:flex}
.related-links a{display:flex;flex-direction:column;gap:6px;width:100%;background:var(--paper);border:1px solid var(--rule);
  padding:14px 16px;text-decoration:none;color:var(--ink);line-height:1.3}
.related-links a:hover{border-color:var(--ink)}
.related-links .kicker{margin-bottom:2px}

.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--rule)}
.cat-list li:last-child{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,1.15fr) 90px;gap:clamp(12px,2vw,28px);
  align-items:baseline;padding:15px 0;text-decoration:none;color:var(--ink)}
.cat-list a:hover{background:var(--stone-2)}
.cat-list .m{font:600 .7rem/1.4 var(--sans);letter-spacing:.08em;color:var(--accent)}
.cat-list .t{font-size:var(--step-1);line-height:1.25}
.cat-list .d{font-size:.98rem;line-height:1.5;color:var(--ink-3)}
.cat-list .r{font:600 .6rem/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--quiet);text-align:right}

.page-head{background:var(--paper);border-bottom:1px solid var(--rule);padding:clamp(26px,4vw,48px) 0 clamp(20px,3vw,30px)}
.page-head__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:end}
.page-head h1{font-size:var(--step-4);font-weight:300;line-height:1.04;letter-spacing:-.025em}
.page-head p{margin:0;font-size:var(--step-1);line-height:1.5;color:var(--ink-2)}
.prose{max-width:68ch;padding-inline:var(--gut);margin-inline:auto}
.prose p{font-size:var(--step-1)}

/* ---------- styleguide only ---------- */
.sg-item{background:var(--paper);border:1px solid var(--rule);padding:clamp(16px,2vw,26px);margin-bottom:22px}
.sg-item>h2{font:600 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .spine__intro,.article-head__grid,.page-head__grid{grid-template-columns:1fr}
  .band__body{grid-template-columns:1fr}
  .cat-list a{grid-template-columns:80px minmax(0,1fr);row-gap:4px}
  .cat-list .d{grid-column:2}
  .cat-list .r{grid-column:2;text-align:left}
}
@media (max-width:820px){
  .band{grid-template-columns:1fr}
  .band__height{flex-direction:row;align-items:baseline;gap:14px;padding:12px 16px}
  .statement{grid-template-columns:1fr}
  .statement__body{border-left:1px solid var(--rule)}
  .gauge__inner{flex-wrap:wrap}
  .gauge__step{flex:1 1 33%;border-bottom:1px solid var(--dark-rule)}
  .timeline li{grid-template-columns:1fr;gap:4px}
  .hero img{height:clamp(200px,50vw,320px)}
  .masthead__strip{font-size:.58rem}
}
@media (max-width:1100px){
  .colophon__run{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:14px}
  .sponsor{min-width:0}
}
@media (max-width:560px){
  .sponsor{min-width:0;flex:1 1 100%;max-width:none}
  .colophon__note{text-align:left}
  .versus,.datatable{display:block;overflow-x:auto}
  .card h3{min-height:0}
}
@media print{
  .colophon,.nav,.gauge{display:none}
  body{background:#fff}
}

/* ---------- interactive locator map ---------- */
.mapx__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(16px,2vw,28px);align-items:start}
.mapx__plot{position:relative;min-height:0;padding:0}
.mapx__plot>img{width:100%;height:auto;display:block}
.pin{position:absolute;transform:translate(-50%,-50%);display:block;text-decoration:none;color:var(--ink);z-index:2}
.pin__dot{display:block;width:13px;height:13px;border-radius:50%;background:var(--accent);border:2.5px solid var(--dark);
  transition:transform .12s ease;margin:0 auto}
.pin__label{position:absolute;left:14px;top:-7px;white-space:nowrap;
  font:600 .68rem/1.6 var(--sans);letter-spacing:.04em;color:var(--ink);
  background:rgba(233,226,213,.82);padding:0 5px}
.pin__card{position:absolute;left:14px;top:14px;width:210px;display:none;background:var(--dark);color:var(--dark-ink);
  padding:10px 12px 12px;border:1px solid var(--dark-rule);z-index:3}
.pin__m{display:block;font:600 .58rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#C89A63;margin-bottom:4px}
.pin__t{display:block;font:400 1rem/1.3 var(--serif)}
.pin:hover,.pin:focus-visible,.pin.is-active{z-index:4}
.pin:hover .pin__dot,.pin:focus-visible .pin__dot,.pin.is-active .pin__dot{transform:scale(1.55);background:#8C3F17}
.pin:hover .pin__card,.pin:focus-visible .pin__card,.pin.is-active .pin__card{display:block}
.pin[data-place="Apt"] .pin__label,.pin[data-place="Gordes"] .pin__label{left:auto;right:14px}
.pin[data-place="Apt"] .pin__card,.pin[data-place="Saignon"] .pin__card{left:auto;right:14px}
.mapx__legend ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.mapx__legend li{border-bottom:1px solid var(--rule)}
.mapx__legend a{display:block;padding:10px 8px;text-decoration:none;color:var(--ink)}
.mapx__legend a strong{display:block;font-weight:400;font-size:1.1rem;line-height:1.2;margin:3px 0 2px}
.mapx__legend a span:last-child{display:block;font-size:.92rem;line-height:1.4;color:var(--ink-3)}
.mapx__legend a:hover,.mapx__legend a.is-active{background:var(--stone-2);color:var(--accent-deep)}
.mapx__legend .kicker{display:block}
@media (max-width:1180px){
 .pin__label{display:none}
}
@media (max-width:860px){
 .mapx__grid{grid-template-columns:1fr}
 .pin__card{width:170px}
}

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#E4DDD0;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* 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. */
.colophon__run .sponsor.sponsor img{height:44px!important;display:block!important;width:100%!important}

/* op-footer-compact: the footer printed 12 rows for 12 link(s) in
   2 list(s) — 1126px 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, and the group holder takes two columns,
   measured 1126 -> 828px (26% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(8px,2.78vw,40px)!important;row-gap:8px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px}
}

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

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

/* op-page-overflow: the page scrolled sideways at 320 — article.panel reached
   340px in a 320px screen (+20px), inside
   div.panels. Remedy: unpin the grid track. 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.panels{grid-template-columns:minmax(0,1fr)!important}
  article.panel{min-width:0!important;max-width:100%!important}
}

/* op-article-width: the article column was capped at 707px (76 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "[full-start] minmax(var(--gut),1fr) [main-start] min(68ch,100%) [main-end] minmax(var(--gut),1fr) [full-end]" (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 1280 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1280px){
  div.article div.article-body{grid-template-columns:[full-start] minmax(var(--gut),1fr) [main-start] min(944px, 100%) [main-end] minmax(var(--gut),1fr) [full-end]!important}
}
@media (min-width:1600px){
  div.article div.article-body{grid-template-columns:[full-start] minmax(var(--gut),1fr) [main-start] min(clamp(944px, 65.556vw, 1133px), 100%) [main-end] minmax(var(--gut),1fr) [full-end]!important}
  div.article div.article-body > :is(p.lead, p:not([class])){font-size:clamp(23.2px,1.6111vw,27.84px)!important}
}
/* op-article-width:end */

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

/* op-hover-pad */
.cat-list a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.hero > img,
  div.article-body > figure.article-figure.full > img,
  div.band__body > figure.band__fig > img,
  div.cards > a.card > img,
  div.cards.cards--five > a.card > img,
  div.panels > article.panel > img){height:auto}
/* op-img-dims:end */
@media (max-width:759px){.article-body.article-body{grid-template-columns:[full-start] 16px [main-start] minmax(0,1fr) [main-end] 16px [full-end]!important}}