@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,500&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ==========================================================================
   Teach Different, shared base stylesheet
   Brand tokens sampled from the live site and confirmed Aug 2026.
   Inderjet: this file is the single source of truth for colour and type.
   Change a token here, not in the page files.
   ========================================================================== */

:root {
  /* Brand palette. CONFIRMED, do not substitute */
  --td-blue:        #21498E;   /* primary brand blue, sampled from the logo */
  --td-blue-dark:   #1A3A72;   /* hover / deep sections */
  --td-blue-tint:   #F3F6FB;   /* pale section wash */
  --td-orange:      #EC8304;   /* primary CTA */
  --td-orange-dark: #C96D02;   /* CTA hover */
  --td-coral:       #E8743C;   /* reach map only: workshop pins, so they read apart
                                  from graduate pins. Every text label on the site is
                                  --td-orange, the logo orange. Steve, 2026-09-08 */
  --td-body:        #3D3D3D;   /* body text */
  --td-muted:       #6B6B6B;
  --td-rule:        #DFE4EA;
  --td-white:       #FFFFFF;
  --td-offwhite:    #FAFAF8;
  --td-cream:       #FDF4EA;   /* warm section wash, sampled from the live Certificate page */

  /* Type, matched to the live site (Playfair Display + Source Sans 3) */
  --td-sans: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --td-serif: "Playfair Display", Georgia, "Times New Roman", times, serif;
  --td-display: "Playfair Display", Georgia, serif;

  /* Layout */
  --td-max: 1140px;
  --td-narrow: 760px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--td-sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--td-body);
  background: var(--td-white);
}

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

a { color: var(--td-blue); }

h1, h2, h3, h4 {
  font-family: var(--td-display);
  color: var(--td-blue);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 700;
}
/* NO ITALICS ANYWHERE ON THE SITE. Steve's rule, 2026-09-08, site wide. The
   accent in a heading is carried by colour alone now, which is what <em> is
   here for: emphasis, not a slant. The rule below catches anything a browser
   would slant by default, so a stray <em> or <cite> in a page cannot reintroduce
   it. The printable PDFs in podcast/gen.py are NOT web pages and keep theirs. */
em, i, cite, address, blockquote, figcaption { font-style: normal; }
h1 em, h2 em, h3 em { color: var(--td-orange); font-style: normal; }

h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.1em; }

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

.td-section       { padding: 72px 0; }
.td-section--tint { background: var(--td-blue-tint); }
.td-section--off  { background: var(--td-offwhite); }
.td-section--cream{ background: var(--td-cream); }
.td-section--deep { background: var(--td-blue); color: #E8EEF6; }
.td-section--deep h1,
.td-section--deep h2,
.td-section--deep h3 { color: var(--td-white); }
/* These three set their own colour, so they do NOT inherit the light text on a
   deep section and would render dark grey on blue. Override explicitly. */
.td-section--deep .td-lede { color: #D6E3F2; }
.td-section--deep .td-src  { color: #A9C2DE; }
.td-section--deep .td-formnote { color: #BFD3E8; }

.td-eyebrow {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--td-orange);
  margin: 0 0 14px;
}

.td-lede { font-size: 1.2rem; color: var(--td-body); }

/* ---------- Header ---------- */

.td-header {
  border-bottom: 1px solid var(--td-rule);
  background: var(--td-white);
  position: sticky; top: 0; z-index: 50;
}
.td-header__inner {
  max-width: var(--td-max); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.td-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.td-brand__mark {
  width: 46px; height: 46px; border-radius: 8px; flex: 0 0 46px;
  background: var(--td-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem; letter-spacing: .02em;
}
.td-brand__name { font-weight: 700; color: var(--td-blue); font-size: 1.05rem; line-height: 1.15; }
.td-brand__tag  { font-family: var(--td-serif); color: var(--td-muted); font-size: .84rem; }

.td-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.td-nav a { color: var(--td-blue); text-decoration: none; font-size: .95rem; font-weight: 600; }
.td-nav a:hover { text-decoration: underline; }

/* ---------- Buttons ---------- */

.td-btn {
  display: inline-block; padding: 14px 28px; border-radius: 4px;
  background: var(--td-orange); color: #fff !important;
  font-weight: 700; text-decoration: none; font-size: 1rem;
  border: 0; cursor: pointer; transition: background .15s ease;
}
.td-btn:hover { background: var(--td-orange-dark); }
.td-btn--sm { padding: 9px 18px; font-size: .9rem; }
.td-btn--ghost {
  background: transparent; color: var(--td-blue) !important;
  border: 2px solid var(--td-blue);
}
.td-btn--ghost:hover { background: var(--td-blue); color: #fff !important; }

/* ---------- Cards & grids ---------- */

.td-grid { display: grid; gap: 26px; }
.td-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* Strictly two up, then one. auto-fit would make three columns on a wide
   viewport and leave a fourth card stranded on its own row. */
.td-grid--2up { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .td-grid--2up { grid-template-columns: 1fr; } }
.td-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.td-grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.td-card {
  background: var(--td-white); border: 1px solid var(--td-rule);
  border-radius: 8px; padding: 28px;
}
.td-card__num {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  color: var(--td-orange); text-transform: uppercase; margin-bottom: 10px;
}

.td-stat__fig { font-size: 2.4rem; font-weight: 700; color: var(--td-blue); line-height: 1.05; }
.td-section--deep .td-stat__fig { color: var(--td-white); }
.td-stat__lbl { font-size: .95rem; color: var(--td-muted); }
.td-section--deep .td-stat__lbl { color: #C6D6E9; }

.td-quote {
  border-left: 4px solid var(--td-orange);
  padding: 4px 0 4px 22px; margin: 0 0 22px;
  font-size: 1.05rem;
}
.td-quote cite { display: block; margin-top: 10px; font-style: normal; font-size: .9rem; color: var(--td-muted); }

/* ---------- Form panel ---------- */

.td-formpanel {
  background: var(--td-white); border: 1px solid var(--td-rule);
  border-top: 5px solid var(--td-orange);
  border-radius: 8px; padding: 34px;
  box-shadow: 0 2px 14px rgba(33, 73, 142, .07);
}

/* HubSpot embed restyled to brand. The generated markup uses .hs-form
   classes; these rules are scoped so they cannot leak to other forms. */
.td-formpanel .hs-form-field { margin-bottom: 18px; }
.td-formpanel .hs-form-field > label {
  display: block; font-weight: 600; font-size: .93rem;
  color: var(--td-blue); margin-bottom: 6px;
}
.td-formpanel .hs-form-required { color: var(--td-orange); margin-left: 2px; }
.td-formpanel input[type="text"],
.td-formpanel input[type="email"],
.td-formpanel input[type="tel"],
.td-formpanel input[type="number"],
.td-formpanel select,
.td-formpanel textarea {
  width: 100%; padding: 11px 13px; font-size: 1rem;
  font-family: var(--td-sans); color: var(--td-body);
  border: 1px solid #C7CFD8; border-radius: 4px; background: #fff;
}
.td-formpanel textarea { min-height: 130px; resize: vertical; }
.td-formpanel input:focus,
.td-formpanel select:focus,
.td-formpanel textarea:focus {
  outline: 0; border-color: var(--td-blue);
  box-shadow: 0 0 0 3px rgba(33, 73, 142, .14);
}
.td-formpanel .hs-button {
  background: var(--td-orange); color: #fff; border: 0;
  padding: 14px 32px; border-radius: 4px;
  font-weight: 700; font-size: 1rem; cursor: pointer;
  font-family: var(--td-sans);
}
.td-formpanel .hs-button:hover { background: var(--td-orange-dark); }
.td-formpanel .hs-error-msg,
.td-formpanel .hs-error-msgs label { color: #B3261E; font-size: .86rem; }
.td-formpanel .hs-field-desc { font-size: .84rem; color: var(--td-muted); }

.td-formnote { font-size: .88rem; color: var(--td-muted); margin-top: 16px; }

/* Two-up field row */
.td-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .td-row2 { grid-template-columns: 1fr; } }

/* Fallback field markup shown until the HubSpot embed renders. It is removed
   automatically the moment a real <form> appears inside the frame, so a
   visitor never sees both. If HubSpot is blocked or slow, this stays visible
   and the panel still reads as a form rather than an empty box. */
.td-form-placeholder .hs-button { width: 100%; }

/* ---------- Footer ---------- */

.td-footer { background: var(--td-blue); color: #DCE5F3; padding: 44px 0; font-size: .92rem; }
.td-footer a { color: #FFFFFF; text-decoration: none; }
.td-footer a:hover { text-decoration: underline; }
.td-footer__inner {
  max-width: var(--td-max); margin: 0 auto; padding: 0 24px;
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
}
.td-footer__links { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- Utility ---------- */

.td-center { text-align: center; }
.td-mb0 { margin-bottom: 0; }
/* ---------- Checklist ---------- */
.td-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.td-check li { position: relative; padding-left: 32px; line-height: 1.6; }
.td-check li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 18px; height: 18px; border-radius: 50%; background: var(--td-blue-tint);
  box-shadow: inset 0 0 0 2px var(--td-blue);
}
.td-check li::after {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 6px; height: 3px; border-left: 2px solid var(--td-blue);
  border-bottom: 2px solid var(--td-blue); transform: rotate(-45deg);
}
.td-check strong { color: var(--td-blue); }
/* Ruled variant: hairline between items, as on the live Certificate page. */
.td-check--ruled { gap: 0; }
.td-check--ruled li { padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(33, 73, 142, .12); }
.td-check--ruled li:last-child { border-bottom: 0; }
.td-check--ruled li::before { top: .78em; }
.td-check--ruled li::after  { top: 1.06em; }

/* ---------- Table ---------- */
.td-tablewrap { overflow-x: auto; margin-top: 26px; }
.td-table { width: 100%; border-collapse: collapse; font-size: .97rem; min-width: 460px; }
.td-table caption { text-align: left; color: var(--td-muted); font-size: .85rem; padding-bottom: 10px; }
.td-table thead { background: var(--td-blue); }
.td-table th {
  text-align: left; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; font-weight: 700; padding: 14px 20px;
}
.td-table th:first-child { border-radius: 6px 0 0 6px; }
.td-table th:last-child  { border-radius: 0 6px 6px 0; }
.td-table td { padding: 13px 20px; border-bottom: 1px solid var(--td-rule); }
.td-table tbody tr:nth-child(even) { background: var(--td-blue-tint); }
.td-table tbody tr:last-child td { border-bottom: 0; }
.td-table td:first-child { font-weight: 600; color: var(--td-blue); }

/* ---------- Definition rows ---------- */
.td-defs { display: grid; gap: 0; margin: 0; }
.td-defs > div { display: grid; grid-template-columns: 210px 1fr; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--td-rule); }
.td-defs > div:last-child { border-bottom: 0; }
.td-defs dt { font-weight: 700; color: var(--td-blue); }
.td-defs dd { margin: 0; color: var(--td-body); }
@media (max-width: 620px) { .td-defs > div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Responsive video embed ---------- */
.td-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
            background: #000; box-shadow: 0 12px 30px rgba(33, 73, 142, .16); }
.td-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.td-list-clean { list-style: none; padding: 0; margin: 0; }
.td-list-clean li { padding: 9px 0; border-bottom: 1px solid var(--td-rule); }
.td-list-clean li:last-child { border-bottom: 0; }

@media (max-width: 720px) {
  body { font-size: 17px; }
  .td-section { padding: 52px 0; }
  .td-nav { gap: 14px; }
  .td-nav a { font-size: .88rem; }
  .td-formpanel { padding: 24px; }
}

/* ---------- Homepage: hero ---------- */

.td-hero { background: linear-gradient(180deg, #F7FAFD 0%, #FFFFFF 100%); padding: 66px 0 60px; }
.td-hero__grid {
  max-width: var(--td-max); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center;
}
.td-hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.5rem); margin-bottom: .35em; }
.td-hero__sub { font-size: 1.3rem; color: var(--td-muted); max-width: 26em; margin-bottom: 30px; }
.td-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* The Illinois map in the hero of the Illinois Project page. It is an 800 by
   800 square, which at full column width towered over the copy beside it and
   ran well past the two buttons. Capped and pushed to the bottom of its column
   so its base sits on the same line as "How it works" and "Let's talk". */
.td-hero__grid--map { align-items: stretch; }
/* The map column takes NO part in setting the row height. The copy on the
   left sets it, and the map is fitted inside whatever that turns out to be,
   at any viewport width. Done by lifting the image out of flow: an absolutely
   placed image cannot make its container taller, so the picture can only ever
   be as tall as the words beside it. Bottom-anchored so its base sits on the
   button line. */
.td-hero__map { position: relative; min-height: 0; }
.td-hero__map img {
  position: absolute; right: 0; bottom: 0;
  max-height: 100%; max-width: 100%; width: auto; height: auto;
}
@media (max-width: 900px) {
  .td-hero__grid--map { align-items: center; }
  .td-hero__map img { position: static; max-height: 360px; margin: 0 auto; }
}

/* ---------- Steps with a graphic ----------
   Three cards in a row gave each picture a third of the page, which made the
   four-moves pyramid and the plan-try-reflect wheel unreadable. Each step is
   now a full-width row, picture on one side and copy on the other, sides
   alternating, so the graphics are roughly twice the size. */
.td-steps { display: grid; gap: 40px; margin-top: 38px; }
.td-step {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center;
  background: var(--td-white); border: 1px solid var(--td-rule); border-radius: 10px;
  padding: 34px 38px;
}
.td-step--flip .td-step__art { order: 2; }
/* Fixed-height picture box, so the three rows are the same height whatever
   shape the picture is. Steve, 2026-09-09. */
.td-step__art { height: 300px; display: flex; align-items: center; justify-content: center; }
.td-step__art img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; object-fit: contain; }
@media (max-width: 860px) { .td-step__art { height: auto; max-height: 300px; } }
.td-step__txt h3 { font-size: 1.45rem; }
@media (max-width: 860px) {
  .td-step { grid-template-columns: 1fr; gap: 22px; padding: 26px; }
  .td-step--flip .td-step__art { order: 0; }
}
.td-hero__img { border-radius: 10px; box-shadow: 0 18px 44px rgba(33, 73, 142,.18); width: 100%; }
@media (max-width: 900px) {
  .td-hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .td-hero { padding: 44px 0; }
}

/* ---------- Stat band with sources ---------- */

.td-statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 30px; margin-top: 40px; }
.td-statrow .td-stat__fig { font-family: var(--td-display); font-size: 3rem; color: var(--td-orange); }
.td-statrow p { margin: 6px 0 0; font-size: 1rem; }
.td-src { display: block; margin-top: 10px; font-size: .78rem; color: var(--td-muted); line-height: 1.45; }

/* ---------- Big pull quote ---------- */

.td-pull {
  margin: 46px 0 0; padding: 30px 34px;
  background: var(--td-blue); color: #fff; border-radius: 10px;
  font-family: var(--td-display); font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.4;
}

/* ---------- Four moves ---------- */

.td-moves { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px,1fr)); gap: 22px; margin-top: 38px; }
.td-move { background: #fff; border: 1px solid var(--td-rule); border-top: 4px solid var(--td-orange); border-radius: 8px; padding: 24px; }
.td-move__n {
  width: 34px; height: 34px; border-radius: 50%; background: var(--td-blue-tint);
  color: var(--td-blue); font-weight: 700; font-family: var(--td-display);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.td-move h3 { margin-bottom: .35em; font-size: 1.15rem; }
.td-move p { margin: 0; font-size: .97rem; color: var(--td-muted); }
/* Full-paragraph variant, for pages that explain each move rather than name it. */
.td-move--tall { padding: 28px 30px; }
.td-move--tall h3 { font-size: 1.3rem; }
.td-move--tall p { font-size: 1rem; line-height: 1.65; color: var(--td-body); }

/* ---------- Video ---------- */
.td-video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 10px; background: #000;
  box-shadow: 0 18px 44px rgba(33, 73, 142, .18);
}

.td-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
/* Grid items default to min-width:auto, so a column holding a wide image refuses
   to shrink and the page scrolls sideways on phones. */
.td-split > *, .td-hero__grid > *, .td-grid > * { min-width: 0; }
/* Copy-led variant: text column wider than the picture, matching the live site's
   607/493 proportion. Use where the image supports the argument rather than
   carrying it. */
.td-split--copy { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 860px) { .td-split { grid-template-columns: 1fr; gap: 30px; }
                            .td-split--copy { grid-template-columns: 1fr; } }

/* Section photograph. Square or landscape, sits opposite a column of copy. */
.td-figure { display: block; width: 100%; height: auto; border-radius: 10px; }
/* Lifted off the page, same shadow as the hero image. For diagrams and
   screenshots, which read as objects rather than as photographs. */
.td-figure--raised { box-shadow: 0 18px 44px rgba(33, 73, 142, .18); }

/* Brand mark. object-fit:contain so a non-square source is never sliced. */
.td-brand__logo { display: block; width: 46px; height: 46px; object-fit: contain; }

/* ---------- Reach map ---------- */
/* Component styles ship with the map fragment (src/reach-map.tpl.html) so the
   standalone page and the homepage stay in sync. This just sets it off. */

.td-map { margin-top: 34px; }

.td-statcard { background: var(--td-blue-tint); border-radius: 8px; padding: 22px 24px; }
.td-statcard .td-stat__fig { font-family: var(--td-display); color: var(--td-blue); }

/* Names the data stream a figure came from, so a reader can tell a measure of
   intent (post-training confidence) from a measure of outcome (a survey, a
   coded page). Every evidence figure on the site carries one. */
.td-stat__src {
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--td-orange); margin: 0 0 9px;
}
.td-statcard .td-stat__lbl { line-height: 1.55; }
/* Brand orange is legible on white but muddy on the deep navy band, so lift it. */
.td-section--deep .td-stat__src { color: #F0B168; }

/* ---------- Logic model chain ----------
   Three stages read left to right with an arrow between each. The arrows are
   their own grid cells rather than pseudo-elements on the steps, because a
   pseudo-element hung off a flexible step drifts as the step grows. On phones
   the row becomes a column and the arrows turn to point down. */
.td-chain {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch; margin-top: 34px;
}
.td-chain__step {
  background: #fff; border: 1px solid var(--td-rule); border-radius: 8px;
  padding: 20px 22px;
}
.td-chain__lbl {
  font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--td-orange); margin: 0 0 8px;
}
.td-chain__step p:last-child { margin: 0; font-size: .97rem; line-height: 1.55; color: var(--td-muted); }
.td-chain__step--end { background: var(--td-blue); border-color: var(--td-blue); }
.td-chain__step--end .td-chain__lbl { color: #F0B168; }
.td-chain__step--end p:last-child { color: #fff; font-weight: 600; }
.td-chain__arrow {
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px; color: var(--td-orange); font-size: 1.6rem; line-height: 1;
}
@media (max-width: 760px) {
  .td-chain { grid-template-columns: 1fr; }
  .td-chain__arrow { padding: 10px 0; transform: rotate(90deg); }
}

/* Attribution under a pull quote. Not italic and not display face, so it reads
   as a note about the quote rather than more of it. */
.td-pull__by {
  display: block; margin-top: 16px; font-family: var(--td-sans);
  font-style: normal; font-size: .85rem; line-height: 1.5; color: #C6D6E9;
}

/* ---------- Before / after and tier blocks (TDMT) ----------
   These replace two graphics on the live page that are screenshots of text.
   Typeset as real HTML so they scale, stay sharp, and can be read aloud. */
.td-beforeafter { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--td-rule); }
.td-ba__title {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--td-muted); font-weight: 700; margin: 0 0 14px;
}
.td-ba__box { border-radius: 8px; padding: 15px 17px; font-size: 1rem; line-height: 1.55; }
.td-ba__box--bad  { border: 1px solid #E8B4B4; background: #FDF5F5; color: #8A3232; }
.td-ba__box--good { border: 1px solid #A9D3B4; background: #F3FAF5; color: #1F6438; }
.td-ba__lbl {
  display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 6px;
}
.td-ba__arrow { text-align: center; color: var(--td-muted); font-size: 1.2rem; line-height: 1.9; }
.td-ba__foot { margin: 14px 0 0; font-size: .9rem; color: var(--td-muted); text-align: center; }

.td-tier { border-radius: 8px; padding: 14px 17px; font-size: 1rem; line-height: 1.5; margin-bottom: 10px; }
.td-tier:last-of-type { margin-bottom: 0; }
.td-tier__lbl {
  display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 5px;
}
.td-tier__lbl em { font-style: normal; opacity: .72; }
.td-tier strong { display: block; font-family: var(--td-display); font-size: 1.1rem; }
.td-tier__ticks { display: block; margin-top: 6px; font-size: .86rem; font-weight: 700; }
.td-tier--1 { border: 1px solid #A9D3B4; background: #F3FAF5; color: #1F6438; }
.td-tier--2 { border: 1px solid #E4CE94; background: #FDF9EF; color: #7A5B14; }
.td-tier--3 { border: 1px solid #E8B4B4; background: #FDF5F5; color: #8A3232; }

/* Partner logo: contained, never cropped, never stretched. */
.td-partnerlogo {
  display: block; width: auto; max-width: 190px; height: 62px;
  object-fit: contain; object-position: left center; margin-bottom: 16px;
}

/* ---------- People ---------- */
.td-person__photo {
  width: 100%; max-width: 260px; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: top center;
  border-radius: 10px; margin-bottom: 20px;
  box-shadow: 0 12px 30px rgba(33, 73, 142, .16);
}
.td-person__thumb {
  width: 84px; height: 84px; border-radius: 50%;
  object-fit: cover; object-position: top center; margin-bottom: 16px;
}
.td-person .td-quote { margin-bottom: 20px; }
.td-partner .td-partnerlogo { max-width: 210px; height: 56px; }

/* Slot for the Kit newsletter embed. The Kit form brings its own card, so this
   wrapper stays plain; only the stand-in inside it is given a card look.
   Delete .td-kitslot and its rules once the Kit snippet is pasted in. */
/* ---------- Kit newsletter embed ----------
   Kit renders INLINE (form.formkit-form), not in an iframe, so unlike the
   HubSpot embed it can be restyled from here. The !important flags are needed:
   Kit ships its own inline styles on these elements. */
.td-kitslot {
  border: 1px solid var(--td-rule);
  border-radius: 8px; background: var(--td-white);
  box-shadow: 0 2px 14px rgba(33, 73, 142, .07);
  padding: 26px 26px 22px;
}
.td-kitslot .formkit-form {
  background: transparent !important; border: 0 !important;
  box-shadow: none !important; padding: 0 !important;
}
.td-kitslot .formkit-field { margin-bottom: 12px !important; }
.td-kitslot .formkit-input {
  border: 1px solid #C7CFD8 !important; border-radius: 4px !important;
  padding: 11px 13px !important;
  font-family: var(--td-sans) !important; font-size: 1rem !important;
}
.td-kitslot .formkit-submit { border-radius: 4px !important; }
.td-kitslot .formkit-submit > span {
  font-family: var(--td-sans) !important; font-weight: 700 !important;
  letter-spacing: 0 !important; text-transform: none !important; font-size: 1rem !important;
}
.td-kitslot .formkit-powered-by-convertkit-container { margin-top: 14px !important; }

/* Certificate hero tagline: the live page sets this in the serif italic, with
   the Method name picked out in bold. */
.td-hero__tagline {
  font-family: var(--td-serif);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--td-blue);
}
.td-hero__tagline strong { font-weight: 700; }

/* ---------- Click-to-play video ----------
   A poster frame that swaps in the YouTube player on click. Three reasons over
   four live iframes: the page loads far faster, no third-party player script
   runs until someone asks for it, and it still works when the file is opened
   from disk (YouTube refuses to play embeds on a file:// page, error 153, so
   the link falls through to YouTube instead of showing an error box). */
.td-play {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden; background: #000;
  box-shadow: 0 12px 30px rgba(33, 73, 142, .16);
  text-decoration: none;
}
.td-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, opacity .2s ease; }
.td-play:hover img { transform: scale(1.03); opacity: .85; }
.td-play__btn {
  position: absolute; inset: 0; margin: auto;
  width: 66px; height: 66px; border-radius: 50%;
  background: var(--td-orange); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.td-play:hover .td-play__btn { background: var(--td-orange-dark); transform: scale(1.07); }
.td-play__btn::after {
  content: ""; margin-left: 5px;
  border-style: solid; border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #fff;
}
.td-play__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 16px 12px; color: #fff; font-size: .86rem; font-weight: 600;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
}
.td-play iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Hero heading accent: brand orange, upright. Use instead of <em> where the
   italic is not wanted. */
.td-accent { color: var(--td-orange); font-style: normal; }

/* ---------- Seams between same-coloured sections ----------
   Two white sections back to back give 144px of dead air. Trim the join. */
.td-section--tight-b { padding-bottom: 30px; }
.td-section--tight-t { padding-top: 34px; }

/* ---------- Spec strip ----------
   Five short facts in a row, hairline between. Reads as a spec sheet: the eye
   takes all five in one pass instead of walking down a list. */
.td-specs { display: grid; grid-template-columns: repeat(5, 1fr); }
.td-spec { padding: 0 22px; border-left: 1px solid var(--td-rule); }
.td-spec:first-child { padding-left: 0; border-left: 0; }
.td-spec:last-child { padding-right: 0; }
.td-spec__fig {
  display: block; font-family: var(--td-display); font-weight: 700;
  font-size: 1.45rem; line-height: 1.2; color: var(--td-blue); margin-bottom: 8px;
}
.td-spec p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--td-muted); }

.td-section--deep .td-spec { border-left-color: rgba(255, 255, 255, .22); }
.td-section--deep .td-spec__fig { color: var(--td-white); }
.td-section--deep .td-spec p { color: #BFD3E8; }
/* On the deep blue sections the label used to be a lighter orange, #F5A93F, for
   contrast. Steve wants one orange everywhere, the logo's, so it is the same
   --td-orange here as on white. 2026-09-08 */
.td-section--deep .td-eyebrow { color: var(--td-orange); }

@media (max-width: 940px) {
  .td-specs { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  .td-spec { padding: 0 20px; }
  .td-spec:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 520px) {
  .td-specs { grid-template-columns: 1fr; gap: 22px; }
  .td-spec { padding: 0 0 0 16px; border-left: 3px solid var(--td-orange); }
  .td-spec:first-child { padding-left: 16px; border-left: 3px solid var(--td-orange); }
}

/* ---------- /administrators/ landing page ---------- */
.td-specs--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) {
  .td-specs--3 { grid-template-columns: 1fr; gap: 18px; }
  .td-specs--3 .td-spec { padding: 0 0 0 16px; border-left: 3px solid var(--td-orange); }
}
.td-specs--3 .td-spec__fig { margin-bottom: 0; }

/* Four-across variant, used for the reach strip on the evidence sections. The
   base rule already folds to two columns at 900px and one at 620px. */
.td-specs--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .td-specs--4 { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  .td-specs--4 .td-spec:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 620px) {
  .td-specs--4 { grid-template-columns: 1fr; gap: 22px; }
  .td-specs--4 .td-spec,
  .td-specs--4 .td-spec:nth-child(odd) { padding: 0 0 0 16px; border-left: 3px solid var(--td-orange); }
}

/* Funder credit line: small, quiet, letter-spaced. */
.td-funders {
  margin: 20px auto 0; max-width: 46em;
  font-size: .74rem; letter-spacing: .07em; line-height: 1.7;
  text-transform: uppercase; font-weight: 600; color: var(--td-muted);
}

/* Scarcity note. Warm, not shouty. */
.td-notice {
  margin: 38px auto 0; max-width: 40em; text-align: center;
  padding: 13px 20px; border-radius: 6px;
  background: var(--td-cream); border: 1px solid #F0DCC2;
  color: #8A5A02; font-size: .95rem;
}
.td-notice strong { color: #6E4702; }


/* ---------- Bare chrome for standalone landing pages ---------- */
.td-header--bare { position: static; }
.td-header--bare .td-header__inner { justify-content: center; padding: 20px 24px; }
.td-header--bare .td-brand { cursor: default; }
.td-footer--bare .td-footer__inner { justify-content: center; gap: 10px 28px; text-align: center; }
/* .td-footer__links carries margin-left:auto, which pins it right. Undo it so
   the bare footer actually centres. */
.td-footer--bare .td-footer__links { margin-left: 0; justify-content: center; }


/* Visible to a screen reader, not on screen. The archive search needs a real
   label, and the label would only repeat the placeholder if it were shown. */
.td-vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ================= PODCAST ARCHIVE =================
   215 episodes on one page. The whole archive ships in the HTML rather than
   arriving over fetch, because the point of the archive is that a search
   engine can read every quote in it. The toolbar only hides and reveals what
   is already there.

   The card is an <a> with block children, not a <div> wrapping a link, so the
   whole tile is one target and one tab stop. */
.td-eptools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  margin-bottom: 12px;
}
.td-epsearch {
  flex: 1 1 280px; max-width: 380px;
  font-family: var(--td-sans); font-size: 1rem; color: var(--td-body);
  padding: 11px 14px; border: 1px solid var(--td-rule); border-radius: 6px;
  background: var(--td-white);
}
.td-epsearch:focus {
  outline: none; border-color: var(--td-blue);
  box-shadow: 0 0 0 3px rgba(33, 73, 142, .13);
}
.td-epyears { display: flex; flex-wrap: wrap; gap: 8px; }
.td-epyear {
  font-family: var(--td-sans); font-size: .88rem; font-weight: 600;
  color: var(--td-muted); background: var(--td-white); cursor: pointer;
  padding: 8px 13px; border: 1px solid var(--td-rule); border-radius: 999px;
}
.td-epyear:hover { border-color: var(--td-blue); color: var(--td-blue); }
/* aria-pressed carries the state, so the selected style hangs off it and the
   button cannot look selected while reading as unselected. */
.td-epyear[aria-pressed="true"] {
  background: var(--td-blue); border-color: var(--td-blue); color: var(--td-white);
}
/* The raw feed, offered quietly. The people who want it know what it is; it
   should not compete with the buttons beside it. */
.td-epfeed { font-size: .88rem; color: var(--td-muted); }

.td-epcount { font-size: .9rem; color: var(--td-muted); margin: 0 0 26px; }

.td-eps { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* One card per episode: the plan's picture on top, then the quote, large and
   in the serif, then who said it. The picture is the plan's own portrait or
   painting, so the archive reads as a gallery of the people we talk about. */
.td-ep {
  display: flex; flex-direction: column;
  background: var(--td-white); border: 1px solid var(--td-rule);
  border-radius: 10px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.td-ep:hover { border-color: var(--td-blue); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(33, 73, 142,.12); }
.td-ep:hover .td-ep__pic img { transform: scale(1.03); }
.td-ep:focus-visible { outline: 3px solid var(--td-orange); outline-offset: 2px; }
.td-ep__pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--td-blue-tint); }
.td-ep__pic img:not([src]) { visibility: hidden; }
.td-ep__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform .4s ease; }
.td-ep__pic--none {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--td-serif); font-size: 6rem; line-height: 1; color: var(--td-blue); opacity: .35;
}
.td-ep__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.td-ep__quote {
  font-family: var(--td-serif); font-size: 1.22rem; line-height: 1.38;
  color: var(--td-blue); margin: 0; text-wrap: pretty;
}
.td-ep__by { font-size: .95rem; font-weight: 600; color: var(--td-body); }
.td-ep__meta {
  margin-top: auto; padding-top: 8px;
  font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;
  font-weight: 700; color: var(--td-muted);
}
.td-ep__tag {
  color: var(--td-coral); border: 1px solid #F3CDB8; border-radius: 999px;
  padding: 2px 8px; letter-spacing: .08em;
}
.td-epmore { display: block; margin: 34px auto 0; }
/* .td-ep sets display:flex, and a class selector beats the browser's own
   [hidden] rule, so a hidden card would still be laid out. Say it here. */
.td-ep[hidden], .td-epmore[hidden], .td-epempty[hidden] { display: none; }

/* A ghost button on the deep blue band. The base rule paints it brand blue on
   brand blue, which disappears. */
.td-section--deep .td-btn--ghost {
  color: var(--td-white) !important; border-color: rgba(255, 255, 255, .7);
}
.td-section--deep .td-btn--ghost:hover {
  background: var(--td-white); color: var(--td-blue) !important; border-color: var(--td-white);
}
.td-epempty { text-align: center; color: var(--td-muted); padding: 40px 0; }
@media (max-width: 600px) {
  .td-eps { grid-template-columns: 1fr; }
  .td-epsearch { max-width: none; }
}


/* ================= PODCAST EPISODE PAGE =================
   One page per episode, generated by build-episodes.py. These are the only
   pages that link this stylesheet instead of inlining it. */
.td-ep__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.td-ep__kicker a { color: var(--td-orange); text-decoration: none; }
.td-ep__kicker a:hover { text-decoration: underline; }
.td-ep__kicker time { color: var(--td-muted); }
.td-ep__h1 { margin-bottom: 10px; }
.td-ep__attrib {
  font-size: 1.05rem; font-weight: 700; color: var(--td-blue); margin: 0 0 26px;
}
.td-ep__attrib span { font-weight: 400; color: var(--td-muted); margin-left: 8px; }

/* A native player, deliberately. The audio file is a plain mp3 or m4a, so no
   embed and no script stands between the reader and the episode, and nothing
   here breaks when the site moves off WordPress. */
.td-ep__audio { display: block; width: 100%; max-width: 560px; margin: 0 0 14px; }
.td-ep__where { font-size: .93rem; color: var(--td-muted); margin: 0; }

/* Placeholder for a conversation plan image that is not in the build yet.
   Deliberately plain and labelled with its filename, so a missing picture
   reads as an outstanding task rather than as a broken page. */
.td-imgslot {
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
  min-height: 200px; padding: 24px; text-align: center;
  border: 1px dashed var(--td-rule); border-radius: 8px; background: var(--td-offwhite);
  color: var(--td-muted); font-size: .9rem;
}
.td-imgslot code { font-size: .82rem; color: var(--td-blue); word-break: break-all; }

/* Claim, counterclaim, essential question on an episode page. Named
   .td-planmove, NOT .td-move: that one is the boxed card the Method page uses
   for the four moves, and reusing it here painted a box round each line. */
.td-planmove {
  border-left: 3px solid var(--td-orange); padding: 2px 0 2px 20px; margin: 0 0 24px;
}
.td-planmove:last-child { margin-bottom: 0; }
.td-planmove__n {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--td-orange); margin: 0 0 6px;
}
.td-planmove p { font-size: 1.02rem; line-height: 1.6; color: var(--td-body); }
/* The label is itself a <p>, so the rule above was winning on specificity and
   painting CLAIM, COUNTERCLAIM and ESSENTIAL QUESTION body grey. Found by the
   colour sweep on 2026-09-08. */
.td-planmove p.td-planmove__n { font-size: .78rem; line-height: 1.4; color: var(--td-orange); }

.td-ep__nears { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.td-ep__near {
  display: block; padding: 22px 24px; text-decoration: none; color: inherit;
  border: 1px solid var(--td-rule); border-radius: 8px; background: var(--td-white);
}
.td-ep__near:hover { border-color: var(--td-blue); background: var(--td-blue-tint); }
.td-ep__near-lbl {
  display: block; font-size: .74rem; letter-spacing: .11em; text-transform: uppercase;
  font-weight: 700; color: var(--td-muted); margin-bottom: 8px;
}
.td-ep__near-q {
  display: block; font-family: var(--td-serif); font-size: 1.05rem;
  line-height: 1.45; color: var(--td-blue);
}


/* ---------- Podcast guests ----------
   Some guests have a photo and some never did. The card handles both: without
   a picture it simply narrows, rather than showing an empty frame. */
.td-guests { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.td-guest {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--td-white); border: 1px solid #F0DCC2;
  border-radius: 8px; padding: 24px;
}
.td-guest--nophoto { display: block; }
.td-guest__photo {
  width: 92px; height: 92px; flex: 0 0 92px;
  border-radius: 50%; object-fit: cover; background: var(--td-blue-tint);
  /* The photos come out of the WordPress media library at whatever shape they
     were uploaded, mostly taller than wide. A square crop of a tall photo
     defaults to dead centre, which on a headshot takes the crown of the head
     off. This pulls the crop window up the source image so the head sits inside
     the circle. Lower the second number to show more head, raise it toward 50%
     to recentre. */
  object-position: 50% 25%;
}
.td-guest__name { font-weight: 700; color: var(--td-blue); margin: 0 0 6px; font-size: 1.05rem; }
.td-guest__bio { font-size: .96rem; line-height: 1.6; }
.td-guest__bio p { margin: 0 0 10px; }
.td-guest__bio p:last-child { margin-bottom: 0; }
.td-guest__links { margin: 10px 0 0; font-size: .88rem; }
.td-guest__links a { margin-right: 12px; }

/* ---------- Transcript ----------
   Closed by default so it does not bury the page, but present in the HTML, so
   a search engine reads every word of it. */
.td-transcript summary {
  cursor: pointer; font-weight: 700; color: var(--td-blue);
  padding: 14px 18px; border: 1px solid var(--td-rule); border-radius: 6px;
  background: var(--td-white); list-style-position: inside;
}
.td-transcript summary:hover { border-color: var(--td-blue); }
.td-transcript[open] summary { border-radius: 6px 6px 0 0; border-bottom: 0; }
.td-transcript__body {
  border: 1px solid var(--td-rule); border-top: 0; border-radius: 0 0 6px 6px;
  padding: 26px 28px; background: var(--td-white);
  max-height: 30em; overflow-y: auto;
}
.td-transcript__body p { font-size: .97rem; line-height: 1.7; margin: 0 0 16px; }
.td-transcript__body p:last-child { margin-bottom: 0; }
.td-ts { color: var(--td-muted); font-weight: 600; font-size: .88em; }
.td-ep__len { font-size: .9rem; color: var(--td-muted); margin: 0 0 12px; }

/* ================= EPISODE HERO =================
   Quote left, picture upper right.

   The picture is NEVER cropped. A lot of these are paintings, and a crop that
   suits a portrait throws most of a landscape away, while the credit line goes
   on naming a whole work the reader cannot see.

   But an uncropped picture at its natural size makes the right column a
   different height on all 215 pages, and when it runs taller than the quote and
   the audio player it leaves a hole under them. So the picture is boxed: it
   scales down to fit inside 340 wide by 380 tall, keeping its own shape, and it
   is centred in the column with its credit line centred under it rather than
   flush to the column edge.

   The author note lives in the LEFT column, under the listen links, not under
   the picture. That is what closes the gap: the text grows down the page on
   exactly the episodes whose picture is tallest. Steve chose this over a fixed
   cream mat and over a centre crop, 2026-09-08. */
.td-ep__hero { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: start; }
.td-ep__heroimg { display: flex; justify-content: center; }
.td-ep__heroimg figure { margin: 0; text-align: center; }
.td-ep__heroimg img {
  display: block;
  width: auto; height: auto;
  max-width: 340px; max-height: 380px;
  margin: 0 auto;
  border-radius: 10px;
}
.td-ep__cred { margin-top: 10px; font-size: .78rem; line-height: 1.5; text-align: center; }

/* The author note. Capped to a readable measure: the left column runs about
   750px at full width, which is far too wide for a 0.92rem paragraph. */
.td-ep__who { margin-top: 20px; max-width: 560px; }
.td-ep__who p { font-size: .92rem; line-height: 1.6; color: var(--td-body); }
.td-ep__heroimg .td-imgslot { min-height: 240px; width: 100%; }

@media (max-width: 860px) {
  .td-ep__hero { grid-template-columns: 1fr; gap: 26px; }
  .td-ep__heroimg { justify-content: flex-start; }
  .td-ep__heroimg figure { text-align: left; }
  .td-ep__heroimg img { margin: 0; }
  .td-ep__cred { text-align: left; }
}

/* ---------- Legal pages ----------
   The privacy policy and the terms. Long, numbered, and read in a hurry by
   somebody looking for one specific paragraph, usually a district technology
   director checking us before a purchase order. So: a contents list that jumps,
   numbered sections that can be cited by number, and a measure narrow enough to
   read rather than scan. */
.td-legal { max-width: 780px; margin: 0 auto; padding: 0 24px; }
.td-legal__meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline;
  margin: 0 0 30px; padding: 14px 18px;
  background: var(--td-blue-tint); border-left: 3px solid var(--td-orange);
  font-size: .9rem; color: var(--td-muted);
}
.td-legal__meta b { color: var(--td-blue); font-weight: 700; }
.td-legal__toc {
  margin: 0 0 44px; padding: 22px 26px;
  border: 1px solid var(--td-rule); border-radius: 10px; background: var(--td-offwhite);
}
.td-legal__toc p {
  margin: 0 0 12px; font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; color: var(--td-blue);
}
.td-legal__toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 34px; }
.td-legal__toc li { margin-bottom: 7px; font-size: .93rem; break-inside: avoid; }
.td-legal__toc a { text-decoration: none; }
.td-legal__toc a:hover { text-decoration: underline; }
@media (max-width: 640px) { .td-legal__toc ol { columns: 1; } }

.td-legal h2 {
  font-size: 1.35rem; margin: 44px 0 12px; scroll-margin-top: 24px;
  padding-top: 22px; border-top: 1px solid var(--td-rule);
}
.td-legal h2:first-of-type { border-top: 0; padding-top: 0; }
.td-legal h2 span { color: var(--td-orange); font-family: var(--td-sans);
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; display: block;
  margin-bottom: 4px; }
.td-legal h3 { font-size: 1.02rem; margin: 26px 0 8px; }
.td-legal p, .td-legal li { font-size: 1rem; line-height: 1.72; }
.td-legal ul, .td-legal ol { padding-left: 22px; }
.td-legal li { margin-bottom: 9px; }
.td-legal__def { margin: 0 0 18px; }
.td-legal__def dt { font-weight: 700; color: var(--td-blue); margin-top: 14px; }
.td-legal__def dd { margin: 4px 0 0; }
.td-legal__box {
  margin: 26px 0; padding: 20px 24px; border-radius: 10px;
  background: var(--td-cream); border: 1px solid #F0DCC2;
}
.td-legal__box p:last-child { margin-bottom: 0; }
.td-legal table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .93rem; }
.td-legal th, .td-legal td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--td-rule);
  vertical-align: top;
}
.td-legal th { background: var(--td-blue); color: #fff; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; }
.td-legal__wrap { overflow-x: auto; }
.td-legal__top { font-size: .82rem; }

/* ---------- Hero photograph with a caption ----------
   A real photograph of a real room, which does more for a school leader than
   any diagram. The caption is part of the evidence, so it is styled to be read
   rather than tucked away. */
.td-herophoto { margin: 0; }
.td-herophoto img { width: 100%; border-radius: 10px; display: block; box-shadow: 0 14px 34px rgba(33, 73, 142, .22); }
.td-herophoto figcaption {
  margin-top: 10px; font-size: .85rem; color: var(--td-muted);
  text-align: center;
}
.td-herophoto figcaption b { color: var(--td-blue); font-weight: 700; }

/* ---------- Standards, as chips ----------
   This was three columns of ten to twelve bullet points, 32 lines of small
   grey text that nobody read. The point of the section is the SIZE of the
   number, not the recitation, so the number leads and the frameworks sit
   underneath as chips you can take in at a glance. The names are trimmed to
   what identifies them: under the heading "Illinois", every entry began with
   the word Illinois. */
.td-stdgrid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.td-std {
  background: var(--td-white); border: 1px solid var(--td-rule);
  border-radius: 10px; padding: 26px 24px;
}
.td-std__h {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--td-rule);
}
.td-std__n {
  font-family: var(--td-display); font-size: 2rem; font-weight: 700;
  color: var(--td-blue); line-height: 1;
}
.td-std__l {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--td-orange);
}
.td-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.td-chips li {
  background: var(--td-blue-tint); color: var(--td-blue);
  border-radius: 999px; padding: 6px 13px;
  font-size: .87rem; line-height: 1.3; font-weight: 600;
}

/* ---------- Read-more inside a card ----------
   The three "What's Underneath" cards on the Method page carry a teaser and
   then the full essay behind a disclosure, the way the live page did with its
   collapsibles. Native <details>, so it works with no script and the content is
   in the page for search engines. */
.td-more { margin-top: 16px; border-top: 1px solid var(--td-rule); padding-top: 12px; }
.td-more summary {
  cursor: pointer; list-style: none; font-weight: 700; color: var(--td-blue);
  font-size: .95rem; display: flex; align-items: center; gap: 8px;
}
.td-more summary::-webkit-details-marker { display: none; }
.td-more summary::before {
  content: ""; width: 8px; height: 8px; border-right: 2px solid var(--td-orange);
  border-bottom: 2px solid var(--td-orange); transform: rotate(-45deg);
  transition: transform .15s; flex: 0 0 auto; margin-left: 2px;
}
.td-more[open] summary::before { transform: rotate(45deg); }
.td-more summary .td-more__open { display: none; }
.td-more[open] summary .td-more__closed { display: none; }
.td-more[open] summary .td-more__open { display: inline; }
.td-more__body { margin-top: 14px; }
.td-more__body p { font-size: .98rem; line-height: 1.68; }
.td-more__body p:last-child { margin-bottom: 0; }
.td-more__greek {
  font-family: var(--td-display); font-size: 1.6rem; color: var(--td-blue);
  margin: 22px 0 4px; letter-spacing: .04em;
}
.td-more__closer { font-family: var(--td-display); font-size: 1.1rem; color: var(--td-blue); margin-top: 18px; }