﻿:root{--bg:#0e0d0d;--surface:#181717;--surface-2:#222020;--text:#f8f4ed;--muted:#aaa39b;--line:#37332f;--accent:#f2ad37;--accent-ink:#211507;--max:1320px;--display:"Songti SC","STSong","Noto Serif SC",serif;--sans:"PingFang SC","Microsoft YaHei",system-ui,sans-serif} body .brand-mark{object-fit:contain;background:transparent} @media(max-width:760px){body .hero-copy h1{font-size:clamp(32px,8.6vw,46px)}} *{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--bg)} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden} body>div{min-height:100vh} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} a,summary{touch-action:manipulation} .site-header{width:min(var(--max),calc(100% - 48px));min-height:88px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:32px;border-bottom:1px solid var(--line);position:relative;z-index:30} .brand-home{display:inline-flex;align-items:center;flex:none} .brand-lockup{display:inline-flex;align-items:center;gap:14px} .brand-mark{width:50px;height:50px;border-radius:15px} .brand-lockup>span{display:grid;gap:1px} .brand-lockup strong{font-family:var(--display);font-size:23px;line-height:1.15;letter-spacing:.03em} .brand-lockup small{font-size:10px;letter-spacing:.24em;color:var(--muted)} .site-header nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:700;color:var(--muted)} .site-header nav a{padding:30px 0 25px;white-space:nowrap;border-bottom:2px solid transparent} .site-header nav a:hover,.site-header nav a:focus-visible{color:var(--text);border-color:var(--accent)} .theater-hero{width:min(var(--max),calc(100% - 48px));min-height:720px;margin:0 auto;padding:72px 0 64px;display:grid;grid-template-columns:minmax(310px,.82fr) minmax(0,1.55fr);align-items:center;gap:64px;position:relative} .hero-copy{position:relative;z-index:2} .eyebrow,.section-tag{display:block;margin-bottom:16px;color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.2em;text-transform:uppercase} .hero-copy h1{margin:0;font-family:var(--display);font-size:clamp(40px,4.6vw,68px);font-weight:600;line-height:1.08;letter-spacing:.01em;text-wrap:balance} .hero-lead{max-width:40em;margin:24px 0 0;color:var(--muted);font-size:16px;line-height:1.95} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .primary-action,.secondary-action{min-height:48px;padding:10px 22px;border:1px solid var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:800;transition:transform .2s ease,background .2s ease,color .2s ease} .primary-action{background:var(--accent);color:var(--accent-ink)} .secondary-action{color:var(--text)} .primary-action:hover,.secondary-action:hover,.primary-action:focus-visible,.secondary-action:focus-visible{transform:translateY(-2px)} .secondary-action:hover,.secondary-action:focus-visible{background:var(--accent);color:var(--accent-ink)} .identity{margin-top:30px;padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:5px;color:var(--muted);font-size:12px} .identity strong{color:var(--text)} .work-group{min-width:0} .hero-works,.guide-works,.catalog-works,.deep-works{display:grid;gap:22px} .poster-card{min-width:0;background:var(--surface);border:1px solid var(--line);overflow:hidden;position:relative} .poster-card figure{margin:0;background:var(--surface-2);position:relative;overflow:hidden} .work-cover{width:100%;height:auto;aspect-ratio:7/10;object-fit:cover} .poster-index{position:absolute;z-index:3;top:12px;left:12px;min-width:34px;padding:5px 8px;background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:900;letter-spacing:.12em;text-align:center} .poster-card figcaption{padding:15px 16px 17px;display:grid;gap:2px;background:var(--surface)} .poster-card figcaption span{color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.08em} .poster-card figcaption strong{font-family:var(--display);font-size:18px;line-height:1.35;font-weight:600} .poster-card figcaption small{color:var(--muted);font-size:11px} .work-copy{padding:20px 20px 22px;border-top:1px solid var(--line)} .work-copy h2{margin:0 0 10px;font-family:var(--display);font-size:22px;line-height:1.35;font-weight:600} .work-copy .summary{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.75} .work-copy dl{margin:0;display:grid;gap:10px;font-size:12px;line-height:1.65} .work-copy dl div{padding-top:9px;border-top:1px solid var(--line)} .work-copy dt{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.08em} .work-copy dd{margin:3px 0 0;color:var(--text)} .hero-works .poster-card{display:grid;grid-template-columns:minmax(180px,.78fr) minmax(210px,1fr);align-items:stretch} .hero-works .poster-card figure{height:100%} .hero-works .work-cover{height:100%;min-height:480px} .hero-works .poster-card figcaption{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,rgb(0 0 0 / 92%));padding-top:54px;color:#fff} .hero-works .work-copy{border-top:0;align-self:center} .guide,.catalog,.deep,.faq,footer{width:min(var(--max),calc(100% - 48px));margin-inline:auto} .guide{padding:80px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.35fr);gap:52px;align-items:start} .guide-copy h2,.catalog h2,.deep h2,.faq h2{margin:0;font-family:var(--display);font-size:clamp(32px,3.7vw,52px);font-weight:600;line-height:1.15;text-wrap:balance} .guide-copy>p,.catalog>header>p{max-width:44em;margin:18px 0 0;color:var(--muted)} .guide ol{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)} .guide li{border-bottom:1px solid var(--line)} .guide li a{padding:12px 0;display:grid;grid-template-columns:34px 92px minmax(0,1fr);gap:10px;align-items:center} .guide li span{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.12em} .guide li strong{font-family:var(--display);font-size:15px} .guide li small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .guide-works{grid-template-columns:repeat(2,minmax(0,1fr))} .catalog{padding:86px 0;border-top:1px solid var(--line)} .catalog>header{max-width:760px;margin-bottom:38px} .catalog-works{grid-template-columns:repeat(3,minmax(0,1fr))} .catalog-works .poster-card,.guide-works .poster-card{display:grid;grid-template-rows:auto 1fr} .deep{padding:82px 0;border-top:1px solid var(--line)} .deep>header{max-width:760px;margin-bottom:34px} .deep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .deep-grid article{min-height:210px;padding:28px;background:var(--surface)} .deep-grid article>span{color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.14em} .deep-grid h3{margin:42px 0 10px;font-family:var(--display);font-size:23px;font-weight:600} .deep-grid p{margin:0;color:var(--muted)} .deep-works{margin-top:30px} .deep-works .poster-card{display:grid;grid-template-columns:minmax(210px,.65fr) 1.35fr} .deep-works .poster-card figure{min-height:430px} .deep-works .work-cover{height:100%} .deep-works .work-copy{align-self:center;border-top:0} .faq{padding:76px 0 92px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(260px,.7fr) 1.35fr;gap:56px} .faq-list{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;font-size:17px;font-weight:800} .faq summary::after{content:"+";position:absolute;right:4px;color:var(--accent);font-size:22px} .faq details[open] summary::after{content:"−"} .faq details p{max-width:52em;margin:0;padding:0 38px 24px 0;color:var(--muted)} footer{padding:44px 0 58px;border-top:1px solid var(--line);display:grid;grid-template-columns:.7fr 1.6fr auto;gap:38px;align-items:start;color:var(--muted);font-size:12px} footer .brand-lockup{color:var(--text)} .footer-copy strong{color:var(--text);font-size:14px} .footer-copy p{margin:8px 0} footer>a{color:var(--accent);font-weight:800} @media(max-width:1020px){.site-header,.theater-hero,.guide,.catalog,.deep,.faq,footer{width:calc(100% - 32px)}.theater-hero{grid-template-columns:1fr 1.2fr;gap:34px}.hero-works .poster-card{grid-template-columns:1fr}.hero-works .work-cover{min-height:360px}.hero-works .work-copy{display:none}.guide{grid-template-columns:1fr}.catalog-works{grid-template-columns:repeat(2,1fr)}} @media(max-width:760px){.site-header{min-height:0;padding:14px 0 10px;display:grid;gap:10px}.brand-mark{width:44px;height:44px}.brand-lockup strong{font-size:20px}.site-header nav{width:100%;gap:22px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}.site-header nav::-webkit-scrollbar{display:none}.site-header nav a{padding:8px 0 10px}.theater-hero{min-height:auto;padding:38px 0 52px;display:block}.hero-copy h1{font-size:clamp(38px,11vw,54px)}.hero-actions{display:grid}.primary-action,.secondary-action{width:100%}.identity{margin-top:24px}.hero-works{margin-top:30px}.hero-works .poster-card{grid-template-columns:minmax(118px,.55fr) 1fr}.hero-works .work-cover{min-height:0;height:100%}.hero-works .work-copy{display:block;padding:16px}.hero-works .work-copy h2{font-size:19px}.hero-works .work-copy dl{display:none}.guide,.catalog,.deep,.faq{padding:58px 0}.guide-copy h2,.catalog h2,.deep h2,.faq h2{font-size:clamp(30px,9vw,42px)}.guide li a{grid-template-columns:30px 76px minmax(0,1fr)}.guide-works,.catalog-works{grid-template-columns:1fr}.guide-works .poster-card,.catalog-works .poster-card,.deep-works .poster-card{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto}.guide-works .poster-card figure,.catalog-works .poster-card figure,.deep-works .poster-card figure{min-height:100%;grid-row:1/3}.guide-works .work-cover,.catalog-works .work-cover,.deep-works .work-cover{height:100%;aspect-ratio:auto}.guide-works figcaption,.catalog-works figcaption,.deep-works figcaption{display:none}.guide-works .work-copy,.catalog-works .work-copy,.deep-works .work-copy{border-top:0;padding:15px}.guide-works .work-copy h2,.catalog-works .work-copy h2,.deep-works .work-copy h2{font-size:18px}.guide-works .work-copy dl,.catalog-works .work-copy dl,.deep-works .work-copy dl{display:none}.deep-grid{grid-template-columns:1fr}.deep-grid article{min-height:0}.deep-grid h3{margin-top:22px}.faq{display:block}.faq-list{margin-top:28px}footer{grid-template-columns:1fr;gap:22px;padding:36px 0 48px}} @media(max-width:420px){.site-header,.theater-hero,.guide,.catalog,.deep,.faq,footer{width:calc(100% - 24px)}.brand-lockup small{letter-spacing:.14em}.hero-works .poster-card{grid-template-columns:104px 1fr}.guide-works .poster-card,.catalog-works .poster-card,.deep-works .poster-card{grid-template-columns:96px 1fr}.work-copy .summary{font-size:12px}.faq summary{font-size:15px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.primary-action,.secondary-action{transition:none}} :root{--bg:#f6efe3;--surface:#fffaf0;--surface-2:#ead8c5;--text:#2a1714;--muted:#7c6962;--line:#cdb9a8;--accent:#a73f4d;--accent-ink:#fffaf1} .folio .site-header--paper-fates{margin-top:20px;background:#fffdf7;padding:0 24px;border:1px solid var(--line);box-shadow:8px 8px 0 #eadcc9}.folio .site-header--paper-fates nav a{padding-block:21px} .folio .hero-actions{display:inline-grid;grid-template-columns:1fr 1fr;transform:rotate(-1deg)}.folio .identity{margin-left:28px;padding:18px 22px;background:#fffaf0;box-shadow:6px 6px 0 #ead8c5} @media(max-width:760px){.folio .folio-pages .theater-hero{display:flex;flex-direction:column}.folio .folio-pages .hero-works{order:-1;margin:0 0 34px}.folio .folio-pages .hero-copy h1{font-size:40px}.folio .hero-actions{display:grid;transform:none}.folio .identity{margin-left:0}} @media(max-width:1020px){.folio .turning-page .catalog,.folio .fate-margin .deep{display:block}.folio .turning-page .catalog-works,.folio .fate-margin .deep-works{margin-top:28px}.folio .folio-pages .theater-hero{grid-template-columns:300px minmax(0,1fr)}} @media(max-width:760px){.folio .site-header--paper-fates{margin-top:10px;padding:10px 12px;box-shadow:4px 4px 0 #eadcc9}} .folio{background:var(--bg)} .folio-pages .theater-hero{grid-template-columns:minmax(310px,.72fr) minmax(0,1.4fr)} .folio-pages .hero-works{grid-template-columns:1fr 1fr;gap:16px;transform:rotate(-1deg)} .folio-pages .hero-works .poster-card{display:block;box-shadow:0 22px 45px rgb(70 42 30 / 16%)} .folio-pages .hero-works .poster-card:nth-child(2){transform:translateY(54px) rotate(3deg)} .folio-pages .hero-works .work-cover{min-height:0} .folio-pages .hero-works .work-copy{display:none} .paper-tab .guide{grid-template-columns:1fr} .paper-tab .guide-copy{max-width:780px} .paper-tab .guide-works{grid-template-columns:1fr 1fr;margin-top:34px} .paper-tab .guide-works .poster-card:nth-child(odd){transform:translateY(30px)} .turning-page .catalog{display:grid;grid-template-columns:.7fr 1.3fr;gap:56px} .turning-page .catalog>header{margin:0} .turning-page .catalog-works{grid-template-columns:1fr} .turning-page .catalog-works .poster-card{display:grid;grid-template-columns:42% 1fr} .turning-page .catalog-works .work-cover{height:100%} .turning-page .catalog-works figcaption{display:none} .turning-page .catalog-works .work-copy{border-top:0;align-self:center} .fate-margin .deep{display:grid;grid-template-columns:.72fr 1.28fr;gap:48px} .fate-margin .deep-grid{grid-template-columns:1fr} .fate-margin .deep-works{margin-top:0} @media(max-width:760px){.folio-pages .hero-works{transform:none}.folio-pages .hero-works .poster-card:nth-child(2),.paper-tab .guide-works .poster-card:nth-child(odd){transform:none}.folio-pages .hero-works{grid-template-columns:1fr 1fr}.folio-pages .hero-works .poster-card{display:block}.folio-pages .hero-works figcaption{position:static;background:var(--surface);color:var(--text);padding:12px}.folio-pages .hero-works .work-copy{display:none}.paper-tab .guide-works{grid-template-columns:1fr}.turning-page .catalog,.fate-margin .deep{display:block}.turning-page .catalog-works{margin-top:28px}.turning-page .catalog-works .poster-card{grid-template-columns:104px 1fr}.fate-margin .deep-works{margin-top:28px}}
