/* heartloveweddings.com — "The Working Light"
   Palette (5, each with a job):
     --ground   blush chalk   page ground
     --paper    warm paper    raised panels, cards
     --ink      warm near-black  type
     --accent   carmine       accent: full bands, rules, section marks
     --secondary stem green   secondary area: plates, quiet bands
   Type: Petrona (display + reading), Karla (nav, meta, captions).
*/

:root{
  --ground:#F7EAE4;
  --paper:#FDF6F2;
  --ink:#241A17;
  --accent:#B0143C;
  --secondary:#10604E;

  --ink-70:#4A3733;
  --ink-45:#7A6560;
  --rule:#E2CEC6;
  --rule-2:#D3B9B0;
  --dark:#1C1310;

  --display:"Petrona",Georgia,"Times New Roman",serif;
  --ui:"Karla","Helvetica Neue",Arial,sans-serif;

  --measure:68ch;
  --page:1180px;
  --gut:clamp(18px,4vw,46px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--display);font-size:18px;line-height:1.6;
  text-wrap:pretty;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
p{margin:0 0 1.1em}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.012em;line-height:1.08}
ul,ol{margin:0 0 1.2em;padding-left:1.25em}
hr{border:0;border-top:1px solid var(--rule);margin:2.4rem 0}
::selection{background:var(--accent);color:var(--paper)}

.wrap{max-width:var(--page);margin:0 auto;padding-inline:var(--gut)}
.kicker,.eyebrow,.meta,.credit,.label{font-family:var(--ui)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.eyebrow.q{color:var(--secondary)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:99}

/* ---------- drawn device: tacking-stitch rule + chalk corner marks ---------- */
.stitch{display:block;width:100%;height:6px;color:var(--accent)}
.stitch.q{color:var(--secondary)}
.stitch.faint{color:var(--rule-2)}

.icon{width:1.35em;height:1.35em;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.25em}
.icon.lg{width:38px;height:38px;stroke-width:1.2}
.icon.xl{width:58px;height:58px;stroke-width:1.1}

/* ---------- masthead: two rows ---------- */
.masthead{background:var(--ground);border-bottom:1px solid var(--rule)}
.mast-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;padding:20px 0 14px}
.mast-strap{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-45);line-height:1.7}
.wordmark{text-align:center}
.wordmark a{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(26px,4.4vw,44px);line-height:1;letter-spacing:-.015em}
.wordmark .sub{display:block;font-family:var(--ui);font-size:10px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-top:9px}
.mast-tools{display:flex;gap:18px;justify-content:flex-end;align-items:center;
  font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}

.nav-row{position:relative}
.nav{display:flex;flex-wrap:wrap;gap:0 clamp(6px,1.5vw,30px);list-style:none;margin:0;padding:6px 0 0;justify-content:space-between}
.nav > li{position:relative}
.nav > li > a{display:flex;align-items:center;gap:.55em;padding:10px 0 12px;
  font-family:var(--ui);font-size:clamp(11.4px,1.15vw,13.5px);font-weight:600;letter-spacing:.042em;text-transform:uppercase;
  border-bottom:2px solid transparent;white-space:nowrap}
.nav > li > a:hover,.nav > li.here > a{border-bottom-color:var(--accent);color:var(--accent)}
.nav .icon{width:1.32em;height:1.32em}

/* second level */
.subnav{position:absolute;left:-10px;top:100%;z-index:40;min-width:280px;
  background:var(--paper);border:1px solid var(--rule-2);
  box-shadow:0 18px 40px -22px rgba(36,26,23,.5);
  padding:14px 16px 16px;list-style:none;margin:0;
  visibility:hidden;opacity:0;pointer-events:none}
.nav > li::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.nav > li:hover .subnav,.nav > li:focus-within .subnav{visibility:visible;opacity:1;pointer-events:auto}
.nav > li:nth-last-child(-n+3) .subnav{left:auto;right:-10px}
.subnav li + li{margin-top:2px}
.subnav a{display:block;padding:5px 0;font-family:var(--ui);font-size:14px;line-height:1.35}
.subnav .sn-head{font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-45);padding-bottom:7px;margin-bottom:6px;border-bottom:1px solid var(--rule)}
.subnav .sn-dek{display:block;font-size:12.5px;color:var(--ink-45);margin-top:1px}

/* mobile menu (CSS only) */
.nav-toggle,.nav-toggle-label{display:none}
.nav-toggle-label{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--ink);padding:9px 13px;cursor:pointer}

/* ---------- bands ---------- */
.band{padding:clamp(44px,6vw,86px) 0}
.band.tight{padding:clamp(30px,4vw,52px) 0}
.band.paper{background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band.accent{background:var(--accent);color:var(--paper)}
.band.accent .eyebrow{color:rgba(253,246,242,.72)}
.band.accent a{color:var(--paper);text-decoration:underline;text-decoration-color:rgba(253,246,242,.4);text-underline-offset:4px}
.band.accent a.card{text-decoration:none}
.band.accent .card h3{color:var(--paper)}
.band.accent .card p{color:rgba(253,246,242,.88)}
.band.accent .card .card-foot{color:var(--paper)}
.band.accent .card:hover h3{color:rgba(253,246,242,.75)}
.band.dark{background:var(--dark);color:#E9DCD6}
.band.green{background:var(--secondary);color:#EAF2EF}
.band.green .eyebrow{color:rgba(234,242,239,.7)}
.band.green a{color:#EAF2EF}
.band.green{position:relative;overflow:hidden}
.green-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(26px,4vw,60px);align-items:center}
.green-no{font-family:var(--display);font-size:clamp(64px,9vw,124px);line-height:.8;color:rgba(234,242,239,.28);display:block;margin-bottom:10px}
.green-rule{height:6px;margin:22px 0;background:repeating-linear-gradient(90deg,rgba(234,242,239,.75) 0 9px,transparent 9px 16px)}
.green-plate{position:relative}
.green-plate img{width:100%;height:clamp(280px,40vw,470px);object-fit:cover}
.green-plate figcaption{background:#0C4C3E;padding:18px 22px 16px;max-width:430px;font-family:var(--display);font-size:16.5px;line-height:1.45;color:#EAF2EF}
@media (min-width:900px){.green-plate{margin-right:calc(50% - 50vw)}.green-plate figcaption{position:absolute;left:-34px;bottom:-26px}}
@media (max-width:900px){.green-grid{grid-template-columns:1fr}}
.green-plate .credit{display:block;font-family:var(--ui);margin-top:6px}
.band-head{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:baseline;justify-content:space-between;
  border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:30px}
.band-head h2{font-size:clamp(22px,2.4vw,29px)}
.band-head .eyebrow{margin-bottom:2px}

/* full-bleed opener */
.opener{position:relative;background:#E8D8D0}
.opener img{width:100%;height:clamp(320px,58vw,660px);object-fit:cover}
.opener .plate{background:var(--ground);padding:clamp(22px,3vw,36px) clamp(22px,3vw,40px) clamp(20px,2.6vw,30px);
  max-width:660px}
.opener h1{font-size:clamp(30px,4.6vw,52px);margin-bottom:14px;text-wrap:balance}
.opener .lead{margin-bottom:0}
.opener .plate-mark{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.plate-no{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.14em;
  background:var(--ink);color:var(--ground);padding:4px 8px}
@media (min-width:900px){
  .opener{display:block}
  .opener .plate{position:absolute;left:0;bottom:0}
}

/* generic two-up */
.two-up{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(26px,4vw,56px);align-items:start}
.two-up.rev{grid-template-columns:1fr 1.15fr}
.two-up h2,.two-up h3{font-size:clamp(24px,3vw,36px);margin-bottom:14px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,38px)}
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,32px)}
.col-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.col-rules > div{padding:0 clamp(18px,2.4vw,34px)}
.col-rules > div:first-child{padding-left:0}
.col-rules > div:last-child{padding-right:0}
.col-rules > div + div{border-left:1px solid var(--rule-2)}

.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--ink-70)}
.quiet-line{max-width:22ch;margin:0 auto}
.statement{font-size:clamp(23px,3vw,34px);line-height:1.34;font-weight:400;text-align:center;max-width:34ch;margin:0 auto}
.statement.left{text-align:left;margin:0;max-width:44ch}

/* cards */
.card{display:flex;flex-direction:column;height:100%}
.card .card-img{aspect-ratio:16/10;background:#E8D8D0;overflow:hidden}
.card .card-img img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:clamp(19px,1.7vw,23px);margin:13px 0 6px;min-height:2.2em}
.card p{font-size:15px;line-height:1.5;color:var(--ink-70);margin-bottom:10px}
.card .card-foot{margin-top:auto;font-family:var(--ui);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:7px}
.sec-card h3{display:flex;align-items:baseline;gap:9px;min-height:0}
.sec-card .no{font-family:var(--ui);font-size:12px;font-weight:700;color:var(--accent)}
.sec-card .card-img{aspect-ratio:4/5}
.sec-card .card-img img{transition:transform .55s ease}
.sec-card:hover .card-img img{transform:scale(1.05)}
.sec-card h3{margin-top:15px}
.sec-card p{font-size:14.5px}

/* ---------- figure system (three treatments, one drawing system) ---------- */
.article-figure{margin:0}
.article-figure img{width:100%}
.article-figure figcaption{font-family:var(--display);font-size:16.5px;line-height:1.45;margin-top:13px}
.article-figure .credit,.gallery figcaption .credit,figcaption .credit{
  display:block;font-family:var(--ui);font-size:12px;letter-spacing:.05em;
  color:var(--ink-45);margin-top:6px}
.fig-kicker{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:5px}

/* A · full-bleed, caption on a plate */
.fig-bleed{position:relative}
.fig-bleed img{height:clamp(260px,44vw,540px);object-fit:cover}
.fig-bleed figcaption{background:var(--ground);padding:20px 24px 18px;margin-top:0;max-width:620px}
@media (min-width:900px){.fig-bleed figcaption{position:absolute;left:0;bottom:0;margin:0}}

/* B · mat + chalk corner marks */
.fig-mat{background:var(--paper);padding:14px;border:1px solid var(--rule-2);position:relative}
.fig-mat .cm{position:absolute;width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.2}
.fig-mat .cm.tl{left:-9px;top:-9px}
.fig-mat .cm.tr{right:-9px;top:-9px;transform:rotate(90deg)}
.fig-mat .cm.br{right:-9px;bottom:-9px;transform:rotate(180deg)}
.fig-mat .cm.bl{left:-9px;bottom:-9px;transform:rotate(270deg)}
.fig-mat figcaption{padding:0 2px}

/* C · offset caption, image steps out of the measure */
.fig-offset{display:grid;grid-template-columns:1fr 240px;gap:26px;align-items:start;
  padding-inline:var(--gut)}
.fig-offset figcaption{margin-top:0;padding-top:14px;border-top:2px solid var(--accent)}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.band.green .credit,.band.dark .credit,.band.accent .credit,.green-plate figcaption .credit{
  color:rgba(245,238,235,.82);font-size:12.5px}
.gallery figure{margin:0;background:var(--paper);padding:10px;border:1px solid var(--rule-2)}
.gallery img{aspect-ratio:3/2;object-fit:cover}
.gallery figcaption{font-size:14px;line-height:1.4;margin-top:9px}

/* ---------- article ---------- */
.article-head{padding:clamp(34px,4vw,58px) 0 clamp(22px,3vw,34px)}
.article-head .kicker{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.article-head h1{font-size:clamp(30px,5vw,58px);max-width:26ch;margin-bottom:18px;text-wrap:balance}
.article-head .lead{max-width:52ch;font-size:clamp(19px,1.7vw,23px);font-style:italic;color:var(--ink-70)}
.byline{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-45);margin-top:20px;display:flex;gap:16px;flex-wrap:wrap}

.prose{max-width:var(--measure);margin-inline:auto}
.prose > p{font-size:19px;line-height:1.68}
.prose h2{font-size:clamp(23px,2.6vw,31px);margin:2.1em 0 .7em}
.prose h3{font-size:20px;margin:1.8em 0 .5em}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose .article-figure{margin:2.4em 0}
.wide{max-width:980px;margin-inline:auto}
.article-body > * + *{margin-top:0}

/* notes-for-design material: full-width interruptions, not a rail */
.notes{background:var(--paper);border-top:2px solid var(--accent);border-bottom:1px solid var(--rule-2);
  padding:clamp(24px,3vw,38px) 0;margin:clamp(34px,4vw,56px) 0}
.notes h3{font-family:var(--display);font-size:clamp(20px,2vw,25px);margin-bottom:16px}
.notes .eyebrow{display:block;margin-bottom:8px}
.notes .n-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 34px}
.notes .n-grid p{margin:0;font-size:16.5px;line-height:1.5}
.notes .n-grid .term{font-family:var(--ui);font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:3px}

.timeline{list-style:none;margin:0;padding:0;counter-reset:tl}
.timeline li{display:grid;grid-template-columns:44px minmax(140px,220px) 1fr;gap:8px 20px;
  padding:15px 0;border-top:1px solid var(--rule)}
.timeline li:last-child{border-bottom:1px solid var(--rule)}
.timeline li::before{counter-increment:tl;content:counter(tl,decimal-leading-zero);
  font-family:var(--ui);font-size:13px;font-weight:700;color:var(--accent)}
.t-when{font-family:var(--ui);font-size:14.5px;font-weight:700;line-height:1.35}
.t-what{font-size:16.5px;line-height:1.5;color:var(--ink-70)}

.callout{background:var(--ground);border:1px solid var(--rule-2);border-left:4px solid var(--secondary);
  padding:20px 24px;margin:1.6em 0}
.callout p:last-child,.notes p:last-child{margin-bottom:0}
.note{font-family:var(--ui);font-size:15px;line-height:1.55;color:var(--ink-70);
  padding-left:16px;border-left:2px solid var(--rule-2)}
.pullquote{margin:2em 0;padding:0 0 0 24px;border-left:3px solid var(--accent)}
.pullquote p{font-size:clamp(21px,2.4vw,27px);line-height:1.38;color:var(--accent);font-weight:500;margin:0}
.blockquote{margin:2em 0;background:var(--paper);border:1px solid var(--rule-2);padding:22px 26px}
.blockquote p{font-size:19px;line-height:1.55;margin-bottom:.6em}
.blockquote cite{font-family:var(--ui);font-size:13px;font-style:normal;letter-spacing:.06em;color:var(--ink-45)}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--rule-2);border:1px solid var(--rule-2);margin:1.8em 0}
.statblock{background:var(--paper);padding:20px}
.stat-num{display:block;font-family:var(--display);font-size:clamp(30px,4vw,44px);line-height:1;color:var(--accent)}
.stat-label{display:block;font-family:var(--ui);font-size:13px;line-height:1.4;color:var(--ink-70);margin-top:9px}

table.versus,table.datatable{width:100%;border-collapse:collapse;margin:1.8em 0;
  font-family:var(--ui);font-size:15px}
table.versus th,table.versus td,table.datatable th,table.datatable td{
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.45}
table.versus thead th,table.datatable thead th{font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-45);border-bottom:2px solid var(--ink)}
table.versus tbody th{font-family:var(--display);font-size:17px;font-weight:600;width:30%}
table.datatable tbody tr:nth-child(even){background:var(--paper)}
.table-scroll{overflow-x:auto}

.chart{margin:1.8em 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .bar-rect{fill:var(--accent)}
.chart .bar-rect.alt{fill:var(--secondary)}
.chart text{font-family:var(--ui);font-size:11px;fill:var(--ink-70)}
.chart figcaption{font-size:15px;line-height:1.45;margin-top:10px;color:var(--ink-70)}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:1.8em 0}
.profile-card{background:var(--paper);border:1px solid var(--rule-2);padding:18px}
.profile-card .p-photo{aspect-ratio:1/1;object-fit:cover;margin-bottom:12px}
.profile-card h3{font-size:20px;margin-bottom:4px}
.profile-card .p-role{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.profile-card p{font-size:15.5px;line-height:1.5}
.profile-card .p-links a{color:var(--accent)}
.profile-card .p-attr{font-family:var(--ui);font-size:12px;color:var(--ink-45)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:1.6em 0}
.org-card{display:grid;grid-template-columns:52px 1fr;gap:4px 14px;align-items:center;
  background:var(--paper);border:1px solid var(--rule-2);padding:14px}
.org-logo{width:52px;height:52px;object-fit:contain;grid-row:span 2}
.org-name{font-family:var(--display);font-size:17px;font-weight:600;align-self:end}
.org-host{font-family:var(--ui);font-size:12px;color:var(--ink-45);align-self:start}
.entity-ref{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.further-grid a{display:block;background:var(--paper);border:1px solid var(--rule-2);
  padding:16px 18px;font-size:17px;line-height:1.35}
.further-grid a:hover{border-color:var(--accent)}
.related-links{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 28px}
.related-links li{border-top:1px solid var(--rule-2);padding:14px 0}
.related-links a{font-size:19px;line-height:1.3}
.related-links .rl-dek{display:block;font-family:var(--ui);font-size:14px;line-height:1.45;
  color:var(--ink-45);margin-top:5px}

/* category / index lists */
.cat-list{list-style:none;padding:0;margin:0}
.cat-list > li{display:grid;grid-template-columns:190px 1fr 220px;gap:24px;
  padding:22px 0;border-bottom:1px solid var(--rule)}
.cat-list > li:first-child{border-top:2px solid var(--ink)}
.cat-list .cl-img{aspect-ratio:3/2;background:#E8D8D0;overflow:hidden}
.cat-list .cl-img img{width:100%;height:100%;object-fit:cover}
.cat-list h3{font-size:clamp(21px,2.2vw,27px);margin-bottom:7px}
.cat-list p{font-size:16px;line-height:1.5;color:var(--ink-70);margin:0}
.cat-list .cl-aside{font-family:var(--ui);font-size:13.5px;line-height:1.5;color:var(--ink-45)}
.roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px 40px}
.roster h3{display:flex;align-items:center;gap:9px;font-size:20px;padding-bottom:8px;
  border-bottom:1px solid var(--ink);margin-bottom:8px}
.roster ul{list-style:none;padding:0;margin:0}
.roster li{padding:6px 0;font-size:16.5px;line-height:1.35}
.roster .r-dek{display:block;font-family:var(--ui);font-size:13px;color:var(--ink-45);margin-top:2px}

/* CSS-only expander for long lists */
.expander{border-top:1px solid var(--rule)}
.expander input{position:absolute;left:-9999px}
.expander .more{display:none}
.expander input:checked ~ .more{display:block}
.expander label{display:inline-block;margin-top:12px;font-family:var(--ui);font-size:12px;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);cursor:pointer;
  border-bottom:1px solid var(--accent);padding-bottom:3px}
.expander input:checked ~ label{display:none}

/* ---------- supporters ---------- */
.supporters{padding:clamp(26px,3vw,40px) 0}
.supporters .wrap{max-width:1400px}
.sup-head{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.sup-head .eyebrow{color:var(--ink-45)}
.sup-run{display:flex;flex-wrap:wrap;gap:16px;list-style:none;margin:0;padding:0;align-items:stretch}
.sup-run > li{align-items:stretch}
.supporters:not(.sup-roll) .sup-run{flex-wrap:nowrap}
.sup-run li{display:flex}
.supporters:not(.sup-roll) .sup-run > li{flex:0 0 calc(25% - 12px)}
.sponsor{flex:1 1 auto;width:100%;display:flex;flex-direction:column;
  height:100%;background:var(--paper);border:1px solid var(--rule-2);padding:12px}
@media (max-width:620px){
  .supporters .sup-run{flex-wrap:wrap}
  .supporters .sup-run > li{flex:0 0 100%}
  .sponsor,.sup-roll .sponsor{width:100%}
}
.sponsor img{width:100%;max-width:340px;height:52px;max-height:52px;object-fit:contain;background:var(--dark);padding:8px 12px}
.sponsor .sponsor-name{display:block;font-family:var(--display);font-size:17px;font-weight:600;
  margin-top:11px;line-height:1.25;min-height:2.5em}
.sponsor .sponsor-blurb{display:block;font-family:var(--ui);font-size:13px;line-height:1.45;
  color:var(--ink-70);margin-top:5px}
.sponsor:hover{border-color:var(--accent)}
.sup-roll .wrap{max-width:1400px}
.sup-roll .sup-run{flex-wrap:nowrap;gap:12px}
.sup-roll .sup-run > li{flex:0 0 calc((100% - 72px)/7)}
.sup-roll .sponsor{padding:10px}
@media (max-width:900px){
  .sup-roll .sup-run{flex-wrap:wrap;gap:14px}
  .sup-roll .sup-run > li{flex:0 0 calc(25% - 11px)}
}
@media (max-width:620px){.sup-roll .sup-run > li{flex:0 0 100%}}
.sup-roll .sponsor img{height:46px;max-height:46px;padding:7px 8px}

/* ---------- footer ---------- */
.site-foot{background:var(--dark);color:#C9B8B2;padding:clamp(38px,4vw,58px) 0 34px}
.site-foot a{color:#E9DCD6}
.site-foot a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px 40px}
.foot-grid h3{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#9A8681;margin-bottom:12px}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{padding:4px 0;font-family:var(--ui);font-size:14.5px}
.foot-mark{font-family:var(--display);font-size:26px;font-weight:600;color:#F7EAE4;line-height:1.1}
.foot-note{font-size:15px;line-height:1.55;color:#B3A09A;max-width:38ch;margin-top:12px}
.foot-base{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  margin-top:34px;padding-top:18px;border-top:1px solid #3A2B27;
  font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8E7B76}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .cat-list > li{grid-template-columns:160px 1fr}
  .cat-list .cl-aside{grid-column:2}
  .fig-offset{grid-template-columns:1fr}
}
@media (max-width:900px){
  body{font-size:17px}
  .mast-top{grid-template-columns:1fr auto;align-items:center;gap:12px}
  .mast-strap{display:none}
  .wordmark{text-align:left}
  .mast-tools{display:none}
  .nav-toggle-label{display:inline-block;justify-self:end}
  .nav{display:none;flex-direction:column;padding-bottom:14px}
  .nav-toggle:checked ~ .nav{display:flex}
  .nav > li > a{padding:12px 0 6px;border-bottom:0;font-size:14px}
  .nav > li{border-top:1px solid var(--rule)}
  .subnav{visibility:visible;opacity:1;pointer-events:auto;position:static;
    border:0;box-shadow:none;background:transparent;padding:0 0 12px 26px;min-width:0}
  .subnav .sn-head{display:none}
  .subnav a{padding:4px 0}
  .two-up,.two-up.rev,.trio,.quad,.col-rules{grid-template-columns:1fr;gap:26px}
  .col-rules > div{padding:0}
  .col-rules > div + div{border-left:0;border-top:1px solid var(--rule-2);padding-top:22px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .timeline li{grid-template-columns:34px 1fr}
  .timeline .t-what{grid-column:2}
}
@media (max-width:600px){
  :root{--measure:100%}
  .cat-list > li{grid-template-columns:1fr}
  .cat-list .cl-aside{grid-column:1}
  .quad,.gallery{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .sponsor,.sup-roll .sponsor{width:100%}
  .opener img{height:300px}
  .article-head h1{max-width:none}
  .statement{max-width:none}
}


/* ---------- article refinements (reading rhythm) ---------- */
.article-body{counter-reset:sec}
.prose{max-width:62ch}
.prose > p{font-size:19.5px;line-height:1.76;margin-bottom:1.4em}
.prose > p + p{text-indent:0}
.article-body > div:first-child .prose > p:first-of-type::first-letter{
  float:left;font-family:var(--display);font-weight:600;color:var(--accent);
  font-size:4.05em;line-height:.82;margin:.06em .12em 0 0}
.article-body > div:first-child .prose > p:first-of-type{font-size:20.5px;line-height:1.68;overflow:hidden}

.prose h2{counter-increment:sec;position:relative;padding-top:26px;margin:2.5em 0 .8em;
  font-size:clamp(24px,2.7vw,33px)}
.prose h2::before{content:counter(sec,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.18em;color:var(--accent)}
.prose h2::after{content:"";position:absolute;top:5px;left:34px;right:0;height:4px;
  background:repeating-linear-gradient(90deg,var(--rule-2) 0 8px,transparent 8px 15px)}
.prose h3{font-size:21px;margin:2em 0 .5em;color:var(--ink)}
.prose ul{margin:0 0 1.5em;padding-left:1.1em}
.prose li{font-size:18px;line-height:1.6;margin-bottom:.45em}
.prose > p strong{font-weight:600}

/* figures breathe and vary in width */
.prose .article-figure{margin:2.9em 0}
@media (min-width:1000px){
  .prose .fig-mat{width:calc(100% + 150px);margin-left:-75px}
  .prose .fig-mat figcaption{padding-inline:2px}
}
.fig-bleed figcaption{padding:22px 26px 20px;border-top:3px solid var(--accent);max-width:640px}
.article-figure figcaption{font-size:17px;line-height:1.5}
.fig-kicker{margin-bottom:6px}

/* interruptions */
.prose .callout{background:var(--paper);border:0;border-top:2px solid var(--secondary);
  border-bottom:1px solid var(--rule-2);padding:24px 28px 22px;margin:2.6em 0}
.prose .callout p{font-size:18.5px;line-height:1.55}
.prose .callout strong{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--secondary);display:block;margin-bottom:9px}
.prose .pullquote{margin:2.8em 0;padding:0 0 0 28px}
.prose .pullquote p{font-size:clamp(23px,2.6vw,30px);line-height:1.3;font-weight:500}

.notes{margin:clamp(40px,5vw,72px) 0;padding:clamp(28px,3.4vw,44px) 0}
.notes h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:20px;max-width:34ch}
.notes .n-grid{gap:22px 40px}
.notes .n-grid p{font-size:17px;line-height:1.55}
.timeline li{padding:17px 0}
.t-what{font-size:17px}

/* article head — flattened: title left, deck and byline right */
.article-head{padding-bottom:clamp(18px,2.4vw,28px)}
@media (min-width:900px){
  .article-head{display:grid;grid-template-columns:1.25fr 1fr;gap:14px clamp(30px,4vw,64px);
    align-items:end;padding-top:clamp(26px,3vw,40px)}
  .article-head .kicker{grid-column:1/-1;margin-bottom:6px}
  .article-head h1{grid-column:1;margin-bottom:0;max-width:24ch}
  .article-head .lead{grid-column:2;max-width:38ch;margin-bottom:0}
  .article-head .byline{grid-column:2;margin-top:14px;padding-top:12px}
}
.article-head h1{font-size:clamp(32px,5.4vw,62px);line-height:1.02}
.article-head .lead{font-size:clamp(20px,1.8vw,25px);line-height:1.45;max-width:44ch}
.byline{margin-top:24px;padding-top:14px;border-top:1px solid var(--rule-2);max-width:44ch;
  font-size:11.5px;letter-spacing:.16em;color:var(--ink-45);gap:10px 20px}
.byline span + span{color:var(--accent)}
@media (max-width:700px){
  .prose > p{font-size:18px;line-height:1.7}
  .article-body > div:first-child .prose > p:first-of-type{font-size:19px}
  .article-body > div:first-child .prose > p:first-of-type::first-letter{font-size:3.4em}
}

@media print{
  .masthead,.site-foot,.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.sponsor img{box-sizing:border-box!important;height:46px!important;padding:8px 12px!important}

/* op-mobile-collapse: .sup-run is a nowrap flex row, so its items never fold onto a second line
   at phone width. It wraps below 640px. */
@media (max-width:640px){
  .sup-run{flex-wrap:wrap!important}
  .sup-run > li{flex:1 1 100%!important;min-width:0!important}
}

/* op-menu-selector: the burger could never open the menu.
   DOM:  header.masthead > div.wrap > [ div.mast-top > input.nav-toggle + label , nav.nav-row > ul.nav ]
   Design's rule: `.nav-toggle:checked ~ .nav{display:flex}` — but ul.nav is not a sibling of
   the input; it is two levels away, inside the nav-row that sits beside the input's own
   wrapper. The selector could never match, so tapping the burger did nothing at all.
   Restated along the path the markup actually has. Design's declaration is unchanged. */
@media (max-width:900px){
  .mast-top:has(.nav-toggle:checked) ~ .nav-row .nav{display:flex}
}

/* op-opener-plate-double-inset: operator — "this 'Eight trades...' box is padded for no reason".
   Design's plate is a card that sits absolute over the bottom-left of the hero at >=900px
   (`.opener .plate{position:absolute;left:0;bottom:0;max-width:660px}`). Below that it becomes
   an ordinary block inside `.opener > .wrap`, so it inherits the page gutter AND keeps its own
   padding: measured at a 990 viewport the copy started 70px in (39.6 wrap + 29.7 plate) while
   the photograph above it ran edge to edge, leaving a pointless frame of the opener's darker
   ground around a lighter panel.
   Under 900 the plate now spans the band and its own padding is the only gutter, so the panel
   meets the photograph cleanly and the type keeps a sensible inset. The card composition above
   900 is untouched. */
@media (max-width:899px){
  .opener > .wrap{padding-inline:0}
  .opener .plate{max-width:none}
}

/* op-footer-compact: the footer printed 8 rows for 8 link(s) in
   2 list(s) — 654px at 390, 8% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 654 -> 542px (17% 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(2.78vw,40px)!important;row-gap:6px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-page-overflow: the page scrolled sideways at 320 — p reached
   302px in a 320px screen (+55px) on contact.html, inside
   div.n-grid. 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){
  p,p *{overflow-wrap:anywhere!important;min-width:0!important}
}

/* op-article-width: the article column was capped at 739px (89 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 62ch (declared in .prose) 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 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.article-body div.prose{max-width:min(850px, 100%)!important}
}
@media (min-width:1600px){
  div.article-body div.prose{max-width:min(clamp(850px, 59.028vw, 1020px), 100%)!important}
  div.article-body div.prose > :is(p:not([class])){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */
/* op-heading-levels */
h2:where(.rt-h3){margin: 0px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.08;}
.roster h2:where(.rt-h3){display: flex; align-items: center; gap: 9px; font-size: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); margin-bottom: 8px;}
.foot-grid h2:where(.rt-h3){font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(154, 134, 129); margin-bottom: 12px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > span.card-img > img,
  a.card.sec-card > span.card-img > img,
  article > figure.article-figure.fig-bleed > img,
  div > figure.article-figure.fig-mat > img,
  div.green-grid > figure.article-figure.green-plate > img,
  div.prose > figure.article-figure.fig-mat > img,
  figure.article-figure.fig-offset > div > img,
  li > span.cl-img > img,
  main > section.opener > img){height:auto}
/* op-img-dims:end */