/* ============================================================
   TYPE + ALIGNMENT — single source of truth
   ----------------------------------------------------------
   TYPE roles → size tokens (breakpoint only changes tokens)
   ALIGN roles → how blocks sit in the rail

   Desktop  (≥901px)     Mobile (≤900px)
   label    11           10
   meta     12           11
   body     16           14
   body-lg  18           15
   title    22           18
   display  28           20
   hero     36           22
   display-xl 48         24

   ALIGN
   a-center  display openers / hero / bylines
   a-start   continuous reading (body, lists)
   a-end     rare meta (slide numbers, asides)
   rail      shared max-width + pad so edges match
   ============================================================ */

:root {
  --t-label: 18px;
  --t-meta: 12px;
  --t-body: 16px;
  --t-body-lg: 18px;
  --t-title: 22px;
  --t-display: 28px;
  --t-hero: 36px;
  --t-display-xl: 48px;

  --lh-tight: 1.15;
  --lh-snug: 1.25;
  --lh-body: 1.45;
  --track-label: 0.08em;
  --track-display: -0.02em;

  /* One reading column — hero + body share the same edges */
  --rail-max: 42rem;   /* ~672px reading measure */
  --rail-wide: 56rem;  /* figures / wide plates still in-system */
  --rail-pad: clamp(16px, 4vw, 28px);
}

@media (max-width: 900px) {
  :root {
    --t-label: 12px;
    --t-meta: 11px;
    --t-body: 15px;
    --t-body-lg: 16px;
    --t-title: 18px;
    --t-display: 20px;
    --t-hero: 26px;
    --t-display-xl: 28px;
    --rail-pad: 16px;
  }
}

/* Alignment utilities */
.a-center { text-align: center !important; }
.a-start  { text-align: start !important; }
.a-end    { text-align: end !important; }
.rail {
  width: 100%;
  max-width: var(--rail-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rail-pad);
  padding-right: var(--rail-pad);
  box-sizing: border-box;
}
.rail-wide {
  width: 100%;
  max-width: var(--rail-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rail-pad);
  padding-right: var(--rail-pad);
  box-sizing: border-box;
}

/* Explicit utility classes (optional in HTML) */
.t-label { font-size: var(--t-label) !important; line-height: var(--lh-snug) !important; letter-spacing: var(--track-label); text-transform: uppercase; }
.t-meta  { font-size: var(--t-meta) !important; line-height: var(--lh-snug) !important; }
.t-body  { font-size: var(--t-body) !important; line-height: var(--lh-body) !important; letter-spacing: normal !important; }
.t-body-lg { font-size: var(--t-body-lg) !important; line-height: var(--lh-body) !important; }
.t-title { font-size: var(--t-title) !important; line-height: var(--lh-snug) !important; letter-spacing: var(--track-display); }
.t-display { font-size: var(--t-display) !important; line-height: var(--lh-tight) !important; letter-spacing: var(--track-display); }
.t-hero { font-size: var(--t-hero) !important; line-height: var(--lh-tight) !important; letter-spacing: var(--track-display); }
.t-display-xl { font-size: var(--t-display-xl) !important; line-height: var(--lh-tight) !important; letter-spacing: var(--track-display); }

/* ---------- Site slides ----------
   DESKTOP: site.css owns sizes. No second type system here.
   MOBILE: light density only — keep hierarchy, don't flatten
   quote/panel/word/body to one hero token.
   ============================================================ */

/* Desktop def proportions (site.css may also set packing) */
body.site-page .slide .def .word {
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
body.site-page .slide .def .body {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5;
}
body.site-page .slide .def .beat {
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.25;
}
body.site-page .slide .doc-row .mini-doc .huge {
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.08;
}

@media (max-width: 900px) {
  body.site-page .slide .kicker,
  body.site-page .slide .steptag,
  body.site-page .slide .steplabel,
  body.site-page .slide .label,
  body.site-page .slide .lab,
  body.site-page .slide .brandfoot,
  body.site-page .slide .slidenum {
    font-size: 10px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.06em !important;
  }

  /* Prose — not every special line */
  body.site-page .slide p,
  body.site-page .slide li,
  body.site-page .slide .note,
  body.site-page .slide .sub,
  body.site-page .slide .body,
  body.site-page .slide .copy,
  body.site-page .slide .txt,
  body.site-page .slide .def .body {
    font-size: 14px !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
  }

  body.site-page .slide h2,
  body.site-page .slide .added-title {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  body.site-page .slide .huge,
  body.site-page .slide .big,
  body.site-page .slide .bigstate,
  body.site-page .slide .u-text-hero,
  body.site-page .slide .headline {
    font-size: 20px !important;
    line-height: 1.25 !important;
    max-width: 100% !important;
  }

  /* Def hierarchy: word > beat > body */
  body.site-page .slide .def .word {
    font-size: 28px !important;
    line-height: 1.05 !important;
  }
  body.site-page .slide .def .beat {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  /* Ideology-clean hierarchy: quote > panel > notes
     (do NOT map both to hero — that murdered the slide) */
  body.site-page .slide .ideology-quote {
    font-size: 26px !important;
    line-height: 1.1 !important;
  }
  body.site-page .slide .ideology-panel-line {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }
  body.site-page .slide .ideology-sub,
  body.site-page .slide .ideology-note {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* Court cards keep readable titles */
  body.site-page .slide .court-title {
    font-size: 18px !important;
  }
  body.site-page .slide .court-line {
    font-size: 14px !important;
  }

  /* Inline projector sizes only when not display type */
  body.site-page .slide [style*="font-size"] {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  body.site-page .slide .huge[style*="font-size"],
  body.site-page .slide h1[style*="font-size"],
  body.site-page .slide h2[style*="font-size"] {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }
  body.site-page .slide .doc-row .mini-doc .huge,
  body.site-page .slide .doc-row .mini-doc .huge[style*="font-size"] {
    font-size: 11px !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
  body.site-page .slide .doc-row {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  body.site-page .slide .doc-row .mini-doc {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  /* Kill white photo slabs from deck */
  body.site-page .slide .photo {
    background: var(--paper, #f2ede6) !important;
  }
}

/* ---------- Hierarchy / risk modal (index) ---------- */
.modal-tag,
.glass-tag,
.h-tag,
.fullscreen-modal .tag,
.exp-path-card .tag,
.action-clue,
.int-action-clue,
.int-pain {
  font-size: var(--t-label) !important;
  line-height: var(--lh-snug) !important;
  letter-spacing: var(--track-label) !important;
}

.modal-desc,
.glass-desc,
.fullscreen-modal .modal-header p,
.sol-section p,
.int-exit {
  font-size: var(--t-body) !important;
  line-height: var(--lh-body) !important;
}

.front-content strong,
.int-doorway {
  font-size: var(--t-title) !important;
  line-height: var(--lh-snug) !important;
}

/* Hierarchy risk cards + modals: DESKTOP display titles (3rem).
   Do NOT crush these into --t-title (22px). Mobile densifies below. */
.glass-title,
.h-title.glass-title,
.modal-title,
.fullscreen-modal .modal-header h2,
.fullscreen-modal h2 {
  font-size: clamp(2.25rem, 3.6vw, 3rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 12px !important;
}

/* Keep intentional 3rem inline titles — type-scale must not win */
.glass-title[style*="font-size: 3rem"],
.glass-title[style*="font-size:3rem"],
.fullscreen-modal [style*="font-size: 3rem"],
.fullscreen-modal [style*="font-size:3rem"],
.fullscreen-modal [style*="font-size: 48px"],
.fullscreen-modal [style*="font-size:48px"] {
  font-size: 3rem !important;
}
.fullscreen-modal [style*="font-size: 1.1rem"],
.fullscreen-modal [style*="font-size:1.1rem"] {
  font-size: 1.1rem !important;
}

/* Modal chrome density on phones */
@media (max-width: 900px) {
  .modal-inner-content {
    padding: 72px 16px 32px !important;
  }
  .modal-header {
    margin-bottom: 28px !important;
  }
  .modal-close {
    top: 12px !important;
    right: 12px !important;
    font-size: var(--t-label) !important;
    padding: 8px 14px !important;
  }
  .modal-cards-grid,
  .fullscreen-modal .grid2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .exp-path-card {
    min-height: 180px !important;
  }
  .front-content {
    padding: 16px !important;
  }
  .front-content strong {
    font-size: var(--t-title) !important;
  }
  /* Hierarchy cards: still large on phone, just not full desktop 3rem */
  .glass-title,
  .h-title.glass-title,
  .modal-title,
  .fullscreen-modal .modal-header h2,
  .fullscreen-modal h2,
  .glass-title[style*="font-size: 3rem"],
  .glass-title[style*="font-size:3rem"],
  .fullscreen-modal [style*="font-size: 3rem"],
  .fullscreen-modal [style*="font-size:3rem"] {
    font-size: clamp(1.75rem, 7vw, 2.25rem) !important;
    line-height: 1.12 !important;
  }
}

/* ---------- Essay / net-page ----------
   DO NOT override essay layout or type.
   net-essay.css + page CSS own --net-col (1040px), hero clamps,
   body 22px, hero-map plate. An earlier pass forced rail-max
   (42rem) + !important font tokens and crushed MB-quality pages.

   Tokens above stay available for .t-* utilities if needed.
   Mobile: only chrome density — never max-height the hero art. */
@media (max-width: 900px) {
  body.net-page .sitebar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
  }
  body.net-page .sitebar .chapters {
    order: 3;
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }
}