/* =============================================================================
   Stanford AI Training Hub — shared shell + design system (hand-written, no
   frameworks). Loaded by every public hub page: /, /browse, /tracks/:id,
   /whats-new, /learning-paths and /library/:id.

   Visual direction: the approved "AI Catalyst" editorial mockup —
     • Source Serif 4 (serif, 400/600) for huge display headings with tight
       line-height and negative tracking; Source Sans 3 for body/UI; Roboto Mono for
       eyebrows, kickers, labels and meta (uppercase, letter-spaced).
     • Palette: ink #2e2d29 · ink-soft #53565a · forest #2e2d29 (dark surface:
       brand mark, featured cards, live-session band, footer) · teal #b1040e
       (THE interactive accent) · mint #f2dcd9 · lime #d98c8c (accent-on-dark)
       · paper #ffffff (page) · white #ffffff (cards) · line #e4e1db.
     • Cardinal #8c1515 appears ONLY in the one-line institution strip.
   Contrast (WCAG 2.2 AA): teal on paper 4.7:1, on white 4.9:1; ink-soft on
   paper 7.1:1; forest on paper 13.9:1; lime on forest 12.3:1; #820000 on
   mint 6.0:1; #c6c3bd on forest 9.9:1.
   ========================================================================== */

:root {
  --ink: #2e2d29;
  --ink-soft: #53565a;
  --forest: #2e2d29;
  --forest-deep: #232220;
  --teal: #b1040e;
  --teal-dark: #820000;
  --mint: #f2dcd9;
  --mint-soft: #faf4f3;
  --lime: #d98c8c;
  --paper: #ffffff;
  --white: #ffffff;
  --line: #e4e1db;
  --line-soft: #efede9;
  --cardinal: #8c1515;         /* institution strip ONLY */
  --shadow: 0 18px 55px rgba(46, 45, 41, .12);
  --shadow-1: 0 2px 10px rgba(46, 45, 41, .07);
  --sans: "Source Sans 3", system-ui, "Segoe UI", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "Roboto Mono", Consolas, monospace;

  /* Legacy aliases (rules ported from earlier passes reference these) */
  --grey: var(--ink-soft);
  --muted: var(--ink-soft);
  --border: var(--line);
  --border-soft: var(--line-soft);
  --fog: #f6f5f2;
  --fill: #f6f5f2;
  --card: var(--white);
  --red: var(--teal);
  --red-dark: var(--teal-dark);
  --green: #820000;
  --ok: #820000;
  --warn: #92510a;
  --shadow-2: var(--shadow-1);
  --shadow-3: var(--shadow);
  --radius: 4px;
  --radius-lg: 6px;
  --font: var(--sans);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
/* Stanford brand compliance: "Links must be distinguishable from
   regular text using styles rather than colors alone. Underline is
   the recommended style." Body links are therefore underlined by
   default; components that are unmistakably controls (nav, chips,
   buttons, cards) opt out below, since their shape already carries
   the affordance. */
a { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal-dark); text-decoration-thickness: 2px; }
.hub-nav a, .hub-wordmark, .hub-topstrip a, .hub-footer a,
.hub-chip, .lp-jump a, .vs-jump a, .hub-btn, .path, .featured,
.lp-path, .vs-track, .vs-course, .catalog-card a, .result-card h3 a,
.page-crumbs a, .foot-brand, .lib-ctas a, .result-cta {
  text-decoration: none;
}
.hub-footer a:hover, .hub-topstrip a:hover, .page-crumbs a:hover,
.result-card h3 a:hover, .catalog-card a:hover {
  text-decoration: underline; text-underline-offset: 3px;
}
/* Links that ARE dark forest surfaces (the whole card is the anchor) must
   not take the global teal-dark hover - it is near-invisible on forest
   (owner report 2026-08-29). They keep white text; the arrow circles
   carry the hover affordance instead. */
a.vs-track:hover, a.vs-track:hover h3,
a.featured:hover, a.featured:hover h3,
.lp-jump a:hover, .vs-jump a:hover,
.hub-section.dark a:hover { color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
:focus-visible { outline: 3px solid #d46a6a; outline-offset: 3px; border-radius: 2px; }
::selection { background: rgba(140, 21, 21, .18); }

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 20px;
  vertical-align: -4px;
  flex-shrink: 0;
  color: var(--ink-soft);
  /* Hidden until hub-shell.js confirms the ligature font loaded — otherwise
     icons render as their literal names on devices where the Google-hosted
     font is blocked or times out. All font icons are aria-hidden decoration
     with text labels, so staying hidden is the correct failure mode. */
  visibility: hidden;
}
html.icons-ready .material-symbols-outlined { visibility: visible; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Display type — Source Serif 4, huge and tight */
h1, h2, h3, h4 { color: inherit; margin: 0; }
h1 { font: 600 clamp(28px, 3.2vw, 40px)/1.05 var(--serif); letter-spacing: -.03em; }
/* Heroes keep the display scale; detail-page h1s sit at h2 scale (owner
   ruling 2026-08-31: 'these must be h2 and not h1'). */
.hub-hero h1 { font: 600 clamp(44px, 5vw, 75px)/.95 var(--serif); letter-spacing: -.04em; }
h1 em { color: var(--teal); font-style: italic; font-weight: 500; }
h2 { font: 600 clamp(28px, 3.2vw, 40px)/1 var(--serif); letter-spacing: -.03em; }
h3 { font: 600 1.35rem/1.15 var(--serif); letter-spacing: -.02em; }

.hub-wrap { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }

.kicker, .hub-kicker-label {
  font: 500 14px var(--mono); color: var(--teal);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px;
}
.eyebrow-line {
  font: 500 14px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal); display: flex; align-items: center; gap: 10px; margin: 0 0 20px;
}
/* dash removed per owner 2026-08-29 ("looks like an emdash") */

.text-link {
  font: 700 13px var(--sans); color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--ink); padding-bottom: 4px;
}
.text-link span { display: inline-block; margin-left: 8px; transition: transform .2s; }
.text-link:hover { color: var(--teal); border-color: var(--teal); }
.text-link:hover span { transform: translateX(4px); }

/* ---------------------------------------------------------------------------
   Shell: skip link · cardinal institution strip · sticky blurred header
   ------------------------------------------------------------------------ */
.skip-link {
  position: absolute; left: -999px; top: 12px; z-index: 200;
  background: var(--white); color: var(--ink); border: 1px solid var(--line);
  padding: 10px 16px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 12px; }

/* The ONLY cardinal element on the site */
.hub-topstrip { height: 34px; background: var(--cardinal); color: #fff; display: flex; align-items: center; }
.hub-topstrip .hub-wrap {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem;
  font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 0;
}
.hub-topstrip a { color: #fff; text-decoration: none; }
.hub-topstrip a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hub-topstrip .sep { opacity: .6; }
.hub-topstrip .strip-tag { opacity: .92; }

.hub-header {
  position: sticky; top: 0; z-index: 40;
  height: 82px; display: flex; align-items: center;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(46, 45, 41, .12);
  backdrop-filter: blur(16px);
}
.hub-header .hub-wrap { display: flex; align-items: center; gap: 32px; width: min(1200px, calc(100% - 48px)); }
.hub-wordmark {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 800; letter-spacing: -.03em; font-size: 20px; font-family: var(--sans);
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.hub-wordmark .brand-mark {
  width: 34px; height: 34px; border-radius: 50%; background: var(--cardinal);
  display: grid; place-items: center; color: #fff; flex-shrink: 0;
  font: 600 15px var(--serif); letter-spacing: 0;
}
.hub-wordmark em { color: inherit; font-style: normal; padding: 0; }
.hub-wordmark:hover { color: var(--ink); }

.hub-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; font-size: 14px; font-weight: 600; }
.hub-nav a { position: relative; color: var(--ink); text-decoration: none; padding: 4px 0; }
.hub-nav a .material-symbols-outlined { display: none; }
.hub-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px;
  background: var(--teal); transition: .25s;
}
.hub-nav a:hover::after, .hub-nav a[aria-current="page"]::after { right: 0; }
.hub-nav a:hover { color: var(--ink); }

.hub-ask {
  display: inline-flex; align-items: center; gap: 9px;
  border: 0; background: var(--red); color: #fff; border-radius: 999px;
  padding: 12px 18px; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: transform .2s, background .2s;
}
.hub-ask:hover { transform: translateY(-2px); background: var(--red-dark); }
.hub-ask .material-symbols-outlined { font-size: 17px; color: #fff; }

.hub-menu-btn {
  display: none; margin-left: auto; border: 0; background: transparent;
  color: var(--ink); padding: 8px; min-width: 44px; min-height: 44px; cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Footer — Stanford's solid-black identity treatment (owner ruling
   2026-08-29: "V1" — the very first hub build's footer, not the fog+cardinal
   pass and not the Codex mockup's dark-forest one). Black (#2e2d29) is one
   of Stanford's primary identity colors alongside Cardinal, white and cool
   grey — this is a legitimate, simpler Stanford pattern.
   ------------------------------------------------------------------------ */
/* Deeper than the dark content bands (#2e2d29) + a cardinal rule, so a page
   ending in a dark section (e.g. home's live-sessions band) doesn't visually
   merge into the footer (owner report 2026-08-31). */
.hub-footer { margin-top: auto; background: #1d1c19; color: #fff; border-top: 3px solid var(--cardinal); }
.hub-footer .hub-wrap { display: flex; flex-wrap: wrap; gap: 1.2rem 3rem; padding: 2.2rem 0 1.8rem; align-items: flex-start; }
.hub-footer .foot-brand {
  color: #fff; text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 1.5rem;
  line-height: 1.05; letter-spacing: -.01em;
}
.hub-footer .foot-brand:hover { color: #fff; }
.hub-footer nav { flex: 1; min-width: 260px; }
.hub-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: 0 0 .5rem; padding: 0; }
.hub-footer a { color: #fff; text-decoration: none; font-size: .9rem; }
.hub-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hub-footer .foot-legal a { color: rgba(255, 255, 255, .82); font-size: .84rem; }
.hub-footer p { color: rgba(255, 255, 255, .75); font-size: .82rem; margin: .8rem 0 0; }

/* Page scaffolding */
.hub-page { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.hub-section { padding: 100px 0; border-bottom: 1px solid var(--line); }
.hub-section.detail-section { padding-top: 40px; }
.hub-section.alt { background: #f6f5f2; }
.hub-section.dark { background: var(--forest); color: #fff; border-bottom: 0; }
.hub-section.dark .kicker { color: var(--lime); }

.hub-section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 46px; }
.hub-section-head .sec-icon, .hub-section-head .rule { display: none; }
.hub-section-head .head-copy { max-width: 410px; color: var(--ink-soft); margin: 0; font-size: 15px; }
.hub-section-head .sec-link {
  font: 700 13px var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--ink); padding-bottom: 4px; display: inline-flex; align-items: center; gap: 8px;
}
.hub-section-head .sec-link:hover { color: var(--teal); border-color: var(--teal); }
.hub-section-head .sec-link .material-symbols-outlined { font-size: 16px; color: currentColor; }
.hub-section-sub { color: var(--ink-soft); margin: -26px 0 46px; max-width: 500px; font-size: 15px; }

/* ---------------------------------------------------------------------------
   Hero — asymmetric two-column grid, giant serif headline with italic accent
   ------------------------------------------------------------------------ */
.hub-hero { position: relative; overflow: hidden; padding: 86px 0 56px; }
.hub-hero::before {
  content: ""; position: absolute; width: 420px; height: 420px;
  border: 1px solid rgba(140, 21, 21, .24); border-radius: 50%;
  right: -105px; top: -190px;
  box-shadow: 0 0 0 42px rgba(140, 21, 21, .04), 0 0 0 84px rgba(140, 21, 21, .025);
}
.hub-hero .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: center; position: relative; }
.hub-hero .hero-kicker {
  font: 500 14px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal); display: flex; align-items: center; gap: 10px; margin: 0 0 20px;
  background: transparent; border: 0; padding: 0;
}
/* dash removed per owner 2026-08-29 ("looks like an emdash") */
.hub-hero .hero-kicker .material-symbols-outlined { display: none; }
.hub-hero p.lede { max-width: 500px; margin: 0 0 30px; color: var(--ink-soft); font-size: 18px; }

.hero-search { max-width: none; margin: 0; }
.hero-search .search-shell {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid rgba(46, 45, 41, .12); border-radius: 4px;
  padding: 9px 9px 9px 20px; box-shadow: var(--shadow); overflow: visible;
}
/* Inline SVG data-URI, NOT the icon font: on devices where the Material
   Symbols font fails to load, ligature icons degrade to their literal words
   ("search" showed inside the box — owner's manager, 2026-08-31). */
.hero-search .search-shell::before {
  content: ""; width: 20px; height: 20px; flex-shrink: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23b1040e" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-5.5-5.5"/></svg>') center / contain no-repeat;
}
.hero-search .search-shell:focus-within { border-color: var(--teal); }
.hero-search input { flex: 1; min-width: 0; border: 0; padding: 8px 0; min-height: 0; font-size: 16px; color: var(--ink); background: transparent; }
.hero-search input::placeholder { color: var(--ink-soft); }
.hero-search input:focus { outline: none; }
.hero-search button[type="submit"] {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: var(--teal); color: #fff; cursor: pointer;
  padding: 13px 17px; border-radius: 3px; font-weight: 700; font-size: 15px;
}
.hero-search button[type="submit"]:hover { background: var(--teal-dark); }
.hero-search button[type="submit"] .material-symbols-outlined { display: none; }

.hero-examples { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-top: 15px; align-items: center; }
.hero-examples .lbl { color: var(--ink-soft); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .09em; }

.hero-signal {
  margin-top: 34px; display: flex; align-items: center; gap: 14px;
  font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft);
}
.hero-signal i { width: 8px; height: 8px; border-radius: 50%; background: #b1040e; box-shadow: 0 0 0 5px rgba(177, 4, 14, .12); }

/* Marquee strip between hero and content */
.hub-marquee { background: var(--forest); color: #fff; overflow: hidden; border-block: 1px solid rgba(255, 255, 255, .1); }
.hub-marquee .marquee-track {
  width: max-content; display: flex; gap: 45px; padding: 10px 0;
  animation: hub-marquee-scroll 32s linear infinite;
  font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .12em;
}
.hub-marquee .marquee-track span::before { content: "✦"; color: var(--lime); margin-right: 45px; }
@keyframes hub-marquee-scroll { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------------
   Start here — asymmetric 40/60: dark featured card + numbered path rows
   ------------------------------------------------------------------------ */
.start-layout { display: grid; grid-template-columns: 40% 60%; min-height: 430px; background: var(--white); border: 1px solid var(--line); }
.featured {
  background: var(--forest); color: #fff; padding: 52px; text-decoration: none;
  display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.featured::after {
  content: "AI"; position: absolute; right: -12px; bottom: -40px;
  color: rgba(255, 255, 255, .04); font: 600 190px var(--serif);
}
.num { font: 400 11px var(--mono); letter-spacing: .1em; color: var(--lime); text-transform: uppercase; }
.featured h3 { font: 600 clamp(26px, 2.4vw, 34px)/1.05 var(--serif); letter-spacing: -.03em; margin: 20px 0 16px; max-width: 340px; position: relative; z-index: 1; color: #fff; }
.featured p { color: #c6c3bd; max-width: 330px; position: relative; z-index: 1; margin: 0; font-size: 15px; }
.circle-arrow {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4);
  display: grid; place-items: center; margin-top: 30px; position: relative; z-index: 1;
  transition: .2s; color: #fff; font-size: 20px;
}
.featured:hover .circle-arrow, .featured:focus-visible .circle-arrow { background: var(--lime); color: var(--forest); border-color: var(--lime); transform: translateX(5px); }

.path-list { display: grid; grid-auto-rows: 1fr; }
.path {
  padding: 42px 48px; display: grid; grid-template-columns: 62px 1fr 42px; align-items: center; gap: 18px;
  border-bottom: 1px solid var(--line); transition: background .2s; text-decoration: none; color: var(--ink);
}
.path:last-child { border-bottom: 0; }
.path:hover { background: var(--mint-soft); color: var(--ink); }
.path-index { font: 500 12px var(--mono); color: var(--teal); }
.path h3 { font: 600 24px/1.15 var(--serif); letter-spacing: -.02em; margin: 0 0 8px; }
.path p { color: var(--ink-soft); margin: 0; font-size: 15px; }
.path .path-arrow { font-size: 22px; color: var(--ink); transition: .2s; }
.path:hover .path-arrow { transform: translateX(5px); }

/* ---------------------------------------------------------------------------
   Vendor academies — sage band, editorial track rows
   ------------------------------------------------------------------------ */
.track-list { border-top: 1px solid rgba(46, 45, 41, .3); }
.track {
  display: grid; grid-template-columns: 90px 1.1fr 1fr 150px; gap: 28px; align-items: center;
  padding: 32px 0; border-bottom: 1px solid rgba(46, 45, 41, .2);
  transition: padding .2s; text-decoration: none; color: var(--ink);
}
.track:hover { padding-left: 12px; color: var(--ink); }
.vendor-circle {
  width: 58px; height: 58px; border: 1px solid rgba(46, 45, 41, .4); border-radius: 50%;
  display: grid; place-items: center; font: 600 24px var(--serif); color: var(--ink); background: transparent;
}
.track-label { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--teal); margin-bottom: 6px; }
.track h3 { font: 600 24px/1.15 var(--serif); letter-spacing: -.02em; margin: 0; }
.track-desc { color: var(--ink-soft); font-size: 15px; margin: 0; }
.track-meta { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; text-align: right; color: var(--ink); }

/* ---------------------------------------------------------------------------
   Learning Paths page (owner-approved mockup: learning-paths-redesign.html)
   ------------------------------------------------------------------------ */
.lp-hero { padding: 86px 0 90px; overflow: hidden; position: relative; }
.lp-hero::after { content: ""; position: absolute; width: 560px; height: 560px; border: 1px solid rgba(20,123,114,.14); border-radius: 50%; right: -160px; top: -230px; box-shadow: 0 0 0 50px rgba(20,123,114,.03), 0 0 0 100px rgba(20,123,114,.02); }
.lp-hero-grid { display: grid; grid-template-columns: 1fr .75fr; gap: 80px; align-items: end; position: relative; z-index: 1; }
.lp-h1 { font: 600 clamp(44px, 5vw, 75px)/.92 var(--serif); letter-spacing: -.045em; margin: 0; }
.lp-h2 { font: 600 clamp(30px, 3.2vw, 42px)/1 var(--serif); letter-spacing: -.03em; margin: 0; }
.lp-hero-copy { font-size: 19px; color: var(--ink-soft); max-width: 520px; margin: 0 0 28px; }
.lp-stats { display: flex; gap: 30px; border-top: 1px solid var(--line); padding-top: 20px; }
.lp-stats strong { display: block; font: 600 24px var(--serif); }
.lp-stats span { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.lp-jump { background: var(--forest); color: #fff; }
.lp-jump .hub-wrap { display: flex; align-items: center; gap: 18px; overflow: auto; scrollbar-width: none; }
.lp-jump .hub-wrap::-webkit-scrollbar { display: none; }
.lp-jump span { font: 500 11.5px var(--mono); color: var(--lime); letter-spacing: .11em; text-transform: uppercase; white-space: nowrap; }
.lp-jump a { padding: 17px 10px; white-space: nowrap; color: #e6e4e0; font-size: 14.5px; font-weight: 600; border-bottom: 2px solid transparent; text-decoration: none; }
.lp-jump a:hover { color: #fff; border-color: var(--lime); }
.lp-paths { padding: 100px 0; }
.lp-section-top { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 50px; }
.lp-section-top p { max-width: 400px; margin: 0; color: var(--ink-soft); }
.lp-path { display: grid; grid-template-columns: 180px 1fr; border-top: 1px solid var(--line); min-height: 330px; }
.lp-path:last-of-type { border-bottom: 1px solid var(--line); }
.lp-side { padding: 44px 28px 40px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.lp-num { font: 500 12px var(--mono); color: var(--teal); text-transform: uppercase; letter-spacing: .08em; }
.lp-audience { font: 500 11.5px var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.lp-level { display: inline-flex; align-items: center; gap: 7px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.lp-level::before { content: ""; width: 7px; height: 7px; background: var(--teal); border-radius: 50%; }
.lp-main { padding: 42px 0 44px 48px; }
.lp-head { display: grid; grid-template-columns: 1fr 220px; gap: 50px; align-items: start; }
.lp-path h3 { font: 600 clamp(24px, 2.2vw, 32px)/1.05 var(--serif); letter-spacing: -.025em; margin: 0 0 15px; }
.lp-outcome { color: var(--ink-soft); max-width: 610px; margin: 0; }
.lp-duration { text-align: right; font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.lp-duration strong { display: block; font: 600 24px var(--serif); text-transform: none; letter-spacing: 0; color: var(--ink); }
.lp-steps { display: grid; margin-top: 45px; position: relative; }
.lp-steps::before { content: ""; height: 1px; background: var(--line); position: absolute; left: 8px; right: 8px; top: 10px; }
.lp-step { position: relative; padding: 30px 20px 0 0; font-size: 14px; color: var(--ink-soft); line-height: 1.45; }
.lp-step::before { content: ""; width: 10px; height: 10px; background: var(--paper); border: 2px solid var(--teal); border-radius: 50%; position: absolute; top: 4px; left: 0; z-index: 1; }
.lp-step strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.lp-action { display: inline-flex; align-items: center; gap: 11px; font-weight: 750; margin-top: 32px; color: var(--teal); text-decoration: none; }
.lp-action i { width: 35px; height: 35px; border: 1px solid var(--teal); border-radius: 50%; display: grid; place-items: center; font-style: normal; transition: .2s; }
.lp-path:hover .lp-action i { background: var(--teal); color: #fff; transform: translateX(4px); }
.lp-path.dark { background: var(--forest); color: #fff; border: 0; }
.lp-path.dark .lp-side { border-color: rgba(255,255,255,.18); padding-left: 28px; }
.lp-path.dark .lp-main { padding-right: 28px; }
.lp-path.dark .lp-outcome, .lp-path.dark .lp-step, .lp-path.dark .lp-audience, .lp-path.dark .lp-duration { color: #b9b6b0; }
.lp-path.dark .lp-step strong, .lp-path.dark .lp-duration strong { color: #fff; }
.lp-path.dark .lp-steps::before { background: rgba(255,255,255,.22); }
.lp-path.dark .lp-step::before { background: var(--forest); border-color: var(--lime); }
.lp-path.dark .lp-action, .lp-path.dark .lp-num { color: var(--lime); }
.lp-path.dark .lp-action i { border-color: var(--lime); }
.lp-path.dark:hover .lp-action i { background: var(--lime); color: var(--forest); }
.lp-path.dark .lp-level::before { background: var(--lime); }
.lp-cta { background: #faf4f3; padding: 90px 0; }
.lp-cta-grid { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; }
.lp-cta-grid h2 { max-width: 740px; }
.lp-cta-grid button { background: var(--forest); color: #fff; border: 0; border-radius: 99px; padding: 15px 21px; font: inherit; font-weight: 750; cursor: pointer; }
.lp-cta-grid button:hover { background: var(--teal); }
@media (max-width: 850px) {
  .lp-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .lp-path { grid-template-columns: 110px 1fr; }
  .lp-main { padding-left: 28px; }
  .lp-head { grid-template-columns: 1fr; }
  .lp-duration { text-align: left; }
  .lp-steps { grid-template-columns: 1fr 1fr !important; gap: 25px; }
  .lp-steps::before { display: none; }
}
@media (max-width: 560px) {
  .lp-hero { padding: 58px 0 65px; }
  .lp-h1 { font-size: 58px; }
  .lp-stats { gap: 18px; }
  .lp-paths { padding: 70px 0; }
  .lp-section-top { display: block; }
  .lp-section-top p { margin-top: 20px; }
  .lp-path { display: block; }
  .lp-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 25px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .lp-path.dark .lp-side { padding-left: 15px; }
  .lp-main { padding: 30px 0 48px; }
  .lp-path.dark .lp-main { padding-inline: 15px; }
  .lp-steps { grid-template-columns: 1fr !important; }
  .lp-step { padding-left: 27px; }
  .lp-step::before { top: 34px; }
  .lp-cta-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Vendor Sources page (owner-approved mockup: vendor-sources-redesign.html)
   ------------------------------------------------------------------------ */
.vs-hero { padding: 84px 0 72px; position: relative; overflow: hidden; }
.vs-hero::after { content: "SOURCE"; position: absolute; right: -25px; bottom: -52px; color: rgba(20,123,114,.035); font: 600 190px var(--serif); pointer-events: none; }
.vs-hero-grid { display: grid; grid-template-columns: 1fr .8fr; gap: 80px; align-items: end; position: relative; z-index: 1; }
.vs-hero-grid > p { font-size: 19px; color: var(--ink-soft); max-width: 530px; margin: 0; }
.vs-controls { background: var(--forest); color: #fff; }
.vs-controls .hub-wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; }
.vs-jump { display: flex; overflow: auto; scrollbar-width: none; }
.vs-jump::-webkit-scrollbar { display: none; }
.vs-jump a { padding: 18px 14px; white-space: nowrap; color: #e6e4e0; font-size: 14.5px; font-weight: 600; border-bottom: 2px solid transparent; text-decoration: none; }
.vs-jump a:hover { color: #fff; border-color: var(--lime); }
.vs-controls-label { font: 500 11.5px var(--mono); color: var(--lime); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.vs-search { border-left: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; gap: 6px; padding-left: 20px; }
.vs-search input { border: 0; background: transparent; color: #fff; outline: 0; width: 180px; padding: 12px 0; }
.vs-search input::placeholder { color: #a3a09a; }
.vs-search input:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.vs-directory { padding: 95px 0; }
.vs-vendor { scroll-margin-top: 140px; display: grid; grid-template-columns: 240px 1fr; border-top: 1px solid var(--line); padding: 55px 0 80px; }
.vs-side { padding-right: 40px; }
.vs-letter { width: 58px; height: 58px; border: 1px solid #a3a09a; border-radius: 50%; display: grid; place-items: center; font: 600 26px var(--serif); margin-bottom: 20px; }
.vs-vendor:nth-of-type(even) .vs-letter { background: var(--teal); border-color: var(--teal); color: #fff; }
.vs-vendor h2 { font: 600 30px/1.05 var(--serif); letter-spacing: -.025em; margin: 0 0 13px; }
.vs-note { color: var(--ink-soft); font-size: 15px; margin: 0; line-height: 1.5; }
.vs-track { background: var(--forest); color: #fff; padding: 30px 34px; display: grid; grid-template-columns: 1fr auto; gap: 25px; align-items: center; margin-bottom: 12px; position: relative; overflow: hidden; text-decoration: none; }
.vs-track::after { content: "→"; position: absolute; right: 105px; top: -40px; color: rgba(255,255,255,.04); font: 600 150px var(--serif); pointer-events: none; }
.vs-track-label { font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--lime); }
.vs-track h3 { font: 600 24px/1.1 var(--serif); margin: 9px 0 8px; }
.vs-track p { margin: 0; color: #b9b6b0; max-width: 670px; font-size: 15px; line-height: 1.55; }
.vs-track-link { width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1; transition: .2s; }
.vs-track:hover .vs-track-link { background: var(--lime); border-color: var(--lime); color: var(--forest); transform: translateX(4px); }
.vs-course-list { border-top: 1px solid var(--line); }
.vs-course { display: grid; grid-template-columns: 110px 1fr 160px 42px; gap: 22px; align-items: center; padding: 25px 0; border-bottom: 1px solid var(--line); transition: .2s; text-decoration: none; color: inherit; }
.vs-course:hover { padding-left: 10px; background: rgba(46,45,41,.035); }
.vs-level { font: 500 11.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--teal); }
.vs-course h3 { font: 600 22px/1.15 var(--serif); margin: 0 0 6px; }
.vs-course p { font-size: 15px; color: var(--ink-soft); margin: 0; max-width: 690px; line-height: 1.55; }
.vs-meta { text-align: right; font: 400 11.5px/1.7 var(--mono); text-transform: uppercase; color: var(--ink-soft); }
.vs-open { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: .2s; }
.vs-course:hover .vs-open { background: var(--teal); border-color: var(--teal); color: #fff; }
.vs-notice { background: #faf4f3; padding: 70px 0; }
.vs-notice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.vs-notice h2 { font: 600 30px/1.1 var(--serif); letter-spacing: -.025em; margin: 0; }
.vs-notice p { margin: 0; color: var(--ink-soft); }
.vs-notice strong { color: var(--ink); }
@media (max-width: 900px) {
  .vs-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .vs-controls .hub-wrap { grid-template-columns: auto 1fr; }
  .vs-search { display: none; }
  .vs-vendor { grid-template-columns: 1fr; }
  .vs-side { display: grid; grid-template-columns: 80px 1fr; gap: 0 18px; padding: 0 0 30px; }
  .vs-letter { grid-row: 1 / 3; }
  .vs-track { padding: 26px; }
  .vs-course { grid-template-columns: 90px 1fr 40px; }
  .vs-meta { grid-column: 2; text-align: left; }
  .vs-notice-grid { grid-template-columns: 1fr; gap: 25px; }
}
@media (max-width: 560px) {
  .vs-hero { padding: 58px 0; }
  .vs-controls .hub-wrap { display: block; }
  .vs-controls-label { display: block; padding-top: 14px; }
  .vs-directory { padding: 65px 0; }
  .vs-vendor { padding: 40px 0 60px; }
  .vs-track { grid-template-columns: 1fr; }
  .vs-track-link { display: none; }
  .vs-course { grid-template-columns: 1fr 38px; gap: 12px; }
  .vs-level { grid-column: 1; }
  .vs-course h3 { font-size: 22px; }
  .vs-meta { grid-column: 1; }
  .vs-open { grid-column: 2; grid-row: 1 / 4; }
}

/* LinkedIn Learning picks strip (home, inside the Vendor academies band) */
#linkedin-picks { margin-top: 3rem; border-top: 1px solid rgba(46, 45, 41, .3); padding-top: 2rem; }
.li-picks-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.4rem; }
.li-picks-head h3 { font: 600 1.6rem/1.1 var(--serif); letter-spacing: -.02em; margin: 0; }
.li-picks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.li-pick {
  display: flex; flex-direction: column; gap: .45rem; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--line); padding: 1.1rem 1.2rem;
  transition: border-color .15s ease, transform .15s ease;
}
.li-pick:hover { border-color: var(--teal); transform: translateY(-2px); }
.li-pick-label { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--teal); }
.li-pick strong { font: 600 1.15rem/1.25 var(--serif); letter-spacing: -.01em; }
.li-pick p { margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   What's new — sticky intro column + dated update rows
   ------------------------------------------------------------------------ */
.updates-grid { display: grid; grid-template-columns: 34% 66%; gap: 54px; }
.update-intro { position: sticky; top: 140px; align-self: start; }
.update-intro p { color: var(--ink-soft); max-width: 330px; margin: 24px 0; }
.updates { border-top: 1px solid var(--line); }
.update {
  display: grid; grid-template-columns: 88px 1fr 92px; gap: 18px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.update .date { font: 500 11px var(--mono); color: var(--ink-soft); text-transform: uppercase; }
.update-title { font-weight: 700; letter-spacing: -.015em; color: var(--ink); text-decoration: none; font-size: 16px; }
.update-title:hover { color: var(--teal); }
.badge {
  justify-self: end; font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .08em;
  background: var(--mint); color: #820000; padding: 5px 9px; border-radius: 99px; white-space: nowrap;
}
.badge.changed { background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft); }
.hub-section.dark .badge { background: rgba(220, 237, 168, .16); color: var(--lime); }

/* Vendor-updates placeholder panel on /whats-new */
.whatsnew-vendor { background: var(--mint-soft); border: 1px solid var(--line); border-left: 3px solid var(--teal); padding: 30px 34px; margin-top: 54px; }
.whatsnew-vendor h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 12px; }
.whatsnew-vendor p { color: var(--ink-soft); font-size: 14px; margin: 0; max-width: 62ch; }

/* ---------------------------------------------------------------------------
   Live sessions — dark forest band, serif date numeral event cards
   ------------------------------------------------------------------------ */
.event-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.event-stack { display: grid; gap: 0; }
.event-card {
  border-top: 1px solid rgba(255, 255, 255, .35); border-bottom: 1px solid rgba(255, 255, 255, .35);
  padding: 32px 0; display: grid; grid-template-columns: 90px 1fr; gap: 28px;
}
.event-card + .event-card { border-top: 0; }
.event-date { font: 600 38px/1 var(--serif); text-align: center; color: #fff; }
.event-date small { display: block; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; color: var(--lime); }
.event-info .tag { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.event-info h3 { font: 600 25px/1.15 var(--serif); letter-spacing: -.02em; margin: 12px 0; color: #fff; }
.event-info p { color: #b9b6b0; margin: 0; font-size: 14px; }
.event-info .text-link { color: #fff; border-color: #fff; display: inline-block; margin-top: 20px; }
.event-info .text-link:hover { color: var(--lime); border-color: var(--lime); }

/* ---------------------------------------------------------------------------
   Cards / chips / buttons (shared components used across pages)
   ------------------------------------------------------------------------ */
.hub-grid { display: grid; gap: 20px; }
.hub-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.hub-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.hub-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  background: var(--white); border: 1px solid var(--line); padding: 26px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.hub-card:hover, .hub-card:focus-within { border-color: var(--teal); box-shadow: var(--shadow-1); }
.hub-card .card-link { color: inherit; text-decoration: none; }
.hub-card .card-link::after { content: ""; position: absolute; inset: 0; }
.hub-card .card-link:hover { color: var(--teal); }
.hub-card .card-title { font: 600 22px/1.15 var(--serif); letter-spacing: -.015em; }
.hub-card .card-meta { color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.hub-card .card-meta .dot { padding: 0 .3rem; opacity: .6; }
.hub-card .card-desc { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0; }

.hub-tag {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em;
  color: var(--teal); background: transparent; padding: 0;
}
.hub-tag .material-symbols-outlined { display: none; }

.card-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper); border: 1px solid var(--line-soft); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-thumb .thumb-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
.card-thumb .thumb-play .material-symbols-outlined { font-size: 44px; color: #fff; }

/* Provider / collection monogram — the mockup's vendor circle */
.hub-tile {
  width: 52px; height: 52px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(46, 45, 41, .4); border-radius: 50%;
  font: 600 22px var(--serif); color: var(--ink); background: transparent;
}
.hub-tile .material-symbols-outlined { font-size: 24px; color: var(--ink-soft); }
.hub-tile.tone-soft { background: transparent; }
.hub-tile.lg { width: 64px; height: 64px; font-size: 26px; }

/* Example-query buttons — quiet underlined suggestions */
.hub-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-bottom: 1px solid #a3a09a; border-radius: 0;
  background: transparent; color: var(--ink-soft);
  padding: 4px 0; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.hub-chip:hover { color: var(--teal); border-color: var(--teal); background: transparent; }
.hub-chip em { font-style: normal; font-size: 12px; color: var(--ink-soft); }

.hub-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--forest); color: #fff; border: 0; border-radius: 999px;
  padding: 12px 20px; cursor: pointer; font-weight: 700; font-size: 14px; text-decoration: none;
  transition: transform .2s, background .2s;
}
.hub-btn:hover { transform: translateY(-2px); background: var(--teal); color: #fff; }
.hub-btn .material-symbols-outlined { color: var(--lime); font-size: 17px; }
.hub-btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.hub-btn.ghost:hover { background: var(--forest); color: #fff; border-color: var(--forest); }
.hub-btn.ghost .material-symbols-outlined { color: currentColor; }

/* Track / path row (numbered course list on /tracks/:id) */
.hub-rowlist { display: flex; flex-direction: column; max-width: 860px; border-top: 1px solid rgba(46, 45, 41, .3); }
.hub-row {
  display: flex; align-items: center; gap: 24px;
  background: transparent; border: 0; border-bottom: 1px solid rgba(46, 45, 41, .2);
  padding: 28px 0; text-decoration: none; color: var(--ink);
  transition: padding .2s;
}
.hub-row:hover { padding-left: 12px; color: var(--ink); }
.hub-row .row-num { font: 500 12px var(--mono); color: var(--teal); width: 40px; flex-shrink: 0; background: transparent; border: 0; height: auto; display: inline-block; }
.hub-row .row-body { flex: 1; min-width: 0; }
.hub-row .row-title { font: 600 24px/1.1 var(--serif); letter-spacing: -.015em; }
.hub-row .row-meta { color: var(--ink-soft); font-size: 13px; margin-top: 6px; }
.hub-row .row-meta .material-symbols-outlined { font-size: 14px; }
.hub-row .row-open {
  font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink); flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  border: 0; padding: 0;
}
.hub-row:hover .row-open { color: var(--teal); }
.hub-row .row-open .material-symbols-outlined { font-size: 15px; color: currentColor; }

/* Stanford context strip on vendor tracks */
/* ---------------------------------------------------------------------------
   Detail-page head: breadcrumb + eyebrow + h1, one consistent editorial
   treatment (owner report 2026-08-31: the old inline-styled crumb + pill
   looked odd on every detail page). Crumb = quiet mono caps; eyebrow = the
   same red mono kicker used sitewide; generous but tight vertical rhythm.
   ------------------------------------------------------------------------ */
.page-crumbs {
  font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 1.8rem; display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.page-crumbs a { color: var(--ink-soft); text-decoration: none; }
.page-crumbs a:hover { color: var(--red); }
.page-crumbs .sep { opacity: .45; }
.page-crumbs [aria-current="page"] { color: var(--ink); }
.page-eyebrow {
  font: 500 14px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); margin: 0 0 14px;
}
.page-eyebrow .dim { color: var(--ink-soft); }
.detail-head h1 { margin: 0 0 1.1rem; max-width: 20ch; }

/* Prev/next pager at the end of a learning path — stateless "session" flow
   (no login): ordinal links across the curated path order. */
.path-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 3.2rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.path-pager a { border: 1px solid var(--line); padding: 22px 24px; text-decoration: none; color: inherit; display: block; transition: border-color .15s, background .15s; }
.path-pager a:hover { border-color: var(--red); color: inherit; }
.path-pager .dir { font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 8px; }
.path-pager .pp-title { font: 600 21px/1.15 var(--serif); display: block; }
.path-pager .pp-next { text-align: right; background: var(--fog); }
.path-pager .pp-next .dir { color: var(--red); }
.path-pager a:only-child { grid-column: 2; }
@media (max-width: 700px) { .path-pager { grid-template-columns: 1fr; } .path-pager a:only-child { grid-column: 1; } .path-pager .pp-next { text-align: left; } }

.stanford-note {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--mint-soft); border: 1px solid var(--line); border-left: 3px solid var(--teal);
  padding: 20px 24px; margin: 30px 0 34px;
  color: var(--ink-soft); font-size: 14px; max-width: 860px;
}
.stanford-note .material-symbols-outlined { color: var(--teal); margin-top: .1rem; font-size: 19px; }
.stanford-note a { color: var(--teal); font-weight: 700; }
.stanford-note a:hover { color: var(--teal-dark); }
.stanford-note strong { color: var(--ink); }

/* Skeleton loading + empty states */
.hub-skel {
  border: 1px solid var(--line-soft);
  background: linear-gradient(100deg, var(--paper) 30%, var(--white) 50%, var(--paper) 70%);
  background-size: 220% 100%; animation: hub-shimmer 1.5s infinite linear; min-height: 118px;
}
@keyframes hub-shimmer { to { background-position: -220% 0; } }
.hub-empty {
  color: var(--ink-soft); font-size: 14px; background: var(--white);
  border: 1px dashed var(--line); padding: 20px 22px;
}
.hub-empty .material-symbols-outlined { vertical-align: -5px; margin-right: .35rem; font-size: 18px; }
.hub-section.dark .hub-empty { background: transparent; border-color: rgba(255, 255, 255, .3); color: #b9b6b0; }
.hub-section.dark .hub-empty .material-symbols-outlined { color: #b9b6b0; }

/* Coming-soon stub pages */
.hub-stub { max-width: 720px; padding: 100px 0 120px; text-align: left; }
.hub-stub .stub-icon { display: none; }
.hub-stub p { color: var(--ink-soft); max-width: 56ch; margin: 22px 0 34px; font-size: 17px; }

/* ---------------------------------------------------------------------------
   Library resource viewer (/library/:id)
   ------------------------------------------------------------------------ */
.lib-page { padding: 40px 0 110px; }
.lib-crumb { margin-bottom: 34px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.lib-crumb a { color: var(--ink-soft); text-decoration: none; }
.lib-crumb a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.lib-kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-bottom: 14px; }
.lib-kicker .lib-meta { color: var(--ink-soft); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.lib-page h1 { max-width: 20ch; font-size: clamp(40px, 5vw, 64px); }
.lib-desc { color: var(--ink-soft); font-size: 17px; max-width: 62ch; margin: 22px 0 0; }
.lib-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 40px; }
.lib-media { max-width: 880px; }
.lib-media video { width: 100%; aspect-ratio: 16 / 9; background: #000; display: block; }
.lib-media .lib-note { color: var(--ink-soft); font-size: 13px; margin: 10px 0 0; }
.lib-slides { display: grid; gap: 22px; }
.lib-slides figure { margin: 0; }
.lib-slides figure.current { outline: 3px solid var(--teal); outline-offset: 5px; }
.lib-slides img { width: 100%; border: 1px solid var(--line); display: block; background: var(--white); }
.lib-slides figcaption { color: var(--ink-soft); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .07em; margin-top: 8px; }
.lib-cover img { width: 100%; border: 1px solid var(--line); display: block; background: var(--white); }

/* Legacy home-list names kept so cached JS can't break the page */
.whatsnew-list { display: grid; grid-template-columns: 1fr; gap: 0; }
.whatsnew-item, .whatsnew-entry { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); padding: 14px 0; border-bottom: 1px solid var(--line); }
.whatsnew-item .wn-icon { display: none; }
.wn-badge, .wn-kind { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.wn-badge.new, .wn-kind.new { color: #820000; }
.wn-badge.changed, .wn-kind.changed { color: var(--ink-soft); }
.whatsnew-item .wn-title, .whatsnew-entry .wn-title { font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; }
.whatsnew-entry .wn-title:hover { color: var(--teal); }
.whatsnew-item .wn-meta, .whatsnew-entry .wn-meta { color: var(--ink-soft); font-size: 12px; }

/* Chat launcher — restyle the EXISTING widget's floating button (widget/ is
   untouched; this is a shell-side override) to the teal circle of the system. */
/* The widget's default bottom:72px assumes a page footer bar to clear;
   our marquee sits near the TOP of the page, so that offset instead
   floats the launcher awkwardly mid-viewport on shorter screens,
   colliding with the marquee strip (owner report 2026-08-29, screenshot).
   Pin it to the true corner, matching standard chat-bubble placement. */
.cbw-root { bottom: 24px !important; right: 24px !important; }
.cbw-panel { bottom: 100px !important; }
.cbw-button { background: var(--teal) !important; box-shadow: 0 12px 35px rgba(46, 45, 41, .28) !important; }
/* The hub's global .material-symbols-outlined color (ink-soft) leaks into
   the widget's launcher glyph, turning the sparkles dark on teal — force
   white inside the widget (owner report 2026-08-29). */
.cbw-button .material-symbols-outlined,
.cbw-launch-icon { color: #fff !important; }
.cbw-button:hover { background: var(--teal-dark) !important; }

/* ---------------------------------------------------------------------------
   Responsive + motion (breakpoints ported from the mockup)
   ------------------------------------------------------------------------ */
@media (max-width: 1020px) {
  .hub-grid.cols-4, .hub-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hub-wrap { width: min(100% - 30px, 720px); }
  .hub-nav { display: none; }
  .hub-nav.open {
    display: flex; position: absolute; left: 0; right: 0; top: 82px;
    background: var(--paper); padding: 25px; flex-direction: column; align-items: flex-start;
    border-bottom: 1px solid var(--line); gap: 18px;
  }
  .hub-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .hub-header .hub-wrap { position: relative; }
  .hub-hero { padding: 64px 0; }
  .hub-hero .hero-grid, .event-layout { grid-template-columns: 1fr; gap: 44px; }
  .start-layout { grid-template-columns: 1fr; }
  .featured { min-height: 410px; }
  .track { grid-template-columns: 68px 1fr; }
  .track-desc, .track-meta { grid-column: 2; text-align: left; }
  .updates-grid { grid-template-columns: 1fr; }
  .update-intro { position: static; }
}
@media (max-width: 600px) {
  .hub-topstrip .strip-tag { display: none; }
  .hub-header { height: 70px; }
  .hub-nav.open { top: 70px; }
  .hub-ask { display: none; }
  .hub-hero { padding-top: 50px; }
  h1 { font-size: 48px; }
  .hub-section { padding: 72px 0; }
  .hub-section-head { align-items: start; flex-direction: column; }
  .hub-grid.cols-3, .hub-grid.cols-4 { grid-template-columns: 1fr; }
  .featured { padding: 36px; min-height: 370px; }
  .path { grid-template-columns: 34px 1fr; padding: 30px 25px; }
  .path .path-arrow { display: none; }
  .track { gap: 17px; }
  .vendor-circle, .hub-tile { width: 48px; height: 48px; font-size: 20px; }
  .track h3 { font-size: 25px; }
  .update { grid-template-columns: 70px 1fr; }
  .update .badge { display: none; }
  .event-layout { gap: 40px; }
  .event-card { grid-template-columns: 70px 1fr; gap: 16px; }
  .event-date { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important; transition: none !important; scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Light surfaces - owner decision 2026-09-02 ("change the black ones,
   wherever they are"; picked card option B on /theme-preview): every dark
   card/band except the marquee and the Stanford footer becomes a fog card
   with a cardinal top rule and ink type. Appended as overrides so the
   original dark rules above stay intact and this block is one delete away
   from reverting.
   ========================================================================== */
/* Home "Start here" featured card */
.featured { background: var(--fog); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--cardinal); }
.featured::after { color: rgba(46, 45, 41, .05); }
.featured .num { color: var(--cardinal); }
.featured h3 { color: var(--ink); }
.featured p { color: var(--ink-soft); }
.circle-arrow { border-color: var(--ink); color: var(--ink); }
.featured:hover .circle-arrow, .featured:focus-visible .circle-arrow { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Home live-sessions band */
.hub-section.dark { background: var(--fog); color: var(--ink); border-top: 3px solid var(--cardinal); border-bottom: 1px solid var(--line); }
.hub-section.dark a:hover { color: var(--teal); }
.hub-section.dark .kicker { color: var(--cardinal); }
.hub-section.dark .badge { background: var(--mint-soft); color: var(--teal-dark); }
.hub-section.dark .hub-empty { border-color: var(--line); color: var(--ink-soft); }
.hub-section.dark .hub-empty .material-symbols-outlined { color: var(--ink-soft); }
.event-card, .event-card + .event-card { border-color: var(--line); }
.event-date { color: var(--ink); }
.event-date small { color: var(--cardinal); }
.event-info .tag { color: var(--cardinal); }
.event-info h3 { color: var(--ink); }
.event-info p { color: var(--ink-soft); }
.event-info .text-link { color: var(--ink); border-color: var(--ink); }
.event-info .text-link:hover { color: var(--teal); border-color: var(--teal); }

/* Learning paths: jump bar + alternating dark path cards */
.lp-jump { background: var(--fog); color: var(--ink); border-block: 1px solid var(--line); }
.lp-jump span { color: var(--cardinal); }
.lp-jump a { color: var(--ink-soft); }
.lp-jump a:hover { color: var(--ink); border-color: var(--teal); }
.lp-path.dark { background: var(--fog); color: var(--ink); border-top: 3px solid var(--cardinal); }
.lp-path.dark .lp-side { border-color: var(--line); }
.lp-path.dark .lp-outcome, .lp-path.dark .lp-step, .lp-path.dark .lp-audience, .lp-path.dark .lp-duration { color: var(--ink-soft); }
.lp-path.dark .lp-step strong, .lp-path.dark .lp-duration strong { color: var(--ink); }
.lp-path.dark .lp-steps::before { background: var(--line); }
.lp-path.dark .lp-step::before { background: var(--fog); border-color: var(--teal); }
.lp-path.dark .lp-action, .lp-path.dark .lp-num { color: var(--teal); }
.lp-path.dark .lp-action i { border-color: var(--teal); }
.lp-path.dark:hover .lp-action i { background: var(--teal); color: #fff; }
.lp-path.dark .lp-level::before { background: var(--teal); }

/* Vendor sources: filter strip + featured track bands */
.vs-controls { background: var(--fog); color: var(--ink); border-block: 1px solid var(--line); }
.vs-jump a { color: var(--ink-soft); }
.vs-jump a:hover { color: var(--ink); border-color: var(--teal); }
.vs-controls-label { color: var(--cardinal); }
.vs-search { border-left-color: var(--line); }
.vs-search input { color: var(--ink); }
.vs-search input::placeholder { color: var(--ink-soft); }
.vs-search input:focus-visible { outline-color: var(--teal); }
.vs-track { background: var(--fog); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--cardinal); }
.vs-track::after { color: rgba(46, 45, 41, .05); }
.vs-track-label { color: var(--cardinal); }
.vs-track p { color: var(--ink-soft); }
.vs-track-link { border-color: var(--ink); color: var(--ink); }
.vs-track:hover .vs-track-link { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Brand mark - owner pick 2026-09-02: option 3, typographic. Serif cardinal
   "AI", hairline, sans "Catalyst"; no container. */
.hub-wordmark { gap: 10px; align-items: baseline; }
.hub-wordmark .brand-ai { font: 600 27px/1 var(--serif); color: var(--cardinal); letter-spacing: -.02em; }
.hub-wordmark .brand-rule { width: 1px; height: 22px; background: var(--line); align-self: center; }

/* Hover states on the light featured card: the original a.featured:hover
   rule (higher specificity) painted the heading white for the dark card. */
a.featured:hover, a.featured:hover h3, a.featured:focus-visible h3 { color: var(--ink); }
a.featured:hover .num { color: var(--cardinal); }
a.featured:hover p { color: var(--ink-soft); }
a.featured:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--teal); }
a.vs-track:hover, a.vs-track:hover h3, a.vs-track:focus-visible h3 { color: var(--ink); }
a.vs-track:hover .vs-track-label { color: var(--cardinal); }
a.vs-track:hover p { color: var(--ink-soft); }
a.vs-track:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--teal); }

/* Institution strip - owner 2026-09-02: "double it, Stanford standard logo
   and fonts as in footer". Height 34 -> 68px; the left side becomes the
   same serif Stanford wordmark the footer uses, with the unit name after a
   hairline bar (Stanford's web identity-bar pattern). */
.hub-topstrip { height: 68px; }
.hub-topstrip .strip-brand { display: inline-flex; align-items: center; gap: 14px; }
.hub-topstrip .strip-stanford { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; line-height: 1; letter-spacing: -.01em; text-transform: none; }
.hub-topstrip .strip-bar { width: 1px; height: 26px; background: rgba(255, 255, 255, .55); }
.hub-topstrip .strip-unit { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1; letter-spacing: 0; text-transform: none; }
.hub-topstrip .strip-tag { font-size: 13px; letter-spacing: .1em; }
@media (max-width: 640px) {
  .hub-topstrip { height: 56px; }
  .hub-topstrip .strip-stanford { font-size: 1.3rem; }
  .hub-topstrip .strip-unit { font-size: 1.05rem; }
  .hub-topstrip .strip-tag { display: none; }
}

/* Header/hero separation - owner 2026-09-02: "top menus become small and
   the hero almost merges with the menu". Nav up to 17px, header gets a
   real bottom rule, and the hero sits on the fog ground so the white
   header reads as its own band. */
.hub-nav { font-size: 17px; gap: 34px; }
.hub-nav a { padding: 6px 0; }
.hub-header { border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(46, 45, 41, .04); }
.hub-hero { background: var(--fog); padding-top: 96px; }
@media (max-width: 900px) { .hub-nav { font-size: 16px; gap: 22px; } }

/* Owner 2026-09-02: (a) fog ground on the FIRST section of every page, not
   just home; (b) strip: bigger type only - the red bar itself stays slim. */
main > section:first-child, main > div:first-child,
.lp-hero, .vs-hero, .browse-hero, .updates > .hub-section:first-child { background: var(--fog); }
.hub-topstrip { height: 40px; }
.hub-topstrip .strip-stanford { font-size: 1.25rem; }
.hub-topstrip .strip-bar { height: 18px; }
.hub-topstrip .strip-unit { font-size: 1.05rem; }
.hub-topstrip .strip-tag { font-size: 12.5px; }
@media (max-width: 640px) {
  .hub-topstrip { height: 40px; }
  .hub-topstrip .strip-stanford { font-size: 1.15rem; }
  .hub-topstrip .strip-unit { font-size: .95rem; }
}

/* Owner 2026-09-02 correction: keep the 68px bar; increase the TYPE. */
.hub-topstrip { height: 68px; }
.hub-topstrip .strip-stanford { font-size: 1.9rem; }
.hub-topstrip .strip-bar { height: 30px; }
.hub-topstrip .strip-unit { font-size: 1.45rem; }
.hub-topstrip .strip-tag { font-size: 14px; }
@media (max-width: 640px) {
  .hub-topstrip { height: 60px; }
  .hub-topstrip .strip-stanford { font-size: 1.5rem; }
  .hub-topstrip .strip-unit { font-size: 1.15rem; }
}

/* Owner 2026-09-02: home hero lede in bold. */
.hub-hero .lede { font-weight: 600; color: var(--ink); }

/* Owner 2026-09-02: learning-paths hero copy bold; stats labels readable. */
.lp-hero-copy { font-weight: 600; color: var(--ink); font-size: 20px; }
.lp-stats strong { font-size: 30px; }
.lp-stats span { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: .09em; }

/* Owner 2026-09-02: the section jump bars ("Choose an outcome", vendor
   jump) read as static labels; make each target a pill chip so they read
   as tappable, with the active one filled. */
.lp-jump .hub-wrap, .vs-jump { gap: 10px; padding: 12px 0; }
.lp-jump span, .vs-controls-label { margin-right: 6px; }
.lp-jump a, .vs-jump a {
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--ink); font-size: 14.5px; font-weight: 600; border-bottom-width: 1px; line-height: 1;
  transition: border-color .15s, background .15s, color .15s;
}
.lp-jump a:hover, .vs-jump a:hover { border-color: var(--teal); color: var(--teal); background: #fff; }
.lp-jump a.is-active, .vs-jump a.is-active, .lp-jump a[aria-current="true"], .vs-jump a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.vs-controls .hub-wrap { padding: 8px 0; }

/* ==========================================================================
   Chip system - one spec, three roles, every page (owner 2026-09-02:
   "sub menus are on 2-3 pages... take a holistic look and be consistent").
   NAV chips jump somewhere: white pill, ink text, teal on hover, ink fill
   when current. FILTER chips toggle state: same pill, mint tint + teal
   border when on. CRUMBS: small mono uppercase, ink-soft, › separators.
   ========================================================================== */
.lp-jump a, .vs-jump a, .hub-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: 9px 16px; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; transition: border-color .15s, background .15s, color .15s;
}
.lp-jump a:hover, .vs-jump a:hover, .hub-chip:hover { border-color: var(--teal); color: var(--teal); background: #fff; }
.lp-jump a[aria-current], .vs-jump a[aria-current], .hub-chip[aria-current], .lp-jump a.is-active, .vs-jump a.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.hub-chip em { font-size: 12px; color: var(--ink-soft); }
.page-crumbs, .breadcrumbs { font: 500 12.5px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.hub-hero p.lede { color: var(--ink); }

/* Hero lede - one spec on every page (owner 2026-09-02: "not matching
   other headers"): 19px, 600, ink. Home, Learning Paths, Browse (in
   hub-search.css), Vendor Sources, What's New. */
.hub-hero p.lede, .lp-hero-copy, .vs-hero-grid > p, .updates-grid > div:first-child > p {
  font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.45;
}

/* Private items (owner 2026-09-02): searchable and browsable, gated to watch. */
.lib-private { display: inline-flex; align-items: center; gap: .4rem; font: 600 13px var(--sans); color: var(--cardinal); background: var(--mint-soft); border: 1px solid var(--lime); border-radius: 999px; padding: .35rem .8rem; margin: 0 0 1.2rem; }
.lib-private .material-symbols-outlined { font-size: 17px; }
.lib-locked { background: var(--fog); border: 1px solid var(--line); border-top: 3px solid var(--cardinal); padding: 48px 40px; text-align: center; }
.lib-lock-icon { font-size: 44px; color: var(--cardinal); display: block; margin: 0 auto 12px; }
.lib-locked h2 { font: 600 28px/1.1 var(--serif); margin: 0 0 10px; }
.lib-locked p { color: var(--ink-soft); max-width: 520px; margin: 0 auto 22px; font-size: 16px; }
.signin-card { text-align: center; }
.signin-card .g-wrap { display: flex; justify-content: center; margin: 22px 0 14px; }
.signin-err { color: var(--teal-dark); font-weight: 600; min-height: 1.4em; margin: 0; }
.signin-note { color: var(--ink-soft); font-size: 13.5px; margin: 8px 0 0; }
.lock-badge { display: inline-flex; align-items: center; gap: .3rem; font: 600 12px var(--sans); color: var(--cardinal); background: var(--mint-soft); border: 1px solid var(--lime); border-radius: 999px; padding: .35rem .7rem; }
.lock-badge .material-symbols-outlined { font-size: 15px; }
.catalog-card.is-private .cat-title a::after { content: "lock"; font-family: 'Material Symbols Outlined'; font-size: 16px; color: var(--cardinal); margin-left: .4rem; vertical-align: -.15em; }
.ql-locked { background: var(--fog); border: 1px solid var(--line); border-top: 3px solid var(--cardinal); padding: 30px; text-align: center; }
.ql-locked .material-symbols-outlined { font-size: 36px; color: var(--cardinal); }
.ql-locked h4 { font: 600 22px/1.1 var(--serif); margin: 8px 0 8px; }
.ql-locked p { color: var(--ink-soft); margin: 0 0 16px; }

/* Sign-in card: one centred column, not a left-aligned block in a full-width panel. */
.signin-card { max-width: 620px; margin: 64px auto 80px; padding: 56px 40px 48px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--cardinal); }
.signin-card h1 { font: 600 clamp(30px, 3.4vw, 40px)/1.1 var(--serif); margin: 0 0 14px; }
.signin-card p { margin-left: auto; margin-right: auto; max-width: 46ch; font-size: 17px; color: var(--ink-soft); }
.signin-card .signin-note { font-size: 13.5px; margin-top: 10px; }
.signin-card .lib-lock-icon { margin-bottom: 8px; }

/* Viewer session indicator + sign-out (owner 2026-09-03). */
.hub-viewer { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.hub-viewer-out, .lib-signout { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hub-viewer-out:hover, .lib-signout:hover { color: var(--teal-dark); }
.lib-signout { font-size: 13px; }
@media (max-width: 900px) { .hub-viewer { font-size: 14px; padding: 8px 0; } }

/* ==========================================================================
   Dark mode.
   Stanford's accessibility testing is carried out in dark mode as well as
   light, and the site previously had no prefers-color-scheme support at all.
   Only the tokens change: every rule above is written against them, so the
   layout, spacing and component behaviour are identical in both schemes.

   Contrast was measured, not assumed. Stanford publishes "light" variants for
   use over dark backgrounds, but against our page ground they fall short of
   the 4.5:1 required for body text:
       Digital Red light  #E50808  -> 3.55:1   (headings/bold only)
       Cardinal light     #B83A4B  -> 3.04:1   (headings/bold only)
   So body-sized accents use #d98c8c (6.56:1) and the identity colours are
   reserved for large type and block fills, where the 3.0:1 heading threshold
   applies. Every pairing below meets AA for the size it is used at.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2f1ee;              /* 15.09:1 on the page ground */
    --ink-soft: #c9c6c0;         /* 10.00:1 */
    --paper: #1d1c19;
    --white: #24231f;            /* cards and panels lift off the ground */
    --fog: #2a2825;
    --fill: #2a2825;
    --line: #46443f;
    --line-soft: #383530;

    /* Interactive accent. Body-sized, so it needs the full 4.5:1. */
    --teal: #d98c8c;             /* 6.56:1 */
    --teal-dark: #f0b4b4;        /* hover: brighter, not darker, on dark */
    --lime: #f0b4b4;

    /* Identity colours: large type and block fills only. */
    --cardinal: #b83a4b;
    --forest: #2a2825;           /* was a dark surface; stays a surface */
    --forest-deep: #1d1c19;

    /* Tinted surfaces invert to subtle raised panels. */
    --mint: #3a3431;
    --mint-soft: #302c2a;

    --green: #7fd4b8;            /* status text needs to lift off dark */
    --ok: #7fd4b8;
    --warn: #e8b06a;

    --shadow: 0 18px 55px rgba(0, 0, 0, .55);
    --shadow-1: 0 2px 10px rgba(0, 0, 0, .45);
  }

  body { background: var(--paper); color: var(--ink); }

  /* Surfaces that were hard-coded white in earlier passes. */
  .catalog-card,
  .search-shell,
  .search-shell input,
  .search-form .search-shell input,
  .lp-jump a, .vs-jump a, .hub-chip, .facet-chip,
  .resource-zone .facet-chip,
  .mark-card {
    background: var(--white);
    color: var(--ink);
  }

  /* The light-surface treatments applied in the September pass. */
  .featured, .hub-section.dark, .lp-path.dark, .vs-track,
  .lp-jump, .vs-controls, .lib-locked, .ql-locked, .signin-card {
    background: var(--fog);
    color: var(--ink);
  }
  .featured h3, .lp-path.dark h3, .vs-track h3, .event-info h3,
  .event-date, .signin-card h1, .lib-locked h2 {
    color: var(--ink);
  }
  .featured p, .lp-path.dark .lp-outcome, .vs-track p, .event-info p,
  .lp-path.dark .lp-step, .lp-path.dark .lp-audience, .lp-path.dark .lp-duration {
    color: var(--ink-soft);
  }

  /* The identity strip is a brand element, not a theme element. Stanford
     permits it in Cardinal, white or black only, so it keeps Cardinal
     #8c1515 in both schemes (white on it measures 9.40:1). The cardinal
     token is lightened above for large display type on dark, which would
     otherwise leak into the bar and put an unapproved colour there. */
  .hub-topstrip { background: #8c1515; }
  .hub-header { background: rgba(29, 28, 25, .92); border-bottom-color: var(--line); }
  .hub-footer { background: #14130f; }   /* approved black variant */

  /* Term highlights: the light-mode underline works, the tint does not. */
  mark { color: var(--ink); text-decoration-color: var(--teal); }

  /* Images and thumbnails are content: leave them alone, but stop pure-white
     artwork burning against the dark ground. */
  .lib-cover img, .result-thumb img, .catalog-card img { background: #fff; }
}

/* ==========================================================================
   Stanford link and identity-bar standards.

   Verified against uit.stanford.edu rather than the guide alone. UIT renders
   inline prose links in Digital Blue #006CB8 with an underline, and reserves
   the reds for headings, cards and controls. That matches the identity
   guide's own division of the palette:
       Digital Blue  #006CB8  links (and nothing else)
       Digital Red   #B1040E  buttons, rollovers, interactive states
       Cardinal      #8C1515  identity
   ========================================================================== */
:root {
  --link: #006cb8;         /* 5.47:1 on white */
  --link-hover: #00548f;   /* 8.10:1 */
}
@media (prefers-color-scheme: dark) {
  :root {
    --link: #6fc3ff;       /* Stanford's stated colour for links on dark, 8.87:1 */
    --link-hover: #a5daff;
  }
}

/* Prose links only. Every component that opts out of the underline above
   already sets its own colour, so navigation, chips, buttons, crumbs and
   card titles keep the red/ink treatment and do not turn blue. */
a { color: var(--link); }
a:hover { color: var(--link-hover); }
.foot-brand { color: #fff; }

/* Identity bar at the standard 30px. The guide specifies "a 30px tall bar
   designed to provide consistent and clear Stanford branding" carrying the
   Stanford signature, which links to the university homepage, with no
   content of any kind above it. Type is sized to sit inside that height. */
.hub-topstrip { height: 30px; }
.hub-topstrip .strip-stanford { font-size: 1.05rem; }
.hub-topstrip .strip-bar { height: 15px; }
.hub-topstrip .strip-unit { font-size: .95rem; }
.hub-topstrip .strip-tag { font-size: 11.5px; letter-spacing: .09em; }
@media (max-width: 640px) {
  .hub-topstrip { height: 30px; }
  .hub-topstrip .strip-stanford { font-size: 1rem; }
  .hub-topstrip .strip-unit { font-size: .85rem; }
}

/* Palette roles, matched to uit.stanford.edu.
   Stanford's system assigns each red a job, and we had them blurred:
       Cardinal    #8C1515  identity AND section eyebrows/labels
       Digital Red #B1040E  buttons, hovers, interactive states only
       Digital Blue #006CB8 inline prose links
   UIT sets every eyebrow ("SERVICE SPOTLIGHTS", "INFORMATION SECURITY") in
   Cardinal and keeps Digital Red for controls. Ours used Digital Red for
   both, which reads slightly off-brand next to their pages. */
/* NOTE: .strip-tag is deliberately NOT in this list. It sits inside the
   Cardinal identity bar, so giving it the Cardinal eyebrow colour rendered
   it invisible (1:1 contrast against its own background). Labels that live
   ON cardinal keep their light treatment below. */
.kicker, .page-eyebrow, .eyebrow-line, .track-label, .lp-num, .li-pick-label,
.vs-level, .vs-track-label, .hub-row .row-num, .path-index, .result-kicker,
.type-badge, .results-count-strip, .lib-crumb, .conv-crumb {
  color: var(--cardinal);
}
/* On the cardinal bar: white at 9.4:1. */
.hub-topstrip .strip-tag { color: #fff; }
.hub-section.dark .kicker, .lp-jump span, .vs-controls-label {
  color: var(--cardinal);
}
/* Cardinal is a touch dark on the deep footer; keep those labels legible. */
.hub-footer .kicker { color: #e6e4e0; }