/* HASHIVA: a drawing that is still being plotted. One live sheet sits behind everything; the page is its title block. */
@font-face { font-family: "Miriam"; src: url(fonts/miriam-libre-hebrew-400-normal.woff2) format("woff2"); font-weight: 400 500; font-display: swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; }
@font-face { font-family: "Miriam"; src: url(fonts/miriam-libre-hebrew-700-normal.woff2) format("woff2"); font-weight: 600 700; font-display: swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; }
@font-face { font-family: "Miriam"; src: url(fonts/miriam-libre-latin-400-normal.woff2) format("woff2"); font-weight: 400 500; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Miriam"; src: url(fonts/miriam-libre-latin-700-normal.woff2) format("woff2"); font-weight: 600 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Miriam Gap"; src: url(fonts/miriam-libre-latin-400-normal.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0020; }
@font-face { font-family: "Frank Ruhl"; src: url(fonts/frank-ruhl-libre-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Plex Sans"; src: url(fonts/ibm-plex-sans-hebrew-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Plex Sans"; src: url(fonts/ibm-plex-sans-hebrew-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Plex Mono"; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Shippori"; src: url(fonts/shippori-mincho-bold-subset.woff) format("woff"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --bp: #0b1b31; --bp-deep: #050d19; --paper: #10243f; --ink: #eef4fb; --line: #dbe7f6; --mute: #b9cbe0;
  --accent: #6cbcff; --rule: rgba(219, 231, 246, 0.26); --rift: #7ef25e; --hanko: #ff6b74;
  --display: "Frank Ruhl", "Miriam", "Times New Roman", serif;
  --body: "Plex Sans", "Miriam", system-ui, "Segoe UI", Arial, sans-serif;
  --mono: "Plex Mono", "Miriam", ui-monospace, Consolas, monospace;
  --jp: "Shippori", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --gut: max(16px, env(safe-area-inset-left, 0px), clamp(16px, 4vw, 64px));
  --halo: 0 0 18px rgba(3, 9, 20, 0.95), 0 1px 3px rgba(3, 9, 20, 0.9);
}
/* Hebrew pages: Miriam takes the Latin punctuation too, so no serif question mark lands in a Hebrew line. The mono's wide space would tear Hebrew words apart, hence the Gap. */
:root:lang(he) { --display: "Miriam", "Times New Roman", serif; --body: "Miriam", system-ui, "Segoe UI", Arial, sans-serif; --mono: "Miriam Gap", "Plex Mono", "Miriam", ui-monospace, Consolas, monospace; }
:root[data-tone="rift"] { --accent: #7ef25e; }
:root[data-tone="mem"] { --accent: #d7dde6; }
:root[data-tone="blue"] { --accent: #8fcbff; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bp); }
body { margin: 0; color: var(--ink); background: var(--bp); font: 400 1.0625rem/1.7 var(--body); overflow-x: clip; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--bp-deep); }
main:focus, section:focus { outline: none; box-shadow: none; }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
.skip { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 60; padding: 10px 16px; background: var(--ink); color: var(--bp-deep); font-weight: 600; transform: translateY(-300%); }
.skip:focus { transform: none; }

/* ===== the stage ===== */
#stage { position: fixed; inset: 0; inline-size: 100vw; block-size: 100vh; block-size: 100lvh; z-index: 0; display: block; }
#lens { position: fixed; left: 0; top: 0; z-index: 24; display: block; pointer-events: none; opacity: 0; will-change: transform; }
#lens.on { opacity: 1; }
html:not(.js) #stage, html:not(.js) #lens { display: none; }
html:not(.js) body { background-image: radial-gradient(circle at 70% 40%, #14335a, var(--bp) 62%); background-attachment: fixed; }
main, .foot { position: relative; z-index: 2; }

/* ===== the strip along the top ===== */
.top { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; gap: clamp(12px, 2vw, 32px); padding-block: 12px; padding-inline: var(--gut); font: 400 0.8125rem/1 var(--mono); text-shadow: var(--halo); background: linear-gradient(rgba(5, 13, 25, 0.82), rgba(5, 13, 25, 0)); }
.brand { inline-size: 44px; block-size: 44px; display: grid; place-items: center; }
.brand svg { inline-size: 32px; fill: none; stroke: var(--ink); stroke-width: 4; }
.top nav { margin-inline-end: auto; }
.top nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.top nav a { display: grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; padding-inline: 6px; text-decoration: none; }
.top nav .w a { padding-inline: 12px; }
.top nav a:hover, .lang:hover, .tools button:hover { color: var(--accent); }
.top nav a[aria-current] { color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
.tools { display: flex; align-items: center; gap: 4px; }
.tools button, .lang { min-block-size: 44px; padding-inline: 12px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font: inherit; text-shadow: inherit; white-space: nowrap; }
.song[aria-pressed="true"] { color: var(--accent); }

/* ===== the opening sheet: the E01 thumbnail, its left side dissolving into the live sheet ===== */
.hero { position: relative; min-block-size: 100svh; display: grid; align-content: center; justify-items: start; overflow: clip; padding-inline: var(--gut); padding-block: 96px 96px; direction: ltr; }
.hero-art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; object-position: 62% 40%; -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.12) 6%, rgba(0, 0, 0, 0.34) 26%, #000 50%), linear-gradient(to top, transparent 0, #000 12%); mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.12) 6%, rgba(0, 0, 0, 0.34) 26%, #000 50%), linear-gradient(to top, transparent 0, #000 12%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.hero-copy { position: relative; display: grid; gap: clamp(12px, 2.2vh, 24px); justify-items: start; inline-size: min(46vw, 680px); }
h1 { display: block; inline-size: 100%; }
.logo { inline-size: 100%; filter: drop-shadow(0 0 26px rgba(70, 170, 255, 0.55)); }
.kind { font: 400 0.875rem/1.3 var(--mono); color: var(--line); text-shadow: var(--halo); letter-spacing: 0.04em; }
.tagline { font: 700 clamp(1.25rem, 2.2vw, 2rem)/1.2 var(--display); text-shadow: var(--halo); }
html[dir="rtl"] .hero-copy > :not(h1) { direction: rtl; }
.start { display: inline-flex; align-items: center; gap: 12px; min-block-size: 52px; padding-inline: 18px 22px; border: 1px solid var(--accent); color: var(--ink); background: rgba(5, 13, 25, 0.6); font: 400 1rem/1 var(--mono); text-decoration: none; transition: background 0.2s, color 0.2s; }
.start svg { inline-size: 14px; fill: currentColor; transform: rotate(90deg); }
.start:hover { background: var(--accent); color: var(--bp-deep); }

/* the one orchestrated moment: the neon catches, as it does in the opening */
html.js:not(.no-motion) .logo { animation: light 1.5s 0.3s steps(9, end) both, buzz 7s 2.4s infinite; }
html.js:not(.no-motion) .tagline, html.js:not(.no-motion) .start { animation: rise 0.8s 1.3s ease-out both; }
html.js:not(.no-motion) .hero-art { animation: push 28s ease-in-out infinite alternate; }
@keyframes light { 0% { opacity: 0.1; } 22% { opacity: 0.8; } 34% { opacity: 0.2; } 58% { opacity: 1; } 70% { opacity: 0.45; } 100% { opacity: 1; } }
@keyframes buzz { 0%, 91%, 100% { opacity: 1; } 92% { opacity: 0.7; } 93% { opacity: 1; } 95% { opacity: 0.82; } }
@keyframes rise { from { opacity: 0; translate: 0 14px; } to { translate: 0 0; } }
@keyframes push { from { scale: 1; } to { scale: 1.05; } }

/* ===== the cinema: the frame from "Liar". The screen sits at the same place in the picture at every size ===== */
.hall { --rw: max(100vw, calc(100svh * 1.791)); position: relative; block-size: 100svh; min-block-size: 480px; overflow: clip; background: #020203; outline: none; }
.room { position: absolute; inset-block-start: 0; left: calc(50% - var(--rw) / 2); inline-size: var(--rw); block-size: calc(var(--rw) / 1.791); transform-origin: 0 0; transition: transform 1.1s cubic-bezier(0.5, 0, 0.15, 1); }
.room-art { inline-size: 100%; block-size: 100%; max-inline-size: none; }
.spill { position: absolute; left: 14%; right: 14%; top: 2%; bottom: 26%; background: radial-gradient(50% 58% at 50% 42%, var(--accent), transparent 72%); opacity: 0.16; mix-blend-mode: screen; pointer-events: none; }
html.js:not(.no-motion) .spill { animation: flicker 5s steps(14, end) infinite; }
@keyframes flicker { 0%, 100% { opacity: 0.16; } 30% { opacity: 0.2; } 45% { opacity: 0.13; } 70% { opacity: 0.19; } }
.screen { position: absolute; left: 28.35%; top: 8%; inline-size: 43.25%; block-size: 37.75%; background: #05070b; overflow: hidden; box-shadow: 0 0 calc(var(--rw) * 0.03) color-mix(in srgb, var(--accent) 34%, transparent); transition: box-shadow 0.6s; }
.reel { display: flex; block-size: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; position: relative; }
.reel::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; inline-size: 100%; block-size: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.go { position: relative; display: block; block-size: 100%; color: #fff; text-decoration: none; overflow: hidden; }
.go img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 0.5s ease-out; }
.go::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(2, 5, 12, 0.92), rgba(2, 5, 12, 0.2) 56%, transparent 74%); }
.go:hover img { scale: 1.04; }
.cap { position: absolute; z-index: 1; inset-inline: 4%; inset-block-end: 6%; display: grid; gap: 0.1em; font-size: calc(var(--rw) * 0.0118); text-shadow: 0 2px 6px #000; }
.num { font: 400 0.82em/1.2 var(--mono); color: var(--accent); }
.ttl { font: 700 2.2em/1.05 var(--display); }
.hint { font-size: 1em; line-height: 1.3; }
.tri { position: absolute; z-index: 1; left: 50%; top: 44%; inline-size: calc(var(--rw) * 0.05); translate: -50% -50%; fill: none; stroke: #fff; stroke-width: 1.2; filter: drop-shadow(0 0 10px #000); opacity: 0.8; transition: opacity 0.2s, scale 0.2s, fill 0.2s; }
.go:hover .tri, .go:focus-visible .tri { opacity: 1; scale: 1.12; fill: #fff; }
.go:focus-visible { outline-offset: -6px; box-shadow: none; }
.kanji { position: absolute; z-index: 1; top: 6%; right: 2.4%; writing-mode: vertical-rl; font: 700 calc(var(--rw) * 0.016)/1 var(--jp); letter-spacing: 0.14em; text-shadow: 0 0 10px #000, 0 1px 3px #000; }
html[dir="rtl"] .kanji { right: auto; left: 2.4%; }
.live { position: absolute; inset: 0; z-index: 2; background: #000; container-type: size; }
.live iframe { position: absolute; top: 0; left: calc(50cqw - 50cqh * 16 / 9); block-size: 100%; inline-size: auto; aspect-ratio: 16 / 9; border: 0; background: #000; }
.live iframe:fullscreen { aspect-ratio: auto; }
.nudge { position: absolute; top: 26.9%; translate: 0 -50%; inline-size: calc(var(--rw) * 0.045); block-size: calc(var(--rw) * 0.12); min-inline-size: 44px; display: grid; place-items: center; color: var(--line); transition: color 0.2s, scale 0.2s; }
.nudge.left { right: 72.4%; }
.nudge.right { left: 72.4%; }
.nudge svg { inline-size: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nudge:hover { color: var(--accent); scale: 1.12; }
.in-screen .nudge { opacity: 0; pointer-events: none; }
.in-screen .top, .in-screen .titleblock { opacity: 0; pointer-events: none; }
.top { transition: opacity 0.4s; }
.hall-bar { position: absolute; inset-block-end: 14px; inset-inline: 0; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 18px; padding-inline: var(--gut); font: 400 0.8125rem/1 var(--mono); }
.dots { list-style: none; margin: 0; }
.dots, .subs { display: flex; align-items: center; gap: 2px; padding-inline: 6px; background: rgba(4, 6, 11, 0.86); border: 1px solid var(--rule); }
.dots button, .subs button, .pl-close { min-inline-size: 44px; min-block-size: 44px; padding-inline: 10px; }
.subs { color: var(--mute); padding-inline-start: 12px; }
.subs button { color: var(--ink); }
.dots [aria-current], .subs [aria-pressed="true"] { color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
.pl-close { color: var(--ink); background: rgba(4, 6, 11, 0.86); border: 1px solid var(--accent); }
.pl-close[hidden] { display: none; }
html:not(.js) .nudge, html:not(.js) .hall-bar { display: none; }

/* ===== the strip of faces: a ruler that slides ===== */
.cast { padding-block: clamp(40px, 8svh, 84px) clamp(30px, 6svh, 60px); }
.ruler { display: flex; overflow-x: auto; scrollbar-width: none; cursor: grab; touch-action: pan-x pan-y; padding-block: 6px 2px; background: linear-gradient(rgba(5, 13, 25, 0.76), rgba(5, 13, 25, 0.76)); border-block: 1px solid var(--rule); outline-offset: -3px; }
.ruler::-webkit-scrollbar { display: none; }
.ruler.grab { cursor: grabbing; user-select: none; }
.strip { display: flex; flex: none; }
.strip li { position: relative; flex: none; inline-size: clamp(116px, 11.5vw, 170px); padding: 8px 6px 34px; background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 10%); background-size: 100% 7px; background-repeat: no-repeat; background-position: 0 100%; border-inline-end: 1px solid var(--rule); }
.rulers { display: grid; gap: clamp(28px, 5vh, 56px); }
.head { position: relative; display: block; aspect-ratio: 1; transition: scale 0.25s; }
.head img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; transition: opacity 0.25s; }
.head .col { opacity: 0; }
.strip li:hover .head { scale: 1.06; }
.strip li:hover .col, .ruler:focus-visible .col { opacity: 1; }
.strip li:hover .wire, .ruler:focus-visible .wire { opacity: 0; }
.who-n { display: block; margin-block-start: 6px; font: 600 0.875rem/1.2 var(--body); text-align: center; unicode-bidi: plaintext; }
.tick { position: absolute; left: 6px; bottom: 9px; font: 400 0.625rem/1 var(--mono); color: var(--mute); }
.social { display: flex; justify-content: center; gap: 6px; margin-block-start: clamp(18px, 3svh, 30px); padding-inline: var(--gut); }
.social a { inline-size: 52px; block-size: 52px; display: grid; place-items: center; border: 1px solid var(--rule); background: rgba(5, 13, 25, 0.6); transition: color 0.2s, border-color 0.2s, translate 0.2s; }
.social svg { inline-size: 22px; fill: currentColor; }
.social a:hover { color: var(--accent); border-color: var(--accent); translate: 0 -3px; }

/* ===== the creator ===== */
.about { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; padding-inline: var(--gut); padding-block: clamp(50px, 9svh, 110px); }
.about-art { inline-size: 100%; -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, #000 82%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
.about-copy { display: grid; gap: 16px; justify-items: start; max-inline-size: 34em; padding: clamp(14px, 2vw, 26px); background: rgba(5, 13, 25, 0.62); }
.about h2 { font: 700 clamp(2.4rem, 5vw, 4.4rem)/1 var(--display); text-shadow: var(--halo); }
blockquote { margin: 0; font: 700 clamp(1.3rem, 2.4vw, 2rem)/1.2 var(--display); color: var(--accent); text-shadow: var(--halo); }
.about p { color: var(--line); text-shadow: var(--halo); }

/* ===== the shop that isn't open yet ===== */
.shop { padding-inline: var(--gut); padding-block: clamp(50px, 9svh, 110px); }
.shop-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-block-end: clamp(22px, 4svh, 40px); }
.shop h2, .blog h2 { font: 700 clamp(2.2rem, 4.6vw, 4rem)/1 var(--display); text-shadow: var(--halo); }
.soon { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 2px solid var(--hanko); color: var(--hanko); font: 600 1rem/1 var(--mono); rotate: -4deg; background: rgba(5, 13, 25, 0.7); }
.soon-jp { font: 700 1.25rem/1 var(--jp); }
.goods { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 20px); }
.goods li { padding: 12px 10px 14px; border: 1px solid var(--rule); background: rgba(5, 13, 25, 0.62); display: grid; gap: 4px; transition: border-color 0.25s, translate 0.25s, opacity 0.6s, rotate 0.6s; }
.goods svg { inline-size: 100%; }
.part { fill: none; stroke: var(--line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.part text { fill: var(--accent); stroke: none; font: 700 44px var(--display); }
.dim { fill: none; stroke: var(--mute); stroke-width: 1; }
.goods h3 { font: 600 1rem/1.3 var(--body); }
.tag { font: 400 0.8125rem/1 var(--mono); color: var(--mute); text-align: end; }
.goods li:hover { border-color: var(--accent); translate: 0 -4px; }
.goods li:hover .part { stroke: var(--accent); }
.reveal.armed { opacity: 0; translate: 0 18px; }

/* ===== the log ===== */
.blog { padding-inline: var(--gut); padding-block: clamp(50px, 9svh, 110px); max-inline-size: 1040px; margin-inline: auto; }
.blog h2 { margin-block-end: clamp(18px, 3svh, 30px); }
.log { list-style: none; padding-block: 0; padding-inline: 14px; margin: 0; border-block-start: 1px solid var(--rule); background: rgba(5, 13, 25, 0.66); }
.log li { display: grid; grid-template-columns: 7.2em minmax(0, 1fr) auto; gap: 6px 18px; align-items: baseline; padding-block: 12px; border-block-end: 1px solid var(--rule); transition: opacity 0.6s, translate 0.6s; text-shadow: var(--halo); }
.log time, .src { font: 400 0.8125rem/1.3 var(--mono); color: var(--mute); }
.log .what { font-size: 1.0625rem; }
.log a.what { min-block-size: 24px; text-decoration-color: var(--accent); }
.log a.what:hover { color: var(--accent); }

/* ===== the bill ===== */
.credits { position: relative; min-block-size: 100svh; display: grid; justify-items: start; align-content: center; gap: 28px; padding-inline: var(--gut); padding-block: 14svh; overflow: clip; }
.follow { font: 700 clamp(1.1rem, 2vw, 1.5rem)/1.2 var(--display); text-shadow: var(--halo); }
.follow a { display: inline-flex; align-items: center; min-block-size: 44px; }
.cred-diva { position: absolute; inset-block-end: 0; inset-inline-end: clamp(0px, 4vw, 90px); block-size: min(88svh, 760px); inline-size: auto; max-inline-size: none; opacity: 0.96; }
.invoice { position: relative; inline-size: min(100%, 520px); padding: clamp(20px, 3vw, 34px); background: #10243f; border: 1px solid var(--rule); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); transform: rotate(-1.4deg); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s; }
.invoice.armed { transform: translateY(46px) rotate(4deg); opacity: 0; }
.inv-jp { font: 700 clamp(2rem, 3.4vw, 2.9rem)/1 var(--jp); letter-spacing: 0.2em; }
.inv-no { font: 400 0.75rem/1 var(--mono); color: var(--mute); margin-block: 10px 18px; }
.invoice h2 { font: 400 0.8125rem/1 var(--mono); color: var(--mute); margin-block-end: 10px; }
.invoice dl > div { display: flex; justify-content: space-between; gap: 18px; padding-block: 8px; border-block-end: 1px solid var(--rule); font-size: 0.9375rem; }
.invoice dt { color: var(--mute); }
.invoice dd { font-weight: 600; text-align: end; }
.inv-total, .inv-due { display: flex; justify-content: space-between; gap: 16px; font: 400 0.875rem/1.4 var(--mono); padding-block-start: 12px; }
.inv-total b { font: 700 1.5rem/1 var(--display); }
.inv-tools { font-size: 0.8125rem; color: var(--mute); margin-block-start: 14px; }
.hanko { position: absolute; inset-block-end: 54px; inset-inline-start: 38%; inline-size: 92px; block-size: 92px; display: grid; place-items: center; border: 3px solid var(--hanko); border-radius: 50%; color: var(--hanko); font: 700 1.5rem/1 var(--jp); transform: rotate(-14deg); }
.invoice.due .hanko { animation: stamp 0.34s 0.65s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.invoice.armed .hanko { opacity: 0; }
@keyframes stamp { from { opacity: 0; transform: rotate(-14deg) scale(2.6); } to { opacity: 1; transform: rotate(-14deg) scale(1); } }

/* ===== the song ===== */
.lyric { position: fixed; z-index: 25; inset-block-end: 60px; inset-inline: var(--gut); display: grid; justify-items: center; gap: 2px; text-align: center; opacity: 0; transition: opacity 0.3s; pointer-events: none; text-shadow: 0 0 16px #000, 0 2px 4px #000; }
.lyric.on { opacity: 1; }
.lyr-jp { font: 700 clamp(1.3rem, 2.6vw, 2.2rem)/1.3 var(--jp); letter-spacing: 0.1em; }
.lyr-tr { font-size: clamp(1rem, 1.6vw, 1.3rem); color: var(--line); }
.belt { position: fixed; z-index: 1; inset-block-end: 0; inset-inline-start: 50%; translate: -50% 0; block-size: 84svh; inline-size: auto; max-inline-size: none; opacity: 0; transition: opacity 1s; pointer-events: none; }
html[dir="rtl"] .belt { translate: 50% 0; }
.belt.on { opacity: 0.82; }
@media (hover: none) { img, canvas { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
.cred-diva { transition: opacity 0.6s; }
.chorus .cred-diva { opacity: 0; }

/* ===== the small print ===== */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-inline: var(--gut); padding-block: 22px 96px; font: 400 0.8125rem/1.4 var(--mono); color: var(--mute); text-shadow: var(--halo); }
.foot ul { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.foot a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 6px; }
.foot a:hover { color: var(--accent); }
.titleblock { position: fixed; z-index: 20; inset-block-end: 14px; inset-inline-end: var(--gut); display: grid; grid-template-columns: auto auto auto auto; gap: 4px 12px; padding: 7px 12px; border: 1px solid var(--rule); background: rgba(5, 13, 25, 0.72); font: 400 0.6875rem/1.2 var(--mono); color: var(--line); pointer-events: none; }
.titleblock .k { color: var(--mute); }
.titleblock b { font-weight: 600; }
.titleblock .jp { font-family: var(--jp); }
.titleblock .wide { grid-column: span 2; color: #7ef25e; }

/* ===== reading pages keep a solid sheet ===== */
.doc { max-inline-size: 760px; margin-inline: auto; margin-block: 96px 40px; padding: clamp(20px, 4vw, 44px); background: rgba(9, 22, 41, 0.95); border: 1px solid var(--rule); display: grid; gap: 22px; }
.doc h1 { display: block; font: 700 clamp(2rem, 4vw, 3rem)/1.1 var(--display); }
.doc h2 { font: 700 1.375rem/1.3 var(--display); margin-block-end: 6px; }
.doc ul { list-style: disc; padding-inline-start: 1.3em; }
.doc li + li { margin-block-start: 6px; }
.doc a { color: var(--accent); }
.doc .start { justify-self: start; color: var(--ink); }
.cta { display: inline-flex; align-items: center; min-block-size: 48px; padding-inline: 18px; border: 1px solid var(--accent); text-decoration: none; }

/* ===== narrow screens: the hall is cropped in, so the screen fills the width and Yoni still sits under it ===== */
@media (max-width: 899px) {
  .top { position: absolute; flex-wrap: wrap; }
  .tools { inline-size: 100%; order: 3; justify-content: flex-start; flex-wrap: wrap; }
  .hero { padding-block: 176px 44svh; align-content: start; }
  .hero-art { object-position: 56% 50%; -webkit-mask-image: linear-gradient(to top, transparent 0, #000 12%, #000 62%, rgba(0, 0, 0, 0.14) 92%); mask-image: linear-gradient(to top, transparent 0, #000 12%, #000 62%, rgba(0, 0, 0, 0.14) 92%); }
  .hero-copy { inline-size: 100%; }
  .hall { --rw: 226vw; display: flex; flex-direction: column; align-items: center; block-size: auto; min-block-size: 0; padding-block-end: 14px; }
  .room { position: relative; left: auto; flex: none; }
  .cap { font-size: 3.6vw; }
  .ttl { font-size: 1.9em; }
  .tri { inline-size: 13vw; }
  .kanji { font-size: 4.4vw; }
  .nudge { top: 52.5%; block-size: 44px; inline-size: 72px; }
  .nudge svg { block-size: 28px; }
  .nudge.left { right: auto; left: 29%; }
  .nudge.right { left: auto; right: 29%; }
  .hall-bar { position: static; }
  .strip li { inline-size: 112px; }
  .about { grid-template-columns: minmax(0, 1fr); }
  .goods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .log li { grid-template-columns: minmax(0, 1fr) auto; }
  .log .what { grid-column: 1 / -1; grid-row: 2; }
  .credits { padding-block-end: 0; }
  .cred-diva { position: relative; inset: auto; block-size: auto; inline-size: min(100%, 420px); margin-inline: auto; order: 5; }
  .titleblock { display: none; }
  .foot { padding-block-end: 24px; }
  .belt { block-size: auto; inline-size: 100vw; }
}
@media (min-width: 900px) and (min-height: 0) and (max-width: 1180px) { .goods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.no-motion { scroll-behavior: auto; }
html.no-motion .room, html.no-motion .invoice, html.no-motion .reveal { transition: none; }
html.no-motion .invoice.due .hanko { animation: none; }

@media (forced-colors: active) {
  #stage, #lens, .cred-diva, .belt, .spill { display: none; }
  .start, .cta, .pl-close, .invoice, .social a { border: 1px solid ButtonText; }
  .social svg { fill: ButtonText; }
}