/* Hallmark · shape: Conversational FAQ · genre: atmospheric · theme: Midnight (deal 1/3, seed easy-explain-learning-youtube-62ef·1e7237f9·2026-10-29·r0) · job: try · draw: b8cfaf
 * hero: Corridor · nav: search-led bar · footer: index columns · imagery: the product · signature: a lesson read beside its own video, every paragraph a timestamp that moves the player
 * axes: dark/grotesk-sans/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, the home questions risked reading as equal rows; each answer got its own object (a ledger, a pair, a live search, tiles, a phone) */
/* Hallmark · waive 77 · two full-width course rows, each led by a 320px cover and two display figures · the courses are a short list, and rows are the honest shape for two courses */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --container: 1200px;
  --gap-columns: var(--space-2xl);
  --nav-h: 68px;
  --measure: 64ch;
  --thumb-ratio: 16 / 9;
}

body { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1; outline: none; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-4xl)); z-index: var(--z-modal); background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-xs) var(--space-md); }
.skip:focus-visible { top: var(--space-md); }

/* Type ------------------------------------------------------------------ */
h1, h2 { font-weight: var(--display-weight); font-stretch: var(--display-stretch); line-height: 1.04; }
h3 { font-weight: 500; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--color-muted); }
.label { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }

/* Controls -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 44px; padding: var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid transparent; border-radius: var(--radius-pill);
  background: none; color: var(--color-ink); font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-ink-2); }
.btn--secondary { border-color: var(--color-rule-2); }
.btn--secondary:hover { background: var(--color-paper-2); }
.btn:active { opacity: 0.8; }
.btn[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn--small { min-height: 36px; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

a:hover { text-decoration-color: var(--color-accent); }
.link { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-rule-2); }
.link:hover { text-decoration-color: var(--color-accent); }

.field { display: grid; gap: var(--space-xs); }
.field label { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
input[type="search"], input[type="text"] {
  width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md);
  background: var(--color-paper); color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-muted); border-radius: 0;
  transition: border-color var(--dur-short) var(--ease-out);
}
input[type="search"]:hover { border-color: var(--color-ink-2); }
input[type="search"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-ink); }
input::placeholder { color: var(--color-muted); }
kbd { font: inherit; font-size: var(--text-xs); color: var(--color-muted); border: var(--rule-hair) solid var(--color-rule-2); padding: 0 var(--space-2xs); }

/* Nav: a search-led bar -------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--gap-columns); min-height: var(--nav-h); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; font-weight: 500; font-size: var(--text-lg); }
.wordmark img { width: 32px; height: 32px; }
.search-pill {
  justify-self: center; width: min(100%, 440px); display: flex; align-items: center; gap: var(--space-xs);
  padding-inline: var(--space-md); min-height: 44px; background: var(--color-paper-2); color: var(--color-muted);
  border: var(--rule-hair) solid var(--color-muted); transition: border-color var(--dur-short) var(--ease-out);
}
.search-pill:hover { border-color: var(--color-ink-2); }
.search-pill:focus-within { border-color: var(--color-ink-2); }
.search-pill input { border: 0; min-height: 42px; padding: 0; background: none; }
.search-pill input:focus-visible { outline: none; }
.search-pill:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nav__links { display: flex; align-items: center; gap: var(--space-lg); }
.nav__links a:not(.btn) { text-decoration: none; color: var(--color-muted); padding-block: var(--space-xs); }
.nav__links a:not(.btn):hover, .nav__links a[aria-current="page"] { color: var(--color-ink); }
.nav__links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.4em; }

/* Home: the corridor hero --------------------------------------------------- */
.hero { min-height: calc(min(100dvh, 1000px) - var(--nav-h)); display: grid; place-items: center; padding-block: var(--space-2xl); text-align: center; }
.hero__copy { max-width: 44ch; display: grid; justify-items: center; gap: var(--space-lg); }
.hero h1 { max-width: 14ch; font-size: clamp(3rem, 6vw + 1rem, 6rem); }
.hero .actions { justify-content: center; margin-top: var(--space-xs); }
.settle { animation: settle var(--dur-long) var(--ease-out) both; }
@keyframes settle { from { opacity: 0.6; } }

/* Home: questions --------------------------------------------------------- */
.qa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.qa__q { display: grid; gap: var(--space-md); align-content: start; }
.qa__q p { color: var(--color-muted); max-width: 40ch; }
.qa__q--wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: end; }
.qa__q--wide p { max-width: 48ch; }

.course-rows { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.course-rows li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.course-rows a { display: grid; grid-template-columns: 320px minmax(0, 1fr) auto auto; gap: var(--space-lg); align-items: center; padding-block: var(--space-lg); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.course-rows a:hover { background: var(--color-paper-2); }
.course-rows--wide { grid-column: 1 / -1; }
.course-rows img { width: 320px; aspect-ratio: var(--thumb-ratio); object-fit: cover; background: var(--color-paper-3); }
.course-rows__title { font-size: var(--text-2xl); max-width: 22ch; font-stretch: var(--display-stretch); font-weight: var(--display-weight); line-height: 1.15; padding-left: var(--space-xs); }
.course-rows__fig { color: var(--color-muted); white-space: nowrap; padding-right: var(--space-xs); }
.course-rows__fig b { font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-size: var(--text-2xl); color: var(--color-ink); margin-right: var(--space-2xs); }

.band { background: var(--color-paper-2); color: var(--color-ink); padding-block: var(--section-gap-s); }
.band .qa__q--wide { display: grid; margin-bottom: var(--space-2xl); }
.pair { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: center; }
.pair figure { margin: 0; display: grid; gap: var(--space-sm); }
.pair figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.pair__text { background: var(--color-paper-3); box-shadow: var(--shadow-card); padding: var(--space-xl); display: grid; gap: var(--space-md); }
.pair__text p { font-size: var(--text-lg); line-height: 1.6; }

.thumb { position: relative; display: block; aspect-ratio: var(--thumb-ratio); overflow: hidden; background: var(--color-paper-3); }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-short) var(--ease-out); }
.thumb:hover img { opacity: 0.85; }
.thumb__time { position: absolute; right: var(--space-xs); bottom: var(--space-xs); background: var(--color-paper); padding: var(--space-3xs) var(--space-xs); font-size: var(--text-sm); }

.stamp { display: inline-flex; align-items: center; gap: var(--space-xs); justify-self: start; color: var(--color-ink); text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule-2); padding-block: var(--space-2xs); background: none; border-top: 0; border-inline: 0; cursor: pointer; font-size: var(--text-sm); transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.stamp .num { color: var(--color-accent); font-weight: 500; }
.stamp:hover { border-color: var(--color-accent); }

.finder { display: grid; gap: var(--space-lg); }
.hits { list-style: none; margin: 0; padding: 0; display: grid; }
.hits li { border-top: var(--rule-hair) solid var(--color-rule); }
.hits a { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.hits a:hover { background: var(--color-paper-2); }
.hits__where { font-size: var(--text-sm); color: var(--color-muted); }
.hits__where .num { color: var(--color-accent); }
.hits__text { color: var(--color-ink-2); }
mark { background: none; color: var(--color-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }

.tiles { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.tiles a { display: grid; gap: var(--space-sm); text-decoration: none; }
.tiles img { width: 100%; aspect-ratio: var(--thumb-ratio); object-fit: cover; background: var(--color-paper-3); transition: opacity var(--dur-short) var(--ease-out); }
.tiles a:hover img { opacity: 0.85; }
.tiles__title { font-weight: 500; font-size: var(--text-lg); line-height: 1.3; }
.tiles__meta { font-size: var(--text-sm); color: var(--color-muted); }

.close { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--gap-columns); align-items: center; padding-block: var(--section-gap-s); border-top: var(--rule-hair) solid var(--color-rule); }
.close__copy { display: grid; gap: var(--space-xl); }
.platforms { margin: 0; display: grid; border-top: var(--rule-hair) solid var(--color-rule); }
.platforms div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--space-lg); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.platforms dt { font-weight: 500; }
.platforms dd { margin: 0; color: var(--color-muted); }
.close__screen { margin: 0; justify-self: center; width: min(100%, 300px); }
.close__screen img { width: 100%; box-shadow: var(--shadow-card); outline: var(--rule-hair) solid var(--color-rule-2); }

/* Footer: index columns --------------------------------------------------- */
.footer { border-top: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-2); color: var(--color-ink); padding-block: var(--space-2xl) var(--space-xl); }
.footer__cols { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.footer__brand { display: grid; gap: var(--space-md); align-content: start; }
.footer__brand p { color: var(--color-muted); max-width: 32ch; }
.footer h2 { font-size: var(--text-sm); font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--color-muted); margin-bottom: var(--space-sm); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.footer ul a { text-decoration: none; white-space: nowrap; }
.footer ul a:hover { text-decoration: underline; }

/* Shared page head for courses, lessons, search, saved ---------------------- */
.page { padding-block: var(--space-2xl) var(--section-gap-s); display: grid; gap: var(--space-2xl); }
.page-head { display: grid; gap: var(--space-md); }
.page-head h1 { font-size: var(--text-display-s); max-width: 22ch; }
.page-head .lead { color: var(--color-ink-2); }
.crumb { font-size: var(--text-sm); color: var(--color-muted); }
.crumb a { color: var(--color-muted); }
.crumb a:hover { color: var(--color-ink); }

.figs { display: flex; flex-wrap: wrap; gap: var(--space-2xl); margin: 0; }
.figs div { display: grid; gap: var(--space-2xs); }
.figs dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.figs dd { margin: 0; font-weight: var(--display-weight); font-stretch: var(--display-stretch); font-size: var(--text-3xl); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }

.meter { height: 2px; background: var(--color-rule-2); max-width: 480px; }
.meter > span { display: block; height: 100%; background: var(--color-accent); }

/* Courses list */
.course-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); }
.course-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: center; text-decoration: none; padding: var(--space-lg); background: var(--color-paper-2); color: var(--color-ink); transition: background-color var(--dur-short) var(--ease-out); }
.course-card:hover { background: var(--color-paper-3); }
.course-card__body { display: grid; gap: var(--space-sm); }
.course-card h2 { font-size: var(--text-2xl); max-width: 24ch; }
.course-card p { color: var(--color-muted); max-width: 56ch; }
.course-card__figs { display: flex; flex-wrap: wrap; gap: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.course-card__figs b { color: var(--color-ink); font-weight: 500; }

/* Lesson table */
.lessons { width: 100%; border-collapse: collapse; }
.lessons th { text-align: left; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.lessons td { padding: var(--space-md) var(--space-sm) var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; }
.lessons tr { transition: background-color var(--dur-short) var(--ease-out); }
.lessons tbody tr:hover { background: var(--color-paper-2); }
.lessons td:first-child, .lessons th:first-child { padding-left: var(--space-xs); width: 4ch; color: var(--color-muted); }
.lessons td.num, .lessons th.num { text-align: right; white-space: nowrap; color: var(--color-muted); }
.lessons a { text-decoration: none; font-weight: 500; }
.lessons a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.lessons .state { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.lessons tr[data-state="done"] .state { color: var(--color-success); }
.lessons tr[data-state="current"] .state { color: var(--color-accent); }

/* Lesson: player beside the article --------------------------------------- */
.lesson { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: start; }
.lesson__side { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); display: grid; gap: var(--space-lg); }
.player { position: relative; aspect-ratio: var(--thumb-ratio); background: var(--color-paper-2); }
.player--short { aspect-ratio: 9 / 16; width: min(100%, calc(70dvh * 9 / 16)); justify-self: center; }
.player iframe, .player > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; max-height: 34dvh; overflow-y: auto; border-top: var(--rule-hair) solid var(--color-rule); }
.chapters button { width: 100%; display: grid; grid-template-columns: 5ch minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-sm) var(--space-xs); text-align: left; background: none; color: var(--color-muted); border: 0; border-bottom: var(--rule-hair) solid var(--color-rule); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.chapters button:hover { background: var(--color-paper-2); color: var(--color-ink); }
.chapters button[aria-current="true"] { color: var(--color-ink); background: var(--color-paper-2); }
.chapters button[aria-current="true"] .num { color: var(--color-accent); }
.lesson__tools { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.article { display: grid; gap: var(--space-lg); max-width: var(--measure); }
.article__meta { display: flex; flex-wrap: wrap; gap: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.article h2 { font-size: var(--text-2xl); margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.article h2:first-of-type { margin-top: 0; }
.block { display: grid; gap: var(--space-sm); padding-left: var(--space-md); border-left: 2px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.block[data-live="true"] { border-left-color: var(--color-accent); }
.block__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
.block h3 { font-size: var(--text-lg); }
.block p { font-size: 1.125rem; line-height: 1.7; color: var(--color-ink-2); }
.block ul { margin: 0; padding-left: var(--space-lg); color: var(--color-muted); display: grid; gap: var(--space-2xs); }
.pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.pager a { display: grid; gap: var(--space-2xs); text-decoration: none; padding: var(--space-md); background: var(--color-paper-2); transition: background-color var(--dur-short) var(--ease-out); }
.pager a:hover { background: var(--color-paper-3); }
.pager a:last-child { text-align: right; }
.pager span:first-child { font-size: var(--text-sm); color: var(--color-muted); }

/* Search and saved */
.results { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: start; }
.results h2 { font-size: var(--text-xl); font-stretch: 100%; font-weight: 500; letter-spacing: 0; margin-bottom: var(--space-sm); }
.vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); }
.vlist a { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-md); text-decoration: none; align-items: start; }
.vlist img { width: 100%; aspect-ratio: var(--thumb-ratio); object-fit: cover; background: var(--color-paper-3); }
.vlist__title { font-weight: 500; line-height: 1.3; }
.vlist__meta { font-size: var(--text-sm); color: var(--color-muted); }

/* States */
.state-box { padding: var(--space-xl); background: var(--color-paper-2); display: grid; gap: var(--space-md); justify-items: start; max-width: 560px; }
.state-box p { color: var(--color-muted); }
.skeleton { background: var(--color-paper-2); min-height: 1.2em; animation: pulse 1.6s var(--ease-in-out) infinite; }
@keyframes pulse { 50% { opacity: 0.55; } }

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 60rem) {
  .nav__bar { grid-template-columns: auto minmax(0, 1fr); row-gap: 0; column-gap: var(--space-md); padding-top: var(--space-sm); }
  .qa__q--wide { gap: var(--space-md); }
  .band .qa__q--wide { margin-bottom: var(--space-xl); }
  .nav__links { grid-column: 1 / -1; justify-content: flex-start; padding-bottom: var(--space-sm); }
  .search-pill { justify-self: end; }
  .qa, .qa__q--wide, .pair, .close, .lesson, .results, .course-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .lesson__side { position: static; }
  .chapters { max-height: none; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .course-rows a { grid-template-columns: 140px minmax(0, 1fr) auto; }
  .course-rows img { width: 140px; }
  .course-rows__fig:last-child { display: none; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .close__screen { width: min(100%, 260px); }
}
@media (max-width: 40rem) {
  .wordmark span { display: none; }
  .course-rows__title { font-size: var(--text-lg); }
  .hero { min-height: calc(min(100dvh, 760px) - var(--nav-h) - var(--space-2xl)); }
  .search-pill kbd { display: none; }
  .nav__app { display: none; }
  .course-rows a { grid-template-columns: 96px minmax(0, 1fr); }
  .course-rows img { width: 96px; }
  .course-rows__fig { display: none; }
  .footer__cols { grid-template-columns: minmax(0, 1fr); }
  .platforms div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .lessons th:nth-child(4), .lessons td:nth-child(4), .lessons th:nth-child(5), .lessons td:nth-child(5) { display: none; }
  .vlist a { grid-template-columns: 120px minmax(0, 1fr); }
  .pager { grid-template-columns: minmax(0, 1fr); }
}

/* Pre-rendered pieces */
.player [data-player] .thumb { position: absolute; inset: 0; aspect-ratio: auto; }
.article__summary { color: var(--color-muted); }