@charset "UTF-8";

/*
 * Historium premium interface layer.
 * Loaded after page-specific styles so typography, spacing and interaction
 * remain coherent without duplicating the established component system.
 */

:root{
  --premium-hairline: color-mix(in srgb,var(--line) 82%,transparent);
  --premium-glass: color-mix(in srgb,var(--surface) 88%,transparent);
  --premium-focus: 0 0 0 3px color-mix(in srgb,var(--brand) 30%,transparent);
  --premium-section-gap: clamp(2.4rem,4.8vw,5.2rem);
}

body{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:where(.action,.button,input,select,textarea,summary){
  font-family: var(--font-ui);
}

:where(.action,.button,.library-save-button,button,a,input,select,textarea,summary):focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  box-shadow: var(--premium-focus);
}

.page-title,.archive-intro .page-title,.article-archive-hero .page-title,.music-hero .page-title,.social-hero .page-title{
  max-width: 18ch;
  font-size: var(--type-display-size);
  font-weight: 640;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  text-wrap: balance;
}

.section-label,.eyebrow,.content-kicker{
  font-size: .69rem;
  font-weight: 740;
  letter-spacing: .105em;
}

.action,.button{
  font-weight: 650;
  letter-spacing: -.006em;
}

/* More cinematic shelves without sacrificing keyboard or touch access. */
.home-platform :is(.media-shelf,.journal-shelf){
  isolation: isolate;
}

.home-platform :is(.media-row,.article-row){
  padding-block: .45rem .85rem;
  scroll-padding-inline: max(var(--gutter),var(--safe-left));
}

.home-platform :is(.media-row > .video-card,.article-row > .article-card){
  transform-origin: center center;
}

.home-platform :is(.video-card,.article-card) :is(.thumb-link,.article-card-media){
  box-shadow: 0 12px 34px rgba(0,0,0,.15);
}

.home-platform :is(.video-card,.article-card) :is(.video-card-body,.article-card-body){
  transition: opacity var(--ease);
}

@media (hover:hover) and (pointer:fine){
  .home-platform :is(.media-row > .video-card,.article-row > .article-card):is(:hover,:focus-within){
    z-index: 8;
    transform: translateY(-6px);
  }

  .home-platform :is(.video-card,.article-card):is(:hover,:focus-within) :is(.thumb-link,.article-card-media){
    box-shadow: 0 24px 62px rgba(0,0,0,.34),0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent);
  }
}

@media (prefers-reduced-motion:reduce){
  .home-platform :is(.media-row > .video-card,.article-row > .article-card):is(:hover,:focus-within){
    transform: none;
  }
}

.shelf-heading{
  margin-block-end: .9rem;
}

.shelf-heading h2{
  font-size: clamp(1.32rem,1.7vw,1.8rem);
  font-weight: 630;
  letter-spacing: -.035em;
}

.shelf-link{
  min-height: 40px;
  padding: .5rem .7rem;
  border-radius: var(--radius-control);
}

/* Archives are tools first: useful controls and content enter the viewport early. */
.archive-hero,.article-archive-hero{
  gap: 1.4rem;
  padding-block: clamp(.75rem,2vw,1.55rem) 1.35rem;
}

.archive-tools,.article-filters{
  margin-block-end: 1.15rem;
  padding: .82rem;
  border-color: var(--premium-hairline);
  background: var(--premium-glass);
  box-shadow: 0 12px 36px rgba(0,0,0,.1);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

.archive-tools :is(input,select),.article-filters :is(input,select){
  min-height: 44px;
}

.archive-results :is(.video-card,.article-card){
  contain: layout paint style;
}

.pagination{
  margin-block-start: 1.65rem;
}

/* The watch page keeps title and synopsis directly connected to the player. */
.watch-priority-flow{
  display: grid;
  grid-column: 1 / -1;
  gap: 1.35rem;
  min-width: 0;
}

.watch-priority-flow > .watch-header,.watch-priority-flow > .watch-synopsis{
  width: 100%;
  margin-inline: 0;
}

.watch-priority-flow > .watch-header{
  margin-block-start: .25rem;
}

.watch-priority-flow > .watch-synopsis{
  max-width: 920px;
}

.watch-player-rail{
  border-color: var(--premium-hairline);
  background: linear-gradient(155deg,color-mix(in srgb,var(--surface-2) 82%,transparent),var(--premium-glass));
}

@media (min-width:1001px){
  .watch-primary-stage{ grid-column: 1; grid-row: 1; }
  .watch-player-rail{ grid-column: 2; grid-row: 1; }
  .watch-priority-flow{ grid-row: 2; }
}

.watch-heading-copy h1{
  max-width: 38ch;
  font-size: clamp(1.45rem,1.9vw,1.95rem);
  font-weight: 640;
  letter-spacing: -.032em;
}

.watch-description-text{
  max-width: 82ch;
}

/* Reading tools wrap visibly rather than hiding actions in a mystery scroller. */
.article-reading-tools,.article-reader-primary-tools,.article-reader-secondary-tools{
  min-width: 0;
}

.article-reader-secondary-tools{
  flex-wrap: wrap;
  overflow: visible;
}

.article-reader-secondary-tools > *{
  flex: 0 0 auto;
}

/* Social becomes an editorial destination instead of a generic card wall. */
.social-hero{
  min-height: 360px;
  grid-template-columns: minmax(0,.92fr) minmax(440px,1.08fr);
  padding: clamp(1.7rem,3.5vw,3.4rem);
  border-radius: var(--radius-feature);
}

.social-hero .page-title{
  max-width: 13ch;
}

.social-channel-card{
  border-color: var(--social-card-border);
  background: var(--social-card-bg);
  box-shadow: var(--social-card-shadow);
  transition: transform var(--ease-emphasized),border-color var(--ease),background var(--ease),box-shadow var(--ease);
}

@media (hover:hover){
  .social-channel-card:hover,.social-channel-card:focus-visible{
    transform: translateY(-4px);
    border-color: var(--social-card-border-hover);
    background: var(--social-card-bg-hover);
    box-shadow: var(--social-card-shadow-hover);
  }
}

/* A denser institutional footer, still fully expanded on mobile. */
.footer-inner,.home-platform + .site-footer .footer-inner{
  padding-block-start: clamp(1.7rem,2.8vw,2.8rem);
}

.footer-main{
  gap: clamp(1rem,2.2vw,2.4rem);
  padding-block-end: 1.45rem;
}

.footer-column{
  gap: .48rem;
}

.footer-nav,.social-links{
  gap: .18rem;
}

.footer-nav a,.social-link{
  min-height: 28px;
}

.footer-bottom{
  padding-block-start: .75rem;
}

/* Outside certified-CMP regions this compact strip exposes local consent controls. */
.cookie-consent.cookie-notice{
  width: min(1080px,calc(100% - 24px));
  grid-template-columns: minmax(0,1fr) auto;
  gap: .65rem 1rem;
  padding: .45rem .5rem .45rem .9rem;
  border-color: color-mix(in srgb,var(--line-strong) 64%,transparent);
  background: color-mix(in srgb,var(--surface) 76%,transparent);
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}

.cookie-consent.cookie-notice p{
  font-size: .68rem;
  line-height: 1.42;
}

.cookie-consent.cookie-notice .cookie-actions .action{
  min-width: 0;
  min-height: 34px;
  padding: .42rem .7rem;
  border-radius: 999px;
  font-size: .64rem;
  white-space: nowrap;
}

/* The local consent strip must never cover the footer's legal controls. */
.cookie-notice-visible body{
  padding-block-end: 58px;
}

/* Consent, audio and floating video surfaces share one safe bottom stack. */
.cookie-notice-visible .persistent-video-portal.is-mini{
  inset-block-end: calc(64px + var(--persistent-video-safe-bottom));
}

.cookie-notice-visible body.player-visible .cookie-consent.cookie-notice{
  inset-block-end: calc(88px + var(--safe-bottom));
}

.cookie-notice-visible body.player-visible .persistent-video-portal.is-mini{
  inset-block-end: calc(152px + var(--persistent-video-safe-bottom));
}

.cookie-notice-visible body.player-visible .site-shell{
  padding-block-end: calc(154px + var(--safe-bottom));
}

@media (max-width:1000px){
  .watch-primary-stage{ order: 1; }
  .watch-priority-flow{ order: 2; }
  .watch-player-rail{ order: 3; }

  .social-hero{
    grid-template-columns: 1fr;
  }
}

@media (min-width:768px){
  /* Keep a persistent soundtrack from covering the watch surface. */
  body.player-visible .persistent-video-anchor[data-video-orientation="landscape"]{
    inline-size: min(100%,1280px,calc(140svh - 135px));
  }

  body.player-visible .watch-player[data-video-orientation="landscape"]{
    width: min(100%,1280px,calc(140svh - 135px));
  }

  .cookie-notice-visible body.player-visible .persistent-video-anchor[data-video-orientation="landscape"]{
    inline-size: min(100%,1280px,calc(140svh - 235px));
  }

  .cookie-notice-visible body.player-visible .watch-player[data-video-orientation="landscape"]{
    width: min(100%,1280px,calc(140svh - 235px));
  }
}

@media (max-width:767px){
  :root{ --premium-section-gap: 2.4rem; }

  .page-title,.archive-intro .page-title,.article-archive-hero .page-title,.music-hero .page-title,.social-hero .page-title{
    max-width: 18ch;
    font-size: var(--type-display-size-mobile);
    line-height: var(--leading-display);
  }

  .archive-hero,.article-archive-hero{
    padding-block: .5rem 1rem;
  }

  .archive-tools,.article-filters{
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .58rem;
    padding: .7rem;
  }

  .archive-tools > :first-child,.article-filters > :first-child,.archive-tools > button,.article-filters > button{
    grid-column: 1 / -1;
  }

  .archive-tools .field > span,.article-filters .field > span{
    font-size: .65rem;
  }

  .watch-primary-layout{
    gap: .9rem;
  }

  .watch-priority-flow{
    gap: 1rem;
  }

  .watch-priority-flow > .watch-header{
    margin-block-start: .05rem;
    padding-block-end: .85rem;
  }

  .watch-heading-copy h1{
    font-size: clamp(1.3rem,5.8vw,1.65rem);
    line-height: 1.16;
  }

  .watch-player-rail{
    margin-block-start: .2rem;
  }

  .article-reading-tools{
    gap: .55rem;
  }

  .article-reader-primary-tools,.article-reader-secondary-tools{
    display: flex;
    width: 100%;
    gap: .42rem;
    flex-wrap: wrap;
  }

  .article-reader-secondary-tools :is(.button,summary){
    min-height: 40px;
    padding-inline: .62rem;
    font-size: .68rem;
  }

  .social-hero{
    min-height: 0;
    padding: 1.15rem;
  }

  .footer-inner,.home-platform + .site-footer .footer-inner{
    padding-block: .76rem calc(.42rem + var(--safe-bottom));
  }

  .footer-main{
    gap: .26rem .68rem;
    padding-block-end: .4rem;
  }

  .footer-column{
    gap: .16rem;
    padding-inline-start: .42rem;
  }

  .footer-column-title{
    font-size: .62rem;
    line-height: var(--leading-meta);
  }

  .footer-nav,.social-links{
    gap: 0;
  }

  .footer-nav a,.social-link,.footer-legal-links a,.footer-legal-links button{
    min-height: 44px;
    font-size: .7rem;
    line-height: 1.18;
  }

  .footer-bottom{
    gap: .08rem;
    padding-block-start: .3rem;
    font-size: .64rem;
    line-height: var(--leading-meta);
  }

  .footer-legal-links{
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .12rem .62rem;
  }

  .footer-legal-links :is(a,button){
    white-space: normal;
  }

  .cookie-consent.cookie-notice{
    width: calc(100% - 14px);
    grid-template-columns: minmax(0,1fr);
    gap: .45rem;
    padding: .48rem;
    border-radius: 12px;
  }

  .cookie-consent.cookie-notice p{
    font-size: .61rem;
    line-height: 1.35;
  }

  .cookie-consent.cookie-notice .cookie-actions{
    display: grid;
    width: 100%;
    grid-template-columns: auto repeat(2,minmax(0,1fr));
    gap: .25rem;
  }

  .cookie-consent.cookie-notice .cookie-actions .action{
    width: 100%;
    min-height: 32px;
    padding: .35rem .5rem;
    font-size: .59rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .cookie-notice-visible body{
    padding-block-end: 84px;
  }

  .cookie-notice-visible .persistent-video-portal.is-mini{
    inset-block-end: calc(70px + var(--persistent-video-safe-bottom));
  }

  .cookie-notice-visible body.player-visible .cookie-consent.cookie-notice{
    inset-block-end: calc(72px + var(--safe-bottom));
  }

  .cookie-notice-visible body.player-visible .persistent-video-portal.is-mini{
    inset-block-end: calc(140px + var(--persistent-video-safe-bottom));
  }

  .cookie-notice-visible body.player-visible .site-shell{
    padding-block-end: calc(136px + var(--safe-bottom));
  }
}

@media (max-width:420px){
  .cookie-consent.cookie-notice{
    grid-template-columns: minmax(0,1fr);
    gap: .35rem;
    padding: .42rem;
  }

  .cookie-consent.cookie-notice .cookie-actions{
    align-items: center;
    justify-content: flex-end;
  }

  .cookie-notice-visible body{
    padding-block-end: 78px;
  }
}

.site-shell :is(.page-title,.section-title):is(:lang(ar),:lang(ur),:lang(hi),:lang(ja),:lang(zh)){
  letter-spacing: normal;
  line-height: 1.28;
  text-transform: none;
  text-wrap: wrap;
}

.site-shell :is(.page-title,.section-title):lang(ur){ line-height: 1.55; }

:where(.section-label,.content-kicker,.eyebrow,.shelf-link,.text-link,.footer-column-title,.field > span,.action,.button):is(:lang(ar),:lang(ur),:lang(hi),:lang(ja),:lang(zh)){
  letter-spacing: normal;
  text-transform: none;
}

@media (prefers-reduced-motion:reduce){
  .home-platform :is(.video-card,.article-card),.social-channel-card{
    transition: none;
    transform: none !important;
  }
}