/* ==========================================================================
   weaver-network.uk — "Why Weaver?" long read
   Site-specific styles. Loaded after the shared /assets/weaver.css.
   ========================================================================== */

/* ---------- Extra tokens ---------- */
:root {
  --warp-a: #0b6b57;
  --warp-b: #0f5a4a;
  --wood: #d3b285;
  --wood-2: #b38d5c;
  --bus-body: #0b6b57;
  --bus-glass: #cfe2da;
  --bus-dark: #1d2925;
  --paper-line: rgb(23 32 29 / 0.035);
  --quote-mark: var(--line-strong);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --warp-a: #1d8a6e;
    --warp-b: #166f59;
    --wood: #9b7b55;
    --wood-2: #7a5f40;
    --bus-body: #17836a;
    --bus-glass: #24403a;
    --bus-dark: #0a0f0d;
    --paper-line: rgb(255 255 255 / 0.025);
  }
}
:root[data-theme="dark"] {
  --warp-a: #1d8a6e;
  --warp-b: #166f59;
  --wood: #9b7b55;
  --wood-2: #7a5f40;
  --bus-body: #17836a;
  --bus-glass: #24403a;
  --bus-dark: #0a0f0d;
  --paper-line: rgb(255 255 255 / 0.025);
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* In-page nav: highlight the section you're reading */
.site-nav a[aria-current="location"] { background: var(--brand-tint); color: var(--brand-text); }

/* ---------- Reading progress (scroll-driven; no JS) ---------- */
.progress { display: none; }
@supports (animation-timeline: scroll()) {
  .progress {
    display: block; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none;
    background: linear-gradient(90deg, var(--leeds) 0 20%, var(--bradford) 20% 40%, var(--calderdale) 40% 60%, var(--kirklees) 60% 80%, var(--wakefield) 80% 100%);
    transform-origin: 0 50%; transform: scaleX(0);
    animation: progress-grow 1ms linear both; animation-timeline: scroll(root block);
  }
  @keyframes progress-grow { to { transform: scaleX(1); } }
}

/* ---------- Shared editorial bits ---------- */
.kicker {
  display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem;
  font-weight: 700; font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-text);
}
.kicker-num {
  font-family: var(--font-mono); font-weight: 700; letter-spacing: 0; font-size: 0.85rem;
  display: inline-grid; place-items: center; min-width: 2.3rem; height: 1.6rem; padding: 0 0.4rem;
  border-radius: 999px; color: var(--ink); background: var(--bg-elev); border: 1px solid var(--line-strong);
}
.section-head { max-width: 50rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section-head h2 { font-size: var(--step-4); letter-spacing: -0.025em; margin-bottom: 0.35em; }
.standfirst {
  font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45; color: var(--ink-2);
  font-weight: 400; max-width: 42ch; margin: 0; font-variation-settings: "SOFT" 100, "opsz" 36;
}
.section { position: relative; }
.section-alt { border-block: 1px solid var(--line); }
.weave-sep { height: 10px; }

/* Article column + margin notes */
.article {
  display: grid; gap: 1.5rem clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .article { grid-template-columns: minmax(0, var(--measure)) minmax(0, 17.5rem); }
  .article > .side { grid-column: 2; grid-row: 1; }
  .article > .main { grid-column: 1; grid-row: 1; }
}
.main > p, .prose-lg p { font-size: clamp(1.05rem, 1rem + 0.25vw, 1.18rem); line-height: 1.7; }
.main > p { max-width: var(--measure); }
.dropcap::first-letter {
  float: left; font-family: var(--font-display); font-weight: 700; color: var(--brand-text);
  font-size: 5.6em; line-height: 0.8; margin: 0.04em 0.09em 0 -0.02em; font-variation-settings: "SOFT" 0, "opsz" 144;
}
.sidenote {
  font-size: 0.95rem; color: var(--ink-2); border-top: 3px solid var(--c, var(--brand)); padding-top: 0.9rem; margin-bottom: 2rem;
}
.sidenote h3 {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink); margin: 0 0 0.5rem;
}
.sidenote p { margin-bottom: 0.6em; }
.sidenote dl { margin: 0; }
.sidenote dt { font-weight: 700; color: var(--ink); }
.sidenote dd { margin: 0 0 0.8rem; }
@media (min-width: 1000px) { .side { position: sticky; top: 96px; align-self: start; } }

/* Pull quotes (our own words) */
.pullquote {
  margin: clamp(2rem, 5vw, 3.25rem) 0; padding: 0; border: 0; max-width: 26ch;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--step-3); line-height: 1.12; letter-spacing: -0.015em; color: var(--ink);
  font-variation-settings: "SOFT" 100, "opsz" 144;
}
.pullquote::before {
  content: ""; display: block; width: 5.5rem; height: 8px; margin-bottom: 1.1rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--leeds) 0 20%, var(--bradford) 20% 40%, var(--calderdale) 40% 60%, var(--kirklees) 60% 80%, var(--wakefield) 80% 100%);
}
.pullquote p { margin: 0; }
.pullquote.wide { max-width: 22ch; font-size: var(--step-4); }
.pullquote.center { margin-inline: auto; text-align: center; }
.pullquote.center::before { margin-inline: auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; padding-top: clamp(2.5rem, 7vw, 5.5rem);
  background-image: repeating-linear-gradient(90deg, var(--paper-line) 0 1px, transparent 1px 7px);
}
.hero .eyebrow { margin-bottom: 1.25rem; }
.hero h1 {
  font-size: clamp(3.15rem, 1.7rem + 5.2vw, 6.6rem); line-height: 0.98; letter-spacing: -0.035em;
  margin-bottom: 0.4em; font-variation-settings: "SOFT" 30, "opsz" 144;
}
.hero h1 .l1, .hero h1 .l1 > span { display: block; }
@media (min-width: 820px) {
  .hero h1 .l1 { white-space: nowrap; }
  .hero h1 .l1 > span { display: inline; }
}
.hero h1 .accent { display: block; font-style: italic; font-weight: 600; color: var(--brand-text); font-variation-settings: "SOFT" 100, "opsz" 144; }
.hero-lede { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem); max-width: 52ch; color: var(--ink-2); margin-bottom: 1.25rem; }
.byline {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; align-items: center; margin: 0;
  font-size: var(--step--1); color: var(--ink-3);
}
.byline span + span::before { content: "·"; margin-right: 1.1rem; color: var(--line-strong); }
@media (max-width: 599px) {
  .byline { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .byline span + span::before { content: none; }
}

.loom-figure {
  margin: clamp(1.5rem, 4vw, 2.75rem) 0 0;
  padding-left: max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter)));
}
.loom-figure figcaption {
  font-size: var(--step--1); color: var(--ink-3); padding: 0.9rem var(--gutter) 1.6rem 0; max-width: 60ch;
}
.loom { display: block; width: 100%; height: auto; overflow: visible; }
.loom-narrow { display: none; }
@media (max-width: 899px) {
  .loom-wide { display: none; }
  .loom-narrow { display: block; max-width: 560px; }
  .loom-figure { padding-right: var(--gutter); }
}

/* Loom parts */
.loom .warp-a, .weave-diagram .warp-a { fill: var(--warp-a); }
.loom .warp-b, .weave-diagram .warp-b { fill: var(--warp-b); }
.loom .weft { fill: none; stroke: var(--c); stroke-linecap: round; stroke-dasharray: 1 0; }
.loom .weft-hi { fill: none; stroke: #fff; stroke-opacity: 0.28; stroke-linecap: round; stroke-dasharray: 1 0; }
.loom-shade rect { fill: #000; fill-opacity: 0.22; }
.loom-sheen rect { fill: #fff; fill-opacity: 0.09; }
.bob-core { fill: var(--c); }
.bob-wind { stroke: #000; stroke-opacity: 0.18; stroke-width: 1.2; }
.bob-end { fill: var(--wood); stroke: var(--wood-2); stroke-width: 1.5; }
.loom-label { fill: var(--ink); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.01em; }
.loom-note .note-a { fill: var(--ink); font-family: var(--font-display); font-style: italic; font-size: 30px; font-weight: 500; }
.loom-note .note-b { fill: var(--ink-2); font-family: var(--font-body); font-size: 21px; }
.loom-note .note-line { stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }

@media (prefers-reduced-motion: no-preference) {
  .loom .weft, .loom .weft-hi {
    stroke-dasharray: 1 1; stroke-dashoffset: 1;
    animation: loom-draw 3.2s cubic-bezier(0.55, 0.05, 0.25, 1) forwards;
    animation-delay: calc(var(--i) * 160ms + 250ms);
  }
  .loom .loom-shade { animation: loom-fade 1s ease 2.6s both; }
  .loom .bobbin, .loom .loom-label { animation: loom-fade 0.6s ease both; animation-delay: calc(var(--i) * 160ms); }
  .loom .loom-note { animation: loom-fade 1s ease 2.9s both; }
}
@keyframes loom-draw { to { stroke-dashoffset: 0; } }
@keyframes loom-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- The short version: a route diagram ---------- */
.short-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 960px) { .short-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.ticket {
  position: relative; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: var(--shadow-l); padding: clamp(1.5rem, 4vw, 2.5rem);
}
.ticket::before, .ticket::after {
  content: ""; position: absolute; top: 4.6rem; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-sunk); border: 1px solid var(--line);
}
.ticket::before { left: -12px; clip-path: inset(0 0 0 50%); }
.ticket::after { right: -12px; clip-path: inset(0 50% 0 0); }
.ticket-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.1rem; margin-bottom: 1.4rem; border-bottom: 2px dashed var(--line-strong);
}
.ticket-head h2 { font-size: var(--step-3); margin: 0; }
.ticket-head p { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; }
.route { list-style: none; margin: 0; padding: 0; position: relative; }
.route li { position: relative; padding-left: 3.1rem; margin: 0 0 1.35rem; }
.route li:last-child { margin-bottom: 0; }
.route li::before {
  content: ""; position: absolute; z-index: 1; left: 3px; top: 0.12rem; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-elev); border: 6px solid var(--c);
}
.route li:not(:last-child)::after {
  content: ""; position: absolute; left: 13px; top: 1rem; bottom: -1.6rem; width: 6px; background: var(--c);
}
.route strong { display: block; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; margin-bottom: 0.2rem; color: var(--ink); }
.route p { margin: 0; color: var(--ink-2); }

.stats { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.stats > div { padding: 1.3rem 1rem 1.4rem 0; border-bottom: 1px solid var(--line); }
.stats > div:nth-child(odd) { padding-right: 1.25rem; border-right: 1px solid var(--line); }
.stats > div:nth-child(even) { padding-left: 1.25rem; }
.stats .stat { font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3.4rem); margin: 0; }
.stats .stat-label { font-size: 0.95rem; margin: 0.45rem 0 0; }
.stats-note { font-size: var(--step--1); color: var(--ink-3); margin-top: 1rem; }

/* ---------- Goodbye, Metro: four ways it frayed ---------- */
.frays { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: 2.5rem 0 1rem; }
.fray { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.15rem 1.25rem; }
.fray svg { display: block; width: 100%; height: auto; margin-bottom: 0.85rem; border-radius: var(--radius-s); background: var(--bg-sunk); }
.fray h3 { font-size: 1.15rem; margin: 0 0 0.35rem; }
.fray p { margin: 0; font-size: 0.95rem; color: var(--ink-2); }
.fray .th { fill: none; stroke: var(--c); stroke-width: 6; stroke-linecap: round; }
.fray .th-thin { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; }
.fray .knot { fill: var(--c); }
.fray .ghost { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; }
.fray .clock { fill: var(--bg-elev); stroke: var(--ink-3); stroke-width: 2; }
.fray .clock-hand { stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.fray .tick { fill: var(--bg-elev); stroke: var(--c); stroke-width: 2; }

/* ---------- Why Weaver ---------- */
.threads-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); margin: 2.5rem 0 3rem; }
.thread-card {
  position: relative; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.35rem 1.2rem 1.3rem; overflow: hidden;
}
.thread-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; background: var(--c);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 9px, rgb(0 0 0 / 0.65) 9px 13px);
          mask: repeating-linear-gradient(90deg, #000 0 9px, rgb(0 0 0 / 0.65) 9px 13px);
}
.thread-card h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.3rem; margin: 0.2rem 0 0.15rem; }
.thread-card .dye { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.75rem; }
.thread-card p { font-size: 0.97rem; color: var(--ink-2); margin: 0; }

.poet {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin: 3rem 0;
  padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--radius-l);
  background: var(--brand-deep); color: #eef6f2;
}
@media (min-width: 900px) { .poet { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.poet p { color: #cfe2da; margin: 0 0 0.9em; }
.poet p:last-child { margin-bottom: 0; }
.poet a { color: #9fe0c6; }
.poet blockquote { margin: 0; }
.poet blockquote p {
  font-family: var(--font-display); font-style: italic; font-weight: 500; color: #fff;
  font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.25rem); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 0.9rem;
  font-variation-settings: "SOFT" 100, "opsz" 144;
}
.poet blockquote p::before { content: "“"; color: var(--kirklees); margin-left: -0.45em; }
.poet blockquote p::after { content: "”"; color: var(--kirklees); }
.poet footer { font-size: var(--step--1); color: #b5d3c7; }
:root[data-theme="dark"] .poet { background: #0b2e26; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .poet { background: #0b2e26; } }

.weave-explainer { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: 3.5rem; }
@media (min-width: 900px) { .weave-explainer { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.weave-diagram { display: block; width: 100%; max-width: 480px; height: auto; margin-inline: auto; }
.weave-diagram .weft-rect { fill: var(--c); }
.weave-diagram .weft-hi-rect { fill: #fff; fill-opacity: 0.25; }
.weave-diagram .future-thread { fill: none; stroke: var(--ink-3); stroke-width: 2.5; stroke-dasharray: 7 7; }
.weave-diagram .marker circle { fill: var(--bg-elev); stroke: var(--ink); stroke-width: 2.5; }
.weave-diagram .marker text { fill: var(--ink); font-family: var(--font-mono); font-weight: 700; font-size: 17px; }
.weave-diagram .loom-shade rect { fill-opacity: 0.25; }
.weave-figure { margin: 0; }
.weave-figure figcaption { text-align: center; font-size: var(--step--1); color: var(--ink-3); margin-top: 0.6rem; }
.glossary { margin: 0; display: grid; gap: 1.1rem; }
.glossary > div { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: 0 0.9rem; }
.glossary dt { grid-column: 2; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; line-height: 1.25; }
.glossary dt .letter {
  position: absolute; margin-left: -3.2rem; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 2.5px solid var(--ink); font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; background: var(--bg-elev);
}
.glossary dt { position: relative; }
.glossary dd { grid-column: 2; margin: 0.15rem 0 0; color: var(--ink-2); }

/* ---------- What actually changes ---------- */
.flow { display: grid; gap: 0.9rem; margin: 2.5rem 0 3rem; counter-reset: flow; }
@media (min-width: 860px) { .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; } }
.flow-step {
  position: relative; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.3rem 1.35rem; border-top: 5px solid var(--c, var(--brand));
}
.flow-step .who { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin: 0 0 0.3rem; }
.flow-step h3 { font-size: var(--step-1); margin: 0 0 0.5rem; }
.flow-step p { margin: 0; color: var(--ink-2); font-size: 0.97rem; }
.flow-step + .flow-step::before {
  content: ""; position: absolute; background: var(--line-strong);
  left: 50%; top: -0.9rem; width: 2px; height: 0.9rem;
}
@media (min-width: 860px) {
  .flow-step + .flow-step::before { left: -2.4rem; top: 50%; width: 2.4rem; height: 2px; }
  .flow-step + .flow-step::after {
    content: ""; position: absolute; left: -0.75rem; top: calc(50% - 6px); border: 7px solid transparent; border-left-color: var(--line-strong); border-right: 0;
  }
}

.compare-wrap { border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; background: var(--bg-elev); box-shadow: var(--shadow); }
.compare { font-size: 1rem; }
.compare caption { text-align: left; padding: 1.1rem 1.25rem 0.2rem; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; caption-side: top; }
.compare th, .compare td { padding: 0.95rem 1.25rem; }
.compare thead th { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; background: transparent; border-bottom: 2px solid var(--line-strong); }
.compare thead th.col-after { color: var(--brand-text); }
.compare tbody th { font-weight: 700; color: var(--ink); background: transparent; width: 22%; }
.compare td.after { background: color-mix(in srgb, var(--brand-tint) 55%, transparent); color: var(--ink); }
.compare td.before { color: var(--ink-2); }
.compare tbody tr:last-child th { border-bottom: 0; }
@media (max-width: 760px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tr { padding: 0.4rem 0 0.8rem; border-bottom: 1px solid var(--line); }
  .compare tr:last-child { border-bottom: 0; }
  .compare caption { display: block; padding: 1.1rem 1.1rem 0.4rem; }
  .compare tbody th { width: auto; padding: 0.9rem 1.1rem 0.4rem; border: 0; font-family: var(--font-display); font-size: 1.15rem; }
  .compare td { border: 0; padding: 0.5rem 1.1rem 0.55rem; margin: 0 0.6rem; border-radius: var(--radius-s); }
  .compare td::before {
    content: attr(data-label); display: block; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: 0.15rem;
  }
  .compare td.after::before { color: var(--brand-text); }
}

.fleet { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-top: 3.5rem; }
@media (min-width: 940px) { .fleet { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.bus-figure { margin: 0; }
.bus-figure svg { display: block; width: 100%; height: auto; }
.bus-figure figcaption { font-size: var(--step--1); color: var(--ink-3); margin-top: 0.4rem; }
.bus .body { fill: var(--bus-body); }
.bus .glass { fill: var(--bus-glass); }
.bus .dark { fill: var(--bus-dark); }
.bus .tyre { fill: var(--bus-dark); }
.bus .hub { fill: #9aa7a2; }
.bus .road { stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 14 10; }
.bus .blind-text { fill: #ffb53d; font-family: var(--font-mono); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; }
.bus .bolt { fill: #ffd45c; }
.bus .door { fill: var(--bus-glass); stroke: var(--bus-dark); stroke-opacity: 0.35; stroke-width: 1.5; }
.bus .shine { fill: #fff; fill-opacity: 0.12; }
.fleet-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1.5rem; margin: 1.5rem 0 1.25rem; }
.fleet-stats .stat { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); margin: 0; }
.fleet-stats .stat-label { margin-top: 0.35rem; font-size: 0.95rem; }
.ticks { list-style: none; padding: 0; margin: 0 0 1rem; }
.ticks li { position: relative; padding-left: 1.7rem; color: var(--ink-2); }
.ticks li::before {
  content: ""; position: absolute; left: 0.1rem; top: 0.45em; width: 0.8rem; height: 0.45rem;
  border-left: 3px solid var(--brand-text); border-bottom: 3px solid var(--brand-text); transform: rotate(-45deg);
}

/* ---------- When ---------- */
.when-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 960px) {
  .when-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .when-intro { position: sticky; top: 100px; align-self: start; }
}
.legend { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.55rem; font-size: 0.95rem; color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.legend .dot { width: 18px; height: 18px; border-radius: 50%; border: 4px solid var(--c, var(--brand)); background: var(--bg); flex: none; }
.legend .dot.dashed { border-style: dashed; }
.legend-threads { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin-top: 1rem; font-size: 0.9rem; color: var(--ink-2); }
.legend-threads span { display: inline-flex; align-items: center; gap: 0.35rem; }
.timeline.story > li::before { background: var(--bg-sunk); }
.timeline.story h3 { font-size: 1.25rem; }
.timeline.story .two-tone::before { border-color: var(--c) var(--c2) var(--c2) var(--c); }
.timeline.story .now { padding-left: 0; margin: 2.4rem 0 2.4rem; }
.timeline.story .now::before { display: none; }
.now-pill {
  position: relative; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem 0.55rem 0.7rem;
  border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 0.95rem;
}
.now-pill::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--kirklees);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kirklees) 35%, transparent);
}
.timeline.story > li::before { z-index: 1; }
.timeline.story > li.future::after {
  content: ""; position: absolute; left: 11px; top: -1.9rem; bottom: -0.2rem; width: 2px;
  background: repeating-linear-gradient(180deg, var(--bg-sunk) 0 5px, transparent 5px 10px);
}
.timeline.story > li.now + li.future::after { top: -2.4rem; }
.timeline.story .future h3 { color: var(--ink); }
.timeline.story .future .when { color: var(--brand-text); }

/* ---------- What it means ---------- */
.lenses { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.lens { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.4rem 1.45rem; border-top: 5px solid var(--c, var(--brand)); }
.lens-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-sunk); margin-bottom: 0.9rem; color: var(--ink); }
.lens-icon svg { width: 26px; height: 26px; }
.lens h3 { font-size: 1.3rem; margin: 0 0 0.45rem; }
.lens p { margin: 0 0 0.7em; color: var(--ink-2); font-size: 0.98rem; }
.lens p:last-child { margin-bottom: 0; }

.honest {
  margin-top: clamp(2.5rem, 6vw, 4rem); border-radius: var(--radius-l); padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--warn-tint); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}
.honest-head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.honest-head h3 { font-size: var(--step-2); margin: 0; }
.honest-head p { margin: 0; color: var(--ink-2); }
.honest ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem 2.5rem; counter-reset: risk; }
@media (min-width: 860px) { .honest ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.honest li { counter-increment: risk; position: relative; padding-left: 2.6rem; margin: 0; color: var(--ink-2); }
.honest li::before {
  content: counter(risk); position: absolute; left: 0; top: 0.05rem; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem;
  color: var(--warn); border: 2px solid var(--warn);
}
.honest li strong { color: var(--ink); }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 52rem; }
.faq summary:hover { color: var(--brand-text); }
.faq summary:focus-visible { outline-offset: 4px; }
.faq details > div p { margin: 0 0 0.8em; }
.faq details > div ul { margin: 0 0 0.8em; }

/* ---------- Fan network ---------- */
.network-cards { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .network-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.net-card {
  display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: var(--ink);
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden;
  box-shadow: var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
}
.net-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); border-color: var(--line-strong); }
.net-card:focus-visible { outline-offset: 4px; border-radius: var(--radius-l); }
.net-art { background: var(--bg-sunk); border-bottom: 1px solid var(--line); }
.net-art svg { display: block; width: 100%; height: auto; }
.net-body { padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.net-body .domain { font-family: var(--font-mono); font-size: 0.85rem; color: var(--brand-text); margin: 0; }
.net-body h3 { font-size: var(--step-2); margin: 0; }
.net-body p { margin: 0; color: var(--ink-2); }
.net-body .go { margin-top: auto; padding-top: 0.6rem; font-weight: 700; color: var(--brand-text); display: inline-flex; align-items: center; gap: 0.4rem; }
.net-card:hover .go svg { transform: translateX(3px); }
.go svg { width: 1.1em; height: 1.1em; transition: transform 0.2s; }
.net-art .ln { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.net-art .stn { fill: var(--bg-elev); stroke: var(--ink); stroke-width: 3; }
.net-art .board { fill: var(--bus-dark); }
.net-art .board-text { fill: #ffb53d; font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.net-art .board-dim { fill: #ffb53d; fill-opacity: 0.55; font-family: var(--font-mono); font-size: 13px; }
.net-art .pulse { fill: var(--kirklees); }
.net-art .pulse-ring { fill: none; stroke: var(--kirklees); stroke-width: 2; opacity: 0.5; }

/* ---------- Sources ---------- */
.sources { columns: 2 22rem; column-gap: 3rem; font-size: 0.93rem; color: var(--ink-2); }
.sources section { break-inside: avoid; margin-bottom: 1.6rem; }
.sources h3 { font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); margin: 0 0 0.6rem; }
.sources ul { padding-left: 1.1rem; margin: 0; }
.sources li { margin: 0 0 0.45rem; }
.sources a { overflow-wrap: anywhere; }

/* ---------- Print ---------- */
@media print {
  .fanbar, .site-header, .progress, .weave-band, .nav-toggle, [data-theme-toggle] { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .faq details { break-inside: avoid; }
  body { background: #fff; }
}

/* Fact file (short version) */
.factfile { margin-top: 2rem; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.35rem 0.6rem; }
.factfile h3 { font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 0.6rem; color: var(--ink); }
.factfile dl { margin: 0; }
.factfile dl > div { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.factfile dt { font-family: var(--font-mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); padding-top: 0.2rem; }
.factfile dd { margin: 0; color: var(--ink); font-size: 0.97rem; }

/* Swatches (Why Weaver sidenote) */
.swatches svg { display: block; width: 100%; height: auto; margin: 0.35rem 0 0.4rem; }
.swatch-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }

/* FAQ + travel card */
.faq-grid { display: grid; gap: 2.5rem clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 1000px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); }
  .travel-card { position: sticky; top: 100px; }
}
.travel-card {
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.2rem;
  border-top: 5px solid var(--brand); font-size: 0.97rem; color: var(--ink-2);
}
.travel-card h3 { font-size: var(--step-1); margin: 0 0 0.5rem; color: var(--ink); }
.travel-card ul { padding-left: 1.1rem; margin: 0 0 0.9rem; }
.travel-card p:last-child { margin-bottom: 0; font-size: 0.92rem; }

/* Contrast: muted text sitting directly on the sunk background needs a darker ink (AA) */
.section-alt .timeline .when,
.section-alt .stats-note,
.section-alt figcaption,
.section-alt .swatch-labels { color: var(--ink-2); }
.timeline.story .future .when { color: var(--brand-text); }
.honest li::before { color: var(--ink); }