/* ================================================================
   NIGHT SCHEME — the access-pass palette on the front page (operator, 2026-11-04). Loaded after mockup.css, front page only (inc/tcn-mockup-skin.php).
   Palette: navy #0c101b, aqua #5ce1e6, light purple #f8f3ff, boxes #fefdff, ink #0a0f1a. A scratched, dark picture sits behind the page; content sits on white
   cards with an aqua border or directly on the picture in white. Department colours stay on department items (the .tm-dept cards, the feed head's
   left bar). Calm titles: the theme's display face, small, in capitals. Components are restyled whole (not nudged), scoped by body.home.
   Tokens, the picture, the header and the footer live in scheme-night-site.css (every page); this file is the front page only.
   ================================================================ */
body.home { color: #fff; background: transparent !important; /* body paints above the negative-z picture layer, so it must be clear (html keeps the paper colour) */ }
body.home .pg--home, body.home .tm-hero, body.home .tm-section, body.home .tm-depts-band, body.home .hf { background: transparent; }

/* ---------- hero ---------- */
body.home .tm-hero { padding-top: calc(var(--header-h, 61px) + 30px); padding-bottom: 40px; }
body.home .tm-kicker { color: var(--n-aqua); font: 700 11px/1 var(--n-mono); letter-spacing: .16em; text-transform: uppercase; }
body.home .tm-kicker i { width: 8px; height: 8px; background: var(--n-aqua); box-shadow: 0 0 0 3px rgba(92, 225, 230, .28); }
body.home .tm-h1 { margin: 0 0 16px; color: #fff; font: 400 clamp(24px, 3.1vw, 40px)/1.12 var(--n-display); letter-spacing: 0; text-transform: uppercase; }
body.home .tm-h1 b { color: var(--n-aqua); }
body.home .tm-lead { color: var(--n-soft); font: 300 clamp(16px, 1.5vw, 18px)/1.55 var(--dp-sans); }
body.home .tm-trust li { color: #fff; font: 600 12px/1.3 var(--dp-sans); }
body.home .tm-trust .tm-ic { color: var(--n-aqua); }
body.home .tm-welcome { color: var(--n-mute); }
body.home .tm-welcome a { color: var(--n-aqua); }
/* one button family: 48px pill, aqua primary, outline secondary */
body.home .tm-btn { min-height: 48px; padding: 0 24px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .55); background: transparent; color: #fff; font: 800 14px/1 var(--dp-sans); white-space: nowrap; }
body.home .tm-btn:hover { border-color: #fff; color: #fff; box-shadow: none; transform: none; }
body.home .tm-btn--dark { background: var(--n-aqua); border-color: var(--n-aqua); color: var(--n-ink); }
body.home .tm-btn--dark:hover { background: var(--n-aqua2); border-color: var(--n-aqua2); color: var(--n-ink); }
body.home .tm-btn--sm { min-height: 44px; padding: 0 20px; font-size: 13px; }
body.home .tm-btn:focus-visible { outline: 3px solid var(--n-aqua); outline-offset: 3px; }

/* the bento of ways in: every tile a card with an aqua edge */
/* the housing: a #fefdff panel sits behind the tiles and reaches a little past them on every side (a layer behind, so the tiles keep their own positions) */
body.home .tm-bento { position: relative; isolation: isolate; }
body.home .tm-bento::before { content: ""; position: absolute; z-index: -1; inset: -8px; background: var(--n-box); border: 3px solid var(--n-aqua); border-radius: 20px; box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .7); }
body.home .tm-tile { background-color: var(--n-box); border: 2px solid var(--n-aqua); border-radius: 14px; font-weight: 800; letter-spacing: -.01em; }
body.home .tm-tile--music { background: var(--n-lav); color: var(--n-ink); }
body.home .tm-tile--codes { background: var(--n-aqua); color: var(--n-ink); }
body.home .tm-tile--codes::after { background: rgba(10, 15, 26, .08); }
body.home .tm-tile--products { background: var(--n-box); color: var(--n-ink); }
body.home .tm-tile--articles { background: var(--n-navy2); color: #fff; }
@media (min-width: 640px) { body.home .tm-tile--products { outline: 6px solid rgba(12, 16, 27, .92); } }

/* ---------- section heads ---------- */
body.home .tm-eyebrow, body.home .tm-eyebrow--purple, body.home .tm-eyebrow--green { color: var(--n-aqua); font: 700 11px/1 var(--n-mono); letter-spacing: .16em; text-transform: uppercase; }
body.home .tm-h2 { color: #fff; font: 400 clamp(18px, 2.1vw, 26px)/1.15 var(--n-display); letter-spacing: 0; text-transform: uppercase; }

/* ---------- departments: the department's own colour stays on its card ---------- */
body.home .tm-dept { border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; }
body.home .tm-dept.is-on { box-shadow: 0 0 0 3px var(--n-navy), 0 0 0 6px var(--n-aqua); }

/* ---------- the sections under the header look like the Start page (operator, 2026-11-05: "I need the page to look like this"): a white page; each section a lavender box (--box-grad) holding white cards; ink text; purple gradient buttons ---------- */
body.home main.pg--home { background: #fff; padding-bottom: 28px; }
body.home .rl, body.home .hf > .tm-wrap, body.home .tm-stats, body.home .hf-door { background: var(--box-grad) !important; color: var(--n-ink); border: 1px solid var(--box-line); border-radius: 24px; box-shadow: none; }
body.home .hf > .tm-wrap { padding: clamp(18px, 2.6vw, 34px); }
body.home .hf .tm-eyebrow, body.home .hf .tm-eyebrow--green, body.home .rl-kicker { color: var(--n-steel); }
body.home .hf .tm-h2, body.home .rl-title, body.home .hf-door h2 { color: var(--n-ink); }
body.home .hf-head { background: #fff; border: 1px solid var(--box-line); border-left: 8px solid var(--dc); border-radius: 16px; }
body.home .hf-head .tm-h2, body.home .hf-head h2 { color: var(--n-ink); }
body.home .hf-blurb, body.home .hf-door p { color: var(--n-steel); }
body.home .hf .idb, body.home .hf .ed-card { background: #fff; border: 1px solid var(--box-line); box-shadow: none; }
body.home .tm-stats { color: var(--n-ink); }
body.home .tm-stat b { color: var(--n-ink); font: 400 clamp(18px, 2vw, 24px)/1.1 var(--n-display); letter-spacing: 0; }
body.home .tm-stat span span, body.home .tm-stat div span { color: var(--n-steel); font: 600 11px/1.35 var(--n-mono); letter-spacing: .08em; text-transform: uppercase; }
body.home .tm-stat-ic, body.home .hf-door-ic { color: #313de0; }
body.home .hf-door h2 { font: 400 clamp(18px, 2vw, 24px)/1.15 var(--n-display); letter-spacing: 0; text-transform: uppercase; }
/* buttons in those boxes: ink outline, and the purple gradient for the main action (the Start page's) */
body.home .hf .tm-btn, body.home .hf-door .tm-btn, body.home .rl .tm-btn, body.home .rl-arrow { color: var(--n-ink); border-color: var(--n-ink); background: #fff; }
body.home .hf .tm-btn:hover, body.home .hf-door .tm-btn:hover, body.home .rl .tm-btn:hover, body.home .rl-arrow:hover:not(:disabled) { border-color: #313de0; color: #313de0; background: #fff; }
body.home .hf .tm-btn--dark, body.home .hf-door .tm-btn--dark { background: linear-gradient(135deg, #7b93e2 0%, #313de0 55%, #5b2fd1 100%); border-color: transparent; color: #fff; }

@media (prefers-reduced-motion: reduce) { body.home .tm-dept, body.home .tm-btn { transition: none; } }


/* ---------- the front page opens with the PAGE HEADER: the Start photo under the wash, behind the nav, full width (operator, 2026-11-05: "doesn't look like the Start page") ---------- */
body.home .tm-hero { padding: calc(var(--header-h, 64px) + 36px) 0 34px; position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, #1b1a63 0%, #313de0 58%, #6b2fa0 100%); }
body.home .tm-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art, none) center / cover no-repeat; opacity: .45; }
body.home .tm-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(27, 26, 99, .78), rgba(49, 61, 224, .55) 58%, rgba(107, 47, 160, .74)); }
body.home .tm-hero-reel { margin-top: 26px; }

/* the carousel block sits under the header with a gap */
body.home .rl { margin-top: 24px; }

/* CHANNEL DISPLAY and LATEST are two blocks, each its own box */
body.home .hf--latest { margin-top: 20px; }
body.home .hf--channels { margin-top: 20px; }

/* ---------- CHANNEL DISPLAY: one block, several looks (grid, feature, scroll, list) ---------- */
.chd-ctl { display: inline-flex; align-items: center; gap: 10px; }
.chd-i { display: flex; min-width: 0; }
.chd-i > .idb { flex: 1 1 auto; width: 100%; }
/* feature: one large channel on the left, the others smaller beside it */
.chd--feature .hf-chans { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(2, auto); gap: 16px; }
.chd--feature .chd-i--big { grid-row: 1 / span 2; }
.chd--feature .chd-i--big > .idb { flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; padding: 28px; min-height: 260px; }
.chd--feature .chd-i--big .idb-img { width: 132px; height: 132px; border-radius: 28px; }
.chd--feature .chd-i--big .idb-name { font-size: clamp(22px, 2.4vw, 30px); }
.chd--feature .hf-chans { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); }
/* scroll: one line that slides, like the departments carousel */
.chd--scroll { background: none; border: 0; padding: 0; margin: 0; }
.chd--scroll .rl-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
.chd--scroll .rl-track::-webkit-scrollbar { display: none; }
.chd--scroll .chd-i { flex: 0 0 min(320px, 82%); scroll-snap-align: start; }
/* list: compact rows */
.chd--list .hf-chans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.chd--list .idb { padding: 8px 14px; }
.chd--list .idb-img { width: 48px; height: 48px; }
@media (min-width: 900px) { .chd--list .hf-chans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .chd--feature .hf-chans { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .chd--feature .chd-i--big { grid-row: auto; }
  .chd--feature .chd-i--big > .idb { flex-direction: row; align-items: center; min-height: 0; padding: 16px; }
  .chd--feature .chd-i--big .idb-img { width: 80px; height: 80px; }
}