/* ==========================================================================
   academy.css — /learn/ (EDC Academy hub and lesson pages). Added 2026-09-28.
   Pages are generated by tools/academy/build.py; edit courses.json, not HTML.

   TOKENS ARE NOT NEW. Lifted from site-nav.css, social-media-guide.css and
   menu-engineering.css:
     navy          #16213e → #0a1930 (header, homepage, guide diagrams)
     gold          #d4a84b / #E1B168; gold text on white #9a6b12 / #6f4c08
     ink           #111827 / #1F2937 / #374151 / #4B5563 / #6b7280
     rules & wells #E5E7EB / #F9FAFB / #FBF7F0
     type          'Playfair Display' headings, 'Montserrat' body
     radius        8px cards, 10px panels, 16px feature surfaces
     easing        cubic-bezier(0.22, 1, 0.36, 1)
   The navy/gold also matches the YouTube thumbnails, which use the same pair.

   NO-JS FLOOR. Everything below describes the finished page. The player is a
   real link to the video on YouTube until academy.js swaps in the embed. The
   entrance motion is keyframes attached only via .is-in, which the script adds
   after checking reduced motion — if it never runs, nothing is hidden.

   CONTRAST (AA, computed 2026-09-28, WCAG 2 formula): #F3F4F6 on #16213e
   14.4:1; #C9CFD8 on #16213e 10.1:1; gold #d4a84b on #0a1930 7.9:1 and on
   #16213e 7.2:1; #9a6b12 on #fff 4.7:1; #6b7280 on #fff 4.8:1.
   #9a6b12 on the cream well #FBF7F0 is only 4.4:1 — FAILS for small text —
   so text inside cream cards uses the darker #6f4c08 instead.
   ========================================================================== */

.ac { --ac-navy: #16213e; --ac-deep: #0a1930; --ac-gold: #d4a84b; --ac-gold-ink: #9a6b12;
      --ac-ease: cubic-bezier(0.22, 1, 0.36, 1); }

.ac-wrap { max-width: 1120px; margin: 0 auto; padding: 0 1rem; }

/* ---------- hero ---------- */

.ac-hero {
  background: linear-gradient(160deg, var(--ac-navy) 0%, var(--ac-deep) 100%);
  color: #F3F4F6; padding: 2.5rem 0 3rem;
}
.ac-hero--lesson { padding-bottom: 7rem; }
.ac-crumbs { font-size: 0.8125rem; color: #C9CFD8; margin: 0 0 1.5rem; }
.ac-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.ac-crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: #8b93a3; }
.ac-crumbs a { color: #E5E7EB; text-decoration: none; }
.ac-crumbs a:hover, .ac-crumbs a:focus-visible { color: var(--ac-gold); text-decoration: underline; }
.ac-eyebrow {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ac-gold); margin: 0 0 0.875rem;
}
.ac-hero h1 {
  font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.75rem, 4.6vw, 2.875rem);
  line-height: 1.16; color: #fff; margin: 0 0 1rem; letter-spacing: -0.01em; max-width: 22ch;
}
.ac-hero--lesson h1 { max-width: 30ch; font-size: clamp(1.625rem, 4vw, 2.5rem); }
.ac-standfirst { font-size: 1.0625rem; line-height: 1.7; color: #D1D5DB; margin: 0; max-width: 60ch; }
.ac-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.ac-facts li {
  font-size: 0.8125rem; color: #E5E7EB; border: 1px solid rgba(212, 168, 75, 0.35);
  border-radius: 999px; padding: 0.3rem 0.8rem; background: rgba(212, 168, 75, 0.08);
}
.ac-facts b { color: #fff; font-weight: 600; }

/* course bar on lesson pages: lesson n of N, with a link to every lesson */
.ac-coursebar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0 0 1.25rem; }
.ac-coursebar-label { font-size: 0.8125rem; color: #C9CFD8; }
.ac-coursebar-label a { color: var(--ac-gold); font-weight: 600; text-decoration: none; }
.ac-coursebar-label a:hover, .ac-coursebar-label a:focus-visible { text-decoration: underline; }
.ac-steps { display: flex; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.ac-steps a {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: 0.75rem; font-weight: 600; text-decoration: none; color: #E5E7EB;
  border: 1px solid rgba(212, 168, 75, 0.4);
}
.ac-steps a:hover, .ac-steps a:focus-visible { border-color: var(--ac-gold); color: #fff; }
.ac-steps a[aria-current="page"] { background: var(--ac-gold); border-color: var(--ac-gold); color: var(--ac-deep); }

/* ---------- player (link to YouTube until JS swaps in the embed) ---------- */

.ac-stage { margin-top: -5.5rem; }
.ac-player {
  position: relative; display: block; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden; background: var(--ac-deep);
  /* White rim: several thumbnails open with a navy banner that is close to, but not
     the same as, the hero navy behind them — without a rim the two navies meet and the
     player's top edge is lost (reported on desktop, 2026-09-28). Spread shadow, so it
     takes no layout space and cannot shift anything. */
  box-shadow: 0 0 0 4px #fff, 0 24px 60px rgba(10, 25, 48, 0.35);
}
@media (min-width: 768px) { .ac-player { box-shadow: 0 0 0 6px #fff, 0 24px 60px rgba(10, 25, 48, 0.35); } }
.ac-player img, .ac-player iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.ac-player-btn {
  position: absolute; inset: 0; display: grid; place-items: center; text-decoration: none;
  background: linear-gradient(0deg, rgba(10, 25, 48, 0.35), rgba(10, 25, 48, 0) 55%);
}
.ac-play {
  width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10, 25, 48, 0.82); border: 2px solid var(--ac-gold);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  transition: transform 300ms var(--ac-ease), background-color 300ms var(--ac-ease);
}
.ac-play svg { width: 30px; height: 30px; margin-left: 5px; fill: var(--ac-gold); transition: fill 300ms var(--ac-ease); }
.ac-player-btn:focus-visible { outline: 3px solid var(--ac-gold); outline-offset: -3px; }
.ac-player-btn:focus-visible .ac-play { background: var(--ac-gold); }
.ac-player-btn:focus-visible .ac-play svg { fill: var(--ac-deep); }
@media (hover: hover) and (pointer: fine) {
  .ac-player-btn:hover .ac-play { transform: scale(1.08); background: var(--ac-gold); }
  .ac-player-btn:hover .ac-play svg { fill: var(--ac-deep); }
}

.ac-meta {
  max-width: 960px; margin: 1rem auto 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  font-size: 0.875rem; color: #4B5563; align-items: center;
}
.ac-meta a { color: var(--ac-gold-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ac-meta a:hover, .ac-meta a:focus-visible { color: #6f4c08; }
.ac-meta i { color: var(--ac-gold-ink); margin-right: 0.35rem; }
/* AI disclosure — YouTube's own "made with AI" label, carried onto the page
   because the click-to-play player hides YouTube's label until play. */
.ac-ai { max-width: 960px; margin: 0.625rem auto 0; font-size: 0.875rem; line-height: 1.6; color: #374151; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ac-ai-badge {
  display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #16213e; background: #F3F4F6; border: 1px solid #D1D5DB; border-radius: 999px; padding: 0.15rem 0.55rem; line-height: 1.4; vertical-align: middle;
}
.ac-lesson-text .ac-ai-badge { align-self: flex-start; margin-top: 0.375rem; }
.ac-privacy { max-width: 960px; margin: 0.375rem auto 0; font-size: 0.75rem; line-height: 1.6; color: #6b7280; }
.ac-privacy a { color: #6b7280; text-decoration: underline; }
.ac-privacy a:hover, .ac-privacy a:focus-visible { color: var(--ac-gold-ink); }

/* ---------- lesson body ---------- */

.ac-body { padding-top: 2.5rem; padding-bottom: 3.5rem; }
.ac-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); max-width: 960px; margin: 0 auto; }
@media (min-width: 900px) { .ac-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; } }

.ac-h2 {
  font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  line-height: 1.3; color: #111827; margin: 0 0 1rem;
}
.ac-section + .ac-section { margin-top: 2.25rem; }

.ac-learn {
  list-style: none; margin: 0; padding: 1.25rem; display: grid; gap: 0.75rem;
  background: #FBF7F0; border: 1px solid #F1E3CE; border-radius: 10px;
}
@media (min-width: 640px) { .ac-learn { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ac-learn li { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9375rem; line-height: 1.55; color: #1F2937; }
.ac-learn svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; }

.ac-chapters { list-style: none; margin: 0; padding: 0; border: 1px solid #E5E7EB; border-radius: 10px; overflow: hidden; }
.ac-chapters li + li { border-top: 1px solid #E5E7EB; }
.ac-chapters a { display: flex; gap: 1rem; padding: 0.75rem 1rem; color: #1F2937; text-decoration: none; font-size: 0.9375rem; }
.ac-chapters a:hover, .ac-chapters a:focus-visible { background: #F9FAFB; color: var(--ac-gold-ink); }
.ac-chapters time { flex: 0 0 3.5rem; font-variant-numeric: tabular-nums; color: var(--ac-gold-ink); font-weight: 600; }

.ac-desc p, .ac-desc li { font-size: 1.0625rem; line-height: 1.78; color: #374151; }
.ac-desc p { margin: 0 0 1rem; }
.ac-desc ul, .ac-desc ol { margin: 0 0 1.125rem; padding-left: 1.4rem; }
.ac-desc ul { list-style: disc; }
.ac-desc ol { list-style: decimal; }
.ac-desc li { margin-bottom: 0.4rem; }
.ac-desc a { color: var(--ac-gold-ink); text-decoration: underline; text-underline-offset: 2px; }
.ac-desc .ac-calc {
  font-variant-numeric: tabular-nums; background: #F9FAFB; border-left: 3px solid #E1B168;
  border-radius: 0 8px 8px 0; padding: 0.75rem 1rem;
}
.ac-source { font-size: 0.875rem; color: #4B5563; margin: 1.25rem 0 0; }
.ac-source a { color: var(--ac-gold-ink); }

/* aside */
.ac-aside { display: grid; gap: 1.25rem; align-content: start; }
.ac-card { border: 1px solid #E5E7EB; border-radius: 10px; padding: 1.125rem 1.25rem; background: #fff; }
.ac-card-title {
  font-family: 'Montserrat', sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ac-gold-ink); margin: 0 0 0.75rem;
}
.ac-practice { background: #FBF7F0; border-color: #F1E3CE; }
.ac-practice .ac-card-title { color: #6f4c08; }
.ac-practice a { font-family: 'Playfair Display', Georgia, serif; font-size: 1.0625rem; line-height: 1.4; color: #111827; text-decoration: none; }
.ac-practice a:hover, .ac-practice a:focus-visible { color: #6f4c08; text-decoration: underline; }
.ac-practice p { font-size: 0.875rem; line-height: 1.6; color: #4B5563; margin: 0.5rem 0 0; }
.ac-toc { list-style: none; margin: 0; padding: 0; counter-reset: ac; }
.ac-toc li { counter-increment: ac; }
.ac-toc li + li { margin-top: 0.25rem; }
.ac-toc a {
  display: flex; gap: 0.625rem; padding: 0.5rem; margin: 0 -0.5rem; border-radius: 8px;
  font-size: 0.875rem; line-height: 1.45; color: #374151; text-decoration: none;
}
.ac-toc a::before { content: counter(ac); flex: 0 0 1.25rem; font-weight: 700; color: var(--ac-gold-ink); }
.ac-toc a:hover, .ac-toc a:focus-visible { background: #F9FAFB; color: #111827; }
.ac-toc a[aria-current="page"] { background: #16213e; color: #fff; }
.ac-toc a[aria-current="page"]::before { color: var(--ac-gold); }
.ac-toc small { display: block; color: inherit; opacity: 0.75; font-size: 0.75rem; margin-top: 0.125rem; }

/* previous / next */
.ac-pager { display: grid; gap: 1rem; max-width: 960px; margin: 3rem auto 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ac-pager { grid-template-columns: 1fr 1fr; } }
.ac-pager a {
  display: flex; gap: 0.875rem; align-items: center; padding: 0.75rem; border: 1px solid #E5E7EB;
  border-radius: 10px; text-decoration: none; color: #111827; background: #fff;
  transition: border-color 300ms var(--ac-ease), box-shadow 300ms var(--ac-ease);
}
.ac-pager a.is-next { flex-direction: row-reverse; text-align: right; }
@media (min-width: 640px) { .ac-pager a.is-next { grid-column: 2; } }
.ac-pager img { width: 112px; height: 63px; flex: 0 0 112px; border-radius: 6px; object-fit: cover; }
.ac-pager span { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ac-gold-ink); }
.ac-pager strong { display: block; font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 1rem; line-height: 1.35; margin-top: 0.2rem; }
.ac-pager a:focus-visible { outline: 3px solid var(--ac-gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .ac-pager a:hover { border-color: var(--ac-gold); box-shadow: 0 10px 28px rgba(22, 33, 62, 0.1); }
}

/* ---------- hub: course syllabus ---------- */

.ac-course { padding: 3rem 0 1rem; }
.ac-course-head { display: grid; gap: 1.25rem; align-items: end; margin: 0 0 1.75rem; }
@media (min-width: 800px) { .ac-course-head { grid-template-columns: minmax(0, 1fr) auto; } }
.ac-course-num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ac-gold-ink); margin: 0 0 0.5rem; }
.ac-course h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.625rem, 3.6vw, 2.25rem); color: #111827; margin: 0 0 0.625rem; line-height: 1.2; }
.ac-course-sum { font-size: 1.0625rem; line-height: 1.7; color: #374151; margin: 0; max-width: 62ch; }
.ac-course-meta { font-size: 0.875rem; color: #6b7280; margin: 0.625rem 0 0; }
.ac-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.4rem; border-radius: 8px;
  background: #16213e; color: #fff; font-weight: 600; font-size: 0.9375rem; text-decoration: none;
  transition: background-color 300ms var(--ac-ease), transform 300ms var(--ac-ease);
}
.ac-btn i { color: var(--ac-gold); }
.ac-btn svg { width: 14px; height: 14px; fill: var(--ac-gold); }
.ac-btn:focus-visible { outline: 3px solid var(--ac-gold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ac-btn:hover { background: #0a1930; transform: translateY(-1px); } }

.ac-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ac-lesson a {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; text-decoration: none; color: inherit;
  border: 1px solid #E5E7EB; border-radius: 16px; overflow: hidden; background: #fff; height: 100%;
  transition: border-color 300ms var(--ac-ease), box-shadow 300ms var(--ac-ease);
}
@media (min-width: 720px) { .ac-lesson a { grid-template-columns: 320px minmax(0, 1fr); } }
.ac-thumb { position: relative; margin: 0; aspect-ratio: 16 / 9; background: #0a1930; overflow: hidden; }
.ac-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ac-ease); }
.ac-dur {
  position: absolute; right: 0.625rem; bottom: 0.625rem; font-size: 0.75rem; font-weight: 600;
  font-variant-numeric: tabular-nums; color: #fff; background: rgba(10, 25, 48, 0.88); border-radius: 6px; padding: 0.2rem 0.5rem;
}
.ac-lesson-text { padding: 1.125rem 1.25rem 1.25rem; display: flex; flex-direction: column; justify-content: center; }
.ac-lesson-num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ac-gold-ink); }
.ac-lesson h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; line-height: 1.3; color: #111827; margin: 0.375rem 0 0.5rem; }
.ac-lesson p { font-size: 0.9375rem; line-height: 1.6; color: #4B5563; margin: 0; }
.ac-lesson-cta { margin-top: 0.875rem; font-size: 0.875rem; font-weight: 600; color: var(--ac-gold-ink); }
.ac-lesson a:focus-visible { outline: 3px solid var(--ac-gold); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .ac-lesson a:hover { border-color: var(--ac-gold); box-shadow: 0 14px 36px rgba(22, 33, 62, 0.12); }
  .ac-lesson a:hover .ac-thumb img { transform: scale(1.04); }
}

.ac-more {
  margin: 3rem 0 4rem; padding: 1.75rem; border-radius: 16px; display: grid; gap: 1rem; align-items: center;
  background: linear-gradient(160deg, var(--ac-navy) 0%, var(--ac-deep) 100%); color: #E5E7EB;
}
@media (min-width: 720px) { .ac-more { grid-template-columns: minmax(0, 1fr) auto; padding: 2rem 2.25rem; } }
.ac-more h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.375rem; color: #fff; margin: 0 0 0.375rem; }
.ac-more p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: #C9CFD8; }
.ac-more .ac-btn { background: var(--ac-gold); color: var(--ac-deep); }
.ac-more .ac-btn i { color: var(--ac-deep); }
.ac-more .ac-btn svg { fill: var(--ac-deep); }
@media (hover: hover) and (pointer: fine) { .ac-more .ac-btn:hover { background: #E1B168; } }

/* ---------- entrance: once, on first view, added by academy.js ---------- */

@keyframes ac-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ac-reveal.is-in { animation: ac-rise 700ms var(--ac-ease) both; animation-delay: var(--ac-d, 0ms); }

@media (prefers-reduced-motion: reduce) {
  .ac-reveal.is-in { animation: none; }
  .ac *, .ac *::before, .ac *::after { transition: none !important; }
}