:root{
  --bg:#10243c;
  --bg2:#163154;
  --navy:#0c1c32;
  --ink:#f3ebe2;
  --muted:#c4b5a6;
  --line:#2c4a6e;
  --soft:#18324f;
  --gold:#c9a07a;
  --gold2:#e8c9ad;
  --rose:#b76e79;
  --max:1040px;
  --frame-h:min(58vh,520px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Palatino Linotype","Songti SC","Noto Serif SC","Georgia","Microsoft YaHei",serif;
  color:var(--ink);
  background:
    linear-gradient(180deg,#0e2038 0%,var(--bg) 38%,#0a182c 100%);
  line-height:1.85;
  letter-spacing:.03em;
}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold2);text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.2rem}

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(12,28,50,.94);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--gold);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  min-height:64px;gap:1rem;
}
.brand{
  display:flex;align-items:center;gap:.6rem;
  color:var(--gold2);text-decoration:none;font-weight:700;letter-spacing:.12em;
}
.brand img{width:34px;height:34px;border-radius:4px;border:1px solid var(--gold)}
.nav-desktop{display:flex;gap:1rem;flex-wrap:wrap}
.nav-desktop a{color:var(--muted);font-size:.9rem;text-decoration:none;letter-spacing:.06em}
.nav-desktop a:hover{color:var(--gold)}
.menu-toggle{
  display:none;
  border:1px solid var(--gold);
  background:transparent;
  color:var(--gold2);
  border-radius:2px;
  padding:.4rem .8rem;
  cursor:pointer;
  font-size:.88rem;
  letter-spacing:.12em;
}
#mobile-nav{
  display:none;
  border-top:1px solid var(--line);
  background:var(--navy);
}
#mobile-nav.open{display:block}
#mobile-nav a{
  display:block;
  padding:.82rem 1.2rem;
  border-bottom:1px dashed var(--line);
  color:var(--ink);
  text-decoration:none;
}
#mobile-nav a:hover{background:var(--soft);color:var(--gold)}

.ticket-bar{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.45rem 1.2rem;
  background:var(--navy);
  color:var(--gold);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  border-bottom:1px dashed rgba(201,160,122,.45);
}

.ads-slot{
  margin:1.1rem auto 0;
  max-width:var(--max);
  padding:0 1.2rem;
}
.ads-slot .ads-wrap{
  border-color:var(--line)!important;
  background:var(--soft)!important;
  border-radius:4px!important;
}
.ads-slot .applist-title,
.ads-slot #ads figcaption,
.ads-slot #ads .caption{color:var(--muted)!important}

.cine-reel{margin:0;padding:0}
.cine-frame{
  width:100%;
  display:flex;
  flex-direction:column;
  background:var(--navy);
  border-bottom:1px solid var(--line);
}
.cine-frame .cine-shot{
  position:relative;
  width:100%;
  height:var(--frame-h);
  object-fit: contain;
  object-position:center top;
  filter:saturate(.88) contrast(1.04) sepia(.08);
  border-top:8px solid var(--navy);
  border-bottom:0;
}
.cine-band{
  width:100%;
  padding:1.25rem 1.3rem 1.5rem;
  background:linear-gradient(180deg,#142a46,#10243c);
  border-top:1px solid var(--gold);
  box-shadow:inset 0 1px 0 rgba(232,201,173,.18);
}
.cine-band .wrap{padding:0}
.cine-kicker{
  margin:0 0 .4rem;
  font-size:.74rem;
  letter-spacing:.28em;
  color:var(--rose);
  font-family:"Segoe UI","PingFang SC",sans-serif;
}
.cine-band h1,
.cine-band h2{
  margin:0 0 .55rem;
  font-size:clamp(1.32rem,3vw,2rem);
  line-height:1.32;
  font-weight:700;
  color:var(--gold2);
}
.cine-band p{
  margin:0;
  max-width:48rem;
  color:rgba(243,235,226,.9);
  font-size:1.02rem;
}
.cine-cta{
  margin-top:1rem;
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  padding:.58rem 1.15rem;
  border-radius:2px;
  background:var(--gold);
  color:#1a120c;
  font-weight:700;
  text-decoration:none;
  letter-spacing:.08em;
}
.btn:hover{background:var(--gold2);text-decoration:none;color:#1a120c}
.btn.ghost{
  background:transparent;
  border:1px solid var(--gold);
  color:var(--gold2);
}
.btn.ghost:hover{border-color:var(--gold2);color:var(--gold2)}

.cine-copy{
  max-width:var(--max);
  margin:0 auto;
  padding:2.5rem 1.2rem 2.7rem;
}
.cine-copy h2{
  margin:0 0 1rem;
  font-size:clamp(1.22rem,2.3vw,1.65rem);
  color:var(--gold2);
  padding-bottom:.55rem;
  border-bottom:1px solid var(--rose);
}
.cine-copy h3{
  margin:1.55rem 0 .65rem;
  font-size:1.08rem;
  color:var(--gold);
}
.cine-copy p{
  margin:0 0 1rem;
  color:rgba(243,235,226,.9);
}
.cine-note{
  margin:1.2rem 0 1.4rem;
  padding:1rem 1.15rem;
  border-left:3px solid var(--gold);
  background:rgba(24,50,79,.65);
  color:var(--muted);
}
.cine-copy .peer-links{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem 1.2rem;
  margin:1.15rem 0 0;
  padding:1rem 1.1rem;
  border:1px dashed var(--gold);
  background:var(--soft);
}
.cine-copy .peer-links a{font-weight:700}

.page-shell{
  max-width:var(--max);
  margin:0 auto;
  padding:1.8rem 1.2rem 3rem;
}
.page-shell h1{
  margin:0 0 .7rem;
  font-size:clamp(1.4rem,3vw,1.95rem);
  color:var(--gold2);
}
.page-shell .lede{color:var(--muted);margin:0 0 1.45rem}
.page-shell article h2{
  margin:1.55rem 0 .65rem;
  font-size:1.12rem;
  color:var(--gold);
}
.page-shell article p{margin:0 0 1rem;color:rgba(243,235,226,.9)}
.err-box{
  max-width:540px;
  margin:3rem auto;
  padding:2rem 1.5rem;
  border:1px solid var(--gold);
  background:var(--soft);
  text-align:center;
}
.err-box h1{margin:0 0 .8rem;color:var(--gold2)}
.err-box p{color:var(--muted)}

.site-footer{
  border-top:2px solid var(--gold);
  padding:1.35rem 0 2rem;
  background:var(--navy);
  color:var(--muted);
  font-size:.9rem;
}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--gold)}
.footer-nav{
  display:flex;flex-wrap:wrap;gap:.55rem 1.1rem;
  margin-bottom:.55rem;
}

@media (max-width:860px){
  .nav-desktop{display:none}
  .menu-toggle{display:inline-block}
  :root{--frame-h:min(48vh,420px)}
  .cine-band{padding:1.05rem 1rem 1.25rem}
  .ticket-bar{letter-spacing:.1em;font-size:.65rem}
}
@media (max-width:520px){
  :root{--frame-h:min(42vh,360px)}
  .cine-band h1,.cine-band h2{font-size:1.24rem}
}

/* SEO keyword highlight */
strong.kw, .kw{color:var(--accent,#c45c26);font-weight:700}
mark.kw{background:rgba(196,92,38,.12);color:inherit;padding:0 .15em;border-radius:3px}

/* --- full image display (no crop) --- */
/* Content screenshots: show full image, no crop */
main img:not(#ads img):not(.brand img),
.bento-tile img,
.bento-tiles img,
.bento-grid img,
.bento-tile-tall img,
.bento-mosaic img,
.bento-pair img,
.bento-hot img,
figure img,
.cine-frame img,
.cine-frame .cine-shot,
.cine-shot,
.tl-item img,
.tl-media img,
.folio-reader img,
.folio-figure img,
.console-panels img,
.zig-section img,
.cascade-hero img,
.shot-row img,
.shot-card img,
.shot-grid img,
.shot img,
.featured img,
.mag-shot img,
.rail-main img,
.band-media img,
.sidebar-main img,
.mod-card img,
.stack-figure img,
.stack-fig img,
.split-hero img,
.split-media img,
.split-visual img,
.compare-card img,
.prose img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center top !important;
  display: block;
  background: #f0f0f0;
}
.cine-frame,
.split-visual,
.bento-tile-tall,
.bento-tile,
.bento-tiles figure,
.tl-media,
.tl-item figure,
.folio-figure,
.shot-row figure,
.shot-card,
.shot-grid figure,
.featured figure,
.zig-section figure,
.console-panels figure,
.folio-reader figure,
.band-media,
.split-media,
.stack-figure,
.stack-fig,
.mod-card,
.compare-card {
  overflow: visible !important;
  min-height: 0 !important;
  height: auto !important;
}
.cine-frame {
  display: block !important;
  position: relative !important;
}
.cine-frame::after,
.split-visual::after {
  display: none !important; /* gradient overlay was hiding lower part of screenshots */
}
.cine-band {
  position: relative !important;
  background: rgba(8, 9, 13, 0.92);
}
/* keep ad icons + logo square */
#ads img {
  width: 65px !important;
  height: 65px !important;
  max-width: 65px !important;
  max-height: 65px !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1 !important;
  position: static !important;
}
.brand img {
  width: 36px !important;
  height: 36px !important;
  object-fit: cover !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
}
/* --- end full image display --- */