/* =============================================================================
   em.css  —  EM Revolution shared design system
   Direction: Vault-Tec-first vintage-institutional. Atomic-age instructional
   poster meets Civil Defense signage meets Boy Scout field manual, executed
   as a clean vintage reproduction (crisp print, flat paper, no damage).
   Palette tied to the book cover: cream, teal, burnt orange, brass.
   Load:  <link rel="stylesheet" href="/assets/fonts.css">
          <link rel="stylesheet" href="/assets/em.css">
   ========================================================================== */

/* ---- 1. Tokens --------------------------------------------------------- */
:root {
  /* Paper + ink (light — the definitive mode). Tuned to the "Now Available"
     ad: warm cream stock, deep petrol teal, burnt rust, aged gold. */
  --paper:        #ece5d2;   /* warm cream stock — the page */
  --paper-2:      #e2d9c1;   /* recessed panel */
  --paper-3:      #f4efe1;   /* lifted card, lightest surface */
  --ink:          #1b3a43;   /* deep petrol teal — headings + body */
  --ink-soft:     #2c4c55;
  --cream:        #f6f1e2;   /* text/fills on dark surfaces */

  /* Brand accents */
  --teal:         #1c4551;   /* structural accent — panels, rules */
  --teal-deep:    #12333c;
  --title-bar:    #173c46;   /* poster title-bar bg (cream text passes AA) */
  --rust:         #bd4a20;   /* PRIMARY accent — key marks, indicators */
  --rust-deep:    #993a15;   /* rust as a fill behind cream/white text (AA) */
  --rust-text:    #9c3d17;   /* rust as body-size text on --paper (AA) */
  --brass:        #b08a46;   /* gold ornament — diamond rules, badge rings */
  --brass-deep:   #8a6a2f;
  --brass-lite:   #c9a866;   /* gold line on dark panels */

  /* Neutral text + lines */
  --muted:        #6c6551;   /* secondary text on paper */
  --line:         #cabf9d;   /* hairlines on paper */
  --line-strong:  #a99f79;

  /* Hazard / alert — used ONLY for warnings, never decoration */
  --cd-yellow:    #e7b736;
  --cd-black:     #1b1a16;
  --alert:        #a02e22;
  --alert-bg:     #ecdacd;
  --ok:           #3d6b3a;
  --ok-bg:        #e1e7ce;

  /* Type */
  --font-display: "Alfa Slab One", "Rockwell", Georgia, serif;
  --font-head:    "Oswald", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "Bitter", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1.0625rem;
  --text-lg:   1.1875rem;
  --text-xl:   clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  --text-2xl:  clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --display:   clamp(2.6rem, 1.6rem + 4.6vw, 5.25rem);
  --display-lg:clamp(3rem, 1.5rem + 6.6vw, 6.75rem);

  /* Space */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 2.75rem; --space-8: 4rem;
  --space-9: 5.5rem;

  /* Radius — vintage print has none. Everything is square. */
  --r: 0px;
  --r-sm: 1px;

  /* Borders — this system is built from keylines */
  --bd-hair: 1px solid var(--line);
  --bd-rule: 2px solid var(--ink);
  --bd-heavy: 3px solid var(--ink);

  /* Printed shadow — hard, offset, no blur (letterpress / stacked stock) */
  --print-shadow: 4px 4px 0 var(--ink);
  --print-shadow-sm: 3px 3px 0 var(--ink);

  /* Layout */
  --container: 1200px;
  --container-narrow: 720px;
  --gutter: clamp(1.15rem, 4.5vw, 2.75rem);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur: 140ms;
  --dur-slow: 300ms;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  /* Field-survey grid paper -- one of the generated texture assets
     (.art-staging/library/textures/dot-grid-tan.png), tiled behind every
     page so the flat paper color reads as gridded field stock instead of
     a plain tan fill. Sits below --grain's fine noise film. */
  --field-grid: url("/assets/textures/dot-grid.png");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #14313a;   /* night-shift manual — deep petrol */
    --paper-2:     #0f272e;
    --paper-3:     #1c3d47;
    --ink:         #efe6d1;   /* warm cream is now the "ink" */
    --ink-soft:    #cdc3aa;
    --cream:       #f6f1e2;
    --teal:        #4f9aa6;
    --teal-deep:   #0c2830;
    --title-bar:   #0c2830;
    --rust:        #db6d3a;
    --rust-deep:   #a8481a;
    --rust-text:   #ea8c5c;
    --brass:       #cba86c;
    --brass-deep:  #9a7840;
    --brass-lite:  #d8bd88;
    --muted:       #9d9578;
    --line:        #35504f;
    --line-strong: #557069;
    --cd-yellow:   #e7b736;
    --alert:       #e07a68;
    --alert-bg:    #35211d;
    --ok:          #8fae6f;
    --ok-bg:       #22301f;
    --bd-rule: 2px solid var(--ink);
    --bd-heavy: 3px solid var(--ink);
    --print-shadow: 4px 4px 0 rgba(0,0,0,0.55);
    --print-shadow-sm: 3px 3px 0 rgba(0,0,0,0.55);
  }
}
:root[data-theme="dark"] {
  --paper:#14313a; --paper-2:#0f272e; --paper-3:#1c3d47;
  --ink:#efe6d1; --ink-soft:#cdc3aa; --cream:#f6f1e2;
  --teal:#4f9aa6; --teal-deep:#0c2830; --title-bar:#0c2830; --rust:#db6d3a; --rust-deep:#a8481a; --rust-text:#ea8c5c;
  --brass:#cba86c; --brass-deep:#9a7840; --brass-lite:#d8bd88; --muted:#9d9578; --line:#35504f; --line-strong:#557069;
  --cd-yellow:#e7b736; --alert:#e07a68; --alert-bg:#35211d; --ok:#8fae6f; --ok-bg:#22301f;
  --print-shadow: 4px 4px 0 rgba(0,0,0,0.55);
  --print-shadow-sm: 3px 3px 0 rgba(0,0,0,0.55);
}

/* ---- 2. Reset + base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
/* field-grid — fixed, non-interacting, cheap; sits behind all content
   (z-index -1 inside body's own stacking context) so it only shows
   through the page's negative space, not through opaque card surfaces. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--field-grid);
  background-repeat: repeat;
  background-size: 512px 512px;
  opacity: 0.14;
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::before { mix-blend-mode: overlay; opacity: 0.07; }
}
:root[data-theme="dark"] body::before { mix-blend-mode: overlay; opacity: 0.07; }
/* paper grain — fixed, non-interacting, cheap */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.09;
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body::after { mix-blend-mode: overlay; opacity: 0.06; }
}
:root[data-theme="dark"] body::after { mix-blend-mode: overlay; opacity: 0.06; }

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--rust-text); text-underline-offset: 0.14em; text-decoration-thickness: 1px; }
a:hover { color: var(--rust-deep); }

:where(button, input, select, textarea) { font: inherit; color: inherit; }
::selection { background: var(--rust); color: var(--cream); }

:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.02;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
h1 { font-weight: 700; }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }
em, i { font-style: italic; }

/* ---- 3. Layout ------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(2rem, 3vw, 2.85rem); }
.section--tight { padding-block: clamp(1.5rem, 2.4vw, 2rem); }
.section + .section { border-top: var(--bd-hair); }

/* ---- 4. Type utilities --------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust-text);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.eyebrow::before {
  content: "";
  width: 0.62rem; height: 0.62rem;
  flex: none;
  background: var(--rust);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);   /* CD triangle */
}
.eyebrow--plain::before { display: none; }

.lede {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: 1.42;
  color: var(--ink);
}

.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--display);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.h1 { font-family: var(--font-head); font-weight: 700; font-size: var(--text-2xl); text-transform: uppercase; color: var(--ink); }
.h2 { font-family: var(--font-head); font-weight: 700; font-size: var(--text-2xl); text-transform: uppercase; color: var(--ink); letter-spacing: 0.01em; }
.h3 { font-family: var(--font-head); font-weight: 600; font-size: var(--text-xl); text-transform: uppercase; color: var(--ink); }

.measure { max-width: 60ch; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }

/* Letterpress ink-spread — LARGE display text only. Degrades small text,
   so never apply below ~1.75rem. */
@supports (filter: url("#x")) {
  .letterpress   { filter: url("/assets/fx.svg#letterpress"); }
  .letterpress-lg { filter: url("/assets/fx.svg#letterpress-lg"); }
  .h-display, .h2 { filter: url("/assets/fx.svg#letterpress"); }
}

/* ---- 5. Ornaments -------------------------------------------------- */
/* Civil Defense triangle-in-circle */
.cd-mark { display: inline-block; color: var(--rust); }
.cd-mark svg { width: 1em; height: 1em; display: block; fill: none; stroke: currentColor; stroke-width: 6; }
.cd-mark--fill svg { fill: currentColor; stroke: none; }

/* Double keyline divider */
.rule-double {
  border: 0;
  height: 5px;
  border-top: 1px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  background: transparent;
}

/* Gold diamond rule — the art-deco / Civil-Defense hairline ornament.
   <div class="ornament"><span></span></div>  or  .ornament--left / --right */
.ornament {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--brass);
}
.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 1px solid currentColor;
}
.ornament > span,
.ornament::part(dot) { display: block; }
.ornament > .dot {
  width: 0.5rem; height: 0.5rem;
  flex: none;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}
.ornament--left::before { flex: none; width: 2.5rem; }
.ornament--left::after { display: none; }
.ornament--left { justify-content: flex-start; }
.ornament--right::after { flex: none; width: 2.5rem; }
.ornament--right::before { display: none; }

/* on dark panels */
.panel-dark .ornament, .site-footer .ornament { color: var(--brass-lite); }

/* Compass rose — 8-point star. <span class="compass"><svg>…</svg></span> */
.compass { display: inline-block; color: var(--brass); line-height: 0; }
.compass svg { width: 100%; height: 100%; display: block; }

/* Hazard band — yellow / black diagonal. Alerts only. */
.hazard {
  --h: 10px;
  background-image: repeating-linear-gradient(
    -45deg, var(--cd-black) 0 var(--h),
    var(--cd-yellow) var(--h) calc(var(--h) * 2)
  );
}
.hazard-edge { border-block: 6px solid transparent; border-image: repeating-linear-gradient(-45deg, var(--cd-black) 0 10px, var(--cd-yellow) 10px 20px) 6; }

/* Letterpress stamp */
.stamp {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-sm);
  color: var(--rust-deep);
  border: 2px solid var(--rust-deep);
  padding: 0.3rem 0.6rem 0.25rem;
  transform: rotate(-3.5deg);
  opacity: 0.9;
}
.stamp--teal { color: var(--teal-deep); border-color: var(--teal-deep); }
.stamp--ink { color: var(--ink); border-color: var(--ink); }

/* Stencil index numeral */
.index-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 0.25rem 0.4rem;
  display: inline-block;
  min-width: 1.9em;
  text-align: center;
}

/* ---- 6. Poster panel (Vault-Tec instructional framing) ------------- */
.poster {
  background: var(--paper-3);
  border: var(--bd-heavy);
  box-shadow: var(--print-shadow);
  position: relative;
}
.poster__bar {
  background: var(--title-bar);
  color: var(--cream);
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-sm);
  padding: 0.5rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: var(--bd-heavy);
}
.poster__body { padding: var(--space-5); }

/* Badge roundel */
.roundel {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid var(--brass);
  box-shadow: inset 0 0 0 3px var(--paper-3), inset 0 0 0 5px var(--brass);
  overflow: hidden;
  background: var(--teal-deep);
  display: grid;
  place-items: center;
}
.roundel img { width: 100%; height: 100%; object-fit: cover; }

/* ---- 7. Buttons --------------------------------------------------- */
.btn {
  --bg: var(--rust-deep);
  --fg: var(--cream);
  --bd: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.75rem 1.3rem;
  border: var(--bd-rule);
  border-color: var(--bd);
  background: var(--bg);
  color: var(--fg);
  box-shadow: var(--print-shadow-sm);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--rust); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.btn--ghost { --bg: var(--paper); --fg: var(--ink); box-shadow: var(--print-shadow-sm); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--rust); }

.btn--on-dark { --bg: var(--rust-deep); --fg: var(--cream); --bd: var(--cream); box-shadow: 3px 3px 0 rgba(0,0,0,0.35); }
.btn--on-dark:hover { background: var(--cream); color: var(--teal-deep); box-shadow: 4px 4px 0 rgba(0,0,0,0.35); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem 1rem; align-items: center; }

/* ---- 8. Cards / tiles ------------------------------------------------ */
.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--paper-3);
  border: var(--bd-rule);
  border-left: 6px solid var(--tile-accent, var(--rust));
  padding: var(--space-5);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--print-shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tile:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.tile__title {
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--text-lg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.tile__title .arrow { color: var(--rust-text); }
.tile:hover .tile__title .arrow { transform: translateX(4px); }
.tile__body { font-family: var(--font-body); font-size: var(--text-sm); color: var(--muted); line-height: 1.5; }

.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }

/* ---- 9. Badges / status pills ------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22rem 0.45rem;
  border: 1px solid currentColor;
  color: var(--muted);
}
.badge--ready { color: var(--ok); }
.badge--soon  { color: var(--brass-deep); }
.badge--alert { color: var(--alert); }

/* ---- 10. Alert callout (hazard) --------------------------------------- */
.alert {
  border: var(--bd-rule);
  background: var(--alert-bg);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-body);
}
.alert__label {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--alert);
  font-size: var(--text-sm);
  display: block;
  margin-bottom: 0.25rem;
}

/* ---- 11. Site header ------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: var(--bd-heavy);
}
.site-header::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--brass);
}
.site-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter);
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}
.brand__mark { width: auto; height: 2.15rem; flex: none; }
.brand__name > span { color: var(--rust-text); }
.brand__sub {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  align-self: center;
}
/* The tagline is long enough to wrap and collide with the nav on narrow
   screens -- drop it below a breakpoint rather than fight the wrap. */
@media (max-width: 720px) {
  .brand__sub { display: none; }
}
.site-nav { display: flex; align-items: center; gap: clamp(0.9rem, 2.6vw, 1.9rem); }
.site-nav a {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-block: 0.2rem;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-nav a:hover { color: var(--rust-text); }
.site-nav a[aria-current="page"] { color: var(--rust-text); border-color: var(--rust); }
.site-nav [hidden] { display: none; }
@media (max-width: 640px) { .site-nav__secondary { display: none; } }
/* ---- 12. Footer ---------------------------------------------------- */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--teal-deep);
  color: var(--cream);
  padding-block: var(--space-7) var(--space-6);
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("/assets/textures/technical-grid.jpg");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  opacity: 0.35;
  mix-blend-mode: overlay;
}
/* Yellow hazard-stripe top rule -- same diagonal-stripe language as
   .emblem__rule/.page-head::after (stripe-rule-rust.png), done as a CSS
   gradient in cd-yellow instead of a new image asset. */
.site-footer::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--cd-yellow) 0 8px, var(--ink) 8px 16px);
}
.site-footer .container { position: relative; z-index: 1; }
.site-footer a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(246,241,226,0.3); padding-bottom: 1px; }
.site-footer a:hover { border-color: var(--cd-yellow); color: var(--cd-yellow); }
.footer-top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: center;
  margin-bottom: 1.2rem;
}
.footer-crest { width: 84px; height: 84px; flex: none; }
.footer-blurb {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(246,241,226,0.78);
  max-width: 52ch;
}
.ornament-foot { color: var(--brass-lite); margin-bottom: 1.4rem; }
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-5);
}
.footer-cols .k {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,240,225,0.55);
  margin-bottom: 0.4rem;
}
.footer-legal {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(245,240,225,0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(245,240,225,0.55);
}
.footer-legal a { color: rgba(245,240,225,0.7); border: 0; }
.footer-legal a:hover { color: var(--cd-yellow); }

/* ---- 13. Dark instructional section -------------------------------- */
.panel-dark {
  background: var(--teal-deep);
  color: var(--cream);
  padding-block: clamp(2rem, 3vw, 2.85rem);
}
/* Rust hazard-stripe top rule, same treatment as .site-footer::after. */
.panel-dark::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--rust) 0 8px, var(--cream) 8px 16px);
}
.panel-dark h2, .panel-dark h3 { color: var(--cream); }
.panel-dark .eyebrow { color: var(--cd-yellow); }
.panel-dark .eyebrow::before { background: var(--cd-yellow); }
.panel-dark p { color: rgba(245,240,225,0.8); }

/* ---- 14. Back link + forms --------------------------------------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.back-link:hover { color: var(--rust-text); }

.field { display: flex; flex-direction: column; gap: 0.35rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0;
}
.field input, .field textarea, .field select {
  background: var(--paper-3);
  border: var(--bd-rule);
  padding: 0.65rem 0.75rem;
  color: var(--ink);
  font-family: var(--font-body);
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 3px solid var(--rust);
  outline-offset: 1px;
}
.field__hint { font-size: var(--text-xs); color: var(--muted); }
.field__error { font-size: var(--text-xs); color: var(--alert); font-weight: 600; }

/* ---- 15. Reveal on scroll (opt-in) ------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---- 16. Skip link ----------------------------------------------- */
.skip-link {
  position: absolute; left: 0.5rem; top: 0.5rem;
  transform: translateY(-160%);
  background: var(--rust); color: var(--cream);
  font-family: var(--font-head); font-size: var(--text-sm);
  padding: 0.55rem 1rem; z-index: 100;
  border: 2px solid var(--ink);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: none; }

/* Anchored sections clear the sticky header */
:target { scroll-margin-top: 5rem; }

/* =============================================================================
   17–24  —  Interior-page components (marketing pages, hubs, forms, reader)
   ========================================================================== */

/* ---- 17. Interior page head ------------------------------------------ */
/* Hazard-stripe divider closing out the page head -- a bolder accent than
   .tool-head's fade rule, used sparingly since .page-head only opens
   marketing/section-style pages. Same clean repeating-linear-gradient
   treatment as .panel-dark::after/.site-footer::after (a crisp CSS
   diagonal reads better at 6px than the tiled stripe-rule-rust.png did). */
/* Opaque fill so the eyebrow/title/lede don't sit directly on the
   body's dot-grid texture -- same fix as .prose/.author elsewhere. */
.page-head { padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(1.1rem, 2.4vw, 1.6rem); position: relative; background: var(--paper); }
.page-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: repeating-linear-gradient(-45deg, var(--rust) 0 8px, var(--cream) 8px 16px);
}
.page-head__title {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.4rem); line-height: 0.97;
  color: var(--ink); letter-spacing: 0.01em; margin-top: 0.65rem;
}
.page-head__title .accent { color: var(--rust-text); }
.page-head__lede {
  font-family: var(--font-body); font-size: var(--text-lg); line-height: 1.45;
  color: var(--muted); margin-top: 0.9rem; max-width: 56ch;
}
.page-head__meta {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-top: 1rem;
}

/* ---- 18. Prose (long-form body copy) ------------------------------- */
/* Opaque backdrop -- the field-grid texture reads well in the margins
   around a block of running text, but sitting directly behind dense body
   copy competes with reading it, so long-form prose blocks get a flat
   backing (same tone as the page, so it doesn't read as a "card"). */
.prose { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.66; color: var(--ink); max-width: 68ch; background: var(--paper); }
.prose > * + * { margin-top: 1rem; }
.prose h2 {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  font-size: var(--text-xl); letter-spacing: 0.02em; color: var(--ink);
  margin-top: 2.4rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--line-strong);
}
.prose h3 { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; font-size: var(--text-lg); letter-spacing: 0.03em; color: var(--rust-text); margin-top: 1.7rem; }
.prose h4 { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; font-size: var(--text-base); letter-spacing: 0.05em; color: var(--ink); margin-top: 1.3rem; }
.prose ul, .prose ol { padding-left: 1.45rem; }
.prose li + li { margin-top: 0.35rem; }
.prose li::marker { color: var(--rust); }
.prose a { color: var(--rust-text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.14em; }
.prose a:hover { text-decoration-color: currentColor; color: var(--rust-deep); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose em { font-style: italic; color: var(--ink-soft); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 1.6rem; }
.prose blockquote { border-left: 4px solid var(--brass); padding-left: 1rem; color: var(--muted); font-style: italic; }
.prose :where(h2, h3, h4):first-child { margin-top: 0; }

/* Data tables */
.table-wrap { overflow-x: auto; margin-block: 1.2rem; }
table.table, .prose table {
  width: 100%; border-collapse: collapse; font-family: var(--font-body);
  font-size: var(--text-sm); background: var(--paper-3); border: var(--bd-rule);
}
table.table th, .prose table th {
  background: var(--title-bar); color: var(--cream); font-family: var(--font-head);
  font-weight: 600; letter-spacing: 0.03em;
  font-size: var(--text-sm); text-align: left; padding: 0.55rem 0.7rem; vertical-align: top;
}
table.table th { text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.04em; }
.prose table th strong, .prose table th a, .prose table th em { color: inherit; }
table.table td, .prose table td { padding: 0.55rem 0.7rem; border-top: 1px solid var(--line); vertical-align: top; }
table.table tbody tr:nth-child(even) td,
.prose table tbody tr:nth-child(even) td,
.prose table tr.odd td { background: var(--paper-2); }
.prose table :where(td, th) p { margin: 0; }
.prose table :where(td, th) p + p { margin-top: 0.4rem; }
.prose table :where(td, th) :where(ul, ol) { margin: 0.3rem 0 0; padding-left: 1.1rem; }

/* Figure / diagram */
.figure { text-align: center; margin-block: 1.4rem; }
.figure img, img.diagram { display: inline-block; border: var(--bd-rule); background: var(--paper-3); max-height: 32rem; width: auto; }
.figure figcaption { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 0.6rem; }

/* ---- 19. Neutral callout ----------------------------------------- */
.callout {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: var(--paper-2); border: var(--bd-rule);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5;
}
.callout__mark { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; line-height: 1; color: var(--brass-deep); flex: none; }
.callout p { margin: 0; }

/* ---- 20. Contact card ------------------------------------------- */
.contact-card { background: var(--paper-3); border: var(--bd-heavy); box-shadow: var(--print-shadow); padding: var(--space-5) var(--space-6); }
.contact-card__k { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.contact-card__email { display: inline-block; margin-top: 0.45rem; font-family: var(--font-mono); font-weight: 500; font-size: var(--text-lg); color: var(--ink); text-decoration: none; }
.contact-card__email:hover { color: var(--rust-text); }
.contact-card__note { margin-top: 0.6rem; font-size: var(--text-sm); color: var(--muted); }

/* ---- 21. Card grid + nav-tile extensions ----------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-4); }
@media (max-width: 460px) { .card-grid { grid-template-columns: 1fr; } }

.tile { position: relative; }
.tile__num { position: absolute; top: var(--space-4); right: var(--space-5); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
/* Same ink-stamp ring (rust-deep, rotated) used on the Resource Hub and
   elsewhere, in place of the plain teal/brass badge this used to be. */
.tile__ic {
  width: 3.4rem; height: 3.4rem; flex: none;
  border: 2px solid var(--rust-deep); border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--paper-3), inset 0 0 0 4px var(--rust-deep);
  background: var(--paper-3); color: var(--rust-deep);
  display: grid; place-items: center;
  transform: rotate(-7deg);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tile__ic svg { width: 1.55rem; height: 1.55rem; }
.tile:hover .tile__ic { transform: rotate(-7deg) scale(1.08); background: var(--ink); color: var(--cream); border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--paper-3), inset 0 0 0 4px var(--ink); }
.tile__foot { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.tile__meta { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.03em; color: var(--muted); }
.tile__go { font-family: var(--font-head); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rust-text); display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.tile:hover .tile__go .arrow { transform: translateX(3px); }
.tile--static { cursor: default; }
.tile--static:hover { transform: none; box-shadow: var(--print-shadow-sm); }
.tile--static:hover .tile__ic { background: var(--paper-3); color: var(--rust-deep); border-color: var(--rust-deep); box-shadow: inset 0 0 0 2px var(--paper-3), inset 0 0 0 4px var(--rust-deep); transform: rotate(-7deg); }

.badge--new { color: var(--rust-text); }
.badge--member { color: var(--teal); }

/* ---- 22. App header (authenticated) + auth screen ------------- */
.site-nav__signout {
  font-family: var(--font-head); font-weight: 500; font-size: var(--text-sm);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  background: none; border: 0; cursor: pointer; padding: 0.2rem 0; line-height: inherit;
  border-bottom: 2px solid transparent;
}
.site-nav__signout:hover { color: var(--rust-text); }

.auth-page { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(2rem, 5vw, 3.5rem); }
.auth-wrap { max-width: 26rem; margin-inline: auto; width: 100%; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--ink); margin-bottom: 1.4rem; }
.auth-brand img { width: 3.5rem; height: auto; }
.auth-brand__title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: 1.35rem; letter-spacing: 0.04em; }
.auth-brand__sub { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.auth-card { background: var(--paper-3); border: var(--bd-heavy); box-shadow: var(--print-shadow); }
.auth-tabs { display: flex; border-bottom: var(--bd-heavy); }
.auth-tabs button {
  flex: 1; background: var(--paper-2); border: 0; cursor: pointer;
  padding: 0.9rem 1rem; font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--text-sm);
  color: var(--muted); border-bottom: 3px solid transparent;
}
.auth-tabs button.on { background: var(--paper-3); color: var(--ink); border-bottom-color: var(--rust); }
.auth-card form { padding: 1.5rem 1.5rem 1.6rem; display: none; }
.auth-card form.on { display: block; }
.auth-card .field + .field { margin-top: 0.9rem; }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 1.1rem; }
.input-reveal { position: relative; }
.input-reveal > input { width: 100%; padding-right: 2.6rem; }
.input-reveal button {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; color: var(--muted); padding: 0.35rem; display: flex;
}
.input-reveal button svg { width: 1.1rem; height: 1.1rem; }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: var(--text-sm); }
.auth-remember { display: flex; align-items: center; gap: 0.45rem; color: var(--muted); cursor: pointer; }
.auth-remember input { width: 1rem; height: 1rem; accent-color: var(--rust); }
.auth-back { display: block; text-align: center; margin-top: 1.1rem; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.auth-back:hover { color: var(--rust-text); }

.btn .spin { width: 1rem; height: 1rem; flex: none; border: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; border-radius: 50%; animation: btnspin 0.7s linear infinite; display: none; }
.btn.loading .spin { display: block; }
.btn.loading .lbl { opacity: 0.7; }
@keyframes btnspin { to { transform: rotate(360deg); } }

.note { margin-top: 1rem; padding: 0.7rem 0.85rem; font-family: var(--font-body); font-size: var(--text-sm); border: var(--bd-rule); background: var(--paper-2); color: var(--ink); }
.note--ok, .note.ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.note--fail, .note.fail { border-color: var(--alert); background: var(--alert-bg); color: var(--alert); }
.field input.bad, .field textarea.bad { outline: 2px solid var(--alert); outline-offset: 1px; }

/* ---- 23. Form card + choice grid + filebox ------------------- */
.form-card { background: var(--paper-3); border: var(--bd-heavy); box-shadow: var(--print-shadow); padding: var(--space-6); }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.6rem; }
.choice { position: relative; border: var(--bd-rule); background: var(--paper-3); cursor: pointer; padding: 0.85rem 0.9rem; display: block; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.choice:hover { background: var(--paper-2); }
.choice.selected { background: var(--paper-2); border-color: var(--rust); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
/* Icon and title share a row (icon left of its label) instead of the
   icon floating alone above the text. */
.choice__top { display: flex; align-items: center; gap: 0.55rem; }
.choice__ic { width: 2rem; height: 2rem; flex: none; border: 1.5px solid var(--ink); display: grid; place-items: center; color: var(--ink); }
.choice__ic svg { width: 1.05rem; height: 1.05rem; }
.choice.selected .choice__ic { background: var(--ink); color: var(--cream); }
.choice__t { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; font-size: var(--text-sm); color: var(--ink); }
.choice__d { font-size: var(--text-xs); color: var(--muted); margin-top: 0.4rem; line-height: 1.35; }

.filebox { border: 2px dashed var(--line-strong); background: var(--paper-3); padding: 1.1rem; text-align: center; cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.filebox:hover, .filebox.drag { border-color: var(--rust); background: var(--paper-2); }
.filebox svg { width: 1.4rem; height: 1.4rem; color: var(--muted); margin: 0 auto 0.4rem; }
.filebox__t { font-size: var(--text-sm); color: var(--muted); }
.filebox__chosen { font-family: var(--font-mono); font-weight: 500; color: var(--ink); margin-top: 0.4rem; font-size: var(--text-sm); }
.filebox__clear { display: inline-block; margin-top: 0.5rem; font-family: var(--font-head); font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--rust-text); cursor: pointer; }

.form-error { border: var(--bd-rule); border-color: var(--alert); background: var(--alert-bg); color: var(--alert); padding: 0.6rem 0.85rem; font-size: var(--text-sm); margin-bottom: 1rem; display: none; }
.form-error.show { display: block; }
.form-success { text-align: center; padding: 2rem 1rem; }
.form-success__ic { width: 3.25rem; height: 3.25rem; border: 2px solid var(--ok); color: var(--ok); border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1rem; }
.form-success__ic svg { width: 1.6rem; height: 1.6rem; }

/* ---- 24. Long-form reader chrome --------------------------- */
.toc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.5rem; }
.toc-tile {
  display: flex; align-items: baseline; gap: 0.55rem;
  background: var(--paper-3); border: var(--bd-hair);
  padding: 0.6rem 0.75rem; text-decoration: none; color: var(--ink);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toc-tile:hover { border-color: var(--rust); transform: translateX(2px); }
.toc-tile__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--rust-text); flex: none; }
.toc-tile__t { font-family: var(--font-head); font-weight: 500; text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.03em; line-height: 1.3; }

.to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40;
  width: 2.75rem; height: 2.75rem; display: none; place-items: center;
  background: var(--rust-deep); color: var(--cream); border: 2px solid var(--ink);
  box-shadow: var(--print-shadow-sm); cursor: pointer;
}
.to-top.show { display: grid; }
.to-top svg { width: 1.2rem; height: 1.2rem; }

.footnotes { margin-top: 3rem; padding-top: 1.2rem; border-top: 2px solid var(--ink); font-size: var(--text-sm); color: var(--muted); }
.footnotes h2 { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: var(--text-base); color: var(--ink); margin-bottom: 0.6rem; }
.footnotes ol { padding-left: 1.4rem; }
.footref { font-size: 0.7em; color: var(--rust-text); text-decoration: none; font-weight: 700; vertical-align: super; }

.checklist-link a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--paper-2); border: var(--bd-rule); color: var(--ink);
  text-decoration: none; font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; font-size: var(--text-sm); letter-spacing: 0.04em;
  padding: 0.6rem 0.9rem;
}
.checklist-link a:hover { background: var(--rust-deep); color: var(--cream); }
.checklist-link a svg { width: 1rem; height: 1rem; flex: none; }

/* ---- 25. Emblem band (duotone eagle seal) ------------------ */
/* Override the automatic .section + .section hairline -- with the eagle
   right at the top of this section, that thin line read as an odd stray
   mark sitting on the artwork rather than a section boundary. */
.emblem { text-align: center; border-top: 0 !important; }
.emblem__eagle { display: block; width: 100%; max-width: 20rem; margin: 0 auto; }
.emblem__eagle img { display: block; width: 100%; height: auto; }
.emblem__eagle img + img { display: none; }   /* cream variant: dark mode only */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .emblem__eagle img { display: none; }
  :root:not([data-theme="light"]) .emblem__eagle img + img { display: block; }
}
:root[data-theme="dark"] .emblem__eagle img { display: none; }
:root[data-theme="dark"] .emblem__eagle img + img { display: block; }
.emblem__rule { display: block; width: 100%; max-width: 19rem; height: 10px; margin: 0.3rem auto 0.85rem; }
.emblem__line {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.13em; font-size: var(--text-lg); color: var(--ink); margin: 0;
}

/* ---- 26. Closing "get the book" band ---------------------- */
.closing { background: var(--rust-deep); color: var(--cream); border-top: 6px solid var(--ink); }
.closing--app { background: var(--teal-deep); border-top: 6px solid var(--rust-deep); }
.closing--app .btn { background: var(--cream); color: var(--teal-deep); border-color: var(--ink); box-shadow: 4px 4px 0 var(--rust); }
.closing--app .btn:hover { background: var(--rust-deep); color: var(--cream); }
.closing__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.closing h2 { color: var(--cream); }
.closing__meta { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase; color: rgba(245, 240, 225, 0.92); margin-top: 0.4rem; }
.closing .btn { background: var(--cream); color: var(--teal-deep); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.closing .btn:hover { background: var(--ink); color: var(--cream); }

/* =============================================================================
   27  —  Tool chrome: the shared two-pane shell for ttr / checklist / reftables
          (dark sticky header + search, collapsible chapter nav, content head).
          JS builds .chap/.tab/.navsec nodes and sets --chcolor / --activeColor.
   ========================================================================== */
.tool-header { position: sticky; top: 0; z-index: 56; background: var(--teal-deep); color: var(--cream); border-bottom: 3px solid var(--rust); }
.tool-header__bar { max-width: var(--container); margin-inline: auto; padding: 0.8rem var(--gutter); display: flex; align-items: center; gap: clamp(0.7rem, 2vw, 1.25rem); flex-wrap: wrap; }
.tool-brand { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; text-decoration: none; color: var(--cream); }
.tool-brand__mark { width: auto; height: 2.1rem; flex: none; }
.tool-brand__name { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.1rem; line-height: 1; }
.tool-brand__sub { font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-lite); display: block; margin-top: 0.2rem; }
.tool-header .search { position: relative; flex: 0 1 20rem; min-width: 11rem; }
.tool-header .search input { width: 100%; padding: 0.55rem 0.7rem 0.55rem 2.1rem; border: 1px solid rgba(246, 241, 226, 0.28); background: rgba(0, 0, 0, 0.22); color: var(--cream); font-family: var(--font-body); font-size: var(--text-sm); }
.tool-header .search input::placeholder { color: rgba(246, 241, 226, 0.55); }
.tool-header .search input:focus { outline: 2px solid var(--cd-yellow); outline-offset: 1px; border-color: transparent; }
.tool-header .search svg { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); width: 0.95rem; height: 0.95rem; stroke: rgba(246, 241, 226, 0.55); }

/* Persistent account nav (Profile/Sign Out, plus admin-only extras revealed
   by em.js's [data-admin-link] wiring) -- the tool-header equivalent of
   .site-nav, so Profile is reachable from every tool page, not just the
   ones using the light site-header. */
.tool-header__nav { display: flex; align-items: center; gap: clamp(0.7rem, 2vw, 1.3rem); }
.tool-header__nav a, .tool-header__nav button {
  font-family: var(--font-head); font-weight: 500; font-size: var(--text-sm); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--cream); text-decoration: none; background: none; border: 0; padding-block: 0.2rem; cursor: pointer;
  border-bottom: 2px solid transparent; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tool-header__nav a:hover, .tool-header__nav button:hover { color: var(--cd-yellow); }
.tool-header__nav [hidden] { display: none; }
@media (max-width: 640px) { .tool-header__nav { display: none; } }

/* Menu trigger: one full-width bar (replaces the old back-link + hamburger)
   that opens a dropdown with (a) links to every other top-level tool page
   and (b) this page's own chapter nav, side by side. Same open/close
   mechanism at every screen width -- no separate mobile/desktop behavior. */
.tool-menu-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: rgba(0, 0, 0, 0.18); border: 0; border-top: 1px solid rgba(246, 241, 226, 0.18);
  color: var(--cream); cursor: pointer;
  padding: 0.6rem var(--gutter);
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--text-sm);
}
.tool-menu-trigger:hover { color: var(--cd-yellow); }
.tool-menu-trigger__label { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.tool-menu-trigger__label svg { width: 1.05rem; height: 1.05rem; flex: none; }
.tool-menu-trigger__crumb { font-family: var(--font-mono); font-weight: 400; text-transform: none; letter-spacing: 0; color: rgba(246, 241, 226, 0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-menu-trigger .chev { width: 0.9rem; height: 0.9rem; flex: none; transition: transform var(--dur) var(--ease); }
.tool-menu-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }

.tool-menu { display: none; background: var(--paper); border-bottom: 3px solid var(--rust); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28); }
.tool-menu.open { display: block; }
.tool-menu__inner { max-width: var(--container); margin-inline: auto; padding: 0.9rem var(--gutter) 1.3rem; display: grid; grid-template-columns: 14rem 1fr; gap: clamp(1.25rem, 3vw, 2rem); align-items: start; }
.tool-menu__pages { display: flex; flex-direction: column; gap: 0.1rem; border-right: 1px solid var(--line); padding-right: clamp(1.25rem, 3vw, 2rem); }
.tool-menu__pages-label { font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); padding: 0.4rem 0.5rem 0.5rem; }
.tool-menu__pages a { display: block; padding: 0.5rem 0.5rem; font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--text-sm); color: var(--ink); text-decoration: none; border-left: 3px solid transparent; }
.tool-menu__pages a:hover { background: var(--paper-2); color: var(--rust-text); }
.tool-menu__pages a.active { border-left-color: var(--rust); background: var(--paper-3); font-weight: 700; color: var(--rust-text); }

.tool-shell { max-width: var(--container); margin-inline: auto; padding: var(--space-5) var(--gutter) var(--space-8); }
.tool-nav { max-height: 62vh; overflow: auto; }
.tool-nav .chap { margin-bottom: 0.3rem; border-left: 3px solid var(--chcolor, transparent); }
.tool-nav .chap-label { display: flex; align-items: center; gap: 0.5rem; width: 100%; cursor: pointer; background: transparent; border: 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink); font-weight: 500; padding: 0.55rem 0.4rem; text-align: left; }
.tool-nav .chap-label .cn { color: var(--chcolor, var(--rust-text)); flex: none; }
.tool-nav .chap-label .chname { flex: 1; }
.tool-nav .chap-label .cnt { color: var(--muted); font-weight: 400; flex: none; }
.tool-nav .chap-label .chev { width: 0.85rem; height: 0.85rem; color: var(--muted); transition: transform var(--dur) var(--ease); flex: none; }
.tool-nav .chap.open .chap-label .chev { transform: rotate(180deg); }
.tool-nav .chap-label:hover { color: var(--rust-text); }
.tool-nav .chap-label:focus-visible { outline: 2px solid var(--rust); outline-offset: 1px; }
.tool-nav .chap-body { display: none; padding: 0.2rem 0 0.35rem; }
.tool-nav .chap.open .chap-body { display: block; }
.tool-nav .navsec { font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); padding: 0.6rem 0.6rem 0.2rem; }
.tool-nav .tab { display: flex; align-items: baseline; gap: 0.55rem; width: 100%; text-align: left; cursor: pointer; background: transparent; border: 0; border-left: 3px solid transparent; padding: 0.45rem 0.6rem; color: var(--ink); font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.3; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tool-nav .tab:hover { background: var(--paper-2); }
.tool-nav .tab .code, .tool-nav .tab .ti { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); flex: none; }
.tool-nav .tab .ti { width: 1rem; height: 1rem; }
.tool-nav .tab.active { background: var(--paper-3); border-left-color: var(--chcolor, var(--rust)); font-weight: 600; box-shadow: var(--print-shadow-sm); }
.tool-nav .tab.active .code, .tool-nav .tab.active .ti { color: var(--rust-text); }
.tool-nav .tab.special { color: var(--rust-text); font-weight: 600; }
.tool-nav .tab.special .code svg { width: 0.8rem; height: 0.8rem; vertical-align: -1px; }
.tool-nav .tab:focus-visible { outline: 2px solid var(--rust); outline-offset: 1px; }

.tool-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.1rem; border-bottom: 2px solid var(--line-strong); padding-bottom: 0.9rem;
  position: relative;
}
.tool-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--activeColor, var(--rust-text)); }
.tool-head h1 { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.03; margin-top: 0.3rem; color: var(--ink); }
.tool-head .count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.tool-foot { max-width: var(--container); margin-inline: auto; padding: 0 var(--gutter) var(--space-7); color: var(--muted); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; }

.tool-shell .empty { background: var(--paper-3); border: 2px dashed var(--line-strong); padding: 2rem; text-align: center; color: var(--muted); }
.tool-shell .empty strong { display: block; color: var(--ink); font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--text-lg); margin-bottom: 0.25rem; }

/* Backdrop behind the open menu dropdown, same at every width. */
.navBackdrop { display: block; position: fixed; inset: 0; background: rgba(6, 20, 24, 0.45); opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease); z-index: 55; }
.navBackdrop.show { opacity: 1; pointer-events: auto; }

@media (max-width: 720px) {
  .tool-menu__inner { grid-template-columns: 1fr; }
  .tool-menu__pages { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; padding-bottom: 0.6rem; margin-bottom: 0.6rem; }
  .tool-menu__pages-label { flex-basis: 100%; }
  .tool-menu-trigger__crumb { display: none; }
}

/* ---- 28. Hub cards — the /fieldguide, /solutions, /dive-deeper pickers -- */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: clamp(1.1rem, 2.5vw, 1.75rem); }
.hub-card { display: flex; flex-direction: column; background: var(--paper-3); border: var(--bd-heavy); box-shadow: var(--print-shadow); text-decoration: none; color: var(--ink); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.hub-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--rust); }
.hub-card:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }
.hub-card__bar {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--title-bar); color: var(--cream);
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: var(--text-lg); line-height: 1.15;
  padding: 0.7rem 1.15rem; border-bottom: var(--bd-heavy); margin: 0;
}
.hub-card__bar .badge { margin-left: auto; color: var(--cd-yellow); flex: none; }
/* Block layout (not flex) so the stamp can float and the description
   wraps in beside it instead of leaving a dead gap to its right with the
   text pushed below. */
.hub-card__body { padding: 1.85rem 1.15rem 1.15rem; flex: 1; }
/* Ink-stamp badge -- pulled up with a negative margin so it overlaps the
   bar's bottom edge like a seal pressed onto the fold of a letter, and
   floated so the description text wraps in beside it on the same line
   instead of leaving a blank gap to its right. */
.hub-card__icon {
  width: 3.6rem; height: 3.6rem; margin: -2.55rem 0.85rem 0.5rem 0; float: left;
  border-radius: 50%; background: var(--paper-3);
  border: 2px solid var(--rust-deep);
  box-shadow: inset 0 0 0 2px var(--paper-3), inset 0 0 0 4px var(--rust-deep), 2px 2px 0 rgba(0,0,0,0.18);
  color: var(--rust-deep);
  display: grid; place-items: center;
  transform: rotate(-7deg);
  position: relative; z-index: 2;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hub-card__icon svg { width: 1.65rem; height: 1.65rem; }
.hub-card:hover .hub-card__icon { transform: rotate(-7deg) scale(1.08); color: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--paper-3), inset 0 0 0 4px var(--ink), 2px 2px 0 rgba(0,0,0,0.18); }
.hub-card__desc { display: block; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; color: var(--ink-soft); margin: -1.5rem 0 0; }
.hub-card__cta { display: block; clear: both; width: 100%; box-sizing: border-box; margin-top: 1rem; justify-content: center; font-size: var(--text-base); padding: 0.8rem 1.3rem; }
.hub-card:hover .hub-card__cta { background: var(--ink); color: var(--cream); box-shadow: 4px 4px 0 var(--rust); }

/* Premium (EMC) feature gating -- [data-premium-gate] elements get this
   class by em.js for free-tier accounts. Works on both <a> hub-cards
   (href stripped, click blocked in JS) and plain <button>s (disabled). */
.premium-locked { opacity: 0.55; cursor: not-allowed !important; filter: grayscale(0.3); }
.premium-locked:hover { transform: none !important; box-shadow: var(--print-shadow) !important; }
.premium-locked .hub-card__cta:hover, .premium-locked:hover .hub-card__cta { background: inherit !important; color: inherit !important; box-shadow: inherit !important; }

/* Not-yet-built feature, same disabled look as premium-locked but for a
   card that's unavailable to every user (not tier-gated) -- an <a> with
   this class should also have its href removed. */
.hub-card--soon { opacity: 0.55; cursor: not-allowed !important; filter: grayscale(0.3); }
.hub-card--soon:hover { transform: none !important; box-shadow: var(--print-shadow) !important; }
.hub-card--soon .hub-card__cta:hover, .hub-card--soon:hover .hub-card__cta { background: inherit !important; color: inherit !important; box-shadow: inherit !important; }

/* ---- Digital Field Lab: Student nav button + "Join a Course" dialog --- */
.site-nav__student {
  font-family: var(--font-head); font-weight: 500; font-size: var(--text-sm);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
  background: none; border: 0; cursor: pointer; padding: 0.2rem 0; line-height: inherit;
  border-bottom: 2px solid transparent;
}
.site-nav__student:hover { color: var(--rust-text); }

.dfl-dialog {
  /* The site's global reset (*{margin:0}) wipes out the browser's default
     dialog:modal{margin:auto} centering, which otherwise pins an open
     <dialog> to the top-left corner of its inset:0 box -- restore it
     explicitly rather than relying on the UA stylesheet. */
  margin: auto;
  max-width: 30rem; width: calc(100% - 2rem);
  border: var(--bd-heavy); background: var(--paper-3); color: var(--ink);
  box-shadow: var(--print-shadow); padding: 0;
}
.dfl-dialog::backdrop { background: rgba(15, 12, 8, 0.55); }
.dfl-dialog__form { padding: clamp(1.25rem, 4vw, 1.75rem); }
.dfl-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dfl-dialog__head h2 {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: var(--text-xl); margin: 0;
}
.dfl-dialog__close {
  background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 1.5rem; line-height: 1;
  padding: 0 0.25rem;
}
.dfl-dialog__close:hover { color: var(--rust-text); }
.dfl-dialog__lede { font-size: var(--text-sm); color: var(--ink-soft); margin: 0.75rem 0 1.1rem; line-height: 1.5; }
.dfl-field { margin-bottom: 1rem; }
.dfl-field label { display: block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }
.dfl-field input {
  width: 100%; box-sizing: border-box; padding: 0.6rem 0.75rem; border: 1.5px solid var(--line-strong);
  background: var(--paper); font-family: var(--font-mono); font-size: var(--text-base); color: var(--ink);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dfl-field input:focus { outline: 0; border-color: var(--rust); }
.dfl-dialog__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.dfl-status { min-height: 1.4em; margin-top: 0.75rem; font-size: var(--text-sm); }
.dfl-status--error { color: var(--alert); font-weight: 600; }
.dfl-status--loading { color: var(--muted); }
.dfl-success { margin-top: 1.1rem; border: var(--bd-rule); padding: 1rem 1.1rem; background: var(--paper-2); }
.dfl-success__badge {
  display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ok); border: 1px solid currentColor; padding: 0.18rem 0.5rem; margin-bottom: 0.65rem;
}
.dfl-success__fields { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.85rem; margin: 0; font-size: var(--text-sm); }
.dfl-success__fields dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dfl-success__fields dd { margin: 0; color: var(--ink); }
.dfl-success__note { font-size: var(--text-sm); color: var(--ink-soft); margin: 0.75rem 0 0; }
.dfl-active-courses { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.dfl-active-courses__h { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--text-sm); margin: 0 0 0.6rem; }
.dfl-course-card { border: var(--bd-rule); padding: 0.75rem 0.85rem; margin-bottom: 0.6rem; }
.dfl-course-card:last-child { margin-bottom: 0; }
.dfl-course-card__title { font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.dfl-course-card__meta, .dfl-course-card__expires { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); margin-top: 0.2rem; }
.dfl-course-card__assignments { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: var(--text-xs); color: var(--ink-soft); }
.dfl-course-card__none { font-size: var(--text-xs); color: var(--muted); margin: 0.5rem 0 0; }

/* Instructor-only Resource Hub card + admin/[data-instructor-link] --
   same convention as [data-admin-link]/[data-premium-gate] in em.js. */
/* Scoped to [hidden] specifically -- [data-instructor-link] alone never
   goes away (em.js only ever toggles the hidden attribute/property), so a
   bare [data-instructor-link] selector would keep display:none forever
   even after em.js sets element.hidden = false. */
[data-instructor-link][hidden] { display: none; }

/* ---- Shared Command Scenarios result detail (assets/scenario-result-view.js),
   used by both /profile (student's own run) and /instructor (an enrolled
   student's run) -- one renderer, so the two can never show different
   content for the same stored row. */
dialog.srv-dialog {
  margin: auto;
  max-width: 40rem; width: calc(100% - 2rem);
  border: var(--bd-heavy); background: var(--paper-3); color: var(--ink);
  box-shadow: var(--print-shadow); padding: 0;
}
dialog.srv-dialog::backdrop { background: rgba(15, 12, 8, 0.55); }
.srv-dialog__inner { padding: clamp(1.25rem, 4vw, 1.75rem); max-height: 80vh; overflow-y: auto; }
.srv-dialog__head { display: flex; justify-content: flex-end; }
.srv-dialog__close { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 1.5rem; line-height: 1; }
.srv-dialog__close:hover { color: var(--rust-text); }
.srv-title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: var(--text-lg); margin: -0.5rem 0 0.5rem; }
.srv-dialog__inner h3 { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--text-sm); margin: 1rem 0 0.4rem; }
.srv-dim-row { margin: 0.5rem 0; }
.srv-dim-row__top { display: flex; justify-content: space-between; font-size: var(--text-xs); font-family: var(--font-mono); color: var(--muted); }
.srv-bar-track { background: var(--paper-2); border: 1px solid var(--line); height: 0.6rem; margin-top: 0.2rem; }
.srv-bar-fill { background: var(--rust); height: 100%; }
.srv-timeline { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: var(--text-sm); }
.srv-timeline li { border-left: 3px solid var(--line-strong); padding: 0.3rem 0 0.3rem 0.7rem; margin-bottom: 0.15rem; }
.srv-empty { color: var(--muted); font-size: var(--text-sm); }
.srv-dialog__actions { margin-top: 1.1rem; }
#srvPrintArea { display: none; }
@media print {
  body > *:not(#srvPrintArea) { display: none !important; }
  #srvPrintArea { display: block !important; padding: 1.5rem; font-family: var(--font-body); color: #111; }
}