/* Eledon Pharmaceuticals × Made Scientific — cadaveric islet cell program hub.
   Made Teal is the ground; Eledon cyan is used sparingly, as their accent.
   Brand tokens per made-design-system/src/tokens.css — do not invent colors. */

:root {
  --teal:   #00545F;
  --teal-d: #003D45;
  --green:  #43B02A;
  --aqua:   #57C2AC;
  --cyan:   #00B4E1;
  --cyan-t: #E6F7FD;
  --char:   #262626;
  --grey:   #6B7280;
  --line:   #DCE3E4;
  --tint:   #EAF4F2;
  --fill:   #F7F9F9;
  --white:  #FFFFFF;
  --wrap:   1180px;
  /* MADE brand type, per made-design-system tokens (shared across Made client hubs). */
  --font:      'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-disp: 'Funnel Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--char);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-disp); font-weight: 700; letter-spacing: -0.01em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* Access is gated at the HTTP layer (Traefik Basic Auth) — no in-page gate CSS needed. */

/* ── Nav ───────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 3px solid var(--green);
  box-shadow: 0 1px 0 var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 1.4rem; height: 64px; }
.lockup { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; }
/* Single combined Eledon x Made lockup. Two variants of one artwork: the
   dark wordmarks for the white nav, a knockout for teal grounds. */
.mark-lockup { height: 30px; width: auto; display: block; }
.nav-links { display: flex; gap: 15px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  color: var(--char); text-decoration: none; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; transition: color .15s;
}
.nav-links a:hover { color: var(--green); }

/* ── Hero ──────────────────────────────────────────────────────── */
.hero { background: var(--teal); color: var(--white); padding: 56px 0 72px; }
/* The nav carries the primary lockup for normal browsing, but the nav is
   hidden in present/export mode — without this, the Opening slide would
   carry no branding at all. Kept small since it's a secondary repeat. */
.hero-marks { display: flex; align-items: center; margin-bottom: 40px; }
.hero-lockup { height: 42px; width: auto; display: block; }
.hero h1 { font-size: 52px; line-height: 1.1; margin: 0 0 20px; letter-spacing: -0.5px; }
.lede { font-size: 19px; color: var(--aqua); max-width: 700px; margin: 0; }
.rule { width: 92px; height: 3px; background: var(--green); margin: 32px 0 20px; }
.stamp { font-size: 12px; letter-spacing: 1.2px; color: #8FC7BE; margin: 0; font-weight: bold; }

/* ── Sections ──────────────────────────────────────────────────── */
section { padding: 62px 0; }
/* `.wrap` is both a layout container and, on nine sections, the section
   element itself. As a class it outranks the bare `section` selector, so
   `padding: 0 28px` silently wiped the vertical rhythm on exactly those
   nine — the teal hero then butted straight into the Overview heading.
   Restore the vertical padding without losing the horizontal gutter. */
section.wrap { padding-top: 62px; padding-bottom: 62px; }
.band { background: var(--fill); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kicker { color: var(--green); font-size: 11.5px; font-weight: bold; letter-spacing: 1.4px;
          text-transform: uppercase; margin: 0 0 6px; }
h2 { color: var(--teal); font-size: 31px; margin: 0 0 22px; letter-spacing: -0.3px; }
h3 { color: var(--teal); font-size: 16px; margin: 0 0 12px; }
.body { font-size: 15.5px; max-width: 860px; color: #333; }

/* ── Tables ────────────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.qa td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.qa tr td:first-child { width: 38%; color: var(--grey); }
.qa tr:nth-child(odd) { background: var(--fill); }

.grid { margin: 8px 0 18px; }
.grid th {
  background: var(--teal); color: var(--white); text-align: left;
  padding: 11px 13px; font-size: 13px;
}
.grid td { padding: 11px 13px; border-bottom: 1px solid var(--line); }
.grid tbody tr:nth-child(even) { background: var(--fill); }
.compare td:first-child { color: var(--grey); }

.plain td { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.plain td:last-child { text-align: right; color: var(--grey); white-space: nowrap; }

/* ── Callouts ──────────────────────────────────────────────────── */
.callout, .callout-green, .callout-rose {
  padding: 16px 20px; border-radius: 8px; font-size: 15px; margin: 22px 0 0;
}
.callout { background: var(--tint); border: 1px solid var(--aqua); }
.callout-green { background: #F0F9EC; border: 1px solid var(--green); }
.callout-rose { background: var(--cyan-t); border: 1px solid var(--cyan); color: var(--cyan);
                font-weight: bold; }

.headline { font-size: 40px; font-weight: bold; color: var(--teal); margin: 4px 0 10px; }
.headline-sm { font-size: 19px; font-weight: bold; color: var(--green); margin: 24px 0 6px; }

/* ── Figures ───────────────────────────────────────────────────── */
.fig { margin: 26px 0 0; overflow-x: auto; }
.fig img { width: 100%; min-width: 900px; display: block;
           border: 1px solid var(--line); border-radius: 10px; background: var(--white); }

/* ── Facility photo slider ───────────────────────────────────────────
   Crossfade rather than a horizontal track: the images differ in aspect
   ratio, and a fixed-height stage keeps the section from reflowing as
   slides change — which matters in present mode, where a height change
   would push content past the frame mid-presentation. */
.slider { position: relative; margin-top: 24px; border-radius: 10px; overflow: hidden;
          border: 1px solid var(--line); background: var(--fill); }
.slider-track { position: relative; height: 400px; }
.slider .slide { position: absolute; inset: 0; margin: 0; opacity: 0;
                 transition: opacity .35s ease; pointer-events: none; }
.slider .slide.is-on { opacity: 1; pointer-events: auto; }
.slider .slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slider .slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 26px 18px 12px; font-size: 12.5px; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
}
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.9); border: 1px solid var(--line);
  color: var(--teal); font-size: 20px; line-height: 1; z-index: 2;
  transition: background .15s;
}
.slider-arrow:hover { background: #fff; }
.slider-arrow.prev { left: 12px; }
.slider-arrow.next { right: 12px; }
.slider-dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
               display: flex; justify-content: center; gap: 7px; }
.slider-dots button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.85); background: transparent; transition: background .15s;
}
.slider-dots button.is-on { background: #fff; }

@media (max-width: 700px) {
  .slider-track { height: 250px; }
}

/* Property facts — four figures under the facility slider. */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 22px; }
.fact { border-left: 3px solid var(--green); padding-left: 14px; }
.fact-n { display: block; font-family: var(--font-disp); font-size: 27px; font-weight: 700;
          color: var(--teal); line-height: 1.1; }
.fact-u { display: block; font-size: 12px; font-weight: 700; color: var(--char); margin-top: 2px; }
.fact-s { display: block; font-size: 11.5px; color: var(--grey); margin-top: 4px; line-height: 1.35; }
.fine-note { font-size: 12.5px; color: var(--grey); margin-top: 16px; max-width: none; }

@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; } }

.layout-photos { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-top: 24px; }
.layout-photo { width: 100%; height: 340px; border-radius: 10px; border: 1px solid var(--line); display: block; }
.layout-photo-aerial { object-fit: contain; background: var(--fill); }
.layout-photo-cleanroom { object-fit: cover; }

@media (max-width: 700px) {
  .layout-photos { grid-template-columns: 1fr; }
}

.equip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
.equip-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.equip-card img { width: 100%; height: 150px; object-fit: contain; background: var(--fill); display: block; }
.equip-title { font-size: 13.5px; font-weight: bold; color: var(--teal); padding: 12px 14px 2px; }
.equip-sub { font-size: 11.5px; color: var(--grey); padding: 0 14px 14px; line-height: 1.3; }

@media (max-width: 900px) {
  .equip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .equip-grid { grid-template-columns: 1fr; }
}

/* ── Stats ─────────────────────────────────────────────────────── */
/* Auto-fit rather than a fixed 3 — the lead-time section carries four. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
         gap: 24px; margin-top: 34px; }
.stats .big, .out .big { display: block; font-size: 34px; font-weight: bold; color: var(--green);
                         line-height: 1.1; }
.stats .unit, .out .unit { display: block; font-size: 14px; font-weight: bold; margin-top: 4px; }
.stats .note, .out .note { display: block; font-size: 12.5px; color: var(--grey); margin-top: 3px; }

/* ── Calculator ────────────────────────────────────────────────── */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 30px; }
.calc-inputs label { display: block; margin-bottom: 22px; font-size: 14px; font-weight: bold; }
.calc-inputs input[type=range] {
  display: block; width: 100%; margin: 9px 0 3px; accent-color: var(--green);
}
.calc-inputs output { font-size: 15px; color: var(--teal); font-weight: bold; }
.calc-inputs .hint { display: block; font-size: 12.5px; color: var(--grey); font-weight: normal;
                     margin-top: 2px; }
.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: start; }
.out { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.out.over .big { color: var(--cyan); }

/* ── Next steps ────────────────────────────────────────────────── */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 22px 0 0; }
.steps li {
  counter-increment: s; position: relative; padding: 16px 20px 16px 62px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  margin-bottom: 12px; font-size: 15px;
}
.steps li::before {
  content: counter(s); position: absolute; left: 20px; top: 13px;
  font-size: 25px; font-weight: bold; color: var(--green);
}

/* ── Footer ────────────────────────────────────────────────────── */
footer { background: var(--teal); color: #BFE3DC; padding: 34px 0; font-size: 13px; }
footer p { margin: 0 0 6px; }
.fine { color: #7FB5AC; font-size: 12px; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero h1 { font-size: 36px; }
  .cols, .calc { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 20px; }
  .calc-out { grid-template-columns: 1fr 1fr; }
  section { padding: 44px 0; }
  h2 { font-size: 25px; }
  .qa tr td:first-child { width: auto; }

  /* The costing tables carry 7-8 columns and cannot usefully reflow, so they
     used to force the whole document to their own width — at 375px the page
     scrolled sideways by 323px and every section inherited the wrong width.
     Let each table scroll inside itself instead. Column alignment survives
     because the rows still generate an anonymous table box inside the block. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }

/* ── Work package breakdown ──────────────────────────────────────────── */
.wbs-milestone { margin: 22px 0; }
.wbs-mhead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.wbs-mnum { background: var(--teal); color: var(--white); font-size: 12px; font-weight: bold;
            padding: 3px 9px; border-radius: 5px; }
.wbs-mname { font-size: 16px; font-weight: bold; color: var(--teal); }
.wbs-myear { font-size: 12px; color: var(--grey); margin-left: auto; }
.wbs-tbl { table-layout: fixed; width: 100%; }
.wbs-tbl th, .wbs-tbl td { font-size: 13px; }
/* Fixed widths, identical across every milestone's table — each renders as its
   own <table> (see site.js), so without this the browser auto-sizes columns
   per-table and Low/High/Basis drift out of alignment from one milestone to
   the next. */
.wbs-tbl th:nth-child(1), .wbs-tbl td:nth-child(1) { width: 9%; }
.wbs-tbl th:nth-child(2), .wbs-tbl td:nth-child(2) { width: 38%; }
.wbs-tbl th:nth-child(3), .wbs-tbl td:nth-child(3) { width: 10%; white-space: nowrap; }
.wbs-tbl th:nth-child(4), .wbs-tbl td:nth-child(4) { width: 10%; white-space: nowrap; }
.wbs-tbl th:nth-child(5), .wbs-tbl td:nth-child(5) { width: 33%; }
.wbs-tbl td:nth-child(2), .wbs-tbl td:nth-child(5) { word-wrap: break-word; }

@media (max-width: 700px) {
  .wbs-tbl, .wbs-tbl thead, .wbs-tbl tbody, .wbs-tbl th, .wbs-tbl td, .wbs-tbl tr { display: block; }
  .wbs-tbl thead { display: none; }
  .wbs-tbl th:nth-child(n), .wbs-tbl td:nth-child(n) { width: auto; white-space: normal; }
  .wbs-tbl tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  .wbs-tbl td { padding: 3px 13px; border-bottom: none; }
}

/* ── Assumptions disclosure ───────────────────────────────────────────── */
.assump-box { background: var(--fill); border: 1px solid var(--line); border-radius: 8px;
              padding: 12px 18px; }
.assump-box summary { cursor: pointer; font-weight: bold; color: var(--teal); font-size: 13.5px; }
.assump-box ul { margin: 10px 0 2px; padding-left: 20px; font-size: 13.5px; }
.assump-box li { margin-bottom: 6px; }

/* ── 5-year ramp slider ───────────────────────────────────────────────── */
/* Column 3 holds a batch count and per-batch price at nowrap — measured at 118px, so the
   old 90px track let it run under the bar. Sized to the longest string the tier
   schedule can produce, with margin. */
.ramp { margin-top: 22px; }
.ramp-header {
  display: grid; grid-template-columns: 48px 130px 150px 1fr 90px 74px;
  gap: 14px; align-items: center; font-size: 11px; color: var(--grey); font-weight: bold;
  text-transform: uppercase; letter-spacing: 0.4px; padding: 0 0 8px;
}
.ramp-row {
  display: grid; grid-template-columns: 48px 130px 150px 1fr 90px 74px;
  gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line);
}
.ramp-yr { font-weight: bold; color: var(--teal); font-size: 14px; }
.ramp-slider { width: 100%; accent-color: var(--green); }
.ramp-batches { font-size: 12.5px; color: var(--char); white-space: nowrap; }
.ramp-bar-wrap { display: flex; height: 14px; border-radius: 4px; overflow: hidden;
                 background: var(--line); min-width: 60px; }
.ramp-bar-fee { background: var(--green); height: 100%; transition: width .1s; }
.ramp-bar-mat { background: #B9C0C2; height: 100%; transition: width .1s; }
.ramp-allin { font-size: 13px; font-weight: bold; color: var(--teal); white-space: nowrap; }
.ramp-pervial { font-size: 13px; font-weight: bold; color: var(--green); white-space: nowrap; }
.ramp-pervial.over { color: var(--cyan); }
.ramp-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }

@media (max-width: 900px) {
  .ramp-header, .ramp-row { grid-template-columns: 40px 1fr; row-gap: 6px; }
  .ramp-header span:nth-child(n+3), .ramp-batches, .ramp-bar-wrap, .ramp-allin, .ramp-pervial {
    grid-column: 1 / -1;
  }
  .ramp-totals { grid-template-columns: 1fr 1fr; }
}

/* ── Documents ────────────────────────────────────────────────────────── */
.doc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
.doc-card {
  display: flex; flex-direction: column; gap: 8px; padding: 20px;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s;
}
.doc-card:hover { border-color: var(--green); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.doc-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  background: var(--tint); color: var(--teal); font-size: 11px; font-weight: bold;
  border-radius: 7px; letter-spacing: 0.3px;
}
.doc-title { font-size: 15px; font-weight: bold; color: var(--teal); }
.doc-desc { font-size: 12.5px; color: var(--grey); line-height: 1.4; }

@media (max-width: 900px) {
  .doc-grid { grid-template-columns: 1fr; }
}

/* ── Team — leadership, BD, SAB, BOD. Deliberately dense (name + title only,
   no bios) so the whole roster reads as one present-mode slide rather than
   spreading across several, per how this section is laid out. ──────── */
.team-group { margin-top: 26px; }
.team-group:first-of-type { margin-top: 22px; }
.team-h {
  font-size: 11.5px; font-weight: bold; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--green); margin: 0 0 10px;
}
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.team-card {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  background: var(--fill); border: 1px solid var(--line); border-radius: 8px;
}
.team-card img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.team-card div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.team-card strong { font-size: 12px; color: var(--char); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-card span { font-size: 10.5px; color: var(--grey); line-height: 1.25; }

@media (max-width: 700px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   PRESENTATION MODE — one section per slide
   Shared across Made client hubs. Slides scroll if their
   content is taller than the viewport — the 16:9 constraint is enforced
   at export time (scripts/build-exports.mjs), not by clipping content here.
   ══════════════════════════════════════════════════════════════ */
#present-bar, #present-progress { display: none; }

body.present { overflow: hidden; background: var(--teal); }
body.present footer { display: none !important; }
body.present .nav { display: none !important; }

/* Sections live inside <main>, not as direct children of <body> — the header
   is the one exception (it sits outside <main>). Both combinators are needed. */
body.present main > section,
body.present > header.hero { display: none !important; }
body.present main > section.slide-on,
body.present > header.hero.slide-on {
  display: block !important;
  position: fixed; inset: 0 clamp(16px, 4vw, 56px) 58px clamp(16px, 4vw, 56px);
  overflow-y: auto; overflow-x: hidden;
  padding: 3rem 0;
  background: var(--white);
  animation: slideIn .18s ease-out;
}
body.present > header.hero.slide-on { background: var(--teal); padding-top: 4rem; }

/* ── Present-mode density ────────────────────────────────────────────
   A slide is a fixed viewport, not a scrolling page. Sections authored to
   breathe when scrolled are too tall when pinned, so trim the vertical
   rhythm here only — the scrolling site and the exports keep the roomier
   spacing. Measured on a 1440x900 viewport, this is what brings the long
   sections back inside the frame. */
body.present main > section.slide-on { padding: 2rem 28px; }
body.present main > section.slide-on > .wrap,
body.present main > section.slide-on.wrap { padding-top: 0; padding-bottom: 0; }

/* Fit-to-frame box (see present.js). display:contents outside present mode so
   it is invisible to the normal scrolling layout; a real block that can be
   scaled once presenting. */
.pfit { display: contents; }
/* flow-root, not block: it establishes a block formatting context so the first
   and last child margins stay inside the box and are counted when measuring. */
body.present .pfit { display: flow-root; transform-origin: top center; }
/* Set by present.js only when the fit succeeded, so nothing is ever clipped
   away — it just removes the phantom scroll extent the transform leaves behind. */
body.present main > section.slide-on.pfit-clipped { overflow: hidden; }
body.present .slide-on h2 { margin-bottom: 14px; }
body.present .slide-on .fig { margin-top: 16px; }
body.present .slide-on .body { margin: 0 0 12px; }

/* The work-package breakdown is nine milestone blocks — the one section that
   cannot fit a single frame stacked. Two columns halves its height and keeps
   each milestone intact (never split across the column break). */
body.present #wbs .wbs-list { columns: 2; column-gap: 30px; }
body.present #wbs .wbs-milestone { break-inside: avoid; margin: 0 0 16px; }
body.present #wbs .wbs-tbl th, body.present #wbs .wbs-tbl td { font-size: 10.5px; padding: 5px 8px; }
body.present #wbs .wbs-tbl th:nth-child(5), body.present #wbs .wbs-tbl td:nth-child(5) { display: none; }
body.present #wbs .wbs-tbl th:nth-child(2), body.present #wbs .wbs-tbl td:nth-child(2) { width: 56%; }
body.present #wbs .wbs-tbl th:nth-child(3), body.present #wbs .wbs-tbl td:nth-child(3),
body.present #wbs .wbs-tbl th:nth-child(4), body.present #wbs .wbs-tbl td:nth-child(4) { width: 16%; }

/* Equipment and team cards shrink rather than overflow. */
body.present #equipment .equip-card img { height: 116px; }

/* Overview carries the slider, four property figures and three document
   cards — the photo stage is the elastic part, so it gives up the height. */
body.present #documents .slider-track { height: 290px; }
body.present #documents .facts { margin-top: 16px; }
body.present #documents .fine-note { margin-top: 12px; font-size: 11.5px; }
body.present #documents .doc-grid { margin-top: 18px; }

/* Second pass — the remaining four sections that still ran past the frame at
   1440x900 after the density trim above. Each number below was measured, not
   guessed; re-measure if the content changes materially. */
body.present #wbs .wbs-milestone { margin-bottom: 10px; }
body.present #wbs .wbs-mhead { margin-bottom: 5px; }
body.present #wbs .wbs-tbl th, body.present #wbs .wbs-tbl td { font-size: 10px; padding: 4px 8px; }

/* Nine milestones in three columns, and the trailing prose set tighter — the
   basis column is already hidden above, so each table is narrow enough. */
body.present #wbs .wbs-list { columns: 3; column-gap: 22px; }
body.present #wbs .callout,
body.present #wbs > .wrap > .body:last-child { font-size: 11.5px; padding: 10px 14px; margin-bottom: 0; }

body.present #forecast .ramp-row { padding: 4px 0; }
body.present #forecast .ramp-totals { margin-top: 10px; }
body.present #forecast .ramp-totals .big { font-size: 22px; }
body.present #forecast h3 { margin-top: 14px !important; }
body.present #forecast .grid th, body.present #forecast .grid td { padding: 6px 10px; font-size: 11.5px; }
body.present #forecast .callout-green { font-size: 11px; padding: 8px 14px; }
body.present #forecast .assump-box { padding: 8px 14px; }
body.present #forecast .ramp-header { font-size: 9.5px; }

/* Final trim: measured to bring both remaining sections inside the frame. */
body.present #wbs .wbs-list { column-gap: 18px; }
body.present #wbs .wbs-mname { font-size: 14px; }
body.present #wbs > .wrap > .body:first-of-type { font-size: 12px; margin-bottom: 8px; }
body.present #wbs h2 { margin-bottom: 8px; font-size: 26px; }
body.present #wbs .wbs-milestone { margin-bottom: 8px; }
body.present #wbs .wbs-mnum { padding: 2px 7px; font-size: 11px; }
body.present #wbs .callout { margin-top: 10px !important; }
/* Densest section in the deck — buy the last few pixels from its own frame
   padding rather than shrinking the tables further, which would cost legibility. */
body.present main > section#wbs.slide-on { padding: 1.25rem 0; }
body.present #wbs > .wrap > .body:last-child { font-size: 10.5px; line-height: 1.35; margin-bottom: 0; }
body.present #wbs .callout { padding: 8px 14px !important; }

/* Full-bleed diagrams: the base rule forces min-width 900px so wide artwork
   stays legible when scrolled. Pinned in a slide, height is the scarce axis,
   so cap it and let width follow. */
body.present #layout .fig img,
body.present #process .fig img { max-height: 58vh; width: auto; min-width: 0; margin: 0 auto; }
body.present #process .fig { margin-top: 10px; }

/* Lead time carries the two-phase diagram plus four figures. The diagram is
   the elastic part; cap it and let the stats keep their size. */
body.present #sites .fig img { max-height: 46vh; width: auto; min-width: 0; margin: 0 auto; }
body.present #sites .fig { margin-top: 12px; }
body.present #sites .stats { margin-top: 18px; gap: 18px; }
body.present #sites .stats .big { font-size: 26px; }
body.present #sites .body { font-size: 13px; margin-bottom: 8px; }

/* Export capture mode (scripts/build_exports.py) — no toolbar is ever built,
   so nothing reserves the bottom 58px; the slide takes the full viewport, edge
   to edge (the side breathing room above is a present-mode-only affordance —
   the export frame is already letterboxed in build_exports.py's letterbox()).
   Animation is also dropped so the very first paint is already final,
   since a headless screenshot has no time to wait out a transition. */
body.exporting main > section.slide-on,
body.exporting > header.hero.slide-on { inset: 0 !important; animation: none !important; }

/* Slides are position:fixed, so they escape <main>'s flow regardless of its
   own display/overflow — no extra rule needed on <main> itself. */
@keyframes slideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── toolbar ───────────────────────────────────────────────── */
body.present #present-bar {
  display: flex; align-items: center; gap: 16px;
  position: fixed; left: 0; right: 0; bottom: 0; height: 58px; z-index: 10000;
  background: rgba(13,13,13,0.97);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 0 16px;
}
.pb-nav { display: flex; gap: 4px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; }
.pb-nav::-webkit-scrollbar { display: none; }
.pb-item {
  font-family: var(--font); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: rgba(255,255,255,0.6); background: transparent; border: 1px solid transparent;
  padding: 6px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: color .14s, background .14s, border-color .14s;
}
.pb-item:hover { color: #fff; border-color: rgba(255,255,255,0.22); }
.pb-item.is-on { background: var(--green); color: #fff; border-color: var(--green); }
.pb-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pb-count {
  font-family: monospace; font-size: 12px; color: rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums; margin-right: 4px; white-space: nowrap;
}
.pb-arrow {
  width: 30px; height: 30px; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16);
  color: #fff; font-size: 16px; line-height: 1; transition: background .14s;
}
.pb-arrow:hover { background: rgba(255,255,255,0.18); }
.pb-exit {
  font-family: var(--font); font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: transparent; color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 7px; padding: 6px 12px;
  transition: color .14s, border-color .14s;
}
.pb-exit:hover { color: #fff; border-color: rgba(255,255,255,0.45); }

body.present #present-progress {
  display: block; position: fixed; left: 0; right: 0; bottom: 58px; height: 2px;
  background: rgba(255,255,255,0.1); z-index: 10001;
}
#present-progress span { display: block; height: 100%; width: 0; background: var(--green); transition: width .18s ease-out; }

/* the Present affordance in the subnav */
.nav-present {
  background: var(--green); color: var(--white);
  border: 1px solid var(--green); border-radius: 6px;
  padding: 6px 13px; font-family: var(--font); font-size: 12.5px;
  font-weight: 700; cursor: pointer; white-space: nowrap; transition: opacity .15s;
  margin-left: 6px; flex-shrink: 0;
}
.nav-present:hover { opacity: 0.85; }

@media (max-width: 600px) { .nav-present { display: none; } }

@media print {
  .nav { display: none !important; }
  .fig img { min-width: 0; }
}

/* ── Mobile corrections — last in the file on purpose ──────────────────
   Media queries carry no extra specificity, so an override declared above
   the rule it is meant to beat loses on source order. That is exactly how
   `.cols` kept its two-column grid at 375px: the mobile rule sits at line
   ~242 and the base `.cols { grid-template-columns: 1fr 1fr }` at ~257, so
   the base won and the page scrolled sideways by 228px. Anything that must
   win belongs here, after every base rule. */
@media (max-width: 900px) {
  .cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  /* A bare `1fr` track floors at min-content, so long labels ("total
     materials pass-through") held these tracks wider than their container
     even once stacked. minmax(0, 1fr) lets them actually shrink. */
  .ramp-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-out    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats       { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .ramp-totals { grid-template-columns: minmax(0, 1fr); }
}