/* Landing page (home/home_page.html) only. Every class is `hv-` prefixed so none of
   these homepage-only variants (DESIGN_PRINCIPLES.md §4 "Homepage-only components")
   can leak onto other templates. Loaded from the page's extra_head, not base.html. */
/* Same face the kalaam page's mono verse toggle uses (kalaam_page.html), for the verse band's transliteration. */
@font-face{font-family:'Noto Sans Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/NotoSansMono-Variable.60e2e374698e.woff2") format('woff2')}
.hv{--em:#064E3B;--em7:#047857;--em1:#D1FAE5;--em05:#ECFDF5;--gold:#D4AF37;--bronze:#804600;--cream:#FDFCF0;--ink:#0A1A14;--g6:#4B5563;--ease:cubic-bezier(.25,.46,.45,.94);--space:clamp(48px,6vw,72px);max-width:1152px;margin:0 auto;color:var(--ink)}
.hv a{text-decoration:none}
.hv [hidden]{display:none !important}
/* "Next rendition": the box eases between the two cards' natural heights while they cross-fade. */
.hv-picks{transition:height .5s var(--ease)}
.hv-slide{transition:opacity .3s var(--ease)}
.hv-slide.is-out{opacity:0}

/* shared layout */
.hv-section{padding-top:var(--space)}
.hv-sh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin-bottom:20px}
.hv-sh h2{margin:0;font-size:clamp(24px,3vw,30px);line-height:1.15;color:var(--em);letter-spacing:-.015em;font-weight:700}
.hv-sh-r{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
.hv-card{background:#fff;border:1px solid var(--em1);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.05);color:var(--ink)}
a.hv-card,.hv-lift{transition:all .5s var(--ease)}
a.hv-card:hover,.hv-lift:hover{transform:translateY(-4px);box-shadow:0 20px 25px -5px rgba(6,78,59,.15);border-color:var(--gold);color:var(--ink)}
/* Text CTAs (cta-micro) as buttons: no chrome, but a full 44px tap target. */
.hv-cta{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;cursor:pointer;font-family:'Cardo',serif}

/* masthead */
.hv-mast{text-align:center;padding-top:clamp(8px,3vw,32px)}
.hv-mast h1{margin:0}
.hv-mast p{margin:0 auto;max-width:600px;font-size:clamp(16px,2vw,18px);line-height:1.6;color:#111827}

/* playlist */
/* Desktop: player left; text right with "Next rendition" pinned at its foot.
   Phone: "Next rendition" sits right under the player, so it never moves when the text below changes. */
.hv-pick-card{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:1fr auto;overflow:hidden}
.hv-player-col{grid-row:1 / span 2}
.hv-pick-foot{grid-column:2;display:flex;justify-content:flex-end;padding:0 clamp(20px,3vw,28px) 8px}
@media(max-width:820px){
    .hv-pick-card{grid-template-columns:1fr;grid-template-rows:none}
    .hv-player-col{grid-row:auto}
    .hv-pick-foot{grid-column:auto;order:1;padding:0 20px;border-bottom:1px solid var(--em1)}
    .hv-pick{order:2}
}
.hv-player-col{background:#1C1C1C;display:flex;align-items:center;min-width:0}
.hv-player-col.is-audio{background:var(--em)}
.hv-player{width:100%;aspect-ratio:16/9;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hv-player-col.is-audio .hv-player.is-playing{min-height:300px}
.hv-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.hv-play{width:64px;height:64px;border-radius:50%;background:var(--gold);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:1}
.hv-play:before{content:"";position:absolute;inset:-2px;border:2px solid var(--gold);border-radius:50%;animation:hv-pulse 2s ease-out infinite}
.hv-play:hover:before{animation-play-state:paused}
@keyframes hv-pulse{from{transform:scale(1);opacity:.6}to{transform:scale(1.35);opacity:0}}
@media(prefers-reduced-motion:reduce){.hv-play:before{animation:none}}
.hv-player .section-label{color:var(--gold)}
.hv-pick{padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:6px}
.hv-pick h3{margin:0;font-size:24px;line-height:1.2;color:var(--em);letter-spacing:-.015em;font-weight:700}
.hv-pick h3 a{color:inherit}
.hv-pick h3 a:hover{color:var(--bronze)}
.hv-by{font-size:16px;color:var(--bronze);font-weight:700}
.hv-by a{color:inherit}
.hv-by a:hover{color:var(--em)}
/* Long curator notes clamp to 4 lines ("More" reveals the rest) so slides stay close in height. */
.hv-note{margin:8px 0 2px;font-size:15px;line-height:1.65;color:#111827;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hv-note.is-open{display:block}
.hv-more{align-self:flex-start;min-height:32px}
.hv-note p{margin:0 0 6px}
.hv-also{border-top:1px solid var(--em1);margin-top:10px;padding-top:8px}
.hv-also a{display:flex;align-items:center;gap:10px;padding:6px 0;color:var(--em);font-size:15px;font-weight:700;transition:color .5s var(--ease)}
.hv-also a:hover{color:var(--bronze)}

/* lineages: one card — drawn mini tree (left) + the family's story (right) */
.hv-lin{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);overflow:hidden}
.hv-lin>*{transition:opacity .4s var(--ease)}
.hv-lin.fading>.hv-mt-wrap,.hv-lin.fading>.hv-story{opacity:0}
.hv-mt-wrap{padding:clamp(20px,3vw,28px) clamp(12px,2vw,20px);display:flex;align-items:center;justify-content:center}
.hv-story{padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;justify-content:center;gap:10px}
.hv-fam-foot{grid-column:1 / -1;display:flex;justify-content:flex-end;padding:0 clamp(20px,3vw,28px) 4px}
@media(max-width:820px){
    .hv-lin{grid-template-columns:1fr}
}
/* Mini tree in the family-tree page's idiom: circles on 3px father/son edges. */
.hv-mt{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.hv-g{display:flex;flex-direction:column;align-items:center;max-width:100%}
.hv-dot{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--em7);flex:none}
.hv-g a{margin-top:4px;color:var(--em);font-size:15px;font-weight:700;line-height:1.25;transition:color .5s var(--ease)}
.hv-g a:hover,.hv-kid a:hover{color:var(--bronze)}
.hv-g .hv-yr{margin:2px 0 0;font-size:11px}
.hv-stem{width:3px;height:20px;background:var(--em7);flex:none}
.hv-stem.faint{opacity:.35}
.hv-g.me .hv-dot{width:22px;height:22px;background:var(--gold);border-color:var(--em)}
.hv-g.me a{font-size:20px}
.hv-earlier{font-size:12px;color:var(--g6)}
.hv-sub{font-size:13px;color:var(--g6);margin-top:2px}
.hv-kids-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));width:100%}
.hv-kid{position:relative;padding:20px 3px 0;display:flex;flex-direction:column;align-items:center}
.hv-kid:before{content:"";position:absolute;top:0;left:0;right:0;border-top:3px solid var(--em7)}
.hv-kid:first-child:before{left:50%}
.hv-kid:last-child:before{right:50%}
.hv-kid:after{content:"";position:absolute;top:0;left:calc(50% - 1.5px);height:20px;border-left:3px solid var(--em7)}
.hv-kid a,.hv-kid span{margin-top:4px;color:var(--em);font-size:13px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.hv-kid.more .hv-dot{background:var(--em05)}
.hv-kid.more span{color:var(--g6);font-weight:400}
.hv-yr{font-family:ui-monospace,monospace;font-size:12px;font-weight:400;color:var(--bronze);margin-left:8px;white-space:nowrap}
/* story */
.hv-story-head{display:flex;align-items:center;gap:14px}
.hv-story-ph{width:72px;height:72px;border-radius:12px;object-fit:cover;flex:none;background:var(--em05)}
.hv-story h3{margin:0;font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.015em}
.hv-story h3 a{color:var(--em);transition:color .5s var(--ease)}
.hv-story h3 a:hover{color:var(--bronze)}
.hv-story .hv-yr{margin-left:0;display:block;margin-top:2px}
.hv-story p{margin:0;font-size:15px;line-height:1.65;color:#111827;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}

/* ensembles + qavvals: two carousels side by side */
.hv-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
/* Hairline between the two carousels so the rails don't read as one strip. */
.hv-duo>div:first-child{padding-right:24px}
.hv-duo>div+div{border-left:1px solid var(--em1);padding-left:24px}
@media(max-width:820px){.hv-duo{grid-template-columns:1fr}.hv-duo>div:first-child{padding-right:0}.hv-duo>div+div{border-left:0;padding-left:0;padding-top:var(--space)}}
/* Both columns share the row height, and every card stretches to its rail, so the two carousels end level. */
.hv-duo>div{display:flex;flex-direction:column;min-width:0}
.hv-rail{flex:1;align-items:stretch;display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 14px;margin:-6px -2px 0}
.hv-rail::-webkit-scrollbar{display:none}
/* Two whole cards per column; the arrows (dimmed at the ends) signal there's more. */
.hv-rail>a{flex:0 0 calc((100% - 24px) / 2);scroll-snap-align:start;overflow:hidden;display:flex;flex-direction:column}
@media(max-width:820px){.hv-rail>a{flex-basis:62%}}
.hv-rail .hv-ph{aspect-ratio:1/1;background:var(--em05);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hv-rail .hv-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.hv-rail a:hover .hv-ph img{transform:scale(1.06)}
.hv-cap{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.hv-cap b{font-size:15px;line-height:1.3;color:var(--em)}
.hv-cap .hv-yr{margin-left:0}
/* Years, then the status chip: same stack on every card, pinned to the card's foot. */
.hv-meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:auto}
.hv-bio{margin:0;font-size:14px;line-height:1.5;color:#111827;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hv-arrows{display:flex;gap:4px}
/* Plain glyph arrows in the CTA ink (bronze → emerald), no chrome; 44px tap target. */
.hv-arrow{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;color:var(--bronze);font:700 20px/1 'Cardo',serif;transition:color .5s var(--ease)}
.hv-arrow:hover{color:var(--em)}
.hv-arrow:disabled{opacity:.3;cursor:default;color:var(--bronze)}
.hv-all{align-items:center;justify-content:center;text-align:center;background:var(--em05);padding:16px}
@media(max-width:820px){.hv-arrows{display:none}}

/* verse band — emerald-100 hairlines like every other divider; gold is kept for the H1 rule (§4) */
.hv-verse{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(28px,4vw,36px) 0;border-top:1px solid var(--em1);border-bottom:1px solid var(--em1)}
@media(max-width:820px){.hv-verse{grid-template-columns:1fr;text-align:center}}
.hv-ur{font-family:'Noto Nastaliq Urdu',serif;font-size:clamp(20px,2.6vw,26px);line-height:2.1;color:var(--em);text-align:right;order:2}
@media(max-width:820px){.hv-ur{text-align:center;order:0}}
/* Phone: one column, label first — unwrap the text column so its label can sit above the Urdu. */
@media(max-width:820px){.hv-verse{display:flex;flex-direction:column;align-items:center;gap:8px}.hv-verse>div:not(.hv-ur){display:contents}.hv-verse .section-label{order:-1}.hv-verse .hv-ro{order:1;margin-top:0}.hv-verse .cta-micro{order:2}}
.hv-ro{font-family:'Noto Sans Mono',ui-monospace,monospace;font-size:16px;font-weight:400;color:var(--em);line-height:1.7;margin-top:10px}
.hv-verse .cta-micro{margin-top:6px}

/* listening sessions */
.hv-sessions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
@media(max-width:820px){.hv-sessions{grid-template-columns:1fr}}
.hv-latest{background:var(--em);color:var(--cream);border:1px solid var(--em);border-radius:16px;padding:24px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;transition:all .5s var(--ease)}
.hv-latest:hover{color:var(--cream);transform:translateY(-4px);box-shadow:0 20px 25px -5px rgba(6,78,59,.25);border-color:var(--gold)}
.hv-latest h3{margin:0;font-size:24px;line-height:1.2;font-weight:700}
.hv-latest p{margin:0;font-size:15px;line-height:1.6;color:rgba(253,252,240,.85);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hv-list a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;color:var(--em);font-size:17px;font-weight:700;transition:color .5s var(--ease)}
.hv-list a:first-child{padding-top:4px}
.hv-list a:hover{color:var(--bronze)}

/* contribute card: what the archive has so far, and one way to help */
.hv-contrib{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 40px;align-items:center;padding:clamp(20px,3vw,28px)}
@media(max-width:820px){.hv-contrib{grid-template-columns:1fr}}
.hv-contrib h3{margin:0 0 4px;font-size:22px;line-height:1.2;color:var(--em);font-weight:700;letter-spacing:-.015em}
.hv-contrib p{margin:0;font-size:15px;line-height:1.6;color:#111827}
.hv-bars{display:flex;flex-direction:column;gap:16px}
.hv-bar-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px;font-size:15px;font-weight:700;color:var(--em)}
.hv-bar-head .hv-yr{margin-left:0}
.hv-track{height:8px;border-radius:4px;background:var(--em05);border:1px solid var(--em1);overflow:hidden}
.hv-track span{display:block;height:100%;background:var(--gold)}
.hv-mail{color:var(--bronze);font-size:15px;font-weight:700;border-bottom:1px solid rgba(128,70,0,.35)}
.hv-mail:hover{color:var(--em)}
.hv-fund{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:clamp(40px,5vw,56px);text-align:center}
.hv-fund p{margin:0;font-size:15px;line-height:1.6;color:var(--g6)}
/* Shared .archival-pill (cream, gold border, 4px bezel, inversion on hover), scaled up so it reads as the page's one ask. */
.hv a.hv-coffee{gap:10px;padding:10px 20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}