/* ILRHR 5635 — AI and HR (Spring 2027) — ILR School, Cornell University
   Implements the ILRHR 5635 Course Site design from Claude Design; no build step.
   Originally assembled from per-section fragments; this file is now the source
   of truth — edit it directly. The FRAGMENT banners below are section markers. */

@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/effects.css');

/* ============================================================================
   FRAGMENT: 00-foundation.css
   ========================================================================== */
/* ============================================================================
   00 — FOUNDATION
   Global reset, page defaults, shared classes, utilities, keyframes.
   Section builders must NOT redefine anything in this file.
   ========================================================================== */

/* ---- Reset & page defaults ---------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-strong);
  font-family: var(--font-primary);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

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

/* Anchored sections sit below the 54px sticky nav. */
section[id] { scroll-margin-top: 70px; }

/* ---- Focus ---------------------------------------------------------------
   The design ships no focus styling; this is the one deliberate addition,
   applied to every keyboard-reachable control (links, buttons, and the
   role="button" tabindex="0" cards in Progression and the FAQ). */

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

.section-nav a:focus-visible,
.faq__head:focus-visible {
  outline-offset: 2px;
}

/* ---- Skip link -----------------------------------------------------------
   Offscreen until focused. The page runs to 45 headings behind a utility bar,
   a masthead and a sticky section nav, so keyboard users need a way past it. */

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: var(--weight-bold);
  font-size: 14px;
  text-decoration: none;
  transition: top 160ms var(--ease-standard);
}

.skip-link:focus {
  top: 8px;
}

/* ---- Container ------------------------------------------------------------
   Every full-width band wraps its content in .container. Vertical padding is
   supplied by the .section rhythm below or by a section-specific rule. */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---- Section rhythm -------------------------------------------------------
   Default band: 64px top / 64px bottom. Modifiers cover the two variants the
   design uses (a band that butts against the one above it, and a band with a
   72px bottom). Anything else is section-specific and belongs in the section's
   own fragment CSS. */

.section > .container { padding-top: 64px; padding-bottom: 64px; }
.section--flush-top > .container { padding-top: 0; }
.section--bottom-72 > .container { padding-bottom: 72px; }

/* ---- Section surfaces ---------------------------------------------------- */

.section--page { background: var(--surface-page); }
.section--zone { background: var(--surface-zone); }
.section--card { background: var(--surface-card); }
.section--ink  { background: var(--surface-ink); color: var(--text-on-dark); }

/* ---- Split grid -----------------------------------------------------------
   The 360px rail + fluid body used by Description, Format, Progression,
   Readings, Assessment, Policies and FAQ. */

.split {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 48px;
}

.split--end { align-items: end; }

/* ---- Eyebrow (section kicker, above the h2) ------------------------------ */

.eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-accent);
}

.eyebrow--on-dark { color: var(--ilr-white); opacity: 0.7; }

/* ---- Section title (the h2 in every band) -------------------------------- */

.section-title {
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 10px 0 0;
  color: var(--text-strong);
}

.section-title--flush   { margin: 0; }
.section-title--on-dark { color: var(--ilr-white); }

/* ---- Overline label (small all-caps label inside cards and rails) -------- */

.overline-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-strong);
  margin-bottom: 6px;
}

.overline-label--accent { color: var(--text-accent); }
.overline-label--body   { color: var(--text-body); }
.overline-label--flush  { margin-bottom: 0; }
.overline-label--mb-7   { margin-bottom: 7px; }
.overline-label--mb-8   { margin-bottom: 8px; }

/* ---- Red dotted field ----------------------------------------------------
   Carnellian ground screened with a 7px dot grid. Used as a section
   background (Speakers) and a portrait backing plate (Instructor). The
   Format cards repeat the same field inline, on hover only. */

.dots-red {
  background-color: var(--accent);
  background-image: radial-gradient(rgba(34,34,34,0.30) 1.3px, transparent 1.4px);
  background-size: 7px 7px;
}

/* ---- Bevel clip-paths ----------------------------------------------------
   45deg cut on the bottom-right corner. Three sizes are in use. */

.bevel-14 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.bevel-16 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
.bevel-20 { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); }

/* ---- Sticky-nav active state ---------------------------------------------
   The JS toggles .is-active on the nav link for the section in view. */

.section-nav a.is-active {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---- Keyframes ------------------------------------------------------------
   ilr-flowdash / ilr-halo are copied verbatim from the design's <helmet>;
   ilr-gw-caret is copied from the glitch-wordmark embed. */

@keyframes ilr-flowdash { to { stroke-dashoffset: -72px; } }
@keyframes ilr-halo { 0% { r: 8; opacity: 0.55; } 100% { r: 22; opacity: 0; } }
@keyframes ilr-gw-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Animation carriers — the reduced-motion block below switches these off, so
   the Progression builder and the JS must use these classes rather than
   re-declaring the animations locally. */

.flow-dash  { animation: ilr-flowdash 1.9s linear infinite; }
.flow-halo  { animation: ilr-halo 1.8s ease-out infinite; }
.gw-caret   { animation: ilr-gw-caret 0.7s steps(1) infinite; }

/* ---- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .flow-dash,
  .flow-halo,
  .gw-caret { animation: none; }
}

/* ---- Responsive — shared classes only ------------------------------------
   Section-specific collapses live in each section's fragment CSS. */

@media (max-width: 960px) {
  .split {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* The sticky nav wraps to two rows below 960px (63px tall); keep the
     design's 15px clearance between the nav and the section's top hairline. */
  section[id] { scroll-margin-top: 78px; }
}

@media (max-width: 620px) {
  .container { padding-left: 20px; padding-right: 20px; }

  /* Three nav rows at this width (113px tall). */
  section[id] { scroll-margin-top: 128px; }

  .section > .container { padding-top: 44px; padding-bottom: 44px; }
  .section--flush-top > .container { padding-top: 0; }
  .section--bottom-72 > .container { padding-bottom: 52px; }

  .split { gap: 24px; }

  .section-title { font-size: 26px; }
}

/* ============================================================================
   FRAGMENT: 10-chrome.css
   ========================================================================== */
/* ============================================================================
   10 — CHROME · UTILITY BAR
   ========================================================================== */

.utility-bar {
  background: var(--accent);
  color: var(--text-on-dark);
}

.utility-bar__inner {
  padding-top: 7px;
  padding-bottom: 7px;
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  font-size: 12.5px;
  letter-spacing: var(--tracking-caps);
}

.utility-bar__link {
  color: var(--text-on-dark);
  opacity: 0.85;
  text-decoration: none;
}

/* The design pins these links to white with no underline in every state
   (inline colour beats the global a:hover), so the hover/focus rules restate
   the resting appearance rather than inheriting the global link hover. */

.utility-bar__link:hover,
.utility-bar__link:focus-visible {
  color: var(--text-on-dark);
  text-decoration: none;
}

/* ============================================================================
   10 — CHROME · SITE HEADER
   ========================================================================== */

.site-header {
  border-bottom: var(--border-width) solid var(--border-hairline);
  background: var(--surface-page);
}

.site-header__inner {
  padding-top: 18px;
  padding-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-header__wordmark {
  height: 42px;
}

.site-header__meta {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.site-header__code {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-strong);
}

.site-header__term {
  font-weight: var(--weight-light);
  font-size: var(--text-sm);
  color: var(--ilr-ink-70);
}

/* ============================================================================
   10 — CHROME · HERO
   ========================================================================== */

.hero {
  position: relative;
}

.hero__picture {
  display: block;
}

.hero__photo {
  display: block;
  width: 100%;
  height: 560px;
  object-fit: cover;
  object-position: 50% 46%;
}

.hero__overlay {
  position: absolute;
  inset: 0;
}

.hero__overlay-inner {
  height: 100%;
  display: flex;
  align-items: center;
}

/* .bevel-20 supplies the 20px bottom-right clip. */

.hero__card {
  position: relative;
  background: var(--surface-card);
  padding: 34px 46px 38px;
  max-width: 620px;
  border-top: 8px solid var(--accent);
}

/* Screens the 8px carnellian top rail with cream dots at a 5px pitch — an
   inverse of .dots-red. Offset by the border width so it covers the rail
   exactly; .bevel-20 clips from the border box, so it is not cut off. */

.hero__card-dots {
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
  background-image: radial-gradient(var(--surface-card) 1.1px, transparent 1.2px);
  background-size: 5px 5px;
  pointer-events: none;
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.hero__title {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: var(--weight-black);
  font-size: 54px;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  margin: 16px 0 18px;
  color: var(--text-strong);
  white-space: pre;
  cursor: pointer;
}

.hero__lede {
  font-weight: var(--weight-thin);
  font-size: var(--text-body-lg);
  line-height: 1.55;
  color: var(--ilr-ink-70);
  margin: 0 0 var(--space-5);
  max-width: 480px;
  text-wrap: pretty;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--text-strong);
}

.hero__meta-sep {
  color: var(--border-hairline);
}

/* ============================================================================
   10 — CHROME · STICKY SECTION NAV
   ========================================================================== */

.section-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface-page);
  border-bottom: var(--border-width) solid var(--border-hairline);
}

.section-nav__inner {
  display: flex;
  gap: 14px 16px;
  align-items: center;
  min-height: 54px;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: var(--weight-medium);
}

/* Resting state only — the active state is the shared
   .section-nav a.is-active rule, which the JS toggles. */

.section-nav__link {
  color: var(--text-strong);
  text-decoration: none;
  padding: var(--space-1) 0;
}

.section-nav__link:hover,
.section-nav__link:focus-visible {
  color: var(--text-strong);
  text-decoration: none;
}

.section-nav__badge {
  margin-left: auto;
}

/* ============================================================================
   10 — CHROME · RESPONSIVE
   ========================================================================== */

@media (max-width: 960px) {
  .hero__photo { height: 460px; }

  .hero__card { padding: 28px 32px 32px; }

  .hero__title { font-size: 44px; }
}

@media (max-width: 620px) {
  .utility-bar__inner {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .site-header__inner {
    flex-wrap: wrap;
    gap: 12px 16px;
  }

  .site-header__wordmark { height: 34px; }

  /* The overlay leaves absolute positioning so the card can never spill past
     the photo on a narrow viewport; a negative top margin keeps the overlap. */

  .hero__photo { height: 300px; }

  .hero__overlay { position: static; }

  .hero__overlay-inner {
    height: auto;
    display: block;
  }

  .hero__card {
    max-width: none;
    margin-top: -32px;
    padding: 24px 22px 28px;
  }

  .hero__title {
    font-size: 36px;
    margin: 12px 0 14px;
  }

  .hero__lede { font-size: 17px; }

  .section-nav__inner {
    gap: 10px 14px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .section-nav__badge { margin-left: 0; }
}

/* ============================================================================
   FRAGMENT: 20-description-instructor-outcomes.css
   ========================================================================== */
/* ============================================================================
   20 — DESCRIPTION
   ========================================================================== */

/* ---- Rails (left column) ------------------------------------------------- */

.description__rail {
  border-left: 3px solid var(--border-hairline);
  padding: 4px 0 4px 18px;
}

.description__rail--accent {
  margin-top: 26px;
  border-left-color: var(--accent);
}

.description__rail--sequence {
  margin-top: 22px;
}

.description__rail-text {
  font-weight: var(--weight-regular);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-strong);
  margin: 0;
  text-wrap: pretty;
}

.description__rail-note {
  font-weight: var(--weight-regular);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
}

/* ---- Body copy ----------------------------------------------------------- */

.description__lede {
  font-weight: var(--weight-light);
  font-size: 16.5px;
  line-height: var(--leading-relaxed);
  color: var(--text-body-strong);
  margin: 0 0 16px;
  text-wrap: pretty;
}

.description__lede--last {
  color: var(--text-body);
  margin-bottom: 30px;
}

/* ---- Facts strip --------------------------------------------------------- */

.description__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}

.description__fact {
  padding: 18px;
  border-left: 1px solid var(--border-hairline);
}

.description__fact--first {
  padding: 18px 18px 18px 0;
  border-left: 0;
}

.description__fact-value {
  font-weight: var(--weight-regular);
  font-size: 15px;
  color: var(--text-strong);
}

/* ============================================================================
   20 — INSTRUCTOR
   ========================================================================== */

.instructor__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}

/* ---- Photo with offset dotted backing plate ------------------------------ */

.instructor__frame {
  position: relative;
  width: 280px;
  height: 340px;
}

.instructor__plate {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 280px;
  height: 340px;
}

.instructor__photo-link {
  position: relative;
  display: block;
  width: 280px;
  height: 340px;
}

.instructor__photo {
  display: block;
  width: 280px;
  height: 340px;
  object-fit: cover;
}

/* ---- Name, title, bio ---------------------------------------------------- */

.instructor__name {
  font-weight: var(--weight-bold);
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 10px 0 4px;
  color: var(--text-strong);
}

.instructor__name a {
  color: var(--text-strong);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}

.instructor__name a:hover,
.instructor__name a:focus-visible {
  color: var(--accent);
  text-decoration: none;
}

.instructor__title {
  font-weight: var(--weight-regular);
  font-size: 15px;
  color: var(--text-body);
  margin: 0 0 18px;
}

.instructor__bio {
  font-weight: var(--weight-light);
  font-size: 16px;
  line-height: var(--leading-relaxed);
  color: var(--text-body-strong);
  margin: 0 0 14px;
  max-width: 640px;
  text-wrap: pretty;
}

.instructor__bio--last {
  color: var(--text-body);
  margin-bottom: 24px;
}

/* ---- Office hours / contact row ------------------------------------------ */

.instructor__meta {
  display: flex;
  gap: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border-hairline);
  max-width: 640px;
}

.instructor__meta-value {
  font-weight: var(--weight-light);
  font-size: 15px;
  color: var(--text-body);
}

/* ============================================================================
   20 — OUTCOMES
   ========================================================================== */

.outcomes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-hairline);
  border-left: 1px solid var(--border-hairline);
  margin-top: 34px;
}

/* Two-layer hover: the cell becomes the red dot field, the panel lifts off it
   toward the top-left and turns cream with a hairline outline. */

.outcome {
  border-right: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  position: relative;
  background-color: var(--surface-page);
}

.outcome:hover {
  background-color: var(--accent);
  background-image: radial-gradient(rgba(34,34,34,0.30) 1.3px, transparent 1.4px);
  background-size: 7px 7px;
  z-index: 2;
}

.outcome__panel {
  padding: 26px 26px 30px;
  height: 100%;
  background: var(--surface-page);
  outline: 1px solid transparent;
  transition: transform var(--dur-normal) var(--ease-standard), background var(--dur-normal) var(--ease-standard), outline-color var(--dur-normal) var(--ease-standard);
}

.outcome:hover .outcome__panel {
  transform: translate(-10px, -10px);
  background: var(--surface-card);
  outline-color: var(--text-strong);
}

.outcome__num {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 15px;
  color: var(--text-accent);
  margin-bottom: 12px;
}

.outcome__text {
  font-weight: var(--weight-regular);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-strong);
  margin: 0;
  text-wrap: pretty;
}

/* ============================================================================
   20 — RESPONSIVE
   ========================================================================== */

@media (max-width: 960px) {
  .description__facts { grid-template-columns: repeat(2, 1fr); }

  .description__fact--first { padding: 18px; }
  .description__fact:nth-child(2n+1) { border-left: 0; }
  .description__fact:nth-child(n+3) { border-top: 1px solid var(--border-hairline); }

  .instructor__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .outcomes__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .description__facts { grid-template-columns: 1fr; }

  .description__fact,
  .description__fact--first {
    padding: 18px 0;
    border-left: 0;
  }

  .description__fact:nth-child(n+2) { border-top: 1px solid var(--border-hairline); }

  .instructor__grid { gap: 24px; }

  .instructor__frame,
  .instructor__plate,
  .instructor__photo-link,
  .instructor__photo {
    width: 240px;
    height: 292px;
  }

  .instructor__name { font-size: 26px; }

  .instructor__meta {
    flex-wrap: wrap;
    gap: 24px;
  }

  .outcomes__grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   FRAGMENT: 30-format-speakers.css
   ========================================================================== */
/* ============================================================================
   30 — FORMAT
   Cream band that butts against Outcomes (zero top padding). 360px rail with a
   sand callout, plus a 2x2 grid of red-dotted backing plates whose inner panel
   lifts on hover.
   ========================================================================== */

.format__lede {
  font-weight: var(--weight-light);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  margin: var(--space-4) 0 0;
  text-wrap: pretty;
}

/* ---- Survey-course callout ---------------------------------------------- */

.format__callout {
  margin-top: var(--space-5);
  background: var(--surface-zone);
  padding: 22px;
}

.format__callout-title {
  font-weight: var(--weight-bold);
  font-size: 17px;
  margin: 0 0 10px;
  color: var(--text-strong);
}

.format__callout-body {
  font-weight: var(--weight-light);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
  text-wrap: pretty;
}

/* ---- Card grid ----------------------------------------------------------- */

.format__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-content: start;
}

/* Backing plate. It sits flush under the card in the cream page colour and
   only reads as a plate on hover, when it turns over to the .dots-red field
   and the inner card slides up-left off it. */
.format__card {
  position: relative;
  background-color: var(--surface-page);
}

/* outline, not border: it draws outside the box, so the inner card stays the
   same size as the plate and hides it completely at rest. */

.format__card-inner {
  outline: var(--border-width) solid var(--border-hairline);
  background: var(--surface-page);
  padding: 22px;
  height: 100%;
  transition:
    transform var(--dur-normal) var(--ease-standard),
    background var(--dur-normal) var(--ease-standard),
    outline-color var(--dur-normal) var(--ease-standard);
}

/* Same field as .dots-red, applied only while hovered. */

.format__card:hover {
  z-index: 2;
  background-color: var(--accent);
  background-image: radial-gradient(rgba(34,34,34,0.30) 1.3px, transparent 1.4px);
  background-size: 7px 7px;
}

.format__card:hover .format__card-inner {
  transform: translate(-10px, -10px);
  background: var(--surface-card);
  outline-color: var(--border-frame);
}

.format__card-title {
  font-weight: var(--weight-bold);
  font-size: 17px;
  margin: 0 0 var(--space-2);
  color: var(--text-strong);
}

.format__card-body {
  font-weight: var(--weight-light);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
  text-wrap: pretty;
}

/* ============================================================================
   31 — GUEST SPEAKERS
   Red dotted field carrying eight bevelled cards: seven frosted-glass speaker
   placeholders and one dashed note. The JS animates the cards by writing inline
   styles onto each card, its five direct children, and the blurred name bar —
   every value below is only the pre-JS initial state.
   ========================================================================== */

.speakers {
  color: var(--text-on-dark);
}

/* justify-content and flex-wrap are inert with the single <h2> child; they
   reproduce the design's flex row, whose second slot is empty. */
.speakers__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}

.speakers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 38px;
}

/* ---- Glass speaker card -------------------------------------------------- */

.speaker-card {
  background: linear-gradient(155deg, rgba(248,243,233,0.30), rgba(248,243,233,0.12));
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: var(--border-width) solid rgba(255,255,255,0.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    0 12px 30px rgba(0,0,0,0.10);
  padding: 20px 22px 22px;
}

.speaker-card__bar-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* filter: blur(4px) stays inline on the element — the JS finds the bar with
   the selector div[style*="blur(4px)"]. */
.speaker-card__bar {
  height: 11px;
  width: 92px;
  border-radius: 6px;
  background: rgba(255,255,255,0.62);
}

.speaker-card__name {
  font-weight: var(--weight-bold);
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--text-on-dark);
  margin-top: var(--space-3);
  text-wrap: pretty;
}

.speaker-card__affiliation {
  font-weight: var(--weight-light);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.74);
  margin-top: 5px;
  text-wrap: pretty;
}

.speaker-card__rule {
  height: 1px;
  background: rgba(255,255,255,0.28);
  margin: 14px 0 11px;
}

.speaker-card__topic {
  font-weight: var(--weight-light);
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
  text-wrap: pretty;
}

/* ---- Dashed note card ---------------------------------------------------- */

.speakers__note {
  border: var(--border-width) dashed rgba(248,243,233,0.55);
  padding: 20px 22px 22px;
  display: flex;
  align-items: flex-end;
}

.speakers__note-text {
  font-weight: var(--weight-light);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-on-dark);
  opacity: 0.9;
  text-wrap: pretty;
}

/* ============================================================================
   30/31 — RESPONSIVE
   ========================================================================== */

@media (max-width: 960px) {
  /* The .split rail has already stacked, so the format cards keep their 2-up
     layout across the full container width. */
  .speakers__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: 28px;
  }

  .speakers__head {
    gap: 24px;
  }
}

@media (max-width: 620px) {
  .format__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .format__callout {
    padding: 18px;
  }

  .speakers__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ============================================================================
   FRAGMENT: 40-progression.css
   ========================================================================== */
/* ============================================================================
   40 — COURSE PROGRESSION

   NOTE: body-grey text (#55524d) is written as var(--ilr-ink-70), not
   var(--text-body). --text-body is declared twice in the token files —
   colors.css sets it to var(--ilr-ink-70), typography.css later overrides it
   to 16px — so `color: var(--text-body)` resolves to an invalid value.
   ========================================================================== */

.flow {
  border-bottom: var(--border-width) solid var(--border-hairline);
  overflow: hidden;
}

/* ---- Header band ---------------------------------------------------------
   Design padding is 64px 32px 30px; the horizontal 32px comes from
   .container so the 620px breakpoint can narrow it. */

.flow__head {
  padding-top: 64px;
  padding-bottom: 30px;
}

/* ---- Three part rails ---------------------------------------------------- */

.flow__parts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 34px;
}

.flow__part {
  border-left: var(--frame-bar) solid var(--border-hairline);
  padding: 4px 0 6px 16px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 320ms ease, border-color 320ms ease;
}

.flow__part--active {
  border-left-color: var(--accent);
  opacity: 1;
}

.flow__part-name {
  font-weight: var(--weight-bold);
  font-size: 19px;
  color: var(--text-strong);
  margin-top: 5px;
}

.flow__part-meta {
  font-weight: var(--weight-light);
  font-size: 13.5px;
  color: var(--ilr-ink-70);
  margin-top: 5px;
}

/* ---- Parallax viewport ----------------------------------------------------
   The three layer opacities and the scrim opacity are the design tool's own
   prop defaults, exposed here so they can be tuned in one place. The viewport
   clips the 4200px track and the 100vw-based layers, so nothing inside can
   widen the document. */

.flow__viewport {
  --flow-far: 1;
  --flow-mid: 1;
  --flow-near: 1;
  --flow-scrim: 0.9;
  position: relative;
  height: 920px;
  overflow: hidden;
}

.flow__layer {
  position: absolute;
  left: 0;
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.flow__layer--far {
  top: -90px;
  width: calc(100vw + 620px);
  height: 1100px;
  background-image: url(../assets/progression-far.webp);
  background-size: 2200px 1100px;
  opacity: var(--flow-far);
  filter: blur(3px);
}

.flow__layer--mid {
  top: 0;
  width: calc(100vw + 1390px);
  height: 920px;
  background-image: url(../assets/progression-mid.webp);
  background-size: 2900px 920px;
  opacity: var(--flow-mid);
  filter: blur(1.5px);
}

.flow__layer--near {
  top: 0;
  width: calc(100vw + 2150px);
  height: 920px;
  background-image: url(../assets/progression-near.webp);
  background-size: 3600px 920px;
  opacity: var(--flow-near);
}

.flow__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--flow-scrim);
}

.flow__scrim--radial {
  background: radial-gradient(ellipse 46% 62% at 50% 50%, var(--surface-card) 0%, rgba(248,243,233,0.9) 42%, rgba(248,243,233,0.35) 78%, rgba(248,243,233,0) 100%);
}

.flow__scrim--edges {
  background: linear-gradient(90deg, var(--surface-card) 0%, rgba(248,243,233,0) 14%, rgba(248,243,233,0) 86%, var(--surface-card) 100%);
}

/* ---- Track & spine SVG ---------------------------------------------------
   The JS translates the track horizontally and rewrites the SVG presentation
   attributes on the trail, dots, pulse and halo, so those stay attributes. */

.flow__track {
  position: absolute;
  left: 0;
  top: 0;
  width: 4200px;
  height: 920px;
  z-index: 1;
  will-change: transform;
}

.flow__svg {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}

/* ---- Module cards --------------------------------------------------------
   Absolutely placed along the 4200px track: 420px + 340px per step, alternating
   above (bottom: 500px) and below (top: 500px) the spine. Card 0 is the lead
   card at load; the JS then drives opacity / z-index / border / background /
   box-shadow as inline styles. */

.flow__card {
  position: absolute;
  width: 300px;
  opacity: 0.7;
  cursor: pointer;
  z-index: 1;
  transition: opacity var(--dur-slow) ease;
}

.flow__card--above { bottom: 500px; }
.flow__card--below { top: 500px; }

.flow__card--pos-0 { left: 420px; }
.flow__card--pos-1 { left: 760px; }
.flow__card--pos-2 { left: 1100px; }
.flow__card--pos-3 { left: 1440px; }
.flow__card--pos-4 { left: 1780px; }
.flow__card--pos-5 { left: 2120px; }
.flow__card--pos-6 { left: 2460px; }
.flow__card--pos-7 { left: 2800px; }
.flow__card--pos-8 { left: 3140px; }
.flow__card--pos-9 { left: 3480px; }

.flow__card--lead {
  opacity: 1;
  z-index: 3;
}

.flow__card-inner {
  border: var(--border-width) solid var(--border-hairline);
  background: var(--surface-page);
  padding: 18px 18px 20px;
  box-shadow: var(--shadow-none);
  transition: border-color 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

.flow__card--lead .flow__card-inner {
  border-color: var(--accent);
  background: var(--surface-card);
  box-shadow: 8px 8px 0 rgba(179,27,27,0.16);
}

.flow__card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.flow__card-part {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.flow__card-module {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ilr-ink-70);
}

.flow__card-title {
  font-weight: var(--weight-bold);
  font-size: 19px;
  line-height: 1.2;
  margin: 10px 0 6px;
  color: var(--text-strong);
}

.flow__card-desc {
  font-weight: var(--weight-light);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ilr-ink-70);
  margin: 0;
  text-wrap: pretty;
}

/* ---- Session list (collapsed on every card but the lead) ----------------- */

.flow__sessions {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: max-height 420ms var(--ease-standard), opacity 300ms ease;
}

.flow__sessions--open {
  max-height: 300px;
  opacity: 1;
}

.flow__session-list {
  border-top: var(--border-width) solid var(--border-hairline);
  margin-top: 14px;
  padding-top: 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.flow__session {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: baseline;
}

.flow__session-code {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 10.5px;
  color: var(--accent);
}

.flow__session-text {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-strong);
}

.flow__session-note { color: var(--ilr-ink-70); }

.flow__session-break {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ilr-ink-70);
}

/* ---- Controls row --------------------------------------------------------
   Design padding is 6px 32px 60px; the horizontal 32px comes from .container. */

.flow__controls {
  padding-top: 6px;
  padding-bottom: 60px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.flow__toggle {
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: var(--weight-black);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  border: var(--border-width) solid var(--accent);
  padding: 9px 18px;
  cursor: pointer;
  min-width: 96px;
}

.flow__toggle:hover,
.flow__toggle:focus-visible {
  background: var(--accent);
  color: var(--surface-card);
}

.flow__ticks {
  flex: 1;
  min-width: 320px;
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.flow__tick-group {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.flow__tick-group--4 { flex: 4; }
.flow__tick-group--2 { flex: 2; }

.flow__tick {
  flex: 1;
  height: 4px;
  background: var(--border-hairline);
  cursor: pointer;
  transition: height 260ms ease, background 260ms ease;
}

.flow__tick--active {
  height: 10px;
  background: var(--accent);
}

.flow__now {
  font-weight: var(--weight-regular);
  font-size: 13.5px;
  color: var(--text-strong);
  min-width: 260px;
  text-align: right;
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 960px) {
  .flow__parts {
    gap: 16px;
    margin-top: 28px;
  }
}

@media (max-width: 620px) {
  .flow__head {
    padding-top: 44px;
    padding-bottom: 24px;
  }

  .flow__parts {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 26px;
  }

  .flow__controls {
    padding-bottom: 44px;
    gap: 18px;
  }

  .flow__ticks {
    min-width: 0;
    flex-basis: 100%;
    gap: 12px;
  }

  .flow__now {
    min-width: 0;
    text-align: left;
  }
}

/* ============================================================================
   FRAGMENT: 50-agentta-readings-grading.css
   ========================================================================== */
/* ============================================================================
   05 — AGENTIC TA
   ========================================================================== */

.agent-ta__lede {
  font-weight: var(--weight-light);
  font-size: 15.5px;
  line-height: var(--leading-relaxed);
  color: var(--ilr-white);
  opacity: 0.75;
  margin: 18px 0 0;
  text-wrap: pretty;
}

/* ---- Panel stack --------------------------------------------------------- */

.agent-ta__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-content: start;
}

.agent-ta__panel {
  border: 1px solid rgba(255,255,255,0.25);
  padding: 24px;
}

.agent-ta__panel--wide { grid-column: span 2; }

.agent-ta__panel--accent { border-color: var(--accent); }

.agent-ta__panel-title {
  font-weight: var(--weight-bold);
  font-size: 17px;
  margin: 0 0 10px;
  color: var(--ilr-white);
}

.agent-ta__panel--wide .agent-ta__panel-title { margin-bottom: 14px; }

.agent-ta__panel-text {
  font-weight: var(--weight-light);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ilr-white);
  opacity: 0.8;
  margin: 0;
  text-wrap: pretty;
}

/* ---- Numbered steps ------------------------------------------------------ */

.agent-ta__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.agent-ta__step-num {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 15px;
  color: var(--accent);
  margin-bottom: 8px;
}

.agent-ta__step-text {
  font-weight: var(--weight-light);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ilr-white);
  opacity: 0.85;
  margin: 0;
  text-wrap: pretty;
}

/* ============================================================================
   05 — READINGS
   ========================================================================== */

.readings__lede {
  font-weight: var(--weight-light);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 16px 0 0;
  text-wrap: pretty;
}

.readings__tool-card {
  margin-top: 22px;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  padding: 22px;
}

.readings__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-content: start;
}

.readings__card {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  padding: 24px;
}

.readings__card-title {
  font-weight: var(--weight-bold);
  font-size: 16px;
  margin: 0 0 10px;
  color: var(--text-strong);
}

.readings__card-text {
  font-weight: var(--weight-light);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
  text-wrap: pretty;
}

/* ============================================================================
   05 — ASSESSMENT & GRADING
   ========================================================================== */

.grading__lede {
  font-weight: var(--weight-light);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 16px 0 0;
  text-wrap: pretty;
}

.grading__groups {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* .grading__group (the three wrapper divs) is a structural hook with no
   styling of its own — the design's wrapper carried no inline style and the
   30px spacing comes from the flex gap above. Intentionally unstyled. */

/* ---- Group heading row --------------------------------------------------- */

.grading__group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.grading__group-name {
  font-weight: var(--weight-bold);
  font-size: 18px;
  color: var(--text-strong);
}

.grading__group-pct {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 16px;
  color: var(--accent);
}

/* ---- Weight bar ---------------------------------------------------------- */

.grading__bar {
  height: 8px;
  background: var(--surface-zone);
  border: 1px solid var(--border-hairline);
  position: relative;
}

.grading__bar-fill {
  position: absolute;
  inset: 0;
  right: auto;
  background: var(--accent);
}

.grading__bar-fill--50 { width: 50%; }
.grading__bar-fill--20 { width: 20%; }
.grading__bar-fill--30 { width: 30%; }

/* ---- Line items ---------------------------------------------------------- */

.grading__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
  margin-top: 14px;
}

.grading__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 7px;
}

.grading__row-label {
  font-size: 14.5px;
  color: var(--text-strong);
}

.grading__row-value {
  font-size: 13.5px;
  color: var(--text-body);
}

.grading__note {
  font-weight: var(--weight-light);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-body);
  margin-top: 12px;
  text-wrap: pretty;
}

/* ============================================================================
   05 — RESPONSIVE
   ========================================================================== */

@media (max-width: 960px) {
  .agent-ta__panels { grid-template-columns: 1fr; }
  .agent-ta__panel--wide { grid-column: auto; }

  .readings__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .agent-ta__steps { grid-template-columns: 1fr; }

  .readings__grid { grid-template-columns: 1fr; }

  .grading__items { grid-template-columns: 1fr; }
  .grading__row { gap: 8px; }
}

/* ============================================================================
   FRAGMENT: 60-policies-faq.css
   ========================================================================== */
/* ============================================================================
   60 — COURSE POLICIES
   ========================================================================== */

/* The band has no top padding; the hairline rule + 56px is what separates it
   from the assessment band above. */

.policies__inner {
  border-top: 1px solid var(--border-hairline);
  padding-top: 56px;
}

/* ---- Card grids ---------------------------------------------------------- */

.policies__grid {
  display: grid;
  gap: 22px;
}

.policies__grid--triple {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 30px;
}

.policies__grid--pair {
  grid-template-columns: 1fr 1fr;
  margin-top: 22px;
}

/* ---- Cards --------------------------------------------------------------- */

.policies__card {
  padding: 26px;
}

.policies__card--framed {
  border: 1px solid var(--border-frame);
}

.policies__card--hairline {
  border: 1px solid var(--border-hairline);
}

.policies__card--fill {
  background: var(--surface-zone);
}

.policies__card-title {
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 10px;
  color: var(--text-strong);
}

.policies__card-body {
  font-weight: 300;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
  text-wrap: pretty;
}

/* ============================================================================
   60 — FAQ
   ========================================================================== */

/* Same hairline-and-56px continuation as Policies, applied to the .split rail. */

.faq__inner {
  border-top: 1px solid var(--border-hairline);
  padding-top: 56px;
}

.faq-item {
  border-bottom: 1px solid var(--border-hairline);
}

.faq__head {
  padding: 20px 0;
  display: grid;
  grid-template-columns: 1fr 14px;
  gap: 18px;
  align-items: center;
  cursor: pointer;
}

.faq__title {
  font-weight: 700;
  font-size: 17px;
  margin: 0;
  color: var(--text-strong);
  transition: color 200ms ease;
}

/* ---- Plus / minus icon ----------------------------------------------------
   Two 14x2 bars stacked; the second one rotates 90deg to make the plus. */

.faq__icon {
  position: relative;
  width: 14px;
  height: 14px;
  justify-self: end;
}

.faq__bar {
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
  background: var(--accent);
}

.faq__bar--toggle {
  transform: rotate(90deg);
  transition: transform 300ms var(--ease-standard);
}

/* ---- Answer -------------------------------------------------------------- */

/* No-JS baseline: every answer is open and at its natural height. The
   accordion is layered on top only once .js is set, so a failed script leaves
   the content readable rather than sealed behind a 0px cap. */

.faq__body {
  overflow: hidden;
}

/* visibility, not just max-height: a 0px overflow-hidden box is still read out
   by screen readers, so aria-expanded="false" would be lying about it. The
   delay holds it visible for the length of the collapse, then drops it. */

.js .faq__body {
  max-height: 0px;
  opacity: 0;
  visibility: hidden;
  transition:
    max-height 340ms var(--ease-standard),
    opacity 240ms ease,
    visibility 0s linear 340ms;
}

.faq__answer {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0 0 22px;
  max-width: 720px;
  text-wrap: pretty;
}

/* ---- Initial open item ----------------------------------------------------
   The design ships the first item expanded. These are pre-JS initial values
   only: js/site.js writes inline max-height / opacity / transform / color,
   which outrank these class rules from the moment it runs. */

.faq-item--open .faq__title {
  color: var(--text-accent);
}

.faq-item--open .faq__bar--toggle {
  transform: rotate(0deg);
}

.js .faq-item--open .faq__body {
  max-height: 300px;
  opacity: 1;
  visibility: visible;
  transition:
    max-height 340ms var(--ease-standard),
    opacity 240ms ease,
    visibility 0s linear 0s;
}

/* ============================================================================
   60 — POLICIES / FAQ — RESPONSIVE
   ========================================================================== */

@media (max-width: 960px) {
  .policies__grid--triple {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .policies__inner,
  .faq__inner {
    padding-top: 40px;
  }

  .policies__grid--triple,
  .policies__grid--pair {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   FRAGMENT: 90-footer.css
   ========================================================================== */
/* ============================================================================
   90 — FOOTER
   ========================================================================== */

.site-footer {
  background: var(--surface-ink);
  color: var(--text-on-dark);
}

/* ---- Dotted red strip ------------------------------------------------- */
/* Near-miss of .dots-red: the dot alpha here is 0.35, not 0.30. */

.site-footer__rule {
  height: 16px;
  background-color: var(--accent);
  background-image: radial-gradient(rgba(34,34,34,0.35) 1.3px, transparent 1.4px);
  background-size: 7px 7px;
}

/* ---- Row --------------------------------------------------------------- */

.site-footer__inner {
  padding-top: 44px;
  padding-bottom: 34px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}

.site-footer__mark {
  height: 40px;
}

.site-footer__tagline {
  font-weight: var(--weight-thin);
  font-size: 13.5px;
  line-height: 1.6;
  opacity: 0.8;
  margin: 14px 0 0;
}

.site-footer__colophon {
  font-size: 12.5px;
  opacity: 0.6;
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 620px) {
  .site-footer__inner {
    padding-top: 32px;
    padding-bottom: 28px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}