/* ================================================================
   HOME — appearance only. Layout comes from the layout system (assets/layout.css):
   hero = .l-section + .l-container + .l-split · proposition = cream band, split + 3-up grid ·
   spotlight = .l-split · departments = ink band, cluster head + auto grid.
   Mobile-first; this file adds nothing but component looks and the channel-card fan.
   ================================================================ */
.pg--home { background: #fff; }

/* ── hero ── */
.hm-hero .pg-eyebrow { color: var(--muted); }
.hm-actions { --cluster: var(--space-3); }
.hm-actions .pg-btn { min-height: 48px; }
.hm-hero { padding-top: calc(var(--header-h) + var(--space-7)); padding-bottom: var(--space-7); overflow: hidden;
    --ink: #0a0a0a; --muted: #5b6472; --faint: #8a93a0; --line: rgba(10,10,10,.12); --line-strong: rgba(10,10,10,.28); --accent: #0a0a0a; }
@media (min-width: 768px) { .hm-hero { min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--header-h) + var(--space-6)); } .hm-hero-in { width: min(100% - 2 * var(--gutter), var(--container)); } }
.hm-h1 { margin: 0; color: #0a0a0a; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.875rem); }
.hm-sub { margin: 0; max-width: 34em; }

.hm-login { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.hm-login a { padding-block: 12px; color: #0a0a0a; font-weight: 700; text-decoration: underline; text-decoration-color: var(--teal-2); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hm-login a:hover { color: var(--teal-2); }

/* fan of channel cards: the one deliberately absolute-positioned piece, sized from the container */
.hm-fan { position: relative; width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 1 / .78; }
.hm-card { position: absolute; top: 50%; left: calc(var(--i) * 13%); width: 56%; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
    border: 3px solid color-mix(in srgb, var(--ed-default) 40%, #fff); border-radius: var(--r-lg); background: color-mix(in srgb, var(--ed-default) 9%, #fff); color: #0a0a0a; text-decoration: none;
    z-index: calc(10 - var(--i)); transform: translateY(-50%) scale(calc(1 - var(--i) * .06)); transform-origin: left center; box-shadow: var(--sh-2); transition: transform .3s ease; }
.hm-card.is-front { border-color: var(--ed-default); box-shadow: 0 22px 50px color-mix(in srgb, var(--ed-default) 38%, transparent); }
.hm-card:hover { transform: translateY(-52%) scale(calc(1.02 - var(--i) * .06)); }
.hm-card::after { content: ""; position: absolute; left: var(--space-4); bottom: var(--space-3); width: 44px; height: 5px; border-radius: 5px; background: var(--ed-default); }
.hm-card-img { position: relative; flex: none; aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--ed-default) 22%, #f4f4f5) center/cover no-repeat; display: grid; place-items: center; }
.hm-card-img b { font-family: "Dela Gothic One", var(--dp-display); font-weight: 400; font-size: 3rem; color: var(--ed-default); }
.hm-card-tag { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 99px; background: rgba(10,10,10,.72); color: #fff; font: 800 11px/1 var(--dp-sans); letter-spacing: .1em; text-transform: uppercase; }
.hm-card-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ef3b3b; }
.hm-card-txt { display: grid; gap: 6px; align-content: start; padding: var(--space-3) var(--space-3) calc(var(--space-5) + 6px); }
.hm-card-txt strong { font-family: "Dela Gothic One", var(--dp-display); font-weight: 400; font-size: clamp(.8125rem, .7rem + .9vw, 1.5rem); letter-spacing: -.02em; line-height: 1.12; color: #0a0a0a; }
.hm-card-txt em { font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
@media (max-width: 479px) { .hm-card-tag, .hm-card-txt em { display: none; } }

/* ── proposition ── */
.hm-prop-title { margin: 0; color: #0a0a0a; font-size: var(--fs-h2); }
.hm-prop-grid .pg-btn { align-self: flex-start; }
.hm-prop-copy { max-width: 34em; margin: 0; color: var(--muted); font-size: var(--fs-md); line-height: var(--lh-body); }
.hm-principles article { padding: var(--space-5); background: #fff; border: 1px solid #e9ecf1; border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.hm-principles span { display: grid; place-items: center; width: 32px; height: 32px; background: #0a0a0a; color: #fff; border-radius: 8px; font: 800 11px var(--dp-sans); }
.hm-principles h3 { margin: var(--space-5) 0 var(--space-2); font-family: "Dela Gothic One", var(--dp-display); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -.03em; text-transform: uppercase; }
.hm-principles p { max-width: 30em; margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); }

/* ── spotlight: art | info (stacks on a phone) ── */
.hm-spot { gap: 0; align-items: stretch; background: var(--teal); color: #021018; --ink: #021018; --muted: rgba(2,16,24,.72); --line: rgba(2,16,24,.25); --accent: #021018; }
.hm-spot-art { min-height: 0; aspect-ratio: 4 / 3; background: var(--navy) center/cover no-repeat; }
.hm-spot-info { justify-content: center; padding: var(--section-y) var(--gutter); }
@media (min-width: 768px) { .hm-spot-art { aspect-ratio: auto; min-height: 460px; } .hm-spot-info { padding-inline: clamp(32px, 5vw, 88px); } }
.hm-spot-info h2 { margin: 0; font-family: "Dela Gothic One", var(--dp-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -.03em; text-transform: uppercase; overflow-wrap: anywhere; color: #021018; }
.hm-spot-info p:not(.pg-eyebrow) { max-width: 30em; margin: 0; color: var(--muted); font-size: var(--fs-md); line-height: var(--lh-body); }
.hm-spot .pg-eyebrow { color: #021018; }
.hm-spot .pg-btn { min-height: 48px; border-color: #021018; color: #021018; }
.hm-spot .pg-btn:hover { background: #021018; color: var(--teal); }
.hm-spot .pg-btn--primary { background: #021018; color: #fff; }
.hm-spot .pg-btn--primary:hover { background: #fff; color: #021018; border-color: #fff; }
.hm-credit { --cluster: var(--space-6); margin: var(--space-3) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.hm-credit dt { font: 800 11px/1 var(--dp-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hm-credit dd { margin: 6px 0 0; font-size: var(--fs-sm); font-weight: 700; }

/* ── departments ── */
.hm-depts-head h2 { margin: var(--space-3) 0 0; }
.hm-depts .pg-btn { min-height: 48px; border-color: #fff; color: #fff; }
.hm-depts .pg-btn:hover { background: #fff; color: #0a0a0a; }
.hm-dept { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--r-lg); overflow: hidden; color: #081226; text-decoration: none; transition: transform .25s; }
.hm-dept:hover { transform: translateY(-4px); }
.hm-dept-art { display: block; aspect-ratio: 16 / 9; background: var(--navy-2) center/cover no-repeat; }
.hm-dept-body { display: grid; gap: 6px; padding: var(--space-4) var(--space-4) var(--space-5); }
.hm-dept-meta { font: 800 11px/1 var(--dp-sans); letter-spacing: .14em; text-transform: uppercase; color: #637087; }
.hm-dept-name { font-family: "Dela Gothic One", var(--dp-display); font-size: var(--fs-h4); line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; color: #081226; }
.hm-dept-go { position: absolute; top: var(--space-3); right: var(--space-3); display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; background: rgba(5,7,12,.78); color: #fff; }
.hm-dept:hover .hm-dept-go { background: var(--teal); color: #021018; }
@media (prefers-reduced-motion: reduce) { .hm-card, .hm-dept { transition: none; } }

/* ── discover rows + creators ── */
.hm-discover-head h2, .hm-channels-head h2 { margin: var(--space-3) 0 0; color: #0a0a0a; }
.hm-discover-blurb { max-width: 36em; margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-body); }
.hm-discover .pg-btn, .hm-channels .pg-btn { min-height: 48px; }
.hm-discover .ed { background: transparent; }
@media (min-width: 1024px) { .hm-discover-grid { grid-template-columns: repeat(4, 1fr); } }
.ed-house { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hm-chan { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #e9ecf1; border-radius: var(--r-lg); box-shadow: var(--sh-1); color: #0a0a0a; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.hm-chan:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.hm-chan-art { display: grid; place-items: center; aspect-ratio: 16 / 10; background: color-mix(in srgb, var(--ed-default) 22%, #f4f4f5) center/cover no-repeat; }
.hm-chan-art b { font-family: "Dela Gothic One", var(--dp-display); font-weight: 400; font-size: 2.5rem; color: var(--ed-default); }
.hm-chan-txt { display: grid; gap: 4px; padding: var(--space-3) var(--space-4) var(--space-4); }
.hm-chan-txt strong { font-family: "Dela Gothic One", var(--dp-display); font-weight: 400; font-size: var(--fs-sm); letter-spacing: -.02em; line-height: 1.15; text-transform: uppercase; }
.hm-chan-txt em { font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.hm-build { --cluster: var(--space-2) var(--space-3); margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }
.hm-build a { display: inline-flex; align-items: center; min-height: var(--tap); color: #0a0a0a; font-weight: 700; text-decoration: underline; text-decoration-color: var(--teal-2); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .hm-chan { transition: none; } }