/* FOLKLORICA — Whimsigoth. Charcoal, silver, amethyst. */
:root {
  --ink: #141218; --ink-deep: #0d0c10; --ink-soft: #211c28;
  --grey: #e5e0e7; --muted: #b7aebf; --gold: #a994c5; --gold-light: #d6c7ed;
  --gold-dim: #62536f; --lavender: #d4baf2; --purple: #a280d1; --silver: #c9c4cc;
  --border: rgba(188,167,211,.25); --accent: #cbb4e8; --accent-soft: rgba(143,105,186,.14);
  --serif-en: 'Cormorant Garamond', Georgia, serif; --serif-jp: 'Noto Serif JP', 'Yu Mincho', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --page: min(1320px, calc(100% - 112px)); --player-height: 88px;
  color-scheme: dark;
}
html { scroll-behavior: auto; scrollbar-color: #7f6b92 #141218; }
body, body.subpage-body { background: var(--ink); color: var(--grey); font-size: 16px; line-height: 2; letter-spacing: .055em; padding-bottom: calc(var(--player-height) + env(safe-area-inset-bottom)); overflow-x: clip; }
button { color: inherit; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
button, input { font-family: var(--sans); }
img { height: auto; }
:where(a, button, summary, input):focus-visible { outline: 2px solid #d9c2f5; outline-offset: 5px; }
::selection { background: #75608b; color: #fff; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 100px; }
#main:focus { outline: none; }
.overline, .section-index, .hero-caption, .hero-footnote, .story-meta, .gallery-hint, .listening-note, .film-side-label { font-family: var(--sans); font-size: 12px; line-height: 1.7; font-weight: 400; letter-spacing: .14em; }
.overline { color: var(--lavender); margin: 0 0 28px; }
em { font-weight: 400; }
.breath-field { position: fixed; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background:
    /* grey is the resting mood: always present, breathes gently */
    radial-gradient(160% 135% at 50% 52%, rgba(200,200,210, calc(.16 + var(--breath, .3) * .40)) 0%, transparent 80%),
    /* purple only surfaces occasionally, riding the same breath pulse */
    radial-gradient(125% 100% at 50% 14%, rgba(216,182,244, calc(var(--mood-purple, 0) * (.32 + var(--breath, .3) * .42))) 0%, transparent 74%);
}
.breath-tint { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  /* a rarer, deeper indigo wash — normal blend so it can actually darken toward blue-black */
  background: radial-gradient(150% 125% at 50% 62%, rgba(24,26,56, calc(var(--mood-blue, 0) * .62)) 0%, transparent 82%);
}
body.motion-off .breath-field, body.motion-off .breath-field * { background: radial-gradient(150% 125% at 50% 52%, rgba(196,196,206,.2) 0%, transparent 78%) !important; }
body.motion-off .breath-tint, body.motion-off .breath-tint * { background: none !important; }
@media (prefers-reduced-motion: reduce) {
  .breath-field { background: radial-gradient(150% 125% at 50% 52%, rgba(196,196,206,.2) 0%, transparent 78%) !important; }
  .breath-tint { background: none !important; }
}
.page-atmosphere { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .82; }
.page-atmosphere canvas { display: block; width: 100%; height: 100%; }
.immersive-main, .subpage-main, .site-footer { position: relative; z-index: 3; }
.dream-hero { z-index: 0; }
.site-header.shared-header, .subpage-body .site-header.shared-header { position: absolute; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; height: 98px; width: 100%; padding: 0 48px; gap: 24px; border: 0; background: transparent; color: var(--silver); }
.brand { font: 500 27px/1 var(--serif-en); letter-spacing: .02em; gap: 12px; }
.brand-mark { color: var(--lavender); font-size: 32px; text-shadow: none; }
.brand small { display: none; }
.header-quick { display: flex; gap: 32px; margin-left: auto; padding-right: 26px; font: 400 14px/1.5 var(--sans); }
.header-quick a { position: relative; padding: 10px 0; }
.header-quick a::after, .text-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.header-quick a:hover::after, .text-link:hover::after { transform: scaleX(1); }
.index-toggle { position: relative; z-index: 53; display: flex; align-items: center; justify-content: center; gap: 18px; background: transparent; border: 1px solid var(--border); border-radius: 100px; padding: 13px 22px; min-height: 48px; font: 400 12px/1 var(--sans); letter-spacing: .13em; }
.menu-lines { width: 23px; display: grid; gap: 6px; }
.menu-lines i { width: 23px; height: 1px; background: currentColor; transition: transform .35s; }
.index-toggle[aria-expanded=true] .menu-lines i:first-child { transform: translateY(3.5px) rotate(45deg); }
.index-toggle[aria-expanded=true] .menu-lines i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.library-menu { position: fixed; inset: 0 0 var(--player-height); z-index: 49; background: #17131ef7; backdrop-filter: blur(22px); overflow: auto; perspective: 1200px; }
.library-menu-inner { padding: 110px max(48px,calc((100vw - 1120px)/2)) 30px; transform-style: preserve-3d; transform-origin: 88% 40%; will-change: transform, opacity; }
.library-menu .overline { margin-bottom: 20px; }
.library-menu nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; }
.library-menu a { display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--border); padding: 18px 0; color: var(--grey); transform-style: preserve-3d; will-change: transform, opacity; }
.library-menu a b { font: 400 13px/1 var(--sans); color: var(--muted); }
.library-menu a strong { font: 400 clamp(30px,4vw,56px)/1.15 var(--serif-en); }
.library-menu a small { font: 400 14px/1.4 var(--serif-jp); color: var(--muted); margin-left: auto; }
.library-menu a:hover, .library-menu a[aria-current] { color: var(--lavender); }
.menu-preferences { padding: 28px 0; display: flex; align-items: center; gap: 24px; font: 400 14px/1.6 var(--sans); }
.motion-toggle { padding: 12px 20px; min-height: 44px; background: transparent; border: 1px solid var(--border); border-radius: 24px; }
.dream-hero { position: relative; min-height: max(800px, calc(100svh - var(--player-height))); overflow: hidden; padding: 128px 48px 104px; isolation: isolate; }
.dream-backdrop { position: absolute; inset: 0; z-index: -2; }
.dream-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.dream-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #14121830, transparent 36%, #14121820 65%, var(--ink)), linear-gradient(90deg, #14121860, transparent 65%); }
.hero-caption { display: flex; justify-content: space-between; color: #c9c0d2; font-size: 12px; padding-bottom: 22px; border-bottom: 1px solid #c3acd02b; }
.dream-title { position: relative; margin-top: 26px; }
.dream-title .overline { margin-bottom: 12px; font-family: var(--serif-jp); letter-spacing: .14em; }
.dream-title h1 { margin: 0 0 24px -.05em; font: 400 clamp(60px, 12.5vw, 200px)/.91 var(--serif-en); letter-spacing: -.038em; color: #ddd5e3; text-shadow: 0 2px 30px #0c0a1066; white-space: nowrap; }
.split-char { display: inline-block; will-change: transform; }
/* Organic heat-warp: an animated SVG turbulence filter (defined in site-shell.js)
   liquefies the glyphs like rising heat and softly dripping wax — not a fixed
   keyframe loop, so it never repeats identically. */
.dream-title h1, .page-masthead h1 .flame-text { filter: url(#heat-warp); position: relative; }
body.motion-off .dream-title h1, body.motion-off .page-masthead h1 .flame-text { filter: none; }
@media (prefers-reduced-motion: reduce) { .dream-title h1, .page-masthead h1 .flame-text { filter: none; } }
/* Embers rising off the burning letters, each climbing steadily into the dark. */
.ember-field { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.ember {
  position: absolute; bottom: 6%; width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #e8e2ee 55%, transparent 75%);
  opacity: 0; filter: blur(.3px) drop-shadow(0 0 2px #ffffff88);
  animation: ember-rise var(--ember-dur, 3.6s) linear var(--ember-delay, 0s) infinite;
}
@keyframes ember-rise {
  0%   { transform: translate(0,0) scale(.5); opacity: 0; }
  8%   { opacity: .95; }
  55%  { transform: translate(calc(var(--ember-drift, 4px) * .6), calc(var(--ember-rise, 120px) * -.55)) scale(.85); opacity: .8; }
  85%  { opacity: .3; }
  100% { transform: translate(var(--ember-drift, 4px), calc(var(--ember-rise, 120px) * -1)) scale(.2); opacity: 0; }
}
body.motion-off .ember-field { display: none; }
@media (prefers-reduced-motion: reduce) { .ember-field { display: none; } }
.hero-story { margin-top: clamp(32px, 6vh, 80px); max-width: 460px; }
.hero-japanese { font-size: clamp(26px,2.7vw,42px); line-height: 1.75; margin: 0 0 22px; letter-spacing: .17em; }
.hero-japanese em { font-style: normal; color: var(--lavender); }
.hero-intro { color: #c5bccd; font-size: 15px; line-height: 2; }
.sound-invitation { display: flex; align-items: center; gap: 14px; padding: 17px 0; margin-top: 14px; background: transparent; border: 0; border-bottom: 1px solid #bfa8d34d; font: 400 14px/1.6 var(--serif-jp); }
.sound-invitation > span:last-child { padding-left: 16px; }
.tiny-equalizer { display: flex; align-items: center; gap: 3px; height: 18px; }
.tiny-equalizer i { width: 2px; height: 6px; background: var(--lavender); }
.tiny-equalizer i:nth-child(2) { height: 16px; }.tiny-equalizer i:nth-child(3) { height: 11px; }
.is-playing .tiny-equalizer i { animation: sound-dance .9s ease-in-out infinite alternate; }
.is-playing .tiny-equalizer i:nth-child(2) { animation-delay: -.35s; }.is-playing .tiny-equalizer i:nth-child(3) { animation-delay: -.7s; }
@keyframes sound-dance { to { transform: scaleY(.3); } }
.portal-enter { position: absolute; right: 9%; bottom: 105px; width: 156px; height: 156px; border: 1px solid #d0bcec91; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #2116294d; backdrop-filter: blur(6px); text-align: center; }
.portal-enter::before { content: ''; position: absolute; inset: -8px; border: 1px solid #b798d536; border-radius: 50%; }
.portal-enter span { font: 400 12px/1.6 var(--sans); letter-spacing: .17em; }.portal-enter b { font: 400 32px/1.3 var(--serif-en); }.portal-enter small { font-size: 12px; }
.hero-footnote { position: absolute; bottom: 31px; left: 48px; right: 48px; display: flex; justify-content: space-between; align-items: center; color: #c5bbc9; }
.hero-footnote a { display: flex; gap: 22px; align-items: center; min-height: 44px; }.hero-footnote > span { font-family: var(--serif-jp); letter-spacing: .1em; }
.scene-section { width: var(--page); margin: auto; padding: 105px 0; }
.section-index { display: flex; justify-content: space-between; align-items: center; gap: 24px; color: var(--muted); padding: 0 0 23px; border-bottom: 1px solid var(--border); margin-bottom: 70px; }
.section-index a { padding: 8px 0; }.section-index > :last-child { font-family: var(--serif-jp); letter-spacing: .05em; }
.manifesto-layout { display: grid; grid-template-columns: .83fr 1fr; gap: 13%; align-items: center; padding: 12px 4%; }
.memory-window { position: relative; margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: 48% 48% 0 0; }
.memory-window img { width: 100%; aspect-ratio: .77; height: auto; object-fit: cover; border-radius: 48% 48% 0 0; filter: saturate(.4); }
.memory-window figcaption { font: 400 12px/1.4 var(--sans); color: var(--muted); letter-spacing: .11em; text-align: center; padding: 25px 0 14px; }
.manifesto-copy h2 { font: 400 clamp(24px,2.6vw,38px)/1.9 var(--serif-jp); margin: 0 0 30px; letter-spacing: .04em; }
.manifesto-copy h2 em { font-style: normal; color: var(--lavender); }
.manifesto-copy > p:not(.overline) { color: var(--muted); font-size: 16px; line-height: 2.35; margin: 0 0 28px; }
.text-link { position: relative; display: inline-flex; gap: 45px; align-items: center; padding: 14px 0; color: var(--grey); border-bottom: 1px solid var(--border); font-size: 14px; }
.giant-whisper { margin: 100px 0 0; text-align: center; color: #756c7e; font: 400 clamp(38px,7vw,106px)/1.1 var(--serif-en); letter-spacing: -.035em; }
.giant-whisper em { color: #ad9bbf; }
.story-section { width: 100%; overflow: clip; padding-top: 20px; }
.story-section > .section-index, .editorial-heading { width: var(--page); margin-inline: auto; }
.editorial-heading { display: flex; gap: 60px; align-items: flex-end; margin-bottom: 54px; }
.editorial-heading h2, .listening-copy h2, .film-content h2 { font: 400 clamp(60px,7.5vw,112px)/.88 var(--serif-en); letter-spacing: -.035em; margin: 0; }
.editorial-heading h2 em, .listening-copy h2 em { color: var(--lavender); }
.editorial-heading p { margin: 0; color: var(--muted); font-size: 16px; }.gallery-hint { margin: auto 0 0 auto; color: var(--muted); }
.story-viewport { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scroll-snap-type: x mandatory; padding: 0 max(56px,calc((100vw - 1320px)/2)); }
.story-track { display: flex; gap: 48px; width: max-content; padding: 15px 0 30px; }
.story-piece { display: block; width: min(29vw, 430px); min-width: 310px; scroll-snap-align: center; }
.story-piece:nth-child(even) { padding-top: 68px; }
.story-art { position: relative; overflow: hidden; border-radius: 46% 46% 0 0; background: #2c2338; border: 1px solid #9d84ba6b; padding: 8px; }
.story-art img { width: 100%; aspect-ratio: .84; object-fit: cover; border-radius: 45% 45% 0 0; filter: saturate(.5); transition: filter .6s, transform .8s; }
.story-piece:hover .story-art img, .story-piece:focus-visible .story-art img { filter: saturate(.9); transform: scale(1.025); }
.story-open { position: absolute; right: 25px; bottom: 25px; width: 44px; height: 44px; display: grid; place-items: center; background: #201729a6; backdrop-filter: blur(10px); border: 1px solid #d3bcec70; border-radius: 50%; }
.story-meta { display: flex; justify-content: space-between; margin: 22px 0 8px; color: var(--muted); letter-spacing: .07em; }
.story-meta > :last-child { font-family: var(--serif-jp); }
.story-piece h3 { margin: 0; font: 400 clamp(40px,3.8vw,58px)/1.15 var(--serif-en); letter-spacing: -.01em; }
.story-piece > p { color: var(--muted); font-size: 14px; margin: 12px 0 0; }
.gallery-progress { width: min(220px,50vw); height: 1px; margin: 35px auto 0; background: var(--border); overflow: hidden; }.gallery-progress span { display: block; width: 25%; height: 1px; background: var(--lavender); }
.listening-layout { display: grid; grid-template-columns: .9fr 1fr; gap: 11%; align-items: center; padding: 12px 2%; }
.listening-art { position: relative; padding: 32px; border: 1px solid var(--border); border-radius: 50%; }
.listening-art::before { content: ''; position: absolute; inset: 13px; border: 1px solid var(--border); border-radius: 50%; }
.listening-art img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; filter: saturate(.38); }
.art-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 76px; height: 76px; background: #b69dd766; border: 1px solid #e9d9fa88; backdrop-filter: blur(15px); border-radius: 50%; font-size: 24px; color: white; }
.orbit-caption { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); width: max-content; background: var(--ink); padding: 15px; font: 400 12px/1.6 var(--sans); letter-spacing: .2em; color: var(--muted); }
.listening-copy h2 { font-size: clamp(55px,6.5vw,97px); }.listening-copy > p:not(.overline) { color: var(--muted); margin: 28px 0; line-height: 2.2; }
.track-row { width: 100%; display: flex; align-items: center; gap: 22px; text-align: left; padding: 22px 0; background: transparent; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 14px; }
.track-number { color: var(--muted); }.track-name { flex: 1; font: 400 24px/1.4 var(--serif-jp); }.track-name small { display: block; color: var(--muted); font: 400 12px/1.5 var(--sans); margin-top: 9px; }
.track-row.is-active { color: var(--lavender); }.listening-copy .listening-note { font-size: 12px; margin-top: 18px; letter-spacing: .03em; }
.film-section { min-height: 740px; min-height: min(880px,90svh); position: relative; display: grid; place-items: center; text-align: center; background: #1c1723; isolation: isolate; overflow: hidden; margin-top: 50px; }
.film-ambient { position: absolute; inset: 0; z-index: -2; }.film-ambient video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.28); }
.film-ambient::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#17121d66,#17121d4d 40%,#17121dbb),#36204633; }
.film-content { padding: 85px 24px; }.film-content h2 { color: #eee7f2; line-height: 1; font-size: clamp(50px,7.7vw,118px); }.film-content h2 em { color: #dbc5f3; }.film-content > p:not(.overline) { margin: 30px 0; color: #e5d9ea; }
.film-open { display: inline-flex; align-items: center; gap: 20px; min-height: 60px; padding: 14px 28px; border-radius: 100px; border: 1px solid #e6d4fbb3; background: #2116295e; backdrop-filter: blur(12px); font: 400 16px/1.5 var(--serif-jp); }.film-open small { font: 400 12px/1 var(--sans); color: #c4b7d1; }
.film-side-label { position: absolute; right: 25px; writing-mode: vertical-rl; letter-spacing: .25em; }
.reading-heading { font: 400 clamp(42px,6vw,88px)/1.15 var(--serif-en); letter-spacing: -.03em; margin: 0 0 56px; }.reading-heading em { color: var(--lavender); }
.reading-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.reading-door { position: relative; padding: 0 0 30px; border-bottom: 1px solid var(--border); }
.reading-door > img { width: 100%; aspect-ratio: 1.3; object-fit: cover; filter: saturate(.35); transition: filter .6s; }
.reading-door:hover > img { filter: saturate(.8); }.reading-door > div { padding-top: 30px; }
.reading-door div > span, .archive-passage > span { font: 400 12px/1.6 var(--sans); color: var(--muted); letter-spacing: .13em; }
.reading-door h3, .archive-passage h3 { font: 400 clamp(40px,4vw,58px)/1.15 var(--serif-en); margin: 14px 0; }.reading-door h3 em, .archive-passage h3 em { font: 400 16px/1.6 var(--serif-jp); margin-left: 22px; color: var(--lavender); }
.reading-door p, .archive-passage p { margin: 0; color: var(--muted); font-size: 14px; }.reading-door > b { position: absolute; bottom: 88px; right: 5px; font-size: 34px; font-weight: 400; }
.archive-passage { position: relative; display: block; padding: 48px 0; margin-top: 35px; border-bottom: 1px solid var(--border); }.archive-passage > b { position: absolute; right: 10px; top: 50%; font: 400 58px/1 var(--serif-en); }
.invitation { position: relative; padding-block: 115px 155px; text-align: center; overflow: hidden; isolation: isolate; }
.invitation h2 { font: 400 clamp(30px,4.4vw,64px)/1.7 var(--serif-jp); margin: 25px 0; }.invitation h2 em { font-style: normal; color: var(--lavender); }.invitation > p:not(.overline) { color: var(--muted); margin: 0 0 30px; }
.pill-link { display: inline-flex; align-items: center; gap: 50px; border: 1px solid #b69bd273; padding: 15px 26px; min-height: 56px; border-radius: 60px; font-size: 14px; transition: background .25s; }.pill-link:hover { background: #b69bd220; }
.invitation-word { position: absolute; z-index: -1; bottom: 20px; left: 50%; transform: translateX(-50%); font: italic 400 clamp(100px,27vw,400px)/1 var(--serif-en); color: #44354e4a; letter-spacing: -.05em; }
.site-footer.shared-footer { background: #100e14; border-top: 1px solid var(--border); padding: 65px 48px 30px; }
.footer-topline { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }.footer-wordmark { font: 400 clamp(30px,4vw,62px)/1 var(--serif-en); letter-spacing: -.035em; }.footer-topline p { color: var(--muted); font-size: 14px; margin: 0; }.footer-topline .text-link { padding-top: 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px 28px; margin: 45px 0; }.footer-nav a { color: var(--muted); font: 400 14px/1.6 var(--sans); }.footer-nav a:hover { color: var(--lavender); }
.footer-end { display: flex; gap: 20px; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 25px; color: #9f95a7; font: 400 12px/1.6 var(--sans); letter-spacing: .05em; }
/* One audio element stays alive while main-page content changes. */
.sound-player { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; min-height: var(--player-height); padding: 16px 34px calc(16px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(220px,1fr) auto minmax(200px,1.2fr) auto; align-items: center; gap: 30px; background: linear-gradient(180deg, #241f2c08, #1a162014); backdrop-filter: blur(42px) saturate(200%); -webkit-backdrop-filter: blur(42px) saturate(200%); border-top: 1px solid #d9c2f580; box-shadow: 0 -10px 60px #08060b1e, inset 0 1px 0 #ffffff36; }
.player-track { display: flex; align-items: center; gap: 14px; min-width: 0; }.player-cover { width: 49px; height: 49px; object-fit: cover; border-radius: 50%; border: 1px solid var(--border); filter: saturate(.4); }.player-track strong { display: block; font: 400 18px/1.5 var(--serif-jp); }.player-track small { display: block; font: 400 12px/1.5 var(--sans); color: var(--muted); white-space: nowrap; }
.player-transport { display: flex; align-items: center; gap: 10px; }.icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 8px; border: 0; background: transparent; color: var(--silver); }.icon-button svg { width: 22px; height: 22px; }
.player-play { width: 48px; height: 48px; border: 1px solid #c1a4e4; border-radius: 50%; background: #c5ade2; color: #1c1425; }.player-play svg { width: 19px; height: 19px; }
.player-seek { display: flex; align-items: center; gap: 13px; }.player-seek time { font: 400 12px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 30px; }
.player-seek input, .volume-range { appearance: none; -webkit-appearance: none; width: 100%; min-width: 70px; height: 24px; margin: 0; padding: 0; background: transparent; cursor: pointer; }
.player-seek input::-webkit-slider-runnable-track, .volume-range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right,#c8abeb 0 var(--progress,0%),#61536d var(--progress,0%) 100%); }
.player-seek input::-moz-range-track, .volume-range::-moz-range-track { height: 2px; background: #61536d; }.player-seek input::-moz-range-progress, .volume-range::-moz-range-progress { height: 2px; background: #c8abeb; }
.player-seek input::-webkit-slider-thumb, .volume-range::-webkit-slider-thumb { appearance: none; width: 9px; height: 9px; margin-top: -3.5px; border-radius: 50%; background: #dbc5f4; }.player-seek input::-moz-range-thumb, .volume-range::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: #dbc5f4; }
.player-volume { display: flex; align-items: center; gap: 3px; }.volume-range { width: 66px; min-width: 55px; }
.audio-meter { width: 40px; height: 24px; margin-left: 12px; }
.player-status { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); margin: 0; padding: 10px 18px; background: #2b2135; border: 1px solid var(--border); border-radius: 4px; max-width: calc(100vw - 32px); font: 400 14px/1.7 var(--sans); }.player-status:empty { display: none; }
.page-transition { position: fixed; z-index: 70; inset: 0 0 var(--player-height); background: #261c31; pointer-events: none; transform: translateY(101%); }
.film-dialog { color: var(--grey); width: min(1120px, calc(100% - 40px)); max-height: calc(100svh - 48px); margin: auto; padding: 24px; border: 1px solid var(--border); background: #16121c; overflow: auto; }
.film-dialog::backdrop { background: #08050ceb; backdrop-filter: blur(18px); }.film-dialog-head { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 18px; }.film-dialog h2 { margin: 0; font: 400 24px/1.5 var(--serif-jp); }.film-dialog video { display: block; width: 100%; max-height: 65svh; background: #0b080e; }.film-dialog-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 20px; font: 400 14px/1.5 var(--sans); }.film-choices { display: flex; gap: 12px; }.film-choices button { padding: 12px 17px; min-height: 44px; background: transparent; border: 1px solid var(--border); }.film-choices button[aria-pressed=true] { background: #69508055; border-color: #ad8ccf; }
.site-notice { position: fixed; z-index: 90; bottom: calc(var(--player-height) + 18px); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 36px); padding: 14px 22px; border: 1px solid var(--border); background: #2b2135; font: 400 14px/1.7 var(--sans); }.site-notice:empty { display: none; }
/* The same silver / violet language extends through all six library rooms. */
body.subpage-body { --accent: #cbb4e8; --accent-soft: #9671b221; }
.page-masthead { position: relative; min-height: 570px; padding: 175px max(56px,calc((100% - 1320px)/2)) 75px; isolation: isolate; background: #16111e; overflow: hidden; }
.page-masthead::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#15111fe8 10%,#19112022),linear-gradient(0deg,var(--ink),transparent 80%),url('assets/images/whimsigoth-portal.png') 70% 45%/cover; opacity: .8; }
.breadcrumbs { display: flex; gap: 17px; color: var(--muted); font: 400 12px/1.6 var(--sans); letter-spacing: .13em; margin: 0 0 35px; }
.page-masthead h1 { margin: 0 0 28px; font: 400 clamp(64px,10vw,146px)/.9 var(--serif-en); letter-spacing: -.02em; }.page-masthead h1 .flame-text { display: inline-block; }.page-masthead h1 > span:last-child { display: block; color: var(--lavender); margin-top: 22px; font: 400 22px/1.5 var(--serif-jp); letter-spacing: .16em; }.page-masthead > p { max-width: 660px; color: #c7bacf; font-size: 16px; }
.sub-shell { width: var(--page); }.sub-section { padding: 75px 0; }.sub-heading { color: var(--lavender); line-height: 1.55; font-size: clamp(30px,3.7vw,50px); }.sub-heading span { font-size: .6em; }.sub-lead { font-size: 16px; color: var(--muted); margin-bottom: 36px; }
.panel { background: #1e1924b0; border-color: var(--border); box-shadow: none; }.panel::before, .panel::after { display: none; }
.sub-button, .outline-button { border-color: var(--border); background: transparent; color: var(--lavender); font-size: 14px; min-height: 48px; line-height: 1.6; gap: 14px; padding: 11px 19px; }.sub-button:hover { background: #a582c41f; }
.subpage-main :where(.about-intro-copy,.concept-copy,.recorder-copy,.featured-copy,.crosslink,.novel-story-copy,.format-card) p { color: var(--muted); font-size: 16px; line-height: 2.15; }
.subpage-main :where(.work-library-card,.novel-card,.manga-volume,.character-card,.shop-card,.join-card,.mission-card,.experience-item) p { font-size: 14px; line-height: 2; color: var(--muted); min-height: auto; }
.subpage-main :where(.origin-box,.store-note,.world-preview,.symbol-item) p { font-size: 14px; line-height: 2; }
.subpage-main small, .tags span, .order-item span, .keyword-cloud span, .relation-person span, .location span, .resident-perks span, .benefit span { font-size: 12px; line-height: 1.65; }
:where(.subpage-main) img { filter: saturate(.48); }.subpage-main a:hover img { filter: saturate(.85); }
.work-library-card h3 { font-size: 28px; line-height: 1.45; }.work-library-card h3 span { font-size: 14px; }.dual-actions { gap: 8px; }.dual-actions a, .dual-actions span { display: grid; place-items: center; min-height: 44px; font-size: 13px; padding: 8px; line-height: 1.7; }
.work-library-card, .novel-card, .manga-volume, .character-card, .shop-card, .join-card { display: flex; flex-direction: column; padding: 18px; }.work-library-card .dual-actions, .novel-card > .sub-button, .manga-volume > .sub-button, .join-card > .sub-button { margin-top: auto; }
.work-library-card img, .novel-card img, .manga-volume img, .character-card img { margin-bottom: 10px; border-color: var(--border); }
.works-grid, .store-product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }.manga-library-grid, .song-manga-grid, .character-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }.novel-grid { gap: 24px; }.featured-copy { grid-template-columns: minmax(0,1fr); padding: 45px; }.featured-actions { grid-template-columns: 1fr 1fr; }.featured-actions > p { grid-column: 1/-1; margin: 0; }
.filter-row { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }.filter-row button { background: transparent; border-color: var(--border); min-height: 68px; color: var(--lavender); font: 400 14px/1.7 var(--sans); }.filter-row button.is-active { box-shadow: none; border-color: #ba9cd9; background: #a37bcb25; }.filter-status { font: 400 14px/1.6 var(--sans); color: var(--muted); margin-bottom: 24px; }
.availability { display: block; color: #b9a7c8; font: 400 12px/1.8 var(--sans); padding: 10px; text-align: center; border: 1px dashed #7d668d66; }.sub-button.availability::after { content: none; }
.join-form .form-note { font-size: 14px; color: var(--muted); }.join-form input { background: #18131f; border-color: var(--border); font-size: 16px; }.join-form input:disabled { opacity: .65; }.gold-button { background: #bda2d8; border-color: #bda2d8; box-shadow: none; color: #1b1423; }.gold-button:disabled { background: #44364f; border-color: #736082; color: #c5b9ce; }
.paper-excerpt { background: #c9c3cd; color: #28212e; box-shadow: none; }.paper-excerpt p { font-size: 16px; line-height: 2.5; }.paper-excerpt::before { color: #ddd0e7; background: #382842; font-size: 14px; }
.timeline-list, .glossary-list { font-size: 14px; line-height: 2; }.archive-dashboard { grid-template-columns: 1fr 1fr; gap: 24px; }.locations { grid-column: 1/-1; }.relationship-map { grid-template-columns: repeat(3, minmax(55px,85px)); gap: 22px 32px; }.location-grid { grid-template-columns: repeat(5,1fr); gap: 16px; }.dashboard-card h2 { line-height: 1.7; font-size: 24px; }.world-preview { grid-template-columns: 1fr; }.world-preview img { height: 230px; }
.recorder-panel { grid-template-columns: 150px 1fr; gap: 30px; }.recorder-panel .origin-box { grid-column: 1/-1; }.recorder-panel img { width: 150px; }.mission-grid { grid-template-columns: repeat(3,1fr); gap: 22px; }.mission-card:last-child { grid-column: auto; }.mission-card h3 { font-size: 18px; }.mission-card { min-height: 210px; }.experience-grid { gap: 24px; }
.shop-card h3 { min-height: auto; font-size: 17px; margin: 15px 0; }.shop-card strong { font-size: 21px; margin: auto 0 10px; }.shop-card button { float: none; width: 100%; min-height: 44px; font-size: 13px; }.shop-card button:disabled { opacity: .75; }
.novel-tabs a { color: var(--lavender); background: #21192b; }.novel-tabs a:first-child { background: #75608377; }.category-row a { color: var(--lavender); background: #241b30; }.category-row a small { font-size: 12px; }.chapter-strip h3 { font-size: 20px; }.novel-card h3 { font-size: 20px; line-height: 1.65; }.crosslink p { font-size: 15px; }.center-link { min-width: 0; max-width: 100%; }
/* Accessible quiet mode and small screens retain the full content. */
body.motion-off .tiny-equalizer i { animation: none; }
@media (min-width: 901px) { .story-section.is-pinned .story-viewport { overflow: visible; scroll-snap-type: none; } }
@media (max-width: 1100px) {
  :root { --page: calc(100% - 72px); }.site-header.shared-header, .subpage-body .site-header.shared-header { padding-inline: 32px; }.header-quick { gap: 24px; padding-right: 5px; }
  .dream-hero { padding-inline: 36px; }.dream-title h1 { font-size: 12.2vw; }.hero-footnote { left: 36px; right: 36px; }.hero-caption span:last-child { display: none; }
  .manifesto-layout { gap: 8%; padding-inline: 0; }.manifesto-copy > p:not(.overline) br { display: none; }.listening-layout { gap: 7%; padding: 0; }.gallery-hint { display: none; }
  .sound-player { grid-template-columns: minmax(180px,1fr) auto minmax(180px,1fr); gap: 20px; padding-inline: 22px; }.player-volume { display: none; }.player-cover { width: 44px; height: 44px; }
  .novel-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.featured-work { grid-template-columns: .7fr 1fr; }.featured-copy { padding: 32px; }.featured-copy h2 { font-size: 62px; }.featured-actions { grid-template-columns: 1fr; }
  .release-archive { grid-template-columns: repeat(4,1fr); gap: 16px; }.release-archive h2 { grid-column: 1/-1; }.join-card-grid { grid-template-columns: repeat(2,1fr); }.product-formats { grid-template-columns: 1fr 1fr; }.booth-card { padding: 25px; }.story-track { gap: 32px; }
}
@media (max-width: 767px) {
  :root { --page: calc(100% - 40px); --player-height: 112px; }
  .site-header.shared-header, .subpage-body .site-header.shared-header { height: 82px; padding: 0 20px; }.brand { font-size: 25px; gap: 8px; }.brand-mark { font-size: 27px; }.header-quick { display: none; }.index-toggle { min-height: 44px; padding: 12px 17px; gap: 12px; }.index-toggle > span:first-child { font-size: 12px; }
  .library-menu-inner { padding: 105px 24px 30px; }.library-menu nav { grid-template-columns: 1fr; gap: 0; }.library-menu a { padding: 13px 0; gap: 16px; }.library-menu a strong { font-size: 32px; }.library-menu a small { font-size: 13px; }.menu-preferences { flex-wrap: wrap; gap: 15px; }
  .dream-hero { min-height: max(800px,calc(100svh - 60px)); padding: 109px 20px 88px; }.dream-backdrop img { object-position: 61% center; opacity: .9; }.dream-backdrop::after { background: linear-gradient(180deg,#13101833,transparent 28%,#13101833 48%,var(--ink)),linear-gradient(90deg,#16101c55,transparent); }.hero-caption { font-size: 12px; padding-bottom: 18px; }
  .dream-title { margin-top: 24px; }.dream-title .overline { font-size: 12px; letter-spacing: .055em; }.dream-title h1 { margin-top: 14px; font-size: 12.15vw; letter-spacing: -.045em; }
  .hero-story { margin-top: 145px; max-width: 86%; }.hero-japanese { font-size: 25px; line-height: 1.85; margin-bottom: 17px; }.hero-intro { font-size: 14px; }.sound-invitation { font-size: 13px; gap: 9px; padding: 15px 0; }.sound-invitation > span:last-child { padding-left: 0; }
  .portal-enter { right: 22px; bottom: 123px; width: 91px; height: 91px; }.portal-enter span { font-size: 12px; line-height: 1.4; letter-spacing: .04em; }.portal-enter b { font-size: 25px; }.portal-enter small { display: none; }.portal-enter::before { inset: -5px; }
  .hero-footnote { left: 20px; right: 20px; bottom: 22px; font-size: 12px; }.hero-footnote > span { display: none; }.hero-footnote a { gap: 20px; }
  .scene-section { padding-block: 65px; }.section-index { margin-bottom: 42px; gap: 18px; font-size: 12px; }.section-index > :last-child { font-size: 12px; }
  .manifesto-layout { grid-template-columns: 1fr; gap: 52px; }.memory-window { width: min(320px,86%); margin-inline: auto; }.manifesto-copy h2 { font-size: 25px; line-height: 1.9; }.manifesto-copy > p:not(.overline) { font-size: 15px; }.manifesto-copy .overline { font-size: 12px; }.giant-whisper { margin-top: 55px; font-size: clamp(30px,8.6vw,58px); }
  .editorial-heading { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 35px; }.editorial-heading h2 { font-size: 67px; }.editorial-heading p { font-size: 14px; }.story-viewport { padding-inline: 20px; }.story-track { gap: 24px; }.story-piece { width: min(75vw,370px); min-width: 245px; }.story-piece:nth-child(even) { padding-top: 34px; }.story-art img { aspect-ratio: .87; }.story-meta { font-size: 12px; }.story-piece h3 { font-size: 43px; }.story-piece > p { font-size: 13px; }
  .listening-layout { grid-template-columns: 1fr; gap: 70px; }.listening-art { width: min(360px,90%); margin: auto; padding: 25px; }.listening-copy h2 { font-size: 68px; }.listening-copy > p:not(.overline) { font-size: 15px; }.track-row { gap: 18px; }.track-name { font-size: 22px; }
  .film-section { min-height: 660px; margin-top: 10px; }.film-content h2 { font-size: clamp(44px,11vw,75px); line-height: 1.05; }.film-content > p:not(.overline) { font-size: 14px; }.film-side-label { display: none; }.film-open { min-height: 56px; padding-inline: 23px; font-size: 14px; }
  .reading-heading { font-size: 48px; margin-bottom: 38px; }.reading-grid { grid-template-columns: 1fr; gap: 45px; }.reading-door > img { aspect-ratio: 1.25; }.reading-door h3 { font-size: 44px; }.reading-door h3 em { font-size: 14px; }.reading-door p { font-size: 14px; }.archive-passage { margin-top: 15px; padding: 34px 0; }.archive-passage h3 { font-size: 40px; }.archive-passage h3 em { display: block; margin: 12px 0; font-size: 14px; }.archive-passage p { max-width: 82%; }.archive-passage > b { font-size: 45px; }
  .invitation { padding-block: 65px 100px; }.invitation h2 { font-size: 31px; }.invitation > p:not(.overline) { font-size: 15px; }.invitation .overline { font-size: 12px; letter-spacing: .08em; }.invitation-word { bottom: 20px; font-size: 135px; }
  .site-footer.shared-footer { padding: 45px 24px 26px; }.footer-topline { flex-direction: column; gap: 20px; }.footer-wordmark { font-size: 43px; }.footer-topline p { font-size: 13px; }.footer-nav { margin-block: 32px; gap: 18px 25px; }.footer-nav a { font-size: 13px; }.footer-end { flex-direction: column; gap: 12px; }
  .sound-player { grid-template-columns: minmax(0,1fr) auto; gap: 7px 12px; padding: 11px 16px calc(9px + env(safe-area-inset-bottom)); min-height: 112px; }.player-track { gap: 11px; }.player-cover { width: 42px; height: 42px; }.player-track strong { font-size: 16px; }.player-track small { font-size: 12px; }.player-transport { gap: 3px; }.player-play { width: 44px; height: 44px; }.player-transport .icon-button:not(.player-play) { width: 36px; }.player-seek { grid-column: 1/-1; gap: 11px; }.player-seek input { height: 26px; }.player-seek time { font-size: 12px; }.player-volume { display: none; }
  .film-dialog { padding: 15px; width: calc(100% - 24px); }.film-dialog h2 { font-size: 17px; }.film-dialog video { max-height: 58svh; }.film-choices { gap: 7px; }.film-choices button { font-size: 13px; padding-inline: 13px; }
  .page-masthead { min-height: 480px; padding: 133px 24px 55px; }.page-masthead h1 { font-size: clamp(56px,14vw,95px); }.page-masthead h1 > span:last-child { font-size: 20px; }.page-masthead > p { font-size: 15px; }.breadcrumbs { margin-bottom: 32px; font-size: 12px; }.page-masthead::before { background-position: 60% center; }
  .sub-shell { width: calc(100% - 40px); }.sub-section { padding: 48px 0; }.sub-heading { font-size: 30px; }.sub-heading span { display: block; font-size: 14px; margin-top: 10px; }.sub-lead { font-size: 15px; }
  .about-intro-panel, .about-concept-panel, .recorder-panel, .featured-work, .novel-story { grid-template-columns: 1fr; }.about-intro-panel img, .about-concept-panel img { max-height: 400px; }.recorder-panel .origin-box { grid-column: auto; }.featured-copy { padding: 27px 22px; }.featured-copy h2 { font-size: 60px; }.featured-copy p { font-size: 15px; }
  .works-grid, .store-product-grid, .manga-library-grid, .song-manga-grid, .character-grid { grid-template-columns: 1fr; gap: 26px; }.novel-grid { grid-template-columns: 1fr; gap: 25px; }.work-library-card, .manga-volume, .character-card, .novel-card { max-width: 480px; width: 100%; margin-inline: auto; }.manga-volume:last-child, .character-card:last-child { grid-column: auto; width: 100%; }.novel-card img { aspect-ratio: 1.1; }.work-library-card img { aspect-ratio: 1.2; }.dual-actions a { font-size: 14px; }
  .filter-row { grid-template-columns: repeat(3,1fr); gap: 8px; }.filter-row button { min-height: 64px; font-size: 13px; }.filter-row small { font-size: 12px; }.mission-grid, .experience-grid { grid-template-columns: 1fr; }.mission-card:last-child { grid-column: auto; }.experience-item { padding-block: 15px; }.experience-item p { font-size: 14px; }.purchase-benefits { grid-template-columns: repeat(2,1fr); }.purchase-benefits h2 { grid-column: 1/-1; }.resident-perks { grid-template-columns: repeat(2,1fr); gap: 24px; }.resident-perks span, .benefit span { font-size: 14px; }.join-card-grid { grid-template-columns: 1fr; }
  .archive-dashboard { grid-template-columns: 1fr; }.locations { grid-column: auto; }.location-grid { grid-template-columns: repeat(2,1fr); }.relationship-map { gap: 24px; }.dashboard-card { padding: 22px; }.tags span { font-size: 12px; padding: 4px 8px; }.paper-excerpt { padding: 58px 23px 32px; }.paper-excerpt p { font-size: 15px; }.paper-excerpt::before { padding-inline: 18px; white-space: nowrap; }.product-formats { grid-template-columns: 1fr; }.format-card p { font-size: 15px; }
}
@media (max-width: 370px) {
  .hero-story { max-width: 100%; }.portal-enter { display: none; }.dream-title h1 { font-size: 11.9vw; }.hero-intro { font-size: 13px; }.brand { font-size: 23px; }.index-toggle { padding-inline: 13px; }.player-cover { display: none; }.editorial-heading h2, .listening-copy h2 { font-size: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .page-atmosphere { display: none; }
}
.webgl-portal-ready .dream-backdrop img { opacity: 0; }
.page-atmosphere { opacity: 1; }
body.motion-off .dream-backdrop img { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .webgl-portal-ready .dream-backdrop img { opacity: 1; } }
.subpage-body:is(.theme-about,.theme-works,.theme-manga,.theme-novel,.theme-archive,.theme-store) { --accent: #cbb4e8; --accent-soft: #9671b221; background-color: var(--ink); }
.theme-store .page-masthead h1 { font-size: clamp(52px,8.2vw,125px); }
@media (max-width:767px) { .theme-store .page-masthead h1 { font-size: clamp(36px,10.8vw,76px); } }
.brand { display: flex; align-items: center; }
@media (min-width:901px) and (min-height:700px) {
  .story-section.is-pinned { height: calc(100svh - var(--player-height)); padding-block: 28px 25px; }
  .story-section.is-pinned .section-index { margin-bottom: 24px; }
  .story-section.is-pinned .editorial-heading { margin-bottom: 22px; }
  .story-section.is-pinned .editorial-heading h2 { font-size: 60px; }
  .story-section.is-pinned .story-track { padding-block: 0; }
  .story-section.is-pinned .story-piece:nth-child(even) { padding-top: 20px; }
  .story-section.is-pinned .story-art img { height: clamp(160px,calc(100svh - 520px),360px); aspect-ratio: auto; }
  .story-section.is-pinned .story-meta { margin: 14px 0 5px; line-height: 1.2; }
  .story-section.is-pinned .story-piece h3 { font-size: 40px; }
  .story-section.is-pinned .story-piece > p { margin-top: 8px; font-size: 13px; line-height: 1.7; }
  .story-section.is-pinned .gallery-progress { margin-top: 20px; }
}