/* ==========================================================================
   Santiago Forero Vega — Ledger
   Design tokens, then components in document order.
   ========================================================================== */

:root {
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --disp: 'Archivo', system-ui, sans-serif;
  --serif: 'Newsreader', Georgia, serif;

  --paper: #FBFAF7;
  --ink: #0F1316;
  --mute: #6E7276;
  --m2: #5A5F63;
  --rule: #E3E1DA;
  --hair: #CFCBC1;
  --wash: #F5F3EE;

  /* Two accents with fixed jobs. Teal is structure: navigation, section marks,
     diagram strokes, calls to action. Clay is consequence: results, status,
     the moments where something paid off. Never swap them for variety. */
  --accent: #0E4F5C;
  --accent-deep: #0A3B45;
  --accent-tint: #ECF0EF;
  --accent-edge: #CEDBDB;

  --clay: #B5533A;
  --clay-deep: #93402C;
  --clay-tint: #F6EFEA;
  --clay-edge: #E9D8CF;

  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --shell: 1160px;
  --sticky-top: 4.75rem;
}

/* --- reset ---------------------------------------------------------------- */

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.58;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

body.is-locked { overflow: hidden }

h1, h2, h3, h4, p, ul, ol, li, figure { margin: 0; padding: 0 }
ul, ol { list-style: none }
img { max-width: 100% }

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 1px }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
::selection { background: var(--accent); color: var(--paper) }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
}

/* --- primitives ----------------------------------------------------------- */

.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.label--accent { color: var(--accent) }
.label--clay   { color: var(--clay-deep) }
.label--ink    { color: var(--ink) }
.label--quiet  { color: var(--m2); font-weight: 400; letter-spacing: .12em }
.label--faint  { color: var(--mute); font-weight: 400 }

/* Tinted surface. Cool for anything structural (diagrams), warm for outcomes. */
.panel {
  background: var(--accent-tint);
  border: 1px solid var(--accent-edge);
  padding: clamp(1.15rem, 3vw, 1.9rem);
}
.panel--warm { background: var(--clay-tint); border-color: var(--clay-edge) }
.panel--diagram { max-width: 42rem; margin-top: clamp(1.75rem, 3vw, 2.25rem) }
.panel--bare { border: 0 }

.rule { height: 1px; background: var(--rule); transform-origin: left }
.rule--hero { margin: 1.25rem 0 clamp(2rem, 4vw, 2.75rem) }
.rule--between { margin-bottom: clamp(2.75rem, 5vw, 4rem) }
.rule--between-tight { margin-bottom: clamp(2rem, 3.5vw, 2.75rem) }
.rule--case { margin: clamp(2rem, 4vw, 2.75rem) 0 }
.rule--modal { margin: 1.25rem 0 }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.view[hidden] { display: none }

/* --- link treatments ------------------------------------------------------ */

.link {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.link--cta {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  margin-top: 1.5rem;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: border-color .18s ease;
}
.link--cta:hover { color: var(--accent); border-bottom-color: var(--accent) }

/* Solid block for the calls to action that have to win the page. */
.link--solid {
  border-bottom: 0;
  padding: .85rem 1.15rem;
  background: var(--accent);
  color: var(--paper);
  transition: background-color .18s ease;
}
.link--solid:hover { background: var(--accent-deep); color: var(--paper) }
.link--solid:focus-visible { outline-color: var(--ink); outline-offset: 3px }

.link--contact { margin-top: 0; padding-bottom: 3px }

.link--back { color: var(--m2) }
.link--back:hover { color: var(--ink) }

.link--inline {
  font: inherit;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--clay-deep);
  border-bottom: 1px solid var(--clay-edge);
  padding-bottom: 1px;
  transition: border-color .18s ease, color .18s ease;
}
.link--inline:hover { color: var(--clay); border-bottom-color: var(--clay) }

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--rule);
  background: rgba(251, 250, 247, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.masthead__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
  flex: 0 1 auto;
  min-width: 0;
}
.brand:hover { color: var(--ink) }

.brand__mark {
  flex: 0 0 auto;
  display: block;
  width: 15px;
  height: 15.4px;
  background: var(--accent);
  -webkit-mask: url(assets/isotype-sprout.png) center / contain no-repeat;
  mask: url(assets/isotype-sprout.png) center / contain no-repeat;
}

.brand__name {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Narrow phones: the wordmark would ellipsis down to "SAN…". Drop it and let the
   isotype carry the home link — the full name is the H1 directly below. */
@media (max-width: 26rem) {
  .brand__name { display: none }
}

.nav { display: flex; gap: clamp(.85rem, 2.4vw, 1.75rem); flex: 0 0 auto }

.nav__link {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--m2);
  transition: color .18s ease;
}
.nav__link:hover { color: var(--accent) }

/* ==========================================================================
   Section scaffolding
   ========================================================================== */

.sec { scroll-margin-top: 4.5rem }

.sec__body { padding: clamp(3.25rem, 5.5vw, 4.75rem) 0 }
.sec__body--hero { padding: clamp(4.5rem, 11vw, 8.5rem) 0 clamp(4rem, 8vw, 6.5rem) }
.sec__body--contact { padding: clamp(4.5rem, 9vw, 7.5rem) 0 clamp(4rem, 8vw, 6.5rem) }

.sec__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.sec__index {
  flex: 1 1 150px;
  position: sticky;
  top: var(--sticky-top);
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1rem;
  line-height: 1.45;
}
.sec__index--static { position: static }

.sec__main { flex: 999 1 min(100%, 32rem); min-width: 0 }
.sec__main--narrow { max-width: 44rem }

/* Once the two columns wrap into one, a sticky index would pin itself over the
   body copy scrolling beneath it. Below the wrap point it rides along instead. */
@media (max-width: 48rem) {
  .sec__index { position: static }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative }

/* The portrait is bounded by the hero's own rules: it starts at the hairline
   under the eyebrow and ends at the section divider, never crossing either.
   min-height sets how much room it gets. */
.hero__stage { position: relative; min-height: clamp(17rem, 30vw, 26rem) }
.hero__copy { position: relative; z-index: 1 }

.hero__portrait {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: calc(-1 * clamp(4rem, 8vw, 6.5rem));  /* down to the section divider */
  /* Bleed past the shell to the viewport edge rather than stopping short. */
  right: calc((min(var(--shell), 100vw) - 100vw) / 2 - var(--gutter));
  width: min(50%, 33rem);
  height: auto;
  object-fit: cover;
  pointer-events: none;
  /* Short fade confined to the left edge — solid from 42% on, so most of the
     frame reads at full strength. The stops after the first are what govern
     how much shows through. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.3) 14%, rgba(0,0,0,.72) 28%, #000 42%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.3) 14%, rgba(0,0,0,.72) 28%, #000 42%);
}

/* No room to sit alongside the headline — move it above, still fading left. */
@media (max-width: 48rem) {
  .hero__stage { min-height: 0 }
  .hero__portrait {
    position: static;
    width: min(72%, 18rem);
    margin: 0 0 clamp(1.5rem, 5vw, 2.25rem) auto;
    display: block;
  }
}

/* Forced break so the headline reads as two deliberate lines. Dropped on narrow
   screens, where the line has to wrap on its own anyway. */
@media (max-width: 48rem) { .hero__brk { display: none } }

.hero__title {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: -.035em;
  font-size: clamp(2.35rem, 6vw, 4.5rem);
  line-height: 1.03;
  max-width: 22ch;
}

.hero__lede {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  font-size: clamp(1.1rem, 1.87vw, 1.45rem);
  line-height: 1.4;
  color: var(--m2);
  max-width: 84ch;
}

/* ==========================================================================
   01 — Work
   ========================================================================== */

.work { display: flex; flex-direction: column; gap: clamp(2.75rem, 5vw, 4rem) }

.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}
.work__head--archived { gap: .4rem 1.5rem }

.work__title {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: -.03em;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  line-height: 1.1;
}
.work__title--archived {
  font-weight: 500;
  letter-spacing: -.02em;
  font-size: clamp(1.15rem, 1.9vw, 1.35rem);
  line-height: 1.15;
  color: var(--m2);
}

.work__copy { margin-top: 1.5rem; max-width: 62ch }
.work__copy--tight { margin-top: 1.25rem }
.work__copy--archived {
  margin-top: .9rem;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--m2);
}

/* --- media -----------------------------------------------------------------
   Two states share one frame: `.media` holds a real player, `.media--pending`
   holds the hatched box for an asset that does not exist yet. Both sit in the
   same 16:9 box so a case study reads the same either way.
   -------------------------------------------------------------------------- */

.media { margin-top: 1.5rem }
.media--hero { margin-top: clamp(2.25rem, 4.5vw, 3.25rem) }

.media__player {
  display: block;
  width: 100%;
  /* The width/height attributes are presentational hints that would otherwise
     beat aspect-ratio and render the player at its intrinsic 1080px. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--rule);
  background: var(--ink);
}

.media__caption { display: block; margin-top: .7rem }

.media--pending .media__frame {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  background: repeating-linear-gradient(135deg, #F4F2ED 0 8px, #EFEDE7 8px 16px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 1rem;
}
.media--hero.media--pending .media__frame { padding: 1.15rem }
.media--pending .media__caption { margin-top: 0 }

/* --- metric ledger -------------------------------------------------------- */

/* Results live on a warm panel — clay is the colour of consequence here. */
.metrics {
  margin-top: 1.75rem;
  max-width: 40rem;
  background: var(--clay-tint);
  border: 1px solid var(--clay-edge);
  padding: .2rem clamp(1rem, 2.5vw, 1.4rem);
}

.metric {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .9rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--clay-edge);
}
.metric:last-child { border-bottom: 0 }

.metric__label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay-deep);
}

.metric__leader {
  flex: 1 1 1.5rem;
  min-width: 1rem;
  border-bottom: 1px dotted var(--hair);
  font-size: 11px;
}

.metric__value {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: -.02em;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  margin-left: auto;
}
.metric__value--num { font-variant-numeric: tabular-nums }

.metrics--case { margin-top: 0; max-width: 44rem }
.metrics--case .metric { padding: .9rem 0 }
.metrics--case .metric__value {
  letter-spacing: -.025em;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
}

/* --- project tiles -------------------------------------------------------- */

.tiles {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  max-width: 40rem;
}

.tile {
  display: block;
  padding: 1.15rem 1.25rem;
  background: var(--accent-tint);
  color: var(--ink);
  transition: background-color .18s ease;
}
.tile:hover { background: var(--accent-edge); color: var(--ink) }

.tile__copy { margin-top: .55rem; font-size: 1.2rem; line-height: 1.5 }
.tile__url {
  margin-top: .7rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--m2);
}

/* ==========================================================================
   02 — Approach
   ========================================================================== */

.statement {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: -.03em;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.14;
  max-width: 26ch;
}
.statement--tight {
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  line-height: 1.16;
  max-width: 30ch;
}

.pillars { margin-top: clamp(2rem, 4vw, 2.75rem); max-width: 44rem }

.pillar {
  border-top: 1px solid var(--rule);
  padding: 1.15rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1.25rem;
}
.pillar--step2 { margin-left: clamp(0rem, 3.2vw, 1.5rem) }
.pillar--step3 { margin-left: clamp(0rem, 6.4vw, 3rem) }
.pillar--step4 { margin-left: clamp(0rem, 9.6vw, 4.5rem) }
.pillar--last { border-bottom: 1px solid var(--rule) }

.pillar__num { flex: 0 0 1.75rem; text-transform: none }
.pillar__name {
  font-family: var(--disp);
  font-weight: 500;
  letter-spacing: -.02em;
  font-size: 1.15rem;
  flex: 0 0 auto;
}
.pillar__note { flex: 1 1 min(100%, 18rem); color: var(--m2) }

/* --- the clarity cycle: a ring, because it is a cycle --------------------- */

.cycle {
  position: relative;
  width: min(100%, 31rem);
  margin: clamp(.25rem, 1.5vw, .75rem) auto 0;
  aspect-ratio: 1 / .8;
}
.cycle__ring { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--accent) }

/* Each label sits at its node point on the ring, in the gap between two arcs,
   so the text is part of the cycle rather than orbiting outside it. */
.cycle__node {
  position: absolute;
  width: 38%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(.9rem, 2vw, 1.05rem);
  line-height: 1.25;
}
.cycle__node--a { left: 50%;   top: 11.25% }
.cycle__node--b { left: 76.9%; top: 69.4% }
.cycle__node--c { left: 23.1%; top: 69.4% }

.cycle__hub {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* ==========================================================================
   03 — Career
   ========================================================================== */

.role {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem clamp(1.5rem, 3vw, 2.5rem);
}
.role--last { border-bottom: 1px solid var(--rule) }

.role__id { flex: 1 1 11rem; max-width: 14rem }
.role__org { display: flex; align-items: center; gap: .6rem }

.role__logo { flex: 0 0 auto; width: 26px; height: 26px; object-fit: contain }
.role__logo--rounded { border-radius: 3px }
.role__logo--word { width: 64px; object-position: left center }

.role__name {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: -.02em;
  font-size: 1.15rem;
  line-height: 1.2;
}

.role__meta {
  margin-top: .4rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--m2);
}

.role__copy { flex: 999 1 min(100%, 20rem); color: var(--m2) }

.career__foot {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.career__foot .link--cta { margin-top: 0 }

.career__edu {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 2;
  letter-spacing: .1em;
  color: var(--m2);
}

/* ==========================================================================
   04 — Teaching
   ========================================================================== */

.taught { margin-top: clamp(2rem, 4vw, 2.75rem) }

.taught__row {
  border-top: 1px solid var(--rule);
  padding: 1.1rem 0;
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.taught__row--last { border-bottom: 1px solid var(--rule) }

.taught__num {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: -.03em;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1;
  flex: 0 0 2.25rem;
  font-variant-numeric: tabular-nums;
}
.taught__note { flex: 1 1 auto; color: var(--m2) }

.taught__method { margin-top: clamp(1.75rem, 3vw, 2.25rem); max-width: 52ch }

/* ==========================================================================
   05 — Contact & colophon
   ========================================================================== */

.contact__title {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: -.035em;
  font-size: clamp(2rem, 4.6vw, 3.35rem);
  line-height: 1.06;
}

.contact__links {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem clamp(1.75rem, 4vw, 3rem);
}

.colophon {
  border-top: 1px solid var(--rule);
  padding: 2.25rem 0 3rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.colophon__mark {
  flex: 0 0 auto;
  display: block;
  width: 13px;
  height: 13.4px;
  background: var(--m2);
  -webkit-mask: url(assets/isotype-sprout.png) center / contain no-repeat;
  mask: url(assets/isotype-sprout.png) center / contain no-repeat;
}

/* ==========================================================================
   Case study
   --------------------------------------------------------------------------
   A case study is an ordered list of `.case__row` sections — a mono label on
   the left, arbitrary content on the right. Nothing here assumes which sections
   are present or how many, so each case study composes only the ones it has.

   Content primitives, usable in any row or split column:
     .case__prose   body copy
     .case__lead    large-type statements, one per line
     .case__list    bordered ledger rows
     .case__mono    monospaced spec lines
     .case__steps   body-size narrative bullets  (the heavyweight treatment)
     .case__aside   italic muted follow-up to the above
     .case__note    short note under a split-column heading
     .metrics--case the results ledger, shared across case studies
   ========================================================================== */

.sec__body--case-hero { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.5rem, 4vw, 3.5rem) }
.sec__body--case { padding: clamp(2.75rem, 5vw, 4rem) 0 }
.sec__body--case-foot { padding: clamp(2.75rem, 5vw, 4rem) 0 clamp(4rem, 7vw, 5.5rem) }

.case__title {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: -.035em;
  font-size: clamp(2.35rem, 5.6vw, 4rem);
  line-height: 1.04;
}

.case__facts { margin-top: 1rem; line-height: 1.9 }

.case__lede {
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  line-height: 1.32;
  max-width: 34ch;
  letter-spacing: -.005em;
}

/* --- row scaffolding ------------------------------------------------------ */

.case__row { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 3.5vw, 3rem) }
.case__row-label { flex: 1 1 150px }
.case__row-main { flex: 999 1 min(100%, 28rem); min-width: 0 }

.case__split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

/* --- content primitives --------------------------------------------------- */

.case__prose { max-width: 56ch }
.case__prose + .case__prose { margin-top: 1rem }

.case__lead { display: flex; flex-direction: column; gap: .65rem; max-width: 52ch }
.case__lead > * { font-size: clamp(1.3rem, 2.1vw, 1.55rem); line-height: 1.4 }

.case__list { margin-top: 1.25rem }
.case__list--flush { margin-top: 0 }
.case__list > li { border-top: 1px solid var(--rule); padding: .7rem 0 }
.case__list > li:last-child { border-bottom: 1px solid var(--rule) }
.case__list--faint > li { color: var(--mute) }

.case__mono {
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-width: 44rem;
}

.case__steps { display: flex; flex-direction: column; gap: 1rem; max-width: 56ch }
.case__aside { margin-top: 1.5rem; font-style: italic; color: var(--m2); max-width: 56ch }

.case__note { margin-top: 1.25rem; max-width: 46ch }

/* ==========================================================================
   Modal
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 19, 22, .32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}
.modal[hidden] { display: none }

.modal__panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  max-width: 34rem;
  width: 100%;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  max-height: 100%;
  overflow-y: auto;
}

.modal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.modal__close {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--m2);
  transition: color .18s ease;
}
.modal__close:hover { color: var(--ink) }

.modal__title {
  margin-top: 1.25rem;
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: -.03em;
  font-size: 1.65rem;
  line-height: 1.14;
}

.modal__panel--wide { max-width: 48rem }

/* ==========================================================================
   PMR infographic — lives in the modal, built from the page's own devices:
   the numbered staircase, the arrow/bracket diagram, the dotted-leader ledger.
   ========================================================================== */

.pmr__sub { margin-top: .5rem }

.pmr__premise {
  margin-top: 1.5rem;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.32;
  letter-spacing: -.005em;
  max-width: 40ch;
}

/* Section marker: label followed by a hairline running to the edge. */
.band {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 1rem;
}
.band::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--rule) }

/* --- the three risks ------------------------------------------------------ */

.risks { border-bottom: 1px solid var(--rule) }

.risk {
  border-top: 1px solid var(--rule);
  padding: .9rem 0;
  display: flex;
  align-items: baseline;
  gap: .9rem;
}
.risk__num { flex: 0 0 1.5rem; text-transform: none }
.risk__body { flex: 1 1 auto; min-width: 0 }

.risk__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .1rem .9rem;
}
.risk__name {
  font-family: var(--disp);
  font-weight: 500;
  letter-spacing: -.02em;
  font-size: 1.15rem;
  line-height: 1.2;
}
.risk__note { margin-top: .25rem; color: var(--m2); font-size: 1.05rem; line-height: 1.45 }

/* --- how it fails: a loaded beam that fails three ways, on a loop ---------
   Phase A  discovery gives way   -> the beam drops to the left
   Phase B  design gives way      -> the beam snaps in half
   Phase C  value capture gives way -> the beam drops to the right
   -------------------------------------------------------------------------- */

.beam { --col-h: clamp(3.6rem, 9vw, 5rem); --tilt: 2.6deg }

.beam__bar {
  display: flex;
  position: relative;
  z-index: 1;
  animation: beam-bar 15s linear infinite;
}

/* Two halves so the beam can tear in the middle. Each clips its own copy of the
   label, and together they read as one line until they come apart. */
.beam__half {
  flex: 1 1 50%;
  position: relative;
  overflow: hidden;
  height: 2.5rem;
  background: var(--accent);
}
.beam__half b {
  position: absolute;
  top: 50%;
  width: 200%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper);
}
.beam__half--l b { left: 0 }
.beam__half--r b { left: -100% }

.beam__half--l { transform-origin: left center;  animation: beam-half-l 15s linear infinite }
.beam__half--r { transform-origin: right center; animation: beam-half-r 15s linear infinite }

.beam__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.75rem, 2.5vw, 1.5rem);
  align-items: start;
  margin-top: -1px;
}

.beam__col {
  height: var(--col-h);
  border: 1px solid var(--accent);
  border-top: 0;
  background: var(--accent-tint);
  /* Flat-topped polygon with the same point count as the fractured one, so the
     break can animate rather than pop. */
  clip-path: polygon(0 0, 13% 0, 27% 0, 41% 0, 56% 0, 71% 0, 87% 0, 100% 0, 100% 100%, 0 100%);
}
.beam__col--a { animation: col-a 15s linear infinite }
.beam__col--b { animation: col-b 15s linear infinite }
.beam__col--c { animation: col-c 15s linear infinite }

.beam__labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.75rem, 2.5vw, 1.5rem);
  margin-top: .6rem;
}
.beam__labels > span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
}
.beam__labels > span:nth-child(1) { animation: label-a 15s linear infinite }
.beam__labels > span:nth-child(2) { animation: label-b 15s linear infinite }
.beam__labels > span:nth-child(3) { animation: label-c 15s linear infinite }

@keyframes col-a {
  0%, 4%    { height: var(--col-h); border-color: var(--accent); background: var(--accent-tint);
              clip-path: polygon(0 0,13% 0,27% 0,41% 0,56% 0,71% 0,87% 0,100% 0,100% 100%,0 100%) }
  9%, 27%   { height: calc(var(--col-h) - 1.15rem); border-color: var(--clay); background: var(--clay-tint);
              clip-path: polygon(0 16%,13% 4%,27% 17%,41% 3%,56% 16%,71% 4%,87% 17%,100% 5%,100% 100%,0 100%) }
  32%, 100% { height: var(--col-h); border-color: var(--accent); background: var(--accent-tint);
              clip-path: polygon(0 0,13% 0,27% 0,41% 0,56% 0,71% 0,87% 0,100% 0,100% 100%,0 100%) }
}
@keyframes col-b {
  0%, 37%   { height: var(--col-h); border-color: var(--accent); background: var(--accent-tint);
              clip-path: polygon(0 0,13% 0,27% 0,41% 0,56% 0,71% 0,87% 0,100% 0,100% 100%,0 100%) }
  42%, 60%  { height: calc(var(--col-h) - 1.15rem); border-color: var(--clay); background: var(--clay-tint);
              clip-path: polygon(0 16%,13% 4%,27% 17%,41% 3%,56% 16%,71% 4%,87% 17%,100% 5%,100% 100%,0 100%) }
  65%, 100% { height: var(--col-h); border-color: var(--accent); background: var(--accent-tint);
              clip-path: polygon(0 0,13% 0,27% 0,41% 0,56% 0,71% 0,87% 0,100% 0,100% 100%,0 100%) }
}
@keyframes col-c {
  0%, 70%   { height: var(--col-h); border-color: var(--accent); background: var(--accent-tint);
              clip-path: polygon(0 0,13% 0,27% 0,41% 0,56% 0,71% 0,87% 0,100% 0,100% 100%,0 100%) }
  75%, 93%  { height: calc(var(--col-h) - 1.15rem); border-color: var(--clay); background: var(--clay-tint);
              clip-path: polygon(0 16%,13% 4%,27% 17%,41% 3%,56% 16%,71% 4%,87% 17%,100% 5%,100% 100%,0 100%) }
  98%, 100% { height: var(--col-h); border-color: var(--accent); background: var(--accent-tint);
              clip-path: polygon(0 0,13% 0,27% 0,41% 0,56% 0,71% 0,87% 0,100% 0,100% 100%,0 100%) }
}

@keyframes label-a { 0%,4% { color: var(--accent) } 9%,27% { color: var(--clay-deep) } 32%,100% { color: var(--accent) } }
@keyframes label-b { 0%,37% { color: var(--accent) } 42%,60% { color: var(--clay-deep) } 65%,100% { color: var(--accent) } }
@keyframes label-c { 0%,70% { color: var(--accent) } 75%,93% { color: var(--clay-deep) } 98%,100% { color: var(--accent) } }

/* Whole-beam tilt covers phases A and C. The origin flips while the rotation is
   zero, so the switch is invisible. */
@keyframes beam-bar {
  0%, 4%    { transform: rotate(0deg);            transform-origin: right center }
  9%, 27%   { transform: rotate(calc(-1 * var(--tilt))); transform-origin: right center }
  32%, 70%  { transform: rotate(0deg);            transform-origin: left center }
  75%, 93%  { transform: rotate(var(--tilt));     transform-origin: left center }
  98%, 100% { transform: rotate(0deg);            transform-origin: left center }
}

/* Phase B only: the halves sag toward the middle and the label tears apart. */
@keyframes beam-half-l {
  0%, 37%   { transform: rotate(0deg) }
  42%, 60%  { transform: rotate(2.8deg) }
  65%, 100% { transform: rotate(0deg) }
}
@keyframes beam-half-r {
  0%, 37%   { transform: rotate(0deg) }
  42%, 60%  { transform: rotate(-2.8deg) }
  65%, 100% { transform: rotate(0deg) }
}

.beam__caption { margin-top: 1.1rem; color: var(--m2); font-size: 1.05rem; line-height: 1.45 }

@media (prefers-reduced-motion: reduce) {
  .beam__bar, .beam__half, .beam__col, .beam__labels > span { animation: none }
}

/* --- the mechanism: a branching decision, because it forks ---------------- */

.tree { display: flex; flex-direction: column; align-items: stretch }

.tree__step {
  border: 1px solid var(--accent-edge);
  background: var(--paper);
  padding: .7rem 1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.3;
  text-align: center;
}

/* Connector with an arrowhead, so the direction of travel is explicit. */
.tree__link {
  position: relative;
  align-self: center;
  width: 1px;
  height: 1.9rem;
  background: var(--accent);
}
.tree__link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--accent);
}

.tree__fork {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.75rem, 2.5vw, 1.5rem);
  padding-top: 3.4rem;
}
/* The crossbar spans between the two branch centres so the stubs meet it. */
.tree__fork::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25%; right: 25%;
  height: 1px;
  background: var(--accent);
}

.tree__branch { position: relative }
.tree__branch::before {
  content: '';
  position: absolute;
  top: -3.4rem;
  left: calc(50% - .5px);
  width: 1px;
  height: 2.7rem;
  background: var(--accent);
}
.tree__branch::after {
  content: '';
  position: absolute;
  top: -.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--accent);
}

.tree__cond { display: block; text-align: center; margin-bottom: .5rem }

.tree__leaf {
  padding: .7rem 1rem;
  text-align: center;
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: -.02em;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
}
.tree__leaf--good { background: var(--accent); color: var(--paper) }
.tree__leaf--bad  { background: var(--clay); color: var(--paper) }

/* --- closing -------------------------------------------------------------- */

.pmr__foot {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .9rem 2rem;
}
.pmr__more { margin-top: 0; flex: 0 0 auto }

.pmr__close {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: -.025em;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.2;
}
.pmr__close em { font-style: normal; color: var(--accent) }

/* --- narrow: run the diagrams vertically ---------------------------------- */

@media (max-width: 48rem) {
  .tree__fork { grid-template-columns: 1fr; gap: 1.4rem }
  .tree__fork::before { display: none }
  .tree__branch::before { display: none }
  .tree__branch + .tree__branch { margin-top: 0 }
}

/* ==========================================================================
   Reveal-on-scroll — JS adds `.is-armed` before observing.
   Without JS (or with reduced motion) everything stays visible.
   ========================================================================== */

.sec.is-armed [data-rule] { transform: scaleX(0) }
.sec.is-armed .sec__body { opacity: 0; transform: translateY(14px) }

.sec.is-armed.is-revealed [data-rule] {
  transform: scaleX(1);
  transition: transform .55s cubic-bezier(.22, .7, .16, 1);
}
.sec.is-armed.is-revealed .sec__body {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease .1s, transform .6s cubic-bezier(.22, .7, .16, 1) .1s;
}

@media print {
  .masthead, .modal { display: none !important }
  .sec.is-armed [data-rule] { transform: none }
  .sec.is-armed .sec__body { opacity: 1; transform: none }
}