@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Noto+Serif+JP:wght@300;400;500&display=swap');

:root{
  --bg:#141615;
  --bg-soft:#1b201f;
  --paper:#dcdfde;
  --muted:#9fa8a6;
  --line:rgba(224,230,228,.16);
  --glass:rgba(21,24,23,.74);
  --serif:"Noto Serif JP",serif;
  --latin:"Cormorant Garamond",serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.age-gate-active{overflow:hidden}
body.age-gate-active main,
body.age-gate-active .site-header,
body.age-gate-active footer{
  filter:blur(6px);
  pointer-events:none;
  user-select:none;
}
.age-gate{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:6vw;
  background:rgba(11,12,11,.92);
  backdrop-filter:blur(2px);
}
.age-gate[hidden]{display:none}
.age-gate-box{
  width:min(480px,100%);
  padding:3rem 2.5rem;
  text-align:center;
  background:#181c1b;
  border:1px solid var(--line);
}
.age-gate-box h2{
  margin:.4em 0 1.6rem;
  font-family:var(--serif);font-weight:300;
  font-size:1.7rem;letter-spacing:.1em;
}
.age-gate-text{
  font-size:.92rem;line-height:2;color:var(--muted);
  margin:0 0 2.4rem;
}
.age-gate-buttons{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
}
.age-gate-buttons button{
  padding:.9rem 1.8rem;
  background:none;
  border:1px solid rgba(224,230,228,.45);
  color:var(--paper);
  font-family:var(--latin);letter-spacing:.15em;font-size:.85rem;
  cursor:pointer;transition:.25s;
}
.age-gate-yes{background:var(--paper);color:#14161a}
.age-gate-yes:hover{opacity:.85}
.age-gate-no:hover{background:rgba(224,230,228,.1)}
.age-gate-note{
  margin:1.8rem 0 0;font-size:.72rem;color:#727b78;letter-spacing:.05em;
}
@media (max-width:520px){
  .age-gate-box{padding:2.4rem 1.6rem}
}
body{
  margin:0;
  color:var(--paper);
  background:
    radial-gradient(circle at 80% 10%, rgba(123,139,136,.08), transparent 33rem),
    linear-gradient(180deg,#131514,#1a1e1d 45%,#111312);
  font-family:var(--serif);
  font-weight:300;
  line-height:2;
  letter-spacing:.04em;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:74px; display:flex; align-items:center; justify-content:space-between;
  padding:0 4vw;
  background:linear-gradient(180deg,rgba(11,12,11,.8),rgba(11,12,11,0));
}
.brand{font-family:var(--latin);font-size:1.5rem;letter-spacing:.09em}
.nav{display:flex;gap:2rem;font-family:var(--latin);font-size:1.05rem}
.nav a{opacity:.72;transition:.25s}
.nav a:hover{opacity:1}
.menu-button{display:none;background:none;border:0;padding:8px}
.menu-button span{display:block;width:25px;height:1px;background:#fff;margin:6px}
.hero{min-height:100svh;position:relative;display:grid;place-items:center;overflow:hidden}
.hero-image{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(17,21,20,.18),rgba(13,14,13,.65)),
    url("../images/hero.jpg") center/cover no-repeat,
    linear-gradient(135deg,#414a48,#131615 60%);
  transform:scale(1.02);
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,11,10,.56),transparent 65%)}
.hero-content{position:relative;z-index:2;width:min(1100px,88vw);padding-top:5vh}
.eyebrow,.section-kicker{
  font-family:var(--latin);text-transform:uppercase;letter-spacing:.35em;
  font-size:.82rem;color:#b2bdba;
}
h1{
  margin:.1em 0 0;
  font-family:var(--latin);font-weight:400;
  font-size:clamp(4rem,10vw,9rem);line-height:.9;letter-spacing:.02em;
}
.jp-title{margin:.8rem 0 3rem;font-size:.8rem;letter-spacing:.35em;color:var(--muted)}
.catch{font-size:clamp(1.15rem,2.5vw,1.65rem);line-height:2.1;letter-spacing:.12em}
.scroll-link{
  display:inline-block;margin-top:3rem;padding-bottom:.3rem;border-bottom:1px solid #8f9b98;
  font-family:var(--latin);font-size:.9rem;letter-spacing:.25em;color:#c9d0ce
}
.section{padding:10rem 6vw;border-top:1px solid var(--line)}
.section-inner{width:min(1160px,100%);margin:auto}
.narrow{width:min(780px,100%)}
.section h2{
  margin:.15em 0 2.2rem;font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,4vw,3.6rem);line-height:1.55;letter-spacing:.08em
}
.story{background:linear-gradient(180deg,#171b1a,#1e2423)}
.story-copy p{margin:0 0 1.7rem}
.characters{background:#141716}
.character-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.character-card{
  min-height:360px;display:grid;grid-template-columns:42% 58%;
  background:#181c1b;overflow:hidden
}
.character-card.protagonist{margin-bottom:1px;grid-template-columns:50% 50%;min-height:430px}
.character-photo{
  min-height:100%;background-position:center;background-size:cover;
  filter:saturate(.55) contrast(.9);
}
.solla{background-image:url("../images/solla.jpg"),linear-gradient(160deg,#5d6563,#252b29)}
.sena{background-image:url("../images/sena.jpg"),linear-gradient(160deg,#616866,#222726)}
.kiichi{background-image:url("../images/kiichi.jpg"),linear-gradient(160deg,#4c5553,#1e2221)}
.natsume{background-image:url("../images/natsume.jpg"),linear-gradient(160deg,#68706e,#262b2a)}
.kuzufu{background-image:url("../images/kuzufu.jpg"),linear-gradient(160deg,#545c5a,#1b211f)}
.character-info{align-self:end;padding:2rem}
.role{font-size:.75rem;color:#a0aba8;letter-spacing:.2em}
.character-info h3{margin:.25rem 0 .9rem;font-size:1.7rem;font-weight:400}
.character-info small{font-family:var(--latin);font-weight:400;color:#929d9a;margin-left:.5em}
.character-info p{font-size:.9rem;color:#bec4c2;line-height:1.9}
.character-info p.age{font-size:.78rem;color:#8b948f;letter-spacing:.05em;margin:.2em 0 .6em}
.system{background:linear-gradient(180deg,#1a201f,#131615)}
.system-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.system-grid div{padding:3rem 2rem;background:#181c1b;min-height:270px}
.system-grid span{font-family:var(--latin);font-size:2rem;color:#74817e}
.system-grid h3{font-family:var(--latin);font-weight:400;font-size:2rem;margin:.5rem 0}
.system-grid p{color:#aeb6b4;font-size:.9rem}
.gallery{background:#131514}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gallery-item{
  aspect-ratio:16/9;border:0;cursor:pointer;
  background-size:cover;background-position:center;
  filter:saturate(.55) brightness(.75);transition:.35s
}
.gallery-item:hover{filter:saturate(.7) brightness(.95);transform:translateY(-2px)}
.g1{background-image:url("../images/gallery01.jpg"),linear-gradient(135deg,#5c6563,#1f2523)}
.g2{background-image:url("../images/gallery02.jpg"),linear-gradient(135deg,#424a48,#202624)}
.g3{background-image:url("../images/gallery03.jpg"),linear-gradient(135deg,#69716f,#282e2c)}
.g4{background-image:url("../images/gallery04.jpg"),linear-gradient(135deg,#49514f,#1b211f)}
.g5{background-image:url("../images/gallery05.jpg"),linear-gradient(135deg,#5a6160,#1f2524)}
.g6{background-image:url("../images/gallery06.jpg"),linear-gradient(135deg,#444d4b,#1e2422)}
.placeholder-note,.small{font-size:.78rem;color:#838e8b;margin-top:1.5rem}
.spec{background:#1a201f}
.spec-list{border-top:1px solid var(--line)}
.spec-list div{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid var(--line);padding:1rem 0}
.spec-list dt{color:#8d9996;font-size:.84rem}
.spec-list dd{margin:0}
.download{text-align:center;min-height:70vh;display:grid;place-items:center;background:linear-gradient(180deg,#141716,#0b0c0b)}
.download-button{
  display:inline-block;margin:2.5rem auto 0;padding:1rem 3rem;
  border:1px solid rgba(224,230,228,.45);
  font-family:var(--latin);letter-spacing:.2em
}
.download-button.is-disabled{opacity:.55;pointer-events:none}
.guideline{background:#101211}
details{border-top:1px solid var(--line);padding:1rem 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer}
details p{color:#a1aaa7;font-size:.9rem;padding:.5rem 0 0}
details p a{color:#d3c9a1;text-decoration:underline;text-underline-offset:.2em}
details p a:hover{color:#e6dcb8}
footer{text-align:center;padding:5rem 1rem;background:#0b0c0b;color:#727b78;font-size:.75rem}
.footer-title{font-family:var(--latin);font-size:1.7rem;color:#abb3b0;margin:0}
.footer-back{
  display:inline-block;margin-top:1rem;font-family:var(--latin);font-size:.85rem;
  letter-spacing:.1em;color:#8b9391;text-decoration:none;transition:color .3s;
}
.footer-back:hover{color:var(--paper)}

.lightbox{
  position:fixed;inset:0;margin:auto;
  width:min(1100px,92vw);max-height:90vh;
  border:0;padding:0;background:#0d0e0d;color:#fff;
  box-shadow:0 25px 80px #000;
}
.lightbox::backdrop{background:rgba(0,0,0,.84)}
.lightbox-image{aspect-ratio:16/9;background:center/cover no-repeat}
.lightbox-close{
  position:absolute;right:0;top:0;z-index:2;border:0;background:rgba(0,0,0,.5);
  color:#fff;font-size:1.6rem;line-height:1;width:44px;height:44px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
@media (max-width:800px){
  .menu-button{display:block;z-index:60}
  .nav{
    position:fixed;inset:0;background:rgba(13,14,13,.97);display:none;
    flex-direction:column;align-items:center;justify-content:center;font-size:1.6rem
  }
  .nav.open{display:flex}
  .hero-content{padding-top:10vh}
  .section{padding:7rem 6vw}
  .character-grid{grid-template-columns:1fr}
  .character-card,.character-card.protagonist{grid-template-columns:42% 58%;min-height:340px}
  .system-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .character-card,.character-card.protagonist{grid-template-columns:1fr;min-height:auto}
  .character-photo{min-height:320px}
  .gallery-grid{grid-template-columns:1fr}
  .spec-list div{grid-template-columns:1fr;gap:.2rem}
}