:root {
  color-scheme: dark;
  --ink: #090909;
  --paper: #e9e3d6;
  --paper-dim: #a7a092;
  --red: #a20d1b;
  --line: rgba(233, 227, 214, .18);
  --serif: "Noto Serif JP", serif;
  --sans: "Inter", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
}
body.is-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { background: var(--red); color: #fff; }

.noise {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .07;
  background-image: repeating-radial-gradient(circle at 20% 30%,rgba(255,255,255,.6) 0 1px,transparent 1px 3px);
  background-size: 5px 5px; mix-blend-mode: soft-light;
}
.cursor-halo {
  position: fixed; z-index: 0; width: 34rem; height: 34rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(162,13,27,.08), transparent 66%);
  transform: translate(-50%, -50%); pointer-events: none; transition: opacity .3s;
}

.opening {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: #050505; transition: clip-path 1.2s cubic-bezier(.8,0,.15,1), visibility 1.2s;
  clip-path: inset(0);
}
.opening.is-gone { clip-path: inset(0 0 100% 0); visibility: hidden; }
.opening-skip { position: absolute; top: 1.8rem; right: 2rem; border: 0; background: none; font: 500 .72rem var(--sans); letter-spacing: .2em; cursor: pointer; opacity: .6; }
.opening-mark { position: absolute; width: 4.5rem; height: 5.5rem; opacity: 0; animation: markIn .8s .25s forwards; }
.opening-mark__page { position: absolute; inset: 0; border: 1px solid var(--paper-dim); transform: rotate(-4deg); }
.opening-mark__tear { position: absolute; left: 48%; top: -.3rem; width: 2px; height: 6rem; background: var(--red); transform: rotate(15deg) scaleY(0); transform-origin: top; animation: tear 1s 1s forwards; box-shadow: 0 0 14px var(--red); }
.opening-line { position: absolute; margin: 0; font-size: clamp(.85rem, 2vw, 1.15rem); letter-spacing: .18em; opacity: 0; }
.opening-line--1 { animation: lineReveal 1.2s 1.7s both, lineOut .7s 3.3s forwards; }
.opening-line--2 { animation: lineReveal 1.2s 3.8s both, lineOut .7s 5.4s forwards; }
.opening-title { margin: 0; font: 300 clamp(2.5rem, 10vw, 8rem) var(--sans); letter-spacing: .26em; text-indent: .26em; opacity: 0; animation: titleReveal 1.5s 5.9s both; }
@keyframes markIn { to { opacity: .65; } }
@keyframes tear { to { transform: rotate(15deg) scaleY(1); } }
@keyframes lineReveal { from { opacity:0; transform: translateY(1rem); filter: blur(8px); } to { opacity:1; transform:none; filter:none; } }
@keyframes lineOut { to { opacity:0; letter-spacing:.5em; } }
@keyframes titleReveal { from { opacity:0; filter:blur(10px); letter-spacing:.5em; } to { opacity:1; filter:none; letter-spacing:.26em; } }

.site-header { position: fixed; top: 0; left: 0; z-index: 50; width: 100%; display: flex; justify-content: space-between; align-items: flex-start; padding: 1.6rem 2rem; mix-blend-mode: difference; }
.wordmark { display: grid; line-height: 1; }
.wordmark__main { font: 500 1rem var(--sans); letter-spacing: .18em; }
.wordmark__sub { margin-top: .4rem; font: 300 .55rem var(--sans); text-transform: uppercase; letter-spacing: .25em; opacity: .55; }
.menu-button { display: none; }
.site-nav { display: flex; gap: 2.2rem; font: 500 .68rem var(--sans); letter-spacing: .16em; }
.site-nav a { position: relative; }
.site-nav a::after { content:""; position:absolute; left:0; bottom:-.45rem; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .35s; }
.site-nav a:hover::after { transform:scaleX(1); transform-origin:left; }

main { position: relative; z-index: 1; }
.hero { position: relative; min-height: 100svh; display:flex; flex-direction:column; justify-content:center; padding: 9rem 8vw 6rem; overflow:hidden; }
.hero::after { content:""; position:absolute; inset: 8% 4%; border:1px solid rgba(255,255,255,.05); pointer-events:none; }


.eyebrow { font:500 .65rem var(--sans); letter-spacing:.24em; color:var(--paper-dim); }
@keyframes schedule-pulse { 50% { border-color:rgba(162,13,27,1); box-shadow:0 0 3.2rem rgba(162,13,27,.34); } }
.hero-title { position:relative; z-index:2; margin:1.5rem 0 2rem; font-size:clamp(3rem,8.4vw,8.5rem); font-weight:500; line-height:1.03; letter-spacing:-.055em; }
.hero-title span { display:block; }
.hero-title__accent { margin-left:10vw; color:transparent; -webkit-text-stroke:1px var(--paper); }
.hero-copy { position:relative; z-index:2; margin:0 0 0 46%; font-size:clamp(.95rem,1.4vw,1.2rem); line-height:2.1; color:#c8c1b5; }
.hero-index { position:absolute; right:5%; bottom:8%; text-align:center; font:300 .65rem/1.8 var(--sans); color:#716d66; }
.scroll-cue { position:absolute; left:8vw; bottom:3rem; display:flex; align-items:center; gap:1rem; font:500 .62rem var(--sans); letter-spacing:.16em; }
.scroll-cue i { display:block; width:5rem; height:1px; background:var(--paper); overflow:visible; animation:scrollLine 2s infinite; transform-origin:left; }
@keyframes scrollLine { 0%,100%{ transform:scaleX(.35); opacity:.35 } 50%{ transform:scaleX(1); opacity:1 } }
.paper-field { position:absolute; inset:0; pointer-events:none; }
.paper { position:absolute; display:grid; place-items:center; width:12rem; height:17rem; border:1px solid rgba(233,227,214,.16); color:rgba(233,227,214,.22); font:500 .55rem var(--sans); letter-spacing:.25em; backdrop-filter:blur(1px); animation:paperFloat 8s ease-in-out infinite; }
.paper--1{top:8%;right:9%;transform:rotate(12deg)} .paper--2{top:55%;right:20%;width:8rem;height:11rem;animation-delay:-3s;transform:rotate(-16deg)} .paper--3{top:13%;left:41%;width:6rem;height:8rem;animation-delay:-5s;transform:rotate(22deg)} .paper--4{bottom:-6%;left:20%;animation-delay:-1s;transform:rotate(-8deg)}
@keyframes paperFloat { 0%,100%{ translate:0 -8px } 50%{ translate:0 12px } }

.world,.characters,.visit { padding: 8rem 8vw; border-top:1px solid var(--line); }
.section-number { margin-bottom:6rem; font:500 .65rem var(--sans); letter-spacing:.2em; color:#706b63; }
.world-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:8vw; }
.world-heading h2,.visit-title h2 { margin:1rem 0; font-size:clamp(2rem,4.4vw,4.8rem); font-weight:500; line-height:1.45; letter-spacing:-.045em; }
.world-copy { padding-top:4rem; font-size:1rem; line-height:2.25; color:#bbb4a8; }
.world-copy p { margin:0 0 2rem; }
.redacted { position:relative; margin:8rem auto 0; max-width:72rem; padding:3rem; text-align:center; border-block:1px solid var(--line); font-size:clamp(1.1rem,2vw,1.8rem); letter-spacing:.12em; overflow:hidden; }
.redacted b { position:relative; font-weight:400; }
.redacted b::after { content:""; position:absolute; left:-.4rem; right:-.4rem; top:-.12em; bottom:-.12em; background:linear-gradient(to bottom right,transparent calc(50% - 2.5px),var(--red) calc(50% - 2.5px),var(--red) calc(50% + 2.5px),transparent calc(50% + 2.5px)); clip-path:inset(0 100% 0 0); transition:clip-path 1s .3s; }
.redacted em { position:absolute; left:50%; bottom:.45rem; translate:-50% 0; font:500 .55rem var(--sans); color:var(--red); letter-spacing:.2em; opacity:0; transition:opacity .5s 1.2s; }
.redacted.is-visible b::after{clip-path:inset(0)} .redacted.is-visible em{opacity:1}

.characters { background:#e4ded1; color:#111; }
.characters .section-number,.characters .eyebrow { color:#6f695e; }
.characters-head { display:flex; justify-content:space-between; align-items:end; gap:4rem; margin-bottom:4rem; }
.characters-head h2 { margin:.8rem 0 0; font-size:clamp(3rem,6vw,6rem); font-weight:500; }
.characters-head>p { max-width:25rem; line-height:1.9; }

.visit { display:grid; grid-template-columns:1fr; gap:8vw; min-height:80vh; align-items:start; }
.visit .section-number { grid-column:1/-1; margin-bottom:1rem; }
.visit-data { border-top:1px solid var(--line); }
.visit-data dl { display:grid; grid-template-columns:8rem 1fr; gap:1rem; margin:0; padding:1.6rem 0; border-bottom:1px solid var(--line); }
.visit-data dt { font:500 .6rem var(--sans); letter-spacing:.18em; color:#777167; }
.visit-data dd { margin:0; }

footer { position:relative; z-index:1; min-height:17rem; padding:3rem 8vw; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto; align-items:end; gap:2rem; }
footer>span { grid-column:1/-1; font:300 clamp(3rem,12vw,10rem) var(--sans); letter-spacing:.08em; color:#1a1a1a; }
footer small,footer a { font:500 .58rem var(--sans); letter-spacing:.14em; color:#79736a; }

.section-observe>* { transition:opacity .9s, transform .9s; }
.section-observe:not(.is-visible)>*:not(.paper-field) { opacity:0; transform:translateY(2rem); }

@media (max-width: 760px) {
  .site-header{padding:1.2rem}.menu-button{display:grid;grid-template-columns:auto 1.2rem;align-items:center;gap:.5rem;border:0;background:none;font:500 .6rem var(--sans);letter-spacing:.16em}.menu-button i{grid-column:2;display:block;width:1.2rem;height:1px;background:currentColor}.menu-button i:last-child{translate:0 -.25rem}
  .site-nav{position:fixed;inset:0;z-index:-1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem;background:#090909;font-size:1rem;opacity:0;visibility:hidden;transition:.4s}.site-nav.is-open{opacity:1;visibility:visible}.wordmark{position:relative;z-index:2}
  .hero{padding:8rem 1.4rem 6rem}.hero-title{font-size:clamp(2.7rem,14vw,5rem)}.hero-title__accent{margin-left:0}.hero-copy{margin-left:15%;font-size:.9rem}.scroll-cue{left:1.4rem}.paper--1{right:-22%}.paper--3{left:70%}.cursor-halo{display:none}
  .world,.characters,.visit{padding:6rem 1.4rem}.section-number{margin-bottom:4rem}.world-grid,.visit{grid-template-columns:1fr}.world-copy{padding-top:1rem}.redacted{margin-top:5rem;padding:2.5rem .8rem}.redacted em{width:100%}
  .characters-head{display:block}.characters-head>p{margin-top:2rem}
  .visit .section-number{grid-column:auto}.visit-title h2{font-size:2rem}.visit-data dl{grid-template-columns:6.5rem 1fr;font-size:.9rem}
  footer{padding:3rem 1.4rem;grid-template-columns:1fr}footer>span{font-size:14vw}footer a{text-align:left}
  .opening-title{font-size:10vw}.opening-line{padding:0 1.5rem;text-align:center;line-height:2}
}

@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.opening{display:none}body.is-locked{overflow:auto}.paper{animation:none}.cursor-halo{display:none}
}

@media (min-width: 761px) { .visit { grid-template-columns:1fr 1fr; gap:6vw; } }
.visit-data dd { font-size:1.05rem; letter-spacing:.04em; }

.character-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.character-card { --accent:#e9dfc0; --bg:#111; position:relative; display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:3/4; padding:1.4rem; overflow:hidden; isolation:isolate; container-type:inline-size; background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 62%),var(--bg); color:#eee8da; transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s; }
.character-card::after { content:""; position:absolute; z-index:-1; inset:52% 0 0; background:linear-gradient(transparent,var(--bg) 58%); }
.character-card:hover,.character-card:focus-visible { transform:translateY(-.35rem); box-shadow:0 1.4rem 3rem rgba(0,0,0,.3),inset 0 0 0 1px var(--accent); }
.character-card__art { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.character-card:hover .character-card__art { transform:scale(1.04); }
.character-card__motif { font:500 .55rem var(--sans); letter-spacing:.16em; color:#b5ae9f; }
.character-card__name { margin-top:.5rem; font:300 10.5cqw/1.1 var(--sans); letter-spacing:-.03em; }
.character-card__jp { margin-top:.5rem; font-size:.9rem; letter-spacing:.2em; color:var(--accent); }
.character-card__line { margin-top:.9rem; min-height:3.3em; font-size:.82rem; line-height:1.65; letter-spacing:.06em; }
.character-card__enter { margin-top:.6rem; align-self:flex-end; font:500 .65rem var(--sans); letter-spacing:.15em; }
.character-card__enter i { font-style:normal; font-size:.95rem; color:var(--accent); }
.character-card--rufas { --accent:#d9445a; --bg:#14090a; }
.character-card--wilhelmine { --accent:#d8b76a; --bg:#0d181b; }
.character-card--kaguya { --accent:#e9dfc0; --bg:#090c1e; }
.character-card--wonder { --accent:#a9c3f2; --bg:#0d0f15; }
.character-card--kon { --accent:#f0c64a; --bg:#150d07; }
.character-card--otohime { --accent:#62d0e8; --bg:#06102e; }
.character-card--lilia { --accent:#d48ab4; --bg:#0f0b14; }
.character-card--abuku { --accent:#c5c7f5; --bg:#0a1626; }
.character-card--hook { --accent:#d4a94a; --bg:#100b08; }
.character-card--tazu { --accent:#e6e9ee; --bg:#0b1516; }
.character-card--anthea { --accent:#ff7d8e; --bg:#101215; }
.character-card--leophi { --accent:#f0a070; --bg:#150f0a; }
.character-card--camille { --accent:#e8574f; --bg:#120d0f; }
.character-card--michel { --accent:#e6c36a; --bg:#061b29; }
.character-card--riri { --accent:#f2a6d4; --bg:#0a1033; }
.character-card--riri .character-card__art { object-position:60% top; }
@media (max-width: 900px) { .character-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; } }
@media (max-width: 760px) {
  .character-card { padding:.9rem; }
  .character-card__line { display:none; }
  .character-card__motif { font-size:.46rem; letter-spacing:.1em; }
  .character-card__jp { font-size:.72rem; letter-spacing:.1em; }
}
.character-card--kon .character-card__art { object-position:center 45%; }