/* SC3 site pages — production palette (the shell's v-player block):
   paper #F2D233 / ink #141414, hard offset shadows, Teko display over
   Archivo body, system fallbacks only (no font files shipped from here). */
:root{
  --paper:#F2D233; --card:#FFFFFF; --well:#FFF9E6;
  --ink:#141414; --line:#141414;
  --muted:rgba(20,20,20,.45);
  --accent:#141414; --on-accent:#F2D233;
  --shadow:.25rem .25rem 0 0 var(--line);
  --r:1rem;
  --display:"Teko","Arial Narrow",system-ui,sans-serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#141414; --card:#2D2D2D; --well:#2D2D2D;
  --ink:#FFFFFF; --line:#000000;
  --muted:rgba(255,255,255,.62);
  --accent:#F2D233; --on-accent:#141414;
}}
*{box-sizing:border-box;margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);
  padding:1rem;max-width:74rem;margin:0 auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;line-height:.95}
h1{font-size:clamp(2.6rem,9vw,4.5rem);letter-spacing:.01em}
h2{font-size:clamp(1.5rem,5vw,2.2rem);margin:2rem 0 .5rem}
.nav{display:flex;gap:1rem;font-weight:700;text-transform:uppercase;
  font-size:.85rem;letter-spacing:.06em;margin-bottom:1.25rem;flex-wrap:wrap}
.tag{font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.sub{color:var(--muted);margin:.5rem 0 1rem;max-width:40rem}
.grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:1rem;text-decoration:none;display:block}
.card:active{transform:translate(.15rem,.15rem);box-shadow:.1rem .1rem 0 0 var(--line)}
.card h3{font-size:1.5rem}
.card p{color:var(--muted);font-size:.85rem;margin-top:.35rem}
.play{display:inline-block;background:var(--accent);color:var(--on-accent);
  font-family:var(--display);text-transform:uppercase;font-size:1.7rem;
  padding:.35rem 1.7rem .2rem;border:2px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);text-decoration:none;margin:.75rem 0 1.25rem}

/* Disney+ browse: one ROW per category, posters scrolling sideways. The
   row header is the link into the category; the posters are the browse. */
.row{margin:1.5rem 0}
.rowhead{display:flex;align-items:baseline;gap:.6rem;text-decoration:none;
  margin-bottom:.4rem}
.rowhead h3{font-size:1.6rem}
.rowhead .n{color:var(--muted);font-size:.78rem;font-weight:700}
.rail{display:flex;gap:.55rem;overflow-x:auto;padding:.15rem .15rem .7rem;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.poster{flex:0 0 auto;width:6.6rem;scroll-snap-align:start;text-decoration:none}
.poster img{width:100%;aspect-ratio:440/649;object-fit:cover;display:block;
  border:2px solid var(--line);border-radius:.5rem;box-shadow:var(--shadow);
  background:var(--well)}
.poster b{display:block;font-size:.7rem;font-weight:600;line-height:1.2;
  margin-top:.3rem}
/* a film with no poster (sports rows, and any cover the manifest refused)
   still gets a real tile — never a broken image, never an empty gap */
.noart{width:100%;aspect-ratio:440/649;border:2px solid var(--line);
  border-radius:.5rem;box-shadow:var(--shadow);background:var(--well);
  display:flex;align-items:center;padding:.4rem;font-family:var(--display);
  text-transform:uppercase;font-size:.95rem;line-height:1;overflow:hidden}
.wide{display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(6.4rem,1fr))}
.wide .poster{width:auto}
.note{background:var(--well);border:2px dashed var(--line);border-radius:var(--r);
  padding:.9rem 1rem;color:var(--ink);font-size:.9rem;margin:1rem 0}
.wall{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr))}
.wall figure{background:var(--card);border:2px solid var(--line);
  border-radius:.6rem;overflow:hidden;box-shadow:var(--shadow)}
.wall img{width:100%;height:auto;display:block;aspect-ratio:440/649;object-fit:cover}
.wall figcaption{font-size:.68rem;padding:.3rem .4rem;line-height:1.2}
.wall figcaption span{color:var(--muted)}
.filter{width:100%;padding:.6rem .8rem;border:2px solid var(--line);
  border-radius:var(--r);font:inherit;background:var(--card);color:var(--ink);
  margin:.5rem 0 1rem}
footer{margin:3rem 0 1rem;color:var(--muted);font-size:.75rem}