/* courses page: gallery / catalog. Shared tokens come from /css/site.css. */

/* ---------- title ---------- */
.c-title { padding-block: clamp(40px, 6vw, 80px) 0; background: radial-gradient(60% 80% at 80% 0%, rgba(27, 94, 72, .2), transparent 70%), var(--canvas); }
.c-title h1 { font-size: var(--t-3xl); font-weight: 800; line-height: 1.04; letter-spacing: -.024em; max-width: 12em; text-wrap: balance; }
.c-title .lede { margin-block-start: var(--s-5); font-size: var(--t-lg); line-height: 1.6; color: var(--ink-soft); max-width: 36em; text-wrap: pretty; }

/* ---------- the lesson walk (peak) ---------- */
.walk { background: var(--canvas); }
.walk__stage { padding-block: var(--s-8) var(--s-10); }
.walk__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8) clamp(28px, 5vw, 80px); align-items: center; }
.walk__copy h2 { font-size: var(--t-2xl); font-weight: 800; line-height: 1.1; letter-spacing: var(--track-tight); margin-block-end: var(--s-5); }
.walk__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.walk__list li { padding-inline-start: var(--s-5); border-inline-start: 2px solid var(--line-strong); color: var(--ink-soft); line-height: 1.5; transition: opacity 260ms var(--ease-out), border-color 260ms var(--ease-out); overflow-wrap: anywhere; }
.walk__copy .fine { margin-block-start: var(--s-6); font-size: var(--t-xs); color: var(--ink-mute); }
.walk__rail { min-inline-size: 0; outline-offset: 6px; }
.walk__track { display: flex; gap: clamp(16px, 2.4vw, 32px); justify-content: center; }
.frame { margin: 0; flex: 0 0 auto; inline-size: clamp(170px, 17vw, 230px); }
.frame__phone { border-radius: 30px; overflow: hidden; border: 1px solid var(--bezel-line); background: var(--bezel); box-shadow: var(--e3), 0 0 0 6px rgba(11, 15, 14, .35); }
.frame__phone img { inline-size: 100%; block-size: auto; }
.frame figcaption { margin-block-start: var(--s-4); font-size: var(--t-xs); line-height: 1.5; color: var(--ink-mute); text-wrap: pretty; }
.frame figcaption b { color: var(--ink); font-size: var(--t-sm); }

/* motion, wide: pinned stage, the rail pans one frame at a time */
@media (min-width: 900px) {
  .motion .walk { block-size: 250vh; }
  .motion .walk__stage { position: sticky; inset-block-start: 0; block-size: 100vh; block-size: 100svh; display: grid; align-items: center; padding-block: var(--s-6); overflow: clip; }
  .motion .walk__rail { overflow: clip; overflow-clip-margin: 24px; -webkit-mask-image: linear-gradient(to left, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(to left, transparent, #000 9%, #000 91%, transparent); padding-block: 12px; }
  .motion .walk__track { justify-content: flex-start; will-change: transform; }
  .motion .frame { inline-size: min(300px, calc((100svh - 200px) / 2.08)); transform-origin: 50% 40%; will-change: transform; }
  .motion .walk__list li { opacity: .6; }
  .motion .walk__list li.on { opacity: 1; border-inline-start-color: var(--accent); }
}
/* narrow: a native swipe rail, nothing pinned */
@media (max-width: 899.98px) {
  .walk__grid { grid-template-columns: minmax(0, 1fr); }
  .walk__rail { overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-block: var(--s-2) var(--s-4); scrollbar-width: none; }
  .walk__rail::-webkit-scrollbar { display: none; }
  .walk__track { justify-content: flex-start; inline-size: max-content; }
  .frame { inline-size: min(64vw, 260px); scroll-snap-align: center; }
}

/* ---------- catalogue: index + plates ---------- */
.catalog { background: var(--ground-2); padding-block: var(--chapter-pad); border-block-start: 1px solid var(--line); }
.catalog__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 clamp(56px, 7vw, 112px); align-items: start; max-width: 1200px; }
.index { position: sticky; inset-block-start: 32px; align-self: start; }
.index__title { font-size: var(--t-sm); font-weight: 700; color: var(--accent-2); margin-block-end: var(--s-4); font-variant-numeric: tabular-nums; }
.index ol { list-style: none; padding: 0; margin: 0; display: grid; }
.index li.ix-sep { margin-block-start: var(--s-4); padding-block-start: var(--s-4); border-block-start: 1px solid var(--line); }
.index a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); align-items: baseline; padding-block: 9px; color: var(--ink-mute); text-decoration: none; font-weight: 700; font-size: 15.5px; line-height: 1.3; transition: color 160ms var(--ease-out); }
.index a:hover { color: var(--ink); }
.index a[aria-current="true"] { color: var(--ink); }
.ix-n { font-variant-numeric: tabular-nums; color: var(--accent-2); font-weight: 800; }
.ix-free { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--accent); font-weight: 700; }
.ix-bar { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px; background: var(--line); }
.ix-bar::after { content: ""; position: absolute; inset: 0; background: var(--accent-2); transform: scaleX(var(--fill, 0)); transform-origin: 100% 50%; }
[dir="ltr"] .ix-bar::after { transform-origin: 0 50%; }

/* the rider: the avatar stands at the course you are reading */
.rider { display: none; }
@media (min-width: 1100px) {
  .glide .rider { display: block; position: absolute; inset-block-start: 0; inset-inline-end: -84px; inline-size: 70px; block-size: 90px; pointer-events: none; will-change: transform; z-index: 2; }
  .rider__body { position: absolute; inset: 0; transform-origin: 50% 70%; }
  .rider img { position: absolute; inset-block-end: 0; inset-inline: 0; margin-inline: auto; block-size: 100%; inline-size: auto; max-inline-size: none; opacity: 0; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); }
  .rider img.on { opacity: 1; }
}

.plates { min-inline-size: 0; }
.plate { padding-block: var(--s-9); border-block-start: 1px solid var(--line); scroll-margin-block-start: 24px; }
.plate:first-child { border-block-start: 0; padding-block-start: 0; }
.plate__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-6); align-items: end; }
.plate__head h2, .plate__head h3 { grid-column: 1; font-size: var(--t-2xl); font-weight: 800; line-height: 1.12; letter-spacing: var(--track-tight); text-wrap: balance; }
.plate__head .count { grid-column: 1; margin-block-start: var(--s-2); font-size: var(--t-sm); font-weight: 800; color: var(--accent-2); }
.plate__n::before { content: attr(data-n); } /* decoration (aria-hidden), not text content */
.plate__n { grid-column: 2; grid-row: 1 / span 2; font-size: clamp(56px, 7vw, 104px); font-weight: 800; line-height: .84; letter-spacing: -.04em; color: var(--surface-2); -webkit-text-stroke: 1px var(--line-strong); font-variant-numeric: tabular-nums; }
.tier { color: var(--ink-mute); font-weight: 700; font-size: .62em; letter-spacing: 0; white-space: nowrap; }
.tier--free { color: var(--accent); }
.plate--free .plate__n { color: rgba(190, 237, 217, .14); -webkit-text-stroke-color: var(--accent-2); }
.plate__desc { margin-block-start: var(--s-5); font-size: var(--t-lg); line-height: 1.55; color: var(--ink); max-width: 34em; text-wrap: pretty; overflow-wrap: anywhere; }
.plate__note { margin-block-start: var(--s-4); color: var(--ink-soft); max-width: 40em; overflow-wrap: anywhere; }
.plate__note b { color: var(--ink); }
.lessons { margin: var(--s-6) 0 0; padding: 0; list-style: none; counter-reset: ls; columns: 2 18em; column-gap: clamp(28px, 4vw, 56px); }
.lessons li { counter-increment: ls; break-inside: avoid; position: relative; padding-inline-start: 2.3em; padding-block: 9px; border-block-end: 1px solid var(--line); font-size: 16px; line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere; }
.lessons li::before { content: counter(ls); position: absolute; inset-inline-start: 0; inset-block-start: 11px; color: var(--ink-mute); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; }
.sc-ready.motion .plate:not(.in) .lessons li { opacity: .6; transform: translateY(8px); }
.sc-ready.motion .plate .lessons li { transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out); transition-delay: calc(var(--i, 0) * 28ms); }

.ext { padding-block-start: var(--s-10); border-block-start: 1px solid var(--line-strong); scroll-margin-block-start: 24px; }
.ext__head h2 { font-size: var(--t-3xl); font-weight: 800; line-height: 1.04; letter-spacing: -.022em; }
.ext__head p { margin-block-start: var(--s-4); color: var(--ink-soft); font-size: var(--t-lg); max-width: 34em; }
.ext__grid { display: grid; grid-template-columns: minmax(0, 1fr); margin-block-start: var(--s-7); }
.plate--ext { padding-block: var(--s-7); border-block-start: 1px solid var(--line); }
.plate--ext:first-child { border-block-start: 1px solid var(--line); padding-block-start: var(--s-7); }
.plate--ext .plate__head h3 { font-size: var(--t-xl); font-weight: 400; }
.plate--ext .plate__head h3 b { font-weight: 800; }
.plate--ext .plate__n { font-size: clamp(44px, 4.6vw, 64px); }
.plate--ext .plate__desc { font-size: var(--t-base); }


/* narrow: the index becomes a sticky tab strip */
@media (max-width: 1099.98px) {
  .catalog__grid { grid-template-columns: minmax(0, 1fr); }
  .index { inset-block-start: 0; z-index: 12; margin-inline: calc(-1 * var(--gutter)); margin-block-end: var(--s-7); background: var(--veil-2); border-block: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .index__title { display: none; }
  .index ol { display: flex; gap: var(--s-5); overflow-x: auto; padding-inline: var(--gutter); scrollbar-width: none; }
  .index ol::-webkit-scrollbar { display: none; }
  .index li.ix-sep { margin: 0; padding: 0; border: 0; padding-inline-start: var(--s-5); border-inline-start: 1px solid var(--line); }
  .index a { display: flex; gap: 6px; white-space: nowrap; padding-block: 13px 12px; font-size: 14.5px; min-block-size: 44px; }
  .ix-free { display: none; }
  .plate, .ext { scroll-margin-block-start: 64px; }
}
@media (max-width: 760px) {
  .plate__head h2 { font-size: clamp(25px, 7vw, 32px); }
  .plate__head { grid-template-columns: minmax(0, 1fr); }
  .plate__n { display: none; }
  .lessons { columns: 1; }
  .c-title h1 { font-size: clamp(34px, 9.6vw, 46px); }
}

/* ---------- questions ---------- */
.c-faq { padding-block: var(--chapter-pad); background: var(--canvas); }
.c-faq__h { font-size: var(--t-2xl); font-weight: 800; line-height: 1.1; letter-spacing: var(--track-tight); margin-block-end: var(--s-7); }

/* ---------- close: the last plate is the download ---------- */
.c-close { background: var(--surface); border-block-start: 1px solid var(--line); padding-block: var(--s-10) var(--s-9); overflow: clip; }
.c-close__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-7) clamp(32px, 6vw, 96px); align-items: end; max-width: 1200px; }
.plate--close { padding: 0; border: 0; max-width: 46em; }
.plate--close .plate__n { color: rgba(190, 237, 217, .1); -webkit-text-stroke-color: var(--accent-2); }
.c-close__links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-7); }
.c-close .fine { margin-block-start: var(--s-6); font-size: var(--t-sm); color: var(--ink-mute); max-width: 44em; }
.c-close__stand { inline-size: 140px; }
.c-close__stand img { inline-size: 100%; block-size: auto; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
@media (max-width: 760px) {
  .c-close__grid { grid-template-columns: minmax(0, 1fr); }
  .c-close__stand { inline-size: 104px; margin-inline-start: auto; order: -1; margin-block-end: calc(-1 * var(--s-5)); }
}