/* Secretome Therapeutics × Made Scientific — STM-01 program hub.
   Shared base layer for Made client hubs (tokens, nav, hero, present mode).
   Made Teal is the ground.
   Brand tokens per made-design-system/src/tokens.css — do not invent colors.
   Fonts are self-hosted (fonts/), never loaded from a third party. */

@font-face { font-family: 'Funnel Display'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('fonts/funnel-display-var.woff2') format('woff2'); }
@font-face { font-family: 'Funnel Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('fonts/funnel-sans-var.woff2') format('woff2'); }

: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 (brand guide V1.2 pp.16-17, as on madescientific.com): Funnel Display Bold for
     headlines, Funnel Sans for everything else, running text in Light. The brand has no monospace face;
     --font-mono is kept as an alias so any rule that still names it resolves to Funnel Sans. */
  --font:      'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-disp: 'Funnel Display', 'Funnel Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: var(--font);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

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

/* Headlines in Funnel Display Bold; subheads in Funnel Sans SemiBold, as on madescientific.com. */
h1, h2 { font-family: var(--font-disp); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-family: var(--font); font-weight: 600; letter-spacing: 0; }
/* Emphasis is set outright: inside Light running text the browser's relative "bolder" would land on Regular. */
b, strong { font-weight: 600; }
/* Form controls do not inherit type by default. */
button, input, select, textarea, output { font-family: inherit; }

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

/* The sign-in gate styles itself (inline in index.html); see "Access control" in the README. */

/* ── 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 client 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, on a 16:9 stage
   The scrolling page and the deck are the same markup (present.js).
   Each slide is the largest 16:9 frame that fits above the toolbar,
   centered on the teal backdrop, so a laptop, a meeting-room screen and a
   full-screen projector all show the same composition.
   ══════════════════════════════════════════════════════════════ */
#present-bar, #present-progress { display: none; }

body.present { overflow: hidden; background: var(--teal);
  --pbar: 58px; --pgap: 16px;
  --sw: min(calc(100vw - 2 * var(--pgap)), calc((100vh - var(--pbar) - 2 * var(--pgap)) * 16 / 9));
  --sh: calc(var(--sw) * 9 / 16); }
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; left: calc((100vw - var(--sw)) / 2); top: calc((100vh - var(--pbar) - var(--sh)) / 2);
  width: var(--sw); height: var(--sh); max-width: none; margin: 0; box-sizing: border-box;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 0 !important; scrollbar-gutter: stable both-edges; scrollbar-width: none;
  background: var(--white); border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 20, 24, .35);
  animation: slideIn .18s ease-out;
}
body.present main > section.slide-on::-webkit-scrollbar { display: none; }
body.present main > section.slide-on:focus { outline: none; }
body.present > header.hero.slide-on { background: var(--white); }

/* One canvas per slide, zoomed to the frame. present.js boxes each slide's
   content in a .pfit div (display:contents outside present mode, so the
   scrolling page is untouched) and sets CSS zoom on it so its 1200 CSS px
   fill the width of the frame: about 1.45 times the page size on a
   1920 x 1080 screen, about the page size on a 1366 x 768 laptop. Zoom also
   scales vh and vw inside the canvas, so slide rules are sized in canvas px.
   The frame has no padding of its own; the canvas carries it, so the margins
   scale with the type. */
.pfit { display: contents; }
body.present main > section.slide-on > .wrap,
body.present main > section.slide-on.wrap,
body.present > header.hero.slide-on > .wrap { padding: 0 !important; max-width: none; margin: 0; }
/* flow-root, not block: first and last child margins stay inside the box and are counted when measuring. */
body.present .slide-on .pfit { display: flow-root; box-sizing: border-box; width: 1200px; max-width: none;
  margin: 0 auto; padding: 32px 44px 40px; }
/* Set by present.js only when the slide fits, so a stray trackpad scroll cannot move it mid-presentation. */
body.present main > section.slide-on.pfit-clipped { overflow: hidden; }
body.present main h2 { font-size: 34px; margin-bottom: 14px; }
body.present .slide-on .body { margin: 0 0 12px; }

/* Title slide: centered in its frame. */
body.present > header.hero.slide-on { display: flex !important; align-items: safe center; }
body.present > header.hero.slide-on > .hero-inner { width: 100%; }
body.present > header.hero.slide-on .pfit { padding: 30px 60px; }

/* A slide taller than its frame scrolls inside it: a fade over the foot of
   the frame and a round button that scrolls, until the end is reached. */
#pb-fade { display: none; }
body.present #pb-fade { display: flex; position: fixed; z-index: 9000; pointer-events: none; box-sizing: border-box;
  left: calc((100vw - var(--sw)) / 2); width: var(--sw); height: 88px; top: calc((100vh - var(--pbar) - var(--sh)) / 2 + var(--sh) - 88px);
  align-items: flex-end; justify-content: center; padding-bottom: 12px; border-radius: 0 0 10px 10px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96) 72%); }
body.present #pb-fade[hidden] { display: none; }
#pb-fade button { pointer-events: auto; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: var(--teal);
  color: #fff; font: 700 18px/1 var(--font); box-shadow: 0 4px 14px rgba(0, 40, 46, .28); transition: background .14s; }
#pb-fade button:hover { background: var(--green); }

/* Export capture mode — no toolbar is built, so nothing reserves the foot of
   the screen; the frame takes the whole viewport and the first paint is final. */
body.exporting { --pbar: 0px; --pgap: 0px; }
body.exporting main > section.slide-on,
body.exporting > header.hero.slide-on { border-radius: 0; box-shadow: none; animation: none !important; }

@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: var(--pbar); 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;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.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: var(--font); 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; font-family: var(--font);
  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-full, .pb-exit {
  font-family: var(--font); font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: transparent; color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.22); border-radius: 7px; padding: 6px 12px;
  transition: color .14s, border-color .14s;
}
.pb-full { margin-right: 6px; }
.pb-full:hover, .pb-exit:hover { color: #fff; border-color: rgba(255,255,255,0.45); }
.pb-more { font-size: 12px; font-weight: 700; color: var(--aqua); margin-right: 10px; white-space: nowrap; }
body.present .pb-more[hidden] { display: inline; visibility: hidden; }

body.present #present-progress {
  display: block; position: fixed; left: 0; right: 0; bottom: var(--pbar); 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); }
}

/* Published record */
.cite{color:var(--teal,#00545F);font-size:.82em;white-space:nowrap}
details.refs{margin-top:18px;border-top:1px solid #d8d8dc;padding-top:10px}
details.refs summary{cursor:pointer;font-weight:600;color:#00545F}
.ref-list{margin-top:10px;font-size:.84rem;line-height:1.45;columns:1}
.ref-list li{padding:3px 0 3px 2.6em;text-indent:-2.6em;border:0}
.ref-n{display:inline-block;width:2.4em;text-indent:0;font-weight:600;color:#00545F}