/* HiPTV home page. Tokens and components follow the TV app (ui/theme/Color.kt).
   Sizes are in rem: on a TV-shaped window 1rem is 1/1920 of the app's 1080p screen times 16,
   so the page reads like the app at any size. Phones get a stacked layout below 900px. */
@font-face{font-family:Archivo;src:url('/assets/archivo.woff2') format('woff2');font-weight:400 800;font-display:swap}
:root{
  --bg:#000;--panel:#08080C;--surface:#12131A;--raised:#1E202B;--border:#323546;--border-subtle:#1C1E28;
  --text:#fff;--text2:#C2C6D6;--muted:#787D91;--faint:#525668;--accent:#2F5BFF;--accent-soft:#7B95FF;
  --glow:0 0 2.2rem .4rem rgba(47,91,255,.5);
}
*{box-sizing:border-box}
html{font-size:clamp(9px,min(.8333vw,1.4815vh),24px);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:Archivo,system-ui,Arial,sans-serif;line-height:1.35;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
p,h1,h2,h3{margin:0}
ul{list-style:none;margin:0;padding:0}
::selection{background:var(--accent);color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-10rem;z-index:20;background:#fff;color:#000;padding:.8rem 1.4rem;border-radius:99px;font-weight:700}
.skip:focus{top:1rem}
:focus{outline:none}

/* Header: logo + screen name, clock (app header) */
.top{position:fixed;left:0;right:0;top:0;z-index:8;display:flex;align-items:center;gap:1.25rem;padding:2.75rem 6rem 0;pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:1.1rem}
.brand img{height:3.5rem;width:auto}
.where{font-weight:800;font-size:2.875rem;letter-spacing:-.02em}
.where b{color:var(--accent)}
.clock{margin-left:auto;font-weight:600;font-size:1.875rem}
.menu{display:none}

/* Text tokens */
.eyebrow{color:var(--accent-soft);font-weight:700;font-size:1.5rem;letter-spacing:.18em;text-transform:uppercase}
.title{font-weight:800;font-size:5.25rem;line-height:1.02;letter-spacing:-.035em;margin:1rem 0 1.5rem}
.title.huge{font-size:8.75rem;letter-spacing:-.04em;margin:.6rem 0 1.4rem}
.lede{color:var(--text2);font-size:1.875rem;line-height:1.45;max-width:46rem}

/* Headings: a big blue first part, then the rest of the line smaller and white ("Smart Search / that knows your films.") */
.t-blue{display:block;color:var(--accent);font-weight:800}
.t-white{display:block;color:#fff;font-size:.62em;line-height:1.15;margin-top:.15em}
.lede .t-blue{font-size:1.4em;line-height:1.15;margin-bottom:.3rem}

/* Pills: white = primary (Play), dark = secondary; focus turns them white with a halo, like the app */
.pill{display:inline-flex;align-items:center;gap:.9rem;height:4.75rem;padding:0 2.1rem;border-radius:99px;font-weight:700;font-size:1.75rem;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.pill.white{background:#fff;color:#000;box-shadow:0 0 2rem rgba(255,255,255,.18)}
.pill.dark{background:var(--surface);border:2px solid var(--border);color:#fff}
.pill.accent{background:var(--accent);color:#fff}
a.pill:hover,a.pill:focus-visible{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 2.4rem .3rem rgba(255,255,255,.28)}
.pill.white:focus-visible,.pill.white:hover{box-shadow:0 0 0 .3rem var(--bg),0 0 0 .6rem var(--accent),var(--glow)}
/* Website actions (go somewhere on this site or get the app) are solid blue with a glow, a style the app's own
   buttons never use, so they stand apart from the white and grey buttons inside the app mock-ups. */
.pill.cta{background:var(--accent);color:#fff;border:0;box-shadow:0 0 2rem .2rem rgba(47,91,255,.45)}
.pill.cta-outline{background:rgba(47,91,255,.12);color:#fff;border:2px solid var(--accent)}
a.pill.cta:hover,a.pill.cta:focus-visible,a.pill.cta-outline:hover,a.pill.cta-outline:focus-visible{background:#4d74ff;color:#fff;border-color:#4d74ff;box-shadow:0 0 0 .3rem var(--bg),0 0 0 .6rem #7B95FF,0 0 2.6rem .4rem rgba(47,91,255,.7)}
/* Marks an app mock-up as a picture of the app */
.app-tag{display:inline-block;margin-bottom:1rem;padding:.3rem .9rem;border-radius:99px;border:1px dashed var(--border);color:var(--muted);font-size:1.15rem;font-weight:600}
/* Watch progress, as on the TV's details and Home screens */
.progress{display:flex;align-items:center;gap:1.25rem;margin-top:1.3rem}
.bar{width:22.5rem;height:.45rem;border-radius:1rem;background:rgba(255,255,255,.18);overflow:hidden}
.bar span{display:block;width:60%;height:100%;background:var(--accent)}
.progress .left{font-size:1.375rem;font-weight:600;color:var(--text2)}
.next{margin-top:2.6rem}
.actions{display:flex;flex-wrap:wrap;gap:1.25rem}

/* Category panel, like the Movies / Series category list */
.panel{position:fixed;left:0;top:0;bottom:0;z-index:9;width:32.5rem;padding:10rem 0 2.5rem 6rem;display:flex;flex-direction:column;
  background:linear-gradient(90deg,rgba(8,8,12,.98) 72%,rgba(8,8,12,0));transform:translateX(-100%);transition:transform .28s ease;visibility:hidden}
.panel.open{transform:none;visibility:visible}
.cat{display:flex;align-items:center;width:21.25rem;height:4.25rem;padding:0 1.5rem;margin-bottom:.4rem;border-radius:.875rem;font-weight:600;font-size:1.75rem;color:var(--text2)}
.cat-icon{flex:none;width:2.25rem;height:2.25rem;margin-right:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--text2)}
.cat[aria-current="page"] .cat-icon{color:var(--accent);filter:drop-shadow(0 0 .45rem rgba(47,91,255,.9))}
.cat[aria-current="page"]{background:var(--surface);color:#fff;font-weight:700}
.cat:hover,.cat:focus-visible{outline:.25rem solid var(--accent);outline-offset:0;box-shadow:var(--glow);color:#fff}
.panel-legal{margin-top:auto;font-size:1.25rem;color:var(--muted);width:22rem;line-height:1.7}
.panel-legal a:hover,.panel-legal a:focus-visible{color:#fff}
.scrim{display:none}

/* Screens: one at a time, filling the window like the TV */
.screen{position:relative}
.js .screen{display:none}
.js .screen.active{display:flex;animation:fade .28s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (min-width:900px) and (min-height:520px){
  .js body{overflow:hidden}
  .js .screen{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;padding:11rem 6rem 7rem}
}
.no-js .screen{display:flex;padding:11rem 6rem 6rem;min-height:100vh}
.no-js .panel{position:static;transform:none;visibility:visible;background:none;padding:9rem 6rem 0;width:auto}
.no-js .cats{display:flex;flex-wrap:wrap;gap:.5rem}
.no-js .top{position:absolute}

/* Home: hero over the photo, then the "Why HiPTV" row */
.home{flex-direction:column}
.hero{flex:1}
.hero>*:not(.hero-photo){position:relative;z-index:1}
.hero-photo{position:absolute;right:0;top:0;width:87.5rem;height:49.25rem;background:url('assets/hero-family.webp') center/cover}
.hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.75) 22%,rgba(0,0,0,0) 50%),linear-gradient(0deg,#000 2%,rgba(0,0,0,.55) 22%,rgba(0,0,0,0) 45%)}
.hi{color:var(--accent);font-weight:800;font-size:8.25rem;line-height:1.1;letter-spacing:-.04em;margin:0 0 .7rem;min-height:1.1em;white-space:nowrap}
.tagline{font-weight:800;font-size:3.25rem;letter-spacing:-.02em;line-height:1.1;margin-bottom:1rem}
.hero-lede{color:var(--text2);font-size:1.875rem;line-height:1.45;max-width:44rem;margin-bottom:1.8rem}
.row{position:relative;z-index:1;margin-top:1rem}
.row-title{font-weight:800;font-size:2.125rem;margin-bottom:1.4rem}
.cards{display:flex;gap:1.5rem}
.card{flex:0 0 21rem;display:block}
.thumb{position:relative;display:flex;align-items:flex-end;height:11.875rem;padding:1.1rem;border-radius:1rem;border:2px solid var(--border-subtle);overflow:hidden;transition:box-shadow .15s}
.thumb-title{font-weight:800;font-size:1.875rem;line-height:1.1}
.cap{display:block;margin:1rem .25rem 0;font-weight:600;font-size:1.625rem;color:var(--text2)}
.card:hover .thumb,.card:focus-visible .thumb{outline:.3rem solid var(--accent);outline-offset:.25rem;box-shadow:var(--glow)}
.card:hover .cap,.card:focus-visible .cap{color:#fff}

/* Home card photos, darkened at the bottom so the title stays readable */
.thumb.photo{background-size:cover;background-position:center}
.thumb.photo:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.85) 100%)}
.thumb.photo .thumb-title{position:relative;text-shadow:0 .1rem .6rem rgba(0,0,0,.6)}
.card-search{background-image:url('assets/card-search.webp')}
.card-fast{background-image:url('assets/card-fast.webp')}
.card-details{background-image:url('assets/card-details.webp')}

/* Card and poster colours (the app's no-artwork gradients) */
.g1{background:linear-gradient(150deg,#2F5BFF,#0b1a5c)}
.g2{background:linear-gradient(150deg,#6b2bd1,#1a0b3d)}
.g3{background:linear-gradient(150deg,#0f7a63,#062b24)}
.g4{background:linear-gradient(150deg,#a33c22,#3a120a)}
.g5{background:linear-gradient(150deg,#3d4457,#12131a)}
.g6{background:linear-gradient(150deg,#6b2a4f,#24101d)}

/* Split screens: text on the left, an app screen on the right */
.split{gap:5rem;align-items:safe center}
.split .intro{flex:0 0 46rem}
.mock{flex:1;min-width:0;background:var(--panel);border:2px solid var(--border-subtle);border-radius:1.5rem;padding:2.5rem;box-shadow:0 2rem 6rem rgba(47,91,255,.12)}
.poster{position:relative;display:flex;align-items:flex-end;aspect-ratio:2/3;border-radius:1rem;border:2px solid var(--border-subtle);padding:.9rem;overflow:hidden}
.ini{position:absolute;left:0;right:0;top:22%;text-align:center;font-weight:800;font-size:5.5rem;letter-spacing:-.02em;color:rgba(255,255,255,.16)}
.pt{position:relative;font-weight:800;font-size:1.375rem;line-height:1.1}
.poster{background-size:cover;background-position:center top}
.chan,.station{background-size:cover;background-position:center}
.poster:before,.chan:before,.station:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.85) 100%)}
.pt{text-shadow:0 .1rem .5rem rgba(0,0,0,.7)}
.poster.focus{outline:.3rem solid var(--accent);outline-offset:.25rem;box-shadow:var(--glow)}

/* Search screen */
.searchbox{display:flex;align-items:center;gap:1rem;height:4.5rem;padding:0 1.75rem;border-radius:99px;background:var(--surface);border:2px solid var(--accent);box-shadow:var(--glow);font-size:1.875rem;font-weight:600}
.glass{color:var(--text2);font-size:2.2rem}
.caret{width:.15rem;height:2.2rem;background:#fff;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.tabs{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 .25rem}
.tab{padding:.55rem 1.25rem;border-radius:99px;background:var(--surface);border:2px solid var(--border);font-size:1.375rem;font-weight:600;color:var(--text2)}
.tab.on{background:#fff;border-color:#fff;color:#000}
.group{font-weight:800;font-size:1.5rem;margin:1.1rem 0 .6rem}
.group span{color:var(--muted);font-weight:600;margin-left:.5rem}
/* Results in four groups that keep their size while matches come and go */
.results{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 2.5rem}
.rrow{display:flex;gap:1rem;align-items:flex-start}
.rrow.short{min-height:8.4rem}
.rrow.tall{min-height:13.6rem}
.ritem{display:flex;flex-direction:column;gap:.35rem;flex:none;animation:pop .18s ease}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.ritem .poster{width:7.5rem}
.ritem .poster .ini{font-size:3.4rem}
.ritem .pt{font-size:1.05rem}
.chan,.station{position:relative;display:flex;align-items:flex-end;padding:.7rem;border-radius:1rem;border:2px solid var(--border-subtle);overflow:hidden}
.chan{width:12rem;aspect-ratio:16/9}
.station{width:6.75rem;aspect-ratio:1}
.chan .ini,.station .ini{top:12%;font-size:3.2rem}
.live{z-index:1}
.chan:before,.station:before{background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.7) 100%)}
.live{position:absolute;left:.55rem;top:.55rem;background:#FF375F;color:#fff;border-radius:.4rem;padding:.1rem .45rem;font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.who{color:var(--accent-soft);font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.none{color:var(--faint);font-size:1.25rem;font-weight:600;padding-top:.6rem}

/* Speed screen */
.stat{display:flex;flex-direction:column;gap:.6rem;margin-top:2.5rem}
.num{font-weight:800;font-size:7rem;letter-spacing:-.04em;line-height:1;color:#fff}
.num small{font-size:3rem;color:var(--accent-soft)}
.unit{color:var(--text2);font-size:1.5rem;max-width:34rem}
.browse{display:flex;gap:2rem}
.mini-cats{flex:0 0 13rem}
.mini-cats li{padding:.8rem 1.1rem;border-radius:.75rem;font-size:1.375rem;font-weight:600;color:var(--text2)}
.mini-cats li.on{background:var(--surface);color:#fff}
/* Poster wall: a held Down then Up arrow scrolls rows past a focus ring that stays put. While the key is
   held the cards show placeholders, as the app's fast scroll does. One 6 s loop, all CSS.
   The stop moves by exactly --k rows of --rows ((track height + gap) / rows is one row), so the
   ring always frames a single card. */
.wall{flex:1;min-width:0;display:flex;flex-direction:column;gap:1.25rem}
.wall-window{--win:36rem;--gap:1.25rem;--rows:18;--k:13;position:relative;height:var(--win);overflow:hidden;padding:.5rem;margin:-.5rem;
  -webkit-mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(transparent,#000 5%,#000 95%,transparent)}
.grid,.wall-focus{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap)}
.grid{animation:wall 6s cubic-bezier(.5,0,.2,1) infinite;will-change:transform}
.grid .ini{font-size:3.6rem}
.grid .pt{font-size:1.125rem}
.grid .ini,.grid .pt{animation:wall-text 6s linear infinite}
.wall-focus{position:absolute;inset:.5rem;align-content:start;pointer-events:none}
.wall-focus span{grid-column:2;aspect-ratio:2/3;border-radius:1rem;outline:.3rem solid var(--accent);outline-offset:.25rem;box-shadow:var(--glow)}
.wall-focus span:first-child{visibility:hidden}
@keyframes wall{0%,14%{transform:translateY(0)}31%,52%{transform:translateY(calc((100% + var(--gap)) * var(--k) / var(--rows) * -1))}69%,100%{transform:translateY(0)}}
@keyframes wall-text{0%,14%{opacity:1}15%,31%{opacity:0}33%,52%{opacity:1}53%,69%{opacity:0}71%,100%{opacity:1}}
.held{display:flex;gap:2rem;font-size:1.375rem;font-weight:600;color:var(--text2)}
.held b{display:inline-block;background:var(--surface);color:#fff;border-radius:.5rem;padding:.3rem .7rem;margin-right:.6rem}
.held-down{animation:held-down 6s linear infinite}
.held-up{animation:held-up 6s linear infinite}
@keyframes held-down{0%,12%{opacity:.3}14%,31%{opacity:1}33%,100%{opacity:.3}}
@keyframes held-up{0%,50%{opacity:.3}52%,69%{opacity:1}71%,100%{opacity:.3}}

/* Details screen: a labelled picture of the app's details page, next to the explanation */
.details-mock{position:relative;margin:0;padding:0 0 1.6rem;overflow:hidden}
.details-mock .app-tag{position:absolute;top:1.4rem;inset-inline-start:1.6rem;z-index:2;margin:0;background:rgba(0,0,0,.65);border-style:solid;color:var(--text2)}
.dm-hero{position:relative;height:18rem;margin-bottom:1rem}
/* The film's backdrop, fading into the panel under the title */
.details-backdrop{position:absolute;inset:0;background:url('assets/details-backdrop.webp') right 35%/cover}
.details-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--panel) 0%,rgba(8,8,12,.6) 40%,rgba(8,8,12,0) 75%)}
.dm-head{position:absolute;inset-inline-start:2.5rem;bottom:0}
.dm-head .eyebrow{font-size:1.25rem}
.dm-title{margin:.1rem 0 0;font-size:5rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.chips{display:flex;flex-wrap:wrap;gap:.75rem}
.chip{padding:.5rem 1.15rem;border-radius:99px;background:var(--surface);border:2px solid var(--border);font-size:1.375rem;font-weight:600;color:var(--text2)}
.chip.on{background:#fff;border-color:#fff;color:#000}
.plot{font-size:2rem;color:#fff;max-width:56rem;margin:1.6rem 0 1.2rem;line-height:1.4}
.credit{font-size:1.5rem;color:var(--muted);margin-bottom:.4rem}
.credit b{color:#fff;margin-right:.8rem}
/* Each part of the screen with a label beside it saying what it is */
.ann{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:2.4rem;align-items:center;padding:.75rem 2.5rem}
.note{position:relative;padding-inline-start:2.6rem;color:var(--accent-soft);font-size:1.4rem;font-weight:700;line-height:1.25}
.note:before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:1.8rem;border-top:2px solid var(--accent-soft)}
.details-mock .chip{font-size:1.2rem;padding:.35rem .95rem}
.details-mock .plot{font-size:1.6rem;margin:0}
.details-mock .credit{font-size:1.4rem;margin:.15rem 0}
.details-mock .progress{margin:0 0 .9rem}
.details-mock .bar{width:16rem}
.details-mock .progress .left{font-size:1.25rem}
/* Drawn buttons, smaller than the page's own so they read as part of the picture */
.details-mock .actions{gap:.8rem}
.details-mock .pill{height:3.6rem;padding:0 1.5rem;font-size:1.35rem;gap:.6rem;cursor:default}
.details-mock .pill.white{box-shadow:none}

/* Settings-style screens: a list on the left, the chosen item on the right */
.settings{gap:5rem}
.opts{flex:0 0 30rem;display:flex;flex-direction:column}
.opt{width:100%;min-height:4.375rem;padding:.9rem 1.5rem;margin-bottom:.4rem;border-radius:.875rem;font-weight:600;font-size:1.75rem;color:var(--text2)}
.opt[aria-selected="true"]{background:var(--surface);color:#fff;font-weight:700}
.opt:hover,.opt:focus-visible{outline:.25rem solid var(--accent);box-shadow:var(--glow);color:#fff}
.panes{flex:1;max-width:72rem;padding-top:.4rem}
.pane h3{font-weight:800;font-size:4.5rem;line-height:1.05;letter-spacing:-.03em;margin:1rem 0 1.5rem}
.pane p:not(.eyebrow){color:var(--text2);font-size:1.875rem;line-height:1.5;max-width:58rem}
.pane a{color:var(--accent-soft);text-decoration:underline}
.js .pane{display:none}
.js .pane.on{display:block;animation:fade .2s ease}
.no-js .opts{display:none}
.no-js .pane{margin-bottom:4rem}

/* Get HiPTV: one card per platform, like Settings -> Sources */
.get{flex-direction:column}
.get .title{font-size:3.75rem;margin:.6rem 0 1rem}
.get .lede{font-size:1.625rem;max-width:64rem}
.sources{display:grid;grid-template-columns:repeat(5,1fr);gap:1.25rem;margin-top:1.6rem}
.source{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem 1.75rem;border-radius:1.25rem;background:var(--panel);border:2px solid var(--border-subtle)}
.logos{display:flex;align-items:center;gap:1.1rem;height:3rem;margin-bottom:.4rem}
.logo{height:3rem;width:auto;fill:#fff}
.logo-samsung{height:1.6rem}
.logo-lg{height:2.4rem}
.state{font-weight:700;font-size:1.25rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.state.available,.state.testing{color:var(--accent-soft)}
.source h3{font-weight:800;font-size:2rem;letter-spacing:-.01em}
.source p:not(.state){color:var(--text2);font-size:1.375rem;line-height:1.4}
.source .pill{align-self:flex-start;margin-top:.6rem;height:3.6rem;font-size:1.4rem}

/* Bottom bar: key hints (desktop) and legal links */
.foot{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;gap:2rem;padding:0 6rem 2.5rem;pointer-events:none;background:linear-gradient(0deg,#000 40%,rgba(0,0,0,0))}
.foot>*{pointer-events:auto}
.keys{display:flex;gap:2.1rem;font-size:1.375rem;color:var(--muted)}
.keys b{display:inline-block;background:var(--surface);color:#fff;border-radius:.5rem;padding:.35rem .75rem;margin-right:.75rem}
.legal{margin-left:auto;font-size:1.25rem;color:var(--muted)}
.credit-line{position:absolute;right:6rem;bottom:.6rem;font-size:1rem;color:var(--faint)}
.legal a:hover,.legal a:focus-visible{color:#fff;text-decoration:underline}
.no-js .foot{position:static;background:none}

/* Phones and small windows: the same screens, stacked */
@media (max-width:899px),(max-height:519px){
  html{font-size:9px}
  .top{position:sticky;padding:1.6rem 1.8rem;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);gap:1rem}
  .brand img{height:3.6rem}
  .where{font-size:2.6rem}
  .clock{display:none}
  .menu{display:inline-flex;align-items:center;gap:.7rem;margin-left:auto;height:4.4rem;padding:0 1.6rem;border-radius:99px;background:var(--surface);border:2px solid var(--border);font-weight:700;font-size:1.6rem}
  .menu:focus-visible{outline:.3rem solid var(--accent);box-shadow:var(--glow)}
  .panel{width:min(84vw,34rem);padding:9rem 2rem 2.5rem;background:var(--panel);border-right:2px solid var(--border-subtle);overflow-y:auto}
  .cat{width:100%;height:5rem;font-size:1.9rem}
  .panel-legal{font-size:1.5rem;width:auto}
  .scrim{position:fixed;inset:0;z-index:8;background:rgba(0,0,0,.6)}
  .panel.open~.scrim{display:block}
  .js .screen.active,.no-js .screen{flex-direction:column;padding:2.4rem 1.8rem 3rem;min-height:0}
  .eyebrow{font-size:1.35rem}
  .title,.title.huge{font-size:4.4rem}
  .lede,.plot,.pane p:not(.eyebrow){font-size:1.9rem}
  .hi{font-size:7.6rem}
  .tagline{font-size:3rem}
  .hero-lede{font-size:1.9rem}
  .hero-photo{position:relative;width:auto;height:auto;aspect-ratio:16/9;margin:0 -1.8rem 2.4rem;background-image:url('assets/hero-family-960.webp')}
  .hero-photo:after{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,0) 30%),linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 18%)}
  .actions .pill{flex:1 1 auto;justify-content:center}
  .pill{height:5.2rem;font-size:1.8rem}
  .row{margin-top:3.4rem}
  .cards{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:1.8rem;margin:0 -1.8rem;padding:.6rem 1.8rem 1rem}
  .card{flex:0 0 24rem;scroll-snap-align:start}
  .split{gap:3rem;align-items:stretch}
  .split .intro{flex:none}
  .mock{padding:1.8rem}
  .results{grid-template-columns:1fr;gap:0}
  .rrow{overflow:hidden}
  .browse{flex-direction:column}
  .mini-cats{display:flex;gap:.6rem;overflow-x:auto;flex:none}
  .mini-cats li{white-space:nowrap}
  .grid,.wall-focus{grid-template-columns:repeat(3,1fr)}
  .wall-window{--win:46rem;--rows:30;--k:19}
  .num{font-size:6.4rem}
  .details-backdrop{background-image:url('assets/details-backdrop-800.webp')}
  .dm-hero{height:15rem}
  .ann{grid-template-columns:1fr;gap:.5rem;padding:.9rem 1.8rem}
  .ann .note{order:-1}
  .settings{gap:0}
  .js .opts{display:none}
  .js .pane{display:block;margin-bottom:3.6rem}
  .pane h3{font-size:3.6rem}
  .sources{grid-template-columns:1fr}
  .source h3{font-size:2.6rem}
  .source p:not(.state){font-size:1.8rem}
  .foot{position:static;padding:2.4rem 1.8rem 3rem;background:none;border-top:2px solid var(--border-subtle)}
  .keys{display:none}
  .legal{margin:0;font-size:1.5rem;line-height:1.8}
  .credit-line{position:static;font-size:1.3rem;margin-top:.6rem}
}

@media (prefers-reduced-motion:reduce){
  .held{display:none}
  *,*:before,*:after{animation:none!important;transition:none!important}
}

/* Arabic (dir="rtl"): mirror the layout. Arabic letters join, so no letter-spacing, and it needs taller lines. */
[dir="rtl"] *{letter-spacing:0!important}
[dir="rtl"] button{text-align:right}
[dir="rtl"] .skip{left:auto;right:1rem}
[dir="rtl"] .clock{margin-left:0;margin-right:auto}
[dir="rtl"] .title,[dir="rtl"] .pane h3{line-height:1.25}
[dir="rtl"] .tagline{line-height:1.3}
[dir="rtl"] .hi{line-height:1.3;font-size:7.25rem}
[dir="rtl"] .hero-lede{font-size:1.75rem;margin-bottom:1.4rem}
[dir="rtl"] .title.huge{line-height:1.05}
[dir="rtl"] .plot{margin:1.2rem 0 1rem}
[dir="rtl"] .panel{left:auto;right:0;padding:10rem 6rem 2.5rem 0;transform:translateX(100%);background:linear-gradient(270deg,rgba(8,8,12,.98) 72%,rgba(8,8,12,0))}
[dir="rtl"] .panel.open{transform:none}
[dir="rtl"] .hero-photo{right:auto;left:0}
[dir="rtl"] .hero-photo:after{background:linear-gradient(270deg,#000 0%,rgba(0,0,0,.75) 22%,rgba(0,0,0,0) 50%),linear-gradient(0deg,#000 2%,rgba(0,0,0,.55) 22%,rgba(0,0,0,0) 45%)}
[dir="rtl"] .live{left:auto;right:.55rem}
[dir="rtl"] .group span{margin-left:0;margin-right:.5rem}
[dir="rtl"] .credit b{margin-right:0;margin-left:.8rem}
[dir="rtl"] .keys b,[dir="rtl"] .held b{margin-right:0;margin-left:.75rem}
[dir="rtl"] .details-backdrop{transform:scaleX(-1)}
[dir="rtl"] .legal{margin-left:0;margin-right:auto}
@media (max-width:899px),(max-height:519px){
  [dir="rtl"] .menu{margin-left:0;margin-right:auto}
  [dir="rtl"] .hi{font-size:6.6rem}
  [dir="rtl"] .hero-lede{font-size:1.9rem}
  [dir="rtl"] .panel{padding:9rem 2rem 2.5rem;border-right:0;border-left:2px solid var(--border-subtle)}
  [dir="rtl"] .hero-photo:after{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,0) 30%),linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 18%)}
  [dir="rtl"] .legal{margin:0}
}

/* Desktop: the panel stays on screen as a rail of icons (the current page's icon blue and glowing);
   hovering it, or Left from the screen, opens it with the names. Phones keep the drawer. */
@media (min-width:900px) and (min-height:520px){
  .js .panel{width:6rem;padding:10rem 0 2.5rem 1rem;transform:none;visibility:visible;overflow:hidden;background:transparent;transition:width .25s ease,background .25s ease}
  .js .panel.open{width:32.5rem;background:linear-gradient(90deg,rgba(8,8,12,.98) 72%,rgba(8,8,12,0))}
  .js .cat{width:21.25rem;padding:0 .9rem}
  .js .cat-label,.js .panel-legal{transition:opacity .2s ease}
  .js .panel:not(.open) .cat-label,.js .panel:not(.open) .panel-legal{opacity:0}
  .js .panel:not(.open) .cat{background:none;box-shadow:none;outline:none}
  .js .panel:not(.open) .cat:hover .cat-icon{color:#fff}
  [dir="rtl"].js .panel{padding:10rem 1rem 2.5rem 0;transform:none}
  [dir="rtl"].js .panel.open{background:linear-gradient(270deg,rgba(8,8,12,.98) 72%,rgba(8,8,12,0))}
}
[dir="rtl"] .cat-icon{margin-right:0;margin-left:1.25rem}