/* ===========================================================
   Computational Mechanics — wccm-eccm-ecfd2014.org
   Direction 1B "Cut it into pieces"

   PALETTE — five members, each with a job
     --ground   #16191c  graphite  ground of the site's chrome and front page
     --ink      #e9e6df  chalk     type on the ground
     --paper    #f2efe8  paper     ground of the reading pages
     --accent   #e03c1c  vermilion saturated; statement bands, kickers, rules
     --second   #2ec4c9  cyan      saturated; figure rules, panels, links
   The two saturated members sit ~170 degrees apart in hue and both get real
   area (the vermilion statement band, the cyan plate panels), not just rules.
   =========================================================== */

:root {
  --ground:      #16191c;
  --ground-2:    #101215;
  --panel:       #1e2226;
  --ink:         #e9e6df;
  --ink-2:       #cfcbc2;
  --ink-3:       #8d8a82;
  --ink-4:       #8a8780;   /* quietest TEXT on the graphite ground: 4.6:1 */
  --rule:        #2b2f33;
  --rule-2:      #3a3e42;

  --paper:       #f2efe8;
  --paper-2:     #e7e3da;
  --paper-ink:   #1a1d20;
  --paper-ink-2: #43474a;
  --paper-ink-3: #6b675f;
  --paper-rule:  #cec9be;

  --accent:      #e03c1c;   /* areas, large type */
  --accent-lite: #f04a26;   /* small type on the graphite ground */
  --accent-deep: #9e2c14;   /* the saturated AREA: oxide, chalk type on top */
  --accent-ink:  #b32b0e;   /* small type on paper AND on the mat ground */
  --second:      #2ec4c9;
  --second-ink:  #10707a;   /* small type on paper */
  --ink-panel:   #a09c93;   /* quiet type on the lighter panel grounds */
  --accent-panel:#f4593a;   /* small accent type on the lighter panel grounds */

  --display: "Zilla Slab", Georgia, serif;
  --body: "Spectral", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* type scale */
  --t-mono:   0.72rem;   /* 11.5px kickers */
  --t-meta:   0.9rem;    /* 14.4px */
  --t-small:  1rem;      /* 16px  captions */
  --t-body:   1.2rem;   /* 18.4px */
  --t-lead:   1.4rem;
  --t-h3:     1.6rem;
  --t-h2:     2.25rem;
  --t-h1:     3.4rem;
  --t-mega:   4.4rem;

  --spine: 306px;
  --measure: 760px;   /* px, not ch: ch resolves per-element font and broke the h2 rules */
  --pad-art: clamp(22px, 6vw, 96px);
  --gap: clamp(20px, 3.2vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  text-wrap: pretty;
}

img { max-width: 100%; display: block; }

a { color: var(--second); text-decoration: none; }
a:hover { color: var(--accent-lite); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; letter-spacing: -0.012em; margin: 0; }

.kicker {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-lite);
  display: flex;
  align-items: center;
  gap: 9px;
}
.kicker .ico { color: var(--second); }

.ico { flex: 0 0 auto; }
.ico-lg { width: 34px; height: 34px; }

/* ---------- shell: the spine ---------- */

.shell { display: flex; align-items: flex-start; min-height: 100vh; }

.spine {
  flex: 0 0 var(--spine);
  width: var(--spine);
  align-self: stretch;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--ground-2);
  border-right: 1px solid var(--rule);
  padding: 30px 24px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.masthead { display: block; color: var(--ink); }
.masthead:hover { color: var(--ink); }
.masthead h1,
.masthead .m-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.95rem;
  line-height: 0.98;
  margin: 11px 0 0 0;
  letter-spacing: -0.015em;
}
.masthead .m-domain {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 9px;
  display: block;
}

.spine-nav { display: flex; flex-direction: column; gap: 15px; }
.spine-sec > a {
  display: flex; gap: 9px; align-items: baseline;
  font-family: var(--display); font-weight: 500;
  font-size: 0.97rem; line-height: 1.24; color: var(--ink);
}
.spine-sec > a:hover { color: var(--accent-lite); }
.spine-sec .n { font-family: var(--mono); font-size: 0.74rem; color: var(--accent-lite); flex: 0 0 auto; }
.spine-sec .ico { width: 17px; height: 17px; color: var(--second); position: relative; top: 3px; }
.spine-sub { list-style: none; margin: 4px 0 0 0; padding: 0 0 0 26px; }
.spine-sub li { margin: 2px 0; }
.spine-sub a {
  font-family: var(--body); font-size: 0.86rem; line-height: 1.45;
  color: var(--ink-3);
}
.spine-sub a:hover, .spine-sub a[aria-current="page"] { color: var(--ink); }
.spine-foot { margin-top: auto; border-top: 1px solid var(--rule); padding-top: 15px; }
.spine-foot a { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 6px; }
.spine-foot p { font-size: 0.8rem; line-height: 1.5; color: var(--ink-4); margin: 12px 0 0 0; }

.main { flex: 1 1 auto; min-width: 0; }

/* ---------- bands ---------- */

.band { padding: clamp(30px, 4vw, 54px) var(--gap); border-bottom: 1px solid var(--rule); }
.band--tight { padding-block: clamp(22px, 2.4vw, 32px); }
.band--flush { padding: 0; border-bottom: 0; }
.band--statement { background: var(--accent-deep); color: var(--ink); border-bottom: 0; }
.band--panel { background: var(--panel); }

/* lead plate */
.plate-lead { padding: clamp(30px, 4vw, 52px) var(--gap) 0 var(--gap); }
.plate-lead h2 {
  font-weight: 300;
  font-size: clamp(2rem, 4.2vw, var(--t-mega));
  line-height: 1.0;
  max-width: 22ch;
  margin: 14px 0 0 0;
}
.plate-figure { padding: 22px var(--gap) 34px var(--gap); }
.plate-figure svg { width: 100%; height: auto; display: block; color: var(--ink-3); }
.plate-anno { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--second); text-align: right; margin: 0 0 6px 0; }
.plate-key { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 5.26%; margin-top: 12px; }
.plate-key div { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--rule); padding-top: 8px; }
.plate-key span { font-family: var(--mono); font-size: 0.74rem; line-height: 1.35; color: var(--ink-3); }
.plate-key span + span { color: var(--ink-4); }
.plate-note {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4); margin: 0 0 12px 0;
}

.lead-cta { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: baseline; margin-top: 6px; }
.lead-cta a { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0.04em; }

/* flagship */
.flagship { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 46px); align-items: start; }
.flagship h2 { font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.04; font-weight: 400; margin: 12px 0 0 0; }
.flagship .lead-in { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); margin: 16px 0 0 0; }
.flagship .more { display: inline-block; margin-top: 18px; font-family: var(--mono); font-size: var(--t-meta); border-bottom: 1px solid currentColor; }

.statement p {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: 1.14;
  max-width: 46ch;
}
.statement .src { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.1em; text-transform: uppercase; margin: 18px 0 0 0; color: var(--ink); border-top: 1px solid rgba(233,230,223,.4); padding-top: 12px; display: block; }

/* two seconds */
.seconds { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(26px, 3vw, 52px); align-items: stretch; }
.seconds > div { display: flex; flex-direction: column; }
.seconds .s-no { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-lite); }
.seconds h3 { font-size: var(--t-h3); line-height: 1.14; font-weight: 400; margin: 10px 0 0 0; }
.seconds p { font-size: var(--t-small); line-height: 1.55; color: var(--ink-3); margin: 9px 0 22px 0; }
.seconds a { color: var(--ink); }
.seconds a:hover { color: var(--accent-lite); }

/* full-bleed band with copy over it */
.bleed { position: relative; }
.bleed img { width: 100%; height: clamp(300px, 42vw, 520px); object-fit: cover; }
.bleed .scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,25,28,.96) 0%, rgba(22,25,28,.9) 52%, rgba(22,25,28,.66) 78%, rgba(22,25,28,.42) 100%); }
.bleed .bleed-body { position: absolute; inset: auto auto 0 0; padding: var(--gap); width: min(620px, 92%); }
.bleed h2 { font-size: clamp(1.7rem, 2.6vw, 2.6rem); line-height: 1.05; font-weight: 300; margin: 12px 0 0 0; }
.bleed p { color: var(--ink-2); font-size: var(--t-small); margin: 12px 0 0 0; }
.bleed .credit { margin: 0; padding: 9px var(--gap) 0 var(--gap); background: var(--ground); font-family: var(--mono); font-size: 0.72rem; color: var(--ink-4); letter-spacing: 0.04em; }

/* short group */
.short-group { list-style: none; margin: 18px 0 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 40px; }
.short-group li { border-top: 1px solid var(--rule); padding-top: 13px; }
.short-group a { font-family: var(--display); font-size: 1.2rem; line-height: 1.2; color: var(--ink); display: block; }
.short-group a:hover { color: var(--accent-lite); }
.short-group p { font-size: 0.95rem; line-height: 1.5; color: var(--ink-3); margin: 7px 0 0 0; }

/* section index (4 sections, icon + blurb) */
.sec-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px 38px; margin-top: 22px; }
.sec-card { display: block; border-top: 2px solid var(--second); padding-top: 15px; color: var(--ink); }
.sec-card .ico { width: 30px; height: 30px; color: var(--second); }
.sec-card h3 { font-size: 1.28rem; line-height: 1.16; font-weight: 500; margin: 12px 0 0 0; }
.sec-card p { font-size: 0.95rem; color: var(--ink-3); margin: 7px 0 0 0; line-height: 1.5; }
.sec-card .count { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); display: block; margin-top: 10px; }
.sec-card:hover { color: var(--ink); }
.sec-card:hover h3 { color: var(--accent-lite); }

.band-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px; }
.band-head h2 { font-size: var(--t-h2); font-weight: 300; line-height: 1.1; }
.band-head .all { font-family: var(--mono); font-size: var(--t-meta); }

/* ---------- supporters ---------- */

.supporters { background: var(--ground-2); border-top: 1px solid var(--rule); padding: clamp(28px, 3.4vw, 46px) var(--gap); }
.supporters h2 { font-size: 1.35rem; font-weight: 500; }
.supporters .sup-intro { font-size: var(--t-small); color: var(--ink-3); max-width: 62ch; margin: 10px 0 0 0; }
.sup-tier { margin-top: 26px; }
.sup-tier-label { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-lite); border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 18px; }
.sup-grid { display: grid; grid-template-columns: repeat(auto-fit, 244px); justify-content: space-between; gap: 18px; }
.sponsor {
  width: 244px;
  min-height: 128px;
  background: var(--panel);
  border: 1px solid var(--rule-2);
  border-top: 2px solid var(--rule-2);
  padding: 15px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink);
}
.sponsor:hover { border-top-color: var(--accent); color: var(--ink); }
.sponsor.feat { border-top-color: var(--second); background: #22282c; }
.sponsor img { max-height: 44px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.sponsor-name { font-family: var(--display); font-weight: 500; font-size: 1.05rem; line-height: 1.2; }
.sponsor-blurb { font-size: 0.86rem; line-height: 1.45; color: var(--ink-panel); margin-top: auto; }

/* ---------- footer ---------- */

.foot { background: var(--ground-2); border-top: 1px solid var(--rule); padding: clamp(26px, 3vw, 42px) var(--gap); display: flex; flex-wrap: wrap; gap: 30px 56px; align-items: flex-start; justify-content: space-between; }
.foot .f-brand { display: flex; align-items: center; gap: 12px; }
.foot .f-brand span { font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.foot p { font-size: 0.9rem; color: var(--ink-3); margin: 12px 0 0 0; max-width: 44ch; }
.foot nav { display: flex; gap: 36px; }
.foot ul { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; line-height: 1.85; }
.foot ul a { color: var(--ink-3); }
.foot ul a:hover { color: var(--ink); }
.foot .f-label { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); display: block; margin-bottom: 7px; }

/* ---------- category / hub ---------- */

.cat-hero { position: relative; }
.cat-hero img { width: 100%; height: clamp(240px, 34vw, 420px); object-fit: cover; }
.cat-hero .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,25,28,.28) 0%, rgba(22,25,28,.86) 74%, rgba(22,25,28,.97) 100%); }
.cat-hero .cat-title { position: absolute; inset: auto 0 0 0; padding: var(--gap); }
.cat-hero h1 { font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 300; line-height: 1.0; margin: 12px 0 0 0; max-width: 26ch; }
.cat-intro { font-size: var(--t-lead); line-height: 1.55; color: var(--ink-2); max-width: 66ch; margin: 0; }

.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li { border-top: 1px solid var(--rule); }
.cat-list li:last-child { border-bottom: 1px solid var(--rule); }
.cat-list a { display: grid; grid-template-columns: 46px minmax(0, 1fr) 170px; gap: 22px; align-items: start; padding: 20px 0; color: var(--ink); }
.cat-list a:hover { color: var(--ink); background: rgba(46,196,201,.05); }
.cat-list a:hover .cl-title { color: var(--accent-lite); }
.cat-list .cl-n { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-4); padding-top: 5px; }
.cat-list .cl-title { font-family: var(--display); font-size: 1.5rem; line-height: 1.14; font-weight: 400; display: block; }
.cat-list .cl-brief { font-size: var(--t-small); line-height: 1.5; color: var(--ink-3); margin: 7px 0 0 0; max-width: 62ch; }
.cat-list .cl-thumb { width: 170px; height: 106px; object-fit: cover; }

.hub-sec { margin-bottom: 44px; }
.hub-sec h2 { font-size: var(--t-h2); font-weight: 300; }
.hub-sec .hub-blurb { color: var(--ink-3); font-size: var(--t-small); margin: 8px 0 18px 0; }

/* ---------- reading pages (paper) ---------- */

body.paper { background: var(--paper); color: var(--paper-ink); }
body.paper .main { background: var(--paper); }
body.paper a { color: var(--second-ink); }
body.paper a:hover { color: var(--accent-ink); }

/* the chrome keeps the graphite palette on the paper reading pages */
body.paper .spine, body.paper .foot { color: var(--ink); }
body.paper .spine a, body.paper .masthead { color: var(--ink); }
body.paper .spine a:hover { color: var(--accent-lite); }
body.paper .spine .spine-sub a { color: var(--ink-3); }
body.paper .spine .spine-sub a:hover,
body.paper .spine .spine-sub a[aria-current="page"] { color: var(--ink); }
body.paper .spine-foot a { color: var(--second); }
body.paper .foot a { color: var(--ink-3); }
body.paper .foot a:hover { color: var(--ink); }
body.paper .foot > div p a { color: var(--second); }

.art-head, .art-body, .art-tail { max-width: 1100px; margin-inline: auto; }
.art-head { padding: clamp(36px, 5vw, 76px) var(--pad-art) 0 var(--pad-art); }
.art-head .kicker { color: var(--accent-ink); }
.art-head .kicker .ico { color: var(--second-ink); }
.art-head h1 {
  font-weight: 300;
  font-size: clamp(2.1rem, 4.4vw, var(--t-h1));
  line-height: 1.02;
  margin: 16px 0 0 0;
  max-width: 30ch;
}
.standfirst {
  font-size: clamp(1.2rem, 1.8vw, var(--t-lead));
  line-height: 1.5;
  color: var(--paper-ink-2);
  max-width: 58ch;
  margin: 20px 0 0 0;
  font-weight: 400;
}
.art-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; margin: 30px 0 0 0; padding-top: 16px; border-top: 1px solid var(--paper-rule); font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-ink-3); }
.art-meta a { color: var(--paper-ink-3); }
.art-meta a:hover { color: var(--accent-ink); }

.art-body { padding: 0 var(--pad-art) clamp(40px, 5vw, 84px) var(--pad-art); }
.art-body > * { max-width: var(--measure); }
.art-body > .fig-bleed, .art-body > .plate, .art-body > .pullquote { max-width: none; }
.art-body p { font-size: var(--t-body); line-height: 1.78; margin: 0 0 1.3em 0; }
.art-body h2 {
  font-size: clamp(1.5rem, 2.3vw, var(--t-h2));
  font-weight: 500;
  line-height: 1.14;
  margin: 2.7em 0 0.75em 0;
  padding-top: 0.65em;
  border-top: 2px solid var(--paper-ink);
  max-width: var(--measure);
}
.art-body h3 { font-size: var(--t-h3); margin: 2em 0 0.5em 0; }
.art-body ul, .art-body ol { font-size: var(--t-body); line-height: 1.7; padding-left: 1.25em; margin: 1.6em 0; }
.art-body li { margin-bottom: 0.4em; }
.art-body em { font-style: italic; }
.art-body a { border-bottom: 1px solid rgba(16,112,122,.4); }
.art-body a:hover { border-bottom-color: var(--accent-ink); }

/* ---------- figure system — three treatments, one drawing system ----------
   1 .fig-mat    image on a mat with an inset hairline, caption beneath
   2 .fig-bleed  breaks the measure edge to edge, caption in a side margin
   3 .fig-step   narrower image stepped out of the column, caption hanging beside
   All three share: a 2px cyan foot rule on the image, a mono vermilion kicker
   on the caption, and the credit as a smaller quieter line beneath it.
   -------------------------------------------------------------------------- */

figure { margin: 0; }
.figcap { margin-top: 15px; }
.figcap .fk { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); display: block; }
.figcap .ftext { font-size: var(--t-small); line-height: 1.5; margin: 6px 0 0 0; max-width: 56ch; }
.figcap .fcredit { font-family: var(--mono); font-size: 0.72rem; line-height: 1.5; letter-spacing: 0.04em; color: var(--paper-ink-3); margin: 7px 0 0 0; display: block; }
.fig-rule { height: 2px; background: var(--second); }

.fig-mat { margin: 3em 0; background: var(--paper-2); padding: clamp(16px, 1.8vw, 26px); }
.fig-mat .fr { border: 1px solid var(--paper-rule); padding: 8px; }
.fig-mat img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.fig-mat .figcap { padding: 0 2px; }

.fig-bleed { margin: 3.4em 0; }
.fig-bleed img { width: 100%; aspect-ratio: 24 / 9; object-fit: cover; }
.fig-bleed .fb-cap { display: grid; grid-template-columns: 200px minmax(0, 58ch); gap: 20px clamp(20px, 4vw, 56px); margin-top: 15px; }
.fig-bleed .fb-cap .fk { color: var(--accent-ink); }

.fig-step { margin: 3em 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 38px); align-items: end; }
.fig-step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fig-step .figcap { margin: 0; }

/* dark grounds reuse the same system with the palette flipped */
body:not(.paper) .figcap .fk { color: var(--accent-panel); }
body:not(.paper) .figcap .fcredit { color: var(--ink-3); }
body:not(.paper) .fig-mat { background: var(--panel); }
body:not(.paper) .fig-mat .fr { border-color: var(--rule-2); }

/* ---------- plates: the Notes-for-Design material, breaking the prose ---------- */

.plate {
  margin: 3.4em 0;
  background: var(--ground);
  color: var(--ink);
  padding: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 46px);
  border-top: 3px solid var(--accent);
}
.plate .p-kicker { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--second); }
.plate h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 400; margin: 10px 0 0 0; max-width: 34ch; }
.plate ol { list-style: none; counter-reset: pl; margin: 24px 0 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px 40px; }
.plate ol li { counter-increment: pl; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.plate ol li::before { content: counter(pl, decimal-leading-zero); font-family: var(--mono); font-size: 0.72rem; color: var(--accent-lite); padding-top: 4px; }
.plate ol li b, .plate ol li strong { color: var(--ink); font-weight: 500; }
.plate--cyan { border-top-color: var(--second); }
.plate--cyan .p-kicker { color: var(--accent-lite); }

/* ---------- components (styleguide + article furniture) ---------- */

.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--paper-ink-2); }

.pullquote { margin: 3.4em 0; padding: clamp(28px, 3.2vw, 44px) clamp(24px, 3.2vw, 46px); background: var(--accent-deep); color: var(--ink); }
.pullquote p { font-family: var(--display); font-weight: 300; font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.16; margin: 0; max-width: 40ch; }

.blockquote { margin: 2em 0; padding-left: 22px; border-left: 3px solid var(--second); }
.blockquote p { font-family: var(--display); font-size: 1.3rem; line-height: 1.35; margin: 0; }
.blockquote cite { display: block; margin-top: 10px; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.08em; font-style: normal; color: var(--paper-ink-3); }

.callout { margin: 2em 0; background: var(--paper-2); border-top: 3px solid var(--second); padding: 20px 24px; }
.callout p { margin: 0; font-size: var(--t-small); line-height: 1.6; }
.callout p + p { margin-top: 0.7em; }

.note { font-size: var(--t-small); line-height: 1.55; color: var(--paper-ink-2); padding-left: 18px; border-left: 2px solid var(--accent-ink); margin: 1.6em 0; }

table { border-collapse: collapse; width: 100%; }
.versus, .datatable { margin: 2em 0; font-size: var(--t-small); display: block; overflow-x: auto; }
.versus table, .datatable table { min-width: 460px; }
.versus th, .datatable th, .versus td, .datatable td { text-align: left; padding: 11px 14px 11px 0; vertical-align: top; }
.versus thead th, .datatable thead th { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 2px solid var(--paper-ink); font-weight: 400; }
.versus tbody tr, .datatable tbody tr { border-bottom: 1px solid var(--paper-rule); }
.versus tbody th { font-family: var(--display); font-weight: 500; font-size: 1.02rem; padding-right: 18px; }
.datatable td.num { font-family: var(--mono); font-size: 0.92rem; }

.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2px; margin: 2.2em 0; background: var(--paper-rule); }
.statblock { background: var(--paper); padding: 20px 20px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.stat-num { font-family: var(--display); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--accent-ink); }
.stat-label { font-size: 0.92rem; line-height: 1.45; color: var(--paper-ink-2); }

.timeline { list-style: none; counter-reset: tl; margin: 2.2em 0; padding: 0; border-left: 2px solid var(--paper-rule); }
.timeline li { display: grid; grid-template-columns: minmax(110px, 190px) minmax(0, 1fr); gap: 8px 22px; padding: 0 0 22px 22px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 8px; width: 10px; height: 10px; background: var(--paper); border: 2px solid var(--accent-ink); }
.timeline .t-when { font-family: var(--mono); font-size: 0.82rem; line-height: 1.45; color: var(--accent-ink); letter-spacing: 0.02em; }
.timeline .t-what { font-size: var(--t-small); line-height: 1.5; }

.chart { margin: 2.2em 0; overflow-x: auto; }
.chart svg { width: 100%; min-width: 620px; max-width: 700px; height: auto; overflow: hidden; }
.chart figcaption { font-size: 0.95rem; line-height: 1.5; color: var(--paper-ink-2); margin-top: 12px; border-top: 1px solid var(--paper-rule); padding-top: 10px; }
.chart .c-label { font-family: var(--mono); font-size: 13px; fill: var(--paper-ink-3); }
.chart .c-val { font-family: var(--mono); font-size: 13px; fill: var(--paper-ink); }

.article-figure { margin: 2.2em 0; background: var(--paper-2); padding: 16px; }
.article-figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.article-figure figcaption { font-size: var(--t-small); line-height: 1.5; margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--second); }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 2.2em 0; }
.gallery figure { display: flex; flex-direction: column; }
.gallery img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.gallery figcaption { font-size: 0.88rem; line-height: 1.45; color: var(--paper-ink-2); margin-top: 8px; }

.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 2.2em 0; }
.profile-card { background: var(--paper-2); padding: 20px; display: flex; flex-direction: column; gap: 8px; border-top: 2px solid var(--paper-ink); }
.profile-card .p-photo { width: 100%; aspect-ratio: 1; object-fit: cover; }
.profile-card h3 { font-size: 1.2rem; font-weight: 500; line-height: 1.2; }
.profile-card .p-role { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); margin: 0; }
.profile-card p { font-size: 0.95rem; line-height: 1.55; margin: 0; }
.profile-card .p-links { font-family: var(--mono); font-size: 0.8rem; margin-top: auto; }
.profile-card .p-attr { font-family: var(--mono); font-size: 0.74rem; color: var(--paper-ink-3); }
.profile-card.no-photo { border-top-color: var(--second); }

.org-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 2.2em 0; }
.org-card { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; background: var(--paper-2); border-left: 3px solid var(--second); color: var(--paper-ink); }
.org-card:hover { border-left-color: var(--accent-ink); color: var(--paper-ink); }
.org-card .org-logo { max-height: 34px; width: auto; object-fit: contain; margin-bottom: 6px; }
.org-card .org-name { font-family: var(--display); font-weight: 500; font-size: 1.05rem; line-height: 1.2; }
.org-card .org-host { font-family: var(--mono); font-size: 0.74rem; color: var(--paper-ink-3); }

.entity-ref { border-bottom: 1px solid rgba(16,112,122,.45); overflow-wrap: anywhere; }

.further-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 2.2em 0; }
.further-grid a { display: flex; flex-direction: column; min-height: 104px; padding: 16px 18px; background: var(--paper-2); border-top: 2px solid var(--accent-ink); font-family: var(--display); font-size: 1.1rem; line-height: 1.2; color: var(--paper-ink); }
.further-grid a:hover { color: var(--accent-ink); }

.related-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.related-links li { border-top: 1px solid var(--paper-rule); padding-top: 16px; }
.related-links a { font-family: var(--display); font-size: 1.15rem; line-height: 1.2; color: var(--paper-ink); border: 0; display: block; }
.related-links a:hover { color: var(--accent-ink); }
.related-links .rl-sec { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-ink-3); display: block; margin-bottom: 6px; }

.art-tail { padding: 0 var(--pad-art) clamp(44px, 5vw, 84px) var(--pad-art); }
.art-tail h2 { font-family: var(--display); font-size: 1.2rem; font-weight: 500; margin: 0 0 22px 0; padding-bottom: 12px; border-bottom: 2px solid var(--paper-ink); }

/* collapsible long list, CSS only */
.expander { border-top: 1px solid var(--paper-rule); margin-top: 14px; }
.expander summary { cursor: pointer; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 0; color: var(--accent-ink); }
.expander[open] summary { color: var(--paper-ink-3); }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .flagship { grid-template-columns: 1fr; }
  .cat-list a { grid-template-columns: 34px minmax(0, 1fr); }
  .cat-list .cl-thumb { display: none; }
  .fig-step { grid-template-columns: 1fr; align-items: start; }
  .fig-bleed .fb-cap { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --measure: 100%; }
  .shell { display: block; }
  .spine {
    position: static; width: auto; max-height: none; overflow: visible;
    flex: none; border-right: 0; border-bottom: 1px solid var(--rule);
    padding: 22px var(--gap) 24px var(--gap);
  }
  /* the spine is a permanent edge on desktop; in flow on a phone it became a 968px
     block above the lead, so the four sections become a swipeable row of columns
     instead — every section link and every page link stays in place */
  .spine-nav { display: grid; grid-auto-flow: column; grid-auto-columns: 232px; gap: 0 26px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 12px; }
  .spine-sec { scroll-snap-align: start; border-top: 1px solid var(--rule); padding-top: 12px; }
  .spine-nav::-webkit-scrollbar { height: 4px; }
  .spine-nav::-webkit-scrollbar-thumb { background: var(--rule-2); }
  .spine-foot { margin-top: 4px; }
  .masthead { display: grid; grid-template-columns: 40px 1fr; align-items: center; column-gap: 14px; }
  .masthead svg { width: 40px; height: 40px; }
  .masthead .m-title, .masthead h1 { font-size: 1.75rem; margin: 0; }
  .masthead .m-domain { grid-column: 2; margin-top: 4px; }
  .spine { padding-block: 18px 16px; gap: 16px; }
  .spine-foot { border-top: 1px solid var(--rule); padding-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 26px; }
  .spine-foot a { margin-bottom: 0; }
  .spine-foot p { display: none; }
  .art-body > *, .art-body h2 { max-width: none; }
  .art-head, .art-body, .art-tail { --pad-art: clamp(20px, 5vw, 44px); }
}

@media (max-width: 620px) {
  :root { --t-body: 1.08rem; --gap: 18px; }
  .sup-grid { grid-template-columns: 1fr; }
  .sponsor { width: 100%; }
  .bleed .scrim { background: linear-gradient(180deg, rgba(22,25,28,.35) 0%, rgba(22,25,28,.9) 70%, rgba(22,25,28,.97) 100%); }
  .bleed .bleed-body { position: static; background: var(--ground); }
  .foot nav { flex-direction: column; gap: 22px; }
  .timeline li { grid-template-columns: 1fr; }
  .plate ol { grid-template-columns: 1fr; }
  .plate-key { grid-template-columns: 1fr 1fr; gap: 10px 18px; }
  .plate-anno { text-align: left; }
}

/* paper-ground variants of the dark-ground blocks (404, about, styleguide) */
body.paper .sec-card { color: var(--paper-ink); border-top-color: var(--second-ink); }
body.paper .sec-card .ico { color: var(--second-ink); }
body.paper .sec-card p { color: var(--paper-ink-3); }
body.paper .sec-card .count { color: var(--paper-ink-3); }
body.paper .sec-card:hover h3 { color: var(--accent-ink); }
body.paper .cat-intro { color: var(--paper-ink-2); }
body.paper .band { border-bottom-color: var(--paper-rule); }
body.paper .band-head h2 { color: var(--paper-ink); }
body.paper .short-group li { border-top-color: var(--paper-rule); }
body.paper .short-group a { color: var(--paper-ink); }
body.paper .cat-list li { border-top-color: var(--paper-rule); }
body.paper .cat-list li:last-child { border-bottom-color: var(--paper-rule); }
body.paper .cat-list a { color: var(--paper-ink); }
body.paper .cat-list .cl-brief, body.paper .cat-list .cl-n { color: var(--paper-ink-3); }
.foot nav ul { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.foot nav ul a { color: var(--ink-2); }

/* 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}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

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

/* op-fill-tracks: operator: too much spacing in the top row, widen the grids; the bottom rows
   also have too much padding between grids. The tracks were a FIXED repeat(auto-fit,244px) with
   justify-content:space-between, so every row spread its spare width into the gutters instead of
   the tiles. Fluid tracks of the same count fill the row and the gutter goes back to the gap. */
@media (min-width:900px){
  .sup-grid{grid-template-columns:repeat(auto-fit,minmax(244px,1fr));justify-content:stretch;gap:14px}
}

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

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

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

/* op-article-width: the article column was capped at 760px (89 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .art-body > *) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. The layout has no room to grow above 1600, so this width holds there. Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.art-body{--measure:min(872px, 100%)!important}
}
/* op-article-width:end */

/* op-hover-pad */
.cat-list a{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 500; letter-spacing: -0.012em; margin: 0px;}
.sec-card h2:where(.rt-h3){font-size: 1.28rem; line-height: 1.16; font-weight: 500; margin: 12px 0px 0px;}
.sec-card:hover h2:where(.rt-h3){color: var(--accent-lite);}
.art-body h2:where(.rt-h3){font-size: var(--t-h3); margin: 2em 0px 0.5em;}
body.paper .sec-card:hover h2:where(.rt-h3){color: var(--accent-ink);}
h1:where(.rt-h2){font-family: var(--display); font-weight: 500; letter-spacing: -0.012em; margin: 0px;}
.plate-lead h1:where(.rt-h2){font-weight: 300; font-size: clamp(2rem, 4.2vw, var(--t-mega)); line-height: 1; max-width: 22ch; margin: 14px 0px 0px;}
h2.rt-h3.rt-h3{height:29.6875px;padding-top:0px;border-top-width:0px;border-top-style:none;max-width:none}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.art-body > figure.fig-bleed > img,
  figure.fig-mat > div.fr > img,
  figure.fig-step > div > img,
  li > a > img.cl-thumb,
  main.main > div.cat-hero > img,
  main.main > section.bleed > img){height:auto}
/* op-img-dims:end */
@media (min-width:1060px) and (max-width:1199px){.sup-grid.sup-grid:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(244px,calc(50% - 7px)),1fr))!important;justify-content:stretch!important}.sup-grid.sup-grid > [data-partner]{width:auto!important;max-width:none!important}}