:root{
  --ink:#0a0b0d;
  --ink-2:#101217;
  --ink-3:#171a21;
  --paper:#ece7dd;
  --paper-dim:#a9a49a;
  --gold:#c7a46a;
  --line:rgba(236,231,221,.14);
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--paper);font-family:var(--sans);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 600px at 78% -10%,rgba(199,164,106,.10),transparent 60%),radial-gradient(900px 500px at 8% 20%,rgba(46,111,106,.10),transparent 65%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.08em;font-size:12px;text-transform:uppercase;color:var(--paper-dim)}

/* header */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(10,11,13,.72);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:baseline;gap:12px}
.brand b{font-family:var(--serif);font-size:22px;letter-spacing:.22em;font-weight:600}
.brand span{font-size:11px;color:var(--paper-dim);letter-spacing:.18em}
.nav-links{display:flex;gap:28px;font-size:13px;color:var(--paper-dim)}
.nav-links a:hover{color:var(--paper)}
.nav-cta{border:1px solid var(--line);padding:8px 16px;font-size:12px;letter-spacing:.12em;color:var(--paper)}
.nav-cta:hover{border-color:var(--gold);color:var(--gold)}

/* hero */
.hero{position:relative;padding:120px 0 96px;border-bottom:1px solid var(--line);overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:end}
.kicker{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.kicker i{display:block;width:44px;height:1px;background:var(--gold)}
.hero h1{font-family:var(--serif);font-size:clamp(64px,10vw,132px);line-height:.92;letter-spacing:.06em;font-weight:600}
.hero h1 em{display:block;font-style:normal;font-size:.32em;letter-spacing:.3em;color:var(--gold);margin-top:18px}
.hero p{color:#c8c3b8;max-width:38ch;margin-top:28px;font-size:15px}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;font-size:13px;letter-spacing:.1em;border:1px solid var(--line);transition:.25s}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn.primary{background:var(--gold);color:#1a1409;border-color:var(--gold)}
.btn.primary:hover{background:#d8b47a;color:#1a1409}

/* slate panel in hero */
.slate-panel{border:1px solid var(--line);background:linear-gradient(180deg,rgba(23,26,33,.9),rgba(16,18,23,.7));padding:26px}
.slate-panel h3{font-size:12px;letter-spacing:.2em;color:var(--paper-dim);font-weight:400;margin-bottom:18px}
.slate-row{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;border-top:1px solid var(--line);font-size:13px}
.slate-row:first-of-type{border-top:none}
.slate-row b{font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.08em}
.slate-row span{color:var(--paper-dim);font-size:12px}

/* section */
section{padding:96px 0;border-bottom:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:32px;margin-bottom:52px;flex-wrap:wrap}
.sec-head h2{font-family:var(--serif);font-size:clamp(30px,4vw,44px);font-weight:600;letter-spacing:.04em}
.sec-head p{color:var(--paper-dim);font-size:14px;max-width:34ch;text-align:right}

/* works */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.work{position:relative;border:1px solid var(--line);overflow:hidden;background:var(--ink-2);transition:.35s}
.work:hover{transform:translateY(-4px);border-color:rgba(199,164,106,.5)}
.poster{aspect-ratio:3/4;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:22px}
.poster .num{font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:rgba(236,231,221,.65)}
.poster .genre{font-family:var(--serif);font-size:clamp(26px,3.4vw,40px);line-height:1.1;letter-spacing:.12em;font-weight:600}
.poster .en{font-family:var(--serif);font-size:12px;letter-spacing:.28em;color:rgba(236,231,221,.55);margin-top:12px}
.poster::before{content:"";position:absolute;inset:0;opacity:.85;z-index:-1}
.work.a .poster::before{background:linear-gradient(155deg,#1b2b30 0%,#0d1418 55%,#080a0c 100%)}
.work.b .poster::before{background:linear-gradient(155deg,#3a241d 0%,#1a1210 55%,#0a0807 100%)}
.work.c .poster::before{background:linear-gradient(155deg,#232a3a 0%,#121620 55%,#080a0d 100%)}
.poster .status{font-size:11px;letter-spacing:.16em;color:var(--gold);border:1px solid rgba(199,164,106,.4);padding:4px 9px;align-self:flex-start}
.work-meta{padding:20px 22px 24px;border-top:1px solid var(--line)}
.work-meta h3{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:.06em}
.work-meta p{color:var(--paper-dim);font-size:13px;margin-top:8px}
.work-meta .row{display:flex;justify-content:space-between;margin-top:16px;font-size:12px;color:var(--paper-dim)}

/* principle */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.principle{border-top:1px solid var(--line);padding-top:22px}
.principle h3{font-family:var(--serif);font-size:19px;letter-spacing:.06em;margin-bottom:12px;font-weight:600}
.principle p{color:var(--paper-dim);font-size:14px}

/* pipeline */
.pipeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.step{padding:26px 24px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.012)}
.step .mono{color:var(--gold)}
.step h4{font-family:var(--serif);font-size:17px;margin:14px 0 8px;letter-spacing:.05em;font-weight:600}
.step p{font-size:13px;color:var(--paper-dim)}

/* note strip */
.notice{border:1px solid var(--line);border-left:2px solid var(--gold);padding:20px 24px;color:var(--paper-dim);font-size:13px;margin-top:40px}

/* footer */
footer{padding:64px 0 44px;color:var(--paper-dim);font-size:12px}
.foot-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:36px}
.foot-brand{font-family:var(--serif);font-size:26px;letter-spacing:.24em;color:var(--paper)}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;line-height:1.9}

/* work detail page */
.work-hero{padding:100px 0 72px;border-bottom:1px solid var(--line)}
.work-hero .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.work-poster{aspect-ratio:3/4;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;padding:28px;position:relative;overflow:hidden}
.work-poster::before{content:"";position:absolute;inset:0;z-index:-1}
.work-poster.a::before{background:linear-gradient(155deg,#1b2b30,#0d1418 55%,#080a0c)}
.work-poster.b::before{background:linear-gradient(155deg,#3a241d,#1a1210 55%,#0a0807)}
.work-poster.c::before{background:linear-gradient(155deg,#232a3a,#121620 55%,#080a0d)}
.work-hero h1{font-family:var(--serif);font-size:clamp(34px,5vw,58px);line-height:1.1;letter-spacing:.06em;font-weight:600}
.work-hero .lede{color:#c8c3b8;margin-top:22px;font-size:15px;max-width:46ch}
.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin-top:34px;font-size:13px}
.meta-grid div{border-top:1px solid var(--line);padding-top:10px}
.meta-grid dt{color:var(--paper-dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.meta-grid dd{margin-top:4px;font-family:var(--serif);font-size:15px}
.episodes{border-top:1px solid var(--line)}
.ep{display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.ep .n{font-family:var(--serif);color:var(--paper-dim);font-size:13px;letter-spacing:.1em}
.ep h4{font-size:15px;font-weight:500;color:var(--paper)}
.ep span{font-size:12px;color:var(--paper-dim)}
.back{display:inline-block;margin-bottom:26px;font-size:12px;letter-spacing:.16em;color:var(--paper-dim)}
.back:hover{color:var(--gold)}

@media (max-width:900px){
  .hero{padding:80px 0 64px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .works{grid-template-columns:1fr}
  .principles{grid-template-columns:1fr;gap:28px}
  .pipeline{grid-template-columns:1fr 1fr}
  .work-hero .grid{grid-template-columns:1fr;gap:32px}
  .nav-links{display:none}
  .sec-head p{text-align:left}
  section{padding:64px 0}
}
@media (max-width:520px){
  .pipeline{grid-template-columns:1fr}
  .meta-grid{grid-template-columns:1fr}
}

/* ---------- English-first typography ---------- */
body.en{
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}
body.en .hero h1{letter-spacing:.02em}
body.en .hero h1 em{letter-spacing:.34em;font-size:.24em}
body.en .poster .genre{font-size:clamp(24px,2.9vw,34px);letter-spacing:.02em;line-height:1.14}
body.en .work-hero h1{letter-spacing:.01em}
body.en .sec-head h2{letter-spacing:.01em}
.lang{display:flex;gap:10px;font-size:11px;letter-spacing:.14em;color:var(--paper-dim);margin-left:18px}
.lang a.on{color:var(--gold)}
.lang a:hover{color:var(--paper)}
.nav-right{display:flex;align-items:center}
.mono-en{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-dim)}

/* poster motif */
.poster, .work-poster{isolation:isolate}
.ghost{position:absolute;right:-8px;top:9%;font-family:var(--serif);font-size:clamp(88px,13vw,132px);line-height:.8;color:rgba(236,231,221,.055);letter-spacing:-.03em;pointer-events:none}
.hair{position:absolute;left:22px;right:22px;top:56%;height:1px;background:linear-gradient(90deg,rgba(236,231,221,.22),transparent)}

/* mobile header + type fit */
@media (max-width:760px){
  .wrap{width:calc(100% - 32px)}
  .nav{height:60px;gap:8px}
  .brand{gap:0}
  .brand b{font-size:19px;letter-spacing:.14em}
  .brand span{display:none}
  .nav-right{gap:10px}
  .lang{gap:8px;margin-left:0;font-size:10px;letter-spacing:.1em;white-space:nowrap}
  .nav-cta{padding:7px 11px;font-size:10.5px;letter-spacing:.04em;white-space:nowrap}
  .hero h1{font-size:clamp(46px,13vw,76px);letter-spacing:.03em}
  body.en .hero h1 em{font-size:.24em;letter-spacing:.2em}
  .hero p{font-size:14.5px}
  .slate-panel{padding:20px}
  .poster .genre{font-size:26px}
  .ghost{font-size:84px;right:-4px}
}

@media (max-width:760px){
  .nav{height:auto;flex-wrap:wrap;padding:10px 0}
  .nav-links{display:flex;order:3;width:100%;gap:20px;font-size:11px;letter-spacing:.06em;padding:9px 0 4px;margin-top:6px;border-top:1px solid var(--line);color:var(--paper-dim)}
}