/*
  Mono-kun site — styles.
  Purpose: every visual rule for index.html. The hero follows the "Mainframe" template
  (fixed video, typewriter, pill buttons); the header follows monolith.asia (logo left, "Menu" right, white drop-down panel); the sections below
  sit on a 4K stone wall (.wall) and borrow the model-sheet type (serif titles, small caps).
  Extension points: colors and fonts are tokens in :root; each section has its own block
  (search for its id, e.g. "#watch"). Breakpoints follow the template: 640px (sm), 768px (md),
  plus 1024px for the wider grids.
*/

@font-face { font-family: 'Montserrat'; src: url("../assets/fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url("../assets/fonts/montserrat-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
/* The same Montserrat at 80 %, for everything that used the old serif (titles, leads, names): the
   serif's small letters were much smaller, so all those sizes stay balanced without retuning each one. */
@font-face { font-family: 'Montserrat Display'; src: url("../assets/fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; size-adjust: 80%; }
@font-face { font-family: 'Montserrat Display'; src: url("../assets/fonts/montserrat-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; size-adjust: 80%; }

:root {
  color-scheme: only light; /* never auto-darkened by the browser (see the meta tag in index.html) */
  /* One typeface throughout (the user's choice, 2026-10-17): Montserrat. Japanese characters fall
     back to the system's Japanese fonts. The old names stay as aliases so every rule keeps working. */
  --font-sans: 'Montserrat', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
  --font-logo: var(--font-sans);
  --font-serif: 'Montserrat Display', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
  --font-body: var(--font-sans);
  --font-ui: var(--font-sans);
  --font-label: var(--font-sans);

  --night: #1b130e;
  --paper: #efe5d4;
  --card: #f6efe3;
  --ink: #2b2118;
  --ink-soft: #6e5c49;
  --line: rgba(43, 33, 24, 0.14);
  --maroon: #5e1a1f;
  --maroon-deep: #47121a;
  --cream: #f3eadb;
  --mustard: #b8832f;
  --tan: #b08a60;
  --indigo: #1a2232;
  --indigo-soft: #26324a;
  --slate: #56708c;

  --gutter: 20px;
}
@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 768px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body); font-size: 17px; /* body text a size up (user request); titles unchanged */
  color: var(--ink);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--mustard); outline-offset: 3px; }

/* ---------- Background video (template: fixed, cover, 70% center), looping ---------- */
.hero-video {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 70% center;
  background: #1b130e;
  pointer-events: none;
}
.is-past-hero .hero-video { visibility: hidden; }
/* the second clip sits on top and fades in and out over the first */
.hero-video-b { opacity: 0; transition: opacity 0.7s ease-in-out; background: transparent; }
.hero-video-b.is-on { opacity: 1; }
/* Tall screens (phones) show only a narrow slice of the 16:9 clips: aim it at his face. The
   close-up's face is at about 80% of the frame's width, the bamboo clip's at about 52%. */
@media (max-aspect-ratio: 4/5) {
  .hero-video { object-position: 90% center; }
  .hero-video-b { object-position: 52% center; }
}

/* ---------- Intro film ----------
   Shown only when the page's first script adds html.intro-on (JavaScript on, motion allowed).
   js/main.js cuts a door-shaped hole in .intro (clip-path) and grows it, with .intro-door's glow
   on its edges, until the site behind fills the screen. */
.intro, .intro-door { display: none; }
html.intro-on .intro { display: block; }
html.intro-on, html.intro-on body { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 100; background: #000; overflow: hidden; }
.intro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; transform-origin: 50% 50%; }
.intro-door {
  position: fixed; z-index: 101; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none;
  border-radius: 1px;
  box-shadow:
    0 0 0 1.5px rgba(255, 240, 214, 0.95),
    0 0 14px 3px rgba(255, 205, 140, 0.9),
    0 0 48px 14px rgba(255, 165, 80, 0.5),
    inset 0 0 26px 8px rgba(255, 196, 120, 0.55);
}
html.intro-on .intro-door { display: block; opacity: 0; }
.intro-skip {
  position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-label); font-size: 14px; letter-spacing: 0.04em; color: rgba(255, 244, 228, 0.82);
  background: rgba(20, 14, 8, 0.35); border: 1px solid rgba(255, 220, 170, 0.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.6s ease 1.2s, background-color 0.2s, color 0.2s;
}
html.intro-on .intro-skip { opacity: 1; }
.intro-skip:hover, .intro-skip:focus-visible { background: rgba(60, 40, 20, 0.6); color: #fff; }

/* ---------- Navbar ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 640px) { .nav { padding: 20px 32px; } }
.nav.is-solid {
  color: var(--ink);
  background: rgba(239, 229, 212, 0.88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-text {
  font-family: var(--font-logo); font-weight: 600;
  font-size: 21px; letter-spacing: -0.025em; line-height: 1;
}
.logo-mark { width: 13px; height: 21px; flex: none; user-select: none; } /* Monolith rectangle */
@media (min-width: 640px) {
  .logo-text { font-size: 26px; }
  .logo-mark { width: 15.5px; height: 25.5px; }
}

/* "Menu" + two-line icon, as on monolith.asia (Plus Jakarta Sans label, long thin lines) */
.menu-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 4px 8px 10px; margin: -8px -4px -8px 0; border: 0; background: none; cursor: pointer;
  color: inherit; font-family: var(--font-label); font-size: 18px; line-height: 1;
}
.menu-btn-icon { position: relative; display: block; width: 38px; height: 10px; }
.menu-btn-icon span {
  position: absolute; right: 0; height: 1.5px; border-radius: 1px; background: currentColor;
  transition: width 0.3s cubic-bezier(0.3, 0.7, 0.2, 1), transform 0.3s;
}
.menu-btn-icon span:nth-child(1) { top: 0; width: 100%; }
.menu-btn-icon span:nth-child(2) { bottom: 0; width: 100%; }
.menu-btn:hover .menu-btn-icon span:nth-child(2), .menu-btn:focus-visible .menu-btn-icon span:nth-child(2) { width: 62%; }
@media (max-width: 420px) { .menu-btn-label { font-size: 16px; } .menu-btn-icon { width: 32px; } }

/* The menu: a white card that drops down at the top right (like monolith.asia's). Clicking
   outside it, a link, the × or Escape closes it. */
.menu { position: fixed; inset: 0; z-index: 30; }
.menu[hidden] { display: none; }
.menu-panel {
  position: absolute; top: 12px; right: 12px;
  width: min(380px, calc(100vw - 24px));
  background: #fff; color: #000; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.04);
  font-family: var(--font-ui);
  opacity: 0; translate: 0 -10px; scale: 0.98; transform-origin: 100% 0;
  transition: opacity 0.22s ease, translate 0.32s cubic-bezier(0.2, 0.9, 0.3, 1), scale 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@media (min-width: 640px) { .menu-panel { top: 14px; right: 18px; } }
.menu.is-open .menu-panel { opacity: 1; translate: 0 0; scale: 1; }
.menu-close {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; padding: 6px;
  border: 0; background: none; color: #000; cursor: pointer; border-radius: 50%;
  transition: background-color 0.2s, rotate 0.3s;
}
.menu-close svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.menu-close:hover { background: #f1f1ef; rotate: 90deg; }
.menu-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 30px 32px 26px; }
.menu-links a {
  position: relative; padding: 5px 0; color: #000; text-decoration: none;
  font-size: 22px; font-weight: 400; line-height: 1.3;
  opacity: 0; translate: 0 6px; transition: opacity 0.3s, translate 0.3s, color 0.2s;
}
.menu.is-open .menu-links a { opacity: 1; translate: 0 0; }
.menu.is-open .menu-links a:nth-child(2) { transition-delay: 0.04s; }
.menu.is-open .menu-links a:nth-child(3) { transition-delay: 0.08s; }
.menu.is-open .menu-links a:nth-child(4) { transition-delay: 0.12s; }
.menu-links a::after { /* underline that grows on hover */
  content: ""; position: absolute; left: 0; bottom: 3px; width: 100%; height: 1.5px; background: currentColor;
  scale: 0 1; transform-origin: 0 50%; transition: scale 0.3s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.menu-links a:hover::after, .menu-links a:focus-visible::after { scale: 1 1; }
.menu-foot {
  display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 14px 32px 16px;
  background: #e9e9e7; font-size: 13px;
}
.menu-foot a { color: #5f6567; text-decoration: none; transition: color 0.2s; }
.menu-foot a:hover { color: #000; }
@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-links a { transition: none; translate: none; scale: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; z-index: 1;
  height: 100vh; height: 100svh; min-height: 560px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 20px 48px;
  overflow: hidden;
  color: #fff;
}
@media (min-width: 640px) { .hero { padding: 0 32px 48px; } }
@media (min-width: 768px) { .hero { justify-content: center; padding: 0 40px; } }
.hero-content { position: relative; z-index: 10; max-width: 36rem; }

.hero-type {
  margin: 0 0 20px; min-height: 54px;
  font-size: clamp(20px, 4.2vw, 29px); line-height: 1.35; font-weight: 400;
}
@media (min-width: 640px) { .hero-type { margin-bottom: 24px; } }
.cursor {
  display: inline-block; width: 2px; height: 1.1em; margin-left: 2px;
  background: #fff; vertical-align: middle;
  animation: blink 1s step-end infinite;
}
.cursor.is-done { display: none; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.pills {
  display: flex; flex-wrap: wrap; row-gap: 4px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.pills.is-visible { opacity: 1; transform: none; }
.no-js .pills, html:not(.js) .pills { opacity: 1; transform: none; }

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 0.2em 0.4em; padding: 0.3em 16px;
  font-size: 14.5px; line-height: 1.5; white-space: nowrap; text-decoration: none;
  color: #000; background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.pill:hover { background: #000; color: #fff; }
.pill-outline { gap: 8px; color: #fff; background: transparent; border-color: #fff; }
.pill-ig { gap: 7px; }
.pill-outline:hover { background: #fff; color: #000; }
.pill-outline u { text-underline-offset: 1px; }
@media (min-width: 640px) {
  .pill { font-size: 16.5px; padding: 0.3em 20px; }
  .pill-outline { gap: 12px; }
}


/* ---------- Shared section parts ---------- */
.section { position: relative; z-index: 1; padding: 88px 0; overflow: hidden; }
@media (min-width: 768px) { .section { padding: 120px 0; } }
.wrap { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }

/* Stone wall behind the light ("paper") sections: a fixed layer, so the sections scroll over one
   still wall. .wall-zone's clip-path keeps the fixed layer inside the zone (and covers the fixed
   hero video there); this also works on iOS, unlike background-attachment: fixed.
   Texture: Poly Haven "Stone Wall" (CC0) limestone, 4096 px seamless tile with warm lamp light
   baked in by tools/monokun/litwall (exposure 1.3, sun 0.9, warmth 0.8). Shown at 2048 CSS px, i.e. one texture pixel per screen pixel on
   retina / 4K screens; phones get the 2048 px version at 1024 CSS px. AVIF first, JPEG fallback.
   --wall-wash lays a cream veil over it so text stays readable (0 = raw stone). */
.wall-zone { position: relative; z-index: 1; clip-path: inset(0); }
/* Only Episodes and Gallery show the stone; Meet and Real life have solid backgrounds (user's
   choice) that cover the wall. On the stone: darker secondary text and a soft light halo. */
:is(#watch, #gallery) { --ink-soft: #45382b; }
:is(#watch, #gallery) :is(.kicker, .title, .subhead, .mini, .ep-meta, .ep-title, .ep-text, .sheet-name, .sheet-role,
  .facts, .bio, .stage-caption, .scenes figcaption, .real-lead, .real-photo figcaption, .link-btn, .next-title) {
  text-shadow: 0 0 2px rgba(244, 239, 230, 0.9), 0 0 12px rgba(244, 239, 230, 0.95);
}
.wall {
  --wall-wash: rgba(247, 238, 222, 0.4);
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-color: #b89c74;
  background-image: linear-gradient(var(--wall-wash), var(--wall-wash)), url("../assets/img/wall/limestone-wall-4k.jpg");
  background-image: linear-gradient(var(--wall-wash), var(--wall-wash)),
    image-set(url("../assets/img/wall/limestone-wall-4k.avif") type("image/avif"), url("../assets/img/wall/limestone-wall-4k.jpg") type("image/jpeg"));
  background-size: auto, 2048px auto;
  background-position: center top;
}
@media (max-width: 900px) {
  .wall {
    background-image: linear-gradient(var(--wall-wash), var(--wall-wash)), url("../assets/img/wall/limestone-wall-2k.jpg");
    background-image: linear-gradient(var(--wall-wash), var(--wall-wash)),
      image-set(url("../assets/img/wall/limestone-wall-2k.avif") type("image/avif"), url("../assets/img/wall/limestone-wall-2k.jpg") type("image/jpeg"));
    background-size: auto, 1024px auto;
  }
}
.paper { background: transparent; }
/* Solid parchment with a faint grain (Meet), as before the stone wall. */
.paper-solid {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}

.kicker {
  margin: 0 0 14px;
  font-family: var(--font-serif); font-weight: 600;
  font-size: 16.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.title {
  margin: 0 0 48px;
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(42px, 6.4vw, 80px); line-height: 0.98; letter-spacing: -0.01em;
  text-wrap: balance;
}
.subhead {
  margin: 72px 0 22px;
  font-family: var(--font-serif); font-weight: 600; font-size: 28px;
}
.mini {
  margin: 26px 0 10px;
  font-family: var(--font-serif); font-weight: 600;
  font-size: 16.5px; letter-spacing: 0.12em; text-transform: uppercase;
}

.btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 12px 22px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--cream);
  font-size: 17px; font-weight: 500; cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}
.btn:hover { background: var(--maroon); }
.link-btn {
  display: inline-block; margin-top: 18px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 17px; text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--maroon); }

.pixel { image-rendering: pixelated; }

/* Scroll-in animation (only when JS runs and motion is fine). */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- #watch — Episodes ---------- */
.episode {
  display: grid; gap: 28px; align-items: center;
  grid-template-columns: 1fr;
  margin-top: 96px; /* room for Mono-kun peeking over the player */
}
@media (min-width: 900px) { .episode { grid-template-columns: 1.7fr 1fr; gap: 48px; margin-top: 140px; } }

/* Mono-kun peeking over the top edge of the player. .peek is a window whose bottom edge is the
   player's top edge (overflow hidden), so only his hat and eyes show and ducking hides him behind
   the "ledge". Individual translate / rotate properties let the idle sway (rotate) and the
   pop-up / duck states (translate) run together. */
.player-wrap { position: relative; }
.peek {
  position: absolute; right: 2%; bottom: 100%; z-index: 1;
  width: 250px; height: 160px; overflow: hidden; pointer-events: none;
}
.peeker {
  position: absolute; left: 35px; bottom: -96px; width: 180px; height: auto;
  transform-origin: 50% 100%;
  translate: 0 100%; rotate: -4deg;
  transition: translate 0.7s cubic-bezier(0.34, 1.5, 0.64, 1);
  animation: peek-sway 6s ease-in-out infinite;
}
.player-wrap.is-up .peeker { translate: 0 0; }
.player-wrap.is-up:hover .peeker { translate: 0 -22px; }
.player-wrap.is-up.is-playing .peeker { translate: 0 42%; } /* ducks: only his hat shows while you watch */
@keyframes peek-sway { 0%, 100% { rotate: -4deg; } 50% { rotate: 3deg; } }
.peek-bubble {
  position: absolute; z-index: 3; right: calc(2% + 205px); bottom: calc(100% + 64px);
  width: max-content; max-width: 200px; padding: 9px 14px;
  background: #fff; color: var(--ink); border-radius: 14px 14px 4px 14px;
  font-size: 15.5px; line-height: 1.35;
  box-shadow: 0 10px 24px -12px rgba(43, 33, 24, 0.5), 0 0 0 1px var(--line);
  opacity: 0; translate: 0 6px; transition: opacity 0.3s, translate 0.3s;
  pointer-events: none;
}
.player-wrap.is-talking .peek-bubble { opacity: 1; translate: 0 0; }
@media (max-width: 899px) {
  .peek { width: 160px; height: 104px; }
  .peeker { left: 24px; bottom: -60px; width: 112px; }
  .peek-bubble { right: calc(2% + 130px); bottom: calc(100% + 34px); font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .peeker { animation: none; transition: none; } }
.player {
  position: relative; z-index: 2;
  border-radius: 18px; overflow: hidden; background: #000;
  box-shadow: 0 30px 60px -28px rgba(43, 33, 24, 0.55);
  aspect-ratio: 1280 / 734;
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* until the episode is played: a still from it with a round play button (YouTube loads on click) */
.yt-cover {
  position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; cursor: pointer; background: #000;
  display: grid; place-items: center;
}
.yt-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s ease, filter 0.3s; }
.yt-play {
  position: relative; width: 84px; height: 84px; border-radius: 50%;
  background: rgba(20, 14, 10, 0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: scale 0.25s ease, background-color 0.25s;
}
/* Rainbow border: a conic gradient cut to a thin ring, turning slowly. The bloom is a blurred,
   thicker copy behind it (blurred on its parent, so the glow is not cut off at the ring's edge). */
.yt-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#ff2d55, #ff9500, #ffd60a, #34c759, #00c7be, #0a84ff, #5e5ce6, #bf5af2, #ff2d55);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: yt-spin 5s linear infinite;
}
.yt-bloom { position: absolute; inset: 0; filter: blur(10px) saturate(1.4) brightness(1.15); opacity: 0.95; transition: opacity 0.25s, filter 0.25s; }
.yt-bloom .yt-ring {
  inset: -3px;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 6px));
}
/* the triangle: white and crisp, with a soft glow whose colour runs through the rainbow */
.yt-tri {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 3px rgba(255, 70, 110, 0.95)) drop-shadow(0 0 9px rgba(255, 70, 110, 0.6)) hue-rotate(0deg);
  animation: yt-hue 5s linear infinite;
}
.yt-tri path { fill: #fff; stroke: #fff; stroke-width: 1; stroke-linejoin: round; }
@keyframes yt-spin { to { rotate: 360deg; } }
@keyframes yt-hue {
  to { filter: drop-shadow(0 0 3px rgba(255, 70, 110, 0.95)) drop-shadow(0 0 9px rgba(255, 70, 110, 0.6)) hue-rotate(360deg); }
}
.yt-cover:hover img { scale: 1.03; filter: brightness(1.06); }
.yt-cover:hover .yt-play, .yt-cover:focus-visible .yt-play { scale: 1.08; background-color: rgba(12, 9, 7, 0.68); }
.yt-cover:hover .yt-bloom, .yt-cover:focus-visible .yt-bloom { opacity: 1; filter: blur(12px) saturate(1.5) brightness(1.3); }
.player.is-loading .yt-play { animation: yt-wait 1s ease-in-out infinite; }
@keyframes yt-wait { 50% { scale: 0.92; opacity: 0.7; } }
.player.is-live .yt-cover { display: none; }
@media (max-width: 640px) { .yt-play { width: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) { .yt-ring, .yt-tri { animation: none; } }
.ep-meta { margin: 0 0 6px; font-size: 14.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.ep-title { margin: 0 0 10px; font-family: var(--font-serif); font-weight: 600; font-size: 40px; line-height: 1; }
.ep-text { margin: 0 0 22px; font-size: 18px; line-height: 1.55; color: var(--ink-soft); max-width: 30ch; }

.scenes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 900px) { .scenes { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.scenes figure { margin: 0; }
.scenes img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.scenes figcaption { margin-top: 8px; font-size: 16px; color: var(--ink-soft); }

.next-row { margin-top: 48px; display: flex; align-items: flex-end; gap: 8px; }
.pose-run {
  width: 150px; height: auto; margin-bottom: -18px;
  animation: run-bob 0.42s ease-in-out infinite alternate;
}
@keyframes run-bob { from { translate: 0 0; } to { translate: 0 -7px; } }
@media (max-width: 520px) { .pose-run { width: 92px; } }
@media (prefers-reduced-motion: reduce) { .pose-run, .guide, .footer-wave:hover img { animation: none; } }
.next-ep {
  flex: 0 1 460px; display: flex; align-items: center; gap: 18px;
  padding: 18px 22px; border: 1.5px dashed rgba(43, 33, 24, 0.28); border-radius: 18px;
  max-width: 460px;
}
.next-ep .pixel { width: 44px; height: auto; flex: none; }
.next-ep .ep-meta { margin-bottom: 2px; }
.next-title { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 24px; }

/* ---------- #meet — character profile ---------- */

.meet-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .meet-grid { grid-template-columns: 1fr 1.05fr 0.85fr; gap: 36px; align-items: center; } }

.sheet-name {
  margin: 0; font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(52px, 6vw, 84px); line-height: 0.92; letter-spacing: -0.015em;
  white-space: nowrap;
}
.sheet-role { margin: 4px 0 22px 4px; font-family: var(--font-serif); font-size: 26px; font-weight: 500; }
.facts { margin: 0 0 16px; display: grid; gap: 4px; }
.facts div { display: flex; gap: 8px; font-family: var(--font-serif); font-size: 21px; }
.facts dt { font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 16.5px; padding-top: 3px; }
.facts dt::after { content: ':'; }
.facts dd { margin: 0; }
.bio { margin: 0; font-family: var(--font-serif); font-size: 22px; line-height: 1.45; max-width: 34ch; }
.traits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.traits li { padding: 5px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 15.5px; }

.stage {
  position: relative; margin: 0; display: flex; justify-content: center; align-items: flex-end;
  min-height: 420px; padding-bottom: 46px;
}
.stage::after { /* soft floor shadow */
  content: ''; position: absolute; left: 50%; bottom: 36px; width: 46%; height: 26px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43, 33, 24, 0.28), rgba(43, 33, 24, 0));
}
.stage img {
  position: relative; z-index: 1;
  height: min(560px, 62vh); width: auto; max-width: 100%; object-fit: contain;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.stage img.is-swapping { opacity: 0; transform: translateY(8px) scale(0.98); }
.stage-caption {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  font-family: var(--font-serif); font-style: italic; font-size: 21px; color: var(--ink-soft);
}
@media (max-width: 1023px) { .stage { min-height: 0; } .stage img { height: 440px; } }

.look-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (min-width: 1024px) { .look-list { grid-template-columns: repeat(3, 1fr); } }
.look-list button {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px 8px; cursor: pointer;
  background: var(--card); border: 1.5px solid transparent; border-radius: 14px;
  transition: border-color 0.2s, transform 0.2s, background-color 0.2s;
}
.look-list button:hover { transform: translateY(-2px); }
.look-list button[aria-selected="true"] { border-color: var(--ink); background: #fff; }
.look-list img { height: 86px; width: auto; }
.look-list span { font-size: 13px; text-align: center; line-height: 1.2; }
@media (max-width: 640px) { .look-list { grid-template-columns: repeat(3, 1fr); } .look-list img { height: 72px; } }

.subhead-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 72px 0 22px; }
.subhead-row .subhead { margin: 0; }
.pose-crouch { width: 150px; height: auto; margin-bottom: -26px; position: relative; z-index: 1; }
@media (max-width: 520px) { .pose-crouch { width: 100px; margin-bottom: -18px; } }
.friends { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 960px) { .friends { grid-template-columns: 1fr 1fr; } }
.friend { /* same picture column in every card, so the names and lines start at the same place */
  --pic: 196px;
  margin: 0; display: grid; grid-template-columns: var(--pic) minmax(0, 1fr); align-items: end; gap: 24px;
  padding: 24px 24px 0; border-radius: 22px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.friend > img { height: 250px; width: auto; justify-self: center; }
.friend figcaption { align-self: center; padding-bottom: 24px; display: grid; gap: 6px; }
.friend strong { font-family: var(--font-serif); font-weight: 600; font-size: 30px; }
.friend span { font-size: 17px; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 460px) { .friend { --pic: 150px; gap: 18px; padding: 20px 20px 0; } .friend > img { height: 190px; } .friend strong { font-size: 26px; } }
/* Monotaur's clip (720 x 958 frames; his hooves sit 7% above the frame's bottom, so the canvas
   hangs that much below the card edge, where the card clips it) */
.friend-anim { position: relative; flex: none; width: 196px; height: 250px; }
.friend-anim img, .friend-anim canvas { position: absolute; left: 50%; translate: -50% 0; transition: opacity 0.4s; }
.friend-anim img { bottom: 0; }
.friend-anim canvas { bottom: -20px; width: 213px; height: 284px; opacity: 0; }
.friend-anim.is-live canvas { opacity: 1; }
.friend-anim.is-live img { opacity: 0; }
@media (max-width: 460px) {
  .friend-anim { width: 150px; height: 190px; }
  .friend-anim canvas { bottom: -15px; width: 162px; height: 216px; }
}

/* ---------- #sixth — Mono-kun: Sixth Sense (short behind sliding fusuma doors) ----------
   Cut from the user's painted-door picture with tools/monokun/fusuma.mjs: frame.webp is the whole
   room (beam, posts, tatami), door-left/right.webp are the two gold-leaf fusuma. The lower shoji paper
   in the door pictures is half see-through, and .fusuma-glow blurs and brightens what is behind it,
   so the muted loop glows through the paper like light from the next room. The percentages below are
   the opening and paper rectangles of that 1604×981 picture. States on #fusuma: is-ajar (doors parted,
   before it scrolls into view), is-open (playing), is-playing. */
.sixth {
  background: radial-gradient(ellipse 70% 60% at 50% 58%, #3b2a1d 0%, #1d140d 70%, #150e09 100%);
  color: var(--cream);
}
.sixth .kicker { color: #c9b28f; }
.sixth-head { text-align: center; }
.sixth .title { margin-bottom: 16px; }
.sixth-lead { margin: 0 auto 48px; max-width: none; font-family: var(--font-serif); font-size: 24px; line-height: 1.4; color: #e6d8c1; }

.fusuma {
  position: relative; max-width: 1120px; margin: 0 auto; aspect-ratio: 1604 / 981;
  border-radius: 6px; overflow: hidden;
  background: #8a6236 url("../assets/img/sixth-sense/frame.webp") center / 100% 100% no-repeat;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
}
.fusuma-room { /* the door opening; the doors slide behind the posts (clipped here) */
  position: absolute; left: 4.676%; top: 4.587%; width: 90.96%; height: 89.4%;
  overflow: hidden; background: #0d0906;
}
.fusuma-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0d0906; }

/* the doors exist only with JavaScript (without it the video keeps its own controls) */
.fusuma-door, .fusuma-open, .fusuma-close { display: none; }
.js .fusuma-door, .js .fusuma-open { display: block; }
.js .fusuma-close { display: grid; }

.fusuma-door {
  position: absolute; top: 0; bottom: 0; width: 50.171%; z-index: 2; cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.35));
  transition: transform 1.25s cubic-bezier(0.65, 0, 0.25, 1);
}
.fusuma-door::after { /* the painted door itself, above the glow */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: center / 100% 100% no-repeat;
}
.fusuma-left { left: 0; }
.fusuma-right { left: 49.829%; }
.fusuma-left::after { background-image: url("../assets/img/sixth-sense/door-left.webp"); }
.fusuma-right::after { background-image: url("../assets/img/sixth-sense/door-right.webp"); }
.fusuma-glow { /* behind the shoji paper: the loop, blurred and brightened, warm like backlit washi */
  position: absolute; z-index: 0; top: 79.36%; bottom: 3.76%; left: 3.3%; right: 2.9%;
  background: rgba(255, 214, 150, 0.22);
  -webkit-backdrop-filter: blur(6px) brightness(1.9) sepia(0.45) saturate(1.1);
  backdrop-filter: blur(6px) brightness(1.9) sepia(0.45) saturate(1.1);
}
.fusuma-right .fusuma-glow { left: 3.55%; right: 3%; }

/* parted before it scrolls into view (they then slide shut from both ends), wide open while playing */
.fusuma.is-ajar .fusuma-left, .fusuma.is-open .fusuma-left { transform: translateX(-101%); }
.fusuma.is-ajar .fusuma-right, .fusuma.is-open .fusuma-right { transform: translateX(101%); }
.fusuma.is-ajar .fusuma-door { transition: none; }
/* hover: they part a crack and the room behind shows in the gap */
@media (hover: hover) {
  .fusuma:not(.is-open):not(.is-ajar):hover .fusuma-left { transform: translateX(-3%); }
  .fusuma:not(.is-open):not(.is-ajar):hover .fusuma-right { transform: translateX(3%); }
  .fusuma:not(.is-open):not(.is-ajar):hover .fusuma-door { transition-duration: 0.6s; }
}

.fusuma-open { /* a quiet white 開 ("open") over the seam */
  position: absolute; z-index: 3; left: 50%; top: 42%; transform: translate(-50%, -50%);
  padding: 0; border: 0; background: none; cursor: pointer; text-align: center; color: #fff;
  transition: opacity 0.5s, transform 0.5s;
}
.fusuma-seal {
  position: relative; display: grid; place-items: center; margin: 0 auto;
  width: clamp(48px, 7.4vw, 84px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif; font-weight: 300;
  font-size: clamp(22px, 3.4vw, 38px); line-height: 1;
  text-shadow: 0 1px 10px rgba(60, 35, 10, 0.45);
  box-shadow: 0 4px 24px rgba(60, 35, 10, 0.2);
  transition: background 0.4s, border-color 0.4s;
}
.fusuma-seal::after { /* slow breathing ring */
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  animation: fusumaBreath 3.6s ease-out infinite;
}
@keyframes fusumaBreath { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.45); opacity: 0; } }
.fusuma-open-label {
  display: block; margin-top: 10px;
  color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 8px rgba(60, 35, 10, 0.55);
  font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase;
  padding-left: 0.32em; /* balances the letter-spacing */
}
.fusuma-open:hover .fusuma-seal, .fusuma-open:focus-visible .fusuma-seal { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.9); }
.fusuma-open:focus-visible { outline: none; }
.fusuma.is-open .fusuma-open, .fusuma.is-ajar .fusuma-open { opacity: 0; pointer-events: none; transform: translate(-50%, -40%); }

.fusuma-close { /* 閉 ("close"), the partner of 開, like the two buttons in a Japanese lift */
  position: absolute; z-index: 3; top: 10px; right: 10px; width: 32px; height: 32px;
  place-items: center; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%; background: rgba(20, 14, 10, 0.4); color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif; font-weight: 300; font-size: 16px; line-height: 1;
  cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.3s, background 0.3s;
}
.fusuma.is-open .fusuma-close { opacity: 1; pointer-events: auto; }
.fusuma-close:hover, .fusuma-close:focus-visible { background: rgba(20, 14, 10, 0.6); border-color: rgba(255, 255, 255, 0.9); outline: none; }

/* Sunlight from the window on the left: soft shafts that breathe (screen), leaf shadows that sway
   in the wind (multiply) and dust drifting in the light. No blend or opacity on .fusuma-sun itself,
   so each layer blends with the doors below. Hidden while the doors are open. */
.fusuma-sun { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fusuma-sun::before, .fusuma-sun::after, .fusuma-dust { content: ""; position: absolute; transition: opacity 0.8s; }
.fusuma-sun::before { /* light shafts slanting down to the right */
  inset: -10% -10% -10% -20%;
  background:
    linear-gradient(118deg, transparent 6%, rgba(255, 224, 160, 0.85) 12%, rgba(255, 224, 160, 0.6) 15%, transparent 20%),
    linear-gradient(118deg, transparent 22%, rgba(255, 230, 175, 0.6) 25%, transparent 29%),
    linear-gradient(118deg, transparent 32%, rgba(255, 220, 155, 0.75) 37%, rgba(255, 220, 155, 0.5) 41%, transparent 47%),
    linear-gradient(118deg, transparent 50%, rgba(255, 232, 180, 0.45) 53%, transparent 57%),
    linear-gradient(118deg, transparent 61%, rgba(255, 220, 155, 0.5) 65%, transparent 71%);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.7) 50%, transparent 90%);
  mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.7) 50%, transparent 90%);
  mix-blend-mode: soft-light; filter: blur(4px);
  animation: sunBreath 7s ease-in-out infinite alternate, sunDrift 19s ease-in-out infinite alternate;
}
.fusuma-sun > .fusuma-glint { /* the same shafts once more in screen, faint, so they read as light in the air */
  position: absolute; inset: -10% -10% -10% -20%;
  background:
    linear-gradient(118deg, transparent 8%, rgba(255, 220, 160, 0.22) 13%, transparent 19%),
    linear-gradient(118deg, transparent 33%, rgba(255, 220, 160, 0.18) 38%, transparent 45%);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 70%);
  mask-image: linear-gradient(100deg, #000 0%, transparent 70%);
  mix-blend-mode: screen; filter: blur(8px); transition: opacity 0.8s;
  animation: sunBreath 7s ease-in-out infinite alternate, sunDrift 19s ease-in-out infinite alternate;
}
.fusuma-sun::after { /* leaf shadows (a tree outside the window), swaying */
  inset: -15%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .016' numOctaves='3' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .26 0 0 0 0 .1 0 0 0 9 -4.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E") 0 0 / 46% auto;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 20% 70%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 20% 70%, #000, transparent 75%);
  mix-blend-mode: multiply; opacity: 0.22; filter: blur(3px);
  animation: leafSway 6.5s ease-in-out infinite alternate, leafGust 13s ease-in-out infinite;
}
.fusuma-dust { /* motes in the light */
  inset: 0;
  background:
    radial-gradient(circle, rgba(255, 240, 210, 0.9) 0 1px, transparent 1.6px) 0 0 / 83px 97px,
    radial-gradient(circle, rgba(255, 236, 200, 0.7) 0 0.8px, transparent 1.4px) 31px 47px / 127px 113px,
    radial-gradient(circle, rgba(255, 244, 220, 0.8) 0 1.2px, transparent 2px) 60px 15px / 151px 173px;
  -webkit-mask-image: linear-gradient(110deg, #000 5%, transparent 55%);
  mask-image: linear-gradient(110deg, #000 5%, transparent 55%);
  mix-blend-mode: screen; opacity: 0.7;
  animation: dustDrift 26s linear infinite;
}
@keyframes sunBreath { 0% { opacity: 0.55; } 35% { opacity: 0.9; } 60% { opacity: 0.7; } 100% { opacity: 1; } }
@keyframes sunDrift { from { translate: -2% 0; } to { translate: 2% 0; } }
@keyframes leafSway { from { transform: translate(-1.2%, 0.4%) rotate(-0.6deg); } to { transform: translate(1.4%, -0.5%) rotate(0.7deg); } }
@keyframes leafGust { 0%, 100% { scale: 1; } 40% { scale: 1.015; } 55% { scale: 0.99; } }
@keyframes dustDrift { from { background-position: 0 0, 31px 47px, 60px 15px; } to { background-position: 83px -194px, 158px -179px, 211px -331px; } }
.fusuma.is-open .fusuma-sun { visibility: hidden; transition: visibility 0s 0.2s; }
.fusuma-sun { transition: visibility 0s 1s; }

@media (max-width: 640px) {
  .fusuma-open-label { font-size: 11px; margin-top: 6px; }
  .fusuma-close { width: 26px; height: 26px; top: 6px; right: 6px; font-size: 13px; }
  .sixth-lead { font-size: 21px; margin-bottom: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .fusuma-door { transition-duration: 0.01s; }
  .fusuma-seal::after, .fusuma-sun::before, .fusuma-sun::after, .fusuma-dust, .fusuma-glint { animation: none; }
}

/* ---------- #real — From clay to real life (Katsunari) ----------
   Background: the user's tea-house model rendered by tools/monokun/tearoom.py (grey "decrepit
   wallpaper" walls, shoji, tatami, go board): wide picture on landscape screens, tall one on portrait
   screens. Like the stone wall it is a fixed layer, kept inside the section by the section's own
   clip-path, so the section scrolls over a still room (works on iOS too). A light veil from the left
   keeps the text readable. Then: icon clip + washi portrait, the hanging scroll, the studio stage. */
.real { border-top: 0; color: var(--ink); background: #a29e96; clip-path: inset(0); }
.real-room {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: #a29e96 url("../assets/img/katsunari/room-wide.webp") 60% 50% / cover no-repeat;
}
.real-room::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(246, 244, 240, 0.7) 0%, rgba(246, 244, 240, 0.5) 40%, rgba(246, 244, 240, 0.16) 70%, rgba(246, 244, 240, 0.08) 100%);
}
@media (orientation: portrait) {
  .real-room { background-image: url("../assets/img/katsunari/room-tall.webp"); background-position: 50% 50%; }
  .real-room::after { background: rgba(246, 244, 240, 0.5); }
}
.real .kicker { color: #3f3a33; }
.real .title { margin-bottom: 20px; }
.real :is(.kicker, .title, .real-lead, figcaption strong, figcaption > span) {
  text-shadow: 0 0 2px rgba(246, 244, 240, 0.9), 0 0 14px rgba(246, 244, 240, 0.95);
}
.real-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 900px) { .real-grid { grid-template-columns: 1.15fr 0.85fr; gap: 48px; } }
.real-lead { margin: 0 0 40px; font-family: var(--font-serif); font-size: 24px; line-height: 1.4; max-width: 30ch; color: #2c2722; }

/* the icon clip as a photo print, the antique portrait on washi tucked against its lower right */
.real-portrait {
  position: relative; margin: 0; display: grid; align-items: end;
  grid-template-columns: auto 1fr; grid-template-areas: "card cap" "card washi";
  grid-template-rows: 1fr auto;
}
.icon-card {
  grid-area: card; position: relative; z-index: 1; width: min(300px, 60vw); aspect-ratio: 720 / 1070;
  border: 6px solid #f7f5f0; border-radius: 16px; overflow: hidden;
  background: #d9d7d2 url("../assets/img/katsunari/icon-poster.webp") center / cover;
  box-shadow: 0 32px 50px -26px rgba(30, 26, 20, 0.65), 0 2px 6px rgba(30, 26, 20, 0.18);
}
.icon-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait-washi { /* washi sheet with torn (deckled) edges, slightly tilted, soft shadow */
  grid-area: washi; position: relative; z-index: 2; width: min(200px, 42vw); margin: 0 0 -22px -64px;
  rotate: -3deg; filter: drop-shadow(0 18px 22px rgba(30, 26, 20, 0.42));
}
.portrait-washi::before { /* the paper */
  content: ""; position: absolute; inset: -14px -14px -18px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .05' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .47 0 0 0 0 .36 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 40% 30%, #f6eedb, #e8dbbd);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 380' preserveAspectRatio='none'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='3' seed='2'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='9'/%3E%3C/filter%3E%3Crect x='6' y='6' width='288' height='368' filter='url(%23d)'/%3E%3C/svg%3E") 0 0 / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 380' preserveAspectRatio='none'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='3' seed='2'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='9'/%3E%3C/filter%3E%3Crect x='6' y='6' width='288' height='368' filter='url(%23d)'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}
.portrait-washi img { position: relative; display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.real-portrait figcaption { grid-area: cap; align-self: start; position: relative; z-index: 1; display: grid; gap: 4px; padding: 28px 0 0 26px; }
.real-portrait strong { font-family: var(--font-serif); font-weight: 600; font-size: 32px; }
.real-portrait strong span { font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif; font-weight: 600; margin-left: 4px; white-space: nowrap; }
.real-portrait figcaption > span { font-size: 17px; color: #3f3a33; }
/* caption under the pictures where there's no room beside them: phones, and the narrow left column
   of the two-column layout */
@media (max-width: 520px), (min-width: 900px) and (max-width: 1199px) {
  .real-portrait { grid-template-areas: "card washi" "cap cap"; grid-template-rows: auto auto; }
  .real-portrait figcaption { padding: 38px 0 0; }
}
@media (max-width: 520px) {
  .portrait-washi { margin: 0 0 -14px -52px; }
  .real-portrait figcaption { padding-top: 34px; }
  .real-portrait strong { font-size: 24px; }
}

/* the hanging scroll, hung from a nail by its cord */
.kake-wall { justify-self: center; width: min(250px, 58vw); padding-top: 12%; }
@property --kake { syntax: '<number>'; inherits: true; initial-value: 0; }
.kakejiku { /* its size is the open scroll (608 × 1664 picture) */
  --kake: 0;                                   /* 0 rolled up … 1 open */
  --shown: calc(1.7 + var(--kake) * 95.8);     /* % of the height showing above the roll */
  position: relative; width: 100%; aspect-ratio: 608 / 1664;
  container-type: size; transform-origin: 50% -12%;
  transition: --kake 2.6s cubic-bezier(0.45, 0.05, 0.3, 1);
}
.kakejiku.is-open { --kake: 1; animation: kakeSway 3.4s ease-in-out 1.6s; }
@keyframes kakeSway { 0%, 100% { rotate: 0deg; } 25% { rotate: 0.9deg; } 55% { rotate: -0.6deg; } 80% { rotate: 0.25deg; } }
.kake-cord { position: absolute; left: 0; bottom: 100%; width: 100%; height: auto; overflow: visible; }
.kake-cord path { fill: none; stroke: #4a3a2a; stroke-width: 1.1; stroke-linecap: round; }
.kake-cord circle { fill: #2e2924; }
.kake-toggle { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.kake-paper { position: absolute; inset: 0; clip-path: inset(0 0 calc(100% - var(--shown) * 1%) 0); }
.kake-paper img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 8px rgba(30, 24, 16, 0.35)); }
.kake-roll { /* the rolled part: paper wound round the bottom rod; thinner as it unrolls */
  --thick: calc((1 - var(--kake)) * 3cqh);
  position: absolute; left: 0; right: 0; top: calc(var(--shown) * 1cqh); height: calc(2.5cqh + var(--thick));
  filter: drop-shadow(0 5px 5px rgba(30, 24, 16, 0.4));
}
.kake-roll::before { /* the rod with its end caps: the scroll picture's own bottom strip */
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2.5cqh; translate: 0 -50%;
  background: url("../assets/img/katsunari/kakejiku.webp") 50% 100% / 100% 100cqh no-repeat;
}
.kake-roll::after { /* the paper wound on it (its plain back shows) */
  content: ""; position: absolute; left: 6.6%; right: 6.25%; top: 0; bottom: 0; border-radius: 4px / 50%;
  background: linear-gradient(180deg, #6f5a3c 0%, #c9b18a 22%, #efe2c3 45%, #d8c49e 65%, #8c7350 100%);
  opacity: calc(1 - var(--kake) * var(--kake));
}
.kake-hint { /* quiet white 開 under the rolled scroll; 閉 under the open one */
  position: absolute; left: 50%; translate: -50% 0;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.75); background: rgba(60, 54, 46, 0.22);
  color: rgba(255, 255, 255, 0.96); text-shadow: 0 1px 8px rgba(30, 24, 16, 0.6);
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif; font-weight: 300; font-size: 21px; line-height: 1;
  box-shadow: 0 4px 18px rgba(30, 24, 16, 0.25); transition: opacity 0.4s, background-color 0.2s;
}
.kake-hint-open { top: calc(9cqh + 10px); }
.kake-hint-open::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); animation: fusumaBreath 3.6s ease-out infinite; }
.kake-hint-close { top: calc(100cqh + 14px); width: 36px; height: 36px; font-size: 16px; opacity: 0; }
.kake-toggle:hover .kake-hint, .kake-toggle:focus-visible .kake-hint { background-color: rgba(60, 54, 46, 0.42); }
.kake-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 4px; border-radius: 4px; }
.kakejiku.is-open .kake-hint-open { opacity: 0; }
.kakejiku.is-open .kake-hint-close { opacity: 1; transition-delay: 2.2s; }

/* the stage: a sunlit forest pond (looping video, cover-cropped; phones see its middle) with the
   keyed clip on top */
.real-stage {
  position: relative; margin: 72px 0 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px;
  background: #3d4a32 url("../assets/img/katsunari/forest-pond.webp") center / cover;
  box-shadow: 0 34px 60px -30px rgba(30, 26, 20, 0.6), inset 0 0 0 1px rgba(30, 26, 20, 0.12);
}
@media (max-width: 699px) {
  .real-stage { aspect-ratio: 9 / 16; margin-top: 56px; }
}
.duo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.duo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.duo-src { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .kakejiku { transition-duration: 0.01s; }
  .kakejiku.is-open { animation: none; }
  .kake-hint-open::after { animation: none; }
}

/* ---------- #gallery: card deck ---------- */

.pose-kick {
  position: absolute; z-index: 1; right: var(--gutter); top: -150px;
  width: 190px; height: auto; rotate: -6deg; pointer-events: none;
}
@media (max-width: 1099px) { .pose-kick { width: 160px; top: -84px; } }
@media (max-width: 639px) { .pose-kick { width: 112px; top: -80px; } }
/* The kick bursts over the section's top edge into Katsunari's section; sideways the section still
   clips (nothing can make the page scroll sideways). Browsers without overflow: clip keep hidden. */
@supports (overflow: clip) { .gallery { overflow: visible; overflow-x: clip; } }
/* Card deck in the Mono-kun card box. --card-w sets the card size; everything scales with it.
   The box stands in front (z-index above every card). js/main.js sets one class per card:
   .is-inbox (hidden inside the box, face down), .is-rising (sliding up out of the box top, still
   face down), .is-d0 (top card), .is-d1 / .is-d2 (fanned behind it). Without JS the cards are a
   sideways scroll row. Tap the box (or the button) to pack the cards in / take them out again.
   Colours: --gold and --royal (French royal blue, "bleu roi"). */
.gallery-layout { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 900px) { .gallery-layout { grid-template-columns: 0.78fr 1.22fr; gap: 36px; } }
.gallery-text .title { margin-bottom: 18px; }
.deck-lead { margin: 0 0 24px; font-size: 19px; line-height: 1.55; color: var(--ink-soft); max-width: 34ch; }
.deck-controls { display: flex; align-items: center; gap: 14px; }
.deck-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(43, 33, 24, 0.35);
  background: rgba(247, 240, 227, 0.85); color: var(--ink); font-size: 26px; line-height: 1;
  padding: 0 0 3px; cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
.deck-btn:hover { background: var(--ink); color: var(--cream); }
.deck-pack {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  padding: 11px 20px 11px 16px; border-radius: 999px; cursor: pointer;
  background: #141a33; color: #e2c47c; border: 1px solid #b8913e;
  font-family: var(--font-serif); font-weight: 600; font-size: 18px; letter-spacing: 0.06em;
  box-shadow: inset 0 0 0 3px #141a33, inset 0 0 0 4px rgba(216, 181, 108, 0.45), 0 10px 22px -12px rgba(20, 26, 51, 0.7);
  transition: background-color 0.2s, color 0.2s;
}
.deck-pack svg { width: 8px; height: 13px; }
.deck-pack:hover { background: #22409a; color: #f3dea0; }
.deck-count { min-width: 64px; text-align: center; font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: 0.06em; }

.deck {
  --card-w: clamp(150px, 20vw, 290px);
  --gold: #b8913e; --gold-light: #d8b56c; --royal: #22409a;
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px;
}
.deck-box { display: none; }
.deck-card { flex: none; margin: 0; width: var(--card-w); }
.deck-card img { width: 100%; height: auto; border-radius: 12px; }

.js .deck {
  position: relative; display: block; overflow: visible; padding: 0; margin: 0 auto;
  width: calc(var(--card-w) * 2.3); height: calc(var(--card-w) * 1.9);
  outline: none;
}
.js .deck-box {
  display: block; position: absolute; left: 0; bottom: 0; z-index: 50;
  width: calc(var(--card-w) * 0.9); padding: 0; border: 0; background: none; cursor: pointer;
  transform-origin: 50% 100%; transition: transform 0.25s;
}
.js .deck-box picture { display: block; }
.js .deck-box:hover { transform: rotate(-2deg) translateY(-4px); }
.js .deck-box:focus-visible { outline: 3px solid var(--mustard); outline-offset: 6px; border-radius: 6px; }
.js .deck-box img {
  width: 100%; height: auto; border-radius: 0;
  filter: drop-shadow(0 22px 22px rgba(30, 20, 10, 0.45)) drop-shadow(0 2px 3px rgba(30, 20, 10, 0.3));
}
.js .deck:focus-visible .deck-card.is-d0 .deck-front { outline: 3px solid var(--mustard); outline-offset: 4px; }
.js .deck-card {
  position: absolute; left: calc(var(--card-w) * 0.88); top: calc(var(--card-w) * 0.1);
  width: var(--card-w); height: calc(var(--card-w) * 1.4);
  transform-origin: 50% 60%;
  transition: transform 0.55s cubic-bezier(0.22, 0.85, 0.25, 1), opacity 0.4s;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  pointer-events: none; perspective: 1400px;
}
.js .deck-card.is-d0, .js .deck-card.is-d1, .js .deck-card.is-d2 { pointer-events: auto; cursor: pointer; }
.js .deck-card.is-d0 { cursor: grab; }
.js .deck-card.is-dragging { cursor: grabbing; transition: none; }
.js .deck-card.is-flying { transition: transform 0.45s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.45s; }
.js .deck-card.no-anim, .js .deck-card.no-anim .deck-flip { transition: none !important; }
/* Positions (translate is relative to the card's own size) */
.js .deck-card.is-d0 { transform: translate(0, 0) rotate(-3deg); }
.js .deck-card.is-d1 { transform: translate(24%, -3%) rotate(5deg) scale(0.95); }
.js .deck-card.is-d2 { transform: translate(46%, -5%) rotate(11deg) scale(0.9); }
.js .deck-card.is-rising { transform: translate(-95%, -40%) rotate(-4deg) scale(0.8); }
.js .deck-card.is-inbox { transform: translate(-95%, 29%) scale(0.6); }
.js .deck-card.is-rising .deck-flip, .js .deck-card.is-inbox .deck-flip { transform: rotateY(180deg); }

.deck-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.3, 1); }
.deck-face {
  position: absolute; inset: 0; border-radius: calc(var(--card-w) * 0.05);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 18px 34px -14px rgba(30, 20, 10, 0.55);
}
/* Front: white card stock with a thin gold frame; corner index = number in royal blue + the
   Monolith mark in gold as the "suit" */
/* Front: matte black card edges with a soft gold glow around the card, a fine gold line inside the
   edge and around the picture; corner number and Monolith mark in gold. */
.deck-front {
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%),
    #131313;
  padding: calc(var(--card-w) * 0.088) calc(var(--card-w) * 0.042);
  box-shadow: 0 0 0 1px rgba(216, 181, 108, 0.35), 0 0 22px rgba(232, 196, 112, 0.42), 0 18px 34px -14px rgba(30, 20, 10, 0.6);
}
.deck-front::before {
  content: ''; position: absolute; inset: calc(var(--card-w) * 0.016);
  border: 1px solid rgba(216, 181, 108, 0.6); border-radius: calc(var(--card-w) * 0.038); pointer-events: none;
}
.js .deck-front img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--card-w) * 0.016);
  box-shadow: 0 0 0 1px rgba(216, 181, 108, 0.75);
  pointer-events: none; -webkit-user-drag: none;
}
.js .deck-front picture { display: block; width: 100%; height: 100%; }
.deck-index {
  position: absolute; left: calc(var(--card-w) * 0.05); top: calc(var(--card-w) * 0.024);
  display: flex; align-items: center; gap: calc(var(--card-w) * 0.014);
  font-family: var(--font-serif); font-weight: 700; font-size: calc(var(--card-w) * 0.052); line-height: 1; color: var(--gold-light);
}
.deck-index svg { width: calc(var(--card-w) * 0.022); height: calc(var(--card-w) * 0.036); color: var(--gold-light); }
.deck-index-end { left: auto; top: auto; right: calc(var(--card-w) * 0.05); bottom: calc(var(--card-w) * 0.024); rotate: 180deg; }
/* The real king of spades card: the picture is the whole card */
.js .deck-card-full .deck-front { background: none; padding: 0; box-shadow: none; overflow: visible; }
.js .deck-card-full .deck-front::before { display: none; }
.js .deck-card-full .deck-front img {
  object-fit: contain; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 16px 18px rgba(30, 20, 10, 0.45)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
/* Back: the Monolith card-back design (assets/img/cards/card-back, user's artwork) */
.deck-back {
  transform: rotateY(180deg);
  background: url("../assets/img/cards/card-back.png") center / 100% 100% no-repeat;
  background: image-set(url("../assets/img/cards/card-back.avif") type("image/avif"), url("../assets/img/cards/card-back.png") type("image/png")) center / 100% 100% no-repeat;
  border-radius: calc(var(--card-w) * 0.035);
}
.deck-back-mark { display: none; }
/* Phones: bigger cards, smaller box, tighter fan */
@media (max-width: 640px) {
  .deck { --card-w: calc((100vw - 40px) / 2.05); }
  .js .deck { width: calc(var(--card-w) * 2.05); }
  .js .deck-box { width: calc(var(--card-w) * 0.78); }
  .js .deck-card { left: calc(var(--card-w) * 0.74); }
  .js .deck-card.is-d1 { transform: translate(18%, -3%) rotate(5deg) scale(0.95); }
  .js .deck-card.is-d2 { transform: translate(33%, -5%) rotate(10deg) scale(0.9); }
  .js .deck-card.is-rising { transform: translate(-87%, -38%) rotate(-4deg) scale(0.7); }
  .js .deck-card.is-inbox { transform: translate(-86%, 33%) scale(0.5); }
}
@media (prefers-reduced-motion: reduce) { .js .deck-card, .deck-flip { transition: none; } }

/* ---------- #process: from sketch to screen ----------
   .process-track is tall; .process-sticky stays on screen while it scrolls by and js/main.js turns
   the scroll position into the layer animation (inline transforms on .process-stack / .layer).
   overflow: clip (not hidden) so position: sticky still works inside the section. */
.process { overflow: clip; padding: 0; }
.process-track { position: relative; }
.js .process-track { height: 340vh; }
.process-sticky { padding: 100px 0; }
/* At least one screen tall; on a screen too short for it, it grows and js/main.js sets --process-top
   (negative) so it sticks with its bottom edge on the screen's bottom edge and nothing is cut off. */
.js .process-sticky { position: sticky; top: var(--process-top, 0px); min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 70px 0 20px; }
.process-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; width: 100%; }
@media (min-width: 960px) { .process-grid { grid-template-columns: 0.72fr 1.28fr; gap: 40px; } }
.process .title { margin-bottom: 16px; }
.process-lead { margin: 0 0 22px; font-size: 19px; line-height: 1.55; color: var(--ink-soft); max-width: 36ch; }
.process-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 4px; }
.process-steps li {
  display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: 10px;
  padding: 8px 12px; border-radius: 12px; border-left: 3px solid transparent;
  opacity: 0.68; transition: opacity 0.3s, background-color 0.3s, border-color 0.3s;
}
.process-steps li.is-done { opacity: 0.9; }
.process-steps li.is-active { opacity: 1; background: rgba(251, 247, 238, 0.75); border-left-color: var(--maroon); }
.step-no { font-family: var(--font-serif); font-weight: 600; font-size: 22px; color: var(--maroon); line-height: 1.2; }
.process-steps strong { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 1.2; }
.process-steps small { display: block; font-size: 16px; line-height: 1.45; color: var(--ink-soft); }
.process-scenes { display: flex; flex-wrap: wrap; gap: 8px; }
.process-scenes button {
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 15.5px;
  border: 1px solid rgba(43, 33, 24, 0.35); background: rgba(251, 247, 238, 0.7); color: var(--ink);
  transition: background-color 0.2s, color 0.2s;
}
.process-scenes button[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
/* On the stone, this section's text is near-black with a soft light halo so it reads easily. */
#process { --ink: #15100c; --ink-soft: #2a221a; color: var(--ink); }
#process :is(.kicker, .title, .process-lead, .process-steps strong, .process-steps small, .step-no) {
  text-shadow: 0 0 2px rgba(248, 243, 234, 0.95), 0 0 12px rgba(248, 243, 234, 0.95), 0 0 26px rgba(248, 243, 234, 0.55);
}
#process .kicker { font-weight: 700; }
#process :is(.process-lead, .process-steps small) { font-weight: 500; }
/* The stage: a stack of layer sheets in 3D */
.process-stage { position: relative; perspective: 1800px; perspective-origin: 50% 30%; }
.process-stack { position: relative; width: 100%; aspect-ratio: 1086 / 320; transform-style: preserve-3d; }
.layer {
  position: absolute; inset: 0; margin: 0; transform-style: preserve-3d;
  border-radius: 10px; background: #fff;
  box-shadow: 0 2px 4px rgba(30, 20, 10, 0.25), 0 30px 50px -20px rgba(30, 20, 10, 0.55);
}
.layer img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.js .layer { pointer-events: none; }
.layer-hit { position: absolute; inset: 0; border-radius: 10px; cursor: zoom-in; }
.process.is-static .layer-hit { display: none; }
.layer.is-easing { transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.05), opacity 0.3s; }
.layer.is-lifted { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 40px 70px -24px rgba(30, 20, 10, 0.7); }
/* Complete: the finished frame glows warm gold, its label steps aside, every step gets a gold tick.
   The "ta-da" (.is-tada): the stage pops, the glow flares and settles, a light sweeps across the
   frame, gold sparks (.spark, made in js/main.js) burst from its edges. */
.process.is-complete .layer:nth-of-type(4) {
  box-shadow: 0 0 0 1px rgba(255, 238, 200, 0.95), 0 0 34px rgba(255, 205, 120, 0.45), 0 30px 50px -20px rgba(30, 20, 10, 0.55);
}
.process.is-complete .layer:nth-of-type(4) figcaption { opacity: 0 !important; }
.layer:nth-of-type(4)::after { /* light sweep */
  content: ''; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 250, 235, 0) 35%, rgba(255, 250, 235, 0.6) 50%, rgba(255, 250, 235, 0) 65%);
  transform: translateX(-120%); opacity: 0;
}
.process.is-tada .layer:nth-of-type(4)::after { animation: frame-sweep 1s 0.12s ease-out; }
.process.is-tada .layer:nth-of-type(4) { animation: frame-glow 1.4s ease-out; }
.process.is-tada .process-stage { animation: frame-pop 0.75s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes frame-pop { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 65% { transform: scale(0.985); } 100% { transform: scale(1); } }
@keyframes frame-glow {
  0% { box-shadow: 0 0 0 1px rgba(255, 238, 200, 0.95), 0 0 0 rgba(255, 205, 120, 0), 0 30px 50px -20px rgba(30, 20, 10, 0.55); }
  30% { box-shadow: 0 0 0 3px rgba(255, 248, 225, 1), 0 0 70px 12px rgba(255, 200, 105, 0.95), 0 0 160px 30px rgba(255, 215, 140, 0.45), 0 30px 50px -20px rgba(30, 20, 10, 0.55); }
  100% { box-shadow: 0 0 0 1px rgba(255, 238, 200, 0.95), 0 0 34px rgba(255, 205, 120, 0.45), 0 30px 50px -20px rgba(30, 20, 10, 0.55); }
}
@keyframes frame-sweep { 0% { transform: translateX(-120%); opacity: 1; } 100% { transform: translateX(120%); opacity: 1; } }
.spark {
  position: absolute; z-index: 5; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0%, #ffe39a 45%, rgba(255, 200, 90, 0) 72%);
  box-shadow: 0 0 12px 2px rgba(255, 200, 100, 0.95);
  animation: spark 0.95s cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
}
.spark-star {
  width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 0; box-shadow: none;
  background: #ffd76e; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 5px rgba(255, 190, 80, 1));
}
@keyframes spark {
  0% { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 0; }
  15% { opacity: 1; transform: translate(calc(var(--dx) * 0.2), calc(var(--dy) * 0.2)) scale(1.1) rotate(30deg); }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(140deg); opacity: 0; }
}
.process-steps li.is-flash { animation: step-flash 0.5s ease-out; }
@keyframes step-flash { 0% { background: rgba(255, 228, 160, 0.95); } 100% { background: transparent; } }
.process.is-complete .step-no { color: #b8913e; }
.process.is-complete .process-steps li { opacity: 1; }
.process.is-complete .process-steps li .step-no::after { content: ' ✓'; font-size: 0.75em; }
.layer figcaption {
  position: absolute; left: 12px; top: 10px; padding: 4px 10px; border-radius: 6px;
  background: rgba(20, 16, 12, 0.72); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  transition: opacity 0.3s;
}
/* Without JS / reduced motion: the layers in a column */
html:not(.js) .process-stack, .process.is-static .process-stack { aspect-ratio: auto; display: grid; gap: 14px; }
html:not(.js) .layer, .process.is-static .layer { position: relative; inset: auto; aspect-ratio: 1086 / 320; }
.process.is-static .process-track { height: auto; }
.process.is-static .process-sticky { position: static; height: auto; padding: 100px 0; }
/* Shorter desktop screens (laptops): a smaller title and tighter steps so the text column fits beside
   the stack; on the shortest, the step descriptions go (as on phones). */
@media (min-width: 960px) and (max-height: 940px) {
  .js .process-sticky { padding-bottom: 16px; }
  .process .title { font-size: clamp(46px, 7.2vh, 64px); margin-bottom: 12px; }
  .process-lead { font-size: 17px; margin-bottom: 16px; }
  .process-steps { gap: 2px; margin-bottom: 16px; }
  .process-steps li { padding: 6px 12px; }
  .process-steps small { font-size: 15px; line-height: 1.4; }
}
@media (min-width: 960px) and (max-height: 740px) {
  .process-steps small { display: none; }
}
@media (max-width: 959px) {
  .js .process-sticky { padding-top: 64px; }
  .process-stage { margin-top: 56px; } /* room for the tilted stack above it */
  .process-lead { margin-bottom: 12px; }
  .process-steps small { display: none; }
  .process-steps { grid-template-columns: repeat(2, 1fr); margin-bottom: 12px; }
  .process-steps li { grid-template-columns: 30px 1fr; padding: 6px 8px; }
  .step-no { font-size: 17px; }
  .process-steps strong { font-size: 16px; }
}
@media (max-width: 640px) {
  .process .title { font-size: 40px; margin-bottom: 10px; }
  .process-lead { font-size: 17px; }
  .layer figcaption { font-size: 11px; left: 8px; top: 6px; padding: 3px 7px; }
}

/* ---------- Film-crew cameos ---------- */
/* Cast cameos standing on the bottom edge of a section (feet on the next section's top). The
   row's negative bottom margin equals the section's bottom padding. */
.cameo-row { display: flex; justify-content: flex-start; margin-top: 32px; margin-bottom: -88px; pointer-events: none; }
@media (min-width: 768px) { .cameo-row { margin-bottom: -120px; } }
/* Shop, wide screens: the director stands between the text and the Mame display, directing Mono-kun. */
@media (min-width: 900px) { .shop .cameo-row { justify-content: center; margin-top: -190px; } }
.cameo-row-right { justify-content: flex-end; }
.cameo { display: block; height: 220px; width: auto; }
@media (max-width: 640px) { .cameo { height: 150px; } }
/* Episode 2 row: clapperboard ready for the next take (wraps to its own line on phones). */
/* .cameo-stand: a cameo with a soft floor shadow under the feet. */
.cameo-stand { position: relative; display: block; flex: none; pointer-events: none; }
.cameo-stand img { position: relative; z-index: 1; display: block; height: 100%; width: auto; }
.cameo-stand::after {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: -10px; height: 28px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 28, 16, 0.42), rgba(40, 28, 16, 0));
}
.cameo-clapper { height: 280px; margin-left: auto; margin-bottom: -10px; }
@media (max-width: 899px) { .cameo-clapper { height: 220px; } }
@media (max-width: 640px) { .next-row { flex-wrap: wrap; } .cameo-clapper { height: 190px; margin-top: 8px; } }
.cameo-boom { height: 230px; }
.host-stand { position: relative; display: block; flex: none; }
.cameo-host { height: 310px; }
.host-bubble {
  position: absolute; left: 82%; top: 8%; white-space: nowrap;
  padding: 9px 16px; border-radius: 16px 16px 16px 4px;
  background: var(--cream); color: var(--ink);
  font-family: var(--font-serif); font-weight: 600; font-size: 22px; font-style: italic;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
}
@media (max-width: 640px) { .cameo-boom { height: 150px; } }
/* Monolith: the event host stands in the band above the footer (the band is the section's bottom
   padding, 230px / 190px on phones), presenting toward the waving Mono-kun. */
.monolith .cameo-row-jump { margin-top: 0; margin-bottom: -330px; justify-content: center; } /* feet on the footer edge */
@media (max-width: 899px) { .monolith .cameo-row-jump { justify-content: flex-end; } }
@media (max-width: 640px) {
  .monolith .cameo-row-jump { margin-bottom: -250px; justify-content: flex-end; }
  .cameo-host { height: 200px; }
  .host-bubble { font-size: 16px; padding: 6px 11px; left: auto; right: 84%; top: 4%; border-radius: 14px 14px 4px 14px; }
}

/* ---------- #world ---------- */
.world {
  color: var(--cream);           /* light text on the clear pond */
  background: linear-gradient(180deg, #3f7f8c, #6aa6ae); /* until the water is drawn / without WebGL */
}
.world > .wrap { position: relative; z-index: 1; }
.world-water { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }
.world-koi { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.world.no-water .world-koi { display: none; }
.world-spray { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; pointer-events: none; }
.world .kicker { color: rgba(243, 234, 219, 0.65); }
.world .title { text-shadow: 0 2px 18px rgba(2, 14, 24, 0.45); }
.world-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .world-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .world-grid { grid-template-columns: repeat(4, 1fr); } }
.world-head { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 48px; }
.world-head .title { margin-bottom: 0; }
.guide-left { width: 170px; flex: none; margin-bottom: -34px; animation: nudge-left 1.6s ease-in-out infinite; }
@media (max-width: 640px) { .guide-left { width: 104px; margin-bottom: -20px; } }
.world-card { display: flex; flex-direction: column; align-items: flex-start; }
/* Clear glass card floating on the water (like the glass slab in the Monolith "1997" video):
   barely tinted, a light blur of the water behind it, bright bevelled edges, condensation droplets
   around the edges (assets/img/water/droplets.webp, masked away from the middle), a warm glare on the
   sunny left side. js/main.js moves it with --float-y / --float-r / --float-s (bobbing and the pop). */
.world-card.glass {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 12px 12px 22px; border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(4, 22, 34, 0) 58%, rgba(4, 22, 34, 0.34)),
    linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 38%, rgba(255, 255, 255, 0.02) 62%, rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 1px 0 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14), inset -1px 0 0 rgba(255, 255, 255, 0.14),
    inset 0 0 18px rgba(255, 255, 255, 0.06),
    0 30px 50px -30px rgba(0, 10, 20, 0.75);
  -webkit-backdrop-filter: blur(2.5px) saturate(1.2) brightness(1.06); backdrop-filter: blur(2.5px) saturate(1.2) brightness(1.06);
}
.js .world-card.glass {
  translate: 0 var(--float-y, 0px); rotate: var(--float-r, 0deg); scale: var(--float-s, 1);
  transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.4s;
}
.world-card.glass::before { /* sun glare on the glass, from the left */
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(100deg, rgba(255, 228, 180, 0.24) 0%, rgba(255, 228, 180, 0) 20%),
    linear-gradient(125deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.1) 34%, rgba(255, 255, 255, 0) 40%);
}
.world-card.glass::after { /* condensation droplets, thicker towards the edges */
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: url("../assets/img/water/droplets.webp") 0 0 / 300px;
  opacity: 0.85;
  -webkit-mask-image: radial-gradient(120% 95% at 50% 42%, transparent 46%, #000 88%);
  mask-image: radial-gradient(120% 95% at 50% 42%, transparent 46%, #000 88%);
}
.world-card.glass .world-pic { position: relative; z-index: 1; margin-bottom: 18px; border-radius: 14px; }
.world-card.glass > :is(.tag, h3, p) { position: relative; z-index: 3; margin-left: 6px; margin-right: 6px; text-shadow: 0 1px 8px rgba(2, 14, 24, 0.7); }
.world-card.glass.is-popped, .world-card.glass:focus-within {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18), inset -1px 0 0 rgba(255, 255, 255, 0.18),
    0 0 36px rgba(255, 225, 170, 0.16), 0 46px 60px -30px rgba(0, 10, 20, 0.85);
}
.world-pic {
  width: 100%; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
  background: var(--indigo-soft); margin-bottom: 16px;
}
.world-pic > img, .world-pic > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.world-pic-film {
  position: relative; display: block; padding: 0; border: 0; cursor: pointer; text-align: left; text-decoration: none;
  font: inherit; color: inherit;
}
.film-badge {
  position: absolute; left: 12px; bottom: 12px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(10, 10, 14, 0.62); color: #fff; font-size: 14px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color 0.2s, color 0.2s;
}
.world-pic-film:hover .film-badge, .world-pic-film:focus-visible .film-badge { background: var(--cream); color: var(--indigo); }
@media (max-width: 639px) { .world-pic { aspect-ratio: 16 / 11; } }
.world-pic-game {
  display: flex; align-items: center; justify-content: center;
  background-color: #c99a45;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
  background-size: 16px 16px;
}
.world-pic-game > img { width: auto; height: 74%; object-fit: contain; }
.world-pic-plush { display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(circle at 50% 40%, #e2b867, #b07f35); }
.world-pic-plush > img { width: auto; height: 92%; object-fit: contain; }
.tag {
  display: inline-block; margin-bottom: 10px; padding: 3px 11px;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid rgba(243, 234, 219, 0.35); border-radius: 999px;
}
.tag-live { background: var(--cream); color: var(--indigo); border-color: var(--cream); }
.world-card h3 { margin: 0 0 6px; font-family: var(--font-serif); font-weight: 600; font-size: 30px; }
.world-card p { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(243, 234, 219, 0.8); }

/* ---------- #shop ---------- */
.shop {
  color: var(--cream);
  background-color: var(--maroon);
  background-image:
    radial-gradient(circle at 80% 30%, rgba(184, 131, 47, 0.25), rgba(184, 131, 47, 0) 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}
.shop .kicker { color: rgba(243, 234, 219, 0.7); }
.shop-grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
@media (min-width: 900px) { .shop-grid { grid-template-columns: 1.1fr 0.9fr; gap: 48px; } }
.shop .title { margin-bottom: 20px; }
.shop-lead { margin: 0 0 28px; font-size: 20px; line-height: 1.55; max-width: 40ch; color: rgba(243, 234, 219, 0.85); }
.shop-actions { display: flex; flex-wrap: wrap; margin-left: -0.2em; }
.shop-actions .pill { font-size: 16.5px; padding: 0.55em 22px; }
.pill-light { background: var(--cream); color: var(--maroon-deep); border-color: transparent; }
.pill-light:hover { background: #fff; color: #000; }
.shop-card {
  margin: 36px 0 0; display: flex; align-items: center; gap: 16px;
  max-width: 440px; padding: 12px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(243, 234, 219, 0.18); border-radius: 18px;
}
.shop-card img { width: 120px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; flex: none; }
.shop-card figcaption { display: grid; gap: 4px; justify-items: start; }
.shop-card .tag { margin-bottom: 4px; }
.shop-card strong { font-family: var(--font-serif); font-weight: 600; font-size: 24px; }
.shop-card span:last-child { font-size: 16px; color: rgba(243, 234, 219, 0.75); }
/* Mono-kun presenting the Mame packaging (his palms face the pack on his left). */
.shop-visual {
  position: relative; justify-self: center; width: min(560px, 100%); margin-bottom: 24px;
  display: grid; grid-template-columns: 0.72fr 1fr; align-items: end;
}
.shop-presenter {
  position: relative; z-index: 2; width: 112%; height: auto; margin-bottom: -10px;
  filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.32));
}
.shop-pack {
  width: 100%; height: auto; border-radius: 14px; transform: rotate(-3deg);
  box-shadow: 0 34px 50px -22px rgba(0, 0, 0, 0.6);
}
.shop-capsule {
  position: absolute; right: -7%; bottom: -26px; height: 36%; width: auto; z-index: 3;
}
@media (max-width: 640px) { .shop-capsule { right: -2%; height: 30%; }
  transform: rotate(9deg); filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.35));
}

/* ---------- #monolith — the company behind Mono-kun ---------- */
.monolith { background: #0a0a0a; color: #f2f2f2; padding-top: 0; }
.reel { position: relative; margin-bottom: 56px; }
.reel-track {
  position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: #000;
  cursor: grab; user-select: none; -webkit-user-select: none;
  touch-action: pan-y; /* vertical swipes still scroll the page; sideways swipes move the posters */
}
.reel-track.is-dragging { cursor: grabbing; }
.reel-strip { display: flex; height: 100%; will-change: transform; }
.reel-strip.is-animating { transition: transform 0.65s cubic-bezier(0.22, 0.8, 0.24, 1); }
.reel-slide {
  flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none;
}
/* Posters that aren't 2:1 (the main Mono-kun poster) are shown whole, on their own paper colour. */
.reel-slide-fit { object-fit: contain; background: #ecdcbd; }
.reel-slide-paper { background: #efe8d8; } /* the nine-panel Monolith poster's cream paper */
.reel-arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0 0 3px;
  background: rgba(10, 10, 10, 0.45); color: #fff; font-size: 30px; line-height: 1;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0.8; transition: opacity 0.2s, background-color 0.2s;
}
.reel-arrow:hover, .reel-arrow:focus-visible { opacity: 1; background: rgba(10, 10, 10, 0.75); }
.reel-prev { left: 16px; }
.reel-next { right: 16px; }
@media (max-width: 640px) { .reel-arrow { width: 36px; height: 36px; font-size: 24px; } .reel-prev { left: 8px; } .reel-next { right: 8px; } }
.reel-dots { display: flex; justify-content: center; gap: 4px; margin-top: 10px; }
.reel-dots button {
  width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.reel-dots button::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.45); transition: background-color 0.3s, transform 0.3s;
}
.reel-dots button[aria-current="true"]::before { background: #fff; transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .reel-strip.is-animating { transition: none; } }
.monolith-grid { display: grid; grid-template-columns: 1fr; gap: 44px; }
@media (min-width: 960px) { .monolith-grid { grid-template-columns: 0.72fr 1.28fr; gap: 48px; align-items: center; } }
.monolith-text { border-left: 3px solid #a8e03a; padding-left: 24px; }
.monolith-logo { width: 190px; height: auto; margin-bottom: 26px; }
.monolith .title { margin-bottom: 18px; }
.monolith-lead { margin: 0 0 28px; font-size: 20px; line-height: 1.55; max-width: 36ch; color: rgba(255, 255, 255, 0.78); }
.monolith .pill-light { background: #fff; color: #000; }
.monolith .pill-light:hover { background: #a8e03a; }
.monolith-ads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.monolith-ads button { padding: 0; border: 0; background: none; cursor: zoom-in; }
.monolith-ads img, .monolith-ads video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; transition: transform 0.3s; }
.monolith-ads video { aspect-ratio: 3 / 4; } /* the moving posters are 3:4, shown whole */
.monolith-ads button:hover :is(img, video) { transform: translateY(-4px); }
.monolith-ads button:nth-child(even) { margin-top: 40px; }
@media (max-width: 639px) {
  .reel { margin-bottom: 40px; }
  .monolith-ads { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .monolith-ads button:nth-child(even) { margin-top: 24px; }
}

/* Mono-kun pointing at Monolith's websites */
.explore { margin-top: 96px; display: grid; grid-template-columns: 1fr; gap: 4px; }
@media (min-width: 900px) { .explore { grid-template-columns: 240px 1fr; gap: 28px; align-items: center; } }
.explore-guide { position: relative; display: flex; justify-content: center; }
.guide { height: auto; pointer-events: none; }
.guide-right { display: none; width: 240px; animation: nudge-right 1.6s ease-in-out infinite; }
.guide-down { width: 150px; animation: nudge-down 1.6s ease-in-out infinite; }
@media (min-width: 900px) { .guide-right { display: block; } .guide-down { display: none; } }
.explore:has(.explore-card:hover) .guide-right { animation-duration: 0.55s; }
@keyframes nudge-right { 0%, 100% { translate: 0 0; } 50% { translate: 8px 0; } }
@keyframes nudge-down { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
@keyframes nudge-left { 0%, 100% { translate: 0 0; } 50% { translate: -8px 0; } }
.guide-bubble {
  position: absolute; z-index: 2; top: 2%; left: calc(50% + 62px);
  padding: 7px 13px; border-radius: 14px 14px 14px 4px;
  background: #a8e03a; color: #0a0a0a; font-size: 15px; font-weight: 600; white-space: nowrap;
}
@media (min-width: 900px) { .guide-bubble { top: 6%; left: auto; right: -22px; } }
.explore-title {
  margin: 0 0 24px; font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.05;
}
.monolith .explore .kicker { color: rgba(255, 255, 255, 0.6); }
.explore-links { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .explore-links { grid-template-columns: repeat(3, 1fr); } }
.explore-card {
  display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px;
  color: #f2f2f2; text-decoration: none;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px;
  transition: border-color 0.2s, background-color 0.2s, translate 0.2s;
}
.explore-card:hover, .explore-card:focus-visible { border-color: #a8e03a; background: rgba(168, 224, 58, 0.08); translate: 0 -4px; }
.explore-name { font-family: var(--font-serif); font-weight: 600; font-size: 26px; line-height: 1.1; }
.explore-text { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.7); }
.explore-go { margin-top: auto; padding-top: 8px; font-size: 16px; color: #a8e03a; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer ---------- */
.footer { position: relative; z-index: 1; background: var(--night); color: var(--cream); padding: 64px 0 28px; }
/* Mono-kun waving on the footer's top edge (left on phones, right on wide screens); links to email. */
.footer-wave-wrap { position: absolute; top: 0; left: 0; right: 0; height: 0; }
.footer-wave { position: absolute; left: var(--gutter); bottom: -8px; display: block; width: 106px; }
.footer-wave img { width: 100%; height: auto; transform-origin: 50% 100%; transition: rotate 0.3s; }
.footer-wave:hover img { animation: wave-hi 0.9s ease-in-out; }
@keyframes wave-hi { 0%, 100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
.wave-bubble {
  position: absolute; left: 92%; top: 10%; white-space: nowrap;
  padding: 7px 13px; border-radius: 14px 14px 14px 4px;
  background: var(--cream); color: var(--ink); font-size: 15.5px; font-weight: 600;
}
@media (max-width: 640px) { .footer-wave { width: 88px; } }
/* Room above the footer for him to stand in, so he never covers the Monolith links. */
.monolith { padding-bottom: 330px; }
@media (max-width: 640px) { .monolith { padding-bottom: 250px; } }
/* Wide screens: right side, so he doesn't crowd the pointing Mono-kun above (kept clear of the
   pixel buddy in the corner). */
@media (min-width: 900px) {
  .footer-wave { left: auto; right: calc(var(--gutter) + 72px); }
  .wave-bubble { left: auto; right: 92%; border-radius: 14px 14px 4px 14px; }
}
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.footer-line { margin: 12px 0 0; font-size: 17px; color: rgba(243, 234, 219, 0.65); }
.footer-follow { display: inline-flex; align-items: center; gap: 16px; margin-top: 24px; text-decoration: none; }
.footer-qr { width: 104px; height: auto; padding: 6px; background: #fff; border-radius: 12px; flex: none; }
.footer-follow > span { display: grid; gap: 4px; }
.footer-follow strong { font-family: var(--font-serif); font-weight: 600; font-size: 22px; }
.footer-handle { display: inline-flex; align-items: center; gap: 7px; font-size: 17px; text-decoration: underline; text-underline-offset: 3px; }
.footer-scan { font-size: 14.5px; color: rgba(243, 234, 219, 0.55); }
.footer-follow:hover .footer-handle { opacity: 0.75; }
@media (max-width: 640px) { .footer-qr { display: none; } .footer-scan { display: none; } }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 18px; align-items: center; }
.footer-links a { text-decoration: none; transition: opacity 0.2s; }
.footer-links a:hover { opacity: 0.6; }
.footer-bottom {
  margin-top: 48px; padding-top: 20px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 24px;
}
.footer-bottom::before { /* divider line, kept inside the side gutters */
  content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  border-top: 1px solid rgba(243, 234, 219, 0.12);
}
.footer-bottom p { margin: 0; font-size: 14.5px; color: rgba(243, 234, 219, 0.5); }
.footer-credit { display: block; margin-top: 6px; font-size: 12.5px; color: rgba(243, 234, 219, 0.42); }
.footer-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-monolith img { height: 13px; width: auto; opacity: 0.75; transition: opacity 0.2s; }
.footer-monolith:hover img { opacity: 1; }
/* company details band (light grey, like monolith.asia's footer) */
.footer-company { margin: 36px 0 -28px; padding: 44px 0 48px; background: #e9e9e7; color: #1c1c1c; }
.footer-company address { font-style: normal; }
.company-name { margin: 0 0 22px; font-family: var(--font-sans); font-weight: 500; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; }
.company-lines { margin: 0 0 14px; font-size: 18px; line-height: 1.75; color: #333; }
.company-contact { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 18px; color: #333; }
.company-contact a { color: inherit; text-decoration: none; }
.company-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.company-sep { width: 1px; height: 30px; background: #9a9a9a; }
@media (max-width: 640px) { .company-lines, .company-contact { font-size: 16px; } .company-sep { height: 22px; } }

/* ---------- Pixel buddy ---------- */
.buddy {
  position: fixed; right: 18px; bottom: 16px; z-index: 8;
  padding: 0; border: 0; background: none; cursor: pointer;
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity 0.4s, transform 0.4s;
}
.buddy.is-here { opacity: 1; transform: none; pointer-events: auto; }
.buddy img {
  width: 46px; height: auto; image-rendering: pixelated;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.25));
  animation: bob 1.2s steps(2, jump-none) infinite;
}
.buddy:hover img, .buddy.is-hopping img { animation: hop 0.45s ease-out; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .buddy img, .buddy:hover img, .buddy.is-hopping img { animation: none; } }
.buddy-bubble {
  position: absolute; right: 30px; bottom: calc(100% + 8px);
  width: max-content; max-width: 220px; padding: 10px 14px;
  background: var(--cream); color: var(--ink); border-radius: 14px 14px 4px 14px;
  font-size: 15.5px; line-height: 1.4; text-align: left;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(43, 33, 24, 0.12);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.buddy-bubble.is-shown { opacity: 1; transform: none; }

/* ---------- Lightbox for gallery pictures ---------- */
.lightbox {
  width: fit-content; max-width: 94vw; max-height: 92vh; padding: 0; border: 0; /* fit-content: tall pictures stay centred */
  background: transparent; overflow: visible;
}
.lightbox::backdrop { background: rgba(20, 12, 7, 0.88); }
.lightbox img { display: block; width: auto; max-width: 94vw; height: auto; max-height: 90vh; border-radius: 10px; }
.lightbox video { display: block; width: min(1280px, 94vw); max-height: 90vh; border-radius: 10px; background: #000; }
.lightbox [hidden] { display: none; }
.lightbox-close {
  position: absolute; top: -14px; right: -10px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--cream); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer;
}