/* Original Light outlines, matched to the existing credit text's CSS weight.
   unicode-range changes only Ni; line splitting keeps this inherited face. */
@font-face {
  font-family: "LXGW WenKai GB Light";
  src: url("assets/fonts/LXGWWenKaiGB-Light-Ni.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+59AE;
}
.animation-credit {
  font-family: "LXGW WenKai GB Light", "Klee One", serif;
}
@font-face {
  font-family: Caveat;
  src: url("assets/fonts/Caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Klee One";
  src: url("assets/fonts/KleeOne-Regular.woff2?v=20261001-credit") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Klee One";
  src: url("assets/fonts/KleeOne-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Yomogi;
  src: url("assets/fonts/Yomogi-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url("assets/fonts/NotoSansJP.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --blue: #2864a4;
  --yellow: #ffcc00;
  --ink: #354a4c;
  --paper: #f0eadc;
  --white: #fffbef;
  --footer-side-inset: 2.222222%;
  --unit: min(0.0694444444vw, 1.5px);
  --layer-footer: 1;
  --layer-main: 2;
  --layer-fv: 3;
  --layer-toggle: 10;
  --body: clamp(16px, calc(21 * var(--unit)), 31.5px);
  color: var(--ink);
  font-family: "Klee One", serif;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
a {
  color: inherit;
}
button[aria-disabled="true"] {
  cursor: default;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
p,
h1,
h2,
h3,
figure {
  margin: 0;
}
button {
  border: 0;
  background: none;
  padding: 0;
}
a:focus-visible,
button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 6px;
}
.sr-only,
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  inset: 12px auto auto 12px;
  background: var(--yellow);
  padding: 12px;
  z-index: 100;
}
.site-shell {
  position: relative;
  isolation: isolate;
  max-width: 2160px;
  margin-inline: auto;
}
.paper {
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, #74a7b53d 1px, transparent 1px),
    linear-gradient(#74a7b53d 1px, transparent 1px),
    url("assets/paper-grain.svg");
  background-size:
    calc(47 * var(--unit)) calc(47 * var(--unit)),
    calc(47 * var(--unit)) calc(47 * var(--unit)),
    240px 240px;
  background-position: 0 0;
}
h2 {
  font-family: Caveat, cursive;
  font-weight: 700;
  color: var(--blue);
  font-size: calc(76 * var(--unit));
  line-height: 1.05;
}
hgroup > p {
  font-family: Yomogi, cursive;
  font-size: clamp(14px, calc(18 * var(--unit)), 27px);
  line-height: 1.65;
  color: var(--blue);
  margin-top: calc(20 * var(--unit));
  padding-left: calc(18 * var(--unit));
}
/* Layer 3: fluid full-viewport cover. Artwork retains its own intrinsic ratios. */
.fv {
  height: 100vh;
  height: 100dvh;
  position: relative;
  z-index: var(--layer-fv);
  overflow: clip;
}
.fv-stage {
  position: relative;
  width: min(100%, 140.625svh);
  height: 100%;
  margin-inline: auto;
  --fv-unit: min(0.0694444444vw, 0.09765625svh, 1.5px);
}
.fv-stage > img,
.title-letter,
.subtitle-letter {
  position: absolute;
  pointer-events: none;
}
.film-title {
  position: absolute;
  left: 20.694444%;
  top: 18.75%;
  width: 58.611111%;
  aspect-ratio: 844 / 542.069;
}
.title-letter,
.subtitle-letter {
  max-width: none;
}
.festival {
  left: 1.944444%;
  top: 2.734375%;
  width: 10.694444%;
  height: 8.398438%;
  object-fit: contain;
}
.festival-pin {
  left: 1.94444%;
  top: 2.929688%;
  width: 1.091875%;
  transform: rotate(161.51deg) scaleY(-1);
}
.planet {
  left: 9.305556%;
  top: 15.429688%;
  width: 8.888889%;
}
.cloud-top {
  left: 77.916667%;
  top: 8.789063%;
  width: 10.43611%;
  transform: rotate(-8.18deg);
}
.cloud-left {
  left: -4.113889%;
  top: 40.620117%;
  width: 12.417431%;
  transform: rotate(-6.18deg);
}
.cloud-right {
  left: 93.005903%;
  top: 18.751416%;
  width: 13.471736%;
  transform: rotate(-9.17deg);
}
.grass {
  width: 100%;
  height: 46.875%;
  object-fit: fill;
  bottom: -1.367188%;
  left: 0;
}
.japanese-title {
  position: absolute;
  left: 80.215694%;
  top: 36.613477%;
  width: 13.611111%;
  aspect-ratio: 196 / 83;
  transform: rotate(2.64deg);
}
.flower-1 {
  left: 9.305556%;
  top: 71.875%;
  width: 5.635764%;
  transform: rotate(13.79deg);
}
.flower-2 {
  left: 64.583333%;
  top: 79.492188%;
  width: 5.648194%;
  transform: rotate(-5.17deg);
}
.flower-3 {
  left: 82.986111%;
  top: 71.289063%;
  width: 5.555556%;
}
.flower-4 {
  left: 26.666667%;
  top: 79.882813%;
  width: 4.861111%;
}
.rocket {
  left: 6.180556%;
  top: 55.957031%;
  width: 6.180556%;
}
.rocket-trail {
  left: 0;
  top: 63.28125%;
  width: 5.972222%;
}
.trailer {
  position: absolute;
  left: 77.916667%;
  top: 58.59375%;
  width: 14.583333%;
  height: 8.886719%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(8 * var(--fv-unit));
  color: var(--blue);
  font-family: Yomogi, cursive;
  font-size: calc(32 * var(--fv-unit));
  text-decoration: none;
}
.trailer-circle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.play-icon {
  width: 16.533333%;
  height: auto;
}
.trailer-rays {
  position: absolute;
  width: 23.945048%;
  right: -21.633333%;
  top: -9.758242%;
  transform: rotate(18.93deg);
}
.fv-credits {
  position: absolute;
  top: 72.167969%;
  left: 32.708333%;
  width: 34.513889%;
  text-align: center;
  color: var(--blue);
  font-weight: 600;
  line-height: 1.65;
  white-space: nowrap;
}
.fv-credits p:nth-child(2) {
  margin-top: 0;
  font-size: calc(20 * var(--fv-unit));
}
.fv-credits p:last-child {
  font-size: calc(16 * var(--fv-unit));
}
.outline-button {
  width: clamp(82px, calc(105 * var(--unit)), 157.5px);
  height: clamp(44px, calc(44 * var(--unit)), 66px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(14px, calc(16 * var(--unit)), 24px);
  font-weight: 600;
}
.button-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.menu-toggle {
  position: fixed;
  z-index: var(--layer-toggle);
  top: clamp(18px, calc(28 * var(--unit)), 42px);
  right: max(calc((100vw - 2160px) / 2 + 42px), calc(28 * var(--unit)));
  color: #05070a;
}
/* Layer 2: actual document flow, flexible text heights, no section coordinate canvas. */
main {
  position: relative;
  z-index: var(--layer-main);
}
section {
  position: relative;
  scroll-margin-top: 0;
}
.intro-picture {
  position: relative;
}
.intro-still {
  width: 100%;
  aspect-ratio: 1440 / 607;
  object-fit: cover;
}
.intro-tape {
  position: absolute;
  width: 16.388889%;
  left: 41.805556%;
  bottom: calc(-37 * var(--unit));
}
.intro-body {
  position: relative;
  padding: calc(77 * var(--unit)) 0 calc(166 * var(--unit));
  min-height: calc(738 * var(--unit));
}
.intro-body h2 {
  text-align: center;
  font-size: calc(82 * var(--unit));
}
.intro-copy {
  width: 58.402778%;
  margin: calc(57 * var(--unit)) auto 0;
  font-size: var(--body);
  line-height: 1.65;
}
.intro-rocket {
  position: absolute;
  width: 6.180556%;
  left: 7.777778%;
  top: calc(199 * var(--unit));
}
.intro-trail {
  position: absolute;
  width: 7.5%;
  left: 0;
  top: calc(274 * var(--unit));
}
.intro-star {
  position: absolute;
  width: 5.138889%;
  right: 9.236111%;
  bottom: calc(126 * var(--unit));
}
.film-strip {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.still {
  width: 100%;
  aspect-ratio: 720 / 302;
  object-fit: cover;
}
.tape {
  position: absolute;
  z-index: 1;
  width: 7.430556%;
  bottom: calc(-10 * var(--unit));
}
.tape-left {
  left: 21.25%;
}
.tape-right {
  left: 71.25%;
}
.story-strip .tape-left {
  width: 8.103333%;
  left: 0;
  top: calc(-43 * var(--unit));
  bottom: auto;
  transform: rotate(17.87deg);
}
.story-strip .tape-right {
  width: 6.25%;
  left: auto;
  right: 0.694444%;
  top: calc(-48 * var(--unit));
  bottom: auto;
}
.cast-strip .tape-left {
  transform: rotate(14.9deg);
}
.cast-strip .tape-right {
  transform: rotate(19.46deg);
}
.section-body {
  position: relative;
  width: 79.027778%;
  margin-inline: auto;
  padding-top: calc(118 * var(--unit));
}
.prose {
  font-size: var(--body);
  line-height: 1.65;
}
.story .section-body {
  width: 82.222222%;
  margin-left: 10.486111%;
  padding-top: calc(83 * var(--unit));
  padding-bottom: calc(84 * var(--unit));
  min-height: calc(732 * var(--unit));
}
.story-copy {
  margin-top: calc(54 * var(--unit));
}
.story-copy p + p {
  margin-top: calc(23 * var(--unit));
}
.story-cloud {
  position: absolute;
  right: 0;
  top: calc(103 * var(--unit));
  width: 10.97973%;
}
.edge-pin {
  position: absolute;
  width: 0.870278%;
  right: -0.1%;
  top: calc(420 * var(--unit));
  transform: rotate(161.51deg) scaleY(-1);
  pointer-events: none;
}
.cast {
  overflow: clip;
}
.cast .section-body {
  padding-bottom: calc(117 * var(--unit));
}
.cast-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14.85%;
  row-gap: calc(80 * var(--unit));
  margin-top: calc(109 * var(--unit));
  padding: calc(3 * var(--unit)) 0 calc(3 * var(--unit));
}
.cast-card {
  position: relative;
  width: 93.8%;
  justify-self: center;
}
.polaroid {
  position: relative;
  transform: rotate(var(--tilt));
}
.portrait {
  width: 100%;
  aspect-ratio: 452/528;
  object-fit: cover;
}
.pin {
  position: absolute;
  width: 17.699115%;
  left: 50%;
  top: calc(-40 * var(--unit));
  transform: translateX(-50%);
  z-index: 2;
}
.cast-card figcaption {
  position: absolute;
  left: 0;
  bottom: 7.5%;
  width: 100%;
  text-align: center;
  font-size: calc(32 * var(--unit));
  font-weight: 600;
  line-height: 1.65;
  color: var(--blue);
}
.cast-3 {
  left: calc(24 * var(--unit));
}
.cast-4 {
  right: calc(22 * var(--unit));
}
.director .section-body {
  padding-top: calc(124 * var(--unit));
  padding-bottom: calc(113 * var(--unit));
  min-height: calc(737 * var(--unit));
}
.director-planet {
  position: absolute;
  width: 10.632689%;
  right: -3.9%;
  top: calc(79 * var(--unit));
}
.director-profile {
  margin-top: calc(69 * var(--unit));
  padding-inline: calc(17 * var(--unit)) calc(69 * var(--unit));
}
.director-profile h3 {
  font-size: calc(31 * var(--unit));
  font-weight: 600;
  line-height: 1.65;
  color: var(--blue);
}
.name-reading {
  font-size: clamp(13px, calc(16 * var(--unit)), 24px);
  line-height: 1.65;
}
.director-profile .prose {
  font-size: clamp(16px, calc(20 * var(--unit)), 30px);
  line-height: 1.45;
  margin-top: calc(30 * var(--unit));
}
.credit-body {
  text-align: center;
  color: var(--blue);
  padding: calc(120 * var(--unit)) 2.430556% calc(152 * var(--unit));
}
.credit-body h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: calc(90 * var(--unit));
  letter-spacing: -0.02em;
  color: var(--yellow);
  line-height: 1.2;
  margin-bottom: calc(82 * var(--unit));
}
.credit-line {
  font-size: clamp(11px, calc(13.846 * var(--unit)), 20.769px);
  line-height: 1.55;
}
.line-1 {
  font-size: calc(30 * var(--unit));
  margin-bottom: calc(10 * var(--unit));
}
.line-2 {
  font-size: calc(25.385 * var(--unit));
  margin-bottom: calc(10 * var(--unit));
}
.line-3 {
  font-size: calc(18.462 * var(--unit));
  margin-bottom: calc(30 * var(--unit));
}
.line-4 {
  font-size: calc(27.692 * var(--unit));
  margin-bottom: calc(28 * var(--unit));
}
.line-10 {
  font-size: clamp(12px, calc(16.154 * var(--unit)), 24.231px);
}
/* Layer 1: static in phase one; sticky reveal and paper edge join in phase two. */
.site-footer {
  position: relative;
  z-index: var(--layer-footer);
  aspect-ratio: 1440 / 582;
  display: grid;
  align-items: end;
  justify-items: center;
  overflow: hidden;
  background: #486641;
}
.footer-landscape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.site-footer small {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--white);
  font-size: clamp(10px, calc(13 * var(--unit)), 19.5px);
  line-height: 1.65;
  margin-bottom: calc(24 * var(--unit));
}
/* Native dialog lives in the top layer, outside both the future Peel and main stacks. */
#menu-panel {
  position: fixed;
  inset: 0;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100svh;
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--yellow);
  background: var(--blue);
  overflow-y: auto;
}
#menu-panel::backdrop {
  background: var(--blue);
}
.menu-surface {
  position: relative;
  max-width: 2160px;
  min-height: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(110px, 18.5546875svh, 285px) 4%
    clamp(60px, 9.66796875svh, 150px);
}
.menu-identity {
  position: absolute;
  top: calc(38 * var(--unit));
  left: 4.166667%;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-decoration: none;
}
.menu-identity span:first-child {
  font:
    700 clamp(26px, calc(32 * var(--unit)), 48px)/1.1 Caveat,
    cursive;
}
.menu-identity span:last-child {
  font-size: clamp(12px, calc(14 * var(--unit)), 21px);
}
.close-menu {
  position: absolute;
  right: 1.944444%;
  top: clamp(18px, calc(28 * var(--unit)), 42px);
}
nav {
  width: min(100%, calc(840 * var(--unit)));
}
nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  gap: min(calc(12 * var(--unit)), 1.171875svh);
}
nav a {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: min(calc(140 * var(--unit)), 13.671875svh);
  text-decoration: none;
  line-height: 1.1;
}
.nav-en {
  font:
    700 min(calc(92 * var(--unit)), 8.984375svh)/1.1 Caveat,
    cursive;
}
.nav-jp {
  font-size: clamp(12px, calc(16 * var(--unit)), 24px);
  line-height: 1.1;
}
nav li:last-child .nav-en {
  font-size: min(calc(78 * var(--unit)), 7.6171875svh);
}
.nav-circle {
  position: absolute;
  width: 88.095238%;
  height: 100%;
  inset: 0 auto;
  pointer-events: none;
  visibility: hidden;
}
nav a.is-clicked,
nav a:hover {
  color: var(--yellow);
}
nav a.is-clicked .nav-circle,
nav a:active .nav-circle,
nav a:focus-visible .nav-circle {
  visibility: visible;
}
@media (hover: hover) {
  nav a:hover .nav-circle { visibility: visible; }
}
.social-links {
  display: flex;
  gap: calc(28 * var(--unit));
  margin-top: min(calc(87 * var(--unit)), 8.496094svh);
}
.social-links a {
  width: clamp(44px, calc(44 * var(--unit)), 66px);
  height: clamp(44px, calc(44 * var(--unit)), 66px);
  display: grid;
  place-items: center;
}
.social-icon {
  width: 77.272727%;
  height: auto;
}
body:has(dialog[open]) {
  overflow: hidden;
}

/* The native dialog stays above the FV peel without entering its layer stack. */
#trailer-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--white);
  background: rgb(12 22 29 / 93%);
  overflow: auto;
}
#trailer-dialog[open] {
  display: grid;
  place-items: center;
}
#trailer-dialog::backdrop {
  background: transparent;
}
.trailer-modal {
  width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(64px, 9svh, 112px) clamp(18px, 4vw, 72px);
}
.trailer-modal-content {
  width: min(100%, 1260px, 138.6svh);
}
.trailer-modal-title {
  margin: 0 0 clamp(12px, 2svh, 24px);
  color: var(--white);
  font: 600 clamp(23px, 2.4vw, 40px)/1.15 Caveat, cursive;
  letter-spacing: .02em;
}
.trailer-modal-title span {
  margin-left: .5em;
  color: var(--yellow);
  font: 400 .58em/1.2 Yomogi, cursive;
}
.trailer-modal-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #05080b;
  box-shadow: 0 18px 50px rgb(0 0 0 / 26%);
}
.trailer-modal-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.trailer-modal-youtube {
  display: table;
  margin: clamp(12px, 2svh, 22px) 0 0 auto;
  color: var(--white);
  font: 400 clamp(12px, 1vw, 16px)/1.5 "Noto Sans JP", sans-serif;
  text-underline-offset: .3em;
}
.trailer-modal-youtube:hover {
  color: var(--yellow);
}
.trailer-modal-close {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 1;
  color: var(--yellow);
}
.trailer-modal-close:focus-visible,
.trailer-modal-youtube:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 4px;
}
@media (max-width: 600px) {
  .trailer-modal {
    padding-inline: 16px;
  }
  .trailer-modal-content {
    width: 100%;
  }
  .trailer-modal-title {
    font-size: 27px;
  }
}
/* Exact transformed asset boxes from the revised FV. */
.festival-pin { left: 2.30312500%; top: 3.14902344%; width: 0.92861111%; height: 2.17382812%; object-fit: fill; }
.cloud-top { left: 78.19013889%; top: 9.80048828%; width: 10.43611111%; height: 6.45380859%; object-fit: fill; }
.cloud-left { left: -3.90305556%; top: 41.54189453%; width: 12.41743056%; height: 6.44785156%; object-fit: fill; }
.cloud-right { left: 92.96263889%; top: 18.74897461%; width: 13.47173611%; height: 7.23203125%; object-fit: fill; }
.flower-1 { left: 10.14250000%; top: 72.66318359%; width: 5.63576389%; height: 10.83662109%; object-fit: fill; }
.flower-2 { left: 64.96736111%; top: 79.82500000%; width: 5.64819444%; height: 12.34189453%; object-fit: fill; }
.planet { height: 12.5%; object-fit: cover; }
.flower-3 { height: 13.671875%; }
.flower-4 { height: 11.523438%; }
.rocket { height: 7.324219%; }
.rocket-trail { height: 5.46875%; }
@media (min-width: 2160px) {
  .fv-stage {
    --fv-unit: min(1.5px, 0.09765625svh);
  }
}
/* Tablets retain the two-column collage; type is clamped for reading, content may grow. */
@media (max-width: 1100px) {
  .intro-copy {
    width: 68%;
  }
  .intro-body {
    padding-bottom: calc(135 * var(--unit));
  }
  .section-body {
    width: 82%;
  }
  .story .section-body {
    width: 82%;
    margin-inline: auto;
  }
  .director-profile {
    padding-right: 0;
  }
  .director-profile .prose {
    line-height: 1.65;
  }
  .cast-card figcaption {
    font-size: clamp(18px, calc(32 * var(--unit)), 32px);
  }
  .credit-line {
    line-height: 1.8;
  }
  .credit-body {
    padding-inline: 5%;
  }
  .menu-surface {
    padding-top: 14svh;
    padding-bottom: 8svh;
  }
  nav {
    width: 90%;
  }
  .nav-en {
    font-size: clamp(54px, 7.2vw, 80px);
  }
  nav li:last-child .nav-en {
    font-size: clamp(45px, 6.3vw, 70px);
  }
  nav a {
    min-height: 13svh;
  }
  .social-links {
    margin-top: 6svh;
  }
}
@media (max-aspect-ratio: 1/1) {
  .film-title {
    width: 83%;
    left: 8.5%;
    top: 25%;
  }
  .planet {
    width: 13%;
    left: 9%;
    top: 13%;
  }
  .cloud-top {
    width: 17%;
    top: 10%;
    left: 75%;
  }
  .cloud-right {
    width: 20%;
    top: 37%;
  }
  .cloud-left {
    width: 19%;
    top: 32%;
  }
  .japanese-title {
    left: 68%;
    top: 58%;
    width: 25%;
  }
  .trailer {
    left: 34%;
    top: 66%;
    width: 32%;
    height: 7%;
  }
  .grass {
    width: 150%;
    max-width: none;
    left: -25%;
    height: auto;
    bottom: -1.4%;
  }
  .rocket {
    left: 5%;
    top: 55%;
    width: 10%;
  }
  .rocket-trail {
    top: 60%;
    width: 8%;
  }
  .flower-1 {
    top: auto;
    bottom: 16%;
    width: 9%;
  }
  .flower-2 {
    top: auto;
    bottom: 7%;
    width: 8%;
  }
  .flower-3 {
    top: auto;
    bottom: 16%;
    width: 9%;
  }
  .flower-4 {
    top: auto;
    bottom: 8%;
    width: 8%;
  }
  .festival {
    width: 13%;
    height: auto;
    top: 3%;
    left: 4%;
  }
  .festival-pin {
    left: 4%;
    top: 3%;
    width: 1.8%;
  }
  .fv-credits {
    top: 79%;
    left: 15%;
    width: 70%;
  }
}
@media (max-width: 600px) {
  :root {
    --body: 16px;
  }
  .paper {
    background-size:
      26px 26px,
      26px 26px,
      240px 240px;
  }
  .menu-toggle {
    right: 16px;
    top: 16px;
  }
  .film-title {
    top: 26%;
  }
  .japanese-title {
    top: 54%;
    width: 27%;
    left: 66%;
  }
  .trailer {
    top: 62%;
    height: 7%;
    width: 38%;
    left: 31%;
    font-size: 24px;
  }
  .fv-credits {
    top: 77%;
    font-size: 14px;
  }
  .fv-credits p:last-child {
    font-size: 12px;
  }
  .intro-body {
    padding: 48px 0 65px;
    min-height: 0;
  }
  .intro-body h2,
  h2 {
    font-size: 48px;
  }
  .intro-copy {
    width: 82%;
    margin-top: 32px;
  }
  .intro-rocket {
    width: 9%;
    left: 1%;
    top: 28px;
  }
  .intro-trail {
    width: 10%;
    top: 60px;
  }
  .intro-star {
    width: 8%;
    bottom: 18px;
    right: 6%;
  }
  .intro-tape {
    width: 23%;
    left: 38.5%;
    bottom: -12px;
  }
  .film-strip {
    grid-template-columns: 1fr 1fr;
  }
  .section-body,
  .story .section-body {
    width: 84%;
    padding-top: 55px;
    padding-bottom: 55px;
    min-height: 0;
  }
  hgroup > p {
    font-size: 14px;
    padding-left: 5px;
    margin-top: 8px;
  }
  .story-copy {
    margin-top: 30px;
  }
  .story-copy p + p {
    margin-top: 20px;
  }
  .story-cloud {
    top: 52px;
    width: 18%;
  }
  .edge-pin {
    display: none;
  }
  .cast .section-body {
    padding-bottom: 70px;
  }
  .cast-grid {
    column-gap: 9%;
    row-gap: 40px;
    margin-top: 50px;
  }
  .cast-card {
    width: 100%;
  }
  .cast-card figcaption {
    font-size: clamp(12px, 3.3vw, 19px);
  }
  .pin {
    top: -14px;
  }
  .cast-3,
  .cast-4 {
    left: auto;
    right: auto;
  }
  .director .section-body {
    padding-top: 55px;
    padding-bottom: 60px;
    min-height: 0;
  }
  .director h2 {
    font-size: clamp(36px, 9vw, 48px);
  }
  .director-planet {
    width: 14%;
    top: 25px;
    right: -3%;
  }
  .director-profile {
    margin-top: 34px;
    padding: 0;
  }
  .director-profile h3 {
    font-size: 22px;
  }
  .name-reading {
    font-size: 13px;
  }
  .director-profile .prose {
    margin-top: 25px;
    font-size: 16px;
  }
  .credit-body {
    padding: 55px 6% 65px;
  }
  .credit-body h2 {
    font-size: clamp(27px, 7.1vw, 42px);
    margin-bottom: 40px;
  }
  .line-1 {
    font-size: 22px;
    margin-bottom: 10px;
  }
  .line-2 {
    font-size: 17px;
    margin-bottom: 10px;
  }
  .line-3 {
    font-size: 13px;
    margin-bottom: 22px;
  }
  .line-4 {
    font-size: 21px;
    margin-bottom: 22px;
  }
  .credit-line:nth-of-type(n + 5) {
    margin-bottom: 6px;
  }
  .site-footer {
    aspect-ratio: 1.6;
  }
  .site-footer small {
    margin-bottom: 16px;
  }
  .menu-identity {
    left: 6%;
    top: 25px;
  }
  .close-menu {
    right: 16px;
    top: 16px;
  }
  .menu-surface {
    padding-inline: 3%;
    padding-top: 17svh;
  }
  .nav-en {
    font-size: clamp(46px, 12vw, 68px);
  }
  nav li:last-child .nav-en {
    font-size: clamp(36px, 9.5vw, 56px);
  }
  .nav-circle {
    width: 100%;
  }
  .nav-jp {
    font-size: 12px;
  }
  .social-links {
    gap: 22px;
  }
  .social-links a {
    width: 44px;
    height: 44px;
  }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .fv-credits {
    font-size: 11px;
  }
  .fv-credits p:last-child {
    font-size: 10px;
  }
  .fv-credits p:nth-child(2) {
    margin-top: 1px;
  }
  .trailer {
    font-size: 18px;
  }
  .menu-surface {
    padding-block: 85px 35px;
  }
  nav a {
    min-height: 75px;
  }
  .nav-en {
    font-size: 48px;
  }
  nav li:last-child .nav-en {
    font-size: 42px;
  }
}
/* Continuous blue ruling stays aligned for the entire document. */
.paper {
  background-image:
    linear-gradient(
      90deg,
      #82b2c257 max(1px, calc(2 * var(--unit))),
      transparent 0
    ),
    linear-gradient(#82b2c257 max(1px, calc(2 * var(--unit))), transparent 0),
    url("assets/paper-grain.svg");
}
main {
  overflow-x: clip;
}
/* Full-bleed decorations span wide screens; the title alone is height-constrained. */
.fv-stage {
  width: 100%;
}
.film-title {
  left: 50%;
  transform: translateX(-50%);
  width: min(58.611111%, 82.421875svh);
}
.menu-toggle {
  background: transparent;
  border-radius: 50%;
}
@media (max-aspect-ratio: 1/1) {
  .film-title {
    width: min(83%, 55svh);
    left: 50%;
    top: 21%;
  }
  .rocket {
    top: 59%;
  }
  .rocket-trail {
    top: 65%;
  }
}
@media (max-width: 600px) {
  .film-title {
    width: 83%;
    top: 26%;
  }
  .rocket {
    top: 55%;
  }
  .rocket-trail {
    top: 60%;
  }
}

/* September 30 Figma revision: proportional artboard positions. */
.fv.paper {
  background-image: url("assets/9714d.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.release-note { left: 38.125%; top: 0; width: 23.75%; }
.fv-lead { font-size: calc(28 * var(--fv-unit)); }
.fv-director {
  position: absolute; left: 42.986111%; top: 83.984375%;
  font-size: calc(24 * var(--fv-unit)); line-height: normal;
  font-weight: 600; color: var(--blue); white-space: nowrap;
}
.intro-alien {
  position: absolute; left: 99.235069%; top: calc(117.4485 * var(--unit));
  width: calc(12.532 * var(--unit)); height: calc(20.862 * var(--unit));
  transform: rotate(161.51deg) scaleY(-1); pointer-events: none;
}
.introduction { overflow: clip; }
.footer-contact, .footer-privacy {
  position: absolute; bottom: calc(24 * var(--unit));
  color: var(--white); font-family: "Noto Sans JP", sans-serif;
  font-size: calc(10 * var(--unit)); line-height: 1.65; text-decoration: none;
}
.footer-contact { left: var(--footer-side-inset); }
.footer-privacy { right: var(--footer-side-inset); }
.fine-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor; transform: scaleX(0);
  transform-origin: left; transition: transform 240ms ease;
}
.fine-underline:hover::after, .fine-underline:focus-visible::after { transform: scaleX(1); }
@media (max-aspect-ratio: 1/1) {
  .planet, .cloud, .flower, .rocket, .rocket-trail, .festival-pin { height: auto; }
  .trailer { font-size: clamp(24px, 3vw, 32px); }
  .release-note { width: 40%; left: 30%; top: 9%; }
  .fv-credits { top: 77%; left: 10%; width: 80%; }
  .fv-credits p.fv-lead { font-size: clamp(20px, 3vw, 28px); }
  .fv-credits p.fv-cast { font-size: clamp(14px, 2.2vw, 20px); }
  .fv-credits p.fv-support { font-size: clamp(10px, 1.7vw, 16px); }
  .fv-director { top: 88%; left: 0; width: 100%; text-align: center; font-size: clamp(16px, 2.5vw, 24px); }
  .japanese-title { transform: rotate(2.64deg); }
}
@media (max-width: 600px) {
  .footer-contact, .footer-privacy { font-size: 10px; bottom: 13px; }
  .site-footer small { margin-bottom: 40px; }
  .intro-alien { top: 20px; left: auto; right: 1%; width: 12px; }
}
@media (prefers-reduced-motion: reduce) { .fine-underline::after { transition: none; } }

/* FV revision: date-note rays shared by desktop and the 402 × 874 mobile board. */
.responsive-vector { display: contents; }
.release-rays { width: 2.040979%; height: auto; }
.release-rays-left { left: 37.645%; top: 2.345%; transform: translate(-50%, -50%) rotate(-18.93deg) scaleX(-1); }
.release-rays-right { left: 62.225%; top: 2.345%; transform: translate(-50%, -50%) rotate(18.93deg); }
@media (min-width: 601px) and (max-aspect-ratio: 1/1) {
  .release-rays-left { left: 30%; top: 10.2%; }
  .release-rays-right { left: 70%; top: 10.2%; }
  .release-rays { width: 3.44%; }
}
/* Mobile source: Figma 109:3021. Centers follow viewport percentages; artwork
   scales uniformly to the available width/height, including browser toolbars.
   This preserves the composition without stretching the lettering on phones. */
@media (max-width: 600px) {
  .fv-stage { width: 100%; --mobile-unit: min(calc(100vw / 402), calc(100vh / 874)); --mobile-unit: min(calc(100vw / 402), calc(100dvh / 874)); }
  .fv.paper { background-size: calc(100vw * 783 / 402) auto; background-position: left top; }
  .menu-toggle {
    width: calc(100vw * 92 / 402); height: calc(100vw * 38.5505 / 402);
    right: 4.477612%; top: 2.745995vh; top: 2.745995dvh;
    font-size: calc(100vw * 14 / 402); letter-spacing: .01em;
  }
  .menu-toggle::after { content: ""; position: absolute; inset: -4px 0; }
  .film-title { left: 50.8706468%; top: 47.6300343%; width: calc(359 * var(--mobile-unit)); height: calc(230.573 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%); }
  .release-note { left: 49.8936567%; top: 17.5911899%; width: calc(276 * var(--mobile-unit)); height: calc(92 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%) rotate(-0.73deg); }
  .release-rays-left { left: 15.1900000%; top: 14.4100000%; width: calc(29.3901 * var(--mobile-unit)); height: calc(19.4897 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%) rotate(-18.93deg) scaleX(-1); }
  .release-rays-right { left: 84.3450000%; top: 14.4100000%; width: calc(29.3901 * var(--mobile-unit)); height: calc(19.4897 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%) rotate(18.93deg); }
  .festival { left: 15.2976119%; top: 5.5459954%; width: calc(86.9928 * var(--mobile-unit)); height: calc(48.944 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%); }
  .festival-pin { left: 5.8049751%; top: 3.7797483%; width: calc(9.531 * var(--mobile-unit)); height: calc(15.867 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%) rotate(161.51deg) scaleY(-1); }
  .planet { left: 17.0398010%; top: 29.4622426%; width: calc(81 * var(--mobile-unit)); height: calc(81 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%); }
  .cloud-top { left: 83.8832090%; top: 25.9554348%; width: calc(106.823 * var(--mobile-unit)); height: calc(46.976 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%) rotate(-8.18deg); }
  .cloud-left { left: -0.2390547%; top: 64.2319222%; width: calc(77.448 * var(--mobile-unit)); height: calc(28.597 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%) rotate(-6.18deg); }
  .cloud-right { left: 101.9560945%; top: 71.9923341%; width: calc(127.594 * var(--mobile-unit)); height: calc(48.708 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%) rotate(-9.17deg); }
  .japanese-title { left: 80.9829602%; top: 59.1236270%; width: calc(101.239 * var(--mobile-unit)); height: calc(42.8716 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%) rotate(2.64deg); }
  .rocket { left: calc(85.5 * var(--mobile-unit)); top: 76.5446224%; width: calc(61 * var(--mobile-unit)); height: calc(52 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%); }
  .rocket-trail { left: calc(29.5 * var(--mobile-unit)); top: calc(76.5446224% + 43 * var(--mobile-unit)); width: calc(59 * var(--mobile-unit)); height: calc(38 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%); }
  .flower-1 { left: 13.1794776%; top: 91.8761442%; width: calc(44.69 * var(--mobile-unit)); height: calc(61.107 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%) rotate(13.79deg); }
  .flower-2 { left: 73.3211443%; top: 93.8622998%; width: calc(38.295 * var(--mobile-unit)); height: calc(59.504 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%) rotate(-5.17deg); }
  .flower-3 { left: 89.6766169%; top: 91.3615561%; width: calc(35 * var(--mobile-unit)); height: calc(61 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%); }
  .flower-4 { left: 32.0895522%; top: 94.6224256%; width: calc(36 * var(--mobile-unit)); height: calc(60 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%); }
  .trailer { left: 49.9068408%; top: 67.1754977%; width: calc(157.251 * var(--mobile-unit)); height: calc(68.2277 * var(--mobile-unit)); bottom: auto; max-width: none; transform: translate(-50%, -50%); }
  .trailer { font-size: calc(24 * var(--mobile-unit)); gap: calc(8.59 * var(--mobile-unit)); }
  .play-icon { width: calc(27.9475 * var(--mobile-unit)); height: auto; }
  .trailer-rays { width: 20.52511%; height: auto; right: auto; left: 95.12%; top: -6.29%; transform: rotate(18.93deg); }
  .grass { left: 0; top: 85.125858%; bottom: auto; width: 100%; height: 15.331808%; object-fit: fill; transform: none; }
  .flower-1, .flower-4 { z-index: 0; }
  .grass, .flower-2, .flower-3 { z-index: 1; }
  .fv-credits { top: 76.315789%; left: 50.124378%; width: max-content; transform: translateX(-50%); line-height: 1.65; }
  .fv-credits p.fv-lead { font-size: calc(22 * var(--mobile-unit)); }
  .fv-credits p.fv-cast { font-size: calc(14 * var(--mobile-unit)); }
  .fv-credits p.fv-support { font-size: calc(12 * var(--mobile-unit)); }
  .fv-director { left: 50%; top: 87.299771%; width: max-content; transform: translateX(-50%); font-size: calc(18 * var(--mobile-unit)); }
}

/* FV motion: preserve the responsive placement on the outer artwork wrappers. */
.motion-filters { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.fv-stage > .wind-art, .fv-stage > .festival { position: absolute; pointer-events: none; }
.wind-art { display: block; }
.wind-ink { width: 100%; height: 100%; max-width: none; object-fit: fill; transform-origin: 50% 94%; }
.grass .wind-ink { transform-origin: 50% 100%; transform: scaleX(1.03); }
.festival { aspect-ratio: 154 / 86; }
.festival-logo { position: relative; width: 100%; height: 100%; object-fit: contain; }
/* Share the logo's actual contained dimensions, not its letterboxed element.
   Half a pixel of overlap prevents a hairline seam beside the building. */
.festival-alien-window {
  position: absolute; left: calc(var(--festival-alien-edge, 9.78865%) + .5px);
  top: calc(var(--festival-art-top, 0px) + var(--festival-art-height, 100%) * .03);
  width: calc(var(--festival-art-width, 100%) * .1282);
  height: calc(var(--festival-art-height, 100%) * .2948);
  transform: translateX(-100%); overflow: hidden;
}
.festival-alien-slide { display: block; width: 100%; height: 100%; transform: translateX(100%); }
.festival-alien {
  position: absolute; left: 50%; top: 50%; width: 67.733%; height: 87.8%; max-width: none;
  transform: translate(-50%, -50%) rotate(161.51deg) scaleY(-1);
}
@media (max-width: 600px) {
  .festival-alien-window {
    width: calc(var(--festival-art-width, 100%) * .16176);
    height: calc(var(--festival-art-height, 100%) * .36923);
    top: var(--festival-art-top, 0px);
  }
}
/* Only hand-drawn assets receive the three-frame ink displacement. */
.motion-enabled .fv.is-animating .boiling-ink,
.motion-enabled .menu-toggle .boiling-ink,
.motion-enabled main .boiling-ink,
.motion-enabled .peel-bottom .boiling-ink,
.motion-enabled #menu-panel[open] .boiling-ink,
.motion-enabled #trailer-dialog[open] .boiling-ink { filter: var(--ink-filter, none); }
.motion-enabled #menu-panel { background: transparent; height: 100vh; height: 100dvh; }
.motion-enabled #menu-panel::backdrop { background: transparent; }
.motion-enabled #menu-panel.menu-settled { background: var(--blue); }
.menu-curtain { display: none; }
.motion-enabled .menu-curtain { display: block; position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: var(--blue); }
.motion-enabled #menu-panel nav li { overflow: hidden; padding: 3px 0; margin: -3px 0; }
.motion-enabled #menu-panel nav a { will-change: transform, opacity; }
.motion-enabled .menu-identity, .motion-enabled .social-links { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .boiling-ink { filter: none !important; }
  .festival-alien-slide { transform: none; }
}

/* Line Boil: low-frequency contour changes on fixed drawings, held per frame.
   Thin outlines need more displacement than filled crayon illustrations. */
.motion-enabled .fv.is-animating .boiling-line,
.motion-enabled .menu-toggle .boiling-line,
.motion-enabled #menu-panel[open] .boiling-line { filter: var(--line-filter, none); }
@media (prefers-reduced-motion: reduce) {
  .boiling-line { filter: none !important; }
}
/* The small alien has a touch-sized, keyboard-accessible trigger. */
.alien-trigger {
  position: absolute; z-index: 2; left: var(--festival-alien-edge, 2%);
  top: calc(var(--festival-art-top, 0px) + var(--festival-art-height, 100%) * .15);
  width: 44px; height: 44px; transform: translate(-50%, -50%);
  pointer-events: auto; border-radius: 50%;
}
.alien-trigger[aria-disabled="true"] { cursor: default; }
.ufo-orbit {
  position: absolute; left: 0; top: 0; z-index: 5;
  max-width: none; pointer-events: none; transform-origin: center;
  will-change: transform;
}

/* Three paper layers: live FV fold → scrolling main → stationary landscape. */
.hero-boot .fv-stage { visibility: hidden; }
.hero-boot .menu-toggle { visibility: hidden; }
.note-3d {
  position: absolute; perspective: 650px; perspective-origin: 50% 50%;
  transform-style: preserve-3d; pointer-events: none;
}
.note-strip {
  position: absolute; left: 0; top: 0; height: 100%; overflow: hidden;
  transform-origin: left center; backface-visibility: hidden;
}
.note-strip-art { position: absolute; top: 0; height: 100%; max-width: none; }
.note-cast-shadow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: brightness(0) blur(4px); transform: translate(5px, 7px);
}
.note-entrance.peel {
  position: absolute; opacity: 1; overflow: hidden; pointer-events: none;
  -webkit-mask: url('assets/35834.webp') center / 100% 100% no-repeat;
  mask: url('assets/35834.webp') center / 100% 100% no-repeat;
}
.note-entrance .note-entrance-art { width: 100%; height: 100%; max-width: none; }
.note-entrance > .peel-top, .note-entrance > .peel-bottom { background: transparent; }
.note-entrance > .peel-back { background: #a4b0d4; }
html, body { overflow-x: clip; }
.site-shell { overflow-x: clip; }
.fv-turn {
  position: relative; z-index: var(--layer-fv);
  height: 100vh; height: 100dvh; overflow: hidden;
}
.fv-peel.peel { width: 100%; height: 100%; opacity: 1; }
.fv-peel > .peel-top, .fv-peel > .peel-bottom { overflow: hidden; }
.fv-peel > .peel-bottom { background-color: var(--paper); }
.fv-peel > .peel-back {
  background: #eee7d8 url('assets/paper-grain.svg') center / 240px 240px;
}
.fv-peel .fv { height: 100%; }
.page-peel-enabled #main { margin-top: calc(-1 * var(--peel-height, 100dvh)); }
.fv-turn.peel-complete { pointer-events: none; visibility: hidden; }
.site-shell > main { overflow: visible; display: flow-root; }
.paper-tear {
  position: absolute; top: calc(100% - 1px); left: 0; width: 100%;
  height: clamp(85px, 11.24vw, 160px); overflow: visible; pointer-events: none;
}
.paper-tear-surface {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: max(100%, 900px); height: 100%;
  filter: drop-shadow(0 8px 6px rgb(48 37 22 / .36));
}
.paper-tear-fill {
  height: 100%;
  -webkit-mask: url('assets/tear/paper-fill.svg') center / 100% 100% no-repeat;
  mask: url('assets/tear/paper-fill.svg') center / 100% 100% no-repeat;
}
.paper-tear-fiber { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Half a grid row above the tear; align the right edge with the privacy link. */
.credits .credit-body {
  padding-bottom: max(calc(152 * var(--unit)), calc(94 * var(--unit) + clamp(44px, calc(44 * var(--unit)), 66px) + 24px));
}
.credits-social {
  position: absolute; right: var(--footer-side-inset);
  bottom: calc(23.5 * var(--unit)); margin-top: 0;
}
.credits-social a { overflow: clip; }
.credits-social a:focus-visible {
  outline: 1px dashed var(--blue); outline-offset: 4px;
}
.site-footer {
  position: sticky; bottom: 0;
  height: clamp(280px, 40.416667vw, 85svh); aspect-ratio: auto;
}
@media (max-width: 600px) {
  /* Keep both outer figures in the crop, then shift the photograph slightly left. */
  .site-footer { height: clamp(min(280px, 66.666667vw), 62.5vw, 70svh); }
  .footer-landscape { object-position: 55% center; }
  .paper-tear { height: 100px; }
  .paper-tear-surface { filter: drop-shadow(0 6px 5px rgb(48 37 22 / .36)); }
  .credits .credit-body { padding-bottom: 135px; }
  .credits-social { bottom: 13px; }
}

.menu-toggle[data-photo="true"] > span { color: #fff; text-shadow: 0 1px 3px #000, 0 0 2px #000; }
.peel-corner {
  position: absolute; right: 0; bottom: 0; z-index: 20;
  width: 96px; height: 96px; cursor: pointer;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.peel-corner[hidden] { display: none; }
.peel-corner:focus-visible { background: #2864a433; outline: 0; }
.intro-body > hgroup { text-align: center; }
.intro-body > hgroup > p { padding-left: 0; }
.reveal-word, .reveal-char { display: inline-block; }
.reveal-word { white-space: nowrap; }
.reveal-line { display: block; overflow: clip; }
.reveal-line-ink { display: block; white-space: pre; }
.section-alien-rail {
  position: absolute; right: 0; width: clamp(20px, 1.8vw, 36px);
  pointer-events: none;
}
.section-alien-sticky { position: relative; overflow: clip; padding-block: 6px; }
.section-alien-art {
  width: 75%; margin-left: auto;
  transform: rotate(161.51deg) scaleY(-1);
}
.polaroid-hinge { transform-origin: 50% 0; }


/* Center names in the source artwork's white writing area, before rotation. */
.cast-card figcaption {
  left: 49.8%; top: 86.7%; bottom: auto; width: 88%;
  transform: translate(-50%, -50%); line-height: 1.25;
  padding-bottom: .1em;
}
.peel-bottom .intro-alien { visibility: hidden; }

/* The needle tip, rather than the image box, anchors the white border. */
.cast-card .pin {
  left: var(--pin-x); top: var(--pin-y);
  transform: translate(-15%, -94.5%);
}
.polaroid-hinge { transform-origin: var(--pin-x) var(--pin-y); }
.cast-1 { --pin-x: 46.30857%; --pin-y: 6.60809%; }
.cast-2 { --pin-x: 56.62016%; --pin-y: 6.86387%; }
.cast-3 { --pin-x: 48.76247%; --pin-y: 6.50608%; }
.cast-4 { --pin-x: 52.75256%; --pin-y: 6.55704%; }

/* Figma 1440-wide main: the crossed tape spans the two final stills. */
.credits-tape {
  position: absolute; z-index: 1; pointer-events: none;
  left: 54.611244%; top: -4.687662%; width: 6.805556%; height: auto;
  transform: rotate(129.761876deg); transform-origin: top left;
}
/* Figma footer: artwork occupies x1328..1390, y413..521 on 1440 x582. */
.footer-top {
  position: absolute; right: 3.472222%; bottom: 10.472749%;
  width: clamp(44px, calc(62 * var(--unit)), 93px); aspect-ratio: 62 / 108;
  color: #fffbef; text-decoration: none;
  font: 400 clamp(14.194px, calc(20 * var(--unit)), 30px)/1.25 Caveat, cursive;
}
.footer-top:focus-visible { outline: 1px dashed currentColor; outline-offset: 8px; }
.footer-top > img, .footer-top-label { position: absolute; }
.footer-top-label {
  left: 20.967742%; top: 36.694082%; width: 53.225806%;
  transform: rotate(-6.39951deg); transform-origin: top left;
}
.footer-ufo { left: 0; top: 68.473533%; width: 98.252026%; }
.footer-arrow-stem { left: 48.387097%; top: 0; width: 4.83871%; }
.footer-arrow-head { left: 35.483871%; top: 0; width: 30.645161%; }
.footer-ray-left-lower { left: 0; top: 42.547607%; width: 10.802%; }
.footer-ray-left-upper { left: 0; top: 29.584644%; width: 10.448%; }
.footer-ray-right-upper { left: 87.096774%; top: 29.584644%; width: 11.407%; }
.footer-ray-right-lower { left: 88.709677%; top: 40.695756%; width: 10.757%; }
.motion-enabled .site-footer .boiling-ink { filter: var(--ink-filter, none); }
@media (max-width: 600px) { .footer-top { bottom: 26%; } }

.footer-return-craft { position: fixed; z-index: 40; height: auto; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }

/* Mobile main: full-width stacked stills and a shared rocket/trail scale. */
@media (max-width: 600px) {
  .film-strip { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .film-strip .still { display: block; width: 100%; height: auto; aspect-ratio: 720 / 302; }
  .intro-tape, .film-strip .tape, .credits-tape { display: none; }
  .intro-rocket { width: 9%; left: 11.325843%; top: 28px; }
  .intro-trail { width: 10.921348%; left: 0; top: calc(28px + 7.58427vw); }
  .site-footer small {
    position: absolute; left: 50%; bottom: 14px; margin: 0;
    transform: translateX(-50%); font-size: 10px; line-height: 1.4; white-space: nowrap;
  }
  .footer-contact, .footer-privacy {
    bottom: 14px; font-size: 8px; line-height: 1.4; white-space: nowrap;
  }
  .footer-contact { font-size: clamp(6px, 1.8vw, 8px); }
}

/* Keep the preview and the live sheet mutually exclusive during a page turn.
   overflow: clip prevents iOS touch scrolling the cloned introduction internally. */
.fv-turn, .fv-peel > .peel-top { overflow: clip; }
.fv-peel > .peel-bottom { overflow: clip; contain: paint; }
.peel-covering-main #main,
.peel-covering-main .site-footer { visibility: hidden; }
@media (hover: none) and (pointer: coarse) {
  /* Pin geometry uses the stable large viewport; artwork still fills the visible screen. */
  .fv-turn { height: 100vh; height: 100lvh; }
  .fv-peel.peel { height: 100vh; height: 100dvh; }
  .fv-turn .peel-corner { bottom: max(0px, calc(100lvh - 100dvh)); }
  html.touch-scrolling .boiling-ink { filter: none !important; }
}

/* Tablet FV: preserve artwork proportions and anchor the details to the title/grass. */
@media (min-width: 601px) and (max-width: 1366px) {
  .trailer { width: 6.552125em; height: 2.84282em; aspect-ratio: 210 / 91.114; gap: .357917em; }
  .trailer .play-icon { width: 17.77261%; }
  .trailer-rays { width: 20.52511%; height: auto; left: 95.12%; right: auto; top: -6.29%; }
}
@media (min-width: 601px) and (max-aspect-ratio: 1/1) {
  .trailer { left: 50%; top: 63%; transform: translateX(-50%); }
  /* The right end of the yellow underline is about 75% down the title art.
     Add roughly 1.5 paper-grid cells; preserve the approved horizontal position. */
  .japanese-title { top: calc(21% + min(83vw, 55svh) * .4823 + 5vw); }
  .flower-1, .flower-3 { bottom: 9%; }
  .flower-2 { bottom: 1%; }
  .flower-4 { bottom: 2%; }
}

/* Pointer focus restoration must not draw a second oval around the artwork.
   Keyboard users retain a visible, brand-colored focus indicator. */
.menu-toggle:focus { outline: none; }
.menu-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
html[data-input-mode="pointer"] .menu-toggle:focus-visible { outline: none; }

/* Approved responsive desktop layout — 2026-10-02.
   1440 is the design width; the FV also respects the available viewport height.
   Phone/tablet rules remain in the original stylesheet. */
@media (min-width: 1367px) and (min-aspect-ratio: 1/1) {
  :root {
    --unit: min(0.0694444444vw, 2.666666667px);
    --body: calc(21 * var(--unit));
    --footer-bottom-inset: max(24px, calc(40 * var(--unit)), env(safe-area-inset-bottom));
  }

  .site-shell, .menu-surface { max-width: 3840px; }
  .fv-stage { --fv-unit: min(0.0694444444vw, 0.09765625svh, 2.666666667px); }

  /* Center the text boxes themselves, independently of the text width. */
  .fv-credits, .fv-director {
    left: 50%;
    width: max-content;
    max-width: 90%;
    text-align: center;
    transform: translateX(-50%);
  }

  /* Use one scale for both dimensions of each drawing. Percentage positions
     still spread the composition across a wider screen. */
  .festival { width: calc(154 * var(--fv-unit)); height: calc(86 * var(--fv-unit)); }
  .release-note { left: 50%; width: calc(342 * var(--fv-unit)); transform: translateX(-50%); }
  .release-rays { width: calc(29.3901 * var(--fv-unit)); }
  .release-rays-left { left: calc(50% - 178.812 * var(--fv-unit)); }
  .release-rays-right { left: calc(50% + 176.04 * var(--fv-unit)); }
  .planet { width: calc(128 * var(--fv-unit)); height: calc(128 * var(--fv-unit)); }
  .cloud-top { width: calc(150.28 * var(--fv-unit)); height: calc(66.087 * var(--fv-unit)); }
  .cloud-left { width: calc(178.811 * var(--fv-unit)); height: calc(66.026 * var(--fv-unit)); }
  .cloud-right { width: calc(194 * var(--fv-unit)); height: calc(74.056 * var(--fv-unit)); }
  .japanese-title { width: calc(196 * var(--fv-unit)); height: calc(83 * var(--fv-unit)); }
  .flower-1 { width: calc(81.155 * var(--fv-unit)); height: calc(110.967 * var(--fv-unit)); }
  .flower-2 { width: calc(81.553 * var(--fv-unit)); height: calc(126.381 * var(--fv-unit)); }
  .flower-3 { width: calc(80 * var(--fv-unit)); height: calc(140 * var(--fv-unit)); }
  .flower-4 { width: calc(70 * var(--fv-unit)); height: calc(118 * var(--fv-unit)); }
  .rocket { left: calc(89 * var(--fv-unit)); width: calc(89 * var(--fv-unit)); height: calc(75 * var(--fv-unit)); }
  .rocket-trail { left: 0; width: calc(86 * var(--fv-unit)); height: calc(56 * var(--fv-unit)); }
  .trailer { width: calc(210 * var(--fv-unit)); height: calc(91.114 * var(--fv-unit)); }

  /* Keep the main typography and controls proportional beyond the previous
     2160 cap, rather than growing the images while the text stops growing. */
  hgroup > p { font-size: calc(18 * var(--unit)); }
  .name-reading { font-size: calc(16 * var(--unit)); }
  .director-profile .prose { font-size: calc(20 * var(--unit)); }
  .credit-line { font-size: calc(13.846 * var(--unit)); }
  .credit-line.line-1 { font-size: calc(30 * var(--unit)); }
  .credit-line.line-2 { font-size: calc(25.385 * var(--unit)); }
  .credit-line.line-3 { font-size: calc(18.462 * var(--unit)); }
  .credit-line.line-4 { font-size: calc(27.692 * var(--unit)); }
  .credit-line.line-10 { font-size: calc(16.154 * var(--unit)); }
  .outline-button {
    width: calc(105 * var(--unit)); height: calc(44 * var(--unit));
    font-size: calc(16 * var(--unit));
  }
  .menu-toggle {
    top: calc(28 * var(--unit));
    right: max(calc((100vw - 3840px) / 2 + 28 * var(--unit)), calc(28 * var(--unit)));
  }
  .close-menu { top: calc(28 * var(--unit)); }
  .menu-identity span:first-child { font-size: calc(32 * var(--unit)); }
  .menu-identity span:last-child { font-size: calc(14 * var(--unit)); }
  .nav-jp { font-size: calc(16 * var(--unit)); }
  .social-links a { width: calc(44 * var(--unit)); height: calc(44 * var(--unit)); }
  .section-alien-rail { width: calc(25.92 * var(--unit)); }

  .paper-tear { height: calc(160 * var(--unit)); }
  .paper-tear-surface {
    filter: drop-shadow(0 calc(8 * var(--unit)) calc(6 * var(--unit)) rgb(48 37 22 / .36));
  }
  .credits .credit-body { padding-bottom: calc(162 * var(--unit)); }

  /* Footer height follows the same design width as the paper. All three
     legal/contact lines share a bottom inset and the UFO clears that row. */
  .site-footer { height: min(calc(582 * var(--unit)), 85svh); }
  .site-footer small {
    position: absolute; left: 50%; bottom: var(--footer-bottom-inset);
    margin: 0; transform: translateX(-50%);
    font-size: calc(13 * var(--unit)); white-space: nowrap;
  }
  .footer-contact, .footer-privacy { bottom: var(--footer-bottom-inset); }
  .footer-top {
    width: calc(62 * var(--unit)); font-size: calc(20 * var(--unit));
    bottom: max(14%, calc(var(--footer-bottom-inset) + 47 * var(--unit)));
  }
}

/* Keep the FV centered when a desktop window crosses into the smaller layout.
   Preserve the existing tablet typography and mobile/portrait composition. */
@media (min-width: 601px) and (max-width: 1366px) and (min-aspect-ratio: 1/1) {
  .fv-credits, .fv-director {
    left: 50%;
    width: max-content;
    max-width: 90%;
    text-align: center;
    transform: translateX(-50%);
  }
  .planet {
    width: calc(128 * var(--fv-unit));
    height: calc(128 * var(--fv-unit));
  }
}