slides/asce/riprap.css

/* @theme riprap
 *
 * Marp theme that mirrors the SvelteKit UI's design tokens 1:1.
 * Civic Hydrology palette (v0.4.6, 2026-05-06): USWDS federal blue,
 * cool slate register, deep navy synthesis. Replaces the warm-paper +
 * burnt-orange register that read as editorial / Anthropic-adjacent.
 * IBM Plex Sans drives display + body; serif retained only for the
 * single hero quote-mark on slide 7. Layouts are box/grid framed —
 * the deck reads like a dashboard, not an essay.
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Serif:wght@400;600&display=swap');

:root {
  /* USWDS-aligned tier palette. */
  --tier-empirical: #005EA2;
  --tier-modeled:   #1A4480;
  --tier-proxy:     #475569;
  --tier-synthetic: #1A4480;

  /* Stones (water-themed). */
  --stone-cornerstone: #475569;  /* slate (hazard ground) */
  --stone-keystone:    #1A4480;  /* federal navy (assets) */
  --stone-touchstone:  #0E7490;  /* cyan (live water) */
  --stone-lodestone:   #92400E;  /* amber (forecast / hazard) */
  --stone-capstone:    #162E51;  /* deepest navy (synthesis) */

  /* Cool register. */
  --paper:        #F4F6F9;
  --paper-deep:   #E8ECF2;
  --paper-cool:   #DCE3EC;
  --ink:          #0F172A;
  --ink-2:        #334155;
  --ink-3:        #64748B;
  --rule:         #0F172A;
  --rule-soft:    #CBD5E1;

  /* Accent — federal blue is the action. Amber + red used only for
     warning / alert pills. */
  --accent:       #005EA2;
  --accent-text:  #005EA2;
  --accent-warn:  #92400E;
  --accent-alert: #B91C1C;

  /* Inverted (dark slides). */
  --paper-dark:   #0F172A;
  --paper-darker: #0A0F1F;

  --font-sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
}

/* ── Section ──────────────────────────────────────────────────────────── */

section {
  width: 1280px;
  height: 720px;
  padding: 48px 64px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.45;
  letter-spacing: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Bottom-left wordmark on every slide except lead/cta. */
section::before {
  content: "▌ riprap";
  position: absolute;
  left: 64px;
  bottom: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--ink);
}

/* Bottom-right slide counter. */
section::after {
  content: attr(data-marpit-pagination) " / " attr(data-marpit-pagination-total);
  position: absolute;
  right: 64px;
  bottom: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

/* ── Headings — sans-led civic-tech hierarchy ─────────────────────────── */

h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: var(--ink);
}

h2 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 16px;
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--accent);
}

h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 8px;
  color: var(--ink);
}

/* ── Body ─────────────────────────────────────────────────────────────── */

p {
  margin: 0 0 14px;
  max-width: 60ch;
}

strong {
  font-weight: 600;
  color: var(--ink);
}

em {
  font-style: normal;
  color: var(--accent-text);
  font-weight: 600;
}

ul, ol {
  margin: 0 0 14px;
  padding-left: 0;
  list-style: none;
}

ul li, ol li {
  position: relative;
  padding-left: 24px;
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.4;
  max-width: 60ch;
}

ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 12px;
  height: 2px;
  background: var(--accent);
}

ol { counter-reset: ol-num; }
ol li { counter-increment: ol-num; }
ol li::before {
  content: counter(ol-num, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  width: auto;
  height: auto;
  background: transparent;
}

/* ── Code ─────────────────────────────────────────────────────────────── */

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-deep);
  padding: 1px 6px;
  border-radius: 2px;
  color: var(--ink);
  border: 1px solid var(--rule-soft);
}

pre {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  background: var(--paper-deep);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  margin: 8px 0;
  color: var(--ink);
}

pre code { background: transparent; padding: 0; border: 0; }

/* ── Quote ────────────────────────────────────────────────────────────── */

blockquote {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-2);
  border-left: 3px solid var(--accent-warn);
  padding: 4px 0 4px 18px;
  margin: 16px 0;
  max-width: 56ch;
}

/* ── Rules ────────────────────────────────────────────────────────────── */

hr {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  margin: 16px 0;
}

/* ── Tables ───────────────────────────────────────────────────────────── */

table {
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 17px;
  margin: 8px 0;
  width: 100%;
  border: 1px solid var(--rule-soft);
}
th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 14px;
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
}
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
tr:last-child td { border-bottom: 0; }

/* ── Title slide — bold sans display, dashboard frame ─────────────────── */

section.lead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--paper);
  padding-left: 88px;
  padding-right: 88px;
}

section.lead::before {
  /* Mark is now an inline <img> sitting at the top-left of the slide
     content (see deck.md). Pseudo-element no longer renders the
     ▌ block — kept as a no-op so the bottom-left wordmark on
     non-lead slides still wins via the base section::before. */
  content: none;
}
section.lead .lead-mark {
  position: absolute;
  left: 88px;
  top: 56px;
  width: 64px;
  height: 64px;
  display: block;
}

section.lead .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 24px;
  margin-top: 0;
  padding-top: 80px;
  display: flex;
  align-items: center;
  gap: 12px;
}
section.lead .eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-soft);
  max-width: 280px;
}

section.lead h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 104px;
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0 0 16px;
}

section.lead h2 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink-2);
  margin: 0 0 32px;
  max-width: 30ch;
  border: 0;
  padding: 0;
  display: block;
}

section.lead .meta {
  margin-top: 24px;
  display: grid;
  grid-template-columns: auto 1px auto auto;
  gap: 16px;
  align-items: center;
  width: fit-content;
}
section.lead .meta-divider {
  width: 1px;
  height: 14px;
  background: var(--rule-soft);
}
section.lead .meta-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
section.lead .meta-value {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ── CTA / closing slide — dark inverted ─────────────────────────────── */

section.cta {
  background: var(--paper-dark);
  color: var(--paper);
  padding-left: 88px;
  padding-right: 88px;
  justify-content: center;
}
section.cta::before {
  /* Replaced by inline mark in deck.md (.cta-mark). */
  content: none;
}
section.cta .cta-mark {
  position: absolute;
  left: 88px;
  top: 56px;
  width: 56px;
  height: 56px;
  display: block;
}
section.cta::after { color: rgba(244, 246, 249, 0.42); }
section.cta h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 96px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin: 80px 0 16px;
}
section.cta h2 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 32px;
  border: 0;
  padding: 0;
  display: block;
}
section.cta p {
  font-size: 20px;
  color: rgba(244, 246, 249, 0.85);
  max-width: 70ch;
}
section.cta hr { border-top-color: rgba(203, 213, 225, 0.2); margin: 24px 0; }
section.cta .pill { background: rgba(244, 246, 249, 0.08); color: rgba(244, 246, 249, 0.85); border-color: rgba(203, 213, 225, 0.2); }

/* ── Slide chrome: eyebrow + heading frame ───────────────────────────── */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "▌";
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
}

/* ── Box / card primitives — the dashboard shape ─────────────────────── */

.box {
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  padding: 18px 22px;
  position: relative;
}
.box.tinted {
  background: var(--paper-deep);
}
.box.dark {
  background: var(--paper-dark);
  color: var(--paper);
  border: 0;
}
.box.dark .lbl,
.box.dark .smallcaps {
  color: rgba(244, 246, 249, 0.6);
}
.box.dark .stat-value {
  color: var(--paper);
}
.box.dark .body {
  color: var(--paper);
  font-size: 17px;
  line-height: 1.4;
}
.box.dark .body strong {
  color: var(--paper);
}

.box-grid {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.box-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.box-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.box-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.box .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.box .body {
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
}
.box .body strong { color: var(--ink); }

/* ── Track-flag stack (slide 4) ──────────────────────────────────────── */

.track-row {
  display: grid;
  grid-template-columns: 28px 200px 1fr 90px;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--rule-soft);
  background: var(--paper);
  margin-bottom: 8px;
}
.track-row.engaged {
  background: var(--paper);
  border-left: 3px solid var(--accent);
}
.track-row.unengaged {
  opacity: 0.55;
  border-left: 3px solid transparent;
}
.track-row .check {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  color: var(--accent);
}
.track-row.unengaged .check { color: var(--ink-3); }
.track-row .name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}
.track-row .detail {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.35;
}
.track-row .badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
}

/* ── Big stat / number card ──────────────────────────────────────────── */

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-value {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.025em;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}

/* ── Codeblock (HTML-rendered, so inline spans keep color) ───────────── */

.codeblock {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.55;
  background: var(--paper-deep);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  margin: 8px 0;
  color: var(--ink);
}
.codeblock .cite {
  color: var(--accent-text);
  font-weight: 600;
}
.codeblock .label {
  font-weight: 700;
  color: var(--ink);
}

/* ── Pill ─────────────────────────────────────────────────────────────── */

.pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--paper-deep);
  border: 1px solid var(--rule-soft);
  padding: 4px 10px;
  color: var(--ink-2);
  margin-right: 6px;
}
.pill.accent {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.pill.warn {
  background: var(--accent-warn);
  color: var(--paper);
  border-color: var(--accent-warn);
}
.pill.dim {
  opacity: 0.55;
}

/* ── Small caps utility ──────────────────────────────────────────────── */

.smallcaps {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Two-column layout (slides 2, 6) ─────────────────────────────────── */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-top: 8px;
}
.two-col > div p,
.two-col > div li { font-size: 18px; line-height: 1.45; max-width: none; }
.two-col > div p:last-child,
.two-col > div li:last-child { margin-bottom: 0; }

/* ── Stone-tinted heading rules ──────────────────────────────────────── */

section[data-stone="cornerstone"] h2 { color: var(--stone-cornerstone); border-bottom-color: var(--stone-cornerstone); }
section[data-stone="keystone"]    h2 { color: var(--stone-keystone);    border-bottom-color: var(--stone-keystone); }
section[data-stone="touchstone"]  h2 { color: var(--stone-touchstone);  border-bottom-color: var(--stone-touchstone); }
section[data-stone="lodestone"]   h2 { color: var(--stone-lodestone);   border-bottom-color: var(--stone-lodestone); }
section[data-stone="capstone"]    h2 { color: var(--stone-capstone);    border-bottom-color: var(--stone-capstone); }