/* Homepage, "dark & brass" (mockups/brass/dark/index.html).
   It looks like the channel people already know: an evening room, the
   teacher's face, episodes with brass title cards, organised as seasons. */

/* type roles come from brass.css; the stage headline (60) and the end
   card (44) are the page's two display moments */
section { padding: 96px 0; }
.lead { margin-top: 12px; max-width: 58ch; }

/* 1. the stage. Photo and shade are one background, so text is always read
   against the shade, never the bare photo. */
.stage { --stage-photo: none; position: relative; isolation: isolate; min-height: min(86vh, 780px); display: flex; align-items: flex-end; overflow: hidden; padding: 0;
  background: linear-gradient(90deg, rgba(20,17,14,.96) 0%, rgba(20,17,14,.88) 40%, rgba(20,17,14,.15) 60%, rgba(20,17,14,0) 72%), linear-gradient(0deg, rgba(20,17,14,.85), rgba(20,17,14,0) 34%), var(--stage-photo) 50% 28%/cover no-repeat, var(--page); }
.stage .wrap { position: relative; z-index: 2; width: 100%; padding-bottom: 72px; }
.stage .card-title { font-size: 22px; transform: rotate(-1deg); }
.stage h1 { margin-top: 40px; max-width: 14ch; font: 800 60px/1.08 var(--sans); letter-spacing: -.03em; }
.stage .lead { max-width: 44ch; font-size: 19px; color: #E4DACA; }
.stage .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.stage-play { position: absolute; right: max(32px, calc((100vw - 1240px) / 2 + 32px)); bottom: 80px; z-index: 2; display: flex; align-items: center; gap: 14px; color: #fff; font-weight: 600; }
.stage-play span { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: rgba(255,248,236,.94); color: var(--on-acc); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.stage-play:hover span { transform: scale(1.06); }
.stage-play svg { width: 24px; height: 24px; margin-left: 4px; }

/* 2. Season 1 */
.season-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.season-head .tag { display: inline-block; margin-left: 10px; padding: 3px 9px; border-radius: 6px; background: var(--acc); color: var(--on-acc); font-size: 13px; font-weight: 700; letter-spacing: 0; vertical-align: middle; }
.course { margin-top: 44px; }
.course h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 20px; }
.course h3 a:hover { color: var(--acc-2); }
.course h3 span { font-weight: 500; font-size: 15px; color: var(--muted); }
.rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 16px 0 0; padding: 0; list-style: none; }
.ep a { display: block; }
.thumb { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: var(--card); transition: transform .2s; }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s; }
.ep a:hover .thumb img { transform: scale(1.03); filter: brightness(1.08); }
.thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,12,10,.55), rgba(15,12,10,0) 60%); }
/* the plate is just the episode number, like the channel's "#7": the title
   is printed right under the photo, so the plate covers as little as it can */
.thumb .card-title { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 4px 10px; font-size: 16px; line-height: 1.3; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.thumb .len { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.72); color: #fff; font-size: 13px; font-weight: 600; }
.thumb .hint { position: absolute; inset: 0; margin: auto; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,248,236,.94); color: var(--on-acc); opacity: 0; transform: scale(.85); transition: opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.thumb .hint svg { width: 16px; height: 16px; margin-left: 3px; }
.ep a:hover .thumb .hint, .ep a:focus-visible .thumb .hint { opacity: 1; transform: none; }
.ep a:hover .thumb .card-title { transform: translateY(-2px); }
.ep a:active .thumb { transform: scale(.99); }
.ep a:focus-visible { outline-offset: 6px; border-radius: 14px; }
.ep .t { margin-top: 12px; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.ep .m { margin-top: 2px; font-size: 14px; color: var(--muted); }
.ep.more-eps .thumb { display: grid; place-items: center; padding: 16px; border: 1px dashed var(--line-2); }
.ep.more-eps .thumb::after { content: none; }
.ep.more-eps .thumb b { font-size: 15px; color: var(--muted); transition: color .25s; }
.ep.more-eps .thumb { transition: border-color .25s, transform .2s; }
.ep.more-eps a:hover .thumb { border-color: var(--acc); }
.ep.more-eps a:hover .thumb b { color: var(--acc-2); }

/* 3. between episodes */
.between { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 36px 0 0; padding: 0; list-style: none; }
.between li { padding: 28px; border-radius: 16px; background: var(--card); }
.between .k { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--acc); color: var(--on-acc); font-weight: 800; font-size: 15px; }
.between h3 { margin-top: 16px; font-size: 20px; }
.between p { margin-top: 6px; color: var(--muted); }
.jot { margin-top: 18px; padding: 16px 18px; border-radius: 8px; background: var(--paper); color: var(--paper-ink); font: 400 16px/1.7 var(--serif); }
.jot small { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 500 13px/1.4 var(--sans); color: var(--paper-muted); }
.jot small svg { width: 12px; height: 12px; }
/* the first and last steps show a piece of the product too */
.mini { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: var(--d); }
.mini .mp { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--acc); color: var(--on-acc); flex: none; }
.mini .mp svg { width: 11px; height: 11px; margin-left: 2px; }
.mini .mb { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.mini .mb i { display: block; width: 63%; height: 100%; background: var(--acc); }
.mini .mt { font-size: 13px; color: var(--muted); white-space: nowrap; }
.jot--week b { display: block; font: 700 13px/1.4 var(--sans); letter-spacing: .02em; color: var(--paper-muted); margin-bottom: 4px; }
.jot--week small svg { width: 13px; height: 13px; color: #6B5A2E; }
.typed { display: block; min-height: 3.4em; } /* two lines reserved, so the row does not grow while it types */
.typed.is-typing::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--paper-ink); }

/* 4. live, once a month */
.live { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.premiere { --live-photo: none; position: relative; display: block; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden;
  background: linear-gradient(0deg, rgba(15,12,10,.8), rgba(15,12,10,.1) 60%), var(--live-photo) center/cover no-repeat, var(--card); }
.premiere .badge { position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.premiere .badge i { width: 8px; height: 8px; border-radius: 50%; background: #FF6B57; }
.premiere .card-title { position: absolute; left: 16px; bottom: 18px; z-index: 2; font-size: 22px; }
.live ul { margin: 22px 0 28px; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--muted); }
.live li { display: flex; gap: 10px; }
.live li svg { margin-top: 4px; color: var(--acc); }

/* 5. letters */
.letters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 36px 0 0; }
.letter { padding: 30px 28px; border-radius: 6px; background: var(--paper); color: var(--paper-ink); box-shadow: 0 30px 50px -34px rgba(0,0,0,.8); }
.letter:nth-child(1) { transform: rotate(-.6deg); } .letter:nth-child(3) { transform: rotate(.6deg); }
.letter blockquote { margin: 0; font: 400 18px/1.75 var(--serif); }
.letter cite { display: block; margin-top: 14px; font-style: normal; font-size: 14px; color: var(--paper-muted); }
.letter .ans { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #C9B7A1; font-size: 14px; color: var(--paper-muted); }
.letter .ans b { color: var(--paper-ink); }
.example { display: inline-block; margin-top: 12px; padding: 6px 12px; border-radius: 8px; background: var(--card); font-size: 14px; color: var(--muted); }

/* 6. Season 2 */
.tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.track { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: center; padding: 16px; border-radius: 16px; background: var(--card); transition: background .3s; }
.track:hover { background: var(--card-hover); }
.track img, .track-ph { width: 200px; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; background: var(--band); }
.track h3 { font-size: 20px; }
.track p { margin-top: 4px; font-size: 15px; color: var(--muted); }
.track .tm { margin-top: 2px; font-size: 14px; }
.track .lock { margin-top: 10px; color: var(--acc); }

/* 7. join + questions */
.join-head { margin-bottom: 36px; }
.join-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; }

/* 8. the end card */
.end { --end-photo: none; display: flex; align-items: center; min-height: 520px; padding: 0;
  /* like the stage: dark where the words are, the photo opening up in the
     middle, and the edges and seams falling back into the page */
  background: linear-gradient(90deg, rgba(15,12,10,.96) 0%, rgba(15,12,10,.86) 34%, rgba(15,12,10,.3) 62%, rgba(15,12,10,.5) 86%, rgba(15,12,10,.9) 100%), linear-gradient(0deg, rgba(15,12,10,.75), rgba(15,12,10,0) 28%, rgba(15,12,10,0) 72%, rgba(15,12,10,.65)), var(--end-photo) 60% 40%/cover no-repeat, var(--d); }
.end .wrap { width: 100%; }
.end h2 { max-width: 16ch; font-size: 44px; }
.end .lead { color: #E4DACA; }
.end .btn { margin-top: 30px; }

/* ── motion: one authored moment (the lights come up, the title card is
   placed; all of it within about 1.3s, so the headline is readable almost
   at once), then quiet single moments. Text is revealed with clip-path, never
   faded, so it is always at full contrast. ── */
.stage::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #0E0C0A; opacity: 0; pointer-events: none; }
.io .stage::before { opacity: .72; transition: opacity 1s cubic-bezier(.16,1,.3,1); }
.io .stage.is-in::before { opacity: 0; }
.io .stage .card-title { clip-path: inset(0 100% 0 0); transform: rotate(-4deg) translateY(6px); transition: clip-path .6s cubic-bezier(.65,0,.35,1) .15s, transform .8s cubic-bezier(.16,1,.3,1) .15s; }
.io .stage.is-in .card-title { clip-path: inset(0 0 0 0); transform: rotate(-1deg); }
.io .stage h1, .io .stage .lead, .io .stage .ctas { clip-path: inset(0 0 100% 0); transform: translateY(18px); transition: clip-path .7s cubic-bezier(.65,0,.35,1), transform .9s cubic-bezier(.16,1,.3,1); }
.io .stage.is-in h1 { clip-path: inset(0 0 -10% 0); transform: none; transition-delay: .3s; }
.io .stage.is-in .lead { clip-path: inset(0 0 -10% 0); transform: none; transition-delay: .42s; }
.io .stage.is-in .ctas { clip-path: inset(-20% -5% -20% -5%); transform: none; transition-delay: .52s; }
.io .stage-play span { clip-path: circle(0% at 50% 50%); transition: clip-path .5s cubic-bezier(.16,1,.3,1) .7s, transform .4s cubic-bezier(.2,.8,.2,1); }
.io .stage.is-in .stage-play span { clip-path: circle(50% at 50% 50%); }
.io .stage-play b { clip-path: inset(0 100% 0 0); transition: clip-path .5s cubic-bezier(.65,0,.35,1) .8s; }
.io .stage.is-in .stage-play b { clip-path: inset(0 0 0 0); }
/* episode title cards are placed, one after another */
.io .rail .thumb .card-title { clip-path: inset(0 100% 0 0); transition: clip-path .55s cubic-bezier(.65,0,.35,1), transform .35s cubic-bezier(.16,1,.3,1); }
.io .rail.is-in .thumb .card-title { clip-path: inset(0 0 0 0); }
.io .rail.is-in .ep:nth-child(2) .card-title { transition-delay: .1s, 0s; }
.io .rail.is-in .ep:nth-child(3) .card-title { transition-delay: .2s, 0s; }
/* the notebook's lock line appears once the line is written (js/home.js) */
.io .between-sec .jot:not(.jot--week) small { opacity: 0; transition: opacity .5s; }
.io .between-sec .jot small.show { opacity: 1; }
/* live: the badge switches on */
.io #live .badge { opacity: 0; transform: translateY(-6px); transition: opacity .5s ease .3s, transform .6s cubic-bezier(.16,1,.3,1) .3s; }
.io #live.is-in .badge { opacity: 1; transform: none; }
.io #live .premiere .card-title { clip-path: inset(0 100% 0 0); transition: clip-path .6s cubic-bezier(.65,0,.35,1) .5s; }
.io #live.is-in .premiere .card-title { clip-path: inset(0 0 0 0); }
/* letters are set down on the table */
.io .letters-sec .letter { opacity: 0; transform: translateY(24px) rotate(0deg); transition: opacity .6s ease, transform 1s cubic-bezier(.16,1,.3,1); }
.io .letters-sec.is-in .letter:nth-child(1) { opacity: 1; transform: rotate(-.6deg); }
.io .letters-sec.is-in .letter:nth-child(2) { opacity: 1; transform: none; transition-delay: .12s; }
.io .letters-sec.is-in .letter:nth-child(3) { opacity: 1; transform: rotate(.6deg); transition-delay: .24s; }

@media (max-width: 1024px) {
  .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rail .ep:nth-child(4) { display: none; }
  .between, .letters { grid-template-columns: 1fr 1fr; }
  .live { gap: 36px; }
  .stage h1 { font-size: 50px; }
}
@media (max-width: 900px) { .join-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 860px) {
  .stage-play { right: 20px; bottom: auto; top: 24px; }
  .stage-play b { display: none; }
  .stage { background: linear-gradient(0deg, rgba(20,17,14,.96) 55%, rgba(20,17,14,.8) 80%, rgba(20,17,14,.5)), var(--stage-photo) 60% 28%/cover no-repeat, var(--page); }
  .live, .tracks { grid-template-columns: 1fr; }
  .track { grid-template-columns: 140px minmax(0, 1fr); }
  .track img, .track-ph { width: 140px; }
}
@media (max-width: 600px) {
  .stage-play { display: none; }
  .season-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .track { grid-template-columns: 1fr; gap: 14px; }
  .track img, .track-ph { width: 100%; }
  .end { background: linear-gradient(0deg, rgba(15,12,10,.94) 30%, rgba(15,12,10,.55) 75%, rgba(15,12,10,.35)), var(--end-photo) 60% 30%/cover no-repeat, var(--d); align-items: flex-end; padding-bottom: 48px; }
  section { padding: 72px 0; }
  .stage { min-height: 640px; }
  .stage h1 { font-size: 40px; }
  .stage .card-title { font-size: 20px; }
  .stage .ctas .btn, .stage .ctas .ghost { flex: 1 1 100%; }
  .rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; gap: 14px; margin: 16px -20px 0; padding: 0 20px; }
  .rail .ep { flex: 0 0 78%; scroll-snap-align: start; } .rail .ep:nth-child(4) { display: block; }
  .between, .letters { grid-template-columns: 1fr; }
  .letter:nth-child(n), .io .letters-sec.is-in .letter:nth-child(n) { transform: none; }
  .end { min-height: 460px; } .end h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-play span, .thumb img, .thumb .card-title, .thumb .hint { transition: none; }
}