/* movierealm.app — shared styles (v2). Document pages are light/dark; the home is dark by brand. */
:root{
  --bg:#faf9f5; --panel:#ffffff; --txt:#26241d; --dim:#5d5b51; --line:#e3dfd4;
  --gold:#8a6b25; --gold-soft:#d4a94c; --mark-bg:#f4e5c2; --mark-txt:#6b5210; --code:#f0ede6;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#101014; --panel:#16161c; --txt:#ecebe6; --dim:#a3a29a; --line:#2a2a33;
    --gold:#d4a94c; --gold-soft:#d4a94c; --mark-bg:#3a2f14; --mark-txt:#e5c87e; --code:#1d1d24;
  }
}
html.dark{
  --bg:#0e0e12; --panel:#16161c; --txt:#efeee8; --dim:#a3a29a; --line:#2a2a33;
  --gold:#d4a94c; --gold-soft:#d4a94c; --mark-bg:#3a2f14; --mark-txt:#e5c87e; --code:#1d1d24;
  color-scheme:dark;
}
*{box-sizing:border-box; margin:0}
body{background:var(--bg); color:var(--txt);
  font:16px/1.65 Inter, -apple-system, "Segoe UI", Roboto, sans-serif; min-height:100svh;
  display:flex; flex-direction:column}
a{color:var(--gold)}
b, strong{font-weight:600}
mark.todo{background:var(--mark-bg); color:var(--mark-txt); padding:1px 6px; border-radius:5px; font-weight:600}

/* nav */
.site-nav{display:flex; gap:18px; flex-wrap:wrap; align-items:baseline; padding:22px 24px; font-size:14px;
  max-width:1280px; width:100%; margin:0 auto}
.site-nav a{color:var(--dim); text-decoration:none}
.site-nav a:hover, .site-nav a:focus-visible{color:var(--gold); outline:none}
.site-nav__home{font:600 18px/1 Fraunces, Georgia, serif; color:var(--txt) !important; margin-right:auto}

/* document pages */
.doc{flex:1; width:100%; max-width:720px; margin:0 auto; padding:16px 24px 64px}
.doc h1{font:600 34px/1.15 Fraunces, Georgia, serif; margin:14px 0 8px; text-wrap:balance}
.doc .lede{color:var(--dim); font-size:17px; margin:0 0 18px; text-wrap:pretty}
.doc h2{font:600 22px/1.25 Fraunces, Georgia, serif; margin:34px 0 10px}
.doc h3{font:600 17px/1.3 Inter, sans-serif; margin:22px 0 6px}
.doc p{margin:10px 0}
.doc ul, .doc ol{margin:10px 0 10px 22px}
.doc li{margin:6px 0}
.doc hr{border:none; border-top:1px solid var(--line); margin:26px 0}
.doc .card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:14px 0}
.doc .facts{display:grid; grid-template-columns:max-content 1fr; gap:8px 18px; margin:14px 0}
.doc .facts dt{color:var(--dim); font-size:14px; padding-top:2px}
.doc .facts dd{margin:0}
@media (max-width:520px){ .doc .facts{grid-template-columns:1fr; gap:2px 0} .doc .facts dd{margin-bottom:10px} }
.doc .updated{color:var(--dim); font-size:14px}
.credit{display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:center; padding:18px 0; border-top:1px solid var(--line)}
.credit:last-of-type{border-bottom:1px solid var(--line)}
.credit img{max-width:150px; max-height:44px; width:auto; height:auto; display:block}
.credit .credit__name{font-weight:600}
.credit .credit__note{color:var(--dim); font-size:14px}
@media (max-width:520px){ .credit{grid-template-columns:1fr; gap:8px} }
.faq details{border-top:1px solid var(--line); padding:12px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--dim); font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:8px 0 2px; color:var(--txt)}

/* home */
.hero{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:48px 24px 36px; gap:18px}
.hero .mark{font:650 clamp(44px, 9vw, 76px)/1.05 Fraunces, Georgia, serif; letter-spacing:.3px; text-wrap:balance}
.hero .mark em{font-style:normal; color:var(--gold)}
.hero .tag{max-width:40ch; color:var(--dim); font-size:18px; text-wrap:balance}
.stores{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px}
.store{display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:11px 22px 10px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); color:var(--txt); text-decoration:none; transition:border-color .15s}
.store:hover, .store:focus-visible{border-color:var(--gold); outline:none}
.store small{font-size:10.5px; color:var(--dim); letter-spacing:.09em; text-transform:uppercase}
.store b{font-size:16px; font-weight:600}
.hero .avail{color:var(--dim); font-size:13px}
.section{width:100%; max-width:1280px; margin:0 auto; padding:32px 24px}
.section h2{font:600 28px/1.2 Fraunces, Georgia, serif; text-wrap:balance; margin-bottom:6px}
.section .sub{color:var(--dim); max-width:60ch; margin-bottom:22px; text-wrap:pretty}
.features{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
@media (max-width:900px){ .features{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:600px){ .features{grid-template-columns:1fr} }
.feature{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 24px; min-width:0}
.feature h3{font:600 17px/1.3 Inter, sans-serif; margin-bottom:6px}
.feature p{color:var(--dim); font-size:15.5px; text-wrap:pretty}
.feature .k{display:inline-block; font:600 11px/1 Inter, sans-serif; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold); margin-bottom:10px}
.shots{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px}
.shots img{width:100%; height:auto; border-radius:18px; border:1px solid var(--line); display:block}
.company{display:grid; grid-template-columns:1fr; gap:14px; align-items:start}
.company p{color:var(--dim); max-width:70ch; text-wrap:pretty}
.company .more{color:var(--gold); text-decoration:none; font-weight:500}
.company .more:hover{text-decoration:underline}

@media (max-width:560px){
  .site-nav{gap:10px 16px; padding:18px 16px 8px}
  .site-nav__home{flex-basis:100%; margin-right:0}
  .hero .avail{text-wrap:balance}
  html.dark .site-nav{justify-content:center}
  html.dark .site-nav__home{text-align:center}
  html.dark .section h2, html.dark .section .sub, html.dark .company p{text-align:center; margin-left:auto; margin-right:auto}
  html.dark .company{justify-items:center}
  html.dark .site-foot{align-items:center; text-align:center}
  html.dark .site-foot__company, html.dark .site-foot__links{justify-content:center}
}

/* footer */
.site-foot{width:100%; max-width:1280px; margin:auto auto 0; padding:34px 24px 40px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:14px; font-size:13.5px; color:var(--dim)}
.site-foot__company{display:flex; flex-wrap:wrap; gap:6px 22px; align-items:baseline}
.site-foot__company strong{color:var(--txt)}
.site-foot__links{display:flex; flex-wrap:wrap; gap:8px 20px}
.site-foot a{color:var(--dim); text-decoration:none; border-bottom:1px solid var(--line)}
.site-foot a:hover, .site-foot a:focus-visible{color:var(--gold); border-color:var(--gold); outline:none}
.site-foot__legal{color:#7a786f; font-size:12.5px; max-width:80ch; text-wrap:pretty}