/* ============================================================
   SBOE 2026 · PDF Template System
   Editorial: 8.5 × 11 in · 0.5in margins · flex-column flow
   ============================================================ */

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; background:#1a1a1a; }
body{
  font-family: var(--font-body);
  color: var(--capitol-slate);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Page shell ---------- */
.page{
  width: 8.5in;
  height: 11in;
  margin: 28px auto;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  page-break-after: always;
  break-after: page;
}
.page:last-child{ page-break-after:auto; break-after:auto; }

.page-grid{
  position:absolute;
  inset: 0.5in;
  display: flex;
  flex-direction: column;
}

/* ---------- Universal header ---------- */
.page-head{
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(30,48,72,.16);
  min-height: 22px;
}
.folio{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--capitol-slate);
  font-feature-settings: "tnum" 1;
  line-height: 1;
  flex: 0 0 auto;
}
.overline{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dc-coral);
  line-height: 1;
  flex: 0 0 auto;
  white-space: nowrap;
}
.page-rule{
  flex: 1 1 auto;
  height: 1px;
  min-width: 24px;
  background: linear-gradient(90deg, rgba(30,48,72,.18), rgba(30,48,72,.02));
}
/* When a top-right pill (insight-badge) is present, reserve room so the
   gradient rule never collides with it. Sized for the longest pill text
   (e.g. "Sections 03 · 04 · 05") plus ~14px breathing room. */
.page:has(> .insight-badge) .page-head{ padding-right: 150px; }
.page-head.on-dark{ border-bottom-color: rgba(255,255,255,.18); }
.page-head.on-dark .folio,
.page-head.on-dark .overline{ color: rgba(255,255,255,.85); }
.page-head.on-dark .page-rule{
  background: linear-gradient(90deg, rgba(255,255,255,.32), rgba(255,255,255,.02));
}

/* ---------- Universal footer ---------- */
.page-foot{
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(30,48,72,.16);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--capitol-slate);
  text-transform: uppercase;
  font-feature-settings: "tnum" 1;
}

/* ---------- Type primitives ---------- */
.kicker{
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dc-coral);
  margin-bottom: 14px;
}
.page-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--capitol-slate);
  margin: 0 0 14px;
  text-wrap: balance;
}
.page-title em{ font-style: italic; font-weight: 500; color: var(--ward-blue); }
.page-deck{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--body-text);
  margin: 0;
  max-width: 32em;
}
.mono{
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--capitol-slate);
  letter-spacing: 0;
}

/* ════════════════════════════════════════════════════════════
   T01 · COVER
   ════════════════════════════════════════════════════════════ */
.t-cover{ background: #FBFBF8; }
.t-cover::before{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height: 0.4in;
  background: linear-gradient(90deg,
    var(--capitol-slate) 0%, var(--capitol-slate) 25%,
    var(--ward-blue) 25%,    var(--ward-blue) 50%,
    var(--rising-teal) 50%,  var(--rising-teal) 75%,
    var(--dc-coral) 75%,     var(--dc-coral) 100%);
}
.t-cover .page-grid{ bottom: 0.9in; }

.t-cover .masthead{
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; margin-bottom: 0;
  border-bottom: 1px solid rgba(30,48,72,.18);
}
.t-cover .masthead .brand img{ height: 26px; display:block; }
.masthead-meta{
  display:flex; align-items:center; gap:12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--capitol-slate);
  text-transform: uppercase;
}
.masthead-meta .rule{ width: 28px; height:1px; background: var(--capitol-slate); }

.cover-main{
  flex: 1;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 32px;
  align-items: center;
  padding: 36px 0;
}
.cover-body{ align-self: end; }
.cover-body .overline{ display:block; margin-bottom: 22px; }
.cover-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 76px;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--capitol-slate);
  margin: 0 0 28px;
}
.cover-title em{ font-style: italic; font-weight: 400; color: var(--dc-coral); }
.cover-deck{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.65;
  color: var(--body-text);
  max-width: 28em;
  margin: 0;
}

.cover-figure{ position: relative; align-self: end; }
.figure-frame{
  aspect-ratio: 3 / 4;
  background: var(--ward-tint);
  overflow: hidden; position: relative;
}
.figure-frame image-slot{
  width:100%; height:100%;
  --is-bg: var(--ward-tint);
  --is-color: rgba(30,48,72,.55);
}
.figure-tag{
  position:absolute; left: -8px; bottom: -14px;
  background: var(--capitol-slate); color: #fff;
  padding: 9px 14px;
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
}
.tag-num{ font-weight: 700; font-size: 16px; letter-spacing: -.02em; line-height:1; font-feature-settings:"tnum" 1; }
.tag-label{
  font-weight: 600; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  border-left: 1px solid rgba(255,255,255,.3);
  padding-left: 10px; line-height:1;
}

.cover-foot{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(30,48,72,.18);
  padding-top: 14px;
}
.foot-cell{
  display:flex; flex-direction:column; gap:4px;
  border-left: 1px solid rgba(30,48,72,.12);
  padding-left: 14px;
}
.foot-cell:first-child{ border-left:none; padding-left:0; }
.foot-cell .k{
  font-family: var(--font-display);
  font-weight: 700; font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dc-coral);
}
.foot-cell .v{
  font-family: var(--font-display);
  font-weight: 600; font-size: 12px;
  color: var(--capitol-slate);
}

/* ════════════════════════════════════════════════════════════
   T02 · CONTENTS
   ════════════════════════════════════════════════════════════ */
.contents-hero{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
}
.contents-hero .page-title{ font-size: 44px; margin: 0; }
.contents-hero .page-deck{ align-self: end; max-width: 24em; }

.toc-list{ list-style: none; margin: 0; padding: 0; }
.toc-row{
  display: grid;
  grid-template-columns: 56px 1.4fr 2.4fr 60px;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid rgba(30,48,72,.12);
}
.toc-row:last-child{ border-bottom: 1px solid rgba(30,48,72,.12); }
.toc-num{
  font-family: var(--font-display);
  font-weight: 700; font-size: 13px;
  letter-spacing: .14em; color: var(--dc-coral);
  font-feature-settings:"tnum" 1;
}
.toc-name{
  font-family: var(--font-display);
  font-weight: 700; font-size: 17px;
  letter-spacing: -0.012em;
  color: var(--capitol-slate);
}
.toc-desc{
  font-family: var(--font-body);
  font-weight: 400; font-size: 12px;
  line-height: 1.5;
  color: var(--body-text);
}
.toc-page{
  font-family: var(--font-display);
  font-weight: 600; font-size: 11px;
  letter-spacing: .14em;
  color: var(--capitol-slate);
  text-align: right;
  font-feature-settings:"tnum" 1;
}

/* ════════════════════════════════════════════════════════════
   T03 · SECTION OPENER (full-bleed dark)
   ════════════════════════════════════════════════════════════ */
.t-opener{ background: var(--capitol-slate); color: #fff; }
.opener-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(at 90% 10%, rgba(124,197,217,.22) 0, transparent 55%),
    radial-gradient(at 10% 90%, rgba(212,115,108,.18) 0, transparent 55%),
    var(--capitol-slate);
}
.opener-bg::after{
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 80%);
}
.t-opener .page-grid{ z-index:1; }

.opener-stack{
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 80%;
}
.opener-stack .kicker{ color: var(--rising-teal); }
.opener-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 96px;
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0 0 28px;
  color: #fff;
}
.opener-deck{
  font-family: var(--font-body);
  font-weight: 400; font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  max-width: 30em;
  margin: 0;
}

.opener-meta{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 14px;
}
.meta-cell{
  display:flex; flex-direction:column; gap:4px;
  border-left: 1px solid rgba(255,255,255,.12);
  padding-left: 14px;
}
.meta-cell:first-child{ border-left:none; padding-left:0; }
.meta-cell .k{
  font-family: var(--font-display);
  font-weight: 700; font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--rising-teal);
}
.meta-cell .v{
  font-family: var(--font-display);
  font-weight: 600; font-size: 12px;
  color: #fff;
}

/* ════════════════════════════════════════════════════════════
   T04 · EDITORIAL FEATURE
   ════════════════════════════════════════════════════════════ */
.ed-hero{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: end;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(30,48,72,.12);
}
.ed-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--capitol-slate);
  margin: 0;
  text-wrap: balance;
}
.ed-title em{ font-style: italic; font-weight: 500; color: var(--ward-blue); }
.ed-hero .kicker{ grid-column: 1 / -1; margin-bottom: 8px; }
.ed-deck{
  font-family: var(--font-body);
  font-weight: 500; font-size: 13px;
  line-height: 1.6; color: var(--body-text);
  margin: 0; max-width: 26em;
}

.ed-body{
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 24px;
}
.ed-col{ display:flex; flex-direction:column; gap: 10px; }
.ed-col p{
  font-family: var(--font-body);
  font-weight: 400; font-size: 11px;
  line-height: 1.7; color: var(--capitol-slate);
  margin: 0;
}
.ed-col p.drop::first-letter{
  font-family: var(--font-display);
  font-weight: 700; font-size: 44px;
  line-height: 0.85;
  float: left; padding: 4px 8px 0 0;
  color: var(--dc-coral);
}
.ed-col p.ed-note{
  font-family: var(--font-display);
  font-weight: 600; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--dc-coral);
  margin-top: 8px;
}

.pull-quote{
  background: var(--ward-tint);
  padding: 22px;
  display:flex; flex-direction:column; gap: 12px;
  align-self: start;
}
.quote-mark{
  font-family: var(--font-display);
  font-weight: 700; font-size: 56px;
  line-height: 0.7; color: var(--dc-coral);
}
.pull-quote p{
  font-family: var(--font-display);
  font-weight: 500; font-style: italic;
  font-size: 16px; line-height: 1.4;
  color: var(--capitol-slate);
  margin: 0; text-wrap: balance;
}
.pull-cite{
  display:flex; flex-direction:column; gap:2px;
  border-top: 1px solid rgba(30,48,72,.16);
  padding-top: 10px; margin-top: 6px;
}
.cite-name{
  font-family: var(--font-display);
  font-weight: 700; font-size: 11px;
  color: var(--capitol-slate);
}
.cite-role{
  font-family: var(--font-body);
  font-weight: 500; font-size: 10px;
  color: var(--body-text);
}

/* ════════════════════════════════════════════════════════════
   T05 · DATA & STATS
   ════════════════════════════════════════════════════════════ */
.data-hero{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px; align-items: end;
  padding-bottom: 22px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(30,48,72,.12);
}
.data-grid{
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 36px;
  row-gap: 22px;
  align-content: start;
}
.datum{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(30,48,72,.18);
}
.datum-label{
  font-family: var(--font-display);
  font-weight: 700; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--dc-coral);
}
.datum-figure{ display: block; }
.datum-figure .num{
  font-family: var(--font-display);
  font-weight: 700; font-size: 60px;
  line-height: 0.95; letter-spacing: -0.035em;
  color: var(--capitol-slate);
  font-feature-settings:"tnum" 1;
  display: inline-block;
}
.datum-figure .num .sym{
  font-size: 38px; font-weight: 600;
  color: var(--ward-blue); margin-left: 2px;
}
.datum-desc{
  font-family: var(--font-body);
  font-weight: 500; font-size: 12px;
  line-height: 1.5;
  color: var(--capitol-slate);
  margin: 0; max-width: 22em;
}
.datum-src{
  font-family: var(--font-body);
  font-weight: 500; font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--muted);
}

.data-callout{
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px;
  background: var(--capitol-slate);
  color: #fff;
  margin-top: 24px;
}
.callout-tag{
  font-family: var(--font-display);
  font-weight: 700; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--rising-teal);
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.2);
  padding-right: 16px;
}
.data-callout p{
  font-family: var(--font-display);
  font-weight: 500; font-size: 15px;
  line-height: 1.4; color: #fff;
  margin: 0;
}
.data-callout p em{
  color: var(--cherry-blossom);
  font-style: italic; font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   T06 · FRAMEWORK
   ════════════════════════════════════════════════════════════ */
.fw-hero{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px; align-items: end;
  padding-bottom: 22px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(30,48,72,.12);
}
.fw-steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}
.fw-step{
  position: relative;
  padding: 0 18px;
  border-left: 1px solid rgba(30,48,72,.16);
}
.fw-step:first-child{ padding-left: 0; border-left: none; }
.step-num{
  font-family: var(--font-display);
  font-weight: 700; font-size: 11px;
  letter-spacing: .18em; color: var(--dc-coral);
  font-feature-settings:"tnum" 1;
  display: block; margin-bottom: 14px;
}
.step-title{
  font-family: var(--font-display);
  font-weight: 700; font-size: 17px;
  line-height: 1.2; letter-spacing: -0.015em;
  color: var(--capitol-slate);
  margin: 0 0 8px;
}
.step-desc{
  font-family: var(--font-body);
  font-weight: 400; font-size: 11px;
  line-height: 1.55;
  color: var(--body-text);
  margin: 0;
}

.fw-table{ margin-top: 48px; }
.tbl-row{
  display: grid;
  grid-template-columns: 0.9fr 1.4fr 2fr;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(30,48,72,.12);
  font-family: var(--font-body);
  font-size: 11.5px;
  color: var(--capitol-slate);
  align-items: center;
  text-align: center;
}
.tbl-row > span{ text-align: center; }
.tbl-row > span:first-child{
  font-family: var(--font-display);
  font-weight: 700; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--capitol-slate);
  text-align: center;
}
.tbl-head{
  border-bottom: 1px solid var(--capitol-slate);
  padding: 10px 0;
}
.tbl-head > span{
  font-family: var(--font-display) !important;
  font-weight: 700 !important; font-size: 9.5px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  color: var(--dc-coral) !important;
  text-align: center !important;
}

/* ════════════════════════════════════════════════════════════
   T07 · PROFILE / VOICE
   ════════════════════════════════════════════════════════════ */
.profile-grid{
  flex: 1;
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: 32px;
  align-items: start;
}
.profile-figure{ margin: 0; }
.portrait{
  aspect-ratio: 4 / 5;
  background: var(--ward-tint);
  overflow: hidden;
}
.portrait image-slot{
  width:100%; height:100%;
  --is-bg: var(--ward-tint);
  --is-color: rgba(30,48,72,.55);
}
.portrait-caption{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(30,48,72,.18);
  display: flex; flex-direction: column; gap: 4px;
}
.cap-name{
  font-family: var(--font-display);
  font-weight: 700; font-size: 13px;
  color: var(--capitol-slate);
}
.cap-role{
  font-family: var(--font-body);
  font-weight: 500; font-size: 10.5px;
  line-height: 1.5; color: var(--body-text);
}
.profile-body{ padding-top: 4px; }
.profile-title{
  font-family: var(--font-display);
  font-weight: 700; font-size: 34px;
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--capitol-slate);
  margin: 0 0 26px;
  text-wrap: balance;
}
.qna{
  padding: 14px 0;
  border-top: 1px solid rgba(30,48,72,.12);
}
.qna:last-child{ border-bottom: 1px solid rgba(30,48,72,.12); }
.qna .q{
  font-family: var(--font-display);
  font-weight: 700; font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--dc-coral);
  margin: 0 0 6px;
}
.qna .a{
  font-family: var(--font-body);
  font-weight: 400; font-size: 12px;
  line-height: 1.7;
  color: var(--capitol-slate);
  margin: 0; max-width: 38em;
}

/* ════════════════════════════════════════════════════════════
   T08 · CLOSING
   ════════════════════════════════════════════════════════════ */
.t-closing{ background: #FBFBF8; }
.t-closing::before{ content: none; }
.t-closing .page-grid{ left: 0.5in; }
.t-closing .close-cta{ display: none !important; }
.t-closing .close-foot{ display: none !important; }

.close-hero{
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(30,48,72,.16);
}
.close-title{
  font-family: var(--font-display);
  font-weight: 700; font-size: 60px;
  line-height: 0.96; letter-spacing: -0.035em;
  color: var(--capitol-slate);
  margin: 0 0 22px;
}
.close-deck{
  font-family: var(--font-body);
  font-weight: 400; font-size: 13px;
  line-height: 1.65;
  color: var(--body-text);
  max-width: 28em; margin: 0 0 22px;
}
.close-cta{
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--dc-coral);
  text-decoration: none;
  border-bottom: 1.5px solid var(--dc-coral);
  padding-bottom: 4px;
}

.colophon{
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-content: end;
  padding-bottom: 28px;
}
.cp-cell{ display: flex; flex-direction: column; gap: 5px; }
.cp-label{
  font-family: var(--font-display);
  font-weight: 700; font-size: 9.5px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--dc-coral);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(30,48,72,.18);
}
.cp-value{
  font-family: var(--font-body);
  font-weight: 500; font-size: 11px;
  line-height: 1.5;
  color: var(--capitol-slate);
  font-feature-settings:"tnum" 1;
}

.close-foot{
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(30,48,72,.18);
}
.close-foot .brand img{ height: 22px; display: block; }
.close-meta{
  font-family: var(--font-display);
  font-weight: 600; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--capitol-slate);
}

/* ---------- Toolbar ---------- */
.toolbar{
  position: fixed; right: 18px; top: 18px; z-index: 50;
  background: var(--capitol-slate); color:#fff;
  border: none;
  padding: 11px 18px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.toolbar:hover{ background: var(--ward-blue); }

/* ════════════════════════════════════════════════════════════
   V5 OVERRIDES — bigger editorial type + gradient cover + filled pages
   ════════════════════════════════════════════════════════════ */

/* Type scale bump — closer to print magazine sizing */
.page-title{ font-size: 60px; }
.contents-hero .page-title{ font-size: 64px; }
.page-deck{ font-size: 16px; line-height: 1.55; max-width: 30em; }

/* T01 · COVER — full gradient, white type */
.t-cover{
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(43,168,170,.55) 0%, rgba(43,168,170,0) 55%),
    radial-gradient(110% 90% at 0% 100%, rgba(217,117,87,.32) 0%, rgba(217,117,87,0) 50%),
    linear-gradient(135deg, var(--capitol-slate) 0%, #234A78 50%, var(--ward-blue) 100%);
  color: #fff;
}
.t-cover::before{ display: none; }
.t-cover .page-grid{ bottom: 0.5in; color:#fff; }
.t-cover .masthead{ border-bottom-color: rgba(255,255,255,.22); }
.t-cover .masthead .brand img{ filter: brightness(0) invert(1); }
.t-cover .masthead-meta{ color: rgba(255,255,255,.85); }
.t-cover .masthead-meta .rule{ background: rgba(255,255,255,.4); }
.cover-body .overline{ color: var(--rising-teal); }
.cover-title{ color:#fff; font-size: 128px; line-height: 0.92; letter-spacing: -0.04em; }
.cover-title em{ color: var(--rising-teal); font-weight: 300; }
.cover-deck{ color: rgba(255,255,255,.85); font-size: 17px; line-height: 1.55; max-width: 26em; }
.t-cover .figure-frame{ outline: 1px solid rgba(255,255,255,.22); outline-offset: 0; }
.t-cover .figure-frame image-slot{ background: rgba(255,255,255,.06); }
.t-cover .figure-tag{ background: var(--rising-teal); color: var(--capitol-slate); }
.t-cover .figure-tag .tag-label{ border-left-color: rgba(30,48,72,.3); color: var(--capitol-slate); }
.cover-foot{ border-top: 1px solid rgba(255,255,255,.22); }
.foot-cell .k{ color: var(--rising-teal); }
.foot-cell .v{ color: #fff; }

/* T02 · CONTENTS — taller TOC rows */
.toc-row{ padding: 15px 0 !important; }
.toc-name{ font-size: 19px !important; }
.toc-desc{ font-size: 13px !important; line-height: 1.45; }

/* T03 · SECTION OPENER */
.opener-deck{ font-size: 16px; max-width: 28em; }
.meta-cell .v{ font-size: 14px; }

/* T04 · EDITORIAL */
.ed-title{ font-size: 60px; line-height: 1.02; }
.ed-deck{ font-size: 17px; line-height: 1.55; max-width: 28em; }
.ed-col p{ font-size: 13.5px; line-height: 1.7; }
.ed-col p.drop::first-letter{ font-size: 64px; }
.pull-quote p{ font-size: 22px; line-height: 1.35; }
.quote-mark{ font-size: 80px; }
.cite-name{ font-size: 12px; }
.cite-role{ font-size: 11px; }

/* T05 · DATA — much larger figures */
.datum-figure .num{ font-size: 104px; line-height: 0.9; }
.datum-figure .num .sym{ font-size: 64px; }
.datum-label{ font-size: 11px; }
.datum-desc{ font-size: 16px; line-height: 1.45; }
.datum-src{ font-size: 11px; }
.data-callout p{ font-size: 22px; line-height: 1.4; }
.callout-tag{ font-size: 11px; }

/* T06 · FRAMEWORK */
.step-num{ font-size: 12px; }
.step-title{ font-size: 22px; line-height: 1.18; }
.step-desc{ font-size: 13.5px; line-height: 1.6; }
.tbl-row{ font-size: 13.5px; padding: 11px 0; }
.tbl-row > span:first-child{ font-size: 13px !important; }
.tbl-head > span{ font-size: 10.5px !important; }

/* T07 · SELF-ASSESSMENT — make body fill */
.profile-grid{ align-items: stretch; }
.profile-body{ display: flex; flex-direction: column; }
.profile-title{ font-size: 52px; line-height: 1.02; margin-bottom: 18px; }
.profile-body .qna{ flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 22px 0; }
.profile-body .qna:first-of-type{ padding-top: 8px; }
.profile-body .qna:last-of-type{ padding-bottom: 0; border-bottom: none; }
.qna .q{ font-size: 14.5px; margin-bottom: 8px; }
.qna .a{ font-size: 15px; line-height: 1.65; }
.profile-figure{ display: flex; flex-direction: column; }
.profile-figure > div:first-child{ flex: 1; }

/* T08 · CLOSING */
.close-title{ font-size: 96px; line-height: 0.95; }
.close-deck{ font-size: 17px; line-height: 1.55; max-width: 28em; }
.close-cta{ font-size: 13.5px; padding: 14px 22px; }
.cp-label{ font-size: 10.5px; }
.cp-value{ font-size: 12.5px; line-height: 1.55; }

/* Headers / footers slightly bigger so they read at print scale */
.overline{ font-size: 11.5px; }
.folio{ font-size: 12px; }
.foot-text, .page-foot{ font-size: 11px; }

/* V6 — kill the double horizontal rule under every page-head.
   The .page-head element ends with its own inline rule (the thin line
   extending right of the overline). Any border-bottom on page-head, or
   border-top on the next sibling, creates a duplicate stripe. Nuke them. */
.page-head{ border-bottom: none !important; padding-bottom: 0 !important; }
.page-head + *{ border-top: none !important; padding-top: 0 !important; }
.ed-hero, .contents-hero, .data-hero, .fw-hero, .close-hero,
.opener-stack, .profile-grid{ border-top: none !important; }
/* Print-mode header on dark openers */
.t-opener .page-head{ border-bottom: none !important; }

/* V6 — editorial body without pull-quote (3 prose columns) */
.ed-body{ grid-template-columns: 1fr 1fr 1fr !important; column-gap: 32px; }

/* ════════════════════════════════════════════════════════════
   V8 — REFERENCE-VIBE OVERHAUL
   Type-driven cover, dot overlay, stat-card frames, pill chrome
   ════════════════════════════════════════════════════════════ */

/* T01 · COVER — type-driven, no photo column */
.t-cover{
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(43,168,170,.55) 0%, rgba(43,168,170,0) 55%),
    radial-gradient(110% 90% at 0% 100%, rgba(217,117,87,.42) 0%, rgba(217,117,87,0) 55%),
    linear-gradient(135deg, var(--capitol-slate) 0%, #234A78 50%, var(--ward-blue) 100%);
}
.t-cover::after{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events:none; z-index: 0;
}
.t-cover .page-grid{ z-index: 1; display:flex; flex-direction:column; bottom: 0.5in !important; }
.cover-main{
  grid-template-columns: 1fr !important;
  padding: 28px 0 !important;
  flex: 1;
  align-items: stretch !important;
  display: grid !important;
}
.cover-figure{ display: none !important; }
.t-cover .cover-foot{ display: none !important; }
.cover-body{ display:flex !important; flex-direction:column; gap: 22px; align-self: stretch !important; }
.cover-body .overline{ display: none; }

.cover-pill{ display: none !important; }

.cover-title{ margin: 4px 0 0 !important; font-size: 0; line-height: 1; }
.ct-line{ display:block; font-family: var(--font-display); }
.ct-small{ font-size: 60px; font-weight: 600; color: rgba(255,255,255,.94); letter-spacing:-0.022em; line-height: 1; }
.ct-big{ font-size: 124px; font-weight: 800; line-height: 0.92; letter-spacing:-0.045em; }
.ct-big-es{ font-size: 108px; }
.ct-big + .ct-big{ margin-top: 0; }
.ct-big em{
  font-style: normal; font-weight: 800;
  background: linear-gradient(105deg, var(--rising-teal) 0%, #b3cdd6 42%, #e3a89a 72%, var(--dc-coral) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.ct-mid{ font-size: 70px; font-weight: 600; color:#fff; letter-spacing:-0.028em; line-height: 1; }

.cover-rule{
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--rising-teal) 0%, rgba(255,255,255,.28) 50%, var(--dc-coral) 100%);
  margin: 8px 0;
}

.cover-volume{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 28px;
  padding-top: 28px;
  padding-bottom: 12px;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.22);
}
.t-cover .cover-main{ padding: 22px 0 6px !important; }
.t-cover .cover-body{ gap: 26px; }
.cv-cell{ display:flex; flex-direction:column; gap: 6px; position: relative; }
.cv-cell.right{ text-align: right; align-items: flex-end; }
.cv-cell.center{ text-align: center; align-items: center; }
.cv-label{
  font-family: var(--font-display);
  font-weight: 700; font-size: 9.5px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--rising-teal);
}

/* Three-star brand mark sitting above the "Published By" cell so the
   bottom row reads with similar visual weight on both sides (the
   right cell carries a big numeral; the left cell needs a counter-
   balance accent to stop reading off-balance). */
.t-cover .cover-volume .cv-cell:first-child::before{
  content: "★ ★ ★";
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .35em;
  color: var(--rising-teal);
  margin-bottom: 10px;
  line-height: 1;
}
.cv-value{
  font-family: var(--font-display);
  font-weight: 600; font-size: 13px;
  color: #fff;
}
.cv-num{
  font-family: var(--font-display);
  font-weight: 800; font-size: 86px;
  line-height: 0.88; letter-spacing:-0.045em;
  color: #fff;
}

/* T05 · STAT CARDS — rounded card + gradient top stripe */
.datum{
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px 22px;
  box-shadow: 0 1px 0 rgba(30,48,72,.06), 0 10px 26px rgba(30,48,72,.05);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(30,48,72,.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.datum::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height: 4px;
  background: linear-gradient(90deg, var(--capitol-slate), var(--ward-blue), var(--rising-teal), var(--dc-coral));
}
.datum-label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--dc-coral);
  display: inline-block;
  padding: 5px 11px;
  background: rgba(217,117,87,.10);
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 4px;
}
.datum-figure{ line-height: 1; margin: 2px 0 4px; }
.datum-figure .num{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 92px;
  letter-spacing: -0.045em;
  color: var(--capitol-slate);
  line-height: 0.9;
}
.datum-figure .num .sym{
  font-size: 48px;
  color: var(--dc-coral);
  font-weight: 700;
  margin-left: 4px;
  letter-spacing: 0;
}
.datum-desc{
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(30,48,72,.10);
}
.datum-src{
  font-family: var(--font-body);
  font-size: 10px;
  font-style: italic;
  color: rgba(30,48,72,.55);
  margin-top: auto;
  padding-top: 6px;
}
.data-grid{ row-gap: 18px !important; column-gap: 18px !important; }

/* Subtle per-page texture — tiny corner star marker bottom-right */
.page:not(.t-cover):not(.t-section):not(.t-closing)::after{
  content: "";
  position: absolute;
  right: 0.5in; bottom: 0.5in;
  width: 28px; height: 28px;
  background-image: radial-gradient(rgba(30,48,72,.18) 1px, transparent 1px);
  background-size: 6px 6px;
  pointer-events: none;
  opacity: .9;
}
.t-closing{ position: relative; }
.t-closing::after{
  content: "";
  position: absolute;
  right: 0.5in; bottom: 0.5in;
  width: 28px; height: 28px;
  background-image: radial-gradient(rgba(30,48,72,.18) 1px, transparent 1px);
  background-size: 6px 6px;
  pointer-events: none;
}

/* Section eyebrow above titles (reference-style "SECTION 2.1") */
.section-eyebrow{
  display:block;
  font-family: var(--font-display);
  font-weight: 700; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--dc-coral);
  margin-bottom: 14px;
}

/* === V9 patches === */
.page-rule{ background: rgba(30,48,72,.42) !important; }
.page-head.on-dark .page-rule{ background: rgba(255,255,255,.55) !important; }
.page:not(.t-cover):not(.t-section):not(.t-closing)::after,
.t-closing::after{ display: none !important; }
.t-cover .masthead{ position: relative; padding-bottom: 22px; border-bottom: 0; }
.t-cover .masthead::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--rising-teal) 0%, #b3cdd6 40%, #e3a89a 70%, var(--dc-coral) 100%);
  border-radius: 2px;
}
.t-cover .cover-main{ padding-top: 56px !important; }
.t-cover .cover-volume{ grid-template-columns: 1fr auto !important; }
.t-cover .cover-volume .cv-cell.right{ display: none !important; }
.close-dates{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  padding: 26px 0; margin: 12px 0 24px;
  border-top: 1px solid rgba(30,48,72,.16);
  border-bottom: 1px solid rgba(30,48,72,.16);
}
.close-date{ display: flex; flex-direction: column; gap: 8px; }
.cd-when{ font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ward-blue); }
.cd-what{ font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.close-line{ margin: 0 0 24px; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.35; color: var(--capitol-slate); max-width: 36em; }
.close-line em{ color: var(--dc-coral); font-style: italic; font-weight: 700; }

/* === V10 patches === */
.t-cover .masthead{ display: none !important; }
.t-cover .cover-main{ padding-top: 24px !important; }
.t-cover .cover-volume{ align-items: baseline !important; padding-top: 22px !important; }
.t-cover .cover-volume .cv-cell.center{ text-align: right; align-items: flex-end; }
.t-cover .cover-volume .cv-num{ line-height: 1; }
.fw-row{ grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; }
.fw-step .fw-when{ white-space: nowrap; }
.data-grid{ margin-bottom: 0 !important; }
.data-callout{ margin-top: 18px !important; }
.t-data .page-grid{ overflow: visible; }

/* ════════════════════════════════════════════════════════════
   V11 — Logo on cover · single gradient line · page-5 fix
   ════════════════════════════════════════════════════════════ */

/* Cover: restore logo, hide edition text */
.t-cover .masthead{
  display: flex !important;
  border-bottom: none !important;
  padding-bottom: 18px !important;
  background: transparent;
}
.t-cover .masthead-meta{ display: none !important; }
.t-cover .masthead::after{ display: none !important; }
.t-cover .masthead .brand img{ height: 28px; display: block; filter: brightness(0) invert(1); }

/* Cover: remove first gradient rule, make volume border the rainbow */
.cover-rule{ display: none !important; }
.cover-volume{ position: relative; border-top: none !important; padding-top: 24px !important; }
.cover-volume::before{
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--rising-teal) 0%, #b3cdd6 40%, #e3a89a 70%, var(--dc-coral) 100%);
  border-radius: 2px;
}

/* Cover: volume section – Published By left, Volume/01 right, both bottom-aligned */
.t-cover .cover-volume{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: end !important;
  gap: 28px !important;
  padding-top: 24px !important;
}
.t-cover .cover-volume .cv-cell{ display: flex; flex-direction: column; gap: 5px; }
.t-cover .cover-volume .cv-cell.center{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  text-align: right !important;
}

/* Cover title – better proportion. line-height 1.0 prevents the
   descenders of the first line from crashing into the caps of the
   second line when ct-big spans 2 lines (e.g. "College / Application").
   No-wrap prevents long single words from wrapping mid-glyph. */
.ct-big{
  font-size: 96px !important;
  line-height: 1.0 !important;
  letter-spacing: -0.04em !important;
  white-space: normal !important;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.ct-small{ font-size: 44px !important; line-height: 1.0 !important; }
.ct-mid{ font-size: 52px !important; line-height: 1.0 !important; }
.cover-title .ct-line{ display: block; }
.cover-title .ct-line + .ct-line{ margin-top: 6px; }
.cover-deck{ font-size: 14px !important; line-height: 1.6 !important; max-width: 34em !important; }

/* Cover main – push title+deck DOWN closer to the gradient line.
   Match the gap above the line to the gap below it (~28px each). */
.t-cover .cover-main{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 0 0 28px !important;
}
.t-cover .cover-body{ margin-top: auto !important; align-self: stretch !important; }

/* Volume row: force VOLUME label to bottom-align with "DC State Board".
   Both cells use justify-content: flex-end so their last child sits at row
   bottom; matching line-heights pin the visual baselines together. */
.t-cover .cover-volume{
  align-items: end !important;
  padding-top: 28px !important;
}
.t-cover .cover-volume .cv-cell{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}
.t-cover .cover-volume .cv-cell.center{
  align-items: flex-end !important;
  text-align: right !important;
}
.t-cover .cover-volume .cv-num{
  line-height: 0.85 !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.t-cover .cover-volume .cv-cell .cv-label,
.t-cover .cover-volume .cv-cell .cv-value{
  line-height: 1.2 !important;
  display: block !important;
}

/* Page 5 data overflow fix */
.t-data .page-grid{ overflow: hidden !important; }
.datum-figure .num{ font-size: 78px !important; line-height: 0.9; }
.datum-figure .num .sym{ font-size: 42px !important; }
.data-callout{ margin-top: 10px !important; padding: 14px 20px !important; }
.data-callout p{ font-size: 18px !important; line-height: 1.4 !important; }
.datum-desc{ font-size: 12px !important; line-height: 1.45 !important; }
.datum{ padding: 20px 20px 16px !important; gap: 8px !important; }
.data-grid{ row-gap: 14px !important; column-gap: 14px !important; }

/* Inline table for editorial pages (IEP/504 comparisons, pathway tables) */
.ed-table{
  width: 100%; border-collapse: collapse;
  font-family: var(--font-body); font-size: 11px;
  margin: 8px 0; color: var(--capitol-slate);
}
.ed-table th{
  font-family: var(--font-display); font-weight: 700; font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--dc-coral);
  padding: 7px 10px; border-bottom: 2px solid var(--capitol-slate);
  text-align: center;
}
.ed-table td{ padding: 7px 10px; border-bottom: 1px solid rgba(30,48,72,.10); vertical-align: middle; line-height: 1.45; text-align: center; }
.ed-table tr:last-child td{ border-bottom: none; }
.ed-table td:first-child{ font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .08em; text-align: center; }

/* Editorial callout — tick mark + tracked label + full hairline.
   Sharp, restrained, no AI-default left stripe. */
.ed-callout{
  background: var(--ward-tint);
  padding: 16px 20px 14px;
  margin: 10px 0;
  position: relative;
  font-family: var(--font-body);
  font-size: 11px; line-height: 1.6;
  color: var(--capitol-slate);
}
.ed-callout strong{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ward-blue);
  margin: 0 0 11px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(30,48,72,.15);
}
.ed-callout strong::before{
  content: "";
  flex: 0 0 14px;
  height: 2px;
  background: currentColor;
}
.ed-callout.coral{ background: var(--coral-tint); }
.ed-callout.coral strong{ color: var(--dc-coral); }
.ed-callout.coral strong{ border-color: rgba(212,115,108,.30); }
.ed-callout.teal{ background: var(--rising-tint); }
.ed-callout.teal strong{ color: var(--rising-teal); }
.ed-callout.teal strong{ border-color: rgba(124,197,217,.40); }

/* Bullet list in editorial columns */
.ed-list{ list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 5px; }
.ed-list li{
  font-family: var(--font-body); font-size: 11px; line-height: 1.55; color: var(--capitol-slate);
  padding-left: 14px; position: relative;
}
.ed-list li::before{
  content: ""; position: absolute; left: 0; top: 6px;
  width: 6px; height: 6px; background: var(--dc-coral); border-radius: 50%;
}
.ed-list.blue li::before{ background: var(--ward-blue); }
.ed-list.teal li::before{ background: var(--rising-teal); }

/* Compact heading within editorial cols */
.col-head{
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: -0.01em; color: var(--capitol-slate);
  margin: 14px 0 6px; padding-bottom: 5px;
  border-bottom: 1px solid rgba(30,48,72,.16);
}
.col-head:first-child{ margin-top: 0; }
.col-sub{
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dc-coral);
  margin: 10px 0 4px;
}
.col-sub.blue{ color: var(--ward-blue); }
.col-sub.teal{ color: var(--rising-teal); }

/* Numbered step list */
.step-list{ list-style: none; padding: 0; margin: 6px 0; counter-reset: steps; display: flex; flex-direction: column; gap: 6px; }
.step-list li{
  font-family: var(--font-body); font-size: 11px; line-height: 1.5; color: var(--capitol-slate);
  padding-left: 20px; position: relative;
  counter-increment: steps;
}
.step-list li::before{
  content: counter(steps);
  position: absolute; left: 0; top: 1px;
  font-family: var(--font-display); font-weight: 700; font-size: 9px;
  color: #fff; background: var(--ward-blue);
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Checklist */
.check-list{ list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 5px; }
.check-list li{
  font-family: var(--font-body); font-size: 11px; line-height: 1.5; color: var(--capitol-slate);
  padding-left: 18px; position: relative;
}
.check-list li::before{
  content: "☐"; position: absolute; left: 0;
  font-size: 11px; color: var(--ward-blue);
}

/* Period sub-header in closing/resource pages */
.res-section{
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--dc-coral);
  margin: 16px 0 6px; padding-bottom: 5px; border-bottom: 1px solid rgba(30,48,72,.16);
}
.res-entry{ margin: 0 0 10px; font-family: var(--font-body); font-size: 11px; line-height: 1.55; color: var(--capitol-slate); }
.res-entry strong{ display: block; font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--capitol-slate); }
.res-entry span{ color: var(--body-text); }

/* Glossary term */
.glos-term{ margin: 0 0 10px; }
.glos-term dt{ font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--capitol-slate); margin-bottom: 2px; }
.glos-term dd{ font-family: var(--font-body); font-size: 11px; line-height: 1.55; color: var(--body-text); margin: 0; }

/* ════════════════════════════════════════════════════════════
   V12 — Full-page fill + no cutoffs
   Strategy: structural space savings + flex-fill on expanding
   regions so every page fills edge-to-edge within margins.
   ════════════════════════════════════════════════════════════ */

/* ── Clip overflow: nothing escapes the printable area ─────── */
.t-editorial .page-grid,
.t-framework .page-grid{ overflow: hidden !important; }

/* ── Print: prevent orphaned blocks ─────────────────────────── */
@media print {
  .ed-callout, .ed-table, .datum, .fw-step,
  .glos-term, .tbl-row, .res-entry{
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .col-head, .col-sub{ break-after: avoid; page-break-after: avoid; }
}

/* ── Page chrome: recover ~24px per page ───────────────────── */
.t-editorial .page-head,
.t-framework .page-head{ margin-bottom: 24px !important; padding-bottom: 10px !important; }
.t-editorial .page-foot,
.t-framework .page-foot{ padding-top: 10px !important; }

/* ════════════════════════════════════════════════════════════
   EDITORIAL PAGES
   ════════════════════════════════════════════════════════════ */

/* Hero: tighter but still elegant */
.t-editorial .ed-hero{
  padding-bottom: 16px !important;
  margin-bottom: 18px !important;
  gap: 24px !important;
}
.t-editorial .ed-hero .kicker{ margin-bottom: 6px !important; }
.t-editorial .ed-title{ font-size: 36px !important; line-height: 1.04 !important; }
.t-editorial .ed-deck{ font-size: 12.5px !important; line-height: 1.5 !important; }

/* ed-body: natural top-aligned flow (no awkward justify-content gaps) */
.t-editorial .ed-body{ column-gap: 22px !important; }
.t-editorial .ed-col{
  gap: 9px !important;
  justify-content: flex-start !important;
}

/* Body text */
.t-editorial .ed-col p{ font-size: 11px !important; line-height: 1.6 !important; }
.t-editorial .ed-col p.drop::first-letter{ font-size: 40px !important; }
.t-editorial .ed-col p.ed-note{ font-size: 10px !important; margin-top: 8px !important; }

/* Section headings — stronger visual weight */
.t-editorial .col-head{
  font-size: 13px !important;
  font-weight: 800 !important;
  margin: 14px 0 8px !important;
  padding-bottom: 6px !important;
  border-bottom: 1.5px solid var(--capitol-slate) !important;
  color: var(--capitol-slate) !important;
}
.t-editorial .col-head:first-child{ margin-top: 0 !important; }
.t-editorial .col-sub{
  font-size: 11px !important;
  font-weight: 800 !important;
  margin: 10px 0 4px !important;
  letter-spacing: .12em !important;
}

/* Lists */
.t-editorial .ed-list{ gap: 4px !important; margin: 4px 0 !important; }
.t-editorial .ed-list li{ font-size: 11px !important; line-height: 1.5 !important; }
.t-editorial .ed-list li::before{ top: 5px !important; }
.t-editorial .step-list{ gap: 5px !important; margin: 5px 0 !important; }
.t-editorial .step-list li{ font-size: 11px !important; line-height: 1.5 !important; }
.t-editorial .check-list{ gap: 4px !important; margin: 4px 0 !important; }
.t-editorial .check-list li{ font-size: 11px !important; line-height: 1.5 !important; }

/* Tables */
.t-editorial .ed-table{ font-size: 10.5px !important; margin: 5px 0 !important; }
.t-editorial .ed-table th{ padding: 5px 9px !important; font-size: 9px !important; }
.t-editorial .ed-table td{ padding: 6px 9px !important; line-height: 1.45 !important; }
.t-editorial .ed-table td:first-child{ font-size: 10px !important; }

/* Callouts */
.t-editorial .ed-callout{
  padding: 11px 14px !important;
  margin: 6px 0 !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}
.t-editorial .ed-callout strong{ font-size: 9.5px !important; margin-bottom: 4px !important; }

/* Glossary */
.t-editorial .glos-term{ margin: 0 0 10px !important; }
.t-editorial .glos-term dt{ font-size: 11.5px !important; margin-bottom: 2px !important; }
.t-editorial .glos-term dd{ font-size: 11px !important; line-height: 1.5 !important; }

/* ════════════════════════════════════════════════════════════
   FRAMEWORK PAGES — fw-steps expands to fill all available space
   ════════════════════════════════════════════════════════════ */
.t-framework .fw-hero{ padding-bottom: 16px !important; margin-bottom: 20px !important; }
.t-framework .page-title{ font-size: 52px !important; line-height: 1.04 !important; }
.t-framework .page-deck{ font-size: 14px !important; line-height: 1.55 !important; }

/* Step cards: flex-1 fills all remaining space above the table */
.t-framework .fw-steps{
  flex: 1 !important;
  margin-bottom: 0 !important;
  align-items: stretch !important;
}
/* Each card is a column; desc grows to push space to the bottom */
.t-framework .fw-step{
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 20px !important;
}
.t-framework .fw-step .step-num{ font-size: 10.5px !important; margin-bottom: 12px !important; }
.t-framework .fw-step .step-title{ font-size: 17px !important; margin: 0 0 10px !important; }
.t-framework .fw-step .step-desc{
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  flex: 1 !important;
}

/* Tracker / comparison table: compact rows, comes after stretched steps */
.t-framework .fw-table{ margin-top: 0 !important; }
.t-framework .tbl-row{
  padding: 10px 0 !important;
  font-size: 11px !important;
  gap: 18px !important;
}
/* 3-col tracker tables (P07): rebalance so 'Year' header doesn't widow */
.t-framework .fw-table:not(.cols-5) .tbl-row{
  grid-template-columns: 0.85fr 1.6fr 1.85fr !important;
}
/* 5-col comparison tables (P11): equal columns for AP/IB/CTE/DE */
.t-framework .fw-table.cols-5 .tbl-row{
  grid-template-columns: 0.95fr 1fr 1fr 1fr 1fr !important;
  gap: 12px !important;
}
.t-framework .fw-table.cols-5 .tbl-row > span{ font-size: 10px !important; }
.t-framework .fw-table.cols-5 .tbl-head > span{ font-size: 9.5px !important; }
.t-framework .tbl-row > span:first-child{ font-size: 10.5px !important; }
.t-framework .tbl-head{ padding: 8px 0 !important; }
.t-framework .tbl-head > span{ text-wrap: balance; }

/* ════════════════════════════════════════════════════════════
   DATA PAGE (P05) — datum hero tighter; grid fills space
   ════════════════════════════════════════════════════════════ */
.t-data .data-hero{ padding-bottom: 14px !important; margin-bottom: 16px !important; }
.t-data .page-title{ font-size: 46px !important; line-height: 1.04 !important; }
.t-data .page-deck{ font-size: 13px !important; line-height: 1.5 !important; }

/* ════════════════════════════════════════════════════════════
   SECTION OPENER PAGES — center stack horizontally + vertically
   ════════════════════════════════════════════════════════════ */
.t-opener .page-grid{ align-items: center !important; }
.t-opener .opener-stack{
  max-width: 100% !important;
  width: 100% !important;
  text-align: center !important;
  align-items: center !important;
  margin: auto 0 !important;
}
.t-opener .opener-stack .kicker{ display: inline-block; margin: 0 auto 18px !important; }
.t-opener .opener-title{ margin: 0 auto 28px !important; }
.t-opener .opener-deck{
  max-width: 36em !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.t-opener .opener-meta{
  width: 100%;
  text-align: center !important;
}
.t-opener .opener-meta .meta-cell{
  align-items: center !important;
  text-align: center !important;
}

/* ════════════════════════════════════════════════════════════
   Auto-pagination break hints — keep these blocks together
   ════════════════════════════════════════════════════════════ */
.ed-callout, .ed-table, .glos-term,
.col-head, .col-sub { break-inside: avoid; page-break-inside: avoid; }
.col-head, .col-sub { break-after: avoid; page-break-after: avoid; }

/* ════════════════════════════════════════════════════════════
   V13 — Pure white pages + bespoke layouts per content type
   Each page templated to fit its content, not the reverse.
   ════════════════════════════════════════════════════════════ */

/* Cover photo + brand gradient overlay
   Layered top→bottom: subtle teal/coral color wash → diagonal slate-to-blue
   gradient with rising opacity (image visible top, dark for legibility bottom)
   → photo → solid fallback. */
.t-cover{
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(124,197,217,.22) 0%, rgba(124,197,217,0) 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(212,115,108,.28) 0%, rgba(212,115,108,0) 55%),
    linear-gradient(165deg,
      rgba(30,48,72,.30) 0%,
      rgba(30,48,72,.55) 40%,
      rgba(30,48,72,.86) 75%,
      rgba(30,48,72,.97) 100%),
    linear-gradient(135deg,
      rgba(61,107,138,.22) 0%,
      rgba(61,107,138,0) 60%),
    url('cover-bg.jpg') center/cover no-repeat,
    var(--capitol-slate) !important;
}
.t-cover::after{ opacity: .35 !important; }

/* All non-cover pages: pure white (kill cream tint everywhere) */
section.page:not(.t-cover):not(.t-opener){
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}
.t-closing, section.t-closing{
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
}
.t-contents{ background: #FFFFFF !important; }

/* ════════════════════════════════════════════════════════════
   T-FEATURE-GRID  — used for Governance, Postsecondary options
   Hero band + 4 (or 6) feature cards on a grid + insight strip
   ════════════════════════════════════════════════════════════ */
.t-feature-grid .page-grid{ overflow: hidden; }

.feat-hero{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: end;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(30,48,72,.12);
}
.feat-hero .kicker{ grid-column: 1 / -1; margin-bottom: 4px; }
.feat-title{
  font-family: var(--font-display);
  font-weight: 800; font-size: 38px; line-height: 1.04;
  letter-spacing: -0.025em; color: var(--capitol-slate);
  margin: 0; text-wrap: balance;
}
.feat-title em{ font-style: italic; font-weight: 500; color: var(--ward-blue); }
.feat-deck{
  font-family: var(--font-body);
  font-weight: 500; font-size: 12.5px; line-height: 1.55;
  color: var(--body-text); margin: 0; max-width: 28em;
}

.bodies-grid{
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 16px;
  row-gap: 28px;
  margin-bottom: 14px;
  padding-top: 8px;
}
.body-card{
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px 22px 18px;
  background: #FFFFFF;
  border-top: 1px solid var(--capitol-slate);
  border-bottom: 1px solid rgba(30,48,72,.10);
  margin-top: 14px;
}
/* protruding folder-tab with role */
.body-card .bc-role{
  position: absolute;
  top: -11px; left: 16px;
  margin: 0;
  background: var(--ward-blue);
  color: #FFFFFF;
  padding: 5px 12px 4px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
}
.body-card.slate .bc-role{ background: var(--capitol-slate); }
.body-card.teal .bc-role{ background: var(--rising-teal); color: var(--capitol-slate); }
.body-card.coral .bc-role{ background: var(--dc-coral); }
.body-card.blue .bc-role{ background: var(--ward-blue); }
.bc-num{ display: none; }
.bc-title{
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--capitol-slate); margin: 0 0 8px;
  text-wrap: balance;
}
.bc-desc{
  font-family: var(--font-body); font-weight: 400;
  font-size: 11px; line-height: 1.55;
  color: var(--body-text); margin: 0 0 auto;
}
.bc-meta{
  font-family: var(--font-mono); font-weight: 500;
  font-size: 10.5px; letter-spacing: .02em;
  color: var(--capitol-slate); margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(30,48,72,.10);
}

.insight-strip{
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 28px; align-items: start;
  background: var(--rising-tint);
  padding: 20px 24px;
  margin: 14px 0 12px;
}
.insight-strip strong{
  font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--rising-teal);
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 0;
}
.insight-strip strong::before{
  content: "";
  width: 14px; height: 2px;
  background: currentColor;
}
.insight-strip p{
  font-family: var(--font-body); font-size: 11.5px; line-height: 1.6;
  color: var(--capitol-slate); margin: 0;
}

/* ════════════════════════════════════════════════════════════
   T-VS  — Side-by-side comparison (AP/IB, IEP/504, etc.)
   Two full-height columns + center divider; bottom band for shared facts
   ════════════════════════════════════════════════════════════ */
.t-vs .page-grid{ overflow: hidden; }
.vs-hero{
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 32px; align-items: end;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(30,48,72,.12);
}
.vs-hero .kicker{ grid-column: 1 / -1; margin-bottom: 4px; }
.vs-title{
  font-family: var(--font-display); font-weight: 800;
  font-size: 38px; line-height: 1.04; letter-spacing: -0.025em;
  color: var(--capitol-slate); margin: 0;
}
.vs-title em{ font-style: italic; font-weight: 500; color: var(--ward-blue); }
.vs-deck{
  font-family: var(--font-body); font-weight: 500; font-size: 12.5px;
  line-height: 1.55; color: var(--body-text); margin: 0; max-width: 28em;
}

.vs-grid{
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
  margin-bottom: 16px;
}
.vs-grid::before{
  content: "VS"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; letter-spacing: .04em;
  color: var(--dc-coral);
  background: #fff;
  padding: 8px 14px;
  border: 2px solid var(--dc-coral);
  border-radius: 100px;
  z-index: 2;
}
.vs-side{
  padding: 18px 26px;
  display: flex; flex-direction: column; gap: 10px;
}
.vs-side.left{ border-right: 1px solid rgba(30,48,72,.12); padding-right: 40px; }
.vs-side.right{ padding-left: 40px; }
.vs-label{
  font-family: var(--font-display); font-weight: 800;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dc-coral);
}
.vs-side.right .vs-label{ color: var(--ward-blue); }
.vs-name{
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--capitol-slate);
  margin: 0 0 6px;
}
.vs-tagline{
  font-family: var(--font-body); font-weight: 500;
  font-size: 11.5px; line-height: 1.5;
  color: var(--body-text); margin: 0 0 8px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(30,48,72,.12);
}
.vs-side h4{
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--capitol-slate); margin: 6px 0 4px;
}
.vs-side ul{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.vs-side ul li{
  font-family: var(--font-body); font-size: 10.5px; line-height: 1.5;
  color: var(--capitol-slate); padding-left: 12px; position: relative;
}
.vs-side ul li::before{
  content: ""; position: absolute; left: 0; top: 5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--dc-coral);
}
.vs-side.right ul li::before{ background: var(--ward-blue); }
.vs-side p{
  font-family: var(--font-body); font-size: 10.5px; line-height: 1.5;
  color: var(--body-text); margin: 0;
}

.vs-facts{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--capitol-slate);
  border-bottom: 1px solid rgba(30,48,72,.12);
  margin-bottom: 14px;
}
.vs-fact{
  padding: 14px 18px;
  border-right: 1px solid rgba(30,48,72,.12);
}
.vs-fact:last-child{ border-right: none; }
.vs-fact .vf-label{
  font-family: var(--font-display); font-weight: 800;
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dc-coral); margin: 0 0 4px;
}
.vs-fact .vf-value{
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; line-height: 1.25; color: var(--capitol-slate); margin: 0;
}

/* ════════════════════════════════════════════════════════════
   T-CMP-TABLE — One dominant comparison table page
   For IEP vs 504 — the table IS the page
   ════════════════════════════════════════════════════════════ */
.t-cmp .page-grid{ overflow: hidden; }
.cmp-hero{
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(30,48,72,.12);
}
.cmp-hero .kicker{ grid-column: 1 / -1; margin-bottom: 4px; }
.cmp-title{
  font-family: var(--font-display); font-weight: 800;
  font-size: 36px; line-height: 1.04; letter-spacing: -0.025em;
  color: var(--capitol-slate); margin: 0;
}
.cmp-deck{
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  line-height: 1.55; color: var(--body-text); margin: 0;
}

.cmp-headers{
  display: grid; grid-template-columns: 0.9fr 1.4fr 1.4fr;
  gap: 0;
  background: var(--capitol-slate); color: #fff;
  padding: 0;
}
.cmp-headers > div{
  padding: 14px 20px;
  border-right: 1px solid rgba(255,255,255,.18);
}
.cmp-headers > div:last-child{ border-right: none; }
.cmp-headers .ch-label{
  font-family: var(--font-display); font-weight: 800;
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin: 0 0 4px;
}
.cmp-headers .ch-name{
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; letter-spacing: -0.015em; margin: 0;
}
.cmp-headers .ch-name .ch-tag{
  display: block; font-weight: 500; font-size: 11px;
  color: rgba(255,255,255,.6); letter-spacing: 0; margin-top: 2px;
}

.cmp-row{
  display: grid; grid-template-columns: 0.9fr 1.4fr 1.4fr;
  gap: 0;
  border-bottom: 1px solid rgba(30,48,72,.12);
}
.cmp-row > div{
  padding: 12px 20px;
  border-right: 1px solid rgba(30,48,72,.08);
}
.cmp-row > div:last-child{ border-right: none; }
.cmp-row .cr-feat{
  font-family: var(--font-display); font-weight: 800;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--capitol-slate);
}
.cmp-row .cr-cell{
  font-family: var(--font-body); font-size: 11px; line-height: 1.5;
  color: var(--capitol-slate);
}
.cmp-row.cr-warn{ background: var(--coral-tint); }
.cmp-row.cr-warn > div{ border-color: rgba(212,115,108,.22); }
.cmp-row.cr-warn .cr-feat{ color: var(--dc-coral); }

.cmp-foot{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-top: 16px;
}
.cmp-foot .ed-callout{ margin: 0 !important; }

/* ════════════════════════════════════════════════════════════
   T-OPTIONS — 6-card postsecondary options grid
   ════════════════════════════════════════════════════════════ */
.t-options .page-grid{ overflow: hidden; }
.opt-hero{
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 32px; align-items: end;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(30,48,72,.12);
}
.opt-hero .kicker{ grid-column: 1 / -1; margin-bottom: 4px; }
.opt-title{
  font-family: var(--font-display); font-weight: 800;
  font-size: 36px; line-height: 1.04; letter-spacing: -0.025em;
  color: var(--capitol-slate); margin: 0;
}
.opt-title em{ font-style: italic; font-weight: 500; color: var(--ward-blue); }
.opt-deck{
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  line-height: 1.55; color: var(--body-text); margin: 0;
}

.opt-grid{
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}
.opt-card{
  display: flex; flex-direction: column;
  padding: 16px 16px 14px;
  border: 1px solid var(--border);
  background: #fff;
  position: relative;
}
.opt-card .opt-num{
  font-family: var(--font-display); font-weight: 800;
  font-size: 9px; letter-spacing: .18em; color: var(--dc-coral);
  margin: 0 0 6px;
}
.opt-card .opt-name{
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--capitol-slate); margin: 0 0 6px;
  text-wrap: balance;
}
.opt-card .opt-tag{
  display: inline-block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ward-blue);
  background: var(--ward-tint); padding: 3px 7px;
  align-self: flex-start;
  margin-bottom: 7px;
}
.opt-card ul{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.opt-card ul li{
  font-family: var(--font-body); font-size: 10px; line-height: 1.45;
  color: var(--capitol-slate); padding-left: 10px; position: relative;
}
.opt-card ul li::before{
  content: ""; position: absolute; left: 0; top: 5px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--dc-coral);
}

.opt-card.featured{
  background: var(--capitol-slate); color: #fff;
  border-color: var(--capitol-slate);
}
.opt-card.featured .opt-num{ color: var(--rising-teal); }
.opt-card.featured .opt-name{ color: #fff; }
.opt-card.featured ul li{ color: rgba(255,255,255,.85); }
.opt-card.featured ul li::before{ background: var(--rising-teal); }
.opt-card.featured .opt-tag{ background: rgba(255,255,255,.10); color: var(--rising-teal); }

/* ════════════════════════════════════════════════════════════
   T-TIMELINE — Year-by-year stepped timeline
   ════════════════════════════════════════════════════════════ */
.t-timeline .page-grid{ overflow: hidden; }
.tl-hero{
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 32px; align-items: end;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(30,48,72,.12);
}
.tl-hero .kicker{ grid-column: 1 / -1; margin-bottom: 4px; }
.tl-title{
  font-family: var(--font-display); font-weight: 800;
  font-size: 36px; line-height: 1.04; letter-spacing: -0.025em;
  color: var(--capitol-slate); margin: 0;
}
.tl-title em{ font-style: italic; font-weight: 500; color: var(--ward-blue); }
.tl-deck{
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  line-height: 1.55; color: var(--body-text); margin: 0;
}

/* NOTE: legacy .tl-track / .tl-step / .tl-step::before / .tl-when /
   .tl-head / .tl-body rules previously lived here, but they conflict
   with the modern timeline.css grid layout (left:-32px absolute bullet
   was overlapping the marker labels because timeline.css doesn't
   override `position`). Timeline visuals are now owned exclusively by
   /assets/timeline.css. Don't restore these unless that file is
   deleted. */

/* ════════════════════════════════════════════════════════════
   T-PROCESS — Action-process page (advocacy / requesting)
   Numbered phases on left, supporting cards on right
   ════════════════════════════════════════════════════════════ */
.t-process .page-grid{ overflow: hidden; }
.proc-hero{
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 32px; align-items: end;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(30,48,72,.12);
}
.proc-hero .kicker{ grid-column: 1 / -1; margin-bottom: 4px; }
.proc-title{
  font-family: var(--font-display); font-weight: 800;
  font-size: 36px; line-height: 1.04; letter-spacing: -0.025em;
  color: var(--capitol-slate); margin: 0;
}
.proc-title em{ font-style: italic; font-weight: 500; color: var(--ward-blue); }
.proc-deck{
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  line-height: 1.55; color: var(--body-text); margin: 0;
}

.proc-grid{
  flex: 1; display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
}
.proc-phases{ display: flex; flex-direction: column; gap: 0; }
.proc-phase{
  display: grid; grid-template-columns: 64px 1fr;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(30,48,72,.10);
}
.proc-phase:first-child{ padding-top: 0; }
.proc-phase:last-child{ border-bottom: none; }
.proc-num{
  font-family: var(--font-display); font-weight: 800;
  font-size: 38px; line-height: 0.9; letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--rising-teal) 0%, var(--dc-coral) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proc-content h4{
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; line-height: 1.18; letter-spacing: -0.01em;
  color: var(--capitol-slate); margin: 0 0 5px;
}
.proc-content p{
  font-family: var(--font-body); font-size: 10.5px; line-height: 1.5;
  color: var(--body-text); margin: 0;
}
.proc-content ul{
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 3px;
}
.proc-content ul li{
  font-family: var(--font-body); font-size: 10.5px; line-height: 1.45;
  color: var(--capitol-slate); padding-left: 11px; position: relative;
}
.proc-content ul li::before{
  content: ""; position: absolute; left: 0; top: 5px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--dc-coral);
}

.proc-side{
  display: flex; flex-direction: column; gap: 12px;
}
.proc-card{
  padding: 14px 16px;
  background: var(--ward-tint);
  position: relative;
}
.proc-card::before{
  content: ""; position: absolute;
  top: 0; left: 0; width: 24px; height: 24px;
  background: var(--ward-blue);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.proc-card.coral{ background: var(--coral-tint); }
.proc-card.coral::before{ background: var(--dc-coral); }
.proc-card.teal{ background: var(--rising-tint); }
.proc-card.teal::before{ background: var(--rising-teal); }
.proc-card .pc-label{
  font-family: var(--font-display); font-weight: 800;
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ward-blue); margin: 0 0 5px;
}
.proc-card.coral .pc-label{ color: var(--dc-coral); }
.proc-card.teal .pc-label{ color: var(--rising-teal); }
.proc-card h5{
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; line-height: 1.2; color: var(--capitol-slate);
  margin: 0 0 4px;
}
.proc-card p{
  font-family: var(--font-body); font-size: 10.5px; line-height: 1.5;
  color: var(--capitol-slate); margin: 0;
}
.proc-card ul{
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 3px;
}
.proc-card ul li{
  font-family: var(--font-body); font-size: 10.5px; line-height: 1.45;
  color: var(--capitol-slate); padding-left: 11px; position: relative;
}
.proc-card ul li::before{
  content: ""; position: absolute; left: 0; top: 5px;
  width: 4px; height: 4px; border-radius: 50%; background: currentColor;
  opacity: .55;
}

/* ════════════════════════════════════════════════════════════
   T-SERVICE-CARDS — Three full-height service cards (P14)
   ════════════════════════════════════════════════════════════ */
.t-services .page-grid{ overflow: hidden; }
.svc-hero{
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 32px; align-items: end;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(30,48,72,.12);
}
.svc-hero .kicker{ grid-column: 1 / -1; margin-bottom: 4px; }
.svc-title{
  font-family: var(--font-display); font-weight: 800;
  font-size: 36px; line-height: 1.04; letter-spacing: -0.025em;
  color: var(--capitol-slate); margin: 0;
}
.svc-deck{
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  line-height: 1.55; color: var(--body-text); margin: 0;
}

.svc-grid{
  flex: 1; display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.svc-card{
  display: flex; flex-direction: column;
  padding: 18px 18px 16px;
  border-top: 4px solid var(--ward-blue);
  background: var(--ward-tint);
}
.svc-card.coral{ border-color: var(--dc-coral); background: var(--coral-tint); }
.svc-card.teal{ border-color: var(--rising-teal); background: var(--rising-tint); }
.svc-card .svc-tag{
  font-family: var(--font-display); font-weight: 800;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ward-blue); margin: 0 0 6px;
}
.svc-card.coral .svc-tag{ color: var(--dc-coral); }
.svc-card.teal .svc-tag{ color: var(--rising-teal); }
.svc-card .svc-name{
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--capitol-slate); margin: 0 0 8px;
  text-wrap: balance;
}
.svc-card p{
  font-family: var(--font-body); font-size: 10.5px; line-height: 1.5;
  color: var(--capitol-slate); margin: 0 0 8px;
}
.svc-card .svc-sub{
  font-family: var(--font-display); font-weight: 800;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--capitol-slate); margin: 8px 0 4px;
}
.svc-card ul{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.svc-card ul li{
  font-family: var(--font-body); font-size: 10.5px; line-height: 1.45;
  color: var(--capitol-slate); padding-left: 11px; position: relative;
}
.svc-card ul li::before{
  content: ""; position: absolute; left: 0; top: 5px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ward-blue);
}
.svc-card.coral ul li::before{ background: var(--dc-coral); }
.svc-card.teal ul li::before{ background: var(--rising-teal); }

.svc-strip{
  background: var(--capitol-slate); color: #fff;
  padding: 14px 22px;
  display: grid; grid-template-columns: 110px 1fr;
  gap: 18px; align-items: center;
}
.svc-strip .ss-label{
  font-family: var(--font-display); font-weight: 800;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rising-teal);
}
.svc-strip p{
  font-family: var(--font-body); font-size: 11px; line-height: 1.5;
  color: rgba(255,255,255,.92); margin: 0;
}

/* ════════════════════════════════════════════════════════════
   T-AID — Financial Aid focus page (P17): featured stats + sidebar
   ════════════════════════════════════════════════════════════ */
.t-aid .page-grid{ overflow: hidden; }
.aid-hero{
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 32px; align-items: end;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid rgba(30,48,72,.12);
}
.aid-hero .kicker{ grid-column: 1 / -1; margin-bottom: 4px; }
.aid-title{
  font-family: var(--font-display); font-weight: 800;
  font-size: 36px; line-height: 1.04; letter-spacing: -0.025em;
  color: var(--capitol-slate); margin: 0;
}
.aid-title em{ font-style: italic; font-weight: 500; color: var(--ward-blue); }
.aid-deck{
  font-family: var(--font-body); font-weight: 500; font-size: 12px;
  line-height: 1.55; color: var(--body-text); margin: 0;
}

.aid-grid{
  flex: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 22px;
  margin-bottom: 14px;
}
.aid-feature{
  background: var(--capitol-slate); color: #fff;
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.aid-feat-label{
  font-family: var(--font-display); font-weight: 800;
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--rising-teal); margin: 0;
}
.aid-feat-name{
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1.05; letter-spacing: -0.015em;
  color: #fff; margin: 0;
}
.aid-stats{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding: 12px 0;
}
.aid-stat{ padding: 0 14px; border-right: 1px solid rgba(255,255,255,.18); }
.aid-stat:first-child{ padding-left: 0; }
.aid-stat:last-child{ border-right: none; padding-right: 0; }
.aid-stat .as-num{
  font-family: var(--font-display); font-weight: 800;
  font-size: 28px; line-height: 0.95; letter-spacing: -0.025em;
  color: var(--rising-teal); margin: 0 0 4px;
}
.aid-stat .as-label{
  font-family: var(--font-display); font-weight: 600;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.78); margin: 0;
}
.aid-feat-list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.aid-feat-list li{
  font-family: var(--font-body); font-size: 11px; line-height: 1.5;
  color: rgba(255,255,255,.92);
  padding-left: 14px; position: relative;
}
.aid-feat-list li::before{
  content: ""; position: absolute; left: 0; top: 6px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rising-teal);
}
.aid-meta{
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(255,255,255,.78);
}

.aid-side{ display: flex; flex-direction: column; gap: 16px; }
.aid-block{
  position: relative;
  padding: 12px 0 0;
  border-top: 1px solid rgba(30,48,72,.18);
}
.aid-block::before{
  content: ""; position: absolute;
  left: 0; top: -1px; height: 3px; width: 32px;
  background: var(--ward-blue);
}
.aid-block.coral::before{ background: var(--dc-coral); }
.aid-block.teal::before{ background: var(--rising-teal); }
.aid-block .ab-label{
  font-family: var(--font-display); font-weight: 800;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ward-blue); margin: 0 0 5px;
}
.aid-block.coral .ab-label{ color: var(--dc-coral); }
.aid-block.teal .ab-label{ color: var(--rising-teal); }
.aid-block .ab-name{
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; line-height: 1.18; color: var(--capitol-slate);
  margin: 0 0 5px;
}
.aid-block p{
  font-family: var(--font-body); font-size: 10.5px; line-height: 1.5;
  color: var(--body-text); margin: 0;
}
.aid-block ul{
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 3px;
}
.aid-block ul li{
  font-family: var(--font-body); font-size: 10.5px; line-height: 1.45;
  color: var(--capitol-slate); padding-left: 11px; position: relative;
}
.aid-block ul li::before{
  content: ""; position: absolute; left: 0; top: 5px;
  width: 4px; height: 4px; border-radius: 50%; background: currentColor;
  opacity: .55;
}

.aid-fafsa{
  border-top: 2px solid var(--capitol-slate);
  border-bottom: 1px solid rgba(30,48,72,.18);
  padding: 14px 0;
  display: grid; grid-template-columns: auto 1fr;
  gap: 22px; align-items: start;
}
.aid-fafsa-head .af-label{
  font-family: var(--font-display); font-weight: 800;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dc-coral); margin: 0 0 4px;
}
.aid-fafsa-head .af-name{
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; line-height: 1.1; letter-spacing: -0.015em;
  color: var(--capitol-slate); margin: 0;
  max-width: 8em;
}
.aid-fafsa-head .af-sub{
  font-family: var(--font-body); font-size: 10.5px; line-height: 1.45;
  color: var(--body-text); margin: 6px 0 0;
}
.aid-fafsa-changes{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 22px;
  font-family: var(--font-body); font-size: 10.5px; line-height: 1.45;
  color: var(--capitol-slate);
}
.aid-fafsa-changes div{ display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.aid-fafsa-changes div::before{
  content: counter(fc-counter); counter-increment: fc-counter;
  font-family: var(--font-display); font-weight: 800;
  font-size: 10px; color: var(--dc-coral); width: 18px;
}
.aid-fafsa-changes{ counter-reset: fc-counter; }

/* ════════════════════════════════════════════════════════════
   PAGE TEXTURE — subtle brand-color washes + paper grain
   Adds depth to white pages without overwhelming content.
   ════════════════════════════════════════════════════════════ */
section.page:not(.t-cover):not(.t-opener){
  background:
    radial-gradient(60% 45% at 100% 0%, rgba(124,197,217,.08) 0%, rgba(124,197,217,0) 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(212,115,108,.06) 0%, rgba(212,115,108,0) 60%),
    #FFFFFF !important;
  background-color: #FFFFFF !important;
  position: relative;
}
section.page:not(.t-cover):not(.t-opener)::before{
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(30,48,72,.025) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}
section.page:not(.t-cover):not(.t-opener) .page-grid{
  z-index: 1;
}

/* Replace the old corner star marker with a more polished mark */
.page:not(.t-cover):not(.t-section):not(.t-closing)::after{
  content: "";
  position: absolute;
  right: 0.5in; bottom: 0.32in;
  width: 32px; height: 4px;
  background: linear-gradient(90deg, var(--rising-teal) 0%, var(--dc-coral) 100%);
  pointer-events: none;
  opacity: .7;
  z-index: 1;
}

/* Auto-paginator: skip these custom layouts (they're sized to fit) */
.t-feature-grid .ed-body,
.t-vs .ed-body,
.t-cmp .ed-body,
.t-options .ed-body,
.t-timeline .ed-body,
.t-process .ed-body,
.t-services .ed-body,
.t-aid .ed-body{ display: none !important; }

/* ════════════════════════════════════════════════════════════
   EDITORIAL DEVICES — LinkedIn-inspired but on-brand
   ════════════════════════════════════════════════════════════ */

/* Insight badge: pill anchored at the right of the page-head row.
   Center it on the gradient rule so it never overlaps the rule's tail. */
.insight-badge{
  position: absolute;
  top: calc(0.5in + 11px); /* page-head row center (≈22px tall) */
  right: 0.5in;
  transform: translateY(-50%);
  background: var(--ward-blue);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: .12em;
  padding: 5px 12px 4px;
  border-radius: 100px;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 5;
}

/* Stat block — large figure, label, source — LinkedIn style */
.li-stat{
  padding: 0 0 12px;
  margin: 0 0 12px;
  border-bottom: 1px solid rgba(30,48,72,.14);
}
.li-stat:last-child{ border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.li-stat .ls-pre{
  font-family: var(--font-body);
  font-weight: 600; font-size: 11px;
  color: var(--capitol-slate);
  margin: 0 0 4px;
}
.li-stat .ls-num{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px; line-height: 1;
  color: var(--ward-blue);
  letter-spacing: -0.028em;
  display: inline-block;
  margin-right: 6px;
}
.li-stat .ls-num-label{
  font-family: var(--font-display);
  font-weight: 700; font-size: 13px;
  color: var(--capitol-slate);
  letter-spacing: -0.005em;
}
.li-stat .ls-text{
  font-family: var(--font-body);
  font-size: 11px; line-height: 1.5;
  color: var(--capitol-slate);
  margin: 4px 0 0;
}
.li-stat .ls-source{
  display: block;
  font-family: var(--font-body);
  font-size: 8.5px;
  color: var(--muted);
  margin-top: 5px;
  letter-spacing: .01em;
}

/* "Why it matters" / "What's changing" — tinted box with chip label */
.li-card{
  background: var(--rising-tint);
  padding: 16px 20px 14px;
  margin: 12px 0;
  position: relative;
}
.li-card.coral{ background: var(--coral-tint); }
.li-card.ward{ background: var(--ward-tint); }
.li-card .lc-label{
  display: inline-block;
  background: var(--ward-blue);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: none;
  padding: 5px 11px 4px;
  border-radius: 100px;
  margin-bottom: 10px;
}
.li-card.coral .lc-label{ background: var(--dc-coral); }
.li-card.teal .lc-label{ background: var(--rising-teal); color: var(--capitol-slate); }
.li-card ul{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.li-card ul li{
  font-family: var(--font-body);
  font-size: 11px; line-height: 1.5;
  color: var(--capitol-slate);
  padding-left: 14px; position: relative;
}
.li-card ul li::before{
  content: "·";
  position: absolute; left: 4px; top: -1px;
  color: var(--ward-blue);
  font-weight: 800; font-size: 16px;
  line-height: 1;
}
.li-card.coral ul li::before{ color: var(--dc-coral); }
.li-card.teal ul li::before{ color: var(--rising-teal); }
.li-card p{
  font-family: var(--font-body);
  font-size: 11px; line-height: 1.55;
  color: var(--capitol-slate); margin: 0 0 6px;
}

/* From/To shift rows — replace lifeless lists with vector flow */
.shifts{
  display: flex; flex-direction: column;
  margin: 4px 0;
}
.shift-row{
  display: grid;
  grid-template-columns: 1fr 22px auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(30,48,72,.10);
}
.shift-row:last-child{ border-bottom: none; }
.shift-row .from{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  color: var(--body-text);
}
.shift-row .arrow{
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  color: var(--ward-blue);
  font-size: 16px;
  line-height: 1;
}
.shift-row .to{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--capitol-slate);
  background: var(--rising-tint);
  padding: 5px 11px;
  white-space: nowrap;
}

/* Takeaway line — full-width gradient rule with a calmer body weight.
   The default is 500 (regular-display weight) so only <strong> and <em>
   pop; previously the whole line was 700-bold which read as a "shouted"
   conclusion. Stretches edge-to-edge of the content area. */
.takeaway{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--capitol-slate);
  margin: 14px 0 0;
  padding-top: 14px;
  position: relative;
  width: 100%;
  display: block;
}
.takeaway::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rising-teal) 0%, var(--ward-blue) 50%, var(--dc-coral) 100%);
}
.takeaway em{ font-style: italic; font-weight: 600; color: var(--ward-blue); }
.takeaway strong{ color: var(--dc-coral); font-weight: 800; font-style: normal; }

/* Supplemental docs: cover without the photo. Each doc gets a different
   brand-color gradient so the family of covers reads as a coordinated set
   rather than one repeating template. */
.t-cover.no-photo{
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(124,197,217,.32) 0%, rgba(124,197,217,0) 60%),
    radial-gradient(110% 70% at 0% 100%, rgba(212,115,108,.28) 0%, rgba(212,115,108,0) 60%),
    linear-gradient(160deg, var(--capitol-slate) 0%, #234A78 45%, var(--ward-blue) 100%) !important;
}
.t-cover.no-photo::after{ opacity: .8 !important; }

/* Supplemental covers: center the title block on the page so titles
   like "Your Journey." or "Cuadros / Comparativos" read symmetric and
   never crowd the right edge. The flagship cover (bare .t-cover) is
   left-aligned over its photo and stays untouched. */
.t-cover.no-photo .cover-body{ align-items: center !important; text-align: center; }
.t-cover.no-photo .cover-title{ text-align: center !important; }
.t-cover.no-photo .cover-deck{ margin-left: auto !important; margin-right: auto !important; text-align: center; max-width: 32em !important; }
.t-cover.no-photo .ct-line{ text-align: center; }
/* Slightly safer ceiling on ct-big so longer Spanish titles
   ("Trayectorias", "Aplicación", "Comparativos") don't clip. */
.t-cover.no-photo .ct-big{ font-size: 88px !important; letter-spacing: -0.035em !important; }
.t-cover.no-photo .ct-mid{ font-size: 50px !important; }
.t-cover.no-photo .ct-small{ font-size: 40px !important; }

/* All four supplemental variants share the same dark slate→ward-blue
   base (the V8 brand cover) and the dotted texture overlay. They only
   differ in WHICH brand accent (teal vs coral) sits in WHICH corner,
   and how strong the wash is. The result reads as one family of covers
   — light/dark variations of the same dark-blue surface — instead of
   four different colored backgrounds. */

/* Coral-led: stronger coral wash bottom-left, faint teal hint top-right */
.t-cover.no-photo.cover-coral{
  background:
    radial-gradient(110% 60% at 100% 0%, rgba(124,197,217,.16) 0%, rgba(124,197,217,0) 55%),
    radial-gradient(120% 80% at 0% 100%, rgba(212,115,108,.34) 0%, rgba(212,115,108,0) 60%),
    linear-gradient(160deg, var(--capitol-slate) 0%, #234A78 45%, var(--ward-blue) 100%) !important;
}
.t-cover.no-photo.cover-coral .ct-big em,
.t-cover.no-photo.cover-coral .cv-num{ color: var(--rising-teal); }

/* Teal-led: stronger teal wash top-right, faint coral hint bottom-left */
.t-cover.no-photo.cover-teal{
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(124,197,217,.36) 0%, rgba(124,197,217,0) 60%),
    radial-gradient(110% 70% at 0% 100%, rgba(212,115,108,.18) 0%, rgba(212,115,108,0) 55%),
    linear-gradient(160deg, var(--capitol-slate) 0%, #234A78 45%, var(--ward-blue) 100%) !important;
}
.t-cover.no-photo.cover-teal .ct-big em,
.t-cover.no-photo.cover-teal .cv-num{ color: var(--rising-teal); }

/* Blue-led: balanced washes both corners — the "neutral" of the family */
.t-cover.no-photo.cover-blue{
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(124,197,217,.24) 0%, rgba(124,197,217,0) 60%),
    radial-gradient(110% 70% at 0% 100%, rgba(212,115,108,.20) 0%, rgba(212,115,108,0) 55%),
    linear-gradient(160deg, var(--capitol-slate) 0%, #234A78 45%, var(--ward-blue) 100%) !important;
}
.t-cover.no-photo.cover-blue .ct-big em,
.t-cover.no-photo.cover-blue .cv-num{ color: var(--rising-teal); }

/* Slate-led: deeper base (closer to capitol-slate end-to-end), softest accents */
.t-cover.no-photo.cover-slate{
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(124,197,217,.16) 0%, rgba(124,197,217,0) 55%),
    radial-gradient(110% 70% at 0% 100%, rgba(212,115,108,.18) 0%, rgba(212,115,108,0) 55%),
    linear-gradient(160deg, #0F1A2A 0%, var(--capitol-slate) 50%, var(--potomac) 100%) !important;
}
.t-cover.no-photo.cover-slate .ct-big em,
.t-cover.no-photo.cover-slate .cv-num{ color: var(--dc-coral); }


/* Compact-fit mode: applied by auto-paginate.js when overflow is moderate. */
.t-editorial.compact-fit .ed-hero{ padding-bottom: 10px !important; margin-bottom: 12px !important; }
.t-editorial.compact-fit .ed-hero .ed-title{ font-size: 32px !important; }
.t-editorial.compact-fit .ed-col{ gap: 6px !important; }
.t-editorial.compact-fit .ed-col p{ line-height: 1.5 !important; }
.t-editorial.compact-fit .col-head{ margin: 8px 0 4px !important; padding-bottom: 3px !important; }
.t-editorial.compact-fit .col-sub{ margin: 6px 0 2px !important; }
.t-editorial.compact-fit .ed-list{ gap: 3px !important; margin: 3px 0 !important; }
.t-editorial.compact-fit .step-list{ gap: 3px !important; margin: 3px 0 !important; }
.t-editorial.compact-fit .check-list{ gap: 3px !important; margin: 3px 0 !important; }
.t-editorial.compact-fit .ed-table{ margin: 3px 0 !important; }
.t-editorial.compact-fit .ed-table th{ padding: 4px 7px !important; }
.t-editorial.compact-fit .ed-table td{ padding: 4px 7px !important; }
.t-editorial.compact-fit .ed-callout{ padding: 9px 13px !important; margin: 5px 0 !important; }
.t-editorial.compact-fit .glos-term{ margin: 0 0 6px !important; }

/* Ultra-compact mode: fallback when a continuation would be too sparse.
   Tighter than compact-fit; tries to squeeze a near-fit single page. */
.t-editorial.ultra-compact .ed-hero{ padding-bottom: 8px !important; margin-bottom: 10px !important; }
.t-editorial.ultra-compact .ed-hero .ed-title{ font-size: 28px !important; line-height: 1.02 !important; }
.t-editorial.ultra-compact .ed-hero .ed-deck{ font-size: 11px !important; line-height: 1.45 !important; }
.t-editorial.ultra-compact .ed-col{ gap: 5px !important; }
.t-editorial.ultra-compact .ed-col p{ font-size: 10.5px !important; line-height: 1.5 !important; }
.t-editorial.ultra-compact .col-head{ font-size: 11.5px !important; margin: 7px 0 3px !important; padding-bottom: 3px !important; }
.t-editorial.ultra-compact .col-sub{ font-size: 9.5px !important; margin: 5px 0 2px !important; }
.t-editorial.ultra-compact .ed-list{ gap: 2px !important; margin: 2px 0 !important; }
.t-editorial.ultra-compact .ed-list li{ font-size: 10px !important; line-height: 1.4 !important; }
.t-editorial.ultra-compact .step-list{ gap: 3px !important; margin: 2px 0 !important; }
.t-editorial.ultra-compact .step-list li{ font-size: 10px !important; line-height: 1.4 !important; }
.t-editorial.ultra-compact .check-list{ gap: 2px !important; margin: 2px 0 !important; }
.t-editorial.ultra-compact .check-list li{ font-size: 10px !important; line-height: 1.4 !important; }
.t-editorial.ultra-compact .ed-table{ font-size: 9.5px !important; margin: 3px 0 !important; }
.t-editorial.ultra-compact .ed-table th{ padding: 3px 6px !important; font-size: 8.5px !important; }
.t-editorial.ultra-compact .ed-table td{ padding: 3px 6px !important; line-height: 1.35 !important; }
.t-editorial.ultra-compact .ed-callout{ padding: 8px 12px !important; margin: 4px 0 !important; font-size: 10px !important; }
.t-editorial.ultra-compact .ed-callout strong{ font-size: 8.5px !important; padding-bottom: 7px !important; margin-bottom: 7px !important; }
.t-editorial.ultra-compact .glos-term{ margin: 0 0 5px !important; }
.t-editorial.ultra-compact .glos-term dt{ font-size: 10px !important; }
.t-editorial.ultra-compact .glos-term dd{ font-size: 9.5px !important; line-height: 1.4 !important; }
.t-editorial.ultra-compact .page-head{ margin-bottom: 12px !important; }

/* ════════════════════════════════════════════════════════════
   Spanish-specific compaction
   Spanish copy averages 10-15% longer than the English source
   per word-count, which made several flagship-guide pages clip
   the takeaway / footer when re-translated. This block tightens
   font-size / line-height / gaps on the page templates that are
   most prone to overflow (t-editorial, t-vs, t-profile,
   t-framework, t-feature-grid). Affects only html[lang="es"]
   docs so the English layouts stay as approved.
   ════════════════════════════════════════════════════════════ */
html[lang="es"] .ed-col p{ font-size: 12px !important; line-height: 1.5 !important; }
html[lang="es"] .ed-col{ gap: 5px !important; }
html[lang="es"] .ed-list li,
html[lang="es"] .step-list li,
html[lang="es"] .check-list li{ font-size: 10.5px !important; line-height: 1.45 !important; }
html[lang="es"] .col-head{ font-size: 12.5px !important; margin: 10px 0 4px !important; padding-bottom: 4px !important; }
html[lang="es"] .col-sub{ font-size: 10px !important; margin: 7px 0 2px !important; }
html[lang="es"] .ed-table{ font-size: 10.5px !important; }
html[lang="es"] .ed-table th{ padding: 5px 8px !important; font-size: 8.5px !important; }
html[lang="es"] .ed-table td{ padding: 5px 8px !important; line-height: 1.4 !important; }
html[lang="es"] .ed-callout{ padding: 11px 14px !important; margin: 6px 0 !important; font-size: 10.5px !important; }
html[lang="es"] .ed-callout strong{ font-size: 9px !important; padding-bottom: 8px !important; margin-bottom: 8px !important; }
html[lang="es"] .ed-hero{ padding-bottom: 8px !important; margin-bottom: 10px !important; }
html[lang="es"] .ed-title{ font-size: 30px !important; line-height: 1.02 !important; margin-bottom: 6px !important; }
html[lang="es"] .ed-deck{ font-size: 12px !important; line-height: 1.45 !important; }
html[lang="es"] .takeaway{ font-size: 13px !important; padding-top: 10px !important; margin-top: 10px !important; }
/* Drop-cap (.ed-col p.drop) is huge in EN — Spanish gets a smaller cap so
   the first paragraph doesn't eat half the column. */
html[lang="es"] .ed-col p.drop::first-letter{ font-size: 38px !important; }

/* t-vs (AP vs IB and similar comparison pages) */
html[lang="es"] .t-vs .vs-col p{ font-size: 12px !important; line-height: 1.5 !important; }
html[lang="es"] .t-vs .vs-col h3,
html[lang="es"] .t-vs .vs-col h4{ margin-bottom: 6px !important; }
html[lang="es"] .t-vs .vs-list li{ font-size: 10.5px !important; line-height: 1.4 !important; }
html[lang="es"] .t-vs .vs-foot{ font-size: 11px !important; padding: 12px 14px !important; }

/* t-profile (Q&A pages like "Las preguntas correctas") */
html[lang="es"] .t-profile .qna .q{ font-size: 13px !important; margin-bottom: 5px !important; }
html[lang="es"] .t-profile .qna .a{ font-size: 12.5px !important; line-height: 1.5 !important; }
html[lang="es"] .t-profile .profile-body .qna{ padding: 13px 0 !important; }
html[lang="es"] .t-profile .profile-title{ font-size: 44px !important; line-height: 1.02 !important; margin-bottom: 12px !important; }

/* t-framework (year-by-year planning, comparing pathways) */
html[lang="es"] .t-framework .step-desc{ font-size: 11.5px !important; line-height: 1.5 !important; }
html[lang="es"] .t-framework .fw-step{ padding: 10px 12px !important; }

/* t-feature-grid */
html[lang="es"] .t-feature-grid .feat-card p{ font-size: 11px !important; line-height: 1.45 !important; }

/* t-aid (financial aid page — heavy w/ aid types + footnotes) */
html[lang="es"] .t-aid .aid-row p,
html[lang="es"] .t-aid .aid-card p{ font-size: 11.5px !important; line-height: 1.5 !important; }
html[lang="es"] .t-aid .aid-card{ padding: 12px 14px !important; }
html[lang="es"] .t-aid .aid-row{ padding: 8px 0 !important; }

/* t-cmp (side-by-side comparison like IEP/504) */
html[lang="es"] .t-cmp .cmp-col p,
html[lang="es"] .t-cmp .cmp-col li{ font-size: 11.5px !important; line-height: 1.5 !important; }
html[lang="es"] .t-cmp .cmp-row{ padding: 8px 0 !important; }
html[lang="es"] .t-cmp .cmp-head h3{ font-size: 18px !important; }

/* t-options (postsecondary options grid) */
html[lang="es"] .t-options .option-card p,
html[lang="es"] .t-options .option-card li{ font-size: 11px !important; line-height: 1.45 !important; }
html[lang="es"] .t-options .option-card{ padding: 12px 14px !important; gap: 6px !important; }

/* t-closing (final resource directory — many entries) */
html[lang="es"] .t-closing .res-entry{ padding: 7px 0 !important; }
html[lang="es"] .t-closing .res-entry p,
html[lang="es"] .t-closing .res-entry .res-desc{ font-size: 11px !important; line-height: 1.45 !important; }

/* t-data (stat cards — Spanish "Requisitos de Graduación" labels run long) */
html[lang="es"] .t-data .datum-desc{ font-size: 11.5px !important; line-height: 1.4 !important; }
html[lang="es"] .t-data .datum-label{ font-size: 9px !important; padding: 4px 9px !important; }

/* t-contents (TOC page) — Spanish section names like "Preparación para la
   Universidad y la Carrera" wrap to 3 lines and the 8-row TOC overflows the
   page. Tighten the hero title, deck, and per-row sizing so all 8 rows
   fit cleanly with their descriptions and page numbers. */
html[lang="es"] .t-contents .contents-hero{ margin-bottom: 18px !important; }
html[lang="es"] .t-contents .contents-hero .page-title{ font-size: 50px !important; line-height: 1.02 !important; }
html[lang="es"] .t-contents .contents-hero .page-deck{ font-size: 14px !important; line-height: 1.5 !important; }
html[lang="es"] .t-contents .toc-row{ padding: 11px 0 !important; }
html[lang="es"] .t-contents .toc-name{ font-size: 16px !important; line-height: 1.18 !important; }
html[lang="es"] .t-contents .toc-desc{ font-size: 11.5px !important; line-height: 1.4 !important; }
html[lang="es"] .t-contents .toc-num{ font-size: 12px !important; }
html[lang="es"] .t-contents .toc-page{ font-size: 10.5px !important; }

/* t-opener (section opener pages — "Sección Tres", "AP·IB·CTE·Inscripción
   Dual", etc.). Spanish phrases like "Inscripción Dual" / "Preparación
   Universitaria" / "Trayectorias Académicas" overflow at the EN 96px
   size; drop to 76px so single lines stay inside the 7.5in content
   width. Center-align the whole stack so it never reads off-balance. */
html[lang="es"] .t-opener .opener-title{
  font-size: 76px !important;
  line-height: 0.96 !important;
  letter-spacing: -0.04em !important;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
html[lang="es"] .t-opener .opener-deck{ font-size: 14.5px !important; line-height: 1.55 !important; }
html[lang="es"] .t-opener .meta-cell .v{ font-size: 12px !important; line-height: 1.4 !important; }

/* ════════════════════════════════════════════════════════════
   v25 — Spanish flagship cover. The HTML splits the title into
   "La Guía de" (ct-small) / "Trayectorias" (ct-big) /
   "Educativas" (ct-big) / "de DC." (ct-mid) so each glyph row
   fits the 7.5in content area. Drop ct-big a notch so neither
   "Trayectorias" (12 glyphs) nor "Educativas" (10) ever clips.
   ──────────────────────────────────────────────────────────── */
html[lang="es"] .t-cover:not(.no-photo) .ct-big{
  font-size: 84px !important;
  line-height: 0.96 !important;
  letter-spacing: -0.04em !important;
  text-wrap: balance;
  overflow-wrap: break-word;
}
html[lang="es"] .t-cover:not(.no-photo) .ct-small{ font-size: 38px !important; line-height: 1.0 !important; }
html[lang="es"] .t-cover:not(.no-photo) .ct-mid{ font-size: 46px !important; line-height: 1.0 !important; }
html[lang="es"] .t-cover:not(.no-photo) .cover-deck{ font-size: 13px !important; line-height: 1.55 !important; }

/* No-photo supplemental cover (At-A-Glance, etc.) — Spanish
   Una página · Todo lo / esencial · en un vistazo.
   "esencial" italic at 88px is fine; "vistazo" at 50px ok.
   Reduce slightly to keep the bottom volume row visible. */
html[lang="es"] .t-cover.no-photo .ct-big{ font-size: 80px !important; line-height: 0.96 !important; }
html[lang="es"] .t-cover.no-photo .ct-mid{ font-size: 46px !important; }
html[lang="es"] .t-cover.no-photo .ct-small{ font-size: 36px !important; }

/* The Spanish Published-By value "Junta de Educación del
   Estado de DC" runs longer than the EN equivalent and pushes
   into the volume number; drop one notch and allow wrap. */
html[lang="es"] .t-cover .cv-value{ font-size: 12px !important; line-height: 1.3 !important; }
html[lang="es"] .t-cover .cv-label{ font-size: 9px !important; }

/* ════════════════════════════════════════════════════════════
   v25 — t-aid (financial aid) Spanish overflow
   "Beca de Asistencia de Matrícula de DC (DC TAG)" wraps to
   3 lines and "Programa de Acceso Universitario de DC (DC-CAP)"
   pushes the aid-side card past its column. Tighten heading
   sizes and let everything wrap inside the column.
   ──────────────────────────────────────────────────────────── */
html[lang="es"] .t-aid .aid-feat-name{ font-size: 22px !important; line-height: 1.1 !important; }
html[lang="es"] .t-aid .aid-feat-label{ font-size: 9.5px !important; letter-spacing: .14em !important; }
html[lang="es"] .t-aid .aid-feat-list li{ font-size: 11px !important; line-height: 1.45 !important; }
html[lang="es"] .t-aid .aid-block .ab-name{ font-size: 13px !important; line-height: 1.18 !important; }
html[lang="es"] .t-aid .aid-block .ab-label{ font-size: 9px !important; letter-spacing: .14em !important; }
html[lang="es"] .t-aid .aid-block ul li{ font-size: 11px !important; line-height: 1.45 !important; }
html[lang="es"] .t-aid .aid-block p{ font-size: 11px !important; line-height: 1.5 !important; }
html[lang="es"] .t-aid .aid-stats .as-num{ font-size: 24px !important; }
html[lang="es"] .t-aid .aid-stats .as-label{ font-size: 9px !important; line-height: 1.3 !important; }
html[lang="es"] .t-aid .aid-meta{ font-size: 10px !important; }
html[lang="es"] .t-aid .aid-fafsa-head .af-name{ font-size: 17px !important; }
html[lang="es"] .t-aid .aid-fafsa-head .af-label{ font-size: 9px !important; }
html[lang="es"] .t-aid .aid-fafsa-head .af-sub{ font-size: 11px !important; }
html[lang="es"] .t-aid .shifts .shift-row{ padding: 8px 0 !important; }
html[lang="es"] .t-aid .shifts .from{ font-size: 10px !important; line-height: 1.4 !important; }
html[lang="es"] .t-aid .shifts .to{ font-size: 10.5px !important; line-height: 1.3 !important; padding: 4px 9px !important; }

/* ════════════════════════════════════════════════════════════
   v25 — t-options (postsecondary) Spanish "Capacitación
   Técnica y Profesional" / "Universidad Comunitaria de Dos
   Años" overflow the card name. Tighten title and tag.
   ──────────────────────────────────────────────────────────── */
html[lang="es"] .t-options .opt-name{ font-size: 16px !important; line-height: 1.15 !important; }
html[lang="es"] .t-options .opt-tag{ font-size: 9.5px !important; }
html[lang="es"] .t-options .opt-num{ font-size: 9px !important; }

/* ════════════════════════════════════════════════════════════
   v25 — t-profile Spanish: profile-figure inner sup blocks
   carry a lot of bullet text in Spanish ("Tercer miércoles
   de cada mes …" etc.). Tighten line-height + bullet sizes.
   ──────────────────────────────────────────────────────────── */
html[lang="es"] .t-profile .profile-figure .ed-list li{ font-size: 10px !important; line-height: 1.4 !important; }
html[lang="es"] .t-profile .profile-figure .step-list li{ font-size: 10px !important; line-height: 1.4 !important; }
html[lang="es"] .t-profile .profile-figure p{ font-size: 10.5px !important; line-height: 1.5 !important; }

/* ════════════════════════════════════════════════════════════
   v25 — Glossary (t-editorial w/ glos-term dl) Spanish:
   ES dt labels run long ("CCR (Preparación para la Universidad
   y la Carrera)") — must wrap inside their column.
   ──────────────────────────────────────────────────────────── */
html[lang="es"] .glos-term dt{ font-size: 10.5px !important; line-height: 1.25 !important; word-break: break-word; }
html[lang="es"] .glos-term dd{ font-size: 10.5px !important; line-height: 1.45 !important; margin-bottom: 6px; }
html[lang="es"] .glos-term{ margin: 0 0 8px !important; }

/* ════════════════════════════════════════════════════════════
   v25 — Closing directory: ES strings like "Junta de Escuelas
   Charter Públicas de DC" and "Programa de Acceso Universitario
   de DC (DC-CAP)" need wrapping inside their narrow column.
   ──────────────────────────────────────────────────────────── */
html[lang="es"] .t-closing .cp-label{ font-size: 9.5px !important; line-height: 1.3 !important; letter-spacing: .14em !important; }
html[lang="es"] .t-closing .cp-value{ font-size: 11px !important; line-height: 1.45 !important; word-break: break-word; }
html[lang="es"] .t-closing .close-line{ font-size: 19px !important; line-height: 1.35 !important; }

/* ════════════════════════════════════════════════════════════
   v25 — t-feature-grid (Governance, p4) ES body-card title
   "Escuelas Públicas del Distrito de Columbia" / "Junta de
   Escuelas Charter Públicas de DC" run 3 lines at EN size.
   ──────────────────────────────────────────────────────────── */
html[lang="es"] .t-feature-grid .body-card .bc-title{ font-size: 14px !important; line-height: 1.15 !important; }
html[lang="es"] .t-feature-grid .body-card .bc-desc{ font-size: 10.5px !important; line-height: 1.45 !important; }
html[lang="es"] .t-feature-grid .body-card .bc-meta{ font-size: 9.5px !important; line-height: 1.4 !important; }
html[lang="es"] .t-feature-grid .body-card .bc-role{ font-size: 9px !important; }
html[lang="es"] .t-feature-grid .feat-title{ font-size: 36px !important; line-height: 1.04 !important; }
html[lang="es"] .t-feature-grid .feat-deck{ font-size: 13px !important; line-height: 1.55 !important; }
html[lang="es"] .t-feature-grid .insight-strip p{ font-size: 11.5px !important; line-height: 1.5 !important; }
html[lang="es"] .t-feature-grid .insight-strip strong{ font-size: 9.5px !important; }

/* ════════════════════════════════════════════════════════════
   v25 — t-cmp (IEP vs 504, p13) ES cell text overflow.
   "Una de las 13 categorías de discapacidad de IDEA …" wraps
   long — make sure cmp cells wrap, not push column.
   ──────────────────────────────────────────────────────────── */
html[lang="es"] .t-cmp .cr-cell{ font-size: 11px !important; line-height: 1.45 !important; word-break: break-word; }
html[lang="es"] .t-cmp .cr-feat{ font-size: 10.5px !important; line-height: 1.25 !important; }
html[lang="es"] .t-cmp .cmp-row{ padding: 7px 0 !important; }
html[lang="es"] .t-cmp .cmp-title{ font-size: 36px !important; line-height: 1.04 !important; }
html[lang="es"] .t-cmp .cmp-deck{ font-size: 13px !important; line-height: 1.55 !important; }
html[lang="es"] .t-cmp .ch-name{ font-size: 16px !important; line-height: 1.2 !important; }
html[lang="es"] .t-cmp .ch-tag{ font-size: 9.5px !important; line-height: 1.25 !important; }
html[lang="es"] .t-cmp .ch-label{ font-size: 9px !important; }
html[lang="es"] .t-cmp .cmp-foot .ed-callout{ font-size: 10.5px !important; padding: 10px 13px !important; }
html[lang="es"] .t-cmp .cmp-foot .ed-callout strong{ font-size: 9px !important; }

/* ════════════════════════════════════════════════════════════
   v25 — t-vs (AP vs IB, p9) ES — bullets and tagline tighten.
   ──────────────────────────────────────────────────────────── */
html[lang="es"] .t-vs .vs-tagline{ font-size: 11.5px !important; line-height: 1.5 !important; }
html[lang="es"] .t-vs .vs-name{ font-size: 17px !important; line-height: 1.18 !important; }
html[lang="es"] .t-vs .vs-side ul li{ font-size: 10.5px !important; line-height: 1.45 !important; }
html[lang="es"] .t-vs .vs-side h4{ font-size: 11px !important; }
html[lang="es"] .t-vs .vs-fact .vf-value{ font-size: 11px !important; line-height: 1.4 !important; }
html[lang="es"] .t-vs .vs-fact .vf-label{ font-size: 9px !important; }
html[lang="es"] .t-vs .vs-title{ font-size: 36px !important; line-height: 1.04 !important; }
html[lang="es"] .t-vs .vs-deck{ font-size: 13px !important; line-height: 1.55 !important; }

/* ════════════════════════════════════════════════════════════
   v25 — Insight-badge: longer ES labels ("Perspectiva 10")
   need a hair more padding-right reserved on the page-head.
   ──────────────────────────────────────────────────────────── */
html[lang="es"] .page:has(> .insight-badge) .page-head{ padding-right: 165px !important; }
html[lang="es"] .insight-badge{ font-size: 9px !important; padding: 4px 11px 3px !important; letter-spacing: .1em !important; }

/* ════════════════════════════════════════════════════════════
   v25 — Universal: prevent any ed-table from pushing past its
   column. table-layout: fixed wraps long cells instead of
   forcing horizontal scroll/overflow.
   ──────────────────────────────────────────────────────────── */
.ed-table{ table-layout: fixed !important; word-wrap: break-word; }
.ed-table td, .ed-table th{ word-break: break-word; }

/* Universal: ed-callout strong allow wrap on long ES labels */
.ed-callout strong{ flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════
   v26 — ES Pathways Guide overflow refinements
   Per-template tightening so every Spanish page lands inside
   the 7.5 × 10in safe area without clipping the takeaway,
   footer, or last cell — but without leaving sparse voids.
   Scoped per template so EN layouts are untouched.
   ──────────────────────────────────────────────────────────── */

/* P02 t-contents — 8 TOC rows + hero need to clear page-foot.
   ES "Preparación para la Universidad y la Carrera" wraps to 2
   lines. Tighten row padding + hero margin so all 8 rows fit. */
html[lang="es"] .t-contents .contents-hero{ margin-bottom: 14px !important; padding-bottom: 12px !important; }
html[lang="es"] .t-contents .contents-hero .page-title{ font-size: 46px !important; margin-bottom: 8px !important; }
html[lang="es"] .t-contents .toc-row{ padding: 9px 0 !important; }
html[lang="es"] .t-contents .toc-name{ font-size: 15.5px !important; line-height: 1.16 !important; }
html[lang="es"] .t-contents .toc-desc{ font-size: 11px !important; line-height: 1.35 !important; }

/* P03/P08/P12/P15/P19 t-opener — Spanish phrases like
   "Preparación para la Universidad y la Carrera" can still
   wrap awkwardly at 76px. Drop another notch on the openers
   that carry long titles, and stretch the meta row's bottom
   alignment so a short title doesn't leave a sparse middle. */
html[lang="es"] .t-opener .opener-title{ font-size: 70px !important; line-height: 0.96 !important; margin-bottom: 22px !important; }
html[lang="es"] .t-opener .opener-stack{ max-width: 84% !important; }
html[lang="es"] .t-opener .opener-meta{ padding-top: 16px !important; }
html[lang="es"] .t-opener .meta-cell .v{ font-size: 11.5px !important; line-height: 1.35 !important; }
html[lang="es"] .t-opener .meta-cell .k{ font-size: 9px !important; }

/* P05 t-data — 4 stat cards: ES datum-desc runs 3 lines while
   EN stays at 2, making cards visibly uneven. Force stretched
   row heights and trim the giant figure so the callout + foot
   always fit. */
html[lang="es"] .t-data .data-grid{ align-items: stretch !important; row-gap: 16px !important; }
html[lang="es"] .t-data .datum{ padding-top: 12px !important; gap: 7px !important; }
html[lang="es"] .t-data .datum-figure .num{ font-size: 52px !important; line-height: 0.95 !important; }
html[lang="es"] .t-data .datum-figure .num .sym{ font-size: 32px !important; }
html[lang="es"] .t-data .datum-desc{ font-size: 11px !important; line-height: 1.4 !important; }
html[lang="es"] .t-data .datum-src{ font-size: 9px !important; }
html[lang="es"] .t-data .data-callout{ padding: 14px 18px !important; margin-top: 16px !important; }
html[lang="es"] .t-data .data-callout p{ font-size: 13px !important; line-height: 1.4 !important; }

/* P09 t-vs — vs-facts row 3 carries the long ES Ombudsman
   warning. Tighten the fact value line-height + makes vs-side
   gap calmer so AP/IB columns + facts + takeaway + foot fit. */
html[lang="es"] .t-vs .vs-side{ padding: 14px 22px !important; gap: 8px !important; }
html[lang="es"] .t-vs .vs-side.left{ padding-right: 30px !important; }
html[lang="es"] .t-vs .vs-side.right{ padding-left: 30px !important; }
html[lang="es"] .t-vs .vs-name{ font-size: 18px !important; }
html[lang="es"] .t-vs .vs-tagline{ font-size: 11px !important; line-height: 1.45 !important; padding-bottom: 8px !important; }
html[lang="es"] .t-vs .vs-fact{ padding: 10px 14px !important; }
html[lang="es"] .t-vs .vs-fact .vf-value{ font-size: 10.5px !important; line-height: 1.35 !important; }
html[lang="es"] .t-vs .vs-facts{ margin-bottom: 10px !important; }
html[lang="es"] .t-vs .vs-grid{ margin-bottom: 10px !important; }

/* P11 t-framework — 5-col table on a tightly-built page; ES
   strings like "Capacitación profesional y certificaciones"
   wrap onto extra lines. Tighten row padding + cell font. */
html[lang="es"] .t-framework .fw-table{ margin-top: 28px !important; }
html[lang="es"] .t-framework .tbl-row{ padding: 9px 0 !important; font-size: 10.5px !important; }
html[lang="es"] .t-framework .tbl-row > span:first-child{ font-size: 10px !important; }
html[lang="es"] .t-framework .fw-steps{ margin-bottom: 18px !important; }
html[lang="es"] .t-framework .step-title{ font-size: 15px !important; line-height: 1.18 !important; margin-bottom: 6px !important; }
html[lang="es"] .t-framework .fw-step{ padding: 0 14px !important; }

/* P13 t-cmp (IEP vs 504) — 7 rows of long ES jargon plus 2
   foot callouts plus takeaway. Tightest squeeze in the doc.
   Drop row padding, callout padding, and trim the hero. */
html[lang="es"] .t-cmp .cmp-hero{ padding-bottom: 10px !important; margin-bottom: 12px !important; }
html[lang="es"] .t-cmp .cmp-row > div{ padding: 7px 14px !important; }
html[lang="es"] .t-cmp .cmp-row{ padding: 0 !important; }
html[lang="es"] .t-cmp .cr-cell{ font-size: 10.5px !important; line-height: 1.4 !important; }
html[lang="es"] .t-cmp .cr-feat{ font-size: 10px !important; line-height: 1.2 !important; }
html[lang="es"] .t-cmp .cmp-headers > div{ padding: 10px 14px !important; }
html[lang="es"] .t-cmp .cmp-headers .ch-name{ font-size: 15px !important; }
html[lang="es"] .t-cmp .cmp-headers .ch-name .ch-tag{ font-size: 10px !important; margin-top: 1px; }
html[lang="es"] .t-cmp .cmp-foot{ margin-top: 10px !important; gap: 10px !important; }
html[lang="es"] .t-cmp .cmp-foot .ed-callout{ font-size: 10px !important; padding: 8px 11px !important; }
html[lang="es"] .t-cmp .cmp-foot .ed-callout strong{ font-size: 8.5px !important; padding-bottom: 6px !important; margin-bottom: 6px !important; }
html[lang="es"] .t-cmp .takeaway{ font-size: 12px !important; padding-top: 9px !important; margin-top: 9px !important; line-height: 1.35 !important; }

/* P16 t-options — 6 cards with ES-bigger names. Tighten card
   gap so the 2-row grid + takeaway + foot always render. */
html[lang="es"] .t-options .opt-grid{ gap: 10px !important; }
html[lang="es"] .t-options .opt-card{ padding: 13px 14px 11px !important; }
html[lang="es"] .t-options .opt-card ul{ gap: 3px !important; }
html[lang="es"] .t-options .opt-hero{ padding-bottom: 10px !important; margin-bottom: 12px !important; }
html[lang="es"] .t-options .takeaway{ font-size: 12.5px !important; padding-top: 9px !important; margin-top: 9px !important; line-height: 1.4 !important; }

/* P17 t-aid — already heavily tightened. Add margins shave so
   the FAFSA shifts row + foot never clip. */
html[lang="es"] .t-aid .aid-hero{ padding-bottom: 10px !important; margin-bottom: 12px !important; }
html[lang="es"] .t-aid .aid-grid{ gap: 16px !important; margin-bottom: 10px !important; }
html[lang="es"] .t-aid .aid-feature{ padding: 16px 18px !important; gap: 10px !important; }
html[lang="es"] .t-aid .aid-stats{ padding: 9px 0 !important; }
html[lang="es"] .t-aid .aid-stat .as-num{ font-size: 22px !important; }
html[lang="es"] .t-aid .aid-side{ gap: 10px !important; }
html[lang="es"] .t-aid .aid-block{ padding-top: 9px !important; }
html[lang="es"] .t-aid .aid-fafsa{ padding: 10px 0 !important; gap: 16px !important; }

/* P18 t-framework with tabular pathway block — ES "Educación
   Técnica y Profesional (CTE)" wraps the row's second column.
   Tightening matches P11 above; reuse those rules (auto). */

/* P20 t-profile — 4 Q&A blocks. ES answers run long; reduce
   the qna padding + answer line-height so all 4 + foot fit. */
html[lang="es"] .t-profile .profile-body .qna{ padding: 9px 0 !important; }
html[lang="es"] .t-profile .profile-body .qna:first-of-type{ padding-top: 4px !important; }
html[lang="es"] .t-profile .qna .a{ font-size: 11.5px !important; line-height: 1.45 !important; }
html[lang="es"] .t-profile .qna .q{ font-size: 12px !important; margin-bottom: 4px !important; }
html[lang="es"] .t-profile .profile-title{ font-size: 38px !important; margin-bottom: 12px !important; }
html[lang="es"] .t-profile .profile-figure .ed-list{ gap: 3px !important; }
html[lang="es"] .t-profile .profile-figure .step-list{ gap: 3px !important; }

/* P22 Glossary (t-editorial w/ glos-term) — 21 terms across
   3 columns; ES dt+dd combo runs ~12 lines/col. Fine-tune so
   no column overflows past the foot. */
html[lang="es"] .t-editorial .glos-term{ margin: 0 0 6px !important; }
html[lang="es"] .t-editorial .glos-term dt{ font-size: 10px !important; line-height: 1.2 !important; margin-bottom: 1px; }
html[lang="es"] .t-editorial .glos-term dd{ font-size: 10px !important; line-height: 1.4 !important; margin-bottom: 4px; }

/* P23 t-closing (Resource Directory) — 3-col colophon w/ 8+
   resources in col-3. Tighten cp-cell gap and entry rhythm. */
html[lang="es"] .t-closing .colophon{ gap: 16px !important; padding-bottom: 14px !important; }
html[lang="es"] .t-closing .cp-cell{ gap: 3px !important; }
html[lang="es"] .t-closing .cp-label{ font-size: 9px !important; margin-bottom: 4px !important; padding-bottom: 4px !important; }
html[lang="es"] .t-closing .cp-value{ font-size: 10.5px !important; line-height: 1.4 !important; }
html[lang="es"] .t-closing .close-line{ font-size: 17px !important; line-height: 1.35 !important; margin: 0 0 16px !important; }
html[lang="es"] .t-closing .close-hero{ padding-bottom: 18px !important; margin-bottom: 18px !important; }
html[lang="es"] .t-closing .close-title{ font-size: 50px !important; margin-bottom: 14px !important; }

/* P06/P10/P14/P21 t-editorial — keep the auto-paginator's job
   easy by trimming column gap + ed-list spacing on long ES
   3-column pages. (Auto-paginate.js applies .compact/.dense
   classes itself; this just gives it more headroom up-front.) */
html[lang="es"] .t-editorial .ed-body{ column-gap: 18px !important; }
html[lang="es"] .t-editorial .ed-col{ gap: 5px !important; }
html[lang="es"] .t-editorial .ed-list{ gap: 3px !important; margin: 4px 0 !important; }
html[lang="es"] .t-editorial .step-list{ gap: 3px !important; margin: 4px 0 !important; }
html[lang="es"] .t-editorial .check-list{ gap: 3px !important; margin: 4px 0 !important; }
html[lang="es"] .t-editorial .ed-hero{ padding-bottom: 8px !important; margin-bottom: 10px !important; }

/* Universal ES — takeaways across all templates land tight. */
html[lang="es"] .takeaway{ line-height: 1.4 !important; }

/* P04 t-feature-grid — bodies-grid spacing + insight-strip. */
html[lang="es"] .t-feature-grid .bodies-grid{ row-gap: 22px !important; margin-bottom: 10px !important; }
html[lang="es"] .t-feature-grid .body-card{ padding: 22px 18px 14px !important; }
html[lang="es"] .t-feature-grid .insight-strip{ padding: 14px 18px !important; margin: 10px 0 8px !important; gap: 18px !important; }
html[lang="es"] .t-feature-grid .feat-hero{ padding-bottom: 10px !important; margin-bottom: 12px !important; }

/* ---------- Print ---------- */
@page { size: 8.5in 11in; margin: 0; }

/* ---------- Mobile / responsive scaling for screen ----------
   The .page elements are fixed at 8.5×11 in (816×1056 px), so on mobile
   they overflow horizontally and force pinch-zoom. Scale the page down
   to fit the viewport width using CSS transforms; the surrounding
   wrapper compensates for the lost height. Screen-only — print stays
   1:1 Letter. */
@media screen and (max-width: 900px){
  body{ padding: 0; overflow-x: hidden; }
  .page{
    /* Scale by viewport width: 8.5in = 816px → fit min(viewport, 96vw). */
    --page-scale: calc((100vw - 24px) / 816);
    transform: scale(var(--page-scale));
    transform-origin: top center;
    margin: 12px auto !important;
    /* Compensate vertical space — scaled height eats less room. */
    margin-bottom: calc(12px - 1056px * (1 - var(--page-scale))) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.30);
  }
  /* Inline buttons that float in absolute corners can fly out — anchor. */
  .toolbar{ position: fixed !important; right: 12px; top: 12px; font-size: 11px !important; padding: 9px 14px !important; }
}
@media screen and (max-width: 480px){
  .page{
    --page-scale: calc((100vw - 16px) / 816);
    margin: 8px auto !important;
    margin-bottom: calc(8px - 1056px * (1 - var(--page-scale))) !important;
  }
}

/* ============================================================
   TEXTBOOK PERSONALITY — DC Education Pathways Guide
   "The flagship textbook." Each chapter type has its own
   typographic rhythm. All rules are scoped via per-template
   classes that ONLY appear in this doc (t-data, t-vs, t-cmp,
   t-framework, t-options, t-aid, t-profile, t-contents,
   t-feature-grid) or per-page data-screen-label.
   These are additive — no box-model changes.
   ============================================================ */

/* ---- Tabular numerals everywhere statistics appear ---- */
.t-data .num,
.t-data .sym,
.t-cmp .num,
.t-aid .num,
.t-aid .sym,
.t-feature-grid .bc-meta,
.t-options .opt-num,
.t-profile .pf-num{
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- Contents page (P02) — chapter index reads italic ---- */
.t-contents .toc-row .toc-title{ letter-spacing: -0.005em; }
.t-contents .toc-row .toc-deck{ font-style: italic; }

/* ---- Section openers (t-opener) — chapter-opener variety ----
   These pages already feel airy; add a small-cap kicker rhythm
   and italic em accent on the title. */
.t-opener .opener-title em{ font-style: italic; font-weight: 500; }
.t-opener .kicker{ letter-spacing: .22em; }
.t-opener .opener-deck{
  font-style: italic;
  font-weight: 500;
}
.t-opener .meta-cell .k{ letter-spacing: .18em; }

/* Per-section opener accent color cue */
.t-opener[data-screen-label*="Understanding"] .kicker,
.t-opener[data-screen-label*="Comprender"] .kicker{ color: var(--rising-teal); }
.t-opener[data-screen-label*="Academic Pathways"] .kicker,
.t-opener[data-screen-label*="Trayectorias Académicas"] .kicker,
.t-opener[data-screen-label*="Trayectorias Academicas"] .kicker{ color: var(--ward-blue); }
.t-opener[data-screen-label*="Specialized Supports"] .kicker,
.t-opener[data-screen-label*="Apoyos Especializados"] .kicker{ color: var(--dc-coral); }
.t-opener[data-screen-label*="College and Career"] .kicker,
.t-opener[data-screen-label*="Universidad y Carrera"] .kicker{ color: var(--rising-teal); }
.t-opener[data-screen-label*="Family Engagement"] .kicker,
.t-opener[data-screen-label*="Participación"] .kicker,
.t-opener[data-screen-label*="Participacion"] .kicker{ color: var(--dc-coral); }

/* ---- Governance page (P04, t-feature-grid) ----
   Body cards: the bc-meta line gets monospace tabular for
   phone/url. bc-role becomes more pronounced eyebrow. */
.t-feature-grid .bc-role{
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
}
.t-feature-grid .bc-meta{
  font-style: italic;
}
.t-feature-grid .insight-strip strong{ letter-spacing: .14em; }
.t-feature-grid .insight-strip p em{ font-style: italic; font-weight: 600; }
.t-feature-grid .feat-title em{ font-style: italic; font-weight: 500; color: var(--ward-blue); }
.t-feature-grid .feat-deck{ font-style: italic; }

/* ---- Data page (P05, t-data) — figures look like a textbook table ---- */
.t-data .datum-label{ letter-spacing: .18em; }
.t-data .datum-src{ font-style: italic; }
.t-data .data-callout .callout-tag{ letter-spacing: .14em; font-weight: 800; }
.t-data .data-callout p em{ font-style: italic; }
.t-data .num{ font-weight: 800; }

/* ---- Editorial pages (P06, P10, P14, P21, P22) ----
   These are prose chapters; give them an editorial flavor:
   first body paragraph eyebrow + italic accents on em. */
.t-editorial .ed-title em,
.t-editorial .page-title em{ font-style: italic; font-weight: 500; color: var(--ward-blue); }
.t-editorial .ed-deck{ font-style: italic; }
.t-editorial .ed-body p em,
.t-editorial .ed-body em{ font-style: italic; }
.t-editorial .ed-callout strong{ letter-spacing: .04em; }

/* Glossary page (P22) gets a definition-list rhythm for any dl */
.t-editorial[data-screen-label*="Glossary"] dt,
.t-editorial[data-screen-label*="Glosario"] dt{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .02em;
}

/* ---- Framework pages (P07, P11, P18) — process / step pages ---- */
.t-framework .page-title em{ font-style: italic; font-weight: 500; color: var(--ward-blue); }
.t-framework .step-num{
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .04em;
}
.t-framework .step-title{ letter-spacing: -0.005em; }
.t-framework .step-desc em{ font-style: italic; }
.t-framework .fw-table th{ letter-spacing: .14em; }
.t-framework .fw-table td{
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.t-framework .page-deck{ font-style: italic; }

/* ---- Versus page (P09 t-vs) — comparison spread ---- */
.t-vs .vs-title em{ font-style: italic; font-weight: 500; }
.t-vs .vs-side h3{ letter-spacing: -0.005em; }
.t-vs .vs-label{ letter-spacing: .18em; font-weight: 800; }
.t-vs .vs-deck{ font-style: italic; }
.t-vs .vs-fact em{ font-style: italic; }

/* ---- Compare page (P13 t-cmp) — IEP vs 504 ---- */
.t-cmp .cmp-title em{ font-style: italic; font-weight: 500; }
.t-cmp .cmp-deck{ font-style: italic; }
.t-cmp .cmp-row em{ font-style: italic; }

/* ---- Options page (P16 t-options) — postsecondary options ---- */
.t-options .opt-title em{ font-style: italic; font-weight: 500; }
.t-options .opt-card .opt-tag{ letter-spacing: .14em; }
.t-options .opt-card p em{ font-style: italic; }
.t-options .opt-deck{ font-style: italic; }

/* ---- Aid page (P17 t-aid) — financial aid figures ---- */
.t-aid .aid-title em{ font-style: italic; font-weight: 500; }
.t-aid .aid-stat .as-label{ letter-spacing: .18em; }
.t-aid .aid-deck{ font-style: italic; }
.t-aid .aid-stat .as-num{
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- Profile page (P20 t-profile) — Q&A advocacy ---- */
.t-profile .profile-title em{ font-style: italic; font-weight: 500; }
.t-profile .qna .q{
  font-style: italic;
  letter-spacing: -0.005em;
}
.t-profile .qna .a em{ font-style: italic; }

/* ---- Closing page (P23 t-closing) — resource directory ---- */
.t-closing .close-title em{ font-style: italic; font-weight: 500; }
.t-closing .close-line em{ font-style: italic; font-weight: 600; }
.t-closing .cp-label{ letter-spacing: .18em; }
.t-closing .cp-value{
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.t-closing .cp-value strong{ letter-spacing: -0.005em; }

/* Cover (P01) — flagship textbook plate: tabular vol number */
.t-cover:not(.no-photo) .cv-num{
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Page-foot folio across the doc — tabular numerals so P. 04
   aligns with P. 14, P. 23 in any preview. */
.page-foot{
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

@media print{
  html, body{ background:#fff; }
  .page{ margin: 0; box-shadow: none; transform: none !important; }
  .toolbar{ display:none !important; }

  /* Pathways Guide flagship cover: the cover-bg.jpg photo (woman in
     front of bookshelves) has hard horizontal/vertical edges that print
     readers pick up as faint lines around the title. The earlier
     half-dark wash wasn't enough — print engines lighten the gradient
     pass and the photo bleeds through. Drop the photo entirely for
     print and use a pure brand gradient. Screen view is unchanged. */
  .t-cover:not(.no-photo){
    background:
      radial-gradient(80% 60% at 100% 0%, rgba(124,197,217,.30) 0%, rgba(124,197,217,0) 60%),
      radial-gradient(90% 70% at 0% 100%, rgba(212,115,108,.24) 0%, rgba(212,115,108,0) 55%),
      linear-gradient(165deg, var(--capitol-slate) 0%, #234A78 45%, var(--ward-blue) 100%) !important;
  }
  .t-cover:not(.no-photo)::after{ opacity: .35 !important; }
}