/* ==========================================================================
   gummy-stuff.org — "The Plate"
   Palette: 5 members, each with a named job.
     --ground  oyster    the paper everything sits on
     --ink     ink       type, rules, and the index band as an area
     --accent  crimson   the guilloche, section grounds, kickers
     --second  mustard   the arithmetic panels
     --flag    prussian  data marks, quantities, the flag colour
   (--paper is a tint of the ground, not a sixth colour.)
   ========================================================================== */

:root{
  --ground:#E9E4DA;
  --paper:#F7F3EC;
  --ink:#17130F;
  --ink-2:#3A332B;
  --ink-3:#6A6157;
  --line:#C9BEAC;
  --line-2:#E0D6C6;
  --accent:#B31B2C;
  --second:#C9911A;
  --flag:#1B3A6B;

  --serif:'Petrona',Georgia,'Times New Roman',serif;
  --mono:'Martian Mono',ui-monospace,'Courier New',monospace;

  --measure:44rem;      /* prose measure, ~68ch at 19px */
  --page:76rem;
  --gutter:clamp(1.25rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--serif);font-size:19px;line-height:1.62;
  text-wrap:pretty;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;line-height:1.06;margin:0}
p{margin:0 0 1.15em}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
::selection{background:var(--second);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--ink);color:var(--ground);padding:.6rem 1rem;z-index:99}

/* ---------- shared small type ---------- */
.kicker,.eyebrow,.credit,.fig-no,.meta,.count{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;
  font-size:.66rem;font-weight:400;line-height:1.5;
}
.eyebrow{color:var(--accent)}
.credit{color:var(--ink-3);letter-spacing:.1em;text-transform:none;font-size:.7rem}
.icon{width:1.5em;height:1.5em;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.rule-guilloche{
  height:14px;width:100%;color:var(--accent);
  background-repeat:repeat-x;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='14'%3E%3Cg fill='none' stroke='%23B31B2C' stroke-width='0.9'%3E%3Cpath d='M0 7C9 1 27 13 36 7'/%3E%3Cpath d='M0 7C9 13 27 1 36 7'/%3E%3C/g%3E%3Cg fill='none' stroke='%23B31B2C' stroke-width='0.5' opacity='0.55'%3E%3Cpath d='M-18 7C-9 1 9 13 18 7'/%3E%3Cpath d='M18 7C27 1 45 13 54 7'/%3E%3C/g%3E%3C/svg%3E");
}
.rule-guilloche.on-ink{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='14'%3E%3Cg fill='none' stroke='%23C9911A' stroke-width='0.9'%3E%3Cpath d='M0 7C9 1 27 13 36 7'/%3E%3Cpath d='M0 7C9 13 27 1 36 7'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   MASTHEAD
   ========================================================================== */
.masthead{background:var(--ground)}
.masthead-top{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:flex-end;
  justify-content:space-between;padding-block:1.4rem .9rem;
}
.brand{display:flex;align-items:center;gap:.9rem}
.rosette{width:3.9rem;height:3.9rem;flex:0 0 auto;color:var(--accent)}
.wordmark{display:block;font-size:clamp(1.9rem,4.4vw,2.5rem);font-weight:600;line-height:.95;letter-spacing:-.03em}
.wordmark .tld{color:var(--accent)}
.tagline{display:block;margin:.45rem 0 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.6}
.disclaim{font-style:italic;color:var(--ink-3);max-width:22rem;text-align:right;
  font-size:.95rem;line-height:1.4;margin:0}

/* index band — every section, no dropdowns */
.index-band{background:var(--ink);color:var(--ground)}
.index-band ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,1fr)}
.index-band li{border-right:1px solid #3A332B}
.index-band li:last-child{border-right:0}
.index-band a{display:flex;flex-direction:column;gap:.4rem;padding:.85rem .85rem .95rem;height:100%;
  position:relative;overflow:hidden;transition:background .18s ease}
.index-band a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;
  background:var(--second);transition:right .28s ease}
.index-band a:hover::after{right:0}
.index-band a:hover{background:var(--accent);color:#F3E6DF}
.index-band a:hover .n,.index-band a:hover .c,.index-band a:hover .icon{color:#F3E6DF}
.index-band .c{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  color:#A79C90;margin-top:.3rem;transition:color .18s ease}
.index-band .icon{transition:transform .28s ease}
.index-band a:hover .icon{transform:translateY(-1px) scale(1.14)}
.index-band .n{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;color:var(--second)}
.index-band .t{font-size:1.02rem;font-weight:500;line-height:1.15;letter-spacing:-.01em;
  display:flex;align-items:flex-start;gap:.45rem}
.index-band .icon{width:1.15em;height:1.15em;margin-top:.1em;color:var(--second)}
.index-band li.is-here{background:var(--accent)}
.index-band li.is-here .n,.index-band li.is-here .c{color:#F3E6DF}
.index-band li.is-here .icon{color:#F3E6DF}
.index-band li.is-here a::after{right:0}

/* third strip: the entries of the section you are in */
.strip{background:var(--accent);color:#F3E6DF}
.strip-in{display:flex;flex-wrap:wrap;gap:.35rem 1.6rem;align-items:baseline;padding-block:.7rem}
.strip .lbl{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.strip a,.strip span.here{font-size:1rem}
.strip a:hover{color:#fff;border-bottom:1px solid currentColor}
.strip span.here{font-weight:600;border-bottom:2px solid currentColor;padding-bottom:1px}
.strip-more{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}

/* contents strip on an entry */
.contents{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:baseline;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--line);
  padding-block:.9rem;margin-block:0 1rem}
.contents .lbl{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.contents ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem}
.contents a{display:inline-flex;align-items:baseline;gap:.45rem;font-size:1.02rem}
.contents a:hover{border-bottom:1px solid var(--accent)}
.contents .cn{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--accent)}

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */
/* 1 · lead plate */
.lead-band{position:relative;background:var(--ink)}
.lead-band .plate{aspect-ratio:16/9;overflow:hidden}
.lead-band .plate img{width:100%;height:100%;object-fit:cover;object-position:center}
.lead-mat{
  background:var(--ground);border-top:3px solid var(--accent);
  padding:2rem 2.2rem 1.6rem;
}
.lead-mat h1{font-size:clamp(2.2rem,5.2vw,3.6rem);margin:.7rem 0 0;letter-spacing:-.025em;line-height:1.02}
.lead-mat .dek{font-size:1.15rem;line-height:1.45;color:var(--ink-2);margin:1rem 0 0}
.lead-mat .go{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid var(--accent);padding-bottom:.25rem}
.lead-rosette{width:78px;height:78px;color:var(--accent);flex:0 0 auto}
@media(min-width:62rem){
  .lead-mat{position:absolute;left:var(--gutter);bottom:0;width:min(40rem,58%);
    padding:2.2rem 2.4rem 1.8rem}
  .lead-band{margin-bottom:2rem}
}

/* 2 · the quiet line */
.line-band{padding-block:0}
.line-band blockquote{margin:0;padding-block:2.6rem}
.line-band p{font-size:clamp(1.4rem,3vw,1.95rem);font-style:italic;line-height:1.34;margin:0;max-width:60rem}

/* 3 · feed + supporters rail */
.feed-band{padding-block:3rem}
.feed-grid{display:grid;gap:2.6rem}
@media(min-width:64rem){.feed-grid{grid-template-columns:minmax(0,1fr) 20rem;gap:3.4rem}}
.band-head{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:.7rem;margin-bottom:1.6rem}
.band-head h2{font-size:1.55rem}
.band-head .count{color:var(--ink-3)}

.feed{display:grid;gap:1.9rem}
.feed-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:.6rem 0 -.6rem}
.entry-card--turn{border-top:2px solid var(--ink)!important}
.entry-card{display:grid;gap:.5rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.entry-card:first-child{border-top:1px solid var(--ink)}
.entry-card h3{font-size:1.45rem}
.entry-card p{margin:0;color:var(--ink-2);font-size:1.02rem;line-height:1.5}
.entry-card .meta{color:var(--accent);display:flex;align-items:center;gap:.45rem}
.entry-card .meta .icon{width:1.15em;height:1.15em}
.entry-card--big{grid-template-columns:1fr;gap:1rem}
.entry-card--big h3{font-size:clamp(1.7rem,3.4vw,2.2rem)}
.entry-card--big .shot{background:var(--paper);padding:.65rem}
.entry-card--big .shot img{aspect-ratio:16/9;object-fit:cover;width:100%}
@media(min-width:48rem){
  .entry-card--big{grid-template-columns:1.1fr 1fr;align-items:start;gap:1.6rem}
  .entry-card--big .txt{display:grid;gap:.55rem}
}

/* supporters rail — compact enough to run alongside the feed rather than past it */
.supporters{align-self:start}
@media(min-width:64rem){.supporters{border-left:1px solid var(--line);padding-left:1.8rem}}
.supporters h2{font-size:1.15rem}
.supporters .sub{font-size:.95rem;color:var(--ink-3);margin:.5rem 0 1.4rem;line-height:1.45}
.sponsor-group{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.3rem}
.sponsor-group-label{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);border-top:1px solid var(--line);
  padding-top:.5rem;margin-bottom:.8rem}
.sponsor{
  flex:0 0 16.25rem;            /* constant tile width — never grows */
  display:flex;flex-direction:column;gap:.45rem;
  background:var(--paper);border:1px solid var(--line);padding:.6rem;
}
.sponsor.feat{gap:.55rem;padding:.75rem}
.sponsor:hover{border-color:var(--accent)}
.sponsor-mark{background:var(--ink);height:2.6rem;display:flex;align-items:center;justify-content:center;padding:.35rem .7rem}
.sponsor.feat .sponsor-mark{height:3.4rem;padding:.45rem .7rem}
.sponsor img{
  background:var(--ink);        /* dark ground: the wordmarks are light */
  width:100%;height:3.4rem;padding:.5rem .7rem;
  object-fit:contain;object-position:center;
}
.sponsor-mark img{max-height:100%;max-width:100%;width:auto;height:auto;padding:0;background:none}
.sponsor-name{font-size:.95rem;font-weight:600;line-height:1.2;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sponsor.feat .sponsor-name{font-size:1rem}
.sponsor-blurb{font-size:.9rem;line-height:1.45;color:var(--ink-2)}
@media(max-width:64rem){.sponsor{flex:0 0 16.25rem}}
@media(max-width:24rem){.sponsor{flex:0 0 100%}}

/* 4 · arithmetic panel */
.arith{background:var(--second);color:var(--ink);padding-block:3rem}
.arith-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.2rem}
.arith .sheet{overflow-x:auto}
@media(max-width:40rem){.arith .datatable .term{min-width:0;overflow-wrap:break-word}
  .arith .datatable{font-size:.78rem;table-layout:auto}
  .arith .datatable .num{letter-spacing:0;font-size:.76rem}
  .arith .datatable th,.arith .datatable td{padding-inline:0 .35rem}
  .arith .sheet{padding:1.2rem .9rem}}
@media(min-width:60rem){.arith-grid{grid-template-columns:.95fr 1.05fr;gap:3.4rem;align-items:start}
  .arith-grid>*{min-width:0}}
.arith h2{font-size:clamp(1.9rem,4vw,2.8rem)}
.arith .eyebrow{color:var(--ink);opacity:.7}
.arith p{font-size:1.08rem;line-height:1.5}
.arith .sheet{background:var(--ground);padding:1.6rem 1.7rem}
.sheet-split{border-top:2px solid var(--ink);margin-top:1.6rem;padding-top:1.4rem}
.arith-spot{display:block;width:min(20rem,100%);height:auto;color:var(--ink);opacity:.9;margin:1.6rem 0 .4rem}
.arith-pair{list-style:none;margin:1.4rem 0 0;padding:0}
.arith-pair li{display:grid;grid-template-columns:2.6rem 1fr;gap:0 .6rem;
  border-top:1px solid rgba(23,19,15,.35);padding:.85rem 0}
.arith-pair li:last-child{border-bottom:1px solid rgba(23,19,15,.35)}
.arith-pair .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink);padding-top:.35rem}
.arith-pair .t{display:block;font-size:1.15rem;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.arith-pair .d{display:block;font-size:1rem;line-height:1.5;margin-top:.25rem}
.arith-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:1.3rem 0 0;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.arith-links a{border-bottom:1px solid rgba(23,19,15,.5);padding-bottom:.2rem}
.arith-links a:hover{color:var(--ground);border-bottom-color:var(--ground)}

/* 5 · sections hub */
.hub{padding-block:3rem}
.hub-grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.hub-card{display:flex;flex-direction:column;gap:.55rem;background:var(--paper);
  border:1px solid var(--line);padding:1.15rem 1.2rem;height:100%}
.hub-card:hover{border-color:var(--accent)}
.hub-card .top{display:flex;align-items:center;gap:.6rem;color:var(--accent)}
.hub-card .top .icon{width:1.6em;height:1.6em}
.hub-card h3{font-size:1.28rem;margin-top:.15rem}
.hub-card p{margin:0;font-size:.98rem;color:var(--ink-2);line-height:1.45}
.hub-card .count{margin-top:auto;padding-top:.7rem;color:var(--ink-3)}

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.art-head{padding-block:2.6rem 2rem}
.art-head .kicker{display:flex;align-items:center;gap:.5rem;color:var(--accent)}
.art-head .kicker .icon{width:1.5em;height:1.5em}
.art-head h1{font-size:clamp(2.1rem,5vw,3.4rem);margin:.9rem 0 0;letter-spacing:-.03em;line-height:1.03}
.lead{font-size:1.24rem;line-height:1.45;color:var(--ink-2);font-style:italic;margin:1.1rem 0 0}
.art-body{padding-block:2rem 1rem}
.art-body::after{content:"";display:table;clear:both}
.art-body h2{font-size:1.7rem;margin:2.8rem 0 1rem;scroll-margin-top:1.5rem}
.art-body h2:first-child{margin-top:0}
.h2-n{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--accent);
  margin-bottom:.55rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.band-list{margin:1.1rem 0 0;padding-left:1.1rem}
.band-list li{margin-bottom:.55rem;line-height:1.5}
.band-list li:last-child{margin-bottom:0}
.art-body p{font-size:1.06rem}
.art-body em{font-style:italic}
.art-body a:not(.entity-ref){border-bottom:1px solid var(--accent);color:var(--accent)}
.dropcap::first-letter{
  float:left;font-size:4.4rem;line-height:.78;font-weight:600;color:var(--accent);
  padding:.06em .12em 0 0;
}

/* --- figure system: four treatments, one drawing system --- */
figure{margin:0}
figcaption{margin-top:.85rem}
.fig-cap{font-size:1.02rem;font-style:italic;line-height:1.45;margin:0}
.fig-no{color:var(--accent);letter-spacing:.14em;display:block;margin-bottom:.35rem}
.credit{display:block;margin-top:.5rem}

/* 1 — full-bleed plate on an ink ground, caption in an offset mat beneath it.
   16/10 matches the source frame exactly, so no plate is ever cropped. */
.fig--bleed{background:var(--ink);margin-block:0 2.4rem;padding-bottom:1.6rem}
.fig--bleed img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig--bleed figcaption{background:var(--ground);border-top:3px solid var(--second);
  padding:1.1rem 1.3rem;margin:0 var(--gutter);max-width:38rem}

/* 2 — matted plate with drawn corner marks */
.fig--plate{background:var(--paper);padding:1rem;margin-block:2.2rem}
.plate-in{position:relative}
.corner{position:absolute;width:18px;height:18px;color:var(--accent)}
.corner.tl{top:5px;left:5px}
.corner.br{right:5px;bottom:5px}
.fig--plate img{aspect-ratio:16/10;object-fit:cover;width:100%}
.fig--plate figcaption{padding-inline:.2rem}

/* 3 — breaks the measure, caption offset beside the plate */
.fig--wide{margin-block:2.6rem}
.fig--wide img{aspect-ratio:21/9;object-fit:cover;width:100%}
@media(min-width:62rem){
  .fig--wide{display:grid;grid-template-columns:1fr 15rem;gap:2rem;align-items:end}
  .fig--wide figcaption{margin-top:0;border-top:1px solid var(--ink);padding-top:.7rem}
}

/* 4 — inset, prose wraps beside it. With nothing after it to wrap, it becomes
   a full-measure matted plate instead of an orphaned narrow block. */
.fig--inset{background:var(--paper);padding:.6rem;margin:.4rem 0 1.2rem}
.art-body > .fig--inset:last-child{width:100%;float:none;padding:1rem;margin:2.4rem 0 0}
.art-body > .fig--inset:last-child img{aspect-ratio:16/10}
.art-body > .fig--inset:last-child .fig-cap{font-size:1.02rem}
.fig--inset .plate-in{position:relative}
.fig--inset img{aspect-ratio:4/5;object-fit:cover;width:100%}
.fig--inset figcaption{padding-inline:.15rem}
.fig--inset .fig-cap{font-size:.95rem}
@media(min-width:52rem){
  .fig--inset{float:right;width:15rem;margin:.4rem 0 1.2rem 1.8rem}
  .art-body > .fig--inset:last-child{float:none;width:100%;margin:2.4rem 0 0}
}

.article-figure{margin-block:2rem}
.article-figure img{width:100%}
.gallery{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));margin-block:2rem}
.gallery img{aspect-ratio:3/4;object-fit:cover;width:100%}
.gallery figcaption{margin-top:.55rem}
.gallery .fig-cap{font-size:.95rem}

/* --- interruption bands (the Notes-for-Design material) --- */
.band{margin-block:2.8rem}
.band-in{padding-block:2rem}
.band--paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band--ink{background:var(--ink);color:var(--ground)}
.band--ink .eyebrow{color:var(--second)}
.band--accent{background:var(--accent);color:#F3E6DF}
.band--accent .eyebrow{color:#F3E6DF;opacity:.85}
.band--second{background:var(--second);color:var(--ink)}
.band--second .eyebrow{color:var(--ink);opacity:.7}
.band h2,.band h3{font-size:1.45rem;margin:.5rem 0 1.1rem}

/* --- styleguide components --- */
.pullquote{margin:2.4rem 0;padding:0 0 0 1.4rem;border-left:3px solid var(--accent)}
.pullquote p{font-size:clamp(1.3rem,2.6vw,1.65rem);font-style:italic;line-height:1.32;margin:0}
.blockquote{margin:2.2rem 0;padding:1.2rem 1.4rem;background:var(--paper);border-left:3px solid var(--flag)}
.blockquote p{font-size:1.08rem;margin:0 0 .6rem}
.blockquote cite{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;font-style:normal;color:var(--ink-3)}
.callout{margin:2.2rem 0;background:var(--paper);border:1px solid var(--line);
  border-top:3px solid var(--second);padding:1.2rem 1.3rem}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.note{font-size:.98rem;color:var(--ink-3);border-left:2px solid var(--line);padding-left:.9rem}

.datatable,.versus{width:100%;border-collapse:collapse;font-size:1rem;margin:1.2rem 0 0}
.datatable caption,.versus caption{text-align:left;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding-bottom:.6rem}
.datatable th,.versus th{text-align:left;font-family:var(--mono);font-size:.6rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:2px solid currentColor;padding:0 1rem .5rem 0;vertical-align:bottom}
.datatable td,.versus td{border-bottom:1px solid var(--line-2);padding:.7rem 1rem .7rem 0;
  vertical-align:top;line-height:1.45}
.datatable tr:last-child td,.versus tr:last-child td{border-bottom:2px solid currentColor}
.datatable th:last-child,.datatable td:last-child{padding-right:0}
.datatable .term{font-weight:600;width:34%;min-width:8rem}
.datatable .term-none{padding-right:0}
.datatable .num,.versus .num{font-family:var(--mono);font-size:.9rem;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.band--ink .datatable td,.band--accent .datatable td{border-bottom-color:rgba(255,255,255,.28)}
.band--ink .datatable th,.band--accent .datatable th{color:inherit;opacity:.75}
.band--second .datatable td{border-bottom-color:rgba(23,19,15,.2)}
.band--second .datatable th{color:var(--ink);opacity:.7}

.statrow{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));margin:1.2rem 0 0}
.statblock{display:flex;flex-direction:column;gap:.3rem;border-top:2px solid currentColor;padding-top:.7rem}
.stat-num{font-family:var(--mono);font-size:1.7rem;line-height:1;font-variant-numeric:tabular-nums}
.stat-label{font-size:.95rem;line-height:1.35;opacity:.85}

.timeline{list-style:none;margin:1.2rem 0 0;padding:0;display:grid}
.timeline li{display:grid;gap:.15rem .9rem;padding:.75rem 0;border-top:1px solid var(--line-2)}
.timeline li:first-child{border-top:2px solid currentColor}
.timeline li:last-child{border-bottom:2px solid currentColor}
.t-when{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;line-height:1.5;color:var(--accent)}
.t-what{line-height:1.45}
.band--ink .t-when{color:var(--second)}
.band--accent .t-when{color:#F3E6DF}
.band--second .t-when{color:var(--flag)}
@media(min-width:44rem){.timeline li{grid-template-columns:14rem 1fr;align-items:baseline}}

.chart{margin:1.4rem 0 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart.donut svg{width:120px;height:120px;flex:0 0 auto}
.chart figcaption{font-size:.95rem;color:var(--ink-3);margin-top:.7rem}
.chart .bar-label{font-family:var(--mono);font-size:9px;letter-spacing:.04em;fill:var(--ink-2)}
.chart .bar-val{font-family:var(--mono);font-size:9px;fill:var(--ink-3)}

.profile-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin:1.4rem 0 0}
.profile-card{display:flex;flex-direction:column;gap:.4rem;background:var(--paper);
  border:1px solid var(--line);padding:1.1rem}
.profile-card .p-photo{aspect-ratio:1;object-fit:cover;width:4.5rem;margin-bottom:.4rem}
.profile-card h3{font-size:1.2rem}
.profile-card .p-role{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0}
.profile-card p{font-size:.98rem;margin:0;line-height:1.45}
.profile-card .p-links,.profile-card .p-attr{margin-top:auto;padding-top:.6rem}
.profile-card .p-links a{color:var(--accent);border-bottom:1px solid currentColor}
.profile-card .p-attr{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink-3)}

.org-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));margin:1.4rem 0 0}
.org-card{display:grid;grid-template-columns:2.6rem 1fr;gap:.2rem .8rem;align-items:center;
  background:var(--paper);border:1px solid var(--line);padding:.75rem .9rem}
.org-card:hover{border-color:var(--accent)}
.org-logo{grid-row:span 2;width:2.6rem;height:2.6rem;object-fit:contain;background:var(--ink)}
.org-card.no-logo{grid-template-columns:1fr}
.org-card.no-logo .org-name{grid-row:1}
.org-name{font-weight:600;line-height:1.2}
.org-host{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--ink-3)}
.entity-ref{color:var(--flag);border-bottom:1px solid currentColor;white-space:nowrap}

.further-grid,.related-links{display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));list-style:none;margin:1.4rem 0 0;padding:0}
.further-grid a,.related-links a{display:flex;flex-direction:column;gap:.4rem;
  border-top:1px solid var(--ink);padding-top:.7rem;height:100%}
.related-links .rl-sec{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:.4rem}
.related-links .rl-sec .icon{width:1.15em;height:1.15em}
.related-links .rl-t{font-size:1.22rem;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.related-links .rl-d{font-size:.95rem;color:var(--ink-2);line-height:1.45;margin:0}

/* ==========================================================================
   CATEGORY / REGISTER / SIMPLE PAGES
   ========================================================================== */
.cat-head{padding-block:2.6rem 2.2rem;border-bottom:1px solid var(--line)}
.cat-head .top{display:flex;align-items:flex-start;gap:1.4rem}
.cat-head .big-icon{width:5.5rem;height:5.5rem;color:var(--accent);flex:0 0 auto}
.cat-head h1{font-size:clamp(2.4rem,6vw,4rem);margin:.6rem 0 0;letter-spacing:-.035em}
.cat-head .dek{font-size:1.2rem;color:var(--ink-2);margin:1rem 0 0;max-width:36rem}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-bottom:1px solid var(--line-2)}
.cat-list li:first-child{border-top:2px solid var(--ink)}
.cat-list a{display:grid;gap:.3rem .0;padding:1.15rem 0}
.cat-list .n{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--accent)}
.cat-list h3{font-size:1.5rem;margin:.15rem 0 0}
.cat-list p{margin:.35rem 0 0;color:var(--ink-2);font-size:1.02rem;line-height:1.5;max-width:48rem}
.cat-list .arrow{display:none}
@media(min-width:52rem){
  .cat-list a{grid-template-columns:5rem 1fr 2rem;align-items:start;gap:0 1.6rem}
  .cat-list .arrow{display:block;font-family:var(--mono);color:var(--accent);text-align:right}
}
.register{margin-block:2rem}
.register h2{font-size:1.35rem;display:flex;align-items:center;gap:.55rem;color:var(--ink)}
.register h2 .icon{width:1.5em;height:1.5em;color:var(--accent)}
.page-body{padding-block:2.4rem 1rem}
.page-body h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:1.2rem}
.page-body h2{font-size:1.45rem;margin:2rem 0 .8rem}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--ink);color:#BDB4A6;margin-top:3.5rem}
.foot-in{display:grid;gap:2rem;padding-block:2.4rem 2.8rem}
@media(min-width:56rem){.foot-in{grid-template-columns:1.1fr 1fr;gap:3rem}}
.foot .wordmark{color:var(--ground);font-size:1.6rem}
.foot p{font-size:1rem;line-height:1.5;max-width:30rem}
.foot nav ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.foot a:hover{color:var(--second)}
.foot .fine{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:#A79C90;border-top:1px solid #3A332B;padding-block:1rem 1.4rem}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:75rem){
  .index-band ul{grid-template-columns:repeat(4,1fr)}
  .index-band li:nth-child(4){border-right:0}
  .index-band li:nth-child(-n+4){border-bottom:1px solid #3A332B}
}
@media(max-width:44rem){
  body{font-size:18px}
  .index-band ul{grid-template-columns:repeat(2,1fr)}
  .index-band li:nth-child(4){border-right:1px solid #3A332B}
  .index-band li:nth-child(2n){border-right:0}
  .index-band li:not(:nth-last-child(-n+2)){border-bottom:1px solid #3A332B}
  .disclaim{text-align:left;max-width:none}
  .cat-head .top{gap:1rem}
  .cat-head .big-icon{width:3.4rem;height:3.4rem}
  .lead-mat{padding:1.5rem 1.25rem 1.3rem}
  .datatable .term{width:auto}
}
@media(max-width:30rem){
  .index-band ul{grid-template-columns:1fr}
  .index-band li{border-right:0;border-bottom:1px solid #3A332B}
  .index-band a{flex-direction:row;align-items:baseline;gap:.7rem;padding-block:.7rem}
  .datatable,.versus{font-size:.9rem}
  .datatable td,.datatable th,.versus td,.versus th{padding-right:.6rem}
  .stat-num{font-size:1.4rem}
}
/* mobile: keep the mono fine print above hairline size */
@media(max-width:48rem){
  .tagline,.index-band .n,.index-band .c,.contents .lbl,.strip .lbl,.contents .cn,
  .h2-n,.rl-sec,.foot .fine,.credit,.fig-no,.eyebrow,.kicker,.arith-links,.feed-label{font-size:.72rem}
  .strip-more{font-size:.68rem}
  .t-when,.stat-label,.datatable th,.chart figcaption,.note,.sponsor-blurb{font-size:.78rem}
  .strip a,.strip span.here{display:inline-flex;align-items:center;min-height:44px}
  .contents a{min-height:38px;align-items:center}
  .related-links .rl-sec,.sponsor-group-label,.hub-card .count,.entry-card .meta,
  .sg-note,.profile-card .p-role,.profile-card .p-attr,.org-card .org-host{font-size:.73rem}
}
@media print{
  .index-band,.strip,.supporters{display:none}
  body{background:#fff}
}

/* 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-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. */
.sponsor-group.sponsor-group--feat .feat.sponsor.feat.sponsor img{height:40px!important}
.sponsor-group.sponsor-group--roll .sponsor.sponsor img{height:38px!important}


/* op-nav-row-align: the parts of each menu row sat at different heights — measured up to
   8px between the box centres of the number, the label and the count, because the row is
   `align-items:baseline` with type at two sizes (and an icon, which baseline pushes
   lower still). Centred at phone widths only, where the nav is a stacked list; the desktop bar
   keeps Design's baseline. Type sizes, spacing, colour and order are untouched. */
@media (max-width:900px){
  header nav a,header nav li{align-items:center!important}
  header nav a > *,header nav li > *{margin-block:0!important}
}

/* op-nav-collapse: this nav printed 289px of stacked links at 390 before any content
   (8 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "centre-pill", bold, seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (0px measured) the button carries the build's
   gutter (clamp(1.25rem,4vw,3rem)) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (900px here), where the button appears and the nav starts closed.
   Folded with the "height-clip" technique and marked with the "chevron" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-gate{display:none}
@media (max-width:900px){
  .nav-gate{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-inline:auto;justify-self:center;border:1.5px solid currentColor;border-radius:999px;padding:10px 22px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .nav-gate-bars{width:8px;height:8px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .foot-in > nav{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .nav-gate-c:checked ~ .foot-in > nav{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .foot-in:has(> .nav-gate){display:flow-root}
  .nav-gate:not(:has(~ .foot-in > nav)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1253px at 390, 14% of the whole page. Two columns bring it to
   716px (43% shorter). Checked before writing: no new overflow, smallest mark still
   90px wide, longest blurb 3 lines, tile heights 88-173px.
   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.
   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 (.sponsor-group.sponsor-group--feat, .sponsor-group.sponsor-group--roll), 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){
  .sponsor-group.sponsor-group--feat{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:11px!important}
    .sponsor-group.sponsor-group--feat > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-group.sponsor-group--feat > * *{min-width:0!important;max-width:100%}
    .sponsor-group.sponsor-group--feat img,.sponsor-group.sponsor-group--feat svg{max-width:100%;height:auto}
  .sponsor-group.sponsor-group--roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:11px!important}
    .sponsor-group.sponsor-group--roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-group.sponsor-group--roll > * *{min-width:0!important;max-width:100%}
    .sponsor-group.sponsor-group--roll img,.sponsor-group.sponsor-group--roll svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .sponsor-group.sponsor-group--roll (7 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){
  .sponsor-group.sponsor-group--roll:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — section.register reached
   325px in a 320px screen (+4px) on register.html, inside
   div.wrap. Remedy: let the words break. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  section.register,section.register *{overflow-wrap:anywhere!important;min-width:0!important}
}
/* op-heading-levels */
h2:where(.rt-h3){font-weight: 600; letter-spacing: -0.02em; line-height: 1.06; margin: 0px;}
.cat-list h2:where(.rt-h3){font-size: 1.5rem; margin: 0.15rem 0px 0px;}
/* op-heading-levels:end */
@media (min-width:660px) and (max-width:899px){.sponsor-group.sponsor-group:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(260px,calc(50% - 6px)),1fr))!important;column-gap:12px!important;row-gap:12px!important;justify-content:stretch!important;align-items:stretch!important}.sponsor-group.sponsor-group > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}