/* pays-de-faverges.com — The Register
   Palette (named jobs):
     --paper  ground        #EFE9DA  bone
     --ink    ink           #14150F  basalt
     --ember  accent        #C2450E  saturated, hue ~25  — numerals, rules, one full band
     --alp    secondary     #2B4B8C  saturated, hue ~220 — the rail, figure panels, footer
     --mute   quiet/flag    #6E6C60  captions, credits, hairlines
*/
:root{
  --paper:#EFE9DA;
  --ink:#14150F;
  --ember:#C2450E;
  --alp:#2B4B8C;
  --mute:#6E6C60;

  --paper-2:#E4DDC8;
  --rule:#C9C2AF;
  --ink-2:#2A2B23;
  --alp-pale:#CBD5EA;
  --ember-pale:#F0A882;

  --display:"Zilla Slab",Georgia,serif;
  --body:Literata,Georgia,serif;

  --rail:288px;
  --pad:56px;
  --measure:70ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.7;
  font-synthesis-weight:none;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.015em;line-height:1.05;margin:0}
p{margin:0 0 1.1em;text-wrap:pretty}
a{color:var(--alp);text-decoration:none;border-bottom:1px solid rgba(43,75,140,.35)}
a:hover{color:var(--ember);border-bottom-color:var(--ember)}
table{border-collapse:collapse}
figure{margin:0}
::selection{background:var(--ember);color:var(--paper)}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

/* ───────── shell ───────── */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
.main{min-width:0}
.band{padding:52px var(--pad);border-bottom:1px solid var(--rule)}
.band--ink{background:var(--ink);color:var(--paper);border-bottom-color:var(--ink)}
.band--ember{background:var(--ember);color:var(--ink);border-bottom-color:var(--ink)}
.band--tight{padding-top:34px;padding-bottom:34px}
.band--flush{padding:0;border-bottom:1px solid var(--ink)}

/* ───────── the rail (site navigation, second level always visible) ───────── */
.rail{background:var(--alp);color:var(--paper);padding:30px 24px 44px;font-family:var(--display)}
.rail a{color:var(--alp-pale);border-bottom:0}
.rail a:hover{color:#fff}
.brand{display:block;border-bottom:1px solid rgba(239,233,218,.4);padding-bottom:18px;margin-bottom:8px}
.brand-rule{display:block;width:100%;height:auto;color:var(--ember-pale);margin-bottom:12px}
.brand-name{display:block;color:var(--paper)}
.brand-name em{display:block;font-style:normal;font-size:14px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--ember-pale);margin-bottom:1px}
.brand-name .big{display:block;font-size:47px;font-weight:700;line-height:.86;letter-spacing:-.04em}
.brand-name i{font-style:normal;font-size:16px;letter-spacing:.04em;color:var(--alp-pale)}
.brand-sig{display:block;font-family:var(--display);font-size:16.5px;line-height:1.32;color:var(--ember-pale);border-top:1px solid rgba(239,233,218,.35);margin:16px 0 0;padding-top:12px}
.rail-nav{display:grid;gap:20px;margin-top:22px}
.rail-sec > a{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:600;color:var(--paper);margin-bottom:7px}
.rail-sec > a svg{flex:0 0 auto;color:var(--ember-pale)}
.rail-sub{display:grid;gap:5px;font-family:var(--body);font-size:15px;line-height:1.3;padding-left:11px;border-left:1px solid rgba(239,233,218,.3)}
.rail-sec.is-here > a{color:var(--ember-pale)}
.rail-sec.is-here .rail-sub{border-left:2px solid var(--ember)}
.rail-sub a.is-here{color:#fff}
.rail-foot{margin-top:26px;padding-top:16px;border-top:1px solid rgba(239,233,218,.3);display:grid;gap:5px;font-family:var(--body);font-size:15px}
.railbar{display:none}

/* ───────── the numeral device: figures from the subject as the repeating mark ───────── */
.marg{display:grid;grid-template-columns:132px minmax(0,1fr);gap:32px;align-items:start}
.fig-num{text-align:right;font-family:var(--display)}
.fig-num b{display:block;font-weight:700;font-size:52px;line-height:.88;letter-spacing:-.03em;color:var(--ember)}
.fig-num span{display:block;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.band--ink .fig-num span,.band--ember .fig-num span{color:inherit;opacity:.7}
.band--ember .fig-num b{color:var(--ink)}
.rulemark{margin-top:14px;color:var(--ink);opacity:.75}
.band--ink .rulemark{color:var(--paper)}

/* ───────── headings ───────── */
.kicker{font-family:var(--display);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.kicker svg{color:var(--ember)}
.kicker a{color:inherit;border:0}
.h-page{font-size:clamp(38px,4.4vw,62px);line-height:1.02}
.h-band{font-size:clamp(26px,2.4vw,33px);margin-bottom:22px}
.h-sub{font-size:22px;margin:44px 0 14px;font-weight:600}
.deck{font-size:20px;line-height:1.55;max-width:62ch;color:var(--ink-2)}
.band--ink .deck{color:var(--alp-pale)}
.lead{font-family:var(--display);font-size:23px;line-height:1.42;font-weight:400;max-width:60ch;margin:0 0 1.2em}

/* ───────── figure system — four treatments, one drawing language ───────── */
.article-figure{margin:28px 0}
.article-figure img{width:100%;height:auto}
.article-figure figcaption{font-family:var(--display);font-size:18px;line-height:1.4;margin-top:11px;max-width:56ch}
.credit{display:block;margin-top:6px;font-family:var(--body);font-size:13.5px;line-height:1.4;color:var(--mute);letter-spacing:.01em}
/* 1 — ruled: hairline above and below, figure numeral in the margin */
/* the numeral hangs in the gutter so the picture stays flush with the prose */
.fig--ruled{display:block;margin-left:0}
.fig--ruled > .fig-num{display:flex;align-items:baseline;gap:9px;text-align:left;margin-bottom:9px}
.fig--ruled .fig-num b{font-size:28px;display:inline}
.fig--ruled .fig-num span{font-size:12.5px;margin-top:0;display:inline}
.fig--ruled > div:empty{display:none}
/* the panel plate breaks right, out of the measure, so it is not another 814px slab */
.fig--panel{width:calc(100% + 148px);max-width:none}
.fig--ruled .fig-wrap{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:12px 0}
/* 2 — panel: photograph on the secondary colour with a reveal, caption reversed out */
.fig--panel{background:var(--alp);padding:24px 24px 20px;color:var(--paper)}
.fig--panel figcaption{color:var(--paper)}
.fig--panel .credit{color:var(--alp-pale)}
/* 3 — bleed: breaks the measure, caption on a rule beneath */
.fig--bleed{margin:40px calc(var(--pad) * -1)}
.fig--bleed figcaption{border-top:2px solid var(--ink);padding:11px var(--pad) 0;margin-top:0;max-width:none;display:flex;justify-content:space-between;gap:36px;align-items:baseline}
.fig--bleed .credit{margin-top:0;white-space:nowrap}
/* 4 — inset: sits in the column, prose runs beside it */
.fig--inset{float:right;width:296px;margin:6px 0 18px 32px}
/* nothing structural may run alongside a floated inset */
.article-body > h2,.article-body > .notes-block,.article-body > .pullquote,.article-body > .blockquote,.article-body > .callout,.article-body > .article-figure:not(.fig--inset){clear:both}
.article-body::after{content:"";display:block;clear:both}
.fig--inset img{border:1px solid var(--ink)}
.fig--inset figcaption{font-size:16px;border-left:2px solid var(--ember);padding-left:11px;max-width:none}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:34px 0}
.gallery figure figcaption{font-family:var(--display);font-size:16px;line-height:1.35;margin-top:9px}
.gallery img{border-top:2px solid var(--ink);padding-top:0}

/* ───────── reading page ───────── */
.article{padding:44px var(--pad) 0}
.prose{max-width:var(--measure)}
.prose--wide{max-width:none}
.article-body{max-width:78ch}
.article-body p{font-size:18.5px}
.article-body > p:first-of-type{font-size:19.5px}

.pullquote{margin:32px 0;padding:0 0 0 26px;border-left:3px solid var(--ember);max-width:52ch}
.pullquote p{font-family:var(--display);font-size:27px;line-height:1.3;font-weight:600;margin:0;letter-spacing:-.015em}
.blockquote{margin:34px 0;padding:22px 26px;background:var(--paper-2);border-top:2px solid var(--ink)}
.blockquote p{font-family:var(--display);font-size:21px;line-height:1.45;margin:0 0 .5em}
.blockquote cite{font-style:normal;font-size:15px;color:var(--mute)}
.callout{margin:34px 0;background:var(--ink);color:var(--paper);padding:24px 26px}
.callout p{margin:0;font-family:var(--display);font-size:20px;line-height:1.45}
.note{font-size:16.5px;color:var(--mute);border-top:1px solid var(--rule);padding-top:12px;max-width:56ch}

/* ───────── data components ───────── */
.notes-block{margin:32px 0;border-top:2px solid var(--ink);padding-top:16px}
.notes-block > h3{font-family:var(--display);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:16px}

.datatable,.versus{width:100%;table-layout:fixed;font-size:16.5px;line-height:1.5}
.datatable th,.versus th{text-align:left;font-family:var(--display);font-weight:600}
.datatable thead th,.versus thead th{border-bottom:2px solid var(--ink);padding:0 16px 10px 0;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.versus thead th + th{font-size:19px;letter-spacing:0;text-transform:none;color:var(--ink)}
.versus thead th svg{color:var(--ember);vertical-align:-3px;margin-right:7px}
.datatable td,.datatable tbody th,.versus td,.versus tbody th{border-bottom:1px solid var(--rule);padding:13px 16px 13px 0;vertical-align:top}
.datatable tbody th,.versus tbody th{color:var(--mute);font-size:16px;width:30%}
.versus tbody th{width:22%}
.versus .big{font-family:var(--display);font-weight:700;font-size:26px;color:var(--ember);display:block;line-height:1}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px}
.statblock{border-top:2px solid var(--ember);padding-top:11px}
.stat-num{display:block;font-family:var(--display);font-weight:700;font-size:38px;line-height:.95;letter-spacing:-.03em}
.stat-label{display:block;font-size:15.5px;line-height:1.4;margin-top:6px;color:var(--ink-2)}

.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(140px,26%) minmax(0,1fr);gap:24px;padding:14px 0;border-top:1px solid var(--rule)}
.timeline li:last-child{border-bottom:1px solid var(--rule)}
.t-when{font-family:var(--display);font-weight:600;font-size:17px;color:var(--ember)}
.t-what{font-size:16.5px;line-height:1.5}

.chart{margin:34px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{font-family:var(--display);font-size:16.5px;line-height:1.4;margin-top:12px;border-top:1px solid var(--rule);padding-top:10px}
.chart text{font-family:var(--body);fill:var(--ink)}

.map-figure{margin:0}
.map-figure .map-slot{width:100%}
.map-figure svg{width:100%;height:auto;display:block}
.map-figure figcaption{font-family:var(--display);font-size:17px;line-height:1.45;margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:space-between}
/* map labels are HTML positioned over the SVG: SVG text scales with the
   viewBox, so no authored size can hold a CSS-px floor across viewports */
.m-wrap{position:relative}
.m-wrap svg{display:block;width:100%;height:auto}
.map-dot{fill:var(--ember)}
.m-lbl{position:absolute;font-family:var(--display);font-weight:600;line-height:1.15;white-space:nowrap;pointer-events:none}
.m-pin,.m-pinlink{font-size:17px;color:var(--ink);transform:translateY(-52%)}
.m-pinlink{position:absolute;font-family:var(--display);font-weight:600;line-height:1.15;white-space:nowrap;border-bottom:0;color:var(--ink)}
.m-pinlink:hover{color:var(--ember-text)}
.m-dept{font-size:15px;color:#B6B4A4;letter-spacing:.06em;text-transform:uppercase}
.m-grat{font-size:15px;font-weight:500;color:#A5A395}
.m-scale{font-size:15px;color:var(--ink)}
.map-leader{stroke:var(--ember);stroke-width:1.6;fill:none}
.map-grat{stroke:var(--mute);stroke-width:.8;opacity:.4;fill:none}
.map-grat-lbl{font-family:var(--body);font-size:11px;fill:var(--mute)}
.map-scale,.map-north{stroke:var(--ink);stroke-width:1.6;fill:none}
.map-scale text,.map-north text{font-family:var(--display);font-size:13px;fill:var(--ink);stroke:none;font-weight:600}
.map-land{fill:var(--paper-2);stroke:var(--ink);stroke-width:2.4}

/* ───────── cards & references ───────── */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin:30px 0}
.profile-card{display:flex;flex-direction:column;background:var(--paper-2);border-top:2px solid var(--ink)}
.profile-card .p-photo{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.profile-card > h3{font-size:23px;margin:16px 20px 0}
.p-role{font-family:var(--display);font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--ember);margin:6px 20px 10px}
.profile-card p:not(.p-role):not(.p-links){font-size:16.5px;line-height:1.55;margin:0 20px 14px}
.p-links{margin:auto 20px 18px;font-size:16px}
.p-attr{font-size:13px;color:var(--mute);margin:0 20px 16px}
.profile-card.no-photo{padding-top:16px}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px;margin:26px 0}
.org-card{display:flex;flex-direction:column;gap:3px;border:1px solid var(--ink);padding:16px 18px;border-bottom-width:1px;color:var(--ink)}
.org-card:hover{background:var(--ink);color:var(--paper)}
.org-name{font-family:var(--display);font-weight:600;font-size:17.5px;line-height:1.25}
.org-host{font-size:14px;color:var(--mute)}
.org-card:hover .org-host{color:var(--alp-pale)}
.entity-ref{text-underline-offset:2px}

.further-grid,.related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:0 34px;margin:0;padding:0;list-style:none}
.further-grid a,.related-links a{display:flex;flex-direction:column;gap:5px;font-family:var(--display);font-size:20px;line-height:1.25;padding:16px 0;border-top:1px solid var(--rule);border-bottom:0;color:var(--ink)}
.further-grid a:hover,.related-links a:hover{color:var(--ember)}
.related-links .r-sec{font-family:var(--body);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:7px}

/* index / register listings */
.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:minmax(0,1fr) minmax(0,1.25fr);gap:16px 34px;align-items:baseline;padding:18px 0;border-bottom:0;color:var(--ink)}
.cat-list a:hover{color:var(--ember)}
.cat-list .e-title{font-family:var(--display);font-size:23px;font-weight:600;line-height:1.2}
.cat-list .e-brief{font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.cat-list a:hover .e-brief{color:var(--ink-2)}

.lede-feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:44px;align-items:start}
.lede-feature h2{font-size:clamp(30px,3.2vw,44px);line-height:1.02;margin-bottom:16px}
.seconds{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px}
.second{display:flex;flex-direction:column;border-top:2px solid var(--ink);padding-top:14px;height:100%}
.second h3{font-size:21px;line-height:1.2;margin-bottom:8px;min-height:2.4em}
.second p{font-size:16.5px;line-height:1.5;margin-bottom:14px}
.second .more{margin-top:auto;font-family:var(--display);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember)}

.sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:30px}
.sec-card{display:flex;flex-direction:column;border-top:2px solid var(--ember);padding-top:14px;color:var(--ink);border-bottom:0}
.sec-card:hover{color:var(--ember)}
.sec-card svg{color:var(--ember);margin-bottom:10px}
.sec-card h3{font-size:22px;margin-bottom:7px}
.sec-card p{font-size:16.5px;line-height:1.45;margin-bottom:12px}
.sec-card .n{margin-top:auto;font-family:var(--display);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

.ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:32px}
.ladder div{border-top:2px solid var(--ember);padding-top:12px}
.ladder b{display:block;font-family:var(--display);font-weight:700;font-size:42px;line-height:.95;letter-spacing:-.03em}
.ladder span{display:block;font-family:var(--display);font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:3px 0 8px}
.ladder p{font-size:16.5px;line-height:1.45;margin:0}

/* ───────── homepage: three designations, side by side ───────── */
.desig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:28px}
.desig{display:flex;flex-direction:column;border-top:2px solid var(--ink);padding-top:0}
.desig img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;margin-top:12px}
.desig .d-head{display:flex;align-items:center;gap:10px;margin:12px 0 0}
.desig .d-head svg{flex:0 0 auto;color:var(--ember);margin-top:2px}
.desig h3{font-size:21px;line-height:1.12;margin:0}
.desig-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0 0}
.desig-stats div{border-top:2px solid var(--ember);padding-top:7px}
.desig-stats b{display:block;font-family:var(--display);font-weight:700;font-size:27px;line-height:.94;letter-spacing:-.03em}
.desig-stats span{display:block;font-size:13.5px;line-height:1.3;margin-top:4px;color:var(--ink-2)}
.desig h3 a{color:var(--ink);border-bottom:0}
.desig h3 a:hover{color:var(--ember)}
.desig dl{margin:12px 0 0;display:grid;gap:0}
.desig dl > div{display:grid;grid-template-columns:66px minmax(0,1fr);gap:12px;align-items:baseline;border-top:1px solid var(--rule);padding:9px 0}
.desig dl > div:last-child{border-bottom:1px solid var(--rule)}
.desig dt{font-family:var(--display);font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);line-height:1.35}
.desig dd{margin:0;font-size:15.5px;line-height:1.4}
.desig dd b{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--ember)}

/* ───────── homepage: matched pair of rooms ───────── */
.pair-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px}
.roomfig{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.roomfig img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;margin-top:14px}
.roomfig .r-label{font-family:var(--display);font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ember);margin-top:14px}
.roomfig figcaption{font-family:var(--display);font-size:19px;line-height:1.38;margin-top:7px;max-width:42ch}
.roomfig .r-more{margin-top:12px;font-size:16px}

/* ───────── map: locator + detail ───────── */
.map-pair{display:grid;grid-template-columns:352px minmax(0,1fr);gap:36px;align-items:start}
.map-locator{margin:0}
.map-locator svg{width:100%;height:auto;display:block;background:var(--paper)}
.map-locator .map-land{stroke-width:5}
.map-locator figcaption{font-family:var(--display);font-size:15px;line-height:1.4;margin-top:12px;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:10px}
/* the locator's labels are HTML, not SVG text: its viewBox scale is 0.155 in a
   fixed track, so any authored font-size would render at ~8px */
.loc-wrap{position:relative}
.loc-lbl{position:absolute;font-family:var(--display);font-size:15px;font-weight:600;line-height:1.2;color:var(--ink);white-space:nowrap}
.loc-dept{font-size:16px;color:#B6B4A4;letter-spacing:.06em;text-transform:uppercase}
.loc-n{top:1%;left:50%;transform:translateX(-42%)}
.loc-e{top:52%;right:1%}
.loc-w{top:43%;left:1%}
.loc-sw{bottom:2%;left:1%}
.loc-hs{top:23%;left:50%;transform:translateX(-46%)}
.loc-sv{top:76%;left:52%;transform:translateX(-46%)}
.loc-box{fill:none;stroke:var(--ember);stroke-width:9}
.map-dept{font-family:var(--display);font-size:13px;font-weight:600;fill:var(--mute);letter-spacing:1.3px;stroke:var(--paper);stroke-width:3.5;paint-order:stroke fill}

/* ───────── map key ───────── */
.map-key{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:12px 34px;font-size:16px;line-height:1.45}
.map-key li{display:flex;gap:11px;align-items:flex-start}
.map-key .k-area{flex:0 0 auto;width:26px;height:18px;margin-top:3px;background:var(--paper-2);border:2px solid var(--ink)}
.map-key .k-pin{flex:0 0 auto;width:14px;height:14px;margin:5px 6px 0 6px;border-radius:50%;background:var(--ember)}

/* ───────── colophon of supporters (homepage only) ───────── */
.colophon{background:var(--ink);color:var(--paper);padding:44px var(--pad) 52px;border-bottom:1px solid var(--ink)}
.colophon .kicker{color:var(--ember-pale)}
.colophon-lede{font-family:var(--display);font-size:20px;line-height:1.45;max-width:56ch;margin:0 0 30px;color:var(--paper)}
.sponsors{display:grid;grid-template-columns:repeat(auto-fit,minmax(296px,1fr));gap:0 44px}
.sponsor{display:flex;flex-direction:column;gap:13px;max-width:560px;padding:22px 0;border-top:1px solid rgba(239,233,218,.28);border-bottom:0;color:var(--paper)}
.sponsor:hover{color:var(--ember-pale)}
.sponsor img{width:264px;height:48px!important;max-width:100%;object-fit:contain;object-position:left center;background:#22231C;padding:6px 10px}
.sponsor-name{font-family:var(--display);font-size:18px;font-weight:600;line-height:1.25}
.sponsor-blurb{font-size:15.5px;line-height:1.45;color:var(--alp-pale);max-width:34ch}

/* ───────── footer ───────── */
.site-foot{background:var(--alp);color:var(--paper);padding:0 var(--pad) 44px}
.site-foot a{color:var(--alp-pale);border-bottom:0}
.site-foot a:hover{color:#fff}
.foot-mark{display:block;width:200px;height:auto;color:var(--ember-pale);margin:0 0 16px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:start;padding:40px 0 30px;border-bottom:1px solid rgba(239,233,218,.28)}
.foot-brand .f-name{display:block;font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:-.025em;color:var(--paper)}
.site-foot p{margin:10px 0 0;font-family:var(--display);font-size:18px;line-height:1.4;max-width:46ch;color:var(--paper)}
.foot-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:24px}
.foot-nums div{border-top:2px solid var(--ember);padding-top:9px}
.foot-nums b{display:block;font-family:var(--display);font-weight:700;font-size:32px;line-height:.95;letter-spacing:-.03em;color:var(--paper)}
.foot-nums span{display:block;font-size:13.5px;line-height:1.35;margin-top:5px;color:var(--alp-pale)}
.foot-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:28px 34px;padding:30px 0}
.foot-nav .fn-head{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:17px;color:var(--paper);margin-bottom:9px}
.foot-nav .fn-head svg{flex:0 0 auto;color:var(--ember-pale)}
.foot-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:15.5px;line-height:1.3;border-left:1px solid rgba(239,233,218,.28);padding-left:11px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:14px 44px;justify-content:space-between;align-items:baseline;padding-top:22px;border-top:1px solid rgba(239,233,218,.28)}
.f-links{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:16px;margin:0;padding:0;list-style:none;font-family:var(--display)}
.foot-sig{font-family:var(--display);font-size:16px;color:var(--ember-pale)}

.pagenav{display:flex;flex-wrap:wrap;gap:10px 26px;font-family:var(--display);font-size:15px;letter-spacing:.08em;text-transform:uppercase}

/* ───────── responsive ───────── */
@media (max-width:1080px){
  :root{--pad:34px}
  .shell{display:block}
  .rail{display:none}
  .railbar{display:block;position:sticky;top:0;z-index:20;background:var(--alp);color:var(--paper);font-family:var(--display)}
  .railbar a{color:var(--paper);border-bottom:0}
  .railbar summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--pad);cursor:pointer}
  .railbar summary::-webkit-details-marker{display:none}
  .railbar .rb-name{font-size:21px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
  .railbar .rb-name svg{color:var(--ember-pale)}
  .railbar .rb-toggle{font-size:14px;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(239,233,218,.5);padding:6px 12px}
  .railbar .rb-sheet{padding:4px var(--pad) 26px;border-top:1px solid rgba(239,233,218,.3);display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px 30px}
  .railbar details[open] .rb-toggle,.railbar[open] .rb-toggle{background:var(--ember);border-color:var(--ember);color:var(--ink)}
  .railbar .rail-sub a{color:var(--alp-pale)}
  .marg{grid-template-columns:1fr;gap:14px}
  .fig-num{text-align:left;display:flex;align-items:baseline;gap:12px}
  .fig-num b{font-size:38px}
  .fig-num span{margin-top:0}
  .rulemark{display:none}
  .lede-feature{grid-template-columns:1fr;gap:26px}
  .fig--ruled{grid-template-columns:1fr;gap:12px}
  .fig--inset{float:none;width:auto;margin:24px 0}
  .fig--panel{width:100%}
  .map-pair{grid-template-columns:1fr;gap:26px}
  .map-locator{max-width:352px}
  .cat-list a{grid-template-columns:1fr;gap:7px}
  .datatable tbody th,.versus tbody th{width:34%}
  .sponsors{gap:0 32px}
}
@media (max-width:640px){
  /* constant-size labels need a minimum geometry: below this the map scrolls
     rather than shrinking until its own labels collide */
  .map-slot{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .m-wrap{min-width:520px}
  .map-figure figcaption{margin-top:10px}
}
@media (max-width:480px){
  .m-grat{display:none}
}
@media (max-width:620px){
  :root{--pad:20px}
  body{font-size:17px}
  .band{padding:36px var(--pad)}
  .article-body p{font-size:17.5px}
  .fig--bleed figcaption{flex-direction:column;gap:4px}
  .fig--bleed .credit{white-space:normal}
  .versus,.datatable{font-size:15.5px}
  .versus thead th{font-size:16px}
  .statrow{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:18px}
  .timeline li{grid-template-columns:1fr;gap:4px}
  .sponsors{grid-template-columns:1fr}
  .sponsor img{width:100%;max-width:272px;height:46px!important}
  .foot-top{grid-template-columns:1fr;gap:26px}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}
@media print{.rail,.railbar,.colophon{display:none}.shell{display:block}}


/* ═════════ GROUND: BASALT ═════════
   Chosen over the bone: this domain's largest asset is twenty-two real photographs,
   and on a dark ground they carry the page instead of sitting on it. Ember and Alp
   both hold contrast against it, so the palette's jobs are unchanged. */
:root{--paper:#181915;--ink:#EFE9DA;--paper-2:#22231D;--rule:#3B3C33;--mute:#8F8E80;--ink-2:#CFC9B8;--alp-pale:#B8C6E4;--ember-text:#F0844E}
body{background:var(--paper)}
.band--ink{background:#22231D;color:var(--ink);border-bottom-color:#3B3C33}
.colophon{background:#0F100C}
.band--ember{color:#181915}
.band--ember .fig-num b{color:#181915}
.blockquote{background:#22231D}
.callout{background:#22231D;color:var(--ink);border-top:2px solid var(--ember)}
.fig--panel{background:var(--alp)}
.article-figure.fig--ruled .fig-wrap{border-color:#5A5B50}
.map-land{fill:#26271F;stroke:#8F8E80}
/* SVG labels: a stroke without paint-order:stroke over-paints the glyph.
   Text carries no stroke unless it needs a halo, and the halo is the map's
   own land fill (#26271F) rather than the page ground. Paths keep theirs. */
.map-figure text,.map-locator text{stroke:none}
.m-dept{color:#C6C3B1}
.m-grat{color:#B6B4A4}
.map-scale,.map-north{stroke:#EFE9DA}
.map-locator svg{background:#22231D}
.profile-card{background:#22231D}
.org-card{border-color:#5A5B50}
.org-card:hover{background:var(--ember);color:#181915}
.map-key .k-area{background:#26271F;border-color:#8F8E80}
input,textarea{background:#22231D!important;color:#EFE9DA!important;border-color:#5A5B50!important}
.desig-stats b,.ladder b,.stat-num,.foot-nums b{color:var(--ink)}
/* ember at text size needs the lighter tint: #C2450E is 3.49:1 on this ground */
.kicker,.kicker a,.kicker svg,.t-when,.second .more,.sec-card .n,.foot-sig,.pagenav a,.desig-stats div{color:var(--ember-text)}
/* descendant-scoped ember rules need matching specificity to be overridden */
.roomfig .r-label,.desig .d-head svg,.desig dd b,.versus .big,.fig-num b,.article .kicker,.article .kicker a{color:var(--ember-text)}
.map-key .k-pin{background:var(--ember)}
/* the unit label inherited near-black after the ground swap; the .7 knock-back
   then pushed it under AA on the ember band */
/* #181915 on #C2450E is only 4.0:1 at 13.5px — the label goes light instead */
.band--ember .fig-num span{color:#FFF6EE;opacity:1}
.band--ink .fig-num span{color:var(--ink);opacity:.75}
.notes-block > h3{color:var(--ink-2)}
.credit{color:#A9A899}
.sponsor-blurb{color:#B8C6E4}
/* --paper is now the dark ground, so everything that used it as a LIGHT
   foreground on the rail, footer, panels and colophon has to take --ink */
.rail,.railbar,.site-foot,.colophon,.fig--panel,.fig--panel figcaption{color:var(--ink)}
.brand-name,.rail-sec > a,.railbar a,.railbar .rb-name,.rail-sub a.is-here,.rail a:hover{color:var(--ink)}
.railbar .rb-toggle{border-color:rgba(239,233,218,.5)}
.foot-brand .f-name,.site-foot p,.foot-nav .fn-head{color:var(--ink)}
.colophon-lede,.sponsor,.sponsor-name{color:var(--ink)}
.colophon .kicker{color:var(--ember-pale)}
/* on the alp blue, #F0A882 lands at 4.27 — this tint clears 4.5 */
.foot-sig,.brand-sig,.rail-sec.is-here > a,.brand-name em,.rail-sec > a svg,.foot-nav .fn-head svg{color:#F6BEA0}
.brand-name i,.rail-sub a,.rail-foot a,.foot-nav ul a,.f-links a,.foot-nums span{color:var(--alp-pale)}
.rail-sub a:hover,.foot-nav ul a:hover,.f-links a:hover,.rail-foot a:hover{color:#fff}
::selection{background:var(--ember);color:#181915}
/* links: the dark ground needs the pale blue, not the panel blue */
a{color:#9DB2DD;border-bottom-color:rgba(157,178,221,.38)}
a:hover{color:var(--ember);border-bottom-color:var(--ember)}
.lede-feature h2 a,.second h3 a,.desig h3 a,.cat-list a,.further-grid a,.related-links a,.sec-card,.org-card,.map-pin text,.archive-t a{color:var(--ink);border-bottom:0}
.lede-feature h2 a:hover,.second h3 a:hover,.cat-list a:hover,.further-grid a:hover,.related-links a:hover{color:var(--ember)}
.band--ember a{color:#181915;border-bottom-color:rgba(24,25,21,.45)}
.band--ember a:hover{color:#181915}
.entity-ref{color:#9DB2DD}
.datatable a,.map-figure figcaption a,.map-key a{color:#9DB2DD}
.note a,.deck a,.prose a{color:#9DB2DD}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}

/* sp-mark-fit: width:100% + padding must not overflow the tile — but the declared
   HEIGHT is the mark's size and border-box alone steals the vertical padding from it.
   earlychristianireland declares height:66px with 10px top/bottom padding: border-box
   left a 46px mark and the operator read it as 'logos too small'. Keep the horizontal
   inset, drop the vertical padding, so the mark occupies the full height Design set. */
.sponsor img,.sponsor-box img,.sp-logo img{box-sizing:border-box!important;padding-top:0!important;padding-bottom:0!important}

/* 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-domain-override: per-domain, from work/css_override.css */
/* Breathing space inside the supporter logo panel.
   Measured before/after: the panel was 264x48 with `padding: 0 10px`, so the wordmark sat hard
   against the panel's top and bottom edge.

   ⚠️ box-sizing:content-box is the whole trick, and the reason is worth keeping. Adding padding
   under the default border-box keeps the OUTER box at 48px and eats the space out of the artwork —
   measured, that halved the logo to 232x24. content-box makes the declared size the CONTENT size,
   so the padding grows the panel OUTWARD and the artwork keeps its size:
       before  panel 264x48   art 244x48
       after   panel 296x72   art 264x48   (artwork larger, not smaller)
   This is the operator's rule from batch AI: add padding inside the grid, never shrink the grid. */
.sponsor[data-partner] img{
  box-sizing: content-box !important;
  padding: 12px 16px !important;
}

/* op-no-mark-ground: operator asked for the extra background behind the logos to go. Design set
   .sponsor img{background:#22231C} — a plate one step off the tile, which reads as a box around
   every wordmark. Fill only; the geometry, inset and centring all stay. */
.sponsor img,.sponsor-box img,.sp-logo img{background:transparent!important}

/* op-mobile-figure: the overflowing element is figure.map-figure at 520px — OUR OWN injected map
   kit, which carries a fixed width. Capped to its column at phone width; the SVG inside scales
   with it. */
@media (max-width:640px){
  .map-figure{max-width:100%!important;width:100%!important}
  .map-figure svg{max-width:100%!important;height:auto!important}
}
/* ⚠️ THE PREVIOUS BLOCK DID NOTHING ON ITS OWN. A flex or grid item defaults to min-width:auto,
   which means it cannot shrink below its content's min-content width — so the scroll container
   kept being stretched to the child's own min-width (640px / 1400px / 560px) and overflow-x:auto
   had nothing to scroll. min-width:0 has to travel up the chain from the scroller to its
   formatting context, which is what actually lets the container narrow to the column. */
@media (max-width:640px){
  .plan-scroll,.alm-scroll,.waterband__fig,.map-figure,pre.tok,
  .plan-scroll *,.alm-scroll > *,
  figure,section,article,main,div[class*="scroll"],div[class*="pair"],div[class*="band"]{min-width:0!important}
  img,svg,table,pre,code,figure{max-width:100%!important}
}

/* op-overflow-mark-panel: the rule above is deliberate — content-box so the 12/16px padding
   grows the mark's panel OUTWARD and the artwork keeps its size (operator's rule from batch
   AI: add padding inside the grid, never shrink the grid). At phone width that arithmetic runs
   off the page: measured at 360, declared width 320px + 32px of padding = a 352px panel inside
   a 320px tile, so 11 tiles each pushed the page 12px over.
   Below 640 the declared width is reduced by exactly the padding, so the panel lands at 320px
   and the intent survives — the padding still grows outward from the artwork, there is just
   less width to give it. Desktop keeps the full-size panel untouched. */
@media (max-width:640px){
  .sponsor[data-partner] img{width:calc(100% - 32px)!important}
}

/* op-overflow-datatable: the register table on archive.html measured 67px wider than a 320px
   page. Rather than turn it into a sideways scroller (which hides columns behind a swipe and
   loses the header row as you scroll), the columns are given a fixed layout at phone width and
   the cells are allowed to break — the table then fits and stays readable top to bottom.
   Tested live at 320 before writing: +67 -> 0. Desktop layout untouched. */
@media (max-width:640px){
  .datatable{table-layout:fixed;width:100%}
  .datatable td,.datatable th{overflow-wrap:anywhere}
}

/* op-footer-compact: the footer printed 19 rows for 21 link(s) in
   5 list(s) — 1446px at 390, 11% 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 1446 -> 1214px (16% 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(5px,3.19vw,46px)!important;row-gap:5px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

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

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

/* op-article-width: the article column was capped at 814px (93 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 78ch (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1440 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1440px){
  div.article-body{max-width:min(890px, 100%)!important}
}
@media (min-width:1600px){
  div.article-body{max-width:min(clamp(890px, 61.806vw, 1068px), 100%)!important}
  div.article-body > :is(p:not([class])){font-size:clamp(18.5px,1.2847vw,22.2px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (814px) and was left behind when the text went to 890px. 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:1440px){
  header.prose--wide p.lead{max-width:min(869px, 100%)!important}
}
@media (min-width:1600px){
  header.prose--wide p.lead{max-width:min(calc(clamp(869px, 60.347vw, 1043px) + 0px), 100%)!important}
}
/* op-article-head:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.05; margin: 0px;}
.sec-card h2:where(.rt-h3){font-size: 22px; margin-bottom: 7px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.desig-grid > article.desig > img,
  div.pair-grid > figure.roomfig > img){height:auto}
/* op-img-dims:end */
@media (min-width:1101px) and (max-width:1299px){.article-figure.fig--panel{width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}}
@media (min-width:1060px) and (max-width:1339px){.article-figure.fig--panel{width:auto!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}}