/* Think ASL — theme token overrides + base layout
 * Extends the shared 1891 design system at site/assets/design-system/tokens.css
 * (vendored via _build/refresh-design-system.sh). Tokens here override --c-*
 * defaults from the shared file and add Think-ASL-only --ta-* tokens. */

:root[data-project="thinkasl"], :root {
  /* Brand color overrides (Gary's book cover orange) */
  --c-bloom:        #c75c1c;
  --c-bloom-soft:   #e0875a;
  --c-accent:       #2a527d;

  /* Paper — slightly warmer than default, reads like a textbook */
  --c-paper:        #f7f6f1;
  --c-paper-warm:   #efece2;
  --c-ink:          #0e1116;
  --c-ink-soft:     #3a3f47;
  --c-fog:          #b8b3a6;
  --c-line:         #d8d2c3;

  /* Think-ASL-specific tokens */
  --ta-link:        #2a527d;
  --ta-link-hover:  #c75c1c;
  --ta-rule:        #d8d2c3;
  --ta-quote-bg:    #f0ebda;
  --ta-table-stripe:#efece2;
  --ta-good:        #1f7a3a;
  --ta-warn:        #b87b1a;
  --ta-err:         #b3261e;

  --ta-radius:      6px;
  --ta-radius-lg:   12px;

  /* Header height for sticky offsets */
  --ta-header-h:    64px;
}

/* ----- Base reset & body ---------------------------------------------------*/

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--c-font-sans);
  font-size: var(--c-text-md);
  line-height: var(--c-leading-normal);
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { display: block; min-height: calc(100vh - var(--ta-header-h)); }

a {
  color: var(--ta-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover, a:focus { color: var(--ta-link-hover); }

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

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--c-bloom);
  outline-offset: 2px;
}

/* ----- Layout containers ---------------------------------------------------*/

.ta-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--c-space-5);
}
.ta-wrap--narrow { max-width: 720px; }

.ta-section {
  padding: var(--c-space-8) 0;
}
.ta-section--tight { padding: var(--c-space-6) 0; }

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

.ta-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--ta-header-h);
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line);
  display: flex;
  align-items: center;
}

.ta-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-5);
  width: 100%;
}

.ta-brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--c-space-2);
  text-decoration: none;
  color: var(--c-ink);
  font-weight: 700;
  font-size: var(--c-text-lg);
}
.ta-brand__mark { color: var(--c-bloom); }
.ta-brand__sub  { color: var(--c-fog); font-weight: 400; font-size: var(--c-text-sm); }

.ta-nav {
  display: flex;
  align-items: center;
  gap: var(--c-space-5);
}
.ta-nav a {
  text-decoration: none;
  color: var(--c-ink-soft);
  font-size: var(--c-text-sm);
}
.ta-nav a:hover { color: var(--c-bloom); }
.ta-nav__cta {
  background: var(--c-bloom);
  color: #fff !important;
  padding: var(--c-space-2) var(--c-space-4);
  border-radius: var(--ta-radius);
  text-decoration: none !important;
}
.ta-nav__cta:hover { background: var(--c-ink); color: #fff !important; }

@media (max-width: 720px) {
  .ta-nav { gap: var(--c-space-3); flex-wrap: wrap; }
  .ta-nav a:not(.ta-nav__cta) { display: none; }
}

/* ----- Hero ----------------------------------------------------------------*/

.ta-hero {
  padding: var(--c-space-9) 0 var(--c-space-8);
  background: var(--c-paper);
}
.ta-hero h1 {
  font-family: var(--c-font-serif);
  font-size: var(--c-text-4xl);
  line-height: var(--c-leading-tight);
  margin: 0 0 var(--c-space-4);
  color: var(--c-ink);
}
.ta-hero p.ta-lead {
  font-size: var(--c-text-lg);
  line-height: var(--c-leading-loose);
  color: var(--c-ink-soft);
  max-width: 56ch;
  margin: 0 0 var(--c-space-5);
}
.ta-hero__cta-row {
  display: flex;
  gap: var(--c-space-3);
  flex-wrap: wrap;
}

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

.ta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
  padding: var(--c-space-3) var(--c-space-5);
  font-size: var(--c-text-md);
  font-weight: 600;
  border-radius: var(--ta-radius);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
}
.ta-btn:active { transform: translateY(1px); }

.ta-btn--primary {
  background: var(--c-bloom);
  color: #fff;
}
.ta-btn--primary:hover { background: var(--c-ink); color: #fff; }

.ta-btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-line);
}
.ta-btn--ghost:hover { border-color: var(--c-bloom); color: var(--c-bloom); }

.ta-btn--lg { padding: var(--c-space-4) var(--c-space-6); font-size: var(--c-text-lg); }

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

.ta-grid {
  display: grid;
  gap: var(--c-space-5);
}
.ta-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ta-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.ta-card {
  background: var(--c-paper-warm);
  border: 1px solid var(--c-line);
  border-radius: var(--ta-radius-lg);
  padding: var(--c-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}
.ta-card h3 {
  margin: 0;
  font-family: var(--c-font-serif);
  font-size: var(--c-text-xl);
  line-height: var(--c-leading-tight);
}
.ta-card p { margin: 0; color: var(--c-ink-soft); }

/* ----- Lesson list cards ---------------------------------------------------*/

.lesson-grid {
  display: grid;
  gap: var(--c-space-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.lesson-card {
  display: block;
  padding: var(--c-space-5);
  background: var(--c-paper-warm);
  border: 1px solid var(--c-line);
  border-radius: var(--ta-radius-lg);
  text-decoration: none;
  color: var(--c-ink);
  transition: border-color 0.15s ease, transform 0.05s ease;
}
.lesson-card:hover { border-color: var(--c-bloom); transform: translateY(-1px); }
.lesson-card[data-status="v1-from-book"] { opacity: 0.85; }
.lesson-card[data-status="approved"] { border-left: 4px solid var(--ta-good); }

.lesson-card__num   { font-size: var(--c-text-sm); color: var(--c-fog); letter-spacing: 0.04em; text-transform: uppercase; }
.lesson-card__title { margin: var(--c-space-2) 0 var(--c-space-1); font-family: var(--c-font-serif); font-size: var(--c-text-lg); line-height: var(--c-leading-tight); }
.lesson-card__unit  { margin: 0; font-size: var(--c-text-sm); color: var(--c-ink-soft); }
.lesson-card__meta  { margin: var(--c-space-3) 0 0; font-size: var(--c-text-xs); color: var(--c-fog); }

/* ----- Article / lesson body styling --------------------------------------*/

.ta-article {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--c-space-6) var(--c-space-5);
}
.ta-article h1 {
  font-family: var(--c-font-serif);
  font-size: var(--c-text-3xl);
  line-height: var(--c-leading-tight);
  margin: 0 0 var(--c-space-3);
}
.ta-article h2 {
  font-family: var(--c-font-serif);
  font-size: var(--c-text-2xl);
  line-height: var(--c-leading-tight);
  margin: var(--c-space-7) 0 var(--c-space-3);
  border-bottom: 1px solid var(--ta-rule);
  padding-bottom: var(--c-space-2);
}
.ta-article h3 {
  font-family: var(--c-font-serif);
  font-size: var(--c-text-xl);
  margin: var(--c-space-6) 0 var(--c-space-2);
}
.ta-article p, .ta-article li {
  font-size: var(--c-text-md);
  line-height: var(--c-leading-loose);
  color: var(--c-ink);
}
.ta-article blockquote {
  margin: var(--c-space-5) 0;
  padding: var(--c-space-4) var(--c-space-5);
  background: var(--ta-quote-bg);
  border-left: 4px solid var(--c-bloom);
  border-radius: 0 var(--ta-radius) var(--ta-radius) 0;
  color: var(--c-ink-soft);
}
.ta-article table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--c-space-5) 0;
  font-size: var(--c-text-sm);
}
.ta-article th, .ta-article td {
  text-align: left;
  padding: var(--c-space-2) var(--c-space-3);
  border-bottom: 1px solid var(--c-line);
}
.ta-article th { background: var(--c-paper-warm); font-weight: 600; }
.ta-article tbody tr:nth-child(even) td { background: var(--ta-table-stripe); }

.ta-article code {
  font-family: var(--c-font-mono);
  font-size: 0.92em;
  background: var(--c-paper-warm);
  padding: 0 4px;
  border-radius: 3px;
}

/* ----- Status badges / pills ----------------------------------------------*/

.ta-pill {
  display: inline-block;
  padding: 2px var(--c-space-2);
  font-size: var(--c-text-xs);
  font-weight: 600;
  border-radius: 9999px;
  background: var(--c-paper-warm);
  color: var(--c-ink-soft);
  border: 1px solid var(--c-line);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ta-pill--v1   { background: #fff7e6; color: #8a5a00; border-color: #f0d99a; }
.ta-pill--edit { background: #eef4ff; color: #1a5f9c; border-color: #c5d8f3; }
.ta-pill--ok   { background: #e7f5ec; color: var(--ta-good); border-color: #b5dfc4; }

/* ----- Video frame ---------------------------------------------------------*/

.ta-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0e1116;
  border-radius: var(--ta-radius-lg);
  overflow: hidden;
  margin: var(--c-space-5) 0;
}
.ta-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ta-video__pending {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-fog);
  font-family: var(--c-font-mono);
  font-size: var(--c-text-sm);
  text-align: center;
  padding: var(--c-space-5);
}

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

.ta-footer {
  border-top: 1px solid var(--c-line);
  background: var(--c-paper-warm);
  padding: var(--c-space-7) 0 var(--c-space-5);
  margin-top: var(--c-space-9);
  font-size: var(--c-text-sm);
  color: var(--c-ink-soft);
}
.ta-footer__inner { display: grid; gap: var(--c-space-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ta-footer h4 { margin: 0 0 var(--c-space-2); font-size: var(--c-text-sm); color: var(--c-ink); }
.ta-footer a { color: var(--c-ink-soft); text-decoration: none; display: block; padding: 2px 0; }
.ta-footer a:hover { color: var(--c-bloom); }
.ta-footer__legal {
  border-top: 1px solid var(--c-line);
  margin-top: var(--c-space-5);
  padding-top: var(--c-space-4);
  font-size: var(--c-text-xs);
  color: var(--c-fog);
}

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

.ta-text-center { text-align: center; }
.ta-mt-4 { margin-top: var(--c-space-4); }
.ta-mt-6 { margin-top: var(--c-space-6); }
.ta-mb-0 { margin-bottom: 0; }

.ta-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 tier (oversized headlines) ---------------------------------*/

.ta-display {
  font-family: var(--c-font-serif);
  font-size: clamp(2.5rem, 6vw + 1rem, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 var(--c-space-5);
  color: var(--c-ink);
}
.ta-display .ta-display__accent { color: var(--c-bloom); }
.ta-display em { font-style: italic; }

.ta-eyebrow {
  display: inline-block;
  font-family: var(--c-font-mono);
  font-size: var(--c-text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-bloom);
  margin: 0 0 var(--c-space-4);
}

/* Oversized typographic section opener (e.g. a big "01") */
.ta-section-mark {
  font-family: var(--c-font-serif);
  font-weight: 700;
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: 1;
  color: var(--c-bloom);
  opacity: 0.18;
  margin: 0 0 var(--c-space-2);
  letter-spacing: -0.04em;
  user-select: none;
}

/* Full-bleed band variant used to break the cream rhythm */
.ta-section--ink {
  background: var(--c-ink);
  color: #f3efe5;
  padding: var(--c-space-9) 0;
}
.ta-section--ink h2,
.ta-section--ink h3 { color: #fff; }
.ta-section--ink p { color: #d8d2c3; }
.ta-section--ink a { color: var(--c-bloom-soft); }

.ta-section--cream {
  background: var(--c-paper-warm);
  padding: var(--c-section, var(--c-space-9)) 0;
}

/* Thin architectural rule */
.ta-rule {
  border: 0;
  border-top: 1px solid var(--ta-rule);
  margin: var(--c-space-7) auto;
  max-width: 1120px;
}

/* ----- Hero layout for two-column variant ---------------------------------*/

.ta-hero--split {
  padding: var(--c-space-9) 0;
}
.ta-hero--split .ta-hero__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--c-space-7);
  align-items: center;
}
@media (max-width: 800px) {
  .ta-hero--split .ta-hero__grid { grid-template-columns: 1fr; gap: var(--c-space-5); }
}

.ta-hero__quote {
  background: var(--c-paper-warm);
  border-left: 4px solid var(--c-bloom);
  padding: var(--c-space-5);
  border-radius: 0 var(--ta-radius-lg) var(--ta-radius-lg) 0;
  font-family: var(--c-font-serif);
  font-size: var(--c-text-lg);
  line-height: var(--c-leading-loose);
  color: var(--c-ink-soft);
}
.ta-hero__quote cite {
  display: block;
  margin-top: var(--c-space-3);
  font-style: normal;
  font-size: var(--c-text-sm);
  color: var(--c-fog);
  font-family: var(--c-font-sans);
}

/* ----- Icons (inline SVG, sized by font) ---------------------------------*/

.ta-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: middle;
  flex-shrink: 0;
}
.ta-icon--lg { width: 2.25em; height: 2.25em; }

.ta-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ta-radius);
  background: rgba(199, 92, 28, 0.10);
  color: var(--c-bloom);
  margin-bottom: var(--c-space-3);
}
.ta-card__icon .ta-icon { width: 24px; height: 24px; }

/* Audience strip (3 callouts under the hero) */
.ta-audience-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  margin: var(--c-space-7) 0;
  border-top: 1px solid var(--ta-rule);
  border-bottom: 1px solid var(--ta-rule);
}
.ta-audience-strip__item {
  padding: var(--c-space-5) var(--c-space-4);
  border-right: 1px solid var(--ta-rule);
}
.ta-audience-strip__item:last-child { border-right: 0; }
.ta-audience-strip__label {
  display: block;
  font-family: var(--c-font-mono);
  font-size: var(--c-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-fog);
  margin-bottom: var(--c-space-2);
}
.ta-audience-strip__line {
  display: block;
  font-family: var(--c-font-serif);
  font-size: var(--c-text-lg);
  line-height: var(--c-leading-tight);
  color: var(--c-ink);
}

/* Stat row (oversized numbers) */
.ta-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--c-space-6);
  margin: var(--c-space-6) 0;
}
.ta-stat__num {
  display: block;
  font-family: var(--c-font-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  color: var(--c-bloom);
  letter-spacing: -0.02em;
}
.ta-stat__label {
  display: block;
  margin-top: var(--c-space-2);
  font-size: var(--c-text-sm);
  color: var(--c-ink-soft);
  line-height: var(--c-leading-normal);
}

/* Big single CTA block */
.ta-cta-block {
  background: var(--c-paper-warm);
  border: 1px solid var(--c-line);
  border-radius: var(--ta-radius-lg);
  padding: var(--c-space-7);
  text-align: center;
}
.ta-cta-block h2 {
  font-family: var(--c-font-serif);
  font-size: var(--c-text-2xl);
  line-height: var(--c-leading-tight);
  margin: 0 0 var(--c-space-3);
}
.ta-cta-block p { color: var(--c-ink-soft); margin: 0 0 var(--c-space-5); }

/* Steps list (numbered, with big numerals) */
.ta-steps {
  list-style: none;
  counter-reset: ta-step;
  padding: 0;
  display: grid;
  gap: var(--c-space-5);
}
.ta-steps li {
  counter-increment: ta-step;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--c-space-4);
  align-items: start;
}
.ta-steps li::before {
  content: counter(ta-step, decimal-leading-zero);
  font-family: var(--c-font-serif);
  font-size: var(--c-text-2xl);
  color: var(--c-bloom);
  font-weight: 700;
  line-height: 1;
}
.ta-steps li h3 {
  margin: 0 0 var(--c-space-2);
  font-family: var(--c-font-serif);
  font-size: var(--c-text-lg);
}
.ta-steps li p { margin: 0; color: var(--c-ink-soft); }

/* ----- Motion (subtle reveal) ---------------------------------------------*/

@keyframes ta-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ta-fade-in { animation: ta-fade-up 600ms var(--c-ease-out) both; }
.ta-fade-in-2 { animation: ta-fade-up 600ms var(--c-ease-out) 120ms both; }
.ta-fade-in-3 { animation: ta-fade-up 600ms var(--c-ease-out) 240ms both; }

/* Card hover lift */
.ta-card { transition: transform 0.18s var(--c-ease-out), border-color 0.18s var(--c-ease-out), box-shadow 0.18s var(--c-ease-out); }
.ta-card:hover { transform: translateY(-2px); border-color: var(--c-bloom); box-shadow: var(--c-shadow-sm); }

/* Utility */
.ta-text-fog { color: var(--c-fog); }
.ta-mt-2 { margin-top: var(--c-space-2); }
.ta-mt-3 { margin-top: var(--c-space-3); }
.ta-mt-5 { margin-top: var(--c-space-5); }
.ta-mt-7 { margin-top: var(--c-space-7); }
.ta-mb-3 { margin-bottom: var(--c-space-3); }
.ta-mb-5 { margin-bottom: var(--c-space-5); }

/* ============================================================================
   Course UX additions — breadcrumbs, TOC, reading progress, vocabulary panel,
   chips, lesson nav, units, callouts. Everything below is additive: it does
   not modify the rules above. Tokens-only colors; respect reduced motion.
   Owner: course-ux agent. The marketing classes above are untouched.
   ============================================================================ */

/* ----- Reading-progress bar (top of viewport) ----------------------------- */
.ta-readbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
.ta-readbar__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--c-bloom);
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 80ms linear;
}

/* ----- Subnav strip (breadcrumb container) ------------------------------- */
.ta-subnav {
  position: sticky;
  top: var(--ta-header-h);
  z-index: 40;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line);
  padding: var(--c-space-2) 0;
}

.ta-crumbs { font-size: var(--c-text-sm); color: var(--c-ink-soft); }
.ta-crumbs ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-2);
  align-items: center;
}
.ta-crumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-2);
}
.ta-crumbs li + li::before {
  content: "/";
  color: var(--c-fog);
  font-size: 0.9em;
}
.ta-crumbs a { text-decoration: none; color: var(--ta-link); }
.ta-crumbs a:hover { text-decoration: underline; }
.ta-crumbs [aria-current="page"] { color: var(--c-ink); font-weight: 600; }

/* ----- Lesson page two-column layout (article + TOC rail) ---------------- */
.ta-lesson {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--c-space-6);
  padding: var(--c-space-5) var(--c-space-5) var(--c-space-8);
}
@media (min-width: 1024px) {
  .ta-lesson { grid-template-columns: minmax(0, 1fr) 240px; }
  .ta-lesson .ta-article { padding-left: 0; padding-right: 0; max-width: 760px; }
}

.ta-lesson__hero { margin-bottom: var(--c-space-5); }
.ta-lesson__sub { margin: var(--c-space-2) 0 0; }

/* ----- Table-of-contents rail ------------------------------------------- */
.ta-toc { font-size: var(--c-text-sm); }
@media (min-width: 1024px) {
  .ta-toc {
    position: sticky;
    top: calc(var(--ta-header-h) + 56px);
    align-self: start;
    max-height: calc(100vh - var(--ta-header-h) - 80px);
    overflow: auto;
    padding-left: var(--c-space-4);
    border-left: 1px solid var(--c-line);
  }
}
.ta-toc__details { margin: 0; }
.ta-toc__summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--c-ink);
  padding: var(--c-space-2) 0;
  list-style: none;
}
.ta-toc__summary::-webkit-details-marker { display: none; }
.ta-toc__list {
  list-style: none;
  margin: var(--c-space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--c-space-1);
}
.ta-toc__list a {
  display: flex;
  align-items: center;
  padding: var(--c-space-2) var(--c-space-3);
  border-left: 2px solid transparent;
  border-radius: 0 var(--ta-radius) var(--ta-radius) 0;
  text-decoration: none;
  color: var(--c-ink-soft);
  line-height: var(--c-leading-tight);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ta-toc__list a:hover { background: var(--c-paper-warm); color: var(--c-ink); }
.ta-toc__list a[aria-current="true"] {
  background: var(--c-paper-warm);
  border-left-color: var(--c-bloom);
  color: var(--c-ink);
  font-weight: 600;
}

/* ----- Learning objectives checklist ------------------------------------ */
.ta-objectives {
  background: var(--c-paper-warm);
  border: 1px solid var(--c-line);
  border-radius: var(--ta-radius-lg);
  padding: var(--c-space-5);
  margin: var(--c-space-5) 0;
}
.ta-objectives h2 {
  border: 0;
  margin: 0 0 var(--c-space-3);
  font-size: var(--c-text-xl);
}
.ta-objectives__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
}
.ta-objective {
  display: flex;
  align-items: flex-start;
  gap: var(--c-space-3);
  color: var(--c-ink-soft);
}
.ta-objective__mark {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-paper);
  position: relative;
  margin-top: 2px;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.ta-objective__mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-bottom: 2px solid transparent;
  border-right: 2px solid transparent;
  transform: rotate(45deg) translate(-1px, -2px);
  transform-origin: center;
  transition: border-color 0.3s ease;
}
.ta-objectives[data-checked] .ta-objective { color: var(--c-ink); }
.ta-objectives[data-checked] .ta-objective__mark {
  background: var(--ta-good);
  border-color: var(--ta-good);
}
.ta-objectives[data-checked] .ta-objective__mark::after {
  border-color: #fff;
  border-bottom-color: #fff;
  border-right-color: #fff;
}
.ta-objectives__hint {
  margin: var(--c-space-3) 0 0;
  font-size: var(--c-text-sm);
  color: var(--c-fog);
}

/* ----- Lecture video pending overlay improvements ----------------------- */
.ta-video__pending {
  flex-direction: column;
  gap: var(--c-space-2);
  background: linear-gradient(180deg, #0e1116, #1c2128);
}
.ta-video__pending-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--c-fog);
  color: var(--c-fog);
  font-size: 18px;
  margin-bottom: var(--c-space-2);
}
.ta-video__pending strong {
  color: #efece2;
  font-family: var(--c-font-sans);
  font-size: var(--c-text-md);
}
.ta-video__pending span {
  color: var(--c-fog);
  font-family: var(--c-font-sans);
  font-size: var(--c-text-sm);
  max-width: 36ch;
}

/* ----- Table wrapper (horizontal scroll on narrow viewports) ------------ */
.ta-table-wrap {
  overflow-x: auto;
  margin: var(--c-space-5) 0;
  border: 1px solid var(--c-line);
  border-radius: var(--ta-radius-lg);
  background: var(--c-paper);
}
.ta-table-wrap table {
  margin: 0;
  border-collapse: collapse;
  width: 100%;
  min-width: 360px;
  font-size: var(--c-text-sm);
}
.ta-table-wrap th,
.ta-table-wrap td {
  text-align: left;
  padding: var(--c-space-3) var(--c-space-4);
  border-bottom: 1px solid var(--c-line);
}
.ta-table-wrap th {
  background: var(--c-paper-warm);
  font-weight: 700;
  border-bottom: 2px solid var(--c-bloom-soft);
  color: var(--c-ink);
}
.ta-table-wrap tbody tr:last-child td { border-bottom: 0; }
.ta-table-wrap tbody tr:nth-child(even) td { background: var(--ta-table-stripe); }

/* ----- Blockquote (editorial note) -------------------------------------- */
.ta-article blockquote.ta-quote,
.ta-quote {
  position: relative;
  margin: var(--c-space-5) 0;
  padding: var(--c-space-4) var(--c-space-5);
  background: var(--ta-quote-bg);
  border-left: 4px solid var(--c-bloom);
  border-radius: 0 var(--ta-radius) var(--ta-radius) 0;
  color: var(--c-ink-soft);
}
.ta-quote__label {
  display: inline-block;
  font-family: var(--c-font-sans);
  font-size: var(--c-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-bloom);
  margin: 0 0 var(--c-space-2);
  padding: 0;
}
.ta-quote__label + br { display: none; }

/* ----- Vocabulary panel: category cards + chips ------------------------- */
.ta-vocab { margin: var(--c-space-7) 0; }
.ta-vocab__head { margin-bottom: var(--c-space-5); }
.ta-vocab__head h2 {
  font-family: var(--c-font-serif);
  font-size: var(--c-text-2xl);
  margin: 0 0 var(--c-space-2);
  border-bottom: 1px solid var(--ta-rule);
  padding-bottom: var(--c-space-2);
}
.ta-vocab__summary {
  color: var(--c-ink-soft);
  font-size: var(--c-text-sm);
  line-height: var(--c-leading-loose);
  margin: 0;
}
.ta-vocab__summary strong { color: var(--c-ink); }

.ta-vocab__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--c-space-5);
}
@media (min-width: 640px) {
  .ta-vocab__grid { grid-template-columns: repeat(2, 1fr); }
}

.ta-cat {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--ta-radius-lg);
  padding: var(--c-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--c-space-3);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ta-cat:hover { border-color: var(--c-bloom-soft); box-shadow: var(--c-shadow-sm); }
.ta-cat__head {
  display: flex;
  align-items: center;
  gap: var(--c-space-3);
}
.ta-cat__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ta-radius);
  background: rgba(199, 92, 28, 0.10);
  color: var(--c-bloom);
}
.ta-cat__titles { min-width: 0; }
.ta-cat__name {
  margin: 0;
  font-family: var(--c-font-serif);
  font-size: var(--c-text-lg);
  line-height: var(--c-leading-tight);
}
.ta-cat__meta {
  margin: 2px 0 0;
  font-size: var(--c-text-xs);
  color: var(--c-fog);
}
.ta-cat__cam { color: var(--c-bloom); font-weight: 600; }

/* Chips — UPPERCASE monospace pills, camera-eligible get a little cam icon */
.ta-chips {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--c-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: rgba(42, 82, 125, 0.07);
  color: var(--c-ink);
  border: 1px solid rgba(42, 82, 125, 0.20);
  border-radius: var(--c-radius-pill);
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.ta-chip--cam {
  background: rgba(199, 92, 28, 0.10);
  border-color: rgba(199, 92, 28, 0.32);
  color: var(--c-ink);
}
.ta-chip--cam .ta-chip__cam { color: var(--c-bloom); display: inline-flex; }
.ta-chip__cam svg { display: block; }
.ta-chip--ghost {
  background: transparent;
  text-transform: none;
  font-family: var(--c-font-sans);
  font-weight: 500;
  letter-spacing: 0;
  padding: 2px 8px;
  font-size: var(--c-text-xs);
}

.ta-vocab__notes {
  margin-top: var(--c-space-5);
  background: var(--ta-quote-bg);
  border-left: 3px solid var(--c-bloom-soft);
  padding: var(--c-space-4) var(--c-space-5);
  border-radius: 0 var(--ta-radius) var(--ta-radius) 0;
  color: var(--c-ink-soft);
  font-size: var(--c-text-sm);
}
.ta-vocab__notes h3 {
  margin: 0 0 var(--c-space-2);
  font-family: var(--c-font-sans);
  font-size: var(--c-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-bloom);
}
.ta-vocab__notes ul { margin: 0; padding-left: var(--c-space-5); }
.ta-vocab__notes li + li { margin-top: var(--c-space-2); }

/* ----- Lesson Start-Quiz CTA -------------------------------------------- */
.ta-lesson__cta {
  text-align: center;
  margin: var(--c-space-7) 0 var(--c-space-5);
  padding: var(--c-space-6);
  background: linear-gradient(180deg, var(--c-paper-warm), var(--c-paper));
  border: 1px solid var(--c-line);
  border-radius: var(--ta-radius-lg);
}
.ta-lesson__cta h2 { border: 0; margin: 0 0 var(--c-space-2); }
.ta-lesson__cta .ta-btn { min-height: 48px; margin-top: var(--c-space-3); }

/* ----- Prev / Next lesson row ------------------------------------------- */
.ta-prevnext-row {
  display: grid;
  gap: var(--c-space-3);
  grid-template-columns: 1fr;
  margin-top: var(--c-space-6);
}
@media (min-width: 640px) {
  .ta-prevnext-row { grid-template-columns: 1fr 1fr; }
}
.ta-prevnext {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--c-space-4) var(--c-space-5);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--ta-radius-lg);
  text-decoration: none;
  color: var(--c-ink);
  transition: border-color 0.15s ease, transform 0.05s ease;
  min-height: 64px;
}
.ta-prevnext:hover { border-color: var(--c-bloom); transform: translateY(-1px); }
.ta-prevnext--next { text-align: right; }
.ta-prevnext__dir {
  font-size: var(--c-text-xs);
  color: var(--c-bloom);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.ta-prevnext__title {
  font-family: var(--c-font-serif);
  font-size: var(--c-text-lg);
  line-height: var(--c-leading-tight);
}

/* ----- Lessons index: hero, unit blocks, progress map ------------------- */
.ta-index__hero { margin-bottom: var(--c-space-7); }
.ta-index__hero h1 {
  font-family: var(--c-font-serif);
  font-size: var(--c-text-3xl);
  margin: var(--c-space-2) 0 var(--c-space-3);
}
.ta-index__hero .ta-lead {
  font-size: var(--c-text-lg);
  color: var(--c-ink-soft);
  max-width: 64ch;
  line-height: var(--c-leading-loose);
}

.ta-pmap {
  margin: var(--c-space-5) 0 0;
  background: var(--c-paper-warm);
  border: 1px solid var(--c-line);
  border-radius: var(--ta-radius-lg);
  padding: var(--c-space-4) var(--c-space-5);
}
.ta-pmap__label {
  margin: 0 0 var(--c-space-3);
  font-size: var(--c-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-fog);
  font-weight: 700;
}
.ta-pmap__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ta-pmap__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-line);
  border: 1.5px solid var(--c-fog);
  display: inline-block;
}
.ta-pmap__dot[data-status="approved"]        { background: var(--ta-good); border-color: var(--ta-good); }
.ta-pmap__dot[data-status="v1-fallon-edited"]{ background: var(--c-accent); border-color: var(--c-accent); }
.ta-pmap__dot[data-status="v1-from-book"]    { background: var(--c-paper); border-color: var(--c-fog); }
.ta-pmap__dot--legend { vertical-align: middle; margin-right: 4px; }
.ta-pmap__legend {
  margin: var(--c-space-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-4);
  font-size: var(--c-text-xs);
  color: var(--c-ink-soft);
}

.ta-unit { margin: var(--c-space-7) 0 0; }
.ta-unit__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--c-space-3);
  margin: 0 0 var(--c-space-4);
  padding-bottom: var(--c-space-2);
  border-bottom: 1px solid var(--c-line);
}
.ta-unit__name {
  margin: 0;
  font-family: var(--c-font-serif);
  font-size: var(--c-text-xl);
  color: var(--c-ink);
}
.ta-unit__count {
  margin: 0;
  font-size: var(--c-text-sm);
  color: var(--c-fog);
}

/* Lesson card refinement (additive over existing .lesson-card rules) */
.lesson-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-2);
  margin-bottom: var(--c-space-2);
}
.lesson-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--c-space-3);
}
.lesson-card .ta-pill {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

/* ----- Camera pill (used in vocab + lesson cards + quiz header) --------- */
.ta-pill--cam {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(199, 92, 28, 0.12);
  color: var(--c-bloom);
  border-color: rgba(199, 92, 28, 0.32);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.ta-pill--cam svg { display: block; }

/* ----- Quiz/comp shell -------------------------------------------------- */
.ta-quiz__head { margin-bottom: var(--c-space-5); }
.ta-quiz__head h1 {
  font-family: var(--c-font-serif);
  font-size: var(--c-text-2xl);
  margin: var(--c-space-2) 0 var(--c-space-3);
}
.ta-quiz__instructions {
  color: var(--c-ink-soft);
  line-height: var(--c-leading-loose);
}
.ta-quiz__meta {
  margin-top: var(--c-space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-2);
}
.ta-quiz__progress { margin: 0 0 var(--c-space-5); }
.ta-quiz__progress-bar {
  height: 6px;
  background: var(--c-line);
  border-radius: var(--c-radius-pill);
  overflow: hidden;
  margin-bottom: var(--c-space-2);
}
.ta-quiz__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--c-bloom);
  transition: width 0.25s ease;
}
.ta-quiz__progress-text {
  font-size: var(--c-text-sm);
  color: var(--c-ink-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-3);
  flex-wrap: wrap;
}
.ta-quiz__progress-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ta-quiz__progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-line);
  border: 1.5px solid var(--c-line);
}
.ta-quiz__progress-dot[data-state="answered"] {
  background: var(--c-bloom);
  border-color: var(--c-bloom);
}
.ta-quiz__progress-dot[data-state="current"] {
  background: var(--c-paper);
  border-color: var(--c-bloom);
  box-shadow: 0 0 0 2px rgba(199, 92, 28, 0.25);
}

.ta-quiz__stage {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--ta-radius-lg);
  padding: var(--c-space-5);
}
.ta-question-prompt {
  font-size: var(--c-text-xl);
  line-height: var(--c-leading-tight);
  margin: var(--c-space-4) 0;
  color: var(--c-ink);
  font-family: var(--c-font-serif);
}
.ta-input {
  width: 100%;
  padding: var(--c-space-4);
  font-size: var(--c-text-xl);
  border: 1.5px solid var(--c-line);
  border-radius: var(--ta-radius);
  background: var(--c-paper);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--c-font-mono);
  min-height: 56px;
  transition: border-color 0.15s ease;
}
.ta-input:focus {
  outline: none;
  border-color: var(--c-bloom);
  box-shadow: 0 0 0 3px rgba(199, 92, 28, 0.22);
}
.ta-quiz-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--c-space-3);
  margin-top: var(--c-space-5);
}
.ta-quiz-actions .ta-btn { min-height: 48px; flex: 1; max-width: 220px; }
.ta-quiz-actions .ta-btn--ghost { max-width: 140px; }
.ta-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-space-3);
  font-size: var(--c-text-sm);
  margin: var(--c-space-3) 0;
  padding: var(--c-space-3);
  background: var(--c-paper-warm);
  border-radius: var(--ta-radius);
}
.ta-mode-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  min-height: 32px;
  padding: 4px 10px;
}
.ta-mode-row label:hover { color: var(--c-bloom); }
.ta-mode-note {
  margin: var(--c-space-3) 0;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  display: inline-block;
}

.ta-callout {
  margin: var(--c-space-4) 0;
  padding: var(--c-space-4) var(--c-space-5);
  border-radius: var(--ta-radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ta-callout--warn {
  background: #fff7e6;
  border-left: 4px solid var(--ta-warn);
  color: #8a5a00;
}

/* ----- Launch banner (sits above the header on every public page) --------- */
.ta-launch {
  background: var(--c-ink);
  color: #fff;
  font-family: var(--c-font-sans);
  font-size: var(--c-text-sm);
  line-height: 1.4;
}
.ta-launch__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--c-space-2) var(--c-space-4);
  padding: 10px var(--c-space-5);
  text-align: center;
}
.ta-launch__tag {
  display: inline-block;
  background: var(--c-bloom);
  color: #fff;
  font-family: var(--c-font-mono);
  font-size: var(--c-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 9999px;
  white-space: nowrap;
}
.ta-launch__msg { color: #f7f6f1; }
.ta-launch__msg strong { color: #fff; }
.ta-launch__links { display: inline-flex; gap: var(--c-space-3); flex-wrap: wrap; justify-content: center; }
.ta-launch__links a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.ta-launch__links a:hover { color: var(--c-bloom-soft); }
@media (max-width: 640px) {
  .ta-launch__inner { padding: 10px var(--c-space-4); font-size: var(--c-text-xs); }
  .ta-launch__tag { font-size: 10px; }
}

/* ----- Mobile lesson layout tweaks -------------------------------------- */
@media (max-width: 720px) {
  .ta-subnav { padding: var(--c-space-1) 0; }
  .ta-crumbs { font-size: var(--c-text-xs); }
  .ta-lesson { padding: var(--c-space-4) var(--c-space-4) var(--c-space-6); gap: var(--c-space-5); }
  .ta-article { padding: 0; }
  .ta-article h1 { font-size: var(--c-text-2xl); }
  .ta-article h2 { font-size: var(--c-text-xl); margin-top: var(--c-space-6); }
  .ta-article h3 { font-size: var(--c-text-lg); }
  .ta-objectives, .ta-lesson__cta { padding: var(--c-space-4); }
  .ta-cat { padding: var(--c-space-3); }
  .ta-cat__name { font-size: var(--c-text-md); }
  .ta-quiz__stage { padding: var(--c-space-4); }
  .ta-question-prompt { font-size: var(--c-text-lg); }
  .ta-input { font-size: var(--c-text-lg); }
  .ta-prevnext { padding: var(--c-space-3) var(--c-space-4); }
  .ta-prevnext__title { font-size: var(--c-text-md); }
}

/* ----- Tap target baseline for interactive bits ------------------------- */
.ta-btn, .ta-prevnext, .lesson-card { min-height: 44px; }

/* ============================================================================
   Hover micro-interactions — pleasant but restrained. Cards lift with a
   warm shadow; CTAs nudge their arrow; audience strip + steps + stats get
   a quiet color/lift response; pricing tiers get a soft accent glow. All
   transforms ride a single shared easing token so the rhythm feels uniform.
   Everything respects prefers-reduced-motion (block at end of file).
   ============================================================================ */

/* Promote a few elements so transforms are crisp (subpixel + GPU layer). */
.ta-card,
.ta-audience-strip__item,
.ta-cta-block,
.ta-steps li,
.ta-stat,
.ta-tier,
.ta-pill,
.ta-chip,
.ta-btn,
.ta-prevnext,
.lesson-card,
.ta-cat,
.ta-pmap__dot,
.ta-toc__list a,
.ta-footer a,
.ta-nav a {
  will-change: transform;
}

/* ----- Cards: warm lift with accent edge ----------------------------------- */
.ta-card {
  transition:
    transform   0.22s var(--c-ease-out),
    border-color 0.22s var(--c-ease-out),
    box-shadow  0.22s var(--c-ease-out),
    background-color 0.22s var(--c-ease-out);
}
.ta-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-bloom);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.02),
    0 12px 28px -16px rgba(200, 96, 42, 0.32);
  background-color: #fffefa;
}
/* Heading inside the card warms toward the accent on hover. */
.ta-card:hover > h3,
.ta-card:hover > h2 {
  color: var(--c-bloom);
  transition: color 0.22s var(--c-ease-out);
}

/* ----- Audience strip: cells underline-reveal + lift ---------------------- */
.ta-audience-strip__item {
  position: relative;
  transition: background-color 0.22s var(--c-ease-out);
}
.ta-audience-strip__item::after {
  content: "";
  position: absolute;
  left: var(--c-space-4);
  right: var(--c-space-4);
  bottom: -1px;
  height: 2px;
  background: var(--c-bloom);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--c-ease-out);
}
.ta-audience-strip__item:hover {
  background-color: #fffefa;
}
.ta-audience-strip__item:hover::after {
  transform: scaleX(1);
}
.ta-audience-strip__item:hover .ta-audience-strip__line {
  color: var(--c-bloom);
}
.ta-audience-strip__line { transition: color 0.22s var(--c-ease-out); }

/* ----- Stats: oversized numerals lean in on hover of the row ------------- */
.ta-stats:hover .ta-stat__num { color: var(--c-ink-soft); }
.ta-stat:hover .ta-stat__num,
.ta-stats .ta-stat:hover .ta-stat__num {
  color: var(--c-bloom);
  transform: translateY(-2px);
}
.ta-stat__num {
  transition: color 0.28s var(--c-ease-out), transform 0.22s var(--c-ease-out);
}

/* ----- Steps: numerals nudge + h3 warms ----------------------------------- */
.ta-steps li {
  transition: transform 0.2s var(--c-ease-out);
}
.ta-steps li::before {
  transition: transform 0.22s var(--c-ease-out), color 0.22s var(--c-ease-out);
}
.ta-steps li:hover {
  transform: translateX(2px);
}
.ta-steps li:hover::before {
  transform: translateX(-4px);
  color: var(--c-ink);
}

/* ----- CTA block: subtle inner-glow on hover (e.g. "Try Lesson 1 free") --- */
.ta-cta-block {
  transition:
    transform 0.22s var(--c-ease-out),
    border-color 0.22s var(--c-ease-out),
    box-shadow 0.22s var(--c-ease-out);
}
.ta-cta-block:hover {
  transform: translateY(-2px);
  border-color: var(--c-bloom);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.02),
    0 18px 36px -22px rgba(200, 96, 42, 0.28);
}

/* ----- Buttons: lift + animated arrow (use → at the end of label) -------- */
.ta-btn {
  transition:
    background 0.18s var(--c-ease-out),
    color      0.18s var(--c-ease-out),
    transform  0.12s var(--c-ease-out),
    box-shadow 0.22s var(--c-ease-out),
    border-color 0.18s var(--c-ease-out);
}
.ta-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -14px rgba(200, 96, 42, 0.55);
}
.ta-btn--ghost:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -16px rgba(26, 26, 26, 0.32);
}
/* Animated arrow on buttons that contain a trailing → in their text. */
.ta-btn .ta-arrow,
.ta-btn::after {
  display: inline-block;
  transition: transform 0.22s var(--c-ease-out);
}
.ta-btn:hover .ta-arrow { transform: translateX(3px); }

/* ----- Footer: link underline reveal -------------------------------------- */
.ta-footer a {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.28s var(--c-ease-out), color 0.18s var(--c-ease-out);
  padding-bottom: 1px;
}
.ta-footer a:hover {
  background-size: 100% 1px;
  color: var(--c-bloom);
}

/* ----- Header nav: same subtle underline ---------------------------------- */
.ta-nav a:not(.ta-nav__cta) {
  background-image: linear-gradient(var(--c-bloom), var(--c-bloom));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.28s var(--c-ease-out), color 0.18s var(--c-ease-out);
  padding-bottom: 2px;
}
.ta-nav a:not(.ta-nav__cta):hover,
.ta-nav a[aria-current="page"]:not(.ta-nav__cta) {
  background-size: 100% 2px;
}

/* ----- Pricing tiers / lesson cards: shared accent lift ------------------- */
.ta-tier,
.lesson-card {
  transition:
    transform 0.22s var(--c-ease-out),
    border-color 0.22s var(--c-ease-out),
    box-shadow 0.22s var(--c-ease-out);
}
.ta-tier:hover,
.lesson-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-bloom);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.02),
    0 14px 30px -18px rgba(200, 96, 42, 0.30);
}

/* ----- Prev / next neighbor cards on lesson pages ------------------------- */
.ta-prevnext {
  transition: transform 0.22s var(--c-ease-out), border-color 0.22s var(--c-ease-out);
}
.ta-prevnext:hover { transform: translateY(-2px); border-color: var(--c-bloom); }
.ta-prevnext.is-prev:hover { transform: translate(-2px, -2px); }
.ta-prevnext.is-next:hover { transform: translate( 2px, -2px); }

/* ----- Vocabulary category cards: icon spins a hair, card lifts ----------- */
.ta-cat {
  transition: transform 0.22s var(--c-ease-out), border-color 0.22s var(--c-ease-out);
}
.ta-cat:hover {
  transform: translateY(-2px);
  border-color: var(--c-bloom);
}
.ta-cat__icon { transition: transform 0.32s var(--c-ease-out), color 0.22s var(--c-ease-out); }
.ta-cat:hover .ta-cat__icon { transform: rotate(-6deg) scale(1.08); color: var(--c-bloom); }

/* ----- Chips (vocab words): tactile press feel ---------------------------- */
.ta-chip {
  transition: background-color 0.16s var(--c-ease-out), color 0.16s var(--c-ease-out), transform 0.1s var(--c-ease-out);
}
.ta-chip:hover { background-color: rgba(200, 96, 42, 0.10); color: var(--c-ink); }
.ta-chip:active { transform: scale(0.96); }

/* ----- Progress map dots: gentle pulse ring on hover ---------------------- */
.ta-pmap__dot {
  transition: transform 0.22s var(--c-ease-out), box-shadow 0.32s var(--c-ease-out);
}
.ta-pmap__dot:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(200, 96, 42, 0.12);
}

/* ----- TOC active rail item gets a brighter underline marker ------------- */
.ta-toc__list a {
  transition: color 0.18s var(--c-ease-out), padding-left 0.22s var(--c-ease-out), border-color 0.18s var(--c-ease-out);
}
.ta-toc__list a:hover { padding-left: 14px; color: var(--c-ink); }

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ta-fade-in, .ta-fade-in-2, .ta-fade-in-3 { animation: none; opacity: 1; transform: none; }
  .ta-readbar__fill { transition: none; }
  .ta-card:hover, .ta-cta-block:hover, .ta-tier:hover, .lesson-card:hover,
  .ta-prevnext:hover, .ta-cat:hover, .ta-audience-strip__item:hover,
  .ta-steps li:hover, .ta-pmap__dot:hover, .ta-stat:hover .ta-stat__num,
  .ta-btn:hover, .ta-cat:hover .ta-cat__icon, .ta-chip:active {
    transform: none !important;
  }
  .ta-footer a, .ta-nav a:not(.ta-nav__cta) { background-size: 100% 1px; }
}

/* ============================================================================
   Enriched hover + idle motion — gives the page a heartbeat. Additive over
   the earlier hover block. Everything respects prefers-reduced-motion
   (override is in the dedicated block at the very end of this file).
   ============================================================================ */

/* Hero primary CTA breathes softly until hovered — pulls the eye without
   shouting. Animation pauses on hover so the lift/sheen takes over. */
@keyframes ta-breathe {
  0%, 100% { box-shadow: 0 8px 22px -16px rgba(200, 96, 42, 0.40); }
  50%      { box-shadow: 0 14px 28px -10px rgba(200, 96, 42, 0.55); }
}
.ta-hero .ta-btn--primary {
  animation: ta-breathe 4.4s ease-in-out infinite;
}
.ta-hero .ta-btn--primary:hover,
.ta-hero .ta-btn--primary:focus-visible { animation: none; }

/* Hero accent word: highlight strip draws in once on load — makes the focal
   word feel hand-marked rather than printed. */
@keyframes ta-accent-line {
  from { background-size: 0% 0.42em; }
  to   { background-size: 100% 0.42em; }
}
.ta-display .ta-display__accent {
  background-image: linear-gradient(transparent 60%, rgba(199, 92, 28, 0.22) 60%);
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 0.42em;
  animation: ta-accent-line 900ms 500ms var(--c-ease-out) both;
  padding-bottom: 0.04em;
}

/* Primary-button shimmer sweep on hover. */
.ta-btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ta-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -130%;
  width: 55%;
  background: linear-gradient(100deg,
              transparent 0%,
              rgba(255, 255, 255, 0.28) 50%,
              transparent 100%);
  transform: skewX(-18deg);
  transition: left 0.7s var(--c-ease-out);
  pointer-events: none;
  z-index: -1;
}
.ta-btn--primary:hover::before { left: 130%; }

/* Big section-mark numerals (01, 02, 03) bloom when their card is hovered. */
.ta-card .ta-section-mark {
  transition:
    opacity 0.32s var(--c-ease-out),
    transform 0.32s var(--c-ease-out),
    color 0.32s var(--c-ease-out);
}
.ta-card:hover .ta-section-mark {
  opacity: 0.55;
  transform: translateY(-2px) scale(1.04);
  color: var(--c-bloom);
}

/* All card icons nudge on parent hover (extends the .ta-cat__icon behavior). */
.ta-card__icon {
  transition:
    transform 0.32s var(--c-ease-out),
    background-color 0.22s var(--c-ease-out);
}
.ta-card:hover .ta-card__icon {
  transform: rotate(-6deg) scale(1.08);
  background-color: rgba(199, 92, 28, 0.18);
}

/* Inline links inside cards warm + tighten on card hover (catches the
   trailing "→" arrows in the three audience cards). */
.ta-card a {
  display: inline-block;
  transition: color 0.18s var(--c-ease-out), letter-spacing 0.22s var(--c-ease-out);
}
.ta-card:hover a { color: var(--c-bloom); letter-spacing: 0.012em; }

/* Audience strip — focusing one item dims the rest. */
.ta-audience-strip__item { transition: opacity 0.22s var(--c-ease-out), background-color 0.22s var(--c-ease-out); }
.ta-audience-strip:hover .ta-audience-strip__item:not(:hover) { opacity: 0.55; }

/* Stats row — sibling dim + larger lift on the focused stat. */
.ta-stats > div { transition: transform 0.22s var(--c-ease-out); }
.ta-stats > div:hover { transform: translateY(-4px); }
.ta-stats > div:hover .ta-stat__num { color: var(--c-bloom); transform: translateY(-2px) scale(1.04); }
.ta-stats:hover > div:not(:hover) .ta-stat__num,
.ta-stats:hover > div:not(:hover) .ta-stat__label { opacity: 0.5; transition: opacity 0.22s var(--c-ease-out); }

/* Idle glow on stat numerals — barely-there pulse so the row hums. */
@keyframes ta-stat-pulse {
  0%, 100% { text-shadow: 0 0 0 rgba(199, 92, 28, 0); }
  50%      { text-shadow: 0 0 18px rgba(199, 92, 28, 0.18); }
}
.ta-stats:not(:hover) .ta-stat__num { animation: ta-stat-pulse 5.5s ease-in-out infinite; }

/* Ink-section pull-quote: left border thickens + brightens on hover. */
.ta-hero__quote {
  transition:
    border-left-width 0.24s var(--c-ease-out),
    border-left-color 0.24s var(--c-ease-out),
    background-color 0.24s var(--c-ease-out),
    transform 0.24s var(--c-ease-out);
}
.ta-hero__quote:hover {
  border-left-width: 8px;
  border-left-color: var(--c-bloom-soft);
  transform: translateX(2px);
}

/* Header sign-in CTA — soft scale + warm glow. */
.ta-nav__cta {
  transition:
    background 0.18s var(--c-ease-out),
    color 0.18s var(--c-ease-out),
    transform 0.18s var(--c-ease-out),
    box-shadow 0.22s var(--c-ease-out);
}
.ta-nav__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -10px rgba(200, 96, 42, 0.55);
}

/* Brand wordmark — gentle lift + ink swap on hover. */
.ta-brand { transition: transform 0.22s var(--c-ease-out); }
.ta-brand:hover { transform: translateY(-1px); }
.ta-brand__mark { transition: color 0.22s var(--c-ease-out); }
.ta-brand:hover .ta-brand__mark { color: var(--c-ink); }

/* Reduced-motion: kill the new idle animations and decorative sweep. */
@media (prefers-reduced-motion: reduce) {
  .ta-hero .ta-btn--primary,
  .ta-stats:not(:hover) .ta-stat__num { animation: none !important; }
  .ta-display .ta-display__accent {
    animation: none !important;
    background-size: 100% 0.42em;
  }
  .ta-btn--primary::before { display: none !important; }
  .ta-hero__quote:hover { transform: none !important; }
  .ta-stats > div:hover,
  .ta-stats > div:hover .ta-stat__num { transform: none !important; }
}

/* ============================================================================
   Brand bulb logo — Edison-bulb SVG injected into every .ta-brand by
   thinkasl.js. Default: ink-soft outline + warm-yellow filament with a
   soft idle flicker. Hover: outline fires to bloom-orange, filament
   intensifies, halo rays burst outward. Click-target is still the
   wordmark "Think ASL" — the bulb just rides along.
   ============================================================================ */

.ta-brand { align-items: center; }
.ta-brand__bulb {
  width: 26px;
  height: 32px;
  flex: 0 0 26px;
  overflow: visible;            /* rays + drop-shadow can extend past viewBox */
  display: block;
  align-self: center;
  margin-right: 2px;
}

/* Bulb outline + base threads — subdued ink by default, bloom on hover. */
.ta-brand__bulb .ta-bulb__body,
.ta-brand__bulb .ta-bulb__base {
  fill: none;
  stroke: var(--c-ink-soft);
  stroke-width: 2.1;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke 0.32s var(--c-ease-out);
}
.ta-brand:hover .ta-bulb__body,
.ta-brand:hover .ta-bulb__base { stroke: var(--c-bloom); }

/* Filament — always lit warm-yellow with a soft halo. */
.ta-brand__bulb .ta-bulb__filament {
  fill: none;
  stroke: #f6c259;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(246, 194, 89, 0.55));
  transition: stroke 0.32s var(--c-ease-out), filter 0.32s var(--c-ease-out);
}
.ta-brand:hover .ta-bulb__filament {
  stroke: #ffd76b;
  filter:
    drop-shadow(0 0 6px rgba(246, 194, 89, 0.95))
    drop-shadow(0 0 13px rgba(246, 194, 89, 0.55));
}

/* Halo rays — hidden by default, burst out on hover. */
.ta-brand__bulb .ta-bulb__rays {
  fill: none;
  stroke: var(--c-bloom);
  stroke-width: 2;
  stroke-linecap: round;
  transform-origin: 20px 20px;
  transform: scale(0.45);
  opacity: 0;
  transition:
    transform 0.42s var(--c-ease-out),
    opacity 0.32s var(--c-ease-out),
    stroke 0.32s var(--c-ease-out);
}
.ta-brand:hover .ta-bulb__rays {
  transform: scale(1);
  opacity: 1;
}

/* Idle flicker — heartbeat of the filament when no one is hovering. */
@keyframes ta-filament-flicker {
  0%, 100% { filter: drop-shadow(0 0 2px   rgba(246, 194, 89, 0.55)); }
  44%      { filter: drop-shadow(0 0 4.5px rgba(246, 194, 89, 0.90)); }
  53%      { filter: drop-shadow(0 0 2.5px rgba(246, 194, 89, 0.55)); }
  60%      { filter: drop-shadow(0 0 4px   rgba(246, 194, 89, 0.80)); }
}
.ta-brand:not(:hover) .ta-bulb__filament {
  animation: ta-filament-flicker 5s ease-in-out infinite;
}

/* On-load switch-on — quick warm-up flash for the filament. */
@keyframes ta-filament-switch-on {
  0%   { stroke: var(--c-fog); filter: drop-shadow(0 0 0   rgba(246, 194, 89, 0)); }
  55%  { stroke: #ffe39a;       filter: drop-shadow(0 0 7px rgba(246, 194, 89, 0.95)); }
  100% { stroke: #f6c259;       filter: drop-shadow(0 0 2px rgba(246, 194, 89, 0.55)); }
}
.ta-brand__bulb .ta-bulb__filament {
  animation: ta-filament-switch-on 1.2s var(--c-ease-out) 300ms both,
             ta-filament-flicker 5s ease-in-out 1.6s infinite;
}

/* Reduced-motion: kill the flicker + switch-on; bulb sits still and lit. */
@media (prefers-reduced-motion: reduce) {
  .ta-brand__bulb .ta-bulb__filament,
  .ta-brand:not(:hover) .ta-bulb__filament { animation: none !important; }
}