@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --paper:#EFEDE2;
  --paper-raised:#FBFAF4;
  --ink:#171E2C;
  --ink-soft:#5C6675;
  --navy:#0C1524;
  --navy-deep:#080E19;
  --navy-soft:#1C2C46;
  --rule:#D8D2BE;
  --brass:#A07C3B;
  --brass-deep:#7C5E28;
  --live:#37624A;
  --live-bg:#E1E9E0;
  --proposed:#8A6A2E;
  --proposed-bg:#EEE5CF;
  --caution:#93402F;
  --caution-bg:#EEDEDA;
  --contested:#544A82;
  --contested-bg:#E4E0EE;
  --maxw:1140px;
  --shadow: 0 1px 2px rgba(12,21,36,0.04), 0 8px 24px -12px rgba(12,21,36,0.18);
  --shadow-hover: 0 4px 10px rgba(12,21,36,0.06), 0 20px 40px -16px rgba(12,21,36,0.28);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(23,30,44,0.05) 1px, transparent 0);
  background-size:3px 3px;
  color:var(--ink);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  line-height:1.12;
  color:var(--navy);
  letter-spacing:-0.012em;
}
a{color:var(--navy); text-decoration-color:var(--brass); text-underline-offset:3px;}
a:focus-visible, button:focus-visible{outline:3px solid var(--brass); outline-offset:2px;}
p{margin:0 0 1.1em;}
.mono{font-family:'IBM Plex Mono', monospace;}
::selection{ background:var(--brass); color:#fff; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

.reset-mark{ display:inline-block; vertical-align:-6px; }
.reset-mark path{ stroke:currentColor; }

.topnav{
  background:var(--paper-raised);
  color:var(--ink);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--rule);
  box-shadow:0 1px 0 rgba(12,21,36,0.03);
}
.topnav-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
  height:66px;
}
.wordmark{
  display:flex; align-items:center; text-decoration:none;
}
.wordmark img{ height:30px; width:auto; display:block; }
.navlinks{ display:flex; gap:2px; list-style:none; margin:0; padding:0; }
.navlinks a{
  position:relative;
  color:var(--ink-soft); text-decoration:none; font-size:0.92rem; font-weight:500;
  padding:10px 14px; border-radius:5px; transition:color 0.15s;
}
.navlinks a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background:var(--brass); transform:scaleX(0); transform-origin:left;
  transition:transform 0.25s ease;
}
.navlinks a:hover{ color:var(--navy); }
.navlinks a:hover::after, .navlinks a.active::after{ transform:scaleX(1); }
.navlinks a.active{ color:var(--navy); font-weight:600; }
.navtoggle{ display:none; background:none; border:1px solid var(--rule); color:var(--ink); padding:6px 10px; border-radius:4px; }

@media (max-width:760px){
  .navlinks{ display:none; }
  .navtoggle{ display:inline-block; }
  .navlinks.open{
    display:flex; flex-direction:column; position:absolute; top:66px; left:0; right:0;
    background:var(--paper-raised); padding:8px; border-bottom:1px solid var(--rule);
    box-shadow:var(--shadow);
  }
}

.page{ max-width:var(--maxw); margin:0 auto; padding:0 24px 96px; }
.hero{ padding:76px 0 44px; border-bottom:1px solid var(--rule); position:relative; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:0.16em;
  font-size:0.72rem; color:var(--brass-deep); font-weight:600; margin-bottom:16px; display:flex;
  align-items:center; gap:9px;
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--brass); display:inline-block; }
.hero h1{ font-size:clamp(2.2rem, 4.6vw, 3.4rem); margin:0 0 20px; max-width:20ch; }
.hero .lede{ font-size:1.2rem; color:var(--ink-soft); max-width:60ch; }

.statstrip{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule); margin:44px 0;
  box-shadow:var(--shadow);
}
.stat{ background:var(--paper-raised); padding:24px 22px; position:relative; overflow:hidden; }
.stat::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform 0.5s ease; }
.js-anim .stat.revealed::before{ transform:scaleX(1); }
.stat .n{ font-family:'IBM Plex Mono',monospace; font-size:1.85rem; font-weight:600; color:var(--navy); display:block; }
.stat .l{ font-size:0.82rem; color:var(--ink-soft); margin-top:6px; display:block; }

/* Reveal-on-scroll only ever applies once JS confirms it's active (js-anim on <html>).
   Without that class — no JS, blocked JS, or a non-browser renderer — everything
   below stays at its default, fully visible state. This is the safety guarantee. */
.js-anim .section-block, .js-anim .hubcard, .js-anim .stat{
  opacity:0; transform:translateY(14px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.js-anim .section-block.revealed, .js-anim .hubcard.revealed, .js-anim .stat.revealed{
  opacity:1; transform:translateY(0);
}

.layout{ display:grid; grid-template-columns:224px 1fr; gap:60px; padding-top:48px; align-items:start; }
.sidebar{ position:sticky; top:92px; }
.sidebar h4{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-soft); font-family:'IBM Plex Sans'; font-weight:600; margin:0 0 12px; }
.sidebar ol, .sidebar ul{ list-style:none; margin:0 0 30px; padding:0; }
.sidebar li{ margin-bottom:2px; }
.sidebar a{
  display:block; padding:7px 10px; border-radius:4px; text-decoration:none;
  color:var(--ink-soft); font-size:0.88rem; border-left:2px solid transparent;
  transition:background 0.15s, border-color 0.15s, color 0.15s;
}
.sidebar a:hover{ background:var(--paper-raised); color:var(--ink); border-left-color:var(--brass); }
.main{ min-width:0; }

@media (max-width:860px){
  .layout{ grid-template-columns:1fr; }
  .sidebar{ position:static; }
}

.section-block{
  margin-bottom:56px; padding-bottom:10px; border-bottom:1px solid var(--rule);
  scroll-margin-top:92px; position:relative;
}
.section-block:last-child{ border-bottom:none; }
.section-num{ font-family:'IBM Plex Mono',monospace; color:var(--brass); font-weight:600; font-size:0.95rem; position:relative; z-index:1; }
.section-block h2{ font-size:1.55rem; margin:2px 0 18px; position:relative; z-index:1; }
.section-block h3.item-title{ font-family:'IBM Plex Sans'; font-size:1rem; font-weight:600; color:var(--navy); margin:24px 0 7px; }

.section-block[data-num]::before{
  content:attr(data-num);
  position:absolute; top:-18px; right:-4px;
  font-family:'Fraunces', serif; font-weight:700; font-size:6.6rem; line-height:1;
  color:var(--brass); opacity:0.09; z-index:0; pointer-events:none;
  letter-spacing:-0.03em;
}
@media (max-width:700px){ .section-block[data-num]::before{ font-size:4rem; top:-6px; } }

.tag{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:0.68rem; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; padding:4px 10px; border-radius:3px; margin:0 8px 4px 0;
  vertical-align:middle;
}
.tag-live{ background:var(--live-bg); color:var(--live); }
.tag-proposed{ background:var(--proposed-bg); color:var(--proposed); }
.tag-caution{ background:var(--caution-bg); color:var(--caution); }
.tag-contested{ background:var(--contested-bg); color:var(--contested); }
.tag-legend{ display:flex; flex-wrap:wrap; gap:11px 20px; margin:20px 0 8px; font-size:0.85rem; color:var(--ink-soft); align-items:center; }

.item{ margin-bottom:28px; position:relative; z-index:1; }
.item p{ margin-bottom:0.7em; }
.item p:last-child{ margin-bottom:0; }

.callout{
  background:var(--paper-raised); border-left:3px solid var(--brass); padding:18px 22px;
  margin:22px 0; font-size:0.95rem; color:var(--ink-soft); box-shadow:var(--shadow);
  position:relative; z-index:1;
}

.hubgrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px; margin:38px 0 58px; }
.hubcard{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:8px; padding:24px 24px 22px;
  text-decoration:none; color:var(--ink); display:block;
  transition:border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow:var(--shadow);
}
.hubcard:hover{ border-color:var(--brass); transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.hubcard .hc-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--brass-deep); font-weight:600; }
.hubcard h3{ font-size:1.18rem; margin:9px 0 8px; }
.hubcard p{ font-size:0.9rem; color:var(--ink-soft); margin:0; }

.glance-list{ columns:2; column-gap:40px; margin:20px 0 40px; }
.glance-list li{ break-inside:avoid; margin-bottom:11px; font-size:0.95rem; }
.glance-list a{ text-decoration:none; transition:color 0.15s; }
.glance-list a:hover{ color:var(--brass-deep); }
@media (max-width:700px){ .glance-list{ columns:1; } }

footer{
  background:var(--paper-raised);
  color:var(--ink-soft); padding:44px 24px; margin-top:84px;
  font-size:0.88rem; border-top:1px solid var(--rule);
}
footer .foot-inner{ max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; }
footer a{ color:var(--navy); }
.home-note{ font-size:0.8rem; color:var(--ink-soft); opacity:0.8; margin-top:10px; max-width:60ch; }

/* ---------- Three-part framework ---------- */
.trio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); margin:36px 0 8px; box-shadow:var(--shadow); }
@media (max-width:820px){ .trio-grid{ grid-template-columns:1fr; } }
.trio-card{ background:var(--paper-raised); padding:32px 28px; transition:background 0.15s; }
.trio-card:hover{ background:#F5F1E1; }
.trio-card:hover h3{ color:var(--brass-deep); }
.trio-num{ font-family:'Fraunces',serif; font-weight:700; font-size:1.1rem; color:var(--brass); display:block; margin-bottom:14px; }
.trio-card h3{ font-size:1.3rem; margin:0 0 14px; }
.trio-quote{ font-family:'Fraunces',serif; font-style:italic; font-size:0.98rem; color:var(--navy); line-height:1.5; margin:0 0 8px; padding-left:14px; border-left:2px solid var(--brass); }
.trio-cite{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.06em; display:block; margin:0 0 18px 16px; }
.trio-card p.trio-desc{ font-size:0.94rem; color:var(--ink-soft); margin:0; }

/* ---------- Issues list ---------- */
.issues-list{ display:flex; flex-direction:column; gap:1px; background:var(--rule); border:1px solid var(--rule); margin:24px 0 8px; }
.issue-row{
  display:flex; align-items:flex-start; gap:16px; background:var(--paper-raised); padding:20px 22px;
  text-decoration:none; color:var(--ink); transition:background 0.15s;
}
.issue-row:hover{ background:#F5F1E1; }
.issue-mark{
  flex:none; width:28px; height:28px; border:1.5px solid var(--brass); border-radius:4px;
  display:flex; align-items:center; justify-content:center; margin-top:2px;
  color:var(--brass-deep); font-family:'IBM Plex Mono',monospace; font-size:0.8rem; font-weight:600;
}
.issue-body h4{ font-family:'IBM Plex Sans'; font-size:1.02rem; font-weight:600; margin:0 0 4px; color:var(--navy); }
.issue-body p{ font-size:0.92rem; color:var(--ink-soft); margin:0; }

/* ---------- Subscribe band ---------- */
.subscribe-band{
  background:var(--paper-raised);
  border:1.5px solid var(--navy);
  border-radius:10px; padding:44px 40px; margin:64px 0; color:var(--ink);
}
.subscribe-band h3{ color:var(--navy); font-size:1.5rem; margin:0 0 8px; }
.subscribe-band p{ color:var(--ink-soft); max-width:52ch; margin:0 0 22px; }
.subscribe-form{ display:flex; gap:10px; max-width:440px; flex-wrap:wrap; }
.subscribe-form input[type=email]{
  flex:1; min-width:200px; padding:12px 14px; border-radius:5px; border:1px solid var(--rule);
  background:#fff; color:var(--ink); font-family:'IBM Plex Sans'; font-size:0.95rem;
}
.subscribe-form input[type=email]::placeholder{ color:#9A947F; }
.subscribe-form button{
  padding:12px 22px; border-radius:5px; border:none; background:var(--navy); color:#F6F1E3;
  font-family:'IBM Plex Sans'; font-weight:600; font-size:0.95rem; cursor:pointer;
  transition:background 0.15s;
}
.subscribe-form button:hover{ background:var(--navy-soft); }

/* ---------- CTA buttons ---------- */
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.btn{
  display:inline-block; padding:12px 22px; border-radius:5px; font-weight:600; font-size:0.95rem;
  text-decoration:none; transition:background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary{ background:var(--navy); color:#F6F1E3; }
.btn-primary:hover{ background:var(--navy-soft); }
.btn-secondary{ background:transparent; color:var(--navy); border:1.5px solid var(--navy); }
.btn-secondary:hover{ background:var(--navy); color:#F6F1E3; }

/* ---------- Articles ---------- */
.article-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:22px; margin:32px 0; }
.article-card{
  background:var(--paper-raised); border:1px solid var(--rule); border-radius:8px; overflow:hidden;
  text-decoration:none; color:var(--ink); display:flex; flex-direction:column;
  box-shadow:var(--shadow); transition:border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.article-card:hover{ border-color:var(--brass); transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.article-card .ac-topics{ display:flex; flex-wrap:wrap; gap:5px; padding:16px 20px 0; }
.article-card .ac-topic{
  font-family:'IBM Plex Mono',monospace; font-size:0.64rem; text-transform:uppercase; letter-spacing:0.05em;
  font-weight:600; padding:3px 8px; border-radius:3px; background:var(--paper); color:var(--ink-soft);
}
.article-card .ac-body{ padding:12px 20px 20px; flex:1; display:flex; flex-direction:column; }
.article-card h3{ font-size:1.2rem; margin:4px 0 8px; }
.article-card .ac-dek{ font-size:0.92rem; color:var(--ink-soft); flex:1; margin:0 0 12px; }
.article-card .ac-meta{ font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--brass-deep); text-transform:uppercase; letter-spacing:0.05em; }

.article-hero{ max-width:74ch; }
.article-hero .ac-topics{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.article-body{ max-width:74ch; font-size:1.03rem; }
.article-body p{ margin-bottom:1.15em; }
.article-body h2{ font-size:1.4rem; margin:36px 0 14px; }
.article-source-note{
  font-size:0.88rem; color:var(--ink-soft); background:var(--paper-raised); border-left:3px solid var(--brass);
  padding:14px 18px; margin:28px 0;
}

/* ---------- Step colours: I. Past / II. Present / III. Future ---------- */
:root{
  --c-past:#7A2333;      /* burgundy — reflective, historical, serious */
  --c-present:#B8860B;   /* gold — action, the platform's central "do this now" step */
  --c-future:#1B6FB0;    /* azure blue — forward-looking, distinct from both */
}

/* A persistent coloured margin down the left edge of the viewport, present only on
   pages belonging to one of the three steps, so the colour itself signals which
   part of the journey you're currently reading — a strong, literal visual anchor
   rather than a subtle tint. Implemented as a fixed element (not a body border)
   so it repeats reliably across printed/PDF pages as well as on screen. */
.step-spine{ position:fixed; left:0; top:0; bottom:0; width:22px; z-index:60; }
.step-past .step-spine{ background:var(--c-past); }
.step-present .step-spine{ background:var(--c-present); }
.step-future .step-spine{ background:var(--c-future); }
/* Push page content clear of the wider margin block */
.step-past, .step-present, .step-future{ margin-left:22px; }

/* Step-track current marker picks up the step colour instead of always navy */
.step-past .step-track .step.current .num{ background:var(--c-past); border-color:var(--c-past); }
.step-present .step-track .step.current .num{ background:var(--c-present); border-color:var(--c-present); }
.step-future .step-track .step.current .num{ background:var(--c-future); border-color:var(--c-future); }
.step-past .step-track .step.current{ color:var(--c-past); }
.step-present .step-track .step.current{ color:var(--c-present); }
.step-future .step-track .step.current{ color:var(--c-future); }

/* Hero eyebrow rule and section numerals pick up the step colour too */
.step-past .eyebrow::before, .step-past .section-num{ background:var(--c-past); color:var(--c-past); }
.step-present .eyebrow::before, .step-present .section-num{ background:var(--c-present); color:var(--c-present); }
.step-future .eyebrow::before, .step-future .section-num{ background:var(--c-future); color:var(--c-future); }
.step-past .eyebrow{ color:var(--c-past); }
.step-present .eyebrow{ color:var(--c-present); }
.step-future .eyebrow{ color:var(--c-future); }

/* Ghost numerals on Foundations pick up the present colour instead of brass */
.step-present .section-block[data-num]::before{ color:var(--c-present); }

/* Index page: colour the trio numerals and the At A Glance list blocks so the
   three steps read consistently even before you click through to them */
.trio-card.step-past .trio-num{ color:var(--c-past); }
.trio-card.step-present .trio-num{ color:var(--c-present); }
.trio-card.step-future .trio-num{ color:var(--c-future); }
.trio-card.step-past{ border-left:8px solid var(--c-past); }
.trio-card.step-present{ border-left:8px solid var(--c-present); }
.trio-card.step-future{ border-left:8px solid var(--c-future); }

.glance-block{ border-left:8px solid var(--rule); padding-left:20px; margin-bottom:36px; }
.glance-block.step-past{ border-left-color:var(--c-past); }
.glance-block.step-present{ border-left-color:var(--c-present); }
.glance-block.step-future{ border-left-color:var(--c-future); }
.glance-block h2{ font-size:1.4rem; margin:0 0 4px; }
.glance-block .glance-label{
  font-family:'IBM Plex Mono',monospace; font-size:0.7rem; text-transform:uppercase;
  letter-spacing:0.1em; font-weight:600; display:block; margin-bottom:4px;
}
.glance-block.step-past .glance-label{ color:var(--c-past); }
.glance-block.step-present .glance-label{ color:var(--c-present); }
.glance-block.step-future .glance-label{ color:var(--c-future); }

/* ---------- Grouping: clusters of related sections within a long list ---------- */
.group-header{ margin:44px 0 -6px; padding-top:26px; border-top:2px solid var(--rule); position:relative; z-index:1; }
.group-header.first{ border-top:none; padding-top:0; margin-top:4px; }
.group-header .group-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:0.72rem; text-transform:uppercase;
  letter-spacing:0.1em; font-weight:600; display:block; margin-bottom:5px;
}
.group-header h3{ font-family:'Fraunces',serif; font-weight:600; font-size:1.2rem; margin:0 0 2px; color:var(--navy); }
.group-header p{ font-size:0.9rem; color:var(--ink-soft); margin:2px 0 0; max-width:60ch; }
.step-past .group-header .group-eyebrow{ color:var(--c-past); }
.step-present .group-header .group-eyebrow{ color:var(--c-present); }
.step-future .group-header .group-eyebrow{ color:var(--c-future); }

.sidebar .group-label{
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; text-transform:uppercase;
  letter-spacing:0.08em; font-weight:600; margin:16px 0 4px; padding:0 10px; list-style:none;
}
.sidebar li.group-label:first-child{ margin-top:0; }
.step-past .sidebar .group-label{ color:var(--c-past); }
.step-present .sidebar .group-label{ color:var(--c-present); }
.step-future .sidebar .group-label{ color:var(--c-future); }

/* ---------- Step track: shows position across the three-part journey ---------- */
.step-track{
  display:flex; align-items:center; justify-content:center; gap:0;
  max-width:var(--maxw); margin:0 auto; padding:22px 24px 0;
}
.step-track .step{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink-soft);
  font-family:'IBM Plex Sans'; font-size:0.88rem; font-weight:500; padding:6px 10px; border-radius:6px;
  transition:background 0.15s, color 0.15s;
}
.step-track .step:hover{ background:var(--paper-raised); color:var(--ink); }
.step-track .step .num{
  width:26px; height:26px; border-radius:50%; border:1.5px solid var(--rule);
  display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace;
  font-size:0.78rem; font-weight:600; flex:none; color:var(--ink-soft); background:var(--paper-raised);
}
.step-track .step.current{ color:var(--navy); font-weight:600; }
.step-track .step.current .num{ background:var(--navy); border-color:var(--navy); color:#F6F1E3; }
.step-track .step.done .num{ background:var(--live-bg); border-color:var(--live); color:var(--live); }
.step-track .step-connector{ width:34px; height:1.5px; background:var(--rule); margin:0 2px; }
@media (max-width:640px){
  .step-track{ flex-wrap:wrap; row-gap:6px; }
  .step-track .step span.label{ display:none; }
  .step-track .step-connector{ width:16px; }
}

/* ---------- Cross-link buttons: point to related content in another step ---------- */
.crosslinks{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 26px; }
.crosslink{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px 8px 12px; border-radius:999px; border:1.3px solid var(--brass);
  background:var(--paper-raised); color:var(--navy); text-decoration:none;
  font-family:'IBM Plex Sans'; font-size:0.83rem; font-weight:600;
  transition:background 0.15s, transform 0.15s;
}
.crosslink:hover{ background:#F3E9D2; transform:translateY(-1px); }
.crosslink svg{ flex:none; color:var(--brass-deep); }
.crosslink.cl-past{ border-color:var(--c-past); }
.crosslink.cl-past svg, .crosslink.cl-past .cl-step{ color:var(--c-past); }
.crosslink.cl-present{ border-color:var(--c-present); }
.crosslink.cl-present svg, .crosslink.cl-present .cl-step{ color:var(--c-present); }
.crosslink.cl-future{ border-color:var(--c-future); }
.crosslink.cl-future svg, .crosslink.cl-future .cl-step{ color:var(--c-future); }
.crosslink .cl-step{
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--brass-deep); font-weight:600; margin-right:7px;
}

/* ---------- Image placeholders ---------- */
/* Swap out by replacing this whole <figure class="img-placeholder">...</figure>
   block with a real <img> (or an <img> inside the same <figure>, keeping the
   <figcaption> as an accessible caption). See the placeholder list supplied
   alongside this file for what each one is intended to show. */
.img-placeholder{
  border:1.5px dashed var(--brass);
  background:repeating-linear-gradient(135deg, var(--paper-raised), var(--paper-raised) 10px, #F3EFDF 10px, #F3EFDF 20px);
  border-radius:8px;
  margin:22px 0;
  padding:0;
  position:relative; z-index:1;
}
.img-placeholder .ph-inner{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:36px 24px; gap:8px; min-height:160px;
}
.img-placeholder .ph-icon{ color:var(--brass); opacity:0.6; }
.img-placeholder .ph-tag{
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--brass-deep); font-weight:600;
}
.img-placeholder figcaption{
  font-size:0.9rem; color:var(--ink-soft); max-width:46ch; margin:0 auto;
}
.img-placeholder.ph-wide .ph-inner{ min-height:220px; }
.ph-side{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; }
@media (max-width:760px){ .ph-side{ grid-template-columns:1fr; } }