/* mrcautray.com — Autray. Ground, ink, hematite, cobalt, gold. */
:root{
  --paper:#F1EDE2;
  --paper-2:#E6E1D4;
  --ink:#16231D;
  --accent:#A8321F;
  --second:#1B3F8B;
  --gold:#C98A12;
  --quiet:#5D6B62;
  --hair:rgba(22,35,29,.20);
  --hair-2:rgba(22,35,29,.40);
  --display:"Petrona",Georgia,"Times New Roman",serif;
  --data:"Chivo",-apple-system,"Segoe UI",sans-serif;
  --s1:clamp(15px,1.05vw,16px);
  --s2:clamp(17px,1.2vw,19px);
  --body:clamp(18px,1.25vw,20px);
  --h3:clamp(21px,1.7vw,26px);
  --h2:clamp(26px,2.3vw,34px);
  --h1:clamp(38px,5.2vw,74px);
  --mast:clamp(46px,8vw,112px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;max-width:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--display);font-size:var(--body);line-height:1.66;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--second);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-weight:700;line-height:1.1;margin:0;letter-spacing:-.02em}
p{margin:0 0 1.15em;text-wrap:pretty}
hr{border:0;border-top:1px solid var(--hair);margin:2.4rem 0}
.icon{width:1.5em;height:1.5em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.28em}
.icon-lg{width:2.1em;height:2.1em}
.wrap{max-width:1300px;margin:0 auto;padding:0 34px}
.measure{max-width:70ch;margin:0 auto;padding:0 34px}
.kicker{font-family:var(--data);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);display:flex;align-items:center;gap:9px}
.rule-gold{height:2px;background:var(--gold);border:0;margin:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:9}

/* ---------- masthead + nav ---------- */
.head-strip{background:var(--ink);color:#8FA098}
.head-strip .wrap{display:flex;flex-wrap:wrap;gap:8px 30px;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px}
.hs-claim{font-family:var(--data);font-size:12px;letter-spacing:.04em;color:#8FA098}
.hs-links{display:flex;flex-wrap:wrap;gap:0 22px}
.hs-links a{font-family:var(--data);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#C8D2CB}
.hs-links a:hover{color:var(--gold);text-decoration:none}
.hs-links a.here{color:var(--gold);box-shadow:0 2px 0 var(--gold)}
.site-head{border-bottom:3px solid var(--ink);background:var(--paper)}
.mast{display:flex;align-items:flex-start;gap:28px;padding:26px 0 20px}
.mast-mark{flex:none;width:54px;height:126px;stroke:currentColor;fill:none;color:var(--ink)}
.mast-words{flex:1;min-width:0}
.mast-title{font-family:var(--display);font-weight:800;font-size:var(--mast);line-height:.82;letter-spacing:-.045em;color:var(--ink);display:block}
.mast-title:hover{color:var(--ink);text-decoration:none}
.mast-domain{font-family:var(--data);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--quiet);margin-top:14px}
.mast-sig{font-family:var(--data);font-size:12.5px;line-height:1.85;letter-spacing:.11em;text-transform:uppercase;color:var(--quiet);text-align:right;flex:none;max-width:270px;padding-top:6px}
.mast-sig b{color:var(--accent);font-weight:700}
.navrow{display:flex;flex-wrap:wrap;align-items:stretch;border-top:1px solid var(--hair);border-bottom:2px solid var(--ink)}
.navrow a{display:flex;align-items:center;justify-content:center;gap:14px;padding:18px 16px;color:var(--ink);flex:1 1 0;min-width:0;border-left:1px solid var(--hair)}
.navrow a:first-child{border-left:0}
.navrow a:hover{color:var(--accent);text-decoration:none}
.navrow .navicon{width:40px;height:40px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.navrow .lbl{display:flex;flex-direction:column;gap:5px}
.navrow .n{font-family:var(--data);font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--gold);line-height:1}
.navrow .nm{font-family:var(--display);font-size:clamp(19px,1.7vw,24px);font-weight:700;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.navrow a.here{color:var(--accent)}
.navrow a.here .n{color:var(--accent)}
.navrow a.here .nm{box-shadow:0 3px 0 var(--accent)}
.head-utils{display:flex;flex-wrap:wrap;gap:0 26px;align-items:center;font-family:var(--data);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:0 0 16px}
.head-utils a{color:var(--quiet)}
.head-utils a:hover{color:var(--accent)}
.head-utils .here{color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:3px}

/* ---------- bands ---------- */
.band{padding:74px 0}
.band-tight{padding:44px 0}
.band-ink{background:var(--ink);color:var(--paper)}
.band-ink a{color:var(--gold)}
.band-cobalt{background:var(--second);color:var(--paper)}
.band-cobalt a{color:#DCE4F6}
.band-hematite{background:var(--accent);color:#FBF1E9}
.band-hematite a{color:#FBF1E9}
.band-ink .kicker,.band-cobalt .kicker,.band-hematite .kicker{color:rgba(241,237,226,.72)}
.band-head{display:flex;align-items:baseline;gap:20px;margin-bottom:26px}
.prose .break-out.band .band-head{margin-bottom:32px}
.prose .break-out.band-tight{padding:56px 0 60px}
.prose .break-out.band-tight .chart{margin:0}
/* one closing block, not three */
.close{border-top:2px solid var(--ink);margin-top:12px}
.close-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:0}
.close-col{padding:34px 40px 38px}
.close-col + .close-col{border-left:1px solid var(--hair);background:var(--paper-2)}
.close-col h2{font-size:var(--h3);margin:0 0 6px}
.close-col .kicker{display:block;margin-bottom:22px;color:var(--quiet)}
.close-col .kicker a{color:var(--accent)}
@media (max-width:760px){.close-grid{grid-template-columns:1fr}.close-col + .close-col{border-left:0;border-top:1px solid var(--hair)}.close-col{padding:28px 20px 30px}}
.band-head h2{font-size:var(--h2)}
.band-head .fill{flex:1;height:2px;background:var(--gold);opacity:.85}
.quiet-line{font-size:clamp(24px,2.7vw,38px);line-height:1.34;font-weight:400;max-width:26ch;letter-spacing:-.015em}
.quiet-line.long{max-width:44ch}

/* ---------- lead ---------- */
.lead-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:0}
.lead-media{position:relative}
.lead-media img{width:100%;height:100%;min-height:420px;object-fit:cover}
.lead-side{background:var(--ink);color:var(--paper);padding:44px 40px;display:flex;flex-direction:column;justify-content:flex-end}
.lead-side h1{font-size:clamp(32px,3.4vw,50px);line-height:1.03;margin-bottom:16px}
.lead-side h1 a{color:var(--paper)}
.lead-side h1 a:hover{color:var(--gold);text-decoration:none}
.lead-side .dek{font-size:var(--s2);line-height:1.55;color:#C8D2CB;margin:0 0 20px}
.lead-num{display:flex;align-items:flex-start;gap:16px;border-top:1px solid rgba(241,237,226,.28);padding-top:18px}
.lead-num b{font-family:var(--display);font-weight:800;font-size:66px;line-height:.8;color:var(--gold);letter-spacing:-.04em}
.lead-num span{font-family:var(--data);font-size:13.5px;line-height:1.6;color:#A9B7AE}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px}
.card{display:flex;flex-direction:column;background:var(--paper);border-top:2px solid var(--ink);padding-top:0}
.card-media{margin:0 0 16px;border:1px solid var(--hair-2);padding:10px;background:var(--paper-2)}
.card-media img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card h3{font-size:var(--h3);margin:14px 0 8px;min-height:2.2em}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--accent)}
.card p{font-size:var(--s2);color:#33413A;margin-bottom:14px}
.card .card-meta{margin-top:auto;font-family:var(--data);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--quiet);display:flex;align-items:center;gap:8px;padding-top:6px;border-top:1px solid var(--hair)}

/* section index — three across, icon-led */
.sec-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair-2)}
.sec-cell{background:var(--paper);padding:32px 30px 34px;display:flex;flex-direction:column;color:var(--ink)}
.sec-cell:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.sec-cell:hover .n{color:var(--gold)}
.sec-cell:hover p{color:#C3CEC6}
.sec-cell .bigicon{width:68px;height:68px;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:20px}
.sec-cell .sn{font-family:var(--data);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.sec-cell h3{font-size:clamp(24px,2.1vw,31px);margin-bottom:10px}
.sec-cell p{font-size:var(--s2);color:#3A4841;margin-bottom:18px}
.sec-cell .n{margin-top:auto;font-family:var(--data);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);font-weight:700}
.sec-cell.alt{background:var(--paper-2)}

/* weighted trio */
.trio{display:grid;grid-template-columns:1.15fr 1fr;gap:46px;align-items:start}
.trio .fig-bracket img{aspect-ratio:auto;height:clamp(220px,22vw,290px)}
.trio .fig-bracket figcaption{padding:12px 4px 0;font-size:14px}
.trio h3{font-size:clamp(23px,2vw,28px) !important}
.trio .k{font-family:var(--data);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);display:flex;align-items:center;gap:8px}
.trio-side{display:flex;flex-direction:column}
.mini{display:flex;gap:20px;padding:24px 0;border-top:1px solid var(--hair)}
.mini:first-child{border-top:2px solid var(--ink);padding-top:20px}
.mini img{width:112px;height:86px;object-fit:cover;flex:none;border:1px solid var(--hair-2)}
.mini h3{font-size:20px !important;margin:7px 0 6px}
.mini p{font-size:15.5px;line-height:1.5;color:#33413A;margin:0}

/* the column: the diagram and the data are one object */
.colstack{border:2px solid rgba(241,237,226,.85);position:relative}
.cs-row{display:grid;grid-template-columns:132px 216px 1fr 46px;align-items:center;border-bottom:1px solid rgba(241,237,226,.45);color:var(--paper)}
.cs-row:last-child{border-bottom:0}
.cs-row:hover{background:rgba(0,0,0,.22);text-decoration:none;color:var(--paper)}
.cs-pat{align-self:stretch;border-right:1px solid rgba(241,237,226,.55);min-height:112px;position:relative;overflow:hidden}
.cs-pat svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cs-age{display:flex;flex-direction:column;gap:6px;font-family:var(--display);font-weight:800;font-size:clamp(28px,2.7vw,44px);color:var(--gold);letter-spacing:-.035em;line-height:.92;padding:20px 26px 20px 22px}
.cs-age em{font-family:var(--data);font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#AFC0E4}
.cs-what{padding:20px 24px 20px 0}
.cs-what b{display:block;font-family:var(--display);font-size:clamp(19px,1.6vw,23px);font-weight:700;margin-bottom:5px;letter-spacing:-.015em}
.cs-what span{font-family:var(--data);font-size:14.5px;line-height:1.5;color:#C6D2EC;display:block}
.cs-go{font-family:var(--data);font-size:20px;color:#AFC0E4;text-align:center}
.cs-row:hover .cs-go{color:var(--gold)}

/* fine print */
.disclaimer{padding:30px 0 34px;background:var(--paper-2);border-top:1px solid var(--hair-2)}
.disc-head{display:flex;align-items:center;gap:16px;font-family:var(--data);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--quiet);margin-bottom:6px}
.disc-head .fill{flex:1;height:1px;background:var(--hair-2)}
.disc-head a{font-weight:700;letter-spacing:.14em}
.disc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 36px}
.disc-grid p{font-family:var(--data);font-size:12.5px;line-height:1.6;color:var(--quiet);margin:0;padding:14px 0 0;border-top:1px solid var(--hair-2)}
.disc-grid b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:5px}


/* ---------- figures: one system, four treatments ---------- */
figure{margin:0}
figcaption{font-family:var(--data);font-size:15px;line-height:1.55;color:#33413A}
.fig-kicker{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.fig-credit{display:block;font-size:12px;letter-spacing:.05em;color:#7D8B83;margin-top:9px}
/* A · plate: wide image, caption on a paper plate stepping over it */
.fig-plate{position:relative;margin:0 0 8px}
.fig-plate img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-plate figcaption{background:var(--paper);border-top:3px solid var(--gold);padding:20px 24px;max-width:min(560px,86%);margin:-64px 0 0 34px;position:relative}
/* B · bracketed plate: mat + hairline + drawn corners */
.fig-bracket{border:1px solid var(--ink);padding:12px;background:var(--paper-2);position:relative}
.fig-bracket img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-bracket figcaption{padding:14px 4px 2px}
.fig-bracket .corner{position:absolute;width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:1.6}
.fig-bracket .c1{top:-1px;left:-1px}
.fig-bracket .c2{top:-1px;right:-1px;transform:rotate(90deg)}
.fig-bracket .c3{bottom:-1px;right:-1px;transform:rotate(180deg)}
.fig-bracket .c4{bottom:-1px;left:-1px;transform:rotate(270deg)}
/* C · offset: image breaks the measure, caption hangs in the margin */
.fig-offset{display:grid;grid-template-columns:1fr 250px;gap:26px;align-items:start}
.fig-offset img{width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:3px solid var(--ink)}
.fig-offset figcaption{border-top:2px solid var(--gold);padding-top:12px;font-size:14.5px}
/* D · inset: small, in the column, prose beside */
.fig-inset{float:right;width:min(330px,44%);margin:6px 0 22px 30px;background:var(--paper-2);border:1px solid var(--hair-2);padding:10px}
.fig-inset img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fig-inset figcaption{padding:12px 4px 2px;font-size:14px}
.article-figure{margin:0 0 8px}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--ink)}
.article-figure figcaption{border-top:2px solid var(--gold);padding-top:12px;margin-top:12px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.gallery figure{background:var(--paper-2);border:1px solid var(--hair-2);padding:8px}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{padding:10px 2px 0;font-size:13.5px}

/* ---------- article ---------- */
.art-hero{display:grid;grid-template-columns:1.3fr 1fr;align-items:stretch}
.art-hero img{width:100%;height:100%;min-height:clamp(360px,42vw,540px);object-fit:cover;display:block}
.hero-panel{background:var(--ink);color:var(--paper);padding:clamp(28px,3vw,54px);display:flex;flex-direction:column;justify-content:flex-end;gap:18px}
.hero-panel .kicker{color:var(--gold)}
.hero-panel .kicker a{display:flex;align-items:center;gap:9px;color:var(--gold)}
.hero-panel h1{font-size:clamp(34px,3.9vw,58px);line-height:1.02;color:var(--paper);margin:0}
.hero-panel .dek{font-family:var(--display);font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:#C8D2CB;margin:0}
.hero-panel .loc{display:flex;flex-wrap:wrap;gap:7px 24px;font-family:var(--data);font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#8FA098;border-top:1px solid rgba(241,237,226,.28);padding-top:16px}
.hero-panel .loc .co{color:var(--gold)}
.hero-strip{background:var(--ink);border-top:1px solid rgba(241,237,226,.16)}
.hero-strip .fig-kicker{margin:0;color:var(--gold)}
.hero-strip .cap-text{font-family:var(--data);font-size:14px;line-height:1.5;color:#C3CEC6}
.hero-strip .fig-credit{margin:0;color:#6F8079;text-align:right}
.art-foot{padding-bottom:10px}
.prose{font-size:var(--body);max-width:none;padding:0;counter-reset:sec}
.prose > p,.prose > h2,.prose > h3,.prose > ul,.prose > ol,.prose > table,.prose > blockquote,.prose > aside,.prose > .note,.prose > figure{max-width:calc(70ch + 68px);margin-left:auto;margin-right:auto;padding-left:34px;padding-right:34px}
.prose{padding-top:46px}
.prose > p:first-of-type{margin-top:0}
.prose > p.first::first-letter{font-family:var(--display);font-weight:800;font-size:4.4em;line-height:.8;float:left;padding:8px 14px 0 0;color:var(--accent)}
.prose > h2{counter-increment:sec;position:relative;margin:2.3em auto .7em}
.prose > h2::after{content:"";display:block;width:64px;height:3px;background:var(--gold);margin-top:16px}
@media (min-width:1180px){
  .prose > h2::before{content:counter(sec,decimal-leading-zero);position:absolute;left:-3.4em;top:.5em;font-family:var(--data);font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--gold)}
}
/* figure B — image and caption panel, equal height, no dead space */
.fig-pair{display:grid;grid-template-columns:2.15fr 1fr;align-items:stretch;margin:2.6em auto}
.prose > .fig-pair{max-width:calc(92ch + 68px);padding-left:34px;padding-right:34px}
.fig-pair img{width:100%;height:100%;min-height:clamp(230px,24vw,310px);max-height:340px;object-fit:cover;display:block}
.fig-pair figcaption{background:var(--paper-2);border-top:3px solid var(--gold);padding:22px 24px;display:flex;flex-direction:column;justify-content:center;gap:10px;font-size:14.5px}
/* figure C — full-bleed with a caption strip */
.fig-band{margin:3em 0}
.fig-band img{width:100%;height:clamp(300px,40vw,540px);object-fit:cover}
.fig-band figcaption{border-top:2px solid var(--ink);padding-top:0}
.fig-band .fc-in{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,260px);gap:8px 26px;align-items:baseline;max-width:1300px;margin:0 auto;padding:14px 34px 0}
.hero-strip .wrap{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,260px);gap:8px 24px;align-items:baseline;padding-top:13px;padding-bottom:15px}
.fig-band .fig-kicker,.fig-band .fig-credit{margin:0}
.fig-band .fig-credit{text-align:right}
/* figure D — flush to the measure */
.fig-flush{margin:2.6em auto}
.fig-flush img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.fig-flush figcaption{border-top:2px solid var(--gold);padding-top:13px;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.cap-text{display:block}
.cap-src{font-weight:700;color:var(--accent);border-bottom:1px solid rgba(158,42,43,.35)}
.fig-band .cap-src,.hero-strip .cap-src{color:var(--gold);border-bottom-color:rgba(201,138,18,.45)}
/* the key figure, called out */
.num-band{background:var(--ink);color:var(--paper);padding:62px 0 66px;margin:3.2em 0}
.num-band .wrap{display:flex;flex-wrap:wrap;gap:20px 52px;align-items:baseline}
.num-band b{font-family:var(--display);font-weight:800;font-size:clamp(48px,6.5vw,96px);line-height:.84;letter-spacing:-.04em;color:var(--gold);display:flex;align-items:baseline;gap:14px}
.num-band b em{font-family:var(--data);font-style:normal;font-size:clamp(13px,1.1vw,16px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#8FA098}
.num-band span{font-family:var(--data);font-size:15px;line-height:1.65;max-width:46ch;color:#C3CEC6}
.num-band a{color:var(--gold)}
.prose > .fig-offset{max-width:calc(96ch + 68px)}
.prose > .break-out{max-width:none;padding-left:0;padding-right:0}
.prose h2{font-size:var(--h2);margin:2.1em auto .7em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--h3);margin:1.8em auto .5em}
.prose > figure{margin:2.2em auto}
.full{width:100%;padding:0}
.break-out{margin:2.6em 0;width:100%}
.break-out > *{max-width:1300px;margin:0 auto;padding:0 34px}

/* ---------- text components ---------- */
.lead{font-size:clamp(20px,1.7vw,25px);line-height:1.48;color:#2C3A33}
.pullquote{margin:2.2em 0;padding:0 0 0 26px;border-left:3px solid var(--accent)}
.pullquote p{font-size:clamp(22px,2vw,29px);line-height:1.32;font-weight:600;letter-spacing:-.02em;margin:0}
.blockquote{margin:2.2em 0;background:var(--paper-2);border-top:2px solid var(--ink);padding:24px 26px}
.blockquote p{margin:0 0 .6em}
.blockquote cite{font-family:var(--data);font-size:13.5px;font-style:normal;letter-spacing:.08em;color:var(--quiet)}
.callout{margin:2.2em 0;background:var(--ink);color:var(--paper);padding:26px 28px;border-top:4px solid var(--gold)}
.callout p{margin:0;font-size:var(--s2);line-height:1.55}
.callout a{color:var(--gold)}
.note{font-family:var(--data);font-size:15.5px;line-height:1.6;color:#33413A;background:var(--paper-2);border-left:3px solid var(--gold);padding:14px 18px;margin:1.6em 0}

/* data blocks */
.statrow{display:flex;flex-wrap:wrap;gap:1px;background:rgba(241,237,226,.28)}
.statblock{flex:1 1 210px;background:var(--ink);padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px}
.stat-num{font-family:var(--display);font-weight:800;font-size:clamp(30px,3vw,46px);line-height:.92;color:var(--gold);letter-spacing:-.035em;display:flex;flex-direction:column;gap:5px}
.stat-num em{font-family:var(--data);font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#AFC0E4}
.stat-num.small{font-size:clamp(19px,1.7vw,23px);line-height:1.2;letter-spacing:-.015em}
.stat-label{font-family:var(--data);font-size:14px;line-height:1.5;color:#C3CEC6}
.datatable,.versus{width:100%;border-collapse:collapse;font-family:var(--data);font-size:15px}
.datatable caption,.versus caption{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);padding-bottom:10px}
.datatable th,.versus th{text-align:left;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);border-bottom:2px solid var(--ink);padding:9px 12px 9px 0}
.datatable td,.versus td{border-bottom:1px solid var(--hair);padding:11px 12px 11px 0;vertical-align:top}
.datatable tbody tr:last-child td,.versus tbody tr:last-child td{border-bottom:2px solid var(--ink)}
.versus td:first-child{font-family:var(--display);font-size:18px;font-weight:600;width:34%}
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 40px;list-style:none;margin:0;padding:0}
.terms li{border-top:1px solid var(--hair);padding:12px 0}
.terms b{display:block;font-family:var(--data);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.terms span{font-size:var(--s2);line-height:1.55;color:#33413A}
.band-ink .terms li,.band-cobalt .terms li{border-top-color:rgba(241,237,226,.3)}
.band-ink .terms b,.band-cobalt .terms b{color:var(--gold)}
.band-ink .terms span,.band-cobalt .terms span{color:#CBD5CD}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:230px 1fr;gap:24px;border-top:1px solid var(--hair);padding:13px 0}
.timeline li:last-child{border-bottom:1px solid var(--hair)}
.t-when{font-family:var(--data);font-size:14px;font-weight:700;letter-spacing:.05em;color:var(--accent)}
.t-what{font-size:var(--s2);line-height:1.55;color:#33413A}
.band-ink .timeline li,.band-cobalt .timeline li{border-color:rgba(241,237,226,.3)}
.band-ink .t-when,.band-cobalt .t-when{color:var(--gold)}
.band-ink .t-what,.band-cobalt .t-what{color:#CBD5CD}
.chart{margin:2.2em auto}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{border-top:2px solid var(--gold);padding-top:12px;margin-top:14px}
.chart .c-bar{fill:var(--accent)}
.chart .c-bar-2{fill:var(--second)}
.chart .c-bar-3{fill:var(--gold)}
.chart text{font-family:var(--data);font-size:13px}
.prose > .chart text{fill:var(--ink)}
.chart .c-val{font-weight:700;font-size:15px}
.chart .c-in{fill:var(--paper)}
.prose > .chart .c-in{fill:var(--paper)}
.chart text{letter-spacing:.01em}
.chart .c-axis{stroke:var(--hair-2);stroke-width:1}
.chart .c-line{fill:none;stroke:var(--second);stroke-width:2.5}
.chart .c-dot{fill:var(--accent)}
.chart .c-ring{fill:none;stroke-width:18}

/* html bar chart — stays legible at any width */
.bars{display:flex;flex-direction:column;gap:22px;border-left:1px solid var(--hair-2);padding-left:0}
.bar-row{display:flex;flex-direction:column;gap:7px}
.bar-label{font-family:var(--data);font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.bar-track{display:flex;align-items:center;gap:14px}
.bar{height:44px;display:flex;align-items:center;justify-content:flex-end;padding:0 14px;min-width:34px}
.bar-1,.b-1{background:var(--accent)}
.b-2{background:var(--second)}
.b-3{background:var(--gold)}
.bar-val{font-family:var(--data);font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap}
.bar-val.in{color:var(--paper)}
.barchart figcaption{border-top:2px solid var(--gold);padding-top:13px;margin-top:26px}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px}
.profile-card{display:flex;flex-direction:column;background:var(--paper-2);border-top:2px solid var(--ink);padding:20px}
.profile-card .p-photo{width:100%;aspect-ratio:4/5;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-size:20px;margin-bottom:4px}
.profile-card .p-role{font-family:var(--data);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.profile-card p{font-size:var(--s1);line-height:1.6;color:#33413A}
.profile-card .p-links{margin-top:auto;font-family:var(--data);font-size:13.5px}
.profile-card .p-attr{font-family:var(--data);font-size:12px;color:#7D8B83}
.profile-card.no-photo{border-top-color:var(--accent)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,320px));gap:14px}
.org-card{display:flex;flex-direction:column;gap:4px;background:var(--paper);border:1px solid var(--hair-2);padding:14px 16px}
.org-card:hover{border-color:var(--accent);text-decoration:none}
.org-logo{height:26px;width:auto;margin-bottom:6px}
.org-name{font-family:var(--display);font-size:17.5px;font-weight:600;color:var(--ink);line-height:1.25}
.org-host{font-family:var(--data);font-size:12px;letter-spacing:.06em;color:var(--quiet);word-break:break-word}
.org-card.no-logo .org-name{border-left:3px solid var(--gold);padding-left:10px}
.entity-ref{font-family:var(--data);font-size:.92em;letter-spacing:.02em;border-bottom:1px solid var(--gold)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.further-grid a{background:var(--paper-2);border-top:2px solid var(--accent);padding:16px 18px;font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink);line-height:1.3}
.further-grid a:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.related-links li{border-top:2px solid var(--ink);padding-top:12px}
.related-links a{font-family:var(--display);font-size:19.5px;font-weight:600;color:var(--ink);display:block;line-height:1.3}
.related-links a:hover{color:var(--accent)}
.related-links .r-sec{font-family:var(--data);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);display:flex;align-items:center;gap:7px;margin-bottom:6px}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--hair-2);padding:20px 0}
.cat-list li:last-child{border-bottom:1px solid var(--hair-2)}
.cat-list a{font-family:var(--display);font-size:clamp(22px,2vw,29px);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.15;display:block}
.cat-list a:hover{color:var(--accent)}
.cat-list p{font-size:var(--s2);color:#33413A;margin:8px 0 0;max-width:62ch}
.cat-list .c-meta{font-family:var(--data);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-top:9px}

/* ---------- supporters ---------- */
.supporters{background:var(--paper-2);border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2)}
.sup-group{margin-top:26px}
.sup-label{font-family:var(--data);font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sup-label .fill{flex:1;height:1px;background:var(--hair-2)}
.sup-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start}
.sup-intro{font-family:var(--data);font-size:15px;line-height:1.6;color:#3E4C44;margin:0 0 26px;padding-left:18px;border-left:3px solid var(--gold);max-width:64ch}
.sponsor{flex:0 0 404px;width:404px;display:flex;flex-direction:column;align-items:stretch;gap:16px;background:var(--paper);border:1px solid var(--hair-2);padding:22px 24px 24px;min-height:186px}
.sponsor:hover{border-color:var(--ink);text-decoration:none}
.sponsor img{width:100%;height:56px;max-height:56px;object-fit:contain;background:var(--ink);padding:10px 16px}
.sponsor .sponsor-copy{display:flex;flex-direction:column;gap:6px}
.sponsor-name{font-family:var(--display);font-size:19px;font-weight:700;color:var(--ink);line-height:1.2;letter-spacing:-.01em}
.sponsor-name{font-family:var(--display);font-size:18px;font-weight:700;color:var(--ink);line-height:1.2;letter-spacing:-.01em}
.sponsor-blurb{font-family:var(--data);font-size:13.5px;line-height:1.5;color:#3E4C44}.sponsor.feat{background:var(--ink);border-color:var(--ink)}
.sponsor.feat img{background:#0E1814}
.sponsor.feat .sponsor-name{color:var(--paper)}
.sponsor.feat .sponsor-blurb{color:#AFBDB4}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#8FA098;padding:0 0 30px;margin-top:0;border-top:6px solid var(--gold)}
.foot-grid{display:grid;grid-template-columns:auto 1.25fr .8fr .8fr;gap:44px;align-items:start;padding:48px 0 0}
.site-foot a{color:#C8D2CB}
.site-foot a:hover{color:var(--gold);text-decoration:none}
.foot-brand{display:flex;gap:20px;align-items:flex-start}
.foot-col{width:44px;height:102px;flex:none;stroke:var(--gold);fill:none;color:var(--gold)}
.foot-mark{display:block;font-family:var(--display);font-weight:800;font-size:clamp(46px,5vw,66px);letter-spacing:-.045em;color:var(--paper);line-height:.86}
.foot-mark:hover{color:var(--gold)}
.foot-domain{font-family:var(--data);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:#6F8079;margin-top:12px}
.foot-sig{font-family:var(--display);font-size:clamp(21px,1.9vw,26px);line-height:1.34;color:var(--paper);letter-spacing:-.015em;margin:0 0 14px;max-width:30ch}
.foot-note{font-family:var(--data);font-size:13.5px;line-height:1.6;max-width:44ch;margin:0}
.foot-list{list-style:none;margin:0;padding:0;font-family:var(--data);font-size:14px}
.foot-list li{border-top:1px solid rgba(241,237,226,.14)}
.foot-list a{display:flex;align-items:center;gap:10px;padding:9px 0}
.foot-list .icon{color:var(--gold);width:1.35em;height:1.35em}
.foot-list .fn{color:#6F8079;font-weight:700;letter-spacing:.1em;font-size:11.5px}
.foot-list.plain a{padding:9px 0}
.foot-h{font-family:var(--data);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.foot-bottom{display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:space-between;border-top:1px solid rgba(241,237,226,.16);margin-top:40px;padding-top:18px;font-family:var(--data);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#6F8079}

/* ---------- misc pages ---------- */
.page-head{padding:52px 0 20px}
.page-head h1{font-size:var(--h1);max-width:26ch}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:34px}
.hub-sec{border-top:3px solid var(--ink);padding-top:16px}
.hub-sec h2{font-size:var(--h2);display:flex;align-items:center;gap:11px;margin-bottom:6px}
.hub-sec h2 a{color:var(--ink)}
.hub-sec ul{list-style:none;margin:14px 0 0;padding:0}
.hub-sec li{border-top:1px solid var(--hair);padding:9px 0}
.hub-sec li a{font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink)}
.hub-sec li a:hover{color:var(--accent)}
.hub-sec .blurb{font-family:var(--data);font-size:14px;color:var(--quiet)}
.reg-table{width:100%;border-collapse:collapse;font-family:var(--data);font-size:14.5px;table-layout:fixed}
.reg-table th:nth-child(1){width:46px}
.reg-table th:nth-child(2){width:18%}
.reg-table th:nth-child(3){width:13%}
.reg-table th:nth-child(4){width:19%}
.reg-table th:nth-child(5){width:15%}
.reg-table th{text-align:left;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--quiet);border-bottom:2px solid var(--ink);padding:0 14px 9px 0}
.reg-table td{border-bottom:1px solid var(--hair);padding:13px 14px 13px 0;vertical-align:top}
.reg-table .r-no{color:var(--gold);font-weight:700;width:46px}
.reg-table .r-title{font-family:var(--display);font-size:19px;font-weight:600;width:26%;line-height:1.25}
.reg-table .r-co{color:var(--second)}
.reg-table td{overflow-wrap:break-word}
.reg-table .r-sec{white-space:nowrap}
.expander{margin-top:14px}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .more{display:none}
.expander input:checked ~ .more{display:block}
.expander label{display:inline-block;font-family:var(--data);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--accent);cursor:pointer;margin-top:12px}
.expander input:checked ~ label{display:none}
.sg-note{font-family:var(--data);font-size:14px;background:var(--paper-2);border-left:3px solid var(--second);padding:14px 18px;margin:0 0 30px;color:#33413A}
.narrow-demo{max-width:360px;border:1px dashed var(--hair-2);padding:12px;resize:horizontal;overflow:auto}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .lead-grid{grid-template-columns:1fr}
  .lead-media img{min-height:320px}
  .fig-offset{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:auto 1fr;gap:34px}
  .trio{grid-template-columns:1fr;gap:34px}
  .sec-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-row{grid-template-columns:112px 190px 1fr 40px}
}
@media (max-width:860px){
  .wrap,.measure{padding:0 20px}
  .prose > p,.prose > h2,.prose > h3,.prose > ul,.prose > ol,.prose > table,.prose > blockquote,.prose > aside,.prose > .note,.prose > figure{padding-left:20px;padding-right:20px}
  .break-out > *{padding:0 20px}
  .prose > .fig-pair,.prose > .fig-offset{padding-left:20px;padding-right:20px}
  .chart{overflow-x:auto}
  .chart svg{min-width:620px}
  .band-cobalt .chart figcaption::before{content:"Swipe to see the whole diagram \2192";display:block;font-family:var(--data);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
  .barchart{overflow:visible}
  .mast{flex-wrap:wrap;gap:18px}
  .mast-sig{text-align:left;max-width:none;flex:1 1 100%;border-top:1px solid var(--hair);padding-top:12px}
  .mast-mark{width:40px;height:92px}
  .navrow a{padding:14px 20px 14px 0;margin-right:20px;gap:11px}
  .navrow .navicon{width:32px;height:32px}
  .navrow .nm{font-size:19px}
  .timeline li{grid-template-columns:1fr;gap:4px}
  .fig-inset{float:none;width:100%;margin:1.6em 0}
  .art-hero{grid-template-columns:1fr}
  .art-hero img{min-height:300px}
  .fig-pair{grid-template-columns:1fr}
  .fig-pair img{min-height:220px}
  .hero-strip .wrap,.fig-band .fc-in{grid-template-columns:1fr}
  .hero-strip .fig-credit,.fig-band .fig-credit{text-align:left}
  .prose{padding-top:32px}
  .fig-plate figcaption{margin:-30px 16px 0;max-width:none}
  .band{padding:52px 0}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .terms{grid-template-columns:1fr}
  .cs-row{grid-template-columns:84px 1fr 36px}
  .cs-age{grid-column:2;padding:16px 16px 0}
  .cs-what{grid-column:2;padding:6px 16px 16px 0}
  .cs-pat{grid-row:1 / span 2}
  .cs-go{grid-row:1 / span 2;grid-column:3}
}
@media (max-width:640px){
  .sponsor{flex:0 0 100%;width:100%}
  .sec-index{grid-template-columns:1fr}
  .mini{flex-direction:column}
  .mini img{width:100%;height:180px}
  .prose h2{max-width:none}
  .art-head h1,.page-head h1{max-width:none}
}
@media print{
  .site-head,.site-foot,.supporters{border:0}
  a{color:var(--ink)}
}

/* 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 */
/* mrcautray — 404px tile, 354px mark, 25px each side. Same treatment: inset the mark inside the
   image box; tile dimensions unchanged. */
a.sponsor[data-partner] img, .sponsor[data-partner] img{
  box-sizing:border-box!important;
  padding-left:42px!important; padding-right:42px!important;
  padding-top:10px!important; padding-bottom:10px!important;
  object-fit:contain!important;
}

/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .wrap.band.band-tight{padding-inline:34px}
}

/* op-footer-compact: the footer printed 9 rows for 9 link(s) in
   2 list(s) — 974px 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 974 -> 774px (21% 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:min(3.06vw,44px)!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:26px}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   2139px at 390, 17% of the whole page. Two columns bring it to
   1352px (37% shorter). Checked before writing: no new overflow, smallest mark still
   117px wide, longest blurb 3 lines, tile heights 186-196px.
   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 (.sup-row), 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){
  .sup-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:10px!important}
    .sup-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-row > * *{min-width:0!important;max-width:100%}
    .sup-row img,.sup-row svg{max-width:100%;height:auto}
  .sup-row .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

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

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:901px) and (max-width:1399px){
  div.wrap.band.band-tight{padding-left:max(34px, 18px);padding-right:max(34px, 18px)}
}
@media (min-width:801px) and (max-width:1399px){
  div.wrap.page-head{padding-left:max(34px, 18px);padding-right:max(34px, 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.fig-bracket > img,
  article.measure.prose > figure.break-out.fig-band > img,
  article.measure.prose > figure.fig-pair > img,
  div > figure.fig-bracket > img,
  div.trio-side > article.mini > img,
  div.wrap > figure.fig-plate > img,
  main > section.art-hero > img,
  section.band-ink > div > img,
  section.lead-grid > div.lead-media > img){height:auto}
/* op-img-dims:end */
@media (min-width:660px) and (max-width:1439px){.sup-row.sup-row:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(404px,calc(50% - 6px)),1fr))!important;column-gap:12px!important;row-gap:12px!important;justify-content:stretch!important;align-items:stretch!important}.sup-row.sup-row > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}