/* G Fine Art DC — Eye Level
   Palette roles: ground, ink, accent (vermilion), secondary (slate teal), rule
   ------------------------------------------------------------------ */
:root{
  --paper:#EFE9DE;        /* ground */
  --paper-2:#E4DCCB;      /* mat / plate ground */
  --ink:#1B1A17;          /* ink */
  --ink-soft:#4A453C;
  --accent:#B42B17;       /* accent — vermilion, clears AA at text size */
  --accent-pale:#E8B4A6;
  --teal:#22514F;         /* secondary — slate teal, used as a band ground */
  --rule:#D0C6B4;
  --rule-2:#B9AE9A;
  --muted:#645D53;
  --accent-bright:#C8341F;   /* display type and rules only — never small text */
  --serif:'Spectral',Georgia,'Times New Roman',serif;
  --sans:'Chivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gut:clamp(20px,4vw,56px);
  --shell:1500px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:19px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-0.02em;line-height:1.06;text-wrap:balance}
p{margin:0 0 1.15em;text-wrap:pretty}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--teal)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:10px 14px;background:var(--ink);color:var(--paper)}

/* ---------- the datum: this site's repeating drawn device ---------- */
.datum{display:block;width:100%;height:14px;color:var(--ink)}
.datum--accent{color:var(--accent)}
.datum-label{
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-top:7px;display:block;
}

/* ---------- icons (one drawing system: 24 grid, 1.6 stroke) ---------- */
.ico{width:1.25em;height:1.25em;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.ico--lg{width:44px;height:44px;stroke-width:1.3}
.ico--xl{width:78px;height:78px;stroke-width:1}

/* ---------- masthead ---------- */
.mast{border-bottom:1px solid var(--rule);background:var(--paper)}
.mast-top{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;
  flex-wrap:wrap;padding:22px 0 14px}
.wordmark{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.2vw,33px);
  letter-spacing:-0.015em;line-height:1;color:var(--ink)}
.wordmark:hover{color:var(--ink)}
.mast-strap{font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:var(--muted);padding-bottom:4px}
.mast-util{display:flex;align-items:center;gap:22px;font-family:var(--sans);font-size:12px;
  letter-spacing:.07em;text-transform:uppercase}
.mast-util a{color:var(--ink)}
.mast-util a:hover{color:var(--accent)}
.mast-util .is-on{border-bottom:1px solid var(--accent);padding-bottom:2px}
.mast-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px clamp(16px,3vw,44px);padding:14px 0 0}
.mast-nav a{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--sans);
  font-size:clamp(15px,1.35vw,19px);font-weight:500;padding-bottom:12px;border-bottom:2px solid transparent}
.mast-nav a:hover{color:var(--accent)}
.mast-nav a[aria-current]{border-bottom-color:var(--accent)}
.mast-nav .n{color:var(--accent);font-size:max(12px,.72em);letter-spacing:.08em}
.mast-nav .ico{width:1.3em;height:1.3em}
.mast-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;padding:10px 0 12px;
  border-top:1px solid var(--rule);font-family:var(--sans);font-size:12.5px}
.mast-sub .lbl{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mast-sub a{color:var(--teal)}
.mast-sub a:hover{color:var(--accent)}

/* ---------- homepage bands ---------- */
.band{padding:clamp(52px,7vw,96px) 0}
.band--tight{padding:clamp(40px,5vw,64px) 0}
.band--teal{background:var(--teal);color:var(--paper)}
.band--teal a{color:var(--accent-pale)}
.band--rule{border-top:1px solid var(--ink)}
.kicker{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:9px}
.band--teal .kicker{color:var(--accent-pale)}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  flex-wrap:wrap;margin-bottom:30px}
.band-head h2{font-size:clamp(26px,3.4vw,38px)}
.band-note{font-family:var(--sans);font-size:13px;color:var(--ink-soft);max-width:44ch}
.band--teal .band-note{color:rgba(239,233,222,.7)}

/* lead */
.lead-frame{position:relative}
.lead-frame img{width:100%;height:clamp(380px,64vh,720px);object-fit:cover}
.lead-plate{background:var(--paper);padding:clamp(22px,3vw,34px) clamp(22px,3vw,40px);
  max-width:820px;margin-top:-90px;position:relative;z-index:1}
.lead-plate h1{font-size:clamp(32px,5.2vw,58px);line-height:1.04}
.lead-plate .standfirst{margin:16px 0 0;font-size:clamp(17px,1.5vw,19.5px);color:var(--ink-soft);max-width:62ch}
.lead-meta{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:20px;
  font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.lead-meta .go{color:var(--accent);letter-spacing:.08em;text-transform:uppercase;font-size:12px}

/* quiet line */
.quiet p{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(23px,3.2vw,36px);line-height:1.3;margin:0;max-width:34ch}
.quiet-foot{display:flex;align-items:center;gap:14px;margin-top:34px;color:var(--teal);
  font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase}

/* variable grid (teal band) */
.vars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:34px 40px}
.vars h3{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-pale);margin-bottom:9px;display:flex;align-items:center;gap:10px}
.vars h3 .ico{width:26px;height:26px;stroke-width:1.3}
.vars p{margin:0;font-size:16.5px;line-height:1.52;color:rgba(239,233,222,.92)}
.vars .v-num{font-family:var(--serif);font-size:15px;color:rgba(239,233,222,.5)}

/* selection (the edit) */
.sel{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:34px}
.sel--two{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.card{display:flex;flex-direction:column;height:100%;border-top:1px solid var(--ink)}
.card-fig{margin:0;background:var(--paper-2);overflow:hidden}
.card-fig img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card h3{margin:14px 0 0;font-size:clamp(22px,2.2vw,29px);line-height:1.1}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--accent)}
.card p{margin:10px 0 0;font-size:16.5px;color:var(--ink-soft)}
.card .card-meta{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.card--lead h3{font-size:clamp(28px,3.4vw,40px)}
.card--flat .card-fig{display:none}

/* salon strip — plates hung about a datum that crosses the stack */
.salon-fig{position:relative;padding-bottom:34px}
.salon{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;align-items:center;
  height:clamp(230px,29vw,350px)}
.salon-line{position:absolute;left:0;right:0;top:calc((100% - 34px)/2);color:var(--accent);
  pointer-events:none;transform:translateY(-50%)}
.salon-line-label{position:absolute;right:0;bottom:0;top:auto;margin-top:0}
.salon figure{margin:0;height:100%;overflow:hidden;border:1px solid var(--rule-2);background:var(--paper-2)}
.salon img{width:100%;height:100%;object-fit:cover}
.salon .s1{height:62%;transform:translateY(-16%)}
.salon .s2{height:100%;transform:translateY(-7%)}
.salon .s3{height:46%;transform:translateY(22%)}
.salon .s4{height:78%;transform:none}
.salon .s5{height:54%;transform:translateY(-26%)}
.salon .s6{height:90%;transform:translateY(8%)}
.salon .s7{height:48%;transform:translateY(30%)}

/* sections index */
.sec-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px 36px}
.sec-index > div{border-top:2px solid var(--accent);padding-top:14px}
.sec-index h3{font-size:24px;display:flex;align-items:center;gap:12px}
.sec-index h3 .ico{width:30px;height:30px;stroke-width:1.3;color:var(--accent)}
.sec-index h3 a{color:var(--ink)}
.sec-index h3 a:hover{color:var(--accent)}
.sec-index .blurb{font-family:var(--sans);font-size:13.5px;color:var(--muted);margin:8px 0 12px}
.sec-index ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;
  font-family:var(--sans);font-size:13.5px}
.sec-index ul a{color:var(--ink-soft)}
.sec-index ul a:hover{color:var(--accent)}

/* ---------- article ---------- */
.art-head{padding-block:clamp(44px,6vw,76px) 26px}
.art-kicker{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:11.5px;
  font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.art-kicker a{color:var(--accent)}
.art-head h1{font-size:clamp(33px,5.4vw,62px);line-height:1.01;max-width:22ch}
.art-head .lead{margin:22px 0 0;font-size:clamp(18px,1.8vw,22px);line-height:1.45;
  color:var(--ink-soft);max-width:52ch;font-weight:300}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:24px;padding-top:16px;
  border-top:1px solid var(--rule);font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.art-meta strong{color:var(--ink);font-weight:500}

.body-grid{display:grid;grid-template-columns:minmax(0,1fr) min(64ch,100%) minmax(0,1fr);
  column-gap:var(--gut);counter-reset:sect}
.body-grid > *{grid-column:2}
.body-grid > .col-wide{grid-column:1/-1;max-width:1100px;justify-self:center;width:100%}
.body-grid > .col-full{grid-column:1/-1;max-width:none;width:100%}
.body-grid h2{grid-column:2;counter-increment:sect;font-size:clamp(24px,2.6vw,32px);margin:1.9em 0 .6em;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;
  padding-top:.6em;border-top:1px solid var(--rule)}
.body-grid h2::before{content:counter(sect,decimal-leading-zero);font-family:var(--sans);font-size:13px;
  font-weight:700;letter-spacing:.1em;color:var(--accent);transform:translateY(-.35em)}
.body-grid p{font-size:19.5px;line-height:1.7}
.body-grid > p.opening{font-size:21px;line-height:1.62}
.flow{grid-column:2}
.flow::after{content:"";display:block;clear:both}
.flow p{font-size:19.5px;line-height:1.7;margin:0 0 1.15em}
.fig{font-family:var(--sans);font-size:.86em;font-weight:600;letter-spacing:.01em;color:var(--accent);
  white-space:nowrap}
.fig-float{float:right;width:44%;margin:.4em 0 1.2em 32px}
.fig-float .fig-img{border:1px solid var(--rule-2);overflow:hidden;background:var(--paper-2)}
.fig-float img{width:100%;aspect-ratio:4/5;object-fit:cover}
.fig-float figcaption{margin-top:11px;padding-left:14px;border-left:2px solid var(--accent);font-size:14px}
.endmark{display:flex;align-items:center;gap:12px;margin:2.4em 0 0;color:var(--teal)}
.endmark span{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}
.toc{grid-column:2;margin:0 0 2.4em;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;
  counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--sans);font-size:13.5px;
  color:var(--ink);border:1px solid var(--rule);padding:7px 14px 8px}
.toc a::before{content:counter(toc,decimal-leading-zero);font-size:11px;font-weight:700;
  letter-spacing:.08em;color:var(--accent)}
.toc a:hover{border-color:var(--accent);color:var(--accent)}
.toc-lbl{grid-column:2;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--muted);margin:0 0 12px}

/* figure system — three treatments, one drawing family */
figure{margin:0}
figcaption{font-family:var(--sans);font-size:15px;line-height:1.45;color:var(--ink)}

.credit{display:block;font-family:var(--sans);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-top:7px}

/* 1 · plate: the picture sits on a mat, caption offset with a rule */
.fig-plate{background:var(--paper-2);padding:clamp(16px,2vw,30px);margin:2.4em 0}
.fig-plate .fig-img{border:1px solid var(--rule-2);overflow:hidden;background:var(--paper)}
.fig-plate img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-plate figcaption{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 16px;margin-top:16px;align-items:start}
.fig-plate figcaption > span:first-child{height:1px;background:var(--accent);margin-top:11px}
.fig-plate figcaption .credit,.article-figure .credit,.gallery figcaption .credit{color:var(--ink-soft)}
.fig-plate--lead{margin:0 0 2.6em}
.fig-plate--lead img{aspect-ratio:16/9}

/* 2 · band: full width, breaks the measure, caption steps in from the edges */
.fig-band{margin:3em 0}
.fig-band .fig-img{background:var(--paper-2);overflow:hidden}
.fig-band img{width:100%;height:clamp(240px,42vw,470px);object-fit:cover}
.fig-band figcaption{max-width:var(--shell);margin:14px auto 0;padding-inline:var(--gut);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 30px}
.fig-band figcaption .cap-t{max-width:56ch}
.fig-band figcaption .credit{margin-top:0}
.page-body .measure > .datatable,.page-body .measure > .versus{width:100%}

/* 3 · inset: narrower than the measure, hanging-indent caption, hairline only */
.fig-inset{margin:2.4em 0;max-width:74%}
.fig-inset .fig-img{border:1px solid var(--rule-2);overflow:hidden;background:var(--paper-2)}
.fig-inset img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fig-inset figcaption{margin-top:12px;padding-left:18px;border-left:2px solid var(--accent);font-size:14.5px}
.fig-inset--right{margin-left:auto}

/* article-figure (styleguide class) inherits the plate treatment */
.article-figure{background:var(--paper-2);padding:clamp(16px,2vw,26px);margin:2.2em 0}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--rule-2)}
.article-figure figcaption{margin-top:14px;padding-left:16px;border-left:2px solid var(--accent)}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:2.4em 0}
.gallery figure{background:var(--paper-2);padding:10px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{margin-top:9px;font-size:13px}

/* ---------- notes-for-design components ---------- */
.lead{font-size:21px;line-height:1.45}
.pullquote{margin:2.2em 0;padding:0;border-top:2px solid var(--accent);border-bottom:1px solid var(--rule)}
.pullquote p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(22px,2.6vw,30px);
  line-height:1.3;margin:.7em 0}
.blockquote{margin:2em 0;padding:0 0 0 24px;border-left:3px solid var(--teal)}
.blockquote p{font-size:19.5px;font-style:italic;margin:0 0 .5em}
.blockquote cite{font-family:var(--sans);font-size:13px;font-style:normal;color:var(--muted)}
.callout{background:var(--paper-2);border-top:2px solid var(--teal);padding:24px 26px;margin:2.2em 0}
.callout p{margin:0;font-size:18px}
.note{font-family:var(--sans);font-size:15px;color:var(--ink-soft);border-left:2px solid var(--rule-2);
  padding-left:16px;margin:1.8em 0}

/* measurements — the signature block: physical variables on the teal ground */
.measures{background:var(--teal);color:var(--paper);padding:clamp(26px,3.4vw,44px);margin:3em 0}
.measures .kicker{color:var(--accent-pale);margin-bottom:18px}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:0 clamp(28px,4vw,56px)}
.statblock{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:4px clamp(16px,2vw,26px);
  align-items:baseline;padding:15px 0;border-top:1px solid rgba(239,233,222,.28)}
.stat-num{font-family:var(--serif);font-size:clamp(23px,2.4vw,30px);line-height:1.06;letter-spacing:-0.015em;
  font-variant-numeric:tabular-nums}
.stat-label{font-family:var(--sans);font-size:15px;line-height:1.45;color:rgba(239,233,222,.86)}
.measures .fig,.band--teal .fig{color:var(--paper);font-weight:700}
.measures--paper .fig{color:var(--accent)}
.measures .stat-num .fig{color:inherit;font-family:inherit;font-weight:inherit}
.measures--paper{background:var(--paper-2);color:var(--ink)}
.measures--paper .kicker{color:var(--accent)}
.measures--paper .statblock{border-top-color:var(--rule-2)}
.measures--paper .stat-label{color:var(--ink-soft)}

/* the decision tree / term lists */
.tree{list-style:none;counter-reset:t;margin:2.6em 0;padding:0;border-top:1px solid var(--ink)}
.tree li{counter-increment:t;display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto;gap:0 18px;
  padding:16px 0;border-bottom:1px solid var(--rule)}
.tree li::before{content:counter(t,decimal-leading-zero);font-family:var(--serif);font-size:20px;color:var(--accent);grid-column:1;grid-row:1/3}
.tree .t-when{grid-column:2;grid-row:1;font-family:var(--sans);font-size:15px;font-weight:600;display:block}
.tree .t-what{grid-column:2;grid-row:2;font-size:17px;color:var(--ink-soft);display:block;margin-top:4px}
.timeline{list-style:none;counter-reset:t;margin:2.4em 0;padding:0;border-top:1px solid var(--ink)}
.timeline li{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr);gap:6px 24px;
  padding:15px 0;border-bottom:1px solid var(--rule)}
.timeline .t-when{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--accent)}
.timeline .t-what{font-size:17px;color:var(--ink-soft)}

/* glossary-style pairs: term stacked above its definition, never run on */
.terms{margin:2.4em 0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.terms li{padding:14px 0;border-bottom:1px solid var(--rule)}
.terms .term{display:block;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink)}
.terms .def{display:block;font-size:17px;color:var(--ink-soft);margin-top:4px}

.datatable,.versus{width:100%;border-collapse:collapse;margin:2.2em 0;font-size:16.5px}
.datatable caption,.versus caption{font-family:var(--sans);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);text-align:left;padding-bottom:12px}
.datatable th,.versus th{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--ink);color:var(--muted);font-weight:600}
.datatable td,.versus td{padding:12px 14px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.versus tbody th{color:var(--ink);border-bottom:1px solid var(--rule);text-transform:none;
  letter-spacing:0;font-size:15px;width:34%}
.table-wrap{overflow-x:auto}

.chart{margin:2.4em 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{margin-top:14px;padding-left:16px;border-left:2px solid var(--accent);font-size:14.5px}
.chart .bar-l{font-family:var(--sans);font-size:12.5px;fill:var(--ink)}
.chart .bar-v{font-family:var(--sans);font-size:12.5px;fill:var(--accent)}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:2.2em 0}
.profile-card{background:var(--paper-2);padding:22px;display:flex;flex-direction:column;height:100%}
.profile-card .p-photo{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-size:22px}
.profile-card .p-role{font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin:8px 0 10px}
.profile-card p{font-size:16px;margin:0 0 .8em}
.profile-card .p-links{margin-top:auto;font-family:var(--sans);font-size:14px}
.profile-card .p-attr{font-family:var(--sans);font-size:11px;color:var(--muted)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:2.2em 0}
.org-card{display:flex;flex-direction:column;gap:6px;background:var(--paper-2);padding:16px;border-top:2px solid var(--teal)}
.org-card .org-logo{height:34px;width:auto;object-fit:contain;margin-bottom:6px}
.org-card .org-name{font-family:var(--serif);font-size:18px;color:var(--ink)}
.org-card .org-host{font-family:var(--sans);font-size:12px;color:var(--muted)}
.entity-ref{font-family:var(--sans);font-size:.92em;border-bottom:1px solid var(--rule-2)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin:1em 0 0}
.further-grid a{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--ink);padding-top:14px;
  font-family:var(--serif);font-size:22px;line-height:1.14;color:var(--ink)}
.further-grid a:hover{color:var(--accent)}
.further-grid a .f-sec{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.related-links{list-style:none;margin:1em 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.related-links li{border-top:1px solid var(--ink);padding-top:13px}
.related-links a{font-family:var(--serif);font-size:21px;line-height:1.16;color:var(--ink);display:block}
.related-links a:hover{color:var(--accent)}
.related-links .r-sec{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}

/* category / archive lists */
.cat-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,40px);
  align-items:end;padding-block:clamp(40px,5.5vw,72px) 24px}
.cat-no{font-family:var(--serif);font-weight:300;font-size:clamp(72px,11vw,150px);line-height:.78;
  color:var(--accent-bright);letter-spacing:-0.04em}
.cat-head h1{font-size:clamp(38px,6vw,66px)}
.cat-head .blurb{margin:18px 0 0;font-size:clamp(17px,1.7vw,20px);color:var(--ink-soft);max-width:52ch}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(18px,2.6vw,36px);
  padding:26px 0;border-top:1px solid var(--rule)}
.cat-list li:first-child{border-top:1px solid var(--ink)}
.cat-list li:last-child{border-bottom:1px solid var(--ink)}
.cat-list .c-fig{margin:0;background:var(--paper-2);overflow:hidden;border:1px solid var(--rule-2)}
.cat-list .c-fig img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cat-list h2{font-size:clamp(24px,2.8vw,33px);line-height:1.08}
.cat-list h2 a{color:var(--ink)}
.cat-list h2 a:hover{color:var(--accent)}
.cat-list p{margin:11px 0 0;font-size:17px;color:var(--ink-soft);max-width:62ch}
.cat-list .c-meta{margin-top:12px;font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}

.reg{width:100%;border-collapse:collapse;font-size:17px}
.reg caption{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding-bottom:14px}
.reg th{font-family:var(--sans);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  text-align:left;font-weight:600;padding:0 16px 10px 0;border-bottom:1px solid var(--ink)}
.reg td{padding:14px 16px 14px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.reg .r-no{font-family:var(--serif);color:var(--accent);width:56px}
.reg .r-sec{font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal);white-space:nowrap}
.reg td a{color:var(--ink);font-weight:500}
.reg td a:hover{color:var(--accent)}

/* prose page (about / contact / 404) */
.page-body{padding-block:clamp(40px,6vw,80px) clamp(50px,7vw,90px)}
.page-body h1{font-size:clamp(34px,5vw,58px);margin-bottom:22px}
.page-body h2{font-size:clamp(22px,2.4vw,28px);margin:1.8em 0 .5em;padding-top:.5em;border-top:1px solid var(--rule)}
.page-body .measure{max-width:66ch}
.dl-contact{margin:1.6em 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.dl-contact div{border-top:1px solid var(--ink);padding-top:12px}
.dl-contact dt{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.dl-contact dd{margin:8px 0 0;font-size:17px}

/* ---------- supporters (homepage only) ---------- */
.sponsors{border-top:1px solid var(--ink);padding-block:44px 10px}
.sponsors .kicker{margin-bottom:14px}
.sponsors .intro{font-family:var(--sans);font-size:14px;color:var(--ink-soft);max-width:64ch;margin:0 0 26px}
.sponsor-group{margin-bottom:26px}
.sponsor-group h3{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.sponsor-wall{display:flex;flex-wrap:wrap;gap:12px}
.sponsor{flex:0 0 236px;height:74px;background:var(--ink);display:flex;align-items:center;
  justify-content:center;padding:12px 18px}
.sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor:hover{background:var(--teal)}
.sponsor.feat{flex:0 0 356px;height:104px;padding:16px 26px}
.sponsor.feat img{max-height:56px}
.sponsor-blurb{display:none}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding:44px 0 40px;margin-top:0}
.foot a{color:var(--paper)}
.foot a:hover{color:var(--accent-pale)}
.foot-top{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:baseline}
.foot .wordmark{color:var(--paper);font-size:24px}
.foot-note{font-family:var(--sans);font-size:12.5px;color:rgba(239,233,222,.62);max-width:52ch}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px;
  margin-top:34px;padding-top:26px;border-top:1px solid rgba(239,233,222,.25)}
.foot-cols h4{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(239,233,222,.68);margin-bottom:12px}
.foot-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  font-family:var(--sans);font-size:13.5px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  body{font-size:18px}
  .lead-plate{margin-top:0;max-width:none;padding-inline:0}
  .lead-frame img{height:clamp(260px,48vh,420px)}
  .salon{grid-template-columns:repeat(4,minmax(0,1fr));height:auto;gap:10px}
  .salon figure{height:150px}
  .salon .s1,.salon .s2,.salon .s3,.salon .s4,.salon .s5,.salon .s6,.salon .s7{height:150px;transform:none}
  .salon-fig{padding-bottom:0}
  .salon-line,.salon-line-label{display:none}
  .fig-inset{max-width:100%}
  .cat-list li{grid-template-columns:minmax(0,1fr)}
  .cat-list .c-fig{max-width:340px}
  .body-grid{grid-template-columns:minmax(0,1fr)}
  .body-grid > *,.body-grid h2{grid-column:1}
  .body-grid > .col-wide,.body-grid > .col-full{grid-column:1}
  .fig-band figcaption{padding-inline:0}
  .cat-head{grid-template-columns:minmax(0,1fr)}
  .cat-no{font-size:64px}
}
@media (max-width:640px){
  .mast-nav{gap:4px 20px;justify-content:flex-start}
  .mast-nav a{font-size:15px}
  .sponsor,.sponsor.feat{flex:1 1 100%;height:88px}
  .sponsor.feat{height:100px}
  .body-grid p{font-size:18px}
  .fig-float{float:none;width:100%;margin:1.6em 0}
  .body-grid > p.opening{font-size:19px}
  .tree li{grid-template-columns:38px minmax(0,1fr)}
  .statblock{grid-template-columns:minmax(0,1fr);gap:6px}
  .timeline li{grid-template-columns:minmax(0,1fr)}
  .salon{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* comfortable hit targets on navigation and index links */
  .mast-nav a,.mast-util a,.foot-cols ul a,.sec-index ul a,.toc a,.mast-sub a,
  .related-links a,.further-grid a,.dl-contact dd a,.cat-list .c-meta + a,
  .band-note a,.datum-label + a{min-height:44px;display:flex;align-items:center}
  .mast-nav a{padding-bottom:0}
  .further-grid a,.related-links a{display:block;padding-top:8px;min-height:0}
  .foot-cols ul{gap:2px}
}
@media print{
  .mast-nav,.mast-sub,.sponsors,.foot-cols{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-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 */
/* gfineartdc: the supporter rows were ragged — 4 principal tiles wrapped 3+1 and 8 supporters
   wrapped 5+3, each leaving a dead gap of 200–600px at the end of a row.
   Cause is OURS: the fleet-wide sp-tile-uniform guard sets .sponsor{flex-grow:0!important}, which
   forbids a tile from taking up the slack. Let them grow HERE ONLY, with a min-width chosen so the
   wrap lands evenly: 300px gives 4 per row in a 1328px container (4x300+36 fits, 5 does not).
   Measured after: principal 3+1 -> 4 (row ends 1328/1328), supporters 5+3 -> 4+4. */
[data-partner].sponsor,[data-partner].sponsor-box,
.sponsor-row [data-partner],.sponsor-band [data-partner]{
  flex-grow:1!important; flex-basis:0!important; min-width:300px;
}

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

/* op-nav-collapse: this nav printed 154px of stacked links at 390 before any content
   (5 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 "inset-box", 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 (20px measured) the button carries the build's
   gutter (clamp(20px,4vw,56px)) 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 (940px here), where the button appears and the nav starts closed.
   Folded with the "height-clip" technique and marked with the "dots" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-switch{display:none}
@media (max-width:940px){
  .menu-switch{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;border:1px solid currentColor;border-radius:2px;padding:10px 15px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .menu-switch-bars{width:13px;height:3px;flex:none;border-radius:99px;background:currentColor;box-shadow:5px 0 0 -0.5px currentColor,-5px 0 0 -0.5px currentColor}
  .mast-nav{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .menu-switch-c:checked ~ .mast-nav{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .shell:has(> .menu-switch){display:flow-root}
  .menu-switch:not(:has(~ .mast-nav)){display:none}
}

/* op-overflow-grid: article.card.card--flat overhung the viewport by 20px at 360
   (index.html) — measured width 360px reaching x=380, white-space:normal,
   min-width:auto, inside div.sel.sel--two (grid/nowrap).
   Closed at the element that causes it, at phone widths only. */
@media (max-width:640px){
  .sel.sel--two{grid-template-columns:minmax(0,1fr)}
}

/* op-overflow-grid: figure.fig-plate overhung the viewport by 20px at 320 on
   index.html — width 320px reaching x=340, white-space:normal,
   min-width:auto, inside div.shell (grid/nowrap,
   tracks 320px). Closed at the element that causes it, phone
   widths only. */
@media (max-width:640px){
  .shell{grid-template-columns:minmax(0,1fr)}
}

/* op-overflow-grid: figure.fig-plate overhung the viewport by 20px at 320 on
   index.html — width 320px reaching x=340, white-space:normal,
   min-width:auto, inside div.shell (grid/nowrap,
   tracks 320px). Closed at the element that causes it, phone
   widths only, escalated because the first declaration lost the cascade. */
@media (max-width:640px){
  .shell{grid-template-columns:minmax(0,1fr)!important}
}

/* op-footer-compact: the footer printed 22 rows for 22 link(s) in
   5 list(s) — 1555px at 390, 15% 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 1555 -> 895px (42% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(8px,1.94vw,28px)!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:28px}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1224px at 390, 13% of the whole page. Two columns bring it to
   600px (51% shorter). Checked before writing: no new overflow, smallest mark still
   113px wide, longest blurb 0 lines, tile heights 88-100px.
   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.
   Only the tier(s) that were one-per-row are touched (.sponsor-wall), 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-wall{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .sponsor-wall > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-wall > * *{min-width:0!important;max-width:100%}
    .sponsor-wall img,.sponsor-wall svg{max-width:100%;height:auto}
}

/* op-article-width: the article column was capped at 608px (70 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "minmax(0px, 1fr) min(64ch, 100%) minmax(0px, 1fr)" (declared in .body-grid) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1280 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1280px){
  div.body-grid{grid-template-columns:minmax(0px, 1fr) min(881px, calc(100% - 112px)) minmax(0px, 1fr)!important}
}
@media (min-width:1600px){
  div.body-grid{grid-template-columns:minmax(0px, 1fr) min(clamp(881px, 61.181vw, 1057px), calc(100% - 112px)) minmax(0px, 1fr)!important}
  div.body-grid > :is(p.toc-lbl, p:not([class])){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.card > figure.card-fig > img,
  article.card.card--lead > figure.card-fig > img,
  div.salon > figure.s1 > img,
  div.salon > figure.s2 > img,
  div.salon > figure.s3 > img,
  div.salon > figure.s4 > img,
  div.salon > figure.s5 > img,
  div.salon > figure.s6 > img,
  div.salon > figure.s7 > img,
  figure.col-full.fig-band > div.fig-img > img,
  figure.col-wide.fig-plate > div.fig-img > img,
  figure.col-wide.fig-plate.fig-plate--lead > div.fig-img > img,
  figure.fig-float > div.fig-img > img,
  figure.fig-inset.fig-inset--right > div.fig-img > img,
  figure.fig-plate > div.fig-img > img,
  li > figure.c-fig > img,
  main > section.lead-frame > img){height:auto}
/* op-img-dims:end */