/* A / CINEMATIC. Tokens → base → layout → components → motion → responsive. */
:root{color-scheme:dark;--ink:#080807;--surface:#121310;--ivory:#f1ebdd;--muted:#b6b1a6;--gold:#b69a65;--line:#4c473d;--serif:"Times New Roman","Baskerville",serif;--mincho:"Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif;--sans:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;--text-body:18px;--text-ui:18px;--text-meta:16px;--gutter:clamp(24px,4.5vw,80px);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-padding-top:112px;background:var(--ink)}body{margin:0;background:var(--ink);color:var(--ivory);font-family:var(--sans);font-size:var(--text-body);line-height:1.8;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:400}a,button{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button[hidden]{display:none}::selection{background:#816638;color:#fff}a:focus-visible,button:focus-visible{outline:2px solid var(--ivory);outline-offset:6px}a:focus-visible{background:#24221d}section[id]{scroll-margin-top:8px}.skip-link{position:fixed;left:24px;top:-100px;z-index:100;padding:12px 20px;background:var(--ivory);color:var(--ink)}.skip-link:focus{top:12px;background:var(--ivory);color:var(--ink)}.eyebrow{font-size:var(--text-meta);letter-spacing:.16em;color:var(--gold);line-height:1.5}.reading-progress{position:fixed;inset:0 0 auto;height:2px;background:var(--gold);z-index:40;transform:scaleX(0);transform-origin:left;pointer-events:none}
.site-header{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:32px;min-height:82px;margin:0 var(--gutter);border-bottom:1px solid #ada49466}.wordmark{font-family:var(--serif);font-size:var(--text-ui);letter-spacing:.16em;line-height:1.5;white-space:nowrap}.site-header>.wordmark{font-size:clamp(20px,1vw,24px);display:flex;align-items:center;min-height:48px;margin-right:auto}.main-nav{display:flex;gap:28px;align-items:center}.main-nav a{position:relative;display:flex;align-items:center;min-height:48px;font-size:clamp(18px,.9vw,22px);letter-spacing:.04em;white-space:nowrap}.main-nav a:after{content:"";position:absolute;bottom:8px;left:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left}.motion-toggle{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;border:1px solid var(--line);background:#0a0a08b8;font-size:var(--text-ui);white-space:nowrap}.motion-icon{display:flex;align-items:center;gap:2px;height:13px}.motion-icon i{display:block;width:1px;height:8px;background:var(--gold)}.motion-icon i:nth-child(2){height:13px}.motion-toggle[aria-pressed=true] .motion-icon i{height:5px}
.hero{position:relative;isolation:isolate;min-height:800px;height:auto;overflow:hidden;border-bottom:1px solid #60543c70}.hero-scene{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.hero-art{position:absolute;inset:-5%;background:url('assets/hero.webp') center 55%/cover no-repeat;transform:translate3d(var(--pointer-x,0px),calc(var(--scroll-shift,0px) + var(--pointer-y,0px)),0) scale(1.045);will-change:transform}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#050604a8 0%,#06070540 42%,transparent 73%),linear-gradient(0deg,#080807 0%,transparent 24%,transparent 87%,#08080770)}.hero-content{position:relative;max-width:920px;padding:142px 0 126px var(--gutter);z-index:2}.hero-eyebrow{margin-bottom:26px;color:#c3bba9;font-size:var(--text-meta);letter-spacing:.16em}h1{font-family:var(--serif);font-size:clamp(90px,10.6vw,168px);line-height:.81;letter-spacing:-.064em;width:max-content;max-width:100%}.title-line{display:block;overflow:hidden;padding:.06em .08em .055em 0;margin-bottom:-.05em}.title-line>span{display:block;transform-origin:left bottom}.hero-copy{margin-top:32px}.gold-rule{display:block;width:60px;height:2px;background:var(--gold);margin-bottom:20px}.hero-tagline{font-family:var(--mincho);font-size:clamp(25px,2.5vw,38px);letter-spacing:.1em;line-height:1.5}.hero-description{margin-top:12px;color:#d9d3c7;font-family:var(--mincho);font-size:var(--text-body);letter-spacing:.04em}.explore-link{display:flex;align-items:center;justify-content:space-between;gap:28px;width:190px;min-height:48px;margin-top:28px;font-size:var(--text-ui);letter-spacing:.06em;border-bottom:1px solid #c4b082;position:relative}.arrow-down{font-size:23px;font-family:var(--serif)}.hero-aside{position:absolute;right:var(--gutter);top:132px;font-family:var(--mincho);font-size:var(--text-body);letter-spacing:.04em;line-height:1.9;color:#d0cbbd}.hero-index{position:absolute;right:var(--gutter);bottom:137px;color:#c9c3b5;font-size:var(--text-ui);letter-spacing:.08em;line-height:1.9}.hero-bottom{position:absolute;bottom:30px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:24px;color:#b4ab98;font-size:var(--text-ui);letter-spacing:.08em;line-height:1.6}.scroll-cue{display:flex;align-items:center;gap:15px;white-space:nowrap}.scroll-cue i{position:relative;width:1px;height:40px;background:#81705277;overflow:hidden}.scroll-cue i:after{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(-100%)}
.fissure-glow{position:absolute;left:63%;top:9%;width:10%;height:71%;background:radial-gradient(ellipse,#d8a8552e 0%,#d7a43d0d 38%,transparent 68%);mix-blend-mode:screen;transform:rotate(7deg);opacity:.5}.mist{position:absolute;left:-15%;width:130%;height:20%;background:radial-gradient(ellipse,#d9d0ad16 0%,#b7c0ad09 40%,transparent 68%);mix-blend-mode:screen;opacity:.7}.mist-back{bottom:15%;transform:rotate(-5deg)}.mist-front{bottom:2%;height:13%;opacity:.55}
.section-shell{padding:88px var(--gutter) 90px;max-width:1800px;margin:auto}.section-heading{text-align:center;margin-bottom:46px}.section-heading h2{font-family:var(--mincho);font-size:clamp(24px,2.1vw,34px);line-height:1.65;letter-spacing:.1em;margin-top:16px}.section-heading h2 span{display:inline-block}.section-description{font-size:var(--text-body);letter-spacing:.04em;color:var(--muted);margin-top:14px}.worlds{position:relative;background:radial-gradient(ellipse at 50% 10%,#20231d38,transparent 65%)}.world-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.world-card{position:relative;min-width:0;--world-color:#b69a65}.world-window{position:relative;aspect-ratio: .64;overflow:hidden;background:#11130f}.world-art{position:absolute;inset:0;background-image:url('assets/worlds.webp');background-size:500% 100%;background-position:var(--panel) center;transform:scale(1.005)}.world-window:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#00000005 45%,#080807d9 100%);pointer-events:none}.world-light{position:absolute;inset:0;background:radial-gradient(ellipse at var(--card-x,50%) var(--card-y,30%),#e9deb422,transparent 68%);opacity:0;mix-blend-mode:screen}.world-caption{position:relative;margin-top:-31px;padding:0 9px;z-index:2}.world-caption h3{font-family:var(--serif);font-size:clamp(24px,2.05vw,36px);line-height:1.15;letter-spacing:-.035em;color:#f6f2e8;white-space:normal}.world-caption p{margin-top:14px;font-family:var(--mincho);font-size:var(--text-body);letter-spacing:.02em;color:#c7c3b9;line-height:1.8}.world-card:after{content:"";position:absolute;left:9px;right:9px;bottom:-22px;height:1px;background:var(--world-color);transform:scaleX(0);transform-origin:left}.world-blood{--world-color:#99b0bd}.world-dark{--world-color:#b2a696}.world-steel{--world-color:#a3b3b6}.world-sekiro{--world-color:#b77663}
.categories{border-top:1px solid #70634850;background:linear-gradient(180deg,#18191438,transparent 65%);padding-top:74px}.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.category-card{position:relative;isolation:isolate;min-height:460px;overflow:hidden;border:1px solid #5a524333;background:#14130f;display:flex;align-items:flex-end}.material-art{position:absolute;inset:0;z-index:-2;background:url('assets/materials.webp') var(--panel) center/400% 100% no-repeat;transform:scale(1.005)}.category-card:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#080807 0%,#080807ed 21%,#08080766 46%,#08080700 76%)}.category-copy{padding:30px 22px 28px}.category-en{font-family:var(--serif);font-size:clamp(23px,2vw,32px);line-height:1.15;letter-spacing:.015em}.category-copy h3{font-family:var(--mincho);font-size:var(--text-body);letter-spacing:.04em;line-height:1.6;margin-top:7px}.category-copy>p:last-child{font-family:var(--mincho);font-size:var(--text-body);color:#c2bdb1;line-height:1.9;margin-top:20px}.about{padding-top:64px;padding-bottom:80px;display:grid;grid-template-columns:1fr 1fr;gap:10%;border-top:1px solid #70634850}.about-title h2{font-family:var(--mincho);font-size:clamp(30px,3.1vw,46px);line-height:1.65;letter-spacing:.1em;margin-top:22px}.about-copy{max-width:480px;color:#c3beb3;font-size:var(--text-body);line-height:1.9}.about-copy>p:first-child{font-family:var(--mincho);font-size:20px;color:var(--ivory);margin-bottom:20px;line-height:1.8}
.site-footer{position:relative;isolation:isolate;padding:72px var(--gutter) 28px;overflow:hidden;border-top:1px solid #75684e55}.footer-landscape{position:absolute;inset:-50px 0;z-index:-2;background:url('assets/hero.webp') center 92%/cover no-repeat;transform:translateY(var(--scroll-shift,0px));opacity:.38}.site-footer:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#080807 10%,#0808079c 70%,#08080755)}.footer-top{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:42px}.footer-top .wordmark{font-size:var(--text-ui)}.footer-top .wordmark span{display:block;font-family:var(--sans);font-size:var(--text-meta);letter-spacing:.12em;color:var(--gold);margin-top:8px}.back-top{font-size:var(--text-ui);display:flex;gap:25px;align-items:center;min-height:44px;border-bottom:1px solid var(--line)}.back-top span{font-size:22px}.legal{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;color:#b6b1a6;font-size:var(--text-ui);line-height:1.9;max-width:1500px}.preview-note{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #625b484d;margin-top:35px;padding-top:22px;font-size:var(--text-meta);line-height:1.8;color:#b6b1a6}.preview-note>span:first-child{letter-spacing:.08em;white-space:nowrap}
/* Legibility roles: high-priority text stays readable over every hero frame. */
.site-header{background:#080807e8;box-shadow:0 12px 32px #08080780}
.hero-aside{max-width:13em;padding:12px 16px;background:#080807db;color:var(--ivory);font-size:clamp(18px,1.5vw,21px);line-height:1.7}
.hero-index{padding:10px 14px;background:#080807db;color:var(--ivory);font-size:var(--text-ui);line-height:1.65}
.hero-bottom{color:var(--ivory);font-size:var(--text-ui)}
.footer-top .wordmark,.legal{font-size:var(--text-ui)}
.legal{line-height:1.8}
/* All content starts visible. Motion is progressive enhancement, never a gate. */
html[data-motion=on]{scroll-behavior:smooth}html[data-motion=on] .mist-back{animation:mist-drift 19s ease-in-out infinite alternate}html[data-motion=on] .mist-front{animation:mist-drift 14s ease-in-out -8s infinite alternate-reverse}html[data-motion=on] .fissure-glow{animation:light-breath 7s ease-in-out infinite alternate}html[data-motion=on] .scroll-cue i:after{animation:scroll-line 2.8s var(--ease) infinite}html[data-motion=on] .motion-icon i{animation:equalize 1.6s ease-in-out infinite alternate}html[data-motion=on] .motion-icon i:nth-child(2){animation-delay:-.6s}html[data-motion=on] .motion-icon i:nth-child(3){animation-delay:-1.1s}html[data-motion=on] :is(.world-art,.material-art){transition:transform 1.5s var(--ease),filter 1.2s var(--ease)}html[data-motion=on] :is(.world-light,.world-card:after,.main-nav a:after){transition:opacity .7s,transform .65s var(--ease)}html[data-motion=on] .explore-link .arrow-down{transition:transform .4s var(--ease)}
@keyframes mist-drift{from{transform:translateX(-3%) translateY(10%) scale(1)}to{transform:translateX(7%) translateY(-15%) scale(1.15)}}@keyframes light-breath{from{opacity:.2;transform:rotate(7deg) scaleX(.7)}to{opacity:.85;transform:rotate(7deg) scaleX(1.25)}}@keyframes scroll-line{0%{transform:translateY(-100%)}55%,100%{transform:translateY(110%)}}@keyframes equalize{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
@media(hover:hover) and (pointer:fine){.main-nav a:hover:after{transform:scaleX(1)}html[data-motion=on] .world-card:hover .world-art{transform:scale(1.075);filter:brightness(1.15)}.world-card:hover .world-light{opacity:1}.world-card:hover:after{transform:scaleX(1)}html[data-motion=on] .category-card:hover .material-art{transform:scale(1.055)}html[data-motion=on] .explore-link:hover .arrow-down{transform:translateY(5px)}.motion-toggle:hover{border-color:var(--gold);background:#242017}.back-top:hover{border-color:var(--gold)}}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important}html[data-motion=off] [data-parallax]{--scroll-shift:0px!important;--pointer-x:0px!important;--pointer-y:0px!important}html[data-motion=off] .world-art,html[data-motion=off] .material-art{transform:none!important}html[data-motion=off] .world-light{display:none}
@media(min-width:1650px){.hero{height:980px;min-height:900px}.hero-content{padding-top:164px}.hero-aside{top:164px}.category-card{min-height:540px}}
@media(max-width:1150px){.site-header{gap:20px}.main-nav{gap:19px}.motion-toggle{padding:0 8px}.world-grid{gap:10px}.world-caption{padding:0 3px}.world-caption h3{font-size:clamp(20px,2.2vw,26px)}.category-copy{padding:24px 16px}.category-en{font-size:23px}.category-card{min-height:410px}.category-copy h3{font-size:var(--text-body)}.hero{min-height:770px}.hero-content{padding-top:153px}.hero-copy{margin-top:34px}}
@media(max-width:800px){html{scroll-padding-top:25px}.site-header{flex-wrap:wrap;gap:0 20px;min-height:106px;padding:10px 0 7px}.site-header>.wordmark{min-height:44px}.motion-toggle{order:2;min-height:44px}.main-nav{order:3;flex-basis:100%;justify-content:space-between;gap:10px}.main-nav a{min-height:44px}.hero{min-height:790px;height:94svh}.hero-content{padding-top:162px}.hero-art{inset:-2% -23%;background-position:56% center}.hero-shade{background:linear-gradient(90deg,#05060494,transparent 90%),linear-gradient(0deg,#080807 1%,transparent 40%,#08080744)}h1{font-size:clamp(100px,14vw,130px)}.hero-tagline{font-size:28px}.hero-aside{display:none}.hero-index{display:none}.hero-bottom>span:first-child{max-width:100%}.section-shell{padding-top:64px;padding-bottom:65px}.section-heading{margin-bottom:34px}.section-heading h2{font-size:25px;letter-spacing:.1em}.world-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:35px 14px}.world-card{grid-column:span 2}.world-card:nth-child(4){grid-column:2 / span 2}.world-card:nth-child(5){grid-column:4 / span 2}.world-window{aspect-ratio:.7}.world-caption{padding:0 6px}.world-caption h3{font-size:clamp(21px,3vw,29px)}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.category-card{min-height:440px}.category-en{font-size:28px}.category-copy{padding:26px}.category-copy h3{font-size:var(--text-body)}.about{gap:7%}.about-copy>p:first-child{font-size:var(--text-body)}.legal{grid-template-columns:1fr;gap:12px;max-width:650px}.preview-note{flex-direction:column;gap:10px}}
@media(max-width:520px){:root{--gutter:22px}.wordmark{letter-spacing:.14em}.site-header{gap:0 10px}.site-header>.wordmark{letter-spacing:.1em}.motion-toggle{gap:6px;padding:0 7px}.main-nav a{letter-spacing:.02em}.hero{height:790px;min-height:790px}.hero-content{padding-top:160px;padding-bottom:116px}.hero-eyebrow{letter-spacing:.12em;margin-bottom:25px}h1{font-size:clamp(74px,16.5vw,87px);letter-spacing:-.062em;line-height:.88}.title-line{padding-bottom:.075em}.hero-art{inset:0 -59% 0 -18%;background-position:90% center;transform:scale(1.025)}.hero-shade{background:linear-gradient(90deg,#05060484 0%,#05060442 50%,#05060415),linear-gradient(0deg,#080807 3%,#08080750 23%,transparent 48%,#08080740 90%)}.hero-copy{margin-top:40px}.gold-rule{width:42px;margin-bottom:20px}.hero-tagline{font-size:23px;letter-spacing:.08em}.hero-description{margin-top:13px}.explore-link{margin-top:27px;width:172px}.hero-bottom{bottom:24px;gap:16px}.scroll-cue{gap:10px}.fissure-glow{left:66%;top:11%;height:66%}.section-heading .eyebrow{letter-spacing:.16em}.section-heading h2{font-size:22px;line-height:1.85;letter-spacing:.06em}.world-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 12px}.world-card,.world-card:nth-child(4),.world-card:nth-child(5){grid-column:auto}.world-card:first-child{grid-column:1/-1}.world-card:first-child .world-window{aspect-ratio:1.13}.world-card:first-child .world-art{background-size:500% 205%;background-position:0% 39%}.world-card:first-child .world-caption h3{font-size:31px}.world-card:first-child .world-caption{margin-top:-38px}.world-caption{padding:0 2px;margin-top:-22px}.world-caption h3{font-size:20px;line-height:1.2;letter-spacing:-.04em;white-space:normal}.world-caption p{margin-top:8px;letter-spacing:0}.world-window{aspect-ratio:.65}.world-steel h3{font-size:18px;white-space:normal}.categories .section-heading h2{font-size:22px;letter-spacing:.06em}.category-grid{gap:15px}.category-card{min-height:375px}.category-en{font-size:22px;line-height:1.15;overflow-wrap:normal}.category-copy{padding:22px 12px}.category-copy h3{font-size:var(--text-body);letter-spacing:0}.category-copy>p:last-child{margin-top:15px}.category-copy>p:last-child br{display:none}.category-card:last-child .category-en{font-size:20px}.category-card:after{background:linear-gradient(0deg,#080807 0%,#080807ed 29%,#08080766 53%,#08080700 85%)}.about{grid-template-columns:1fr;gap:28px}.about-title h2{font-size:31px;margin-top:17px}.about-copy{max-width:36em}.about-copy>p:first-child{font-size:18px}.footer-top{align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:28px}.site-footer{padding-top:47px}.footer-top .wordmark{font-size:var(--text-ui)}.back-top{align-self:flex-end}.section-shell{padding-top:56px;padding-bottom:56px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}[data-parallax]{--scroll-shift:0px!important;--pointer-x:0px!important;--pointer-y:0px!important}.world-art,.material-art{transform:none!important}.world-light{display:none}}
/* Common entry actions for published worlds and the four Form cards. */
a.world-card{display:block;cursor:pointer}
.world-entry,.world-pending{display:inline-flex;align-items:center;gap:18px;min-height:44px;margin-top:9px;font-size:var(--text-ui);line-height:1.5;letter-spacing:.02em}
.world-entry{color:var(--ivory);border-bottom:1px solid var(--gold)}
.world-entry span{color:var(--gold);font-size:var(--text-body)}
.world-pending{color:var(--muted)}
.category-entry{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:17px;border-bottom:1px solid var(--gold);color:var(--ivory);font-size:var(--text-ui);line-height:1.5;letter-spacing:.02em}
.category-entry span{color:var(--gold);font-size:var(--text-body)}
@media(hover:hover) and (pointer:fine){html[data-motion=on] .world-card:not([href]):hover .world-art{transform:scale(1.005);filter:none}.world-card:not([href]):hover .world-light{opacity:0}.world-card:not([href]):hover:after{transform:scaleX(0)}}
@media(max-width:520px){
  .hero-bottom>span:first-child{display:none}
  .world-caption h3,.world-steel h3{font-size:22px}
  .category-card:last-child .category-en{font-size:22px}
  .category-entry{display:flex;justify-content:space-between;gap:6px;width:100%;white-space:normal}
}
@media(max-width:440px){
  .category-grid{grid-template-columns:1fr;gap:18px}
  .category-card{min-height:390px}
  .category-copy{padding:26px}
  .category-en,.category-card:last-child .category-en{font-size:28px}
}
@media(max-width:360px){h1{font-size:clamp(62px,18.3vw,66px)}}
@media(max-width:1000px){.site-header{flex-wrap:wrap;gap:0 20px;min-height:106px;padding:10px 0 7px}.site-header>.wordmark{min-height:44px}.motion-toggle{order:2}.main-nav{order:3;flex-basis:100%;justify-content:space-between;gap:10px;flex-wrap:wrap}.main-nav a{min-height:44px}}
/* Keep enlarged labels readable without adding an empty row for motion control. */
@media(max-width:520px){
  .site-header>.wordmark{flex-basis:100%}
  .site-header .main-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:4px 10px}
  .site-header .main-nav a{white-space:normal;text-align:center;line-height:1.5}
  .site-header>.motion-toggle{position:absolute;right:0;bottom:7px}
}