/* =========================================================
   Vahid J. Sadeghi
   White and charcoal base, pine authority colour, gold for
   prestige signals only, steel-gray section washes.
   Per docs/website-strategy-roadmap.md, section 5.
   ========================================================= */

/* Self-hosted fonts: no third-party request, faster first paint, and the
   site keeps working if Google Fonts is blocked on a corporate network. */
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:450; font-display:swap;
  src:url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:550; font-display:swap;
  src:url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter Tight"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/inter-tight-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Inter Tight"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/inter-tight-latin-600-normal.woff2") format("woff2"); }

:root {
  --paper:      #ffffff;
  --wash:       #f4f7f9;   /* steel section background */
  --wash-2:     #eef3f6;
  --deep:       #101820;   /* charcoal */
  --deep-2:     #16202b;

  --ink:        #101820;
  --ink-soft:   #3a4652;
  --muted:      #5c6873;
  --line:       #dfe5ea;
  --line-soft:  #edf1f4;

  --pine:       #006b68;   /* authority colour */
  --pine-lt:    #00857f;
  --pine-wash:  #e8f2f1;
  --gold:       #b88a36;   /* prestige signals only */
  --gold-wash:  #faf4e7;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  --w: 1320px;
  --w-text: 690px;
  --r: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--pine); text-decoration: none; }
a:hover { color: var(--pine-lt); text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 600; line-height: 1.12;
  letter-spacing: -0.028em; color: var(--ink); margin: 0 0 .5em;
}
h1 { font-size: clamp(2.5rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.02em; }
h4 { font-size: .98rem; font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ---------- layout ---------- */
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 30px; }
.measure { max-width: var(--w-text); }
.narrow { max-width: 780px; }

section { padding: 84px 0; }
section.tight { padding: 52px 0; }
section.wash { background: var(--wash); }
section.pine { background: var(--pine-wash); }
section.deep { background: var(--deep); color: #c3ccd4; }
section.deep h1, section.deep h2, section.deep h3, section.deep h4 { color: #fff; }
section.deep a { color: #6fd0c9; }
section.deep p { color: #b6c0c9; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.eyebrow {
  font-size: .7rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 16px;
}
.eyebrow.pine { color: var(--pine); }
.eyebrow.gold { color: var(--gold); }
section.deep .eyebrow { color: #7f96a8; }

.lede { font-size: clamp(1.06rem, 1.7vw, 1.22rem); line-height: 1.5;
  color: var(--ink-soft); letter-spacing: -.012em; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line-soft); }
.header-inner { display: flex; align-items: center; justify-content: space-between;
  gap: 18px; min-height: 66px; }
.brand { font-family: var(--display); font-weight: 600; font-size: 1.04rem;
  letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.brand:hover { text-decoration: none; color: var(--pine); }
.brand .brand-txt > span { display: block; font-weight: 500; font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin-top: 2px; }

.nav { display: flex; align-items: center; gap: 17px; }
.nav a { font-size: .82rem; font-weight: 450; color: var(--ink-soft);
  padding: 4px 0; border-bottom: 1.5px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--pine); text-decoration: none; border-bottom-color: var(--line); }
.nav a.active { color: var(--ink); border-bottom-color: var(--pine); }
.nav a.track { border: 1px solid var(--pine); border-radius: var(--r);
  padding: 6px 13px; color: var(--pine); }
.nav a.track:hover, .nav a.track.active { background: var(--pine); color: #fff; }

.nav-toggle { display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--r); padding: 7px 11px; cursor: pointer; font-size: .8rem;
  color: var(--ink-soft); font-family: var(--sans); }

/* ---------- hero ---------- */
.hero { padding: 72px 0 60px; }
.hero-grid { display: grid; grid-template-columns: 1fr 330px; gap: 64px; align-items: center; }
.hero h1 { margin-bottom: 20px; }
.positioning { font-family: var(--display); font-weight: 500;
  font-size: clamp(1.2rem, 2.2vw, 1.62rem); line-height: 1.32; letter-spacing: -.028em;
  color: var(--pine); max-width: 20ch; margin-bottom: 24px; }
.hero .role { font-size: .93rem; color: var(--muted); margin-bottom: 28px; max-width: 48ch; }
.hero .role strong { color: var(--ink-soft); font-weight: 550; }

.portrait { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--r);
  background: var(--wash); }
.portrait-note { font-size: .72rem; color: var(--muted); margin-top: 10px; line-height: 1.45; }

/* ---------- buttons ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-block; font-size: .87rem; font-weight: 500; padding: 11px 20px;
  border-radius: var(--r); background: var(--pine); color: #fff; border: 1px solid var(--pine);
  transition: background .15s, border-color .15s; }
.btn:hover { background: var(--pine-lt); border-color: var(--pine-lt); color: #fff; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--pine); }
.btn.ghost:hover { background: var(--pine); color: #fff; }
section.deep .btn { background: #fff; color: var(--deep); border-color: #fff; }
section.deep .btn:hover { background: #d5dde3; border-color: #d5dde3; }
section.deep .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
section.deep .btn.ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---------- proof strip ---------- */
.proof { display: grid; grid-template-columns: repeat(6,1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.proof > div { background: var(--paper); padding: 22px 18px; }
.proof .n { font-family: var(--display); font-size: 1.85rem; font-weight: 600;
  letter-spacing: -.035em; line-height: 1; margin-bottom: 9px; }
.proof .l { font-size: .78rem; font-weight: 550; color: var(--ink-soft); line-height: 1.3;
  margin-bottom: 2px; }
.proof .s { font-size: .72rem; color: var(--muted); line-height: 1.3; }
section.wash .proof > div { background: var(--paper); }

/* ---------- cards & grids ---------- */
.g2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 30px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.g-wide { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; }
/* grid children default to min-width:auto, which stops an overflow-x container
   inside them from ever shrinking. Without this, wide figures push the page. */
.g2 > *, .g3 > *, .g4 > *, .g-wide > *, .shelf > * { min-width: 0; }

.card { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  padding: 26px 24px; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .9rem; color: var(--ink-soft); }

/* story cards */
.story-card { display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper); padding: 28px 26px 24px;
  transition: border-color .15s, transform .15s, box-shadow .15s; }
.story-card:hover { text-decoration: none; border-color: var(--pine);
  transform: translateY(-2px); box-shadow: 0 10px 30px rgba(16,24,32,.07); }
.story-card .kicker { font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pine); margin-bottom: 14px; }
.story-card h3 { color: var(--ink); margin-bottom: 10px; font-size: 1.14rem; }
.story-card p { font-size: .88rem; color: var(--ink-soft); margin-bottom: 16px; }
.story-card .go { margin-top: auto; font-size: .82rem; font-weight: 550; color: var(--pine); }

/* ---------- figures ---------- */
figure { margin: 0; }
.figure { margin: 36px 0; }
.figure figcaption { font-size: .83rem; color: var(--muted); margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--line-soft); max-width: 76ch; }
.figure .fig-title { font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }

.dg, .fig { width: 100%; height: auto; display: block; }
.dg-h  { font: 600 11px var(--sans); fill: #5c6873; letter-spacing: .12em; text-transform: uppercase; }
.dg-t  { font: 550 15px var(--sans); fill: #101820; }
.dg-s  { font: 400 12px var(--sans); fill: #5c6873; }
.dg-e  { font: 400 12px var(--sans); fill: #5c6873; }
.fig-lab  { font: 550 14px var(--sans); fill: #101820; }
.fig-sub  { font: 400 12px var(--sans); fill: #5c6873; }
.fig-val  { font: 550 13px var(--sans); fill: #3a4652; font-variant-numeric: tabular-nums; }
.fig-tick { font: 400 11px var(--sans); fill: #5c6873; font-variant-numeric: tabular-nums; }

/* ---------- reach map ---------- */
.reach-map { width: 100%; height: auto; display: block; }
.reach-map .rm-base path { fill: #e4eaee; stroke: var(--paper); stroke-width: .6; }
.reach-map .rm-hi path   { fill: var(--pine); stroke: var(--paper); stroke-width: .6; }
section.wash .reach-map .rm-base path { fill: #e0e8ec; stroke: var(--wash); }
section.wash .reach-map .rm-hi path { stroke: var(--wash); }
.map-key { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px 30px; margin-top: 30px; }
.map-key div { font-size: .83rem; font-weight: 550; color: var(--ink);
  padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.map-key span { display: block; font-size: .76rem; font-weight: 400; color: var(--muted); }

/* ---------- news cards ---------- */
.news { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.news-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
  padding: 24px 24px 22px; display: flex; flex-direction: column; }
.news-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.news-outlet { font-size: .69rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pine); }
.news-date { font-size: .73rem; color: var(--muted); }
.news-card h3 { font-size: 1.02rem; line-height: 1.3; margin-bottom: 10px; }
.news-card h3 a { color: var(--ink); }
.news-card h3 a:hover { color: var(--pine); }
.news-sum { font-size: .86rem; color: var(--ink-soft); margin-bottom: 14px; }
.news-link { border-top: 1px solid var(--line-soft); padding-top: 12px; margin-top: auto; }
.news-link .lab { font-size: .66rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px; }
.news-link p { font-size: .85rem; color: var(--ink); margin: 0; }

/* ---------- pathway ---------- */
.path { position: relative; padding-left: 30px; }
.path::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: linear-gradient(var(--pine), var(--line)); border-radius: 2px; }
.path-item { position: relative; padding-bottom: 30px; }
.path-item::before { content: ""; position: absolute; left: -30px; top: 6px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--paper); border: 2.5px solid var(--pine); }
section.wash .path-item::before { background: var(--wash); }
.path-when { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pine); margin-bottom: 4px; }
.path-item h4 { margin-bottom: 5px; font-size: 1.04rem; }
.path-item p { font-size: .88rem; color: var(--ink-soft); }

/* ---------- module board ---------- */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 14px; }
.module { border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px;
  background: var(--paper); }
.module.current { border-color: var(--pine); background: var(--pine-wash); }
.module .code { font-size: .68rem; font-weight: 600; letter-spacing: .1em; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.module h4 { font-size: .93rem; margin: 5px 0 8px; line-height: 1.25; }
.module .meta { font-size: .74rem; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.module .score { color: var(--gold); font-weight: 600; }

/* ---------- book gallery ---------- */
.shelf { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; align-items: start; }
.book img { width: 100%; aspect-ratio: 2/3; object-fit: cover; object-position: center;
  border-radius: 2px; box-shadow: 0 12px 34px rgba(16,24,32,.18); }
.book h4 { margin: 18px 0 5px; font-size: .96rem; line-height: 1.3; }
.book-pub { font-size: .78rem; color: var(--muted); margin-bottom: 8px; }
.book p { font-size: .84rem; color: var(--ink-soft); }

/* ---------- publications ---------- */
.pub-group { margin-bottom: 48px; }
.pub-group > h3 { font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); padding-bottom: 11px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pub { padding: 18px 0; border-bottom: 1px solid var(--line-soft);
  display: grid; grid-template-columns: 58px 1fr; gap: 20px; }
.pub .yr { font-size: .88rem; color: var(--muted); padding-top: 2px; font-variant-numeric: tabular-nums; }
.pub .body { font-size: .93rem; line-height: 1.5; }
.pub .a { display: block; font-size: .82rem; color: var(--muted); margin-bottom: 3px; }
.pub .t { display: block; color: var(--ink); font-weight: 550; margin-bottom: 2px; }
.pub .j { font-style: italic; color: var(--ink-soft); font-size: .88rem; }
.pub .meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

.tag { font-size: .65rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px; border: 1px solid var(--line);
  color: var(--muted); background: var(--wash); white-space: nowrap; }
.tag.ft50 { color:#fff; background: var(--pine); border-color: var(--pine); }
.tag.utd  { color:#fff; background:#2f4858; border-color:#2f4858; }
.tag.abs4 { color: var(--pine); background: var(--pine-wash); border-color:#bcdcd9; }
.tag.award{ color:#7a5b1e; background: var(--gold-wash); border-color:#e6d3a8; }
.tag.status { color: var(--muted); background: transparent; }

/* ---------- rows ---------- */
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 210px 1fr; gap: 30px;
  padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.row .k { font-size: .83rem; color: var(--muted); line-height: 1.45; }
.row .k strong { display: block; color: var(--ink); font-weight: 600; font-size: .92rem; margin-bottom: 2px; }
.row .v { font-size: .92rem; color: var(--ink-soft); }
.row .v ul { margin: 0; padding-left: 17px; }
.row .v li { margin-bottom: 4px; }
.g2 .row, .g-wide .row { grid-template-columns: 140px 1fr; gap: 20px; }

/* ---------- paper cards on story pages ---------- */
.paper { border-left: 2px solid var(--pine); padding: 4px 0 4px 20px; margin-bottom: 22px; }
.paper h4 { font-size: .97rem; line-height: 1.32; margin-bottom: 6px; }
.paper .j { font-size: .84rem; font-style: italic; color: var(--ink-soft); }
.paper .m { font-size: .78rem; color: var(--muted); margin-top: 5px;
  display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- note & lists ---------- */
.note { background: var(--wash); border-left: 2px solid var(--pine);
  padding: 18px 22px; font-size: .86rem; color: var(--ink-soft);
  border-radius: 0 var(--r) var(--r) 0; }
section.wash .note { background: var(--paper); }

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { font-size: .9rem; color: var(--ink-soft); margin-bottom: 9px;
  padding-left: 20px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--pine); }
.ticks.two { columns: 2; column-gap: 40px; }
.ticks.two li { break-inside: avoid; }

/* ---------- page header ---------- */
.page-head { padding: 68px 0 42px; border-bottom: 1px solid var(--line); }
.page-head.themed { border-bottom: 0; background: var(--wash); padding-bottom: 56px; }
.page-head h1 { margin-bottom: 16px; max-width: 20ch; }
.page-head .standfirst { font-size: clamp(1.05rem,1.8vw,1.3rem); line-height: 1.45;
  color: var(--ink-soft); max-width: 58ch; margin: 0; letter-spacing: -.012em; }

.pager { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 24px; }
.pager a { font-size: .9rem; font-weight: 550; }
.pager span { display: block; font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px; font-weight: 600; }

/* ---------- footer ---------- */
.site-footer { background: var(--deep); color: #9aa6b1; padding: 58px 0 30px; font-size: .86rem; }
.site-footer h4 { color: #fff; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 13px; font-weight: 600; }
.site-footer a { color: #c0cbd5; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 40px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 7px; }
.footer-bot { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px;
  font-size: .76rem; color: #6f7c88; display: flex; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .proof { grid-template-columns: repeat(3,1fr); }
  .shelf { grid-template-columns: repeat(2,1fr); gap: 26px; }
  .nav { gap: 13px; }
  .nav a { font-size: .78rem; }
}
@media (max-width: 1000px) {
  .news { grid-template-columns: 1fr; }
  .map-key { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .g3, .g4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; top: 66px; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0; padding: 6px 20px 16px;
    max-height: 70vh; overflow-y: auto; }
  .nav.open { display: flex; }
  .nav a { padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
  .nav a.active { border-bottom-color: var(--line-soft); }
  .nav a.track { border: 0; padding: 11px 0; border-bottom: 1px solid var(--line-soft);
    background: transparent; color: var(--pine); border-radius: 0; }
  .nav a.track.active { background: transparent; color: var(--pine); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-side { max-width: 280px; }
  .g2, .g-wide { grid-template-columns: 1fr; gap: 30px; }
  .row, .g2 .row, .g-wide .row { grid-template-columns: 1fr; gap: 7px; }
  .ticks.two { columns: 1; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  section { padding: 56px 0; }
  .hero { padding: 44px 0 44px; }
  .page-head { padding: 44px 0 32px; }
  .proof { grid-template-columns: repeat(2,1fr); }
  .g3, .g4, .shelf { grid-template-columns: 1fr; }
  .pub { grid-template-columns: 1fr; gap: 3px; }
  .map-key { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .figure.scrolls { overflow-x: auto; }
  .figure.scrolls .dg, .figure.scrolls .fig { min-width: 680px; }
}

@media print {
  .site-header, .site-footer, .btn-row, .pager { display: none; }
  body { font-size: 11pt; }
}

/* =========================================================
   DATA-LED LAYER
   Full-bleed generative fields, oversized numerals, media slots.
   The fields are illustrative, not plots — see art.py.
   ========================================================= */

.artwork { position: relative; background: #0a0e12; color: #e8eeee; overflow: hidden;
  padding: 108px 0 96px; }
.artwork::before { content: ""; position: absolute; inset: 0;
  background-size: cover; background-position: center; opacity: .95; }
.artwork::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(10,14,18,.94) 0%, rgba(10,14,18,.80) 42%,
    rgba(10,14,18,.30) 72%, rgba(10,14,18,.15) 100%); }
.artwork > * { position: relative; z-index: 2; }
.artwork h1, .artwork h2, .artwork h3 { color: #fff; }
.artwork p { color: #b9c6c6; }
.artwork a { color: #57d6cc; }
.artwork .eyebrow { color: #57d6cc; }

.art-population  ::before, .artwork.art-population::before  { background-image: url("art/field-population.webp"); }
.artwork.art-bifurcation::before { background-image: url("art/field-bifurcation.webp"); }
.artwork.art-dispersion::before  { background-image: url("art/field-dispersion.webp"); }
.artwork.art-oscillation::before { background-image: url("art/field-oscillation.webp"); }
.artwork.art-network::before     { background-image: url("art/field-network.webp"); }
.artwork.art-attrition::before   { background-image: url("art/field-attrition.webp"); }

.art-note { font-size: .72rem; color: #6f8080; letter-spacing: .04em; margin-top: 30px;
  max-width: 62ch; }

/* hero on the landing page */
.hero-art { min-height: 76vh; display: flex; align-items: center; padding: 120px 0 100px; }
.hero-art h1 { font-size: clamp(3rem, 8.5vw, 7.2rem); line-height: .94; letter-spacing: -.045em;
  margin-bottom: 26px; }
.hero-art .positioning { color: #fff; font-weight: 500; max-width: 17ch;
  font-size: clamp(1.3rem, 3vw, 2.3rem); line-height: 1.18; margin-bottom: 26px; }
.hero-art .role { color: #94a5a5; max-width: 46ch; font-size: .95rem; margin-bottom: 32px; }
.hero-art .role strong { color: #dbe6e6; font-weight: 550; }

/* oversized numerals — replaces the boxed stat grid */
.figures { display: grid; grid-template-columns: repeat(3,1fr); gap: 0;
  border-top: 1px solid var(--line); }
.figures > div { padding: 34px 30px 30px 0; border-bottom: 1px solid var(--line); }
.figures .n { font-family: var(--display); font-weight: 600; letter-spacing: -.05em;
  font-size: clamp(3rem, 6vw, 5rem); line-height: .88; color: var(--ink); margin-bottom: 14px; }
.figures .l { font-size: .88rem; font-weight: 550; color: var(--ink); }
.figures .s { font-size: .78rem; color: var(--muted); }
.artwork .figures { border-top-color: rgba(255,255,255,.16); }
.artwork .figures > div { border-bottom-color: rgba(255,255,255,.12); }
.artwork .figures .n { color: #fff; }
.artwork .figures .l { color: #dbe6e6; }
.artwork .figures .s { color: #7f9090; }

/* editorial story list — asymmetric, numbered, no card grid */
.story-list { border-top: 1px solid var(--line); }
.story-row { display: grid; grid-template-columns: 92px 1.15fr 1fr; gap: 34px;
  padding: 40px 0; border-bottom: 1px solid var(--line); align-items: start;
  transition: background .15s; }
.story-row:hover { background: var(--wash); text-decoration: none; }
.story-row .idx { font-family: var(--display); font-weight: 600; font-size: 2.6rem;
  line-height: .9; color: var(--line); letter-spacing: -.04em; }
.story-row:hover .idx { color: var(--pine); }
.story-row h3 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.1; margin-bottom: 10px;
  color: var(--ink); letter-spacing: -.03em; }
.story-row .p { font-size: .92rem; color: var(--ink-soft); }
.story-row .go { display: inline-block; margin-top: 14px; font-size: .82rem;
  font-weight: 550; color: var(--pine); }
.story-thumb { aspect-ratio: 16/9; border-radius: 3px; background: #0a0e12;
  background-size: cover; background-position: center; }

/* media slots — clearly marked, so an empty site never looks broken */
.slot { position: relative; border: 1px dashed var(--line); border-radius: var(--r);
  background: var(--wash); display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 26px; }
.slot span { font-size: .78rem; color: var(--muted); max-width: 30ch; line-height: 1.45; }
.slot span b { display: block; color: var(--ink-soft); font-weight: 600; margin-bottom: 4px;
  font-size: .82rem; }
.slot.wide { aspect-ratio: 16/9; }
.slot.square { aspect-ratio: 1/1; }
.slot.tall { aspect-ratio: 3/4; }

.media-wall { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.media-wall .slot:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.media-wall .slot:nth-child(1).wide { aspect-ratio: 1/1; }

.portrait-frame { position: relative; }
.portrait-frame .tagline { position: absolute; left: 0; right: 0; bottom: -30px;
  font-size: .72rem; color: var(--muted); }

@media (max-width: 900px) {
  .figures { grid-template-columns: repeat(2,1fr); }
  .story-row { grid-template-columns: 54px 1fr; gap: 20px; }
  .story-row .story-thumb { grid-column: 2; }
  .media-wall { grid-template-columns: repeat(2,1fr); }
  .artwork { padding: 72px 0 64px; }
  .hero-art { min-height: 0; padding: 84px 0 72px; }
}
@media (max-width: 560px) {
  .figures { grid-template-columns: 1fr; }
  .media-wall { grid-template-columns: 1fr; }
  .media-wall .slot:nth-child(1) { grid-column: span 1; grid-row: span 1; }
}

/* the hero .wrap is a flex child, so it shrink-wraps and centres unless told
   to fill; without this the whole hero drifts to the middle of the page */
.hero-art > .wrap { width: 100%; }

/* on the dark fields the pine ghost button falls below contrast */
.artwork .btn { background: #fff; color: #0a0e12; border-color: #fff; }
.artwork .btn:hover { background: #cfdcda; border-color: #cfdcda; color: #0a0e12; }
.artwork .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.artwork .btn.ghost:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.7); }

/* ============ REVIEW ROUND 3: logo, rails, reveal, map tips, offers ============ */

.brand { display: flex; align-items: center; gap: 13px; }
.brand .brand-txt { padding-left: 13px; border-left: 1px solid var(--line); }
.logo { height: 30px; width: auto; flex: 0 0 auto; color: var(--ink); }
.artwork .logo, .site-header.on-dark .logo { color: #fff; }
.brand::after { content: ""; }

.brand-txt { display: flex; flex-direction: column; }

/* News: index number + outlet monogram */
.news-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.news-no { font-family: "Inter Tight", Inter, sans-serif; font-weight: 800; font-size: 1.6rem;
  color: var(--pine); opacity: .35; letter-spacing: -.02em; }
.news-mark { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; background: var(--deep); color: #fff;
  font-family: "Inter Tight", Inter, sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .04em; }
.news-chip { display: inline-block; margin-top: 14px; font-size: .74rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--pine);
  border: 1px solid var(--pine); border-radius: 999px; padding: 4px 12px; text-decoration: none; }
.news-chip:hover { background: var(--pine); color: #fff; }

/* Horizontal news rail on the landing page */
.news.rail { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(340px, 82vw);
  gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px;
  scrollbar-width: thin; }
.news.rail > .news-card { scroll-snap-align: start; }

/* Scroll reveal (JS adds .will-reveal, then .revealed) */
.will-reveal { opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease; }
.will-reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .will-reveal { opacity: 1; transform: none; transition: none; }
}

/* Reach-map hover */
.rm-hi path { transition: fill .15s ease; cursor: pointer; }
.rm-hi path:hover, .rm-hi path:focus { fill: var(--gold); outline: none; }
.map-tip { position: fixed; z-index: 60; max-width: 300px; pointer-events: none;
  background: var(--deep); color: #fff; font-size: .8rem; line-height: 1.45;
  padding: 10px 13px; border-radius: 8px; opacity: 0; transition: opacity .12s ease; }
.map-tip.on { opacity: 1; }

/* Advisory offer cards */
.offer { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; }
.offer h3 { font-size: 1.05rem; margin-bottom: 10px; }
.offer p { font-size: .9rem; color: var(--muted); }

/* Publications: year groups */
.pub-year { display: grid; grid-template-columns: 88px 1fr; gap: 0 18px;
  border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; }
.pub-year:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.pub-year-label { font-family: "Inter Tight", Inter, sans-serif; font-weight: 800;
  font-size: 1.5rem; color: var(--pine); line-height: 1; }
.pub-year-items { min-width: 0; }
.pub.pub-flat { grid-template-columns: 1fr; }
.pub.pub-flat .yr { display: none; }
.pub-link { font-size: .83rem; white-space: nowrap; }
@media (max-width: 640px) {
  .pub-year { grid-template-columns: 1fr; }
  .pub-year-label { margin-bottom: 10px; }
}

/* Hero portrait. The point is that there is no seam: the same generative field
   that fills the hero is painted again on top of the photograph's left side in
   screen blend, so the teal marks carry on across the picture and thin out over
   it rather than stopping at an edge. The overlay is a full-viewport box
   anchored right, sized exactly like the section's own field layer, so the two
   are in register and the marks line up pixel for pixel. */
.hero-art { position: relative; overflow: hidden; }
.hero-portrait { position: absolute; right: 0; top: 0; bottom: 0; width: 46%;
  margin: 0; overflow: hidden; }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 20%; display: block;
  filter: grayscale(.16) contrast(1.05) saturate(.85);
  /* a long, gentle dissolve — no hard step anywhere across it */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.30) 7%,
      rgba(0,0,0,.68) 14%, rgba(0,0,0,.92) 20%, #000 25%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.30) 7%,
      rgba(0,0,0,.68) 14%, rgba(0,0,0,.92) 20%, #000 25%); }

/* The field, continued over the photograph, but only across the empty
   left margin of the frame. It resolves before it reaches his hair: skin and
   hair are never faded into the background. */
.hero-portrait::before { content: ""; position: absolute; z-index: 2;
  top: 0; bottom: 0; right: 0; width: 100vw;
  background-image: url("art/field-population.webp");
  background-size: cover; background-position: center;
  mix-blend-mode: screen; opacity: .62;
  -webkit-mask-image: linear-gradient(90deg, #000 0 54%, rgba(0,0,0,.66) 59%,
      rgba(0,0,0,.26) 63%, transparent 67%);
          mask-image: linear-gradient(90deg, #000 0 54%, rgba(0,0,0,.66) 59%,
      rgba(0,0,0,.26) 63%, transparent 67%); }

/* a soft vignette only, so the bright office falls away at the frame edges
   while the face stays lit. No vertical band, no dark seam. */
.hero-portrait::after { content: ""; position: absolute; z-index: 3; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(86% 70% at 64% 36%, transparent 0%, rgba(10,14,18,.06) 46%,
      rgba(10,14,18,.40) 78%, rgba(10,14,18,.66) 100%),
    linear-gradient(180deg, rgba(10,14,18,.34) 0%, transparent 22%); }

.hero-art > .wrap { position: relative; z-index: 4; }
.hero-art h1, .hero-art .positioning, .hero-art .role,
.hero-art .btn-row, .hero-art .art-note { max-width: min(600px, 46%); }
@media (max-width: 1100px) {
  .hero-portrait { width: 54%; }
  .hero-art h1, .hero-art .positioning, .hero-art .role,
  .hero-art .btn-row, .hero-art .art-note { max-width: 44%; }
}
@media (max-width: 820px) {
  .hero-portrait { display: none; }
  .hero-art h1, .hero-art .positioning, .hero-art .role,
  .hero-art .btn-row, .hero-art .art-note { max-width: none; }
}

/* ============ EVENT PHOTOGRAPHY ============ */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 12px; background: var(--wash); aspect-ratio: 3 / 2; }
.shot.wide img { aspect-ratio: 21 / 9; }
.shot figcaption { margin-top: 12px; font-size: .82rem; line-height: 1.5;
  color: var(--muted); }
.shots { align-items: start; }
.shots .shot { min-width: 0; }
@media (max-width: 700px) { .shot img { aspect-ratio: 4 / 3; } }

/* ============ MODULE BOARD ============ */
/* the board is no longer a card grid; it is a set of grouped lists */
.board { display: block; }
.mgroup { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 34px;
  display: grid; grid-template-columns: 230px 1fr; gap: 0 40px; }
.mgroup:first-child { margin-top: 0; }
.mhead h3 { font-size: 1.05rem; margin-bottom: 6px; }
.mhead p { font-size: .84rem; color: var(--muted); }
.mlist { list-style: none; margin: 0; padding: 0; min-width: 0; }
.mlist li { display: grid; grid-template-columns: 82px 1fr auto; gap: 18px;
  align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.mlist li:last-child { border-bottom: 0; }
.mcode { font-size: .78rem; letter-spacing: .04em; color: var(--pine);
  font-weight: 650; font-variant-numeric: tabular-nums; }
.mname { font-size: .96rem; color: var(--ink); min-width: 0; }
.mlvl { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; white-space: nowrap; }
@media (max-width: 780px) {
  .mgroup { grid-template-columns: 1fr; gap: 18px; }
  .mlist li { grid-template-columns: 70px 1fr; }
  .mlvl { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* Pipeline note under a story's published-work list */
.pipeline { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: .86rem; color: var(--muted); font-style: italic; }

/* News cards carrying the outlet's own preview image. The picture is
   decorative (the headline is the link that matters), so it is hidden from
   assistive technology and the outlet is credited on the image itself. */
.news-card.has-shot { padding-top: 0; overflow: hidden; }
.news-shot { position: relative; display: block; margin: 0 0 18px;
  border-radius: 10px 10px 0 0; overflow: hidden; background: var(--wash); }
.news-shot img { display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; }
.news-credit { position: absolute; left: 10px; bottom: 10px;
  background: rgba(10,14,18,.82); color: #fff; font-size: .64rem;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px;
  border-radius: 5px; }
.news-card.has-shot .news-body { padding: 0 20px 20px; }
.news-card.has-shot .news-outlet { display: none; }