:root{
  --ink:#060809;
  --paper:#ded7ca;
  --muted:#9d978d;
  --line:rgba(222,215,202,.20);
  --panel:rgba(8,10,11,.28);
  --scene-accent:#f0ebe2;
  --scene-accent-2:#f0ebe2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:Georgia,'Noto Serif TC','Songti TC',serif;
}
body[data-world='hk']{
  --box-hk:url('assets/bg-hk-violet-red.png');
  --box-syd:url('assets/bg-syd-warm-amber.png');
}
body[data-world='syd']{
  --box-hk:url('assets/bg-hk-violet-red.png');
  --box-syd:url('assets/bg-syd-warm-amber.png');
}
html::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:#040607;
}
.site-backdrop{
  position:fixed;
  inset:0;
  z-index:-1;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:1;
  transition:opacity .6s ease, transform 6s ease;
  pointer-events:none;
  filter:saturate(.92) contrast(1.06);
  transform:scale(1.02);
}
.site-backdrop.is-fading{opacity:.28}
.site-backdrop::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(3,5,6,.18) 0%,rgba(5,7,8,.42) 22%,rgba(5,7,8,.55) 48%,rgba(5,7,8,.72) 100%),
    radial-gradient(circle at 50% 30%, rgba(0,0,0,0) 0%, rgba(3,4,5,.24) 56%, rgba(2,3,4,.42) 100%);
}
.nav, .hero, main, footer{position:relative;z-index:1}
.nav{
  position:fixed;
  top:0;left:0;right:0;
  height:68px;
  display:flex;
  align-items:center;
  padding:0 4vw;
  background:rgba(6,9,10,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.05);
  z-index:30;
}
.mark{color:inherit;text-decoration:none;display:flex;gap:10px;align-items:baseline}
.mark span{font-size:18px}
.mark small,.nav nav,.lang,.stamp,.section-head p,.section-kicker,.media-card span,.media-card small,.social,.edition-grid small,.scenes-label{font-family:Arial,sans-serif;letter-spacing:.18em;font-size:9px}
.nav nav{margin:auto;display:flex;gap:30px}
.nav nav a,.social a{color:#beb8ae;text-decoration:none}
.lang{background:none;color:#d8d2c6;border:1px solid #4a4844;padding:9px 12px;cursor:pointer}
.hero{height:100svh;min-height:650px;overflow:hidden;background:transparent}
.mirror-reel,.mirror-slide{position:absolute;inset:0}
.mirror-slide{opacity:0;transition:opacity 1.25s ease;background-image:var(--bg);background-size:cover;background-position:center;filter:saturate(.72) contrast(1.03)}
.mirror-slide::before{content:"";position:absolute;inset:0;background-image:var(--bg);background-size:contain;background-position:center;background-repeat:no-repeat}
.mirror-slide.active{opacity:1}
.mirror-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,8,.76) 0%,rgba(5,7,8,.34) 42%,rgba(5,7,8,.12) 70%,rgba(5,7,8,.42) 100%)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,7,8,.68) 0%,transparent 28%,rgba(0,0,0,.12) 75%,rgba(0,0,0,.34) 100%)}
.grain{position:absolute;inset:0;opacity:.08;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.hero-copy{position:absolute;left:7vw;bottom:13vh}
.hero h1{margin:0}
.hero h1 span{display:block;font-size:clamp(54px,8vw,128px);font-weight:400;letter-spacing:.04em}
.hero h1 em{display:block;font-size:clamp(18px,2.2vw,34px);font-style:normal;letter-spacing:.24em;margin-top:12px}
.ghost-btn{display:inline-block;margin-top:38px;color:#ded7ca;text-decoration:none;font:10px Arial,sans-serif;letter-spacing:.18em;border-bottom:1px solid #aaa;padding-bottom:9px}
.section-pad{padding:120px 7vw}
.section-head{display:grid;grid-template-columns:30% 70%;align-items:start;margin-bottom:55px}
.section-head p,.section-kicker,.scenes-label{color:#aaa}
.section-head h2{font-size:clamp(38px,5vw,72px);font-weight:400;margin:0}
.section-kicker,.scenes-label{margin-bottom:40px}
.world,.watch,.scenes,.social{background:transparent}
.world{min-height:760px;overflow:hidden}
.world-inner{position:relative;z-index:2}
.world-choices{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:920px}
.world-choice{
  position:relative;
  min-height:220px;
  border:1px solid rgba(225,217,202,.36);
  color:#f4ecdd;
  text-align:left;
  padding:36px;
  background:rgba(6,9,10,.22);
  backdrop-filter:blur(4px);
  cursor:pointer;
  transition:transform .3s ease,border-color .3s ease, box-shadow .3s ease;
  overflow:hidden;
}
.world-choice::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--preview);
  background-size:cover;
  background-position:center;
  transform:scale(1.03);
  opacity:.55;
  transition:opacity .3s ease, transform .6s ease;
}
.world-choice::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(3,5,6,.28) 0%, rgba(7,10,12,.58) 100%);
}
.world-choice[data-world='hk']{--preview:var(--box-hk)}
.world-choice[data-world='syd']{--preview:var(--box-syd)}
.world-choice > *{position:relative;z-index:1}
.world-choice:hover,.world-choice.active{transform:translateY(-2px);border-color:rgba(238,231,218,.9);box-shadow:0 18px 36px rgba(0,0,0,.28)}
.world-choice:hover::before,.world-choice.active::before{opacity:.82;transform:scale(1.08)}
.world-choice span{font-size:40px;display:block}
.world-choice strong{font:25px Georgia,serif;display:block;margin-top:10px}
.world-choice small{display:block;margin-top:42px;color:#dbd4c9}
.watch{padding-top:80px}
.media-grid{display:grid;grid-template-columns:1fr 1fr}
.media-card{height:280px;border:1px solid rgba(255,255,255,.10);background:rgba(8,27,32,.56);color:#ded6c8;text-align:left;padding:36px;display:flex;flex-direction:column;justify-content:end;cursor:pointer;backdrop-filter:blur(3px)}
.media-card.music{background:rgba(36,21,47,.56)}
.media-card strong{font:30px Georgia,serif;margin:10px 0}
.scenes{padding-top:85px}
.scene{margin:0;background:rgba(14,13,12,.56);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;backdrop-filter:blur(3px)}
.scene img{display:block;width:100%;height:auto;background:#080808;filter:saturate(.92)}
.scene p{margin:0}
.scene-grid-restored{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:start}
.scene-legacy img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  background:rgba(7,8,9,.78);
}
.scene-legacy div{padding:16px 18px 20px;background:linear-gradient(180deg,rgba(9,11,12,.22),rgba(9,11,12,.52))}
.scene-legacy .emotion-line{
  font-size:16px;
  line-height:1.8;
  font-weight:600;
  color:var(--scene-accent);
  text-wrap:pretty;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  border-left:1px solid rgba(240,235,226,.38);
  padding-left:14px;
}
.scene-legacy-last .emotion-line{color:var(--scene-accent-2);border-left-color:rgba(240,235,226,.38)}
.read{background:rgba(183,191,183,.95);color:#171A18;display:grid;grid-template-columns:1fr 1.15fr;gap:9vw;border-top:1px solid rgba(23,26,24,.18);backdrop-filter:blur(7px)}
.read h2{font-size:clamp(48px,5vw,78px);font-weight:400}
.read h2 i{font-size:.55em}
.edition-grid article{border-top:1px solid rgba(23,26,24,.24);padding:32px 0}
.edition-grid h3{font-size:27px;font-weight:400}
.store-links{display:flex;gap:8px;flex-wrap:wrap}
.store-links a{font:11px Arial,sans-serif;color:#171A18;text-decoration:none;border:1px solid rgba(23,26,24,.36);padding:12px;cursor:pointer;background:rgba(236,239,231,.08)}
.store-links a.pending{opacity:.35;cursor:default}
.social{display:flex;justify-content:space-between;align-items:center;background:rgba(8,10,11,.48);backdrop-filter:blur(4px)}
.social > p{margin:0;color:#ded7ca;font-size:24px;font-weight:400;letter-spacing:.08em;font-family:Georgia,'Noto Serif TC','Songti TC',serif}
.social div{display:flex;gap:25px}
footer{padding:30px 7vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;font:9px Arial,sans-serif;letter-spacing:.14em;color:#a59e93;background:rgba(4,6,7,.88)}
@media(max-width:1200px){
  .scene-grid-restored{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .nav nav{display:none}
  .nav{height:58px}
  .hero-copy{left:7vw;right:7vw}
  .hero h1 span{font-size:56px}
  .section-pad{padding:85px 7vw}
  .section-head{display:block}
  .section-head p{margin-bottom:20px}
  .world{min-height:650px}
  .world-choices,.scene-grid-restored,.read,.media-grid{grid-template-columns:1fr}
  .world-choice{min-height:180px}
  .media-card{height:220px}
  .scene-legacy .emotion-line{font-size:16px}
  .social{display:block}
  .social > p{margin:0;color:#ded7ca;font-size:24px;font-weight:400;letter-spacing:.08em;font-family:Georgia,'Noto Serif TC','Songti TC',serif}
  .social div{margin-top:20px;flex-wrap:wrap}
  footer{display:block;line-height:2}
  .mirror-slide{background-position:center}
  .mirror-slide::before{background-size:contain}
}