/* ④ 透明感, warmed into a youthful summer trip. Base: the clear draft's sky, watercolour edges, fogged glass and
   breathing page. Borrowed from ① 作畫用紙: she is a pencil drawing until colour spreads from her chest, coral-pen notes,
   a stamp landing on the ticket. Borrowed from ② 劇場版: warm sun and light leak, a film subtitle, works that carry
   feeling. What she can do is a train line: seven stations, a station sign, a train that moves as you scroll. */
@property --clear { syntax: '<percentage>'; inherits: false; initial-value: 160%; }
@property --fill { syntax: '<percentage>'; inherits: false; initial-value: 130%; }

:root {
  color-scheme: light;
  --white: #fffdf9;
  --cream: #fff6e9;
  --ink: #2f4255;
  --deep: #22354a;
  --muted: #4e6277;
  --blue: #2f6fae;
  --blue-soft: #8dbfe2;
  --coral: #ec6f55;
  --coral-soft: #f6a48c;
  --sun: #ffc98a;
  --pink: #f0a3bd;
  --hair: rgba(47, 111, 174, .16);
  --serif: "Noto Serif TC", "Shippori Mincho", serif;
  --mincho: "Shippori Mincho", "Noto Serif TC", serif;
  --sans: "Noto Sans TC", system-ui, sans-serif;
  --latin: "Cormorant Garamond", "Noto Serif TC", serif;
  --hand: "Iansui", "Klee One", cursive;
  --gutter: clamp(16px, 4.2vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 16px/1.85 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
img, video { display: block; max-width: 100%; }
main { overflow-x: clip; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }

/* ───────── header ───────── */
.top {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 26px;
  padding: 20px var(--gutter);
  transition: background .6s ease, box-shadow .6s ease, padding .6s ease;
}
.top.is-scrolled { padding-top: 12px; padding-bottom: 12px; background: rgba(255, 253, 249, .66); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 var(--hair); }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.brand b { font: 500 21px/1 var(--latin); letter-spacing: .34em; color: var(--blue); }
.brand span { font: italic 300 15px/1 var(--latin); letter-spacing: .12em; color: var(--muted); }
.menu-toggle { display: none; }
.site-menu { display: contents; }
.nav { display: flex; justify-content: flex-end; gap: 30px; }
.nav a { position: relative; display: grid; justify-items: center; gap: 3px; padding-bottom: 7px; text-decoration: none; font-size: 13.5px; font-weight: 400; letter-spacing: .1em; }
.nav a i { font: italic 400 12.5px/1 var(--latin); letter-spacing: .08em; color: var(--blue-soft); }
.nav a::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--coral); opacity: 0; transform: translateX(-50%) scale(.4); transition: opacity .4s, transform .4s; }
.nav a:hover::after, .nav a.is-here::after { opacity: 1; transform: translateX(-50%) scale(1); }
.langs { display: flex; gap: 11px; font: 400 12.5px/1 var(--sans); letter-spacing: .08em; color: var(--muted); }
.langs b { color: var(--blue); font-weight: 500; }

/* the call to action: a warm sunlit pill */
.sun-btn {
  position: relative; display: inline-flex; align-items: center; gap: 16px;
  padding: 15px 30px; border-radius: 999px; text-decoration: none;
  font: 500 15px/1 var(--sans); letter-spacing: .14em; color: #fff;
  background: linear-gradient(120deg, #b74c2c, #ab4039 55%, #ab3d57);
  box-shadow: 0 14px 28px -14px rgba(236, 111, 85, .8), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .4s ease, box-shadow .4s ease;
}
.sun-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -14px rgba(236, 111, 85, .85), inset 0 1px 0 rgba(255, 255, 255, .45); }
.sun-btn i { position: relative; width: 26px; height: 1px; background: currentColor; }
.sun-btn i::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
.sun-btn.small { padding: 11px 20px; font-size: 13.5px; }

/* ───────── hero ───────── */
.hero { position: relative; min-height: max(100vh, 720px); overflow: hidden; background: linear-gradient(180deg, #cfe7f6 0%, #e8f3fa 42%, #fdf6ec 100%); }
.wm { position: absolute; margin: 0; pointer-events: none; white-space: nowrap; font: italic 300 clamp(120px, 25vw, 420px)/.8 var(--latin); letter-spacing: -.01em; color: rgba(47, 111, 174, .07); }
.wm-hero { left: -1.5vw; bottom: -3vw; }

.pic { position: absolute; z-index: 1; right: 3vw; top: 84px; width: 58vw; height: calc(100% - 132px); }
.pic-in { position: absolute; inset: 0; -webkit-mask: url("img/wash.png") center / 100% 100% no-repeat; mask: url("img/wash.png") center / 100% 100% no-repeat; }
.pic-in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(255, 250, 240, .5), rgba(255, 255, 255, .04) 46%, rgba(255, 246, 230, .26)); }
.pic-bg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; filter: saturate(.86) brightness(1.06) contrast(.95); transform-origin: 62% 40%; transform: scale(1.03); }
.pic-in .warm {
  /* early-summer warmth from the sun at the top right */
  position: absolute; inset: 0; mix-blend-mode: soft-light;
  background: radial-gradient(70% 80% at 92% 4%, rgba(255, 196, 120, .85), rgba(255, 196, 120, 0) 70%), linear-gradient(0deg, rgba(255, 190, 140, .35), transparent 50%);
}
.pic-edge { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; opacity: .5; pointer-events: none; }

.sky-light { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.bloom { position: absolute; right: -10vw; top: -22vh; width: 72vw; height: 86vh; background: radial-gradient(closest-side, rgba(255, 249, 236, .95), rgba(255, 236, 205, .45) 46%, rgba(255, 230, 200, 0)); mix-blend-mode: screen; opacity: .7; }
.sun { position: absolute; right: 9vw; top: 70px; width: 0; height: 0; }
.sun i { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); mix-blend-mode: screen; }
.sun .core { width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 252, 240, .95) 0 4%, rgba(255, 222, 170, .55) 12%, rgba(255, 190, 130, .18) 34%, transparent 64%); }
.sun .streak { width: 110vw; height: 2px; border-radius: 50%; opacity: .6; background: linear-gradient(90deg, transparent, rgba(255, 200, 150, .16) 28%, rgba(255, 246, 228, .95) 50%, rgba(170, 210, 255, .2) 72%, transparent); box-shadow: 0 0 14px 3px rgba(255, 200, 140, .22); }
.ghosts i { position: absolute; border-radius: 50%; mix-blend-mode: screen; transform: translate(-50%, -50%); }

.her, .notes { position: absolute; z-index: 4; bottom: -2vh; left: calc(100% - 32vw); height: min(94vh, 980px); aspect-ratio: 736 / 1200; transform: translateX(-50%); }
.her { -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%); mask-image: linear-gradient(to top, transparent 0%, #000 22%); }
.her > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.her-line { opacity: .92; }
.her-still {
  -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 calc(var(--fill) - 5%), transparent calc(var(--fill) + 1%));
  mask-image: radial-gradient(circle at 50% 46%, #000 calc(var(--fill) - 5%), transparent calc(var(--fill) + 1%));
  transition: opacity .36s ease;
}
.her-shine {
  /* the bright, wet edge of the colour as it spreads, like watercolour */
  background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0) calc(var(--fill) - 9%), rgba(255, 255, 255, .9) calc(var(--fill) - 1.5%), rgba(255, 238, 214, .65) var(--fill), rgba(255, 238, 214, 0) calc(var(--fill) + 3%));
  -webkit-mask: url("img/her-still.webp") center / 100% 100% no-repeat; mask: url("img/her-still.webp") center / 100% 100% no-repeat;
  opacity: 0;
}
.her-alive, .her-source { opacity: 0; object-fit: contain; }
.her-alive { transition: opacity .36s ease; }
.hero[data-preview="motion"] .her-alive { opacity: 1; }
.hero[data-preview="motion"] .her-still { opacity: 0; }
.hero[data-preview="still"] :is(.notes, .air) { visibility: hidden; }
.notes { z-index: 5; pointer-events: none; }
.notes svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.notes path { fill: none; stroke: var(--coral); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.note { position: absolute; margin: 0; white-space: nowrap; font: 400 clamp(15px, 1.35vw, 20px)/1.25 var(--hand); color: var(--coral); transform: rotate(var(--r, -2deg)); text-shadow: 0 0 10px rgba(255, 253, 249, .9); }
.note small { display: block; font-size: .72em; opacity: .85; }

.subtitle {
  /* a line of dialogue, the way an anime film subtitles it */
  position: absolute; z-index: 6; left: calc(100% - 32vw); bottom: 20vh; transform: translateX(-50%);
  white-space: nowrap; font: 500 clamp(15px, 1.2vw, 18px)/1.6 var(--sans); letter-spacing: .1em; color: #fff;
  text-shadow: 0 0 2px rgba(15, 25, 45, .9), 0 1px 3px rgba(15, 25, 45, .8), 0 0 18px rgba(15, 25, 45, .5); transition: opacity .55s ease;
}
.subtitle.out { opacity: 0; }

.tate { position: absolute; z-index: 5; right: 6.2vw; top: 124px; writing-mode: vertical-rl; font: 500 clamp(17px, 1.45vw, 22px)/1.6 var(--mincho); letter-spacing: .5em; color: var(--blue); text-shadow: 0 0 18px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, .9); }

.copy { position: absolute; z-index: 11; left: calc(var(--gutter) + 2vw); top: 50%; transform: translateY(-46%); width: min(36vw, 520px); }
.eyebrow { margin-bottom: 20px; font: italic 400 17px/1.2 var(--latin); letter-spacing: .16em; color: var(--blue); }
h1 { font: 400 clamp(38px, 4.2vw, 64px)/1.42 var(--serif); letter-spacing: .1em; color: var(--deep); }
h1 span { display: block; }
.copy h1 span + span { color: #244e70; }
.kw { display: flex; align-items: center; gap: 14px; margin-top: 22px; font: 400 15px/1.5 var(--sans); letter-spacing: .12em; color: var(--blue); }
.kw::before { content: ""; flex: none; width: 34px; height: 1px; background: var(--coral-soft); }
.lead { margin-top: 12px; max-width: 26em; font-size: 15.5px; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.soft-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: .35em; font-size: 15px; font-weight: 500; letter-spacing: .06em; }
.soft-link:hover { color: var(--blue); }

/* Two views of the same cut, with the small station stamp on the stub. */
.ticket {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 74px; margin-top: 30px; max-width: 420px;
  color: var(--deep); border-block: 1px solid rgba(65, 107, 144, .28);
  background: linear-gradient(110deg, rgba(255, 255, 255, .78), rgba(255, 252, 245, .25));
}
.t-main { padding: 12px 16px 12px 18px; }
.t-kind { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font: 600 12px/1.3 var(--sans); letter-spacing: .16em; color: var(--blue); }
.t-kind i { font: 500 11px/1.2 var(--sans); letter-spacing: .12em; color: var(--muted); }
.cut-switch:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 8px 0 7px; border: 1px solid #9db6c7; background: #9db6c7; }
.cut-switch button {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 5px 6px;
  border: 0; background: #f5fafc; color: #294760; font: 500 14px/1.35 var(--sans); cursor: pointer;
}
.cut-switch button:hover { background: #e3eef6; }
.cut-switch button[aria-pressed="true"] { background: linear-gradient(105deg, #244764, #325e7c); color: #fff9ee; box-shadow: inset 0 -2px #e7ba96; }
.cut-switch button[aria-busy="true"] { cursor: progress; }
.cut-switch button:focus-visible { z-index: 1; }
.cut-switch svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.cut-feedback { font-size: 13px; color: #8e442f; }
.cut-feedback:empty { margin: 0; }
.t-facts { display: flex; flex-wrap: wrap; gap: 0 16px; }
.t-facts div { display: flex; align-items: baseline; gap: 6px; }
.t-facts dt { font: italic 400 12.5px/1.6 var(--latin); letter-spacing: .1em; color: var(--blue-soft); }
.t-facts dd { font-size: 12.5px; font-weight: 400; line-height: 1.6; }
.t-stub { display: grid; align-content: end; gap: 2px; padding-bottom: 12px; text-align: center; border-left: 1px solid var(--hair); }
.t-stub span { font: 500 10px/1 var(--latin); letter-spacing: .24em; color: var(--blue-soft); }
.t-stub b { font: 500 13px/1.2 var(--latin); letter-spacing: .06em; color: var(--blue); }
.stamp, .stamp-ring { position: absolute; right: 9px; top: -10px; width: 60px; height: 60px; border-radius: 50%; transform: rotate(-12deg); pointer-events: none; }
.stamp {
  display: grid; place-content: center; justify-items: center; gap: 1px;
  border: 2.5px solid var(--coral); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0), inset 0 0 0 4.5px var(--coral);
  color: var(--coral); mix-blend-mode: multiply;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.2 0 0 0 2.0'/></filter><rect width='120' height='120' filter='url(%23f)'/></svg>") center / 100% 100%;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.2 0 0 0 2.0'/></filter><rect width='120' height='120' filter='url(%23f)'/></svg>") center / 100% 100%;
}
.stamp b { font: 800 17px/1 var(--mincho); letter-spacing: .08em; }
.stamp span { font: 600 6px/1.2 var(--latin); letter-spacing: .08em; }
.stamp-ring { border: 2px solid var(--coral); opacity: 0; }

.leak {
  /* a warm light leak that crosses the frame once */
  position: absolute; z-index: 8; top: -20%; bottom: -20%; left: -60%; width: 60%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 170, 110, .6), rgba(255, 120, 90, .22) 55%, transparent), radial-gradient(closest-side at 70% 40%, rgba(255, 232, 180, .5), transparent 70%);
  filter: blur(30px);
}
.air { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; pointer-events: none; }

/* the fogged pane, cleared by --clear from her face */
.fog {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  background-color: rgba(246, 249, 251, .6);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.8 -0.7'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  backdrop-filter: blur(10px) saturate(.8) brightness(1.06);
  -webkit-mask-image: radial-gradient(circle at var(--cx, 66%) var(--cy, 36%), transparent calc(var(--clear) - 14%), #000 calc(var(--clear) + 4%));
  mask-image: radial-gradient(circle at var(--cx, 66%) var(--cy, 36%), transparent calc(var(--clear) - 14%), #000 calc(var(--clear) + 4%));
}
.drop {
  position: absolute; width: var(--d); height: calc(var(--d) * 1.2); border-radius: 50% 50% 47% 47%;
  background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .98) 0 16%, rgba(255, 255, 255, .3) 38%, rgba(140, 175, 200, .22) 70%, rgba(80, 120, 150, .42) 100%);
  box-shadow: 0 1px 1px rgba(255, 255, 255, .8), 0 2px 5px rgba(60, 90, 120, .18);
}

.scroll { position: absolute; z-index: 8; left: calc(var(--gutter) + 2vw); bottom: 22px; display: grid; justify-items: start; gap: 8px; text-decoration: none; font: italic 400 14px/1 var(--latin); letter-spacing: .3em; color: var(--blue); }
.scroll::after { content: ""; width: 1px; height: 44px; margin-left: 2px; background: linear-gradient(var(--blue), transparent); animation: drip 2.6s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ───────── clouds between sections ───────── */
.mist { position: relative; z-index: 3; height: 0; pointer-events: none; }
.mist i { position: absolute; left: -15vw; width: 130vw; top: -26vh; height: 52vh; background: url("img/mist-a.webp") center / 100% 100% no-repeat; will-change: transform; }
.mist .mist-b { top: -18vh; height: 42vh; opacity: .85; background-image: url("img/mist-b.webp"); transform: scaleX(-1); }

/* ───────── sections ───────── */
.works, .about { position: relative; overflow: clip; }  /* clip, not hidden: hidden would trap the sticky route stage */
.works { padding: clamp(100px, 13vh, 158px) var(--gutter) clamp(86px, 12vh, 138px); background: linear-gradient(180deg, #fdf8f0, #e9f1f9 68%, #f6f9fb); }
.works::before {
  content: ""; position: absolute; inset: 18% -8% 4%; pointer-events: none;
  background: radial-gradient(34% 30% at 28% 50%, rgba(141, 191, 226, .5), transparent 72%), radial-gradient(26% 26% at 72% 70%, rgba(246, 164, 140, .3), transparent 72%), radial-gradient(30% 26% at 64% 30%, rgba(255, 222, 170, .45), transparent 72%);
  filter: blur(30px);
}
.wm-sec { top: 8vh; right: -2vw; font-size: clamp(110px, 19vw, 320px); }
.about .wm-sec { right: auto; left: -2vw; top: 10vh; }
.sec-head { position: relative; z-index: 2; max-width: 760px; margin: 0 auto 9vh; text-align: center; }
.sec-head .eyebrow { margin-bottom: 14px; }
.eyebrow span { margin-right: 10px; font-style: normal; font-weight: 500; color: var(--coral); }
.sec-head h2 { font: 400 clamp(30px, 3vw, 46px)/1.4 var(--serif); letter-spacing: .14em; color: var(--deep); }
.sec-lead { margin-top: 16px; font-size: 15.5px; color: var(--muted); text-wrap: pretty; }
.sec-lead + .sec-lead { margin-top: 2px; }

/* Works: the original portrait-format videos sit inside landscape scenes. */
.works .sec-head, .uses .sec-head { max-width: 1160px; margin-bottom: clamp(30px, 5vh, 54px); text-align: left; }
.scenes { position: relative; z-index: 2; display: grid; gap: clamp(38px, 7vh, 76px); max-width: 1160px; margin: 0 auto; }
.scene {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(200px, 286px) minmax(0, 430px);
  justify-content: center; align-items: center; gap: clamp(38px, 7vw, 116px); padding: clamp(28px, 4vw, 52px);
  color: #fff9f2; border: 1px solid rgba(28, 42, 61, .22); background: #29364b;
  box-shadow: 0 32px 54px -36px rgba(32, 48, 66, .58);
}
.scene::before, .scene::after { content: ""; position: absolute; pointer-events: none; }
.scene::before { z-index: -2; inset: 0; background-size: cover; background-position: center; }
.scene::after { z-index: -1; inset: 10px; border: 1px solid rgba(255, 255, 255, .22); }
.scene--room::before {
  background-image: linear-gradient(90deg, rgba(48, 34, 43, .13), rgba(45, 33, 49, .94) 63%), url("../concepts/img/bg/room-day.jpg");
}
.scene--study { grid-template-columns: minmax(0, 430px) minmax(200px, 286px); }
.scene--study::before {
  background: radial-gradient(ellipse at 88% 16%, #829fbd, transparent 54%), linear-gradient(115deg, #202a3d 10%, #405a75 100%);
}
.scene--study .scene-media { order: 1; }
.scene-media { min-width: 0; padding: 5px 5px 0; background: #161e2c; box-shadow: 0 18px 34px -12px rgba(16, 20, 28, .62), 0 0 0 1px rgba(255, 250, 240, .32); }
.screen video { width: 100%; aspect-ratio: 9 / 16; object-fit: contain; background: #161e2c; }
.scene-credit { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; padding: 8px 6px 9px; font: 500 10px/1.2 var(--sans); letter-spacing: .14em; color: #d7e1eb; }
.scene-copy { min-width: 0; }
.scene-copy .eyebrow, .scene-copy .eyebrow span { color: #f8cbaa; }
.scene-copy .eyebrow::before { content: ""; display: inline-block; width: 30px; height: 1px; margin-inline-end: 12px; vertical-align: middle; background: currentColor; }
.eyebrow.small { margin-bottom: 8px; font-size: 15px; }
.scene-copy h3 { margin: 8px 0 12px; font: 500 clamp(25px, 3.1vw, 40px)/1.35 var(--serif); letter-spacing: .055em; text-wrap: balance; }
.scene-copy h3:lang(ja) { font-family: var(--mincho); }
.scene-copy > p:not(.eyebrow):not(.facts) { font-size: 15px; color: #f0e7e3; text-wrap: pretty; }
.moments { list-style: none; display: grid; gap: 5px; margin: 18px 0 0; padding: 0; color: #f8d7bd; font-size: 14px; }
.moments li { display: flex; gap: 10px; align-items: baseline; }
.moments li::before { content: ""; flex: none; width: 4px; height: 4px; align-self: start; margin-top: .72em; background: #e5b68d; transform: rotate(45deg); }
.scene-copy .facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .24); font-size: 13px; letter-spacing: .08em; color: #f3e5da; }
.facts i { width: 3px; height: 3px; border-radius: 50%; background: #e5b68d; }

/* the stopover: the live character, loaded on request */
.play { position: relative; overflow: clip; padding: clamp(94px, 13vh, 155px) var(--gutter) 13vh; background: linear-gradient(180deg, #f6f9fb, #e6f0f7 46%, #f6f9fb); }
.play .wm-sec { left: auto; right: -2vw; top: 6vh; }
.play-grid {
  position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: start;
  max-width: 1030px; margin: 0 auto; padding: 1px; border: 1px solid #bdcfdb;
  background: linear-gradient(115deg, #f8fcff, #e3edf5 48%, #fcfaf5); box-shadow: 0 28px 58px -37px rgba(33, 62, 94, .55);
}
.play-preview, .play-preview-copy { display: none; }
.play-preview { position: relative; z-index: 2; max-width: 580px; margin: 0 auto; padding: 5px 5px 0; background: #202f44; box-shadow: 0 18px 32px -22px rgba(33, 62, 94, .7); }
.play-preview video { width: 100%; height: auto; background: var(--deep); }
.play-preview figcaption { padding: 10px; font-size: 13px; color: #e7eff6; letter-spacing: .08em; }
.play-window { min-width: 0; padding: 9px 9px 10px; }
.play-stage {
  position: relative; aspect-ratio: 0.82; overflow: hidden; border: 1px solid #a7becc; border-radius: 3px; cursor: default;
  background: url("../concepts/img/bg/beach.jpg") 60% 40% / cover;
}
.play-stage::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 252, 244, .35), rgba(255, 246, 232, .15) 60%, rgba(255, 238, 220, .3)); backdrop-filter: blur(3px); }
.play-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease; }
.play-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.play.is-live .play-canvas { opacity: 1; }
.play.is-live .play-poster { opacity: 0; }
.play.is-live .play-stage { cursor: pointer; }
.play-gate { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; transition: opacity .5s; }
.play-gate .sun-btn { border: 0; cursor: pointer; }
.play-gate .sun-btn:disabled { cursor: wait; }
.play-note { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .78); backdrop-filter: blur(6px); font-size: 12.5px; color: var(--muted); }
.play.is-live .play-gate { visibility: hidden; opacity: 0; pointer-events: none; }
.play.is-loading .play-note { visibility: hidden; }
.play-loading { position: absolute; left: 20%; right: 20%; bottom: 12%; margin: 0; opacity: 0; transition: opacity .4s; }
.play.is-loading .play-loading { opacity: 1; }
.play-bar { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .55); overflow: hidden; }
.play-bar i { display: block; width: 35%; height: 100%; background: linear-gradient(90deg, #f59a6c, #ec6f55); }
.play.is-loading .play-bar i { animation: loading-slide 1.2s ease-in-out infinite alternate; }
@keyframes loading-slide { to { transform: translateX(185%); } }
.play-sub {
  position: absolute; left: 6%; right: 6%; bottom: 5%; margin: 0; display: grid; gap: 2px; justify-items: center; text-align: center;
  opacity: 0; transition: opacity .4s; pointer-events: none;
  color: #fff; text-shadow: 0 0 2px rgba(15, 25, 45, .9), 0 1px 3px rgba(15, 25, 45, .8), 0 0 16px rgba(15, 25, 45, .5);
}
.play-sub.on { opacity: 1; }
.play-sub span { font: 400 13px/1.5 var(--mincho); letter-spacing: .08em; opacity: .9; }
.play-sub b { font: 500 16px/1.5 var(--sans); letter-spacing: .08em; }
.play-window figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 6px 2px; font-size: 13px; color: var(--muted); }
.play-status { color: var(--blue); }
.play-panel { min-width: 0; padding: clamp(18px, 3vw, 36px); display: grid; gap: 17px; }
.play-who { display: flex; gap: 4px; border-bottom: 1px solid #adc4d5; }
.play-who button { flex: 1; min-width: 0; padding: 12px 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; font: 500 15px/1.35 var(--serif); letter-spacing: .06em; color: var(--deep); }
.play-who button:hover { background: rgba(255, 255, 255, .66); }
.play-who button[aria-pressed="true"] { border-color: #416f97; background: rgba(255, 255, 255, .8); color: #275b88; }
.play-label { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font: 500 13.5px/1.2 var(--sans); letter-spacing: .14em; color: var(--blue); }
.play-label small { font-size: 11.5px; letter-spacing: .06em; color: var(--muted); font-weight: 400; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.chip { padding: 8px 12px; border-radius: 3px; border: 1px solid rgba(47, 111, 174, .26); background: rgba(255, 255, 255, .72); cursor: pointer; font: 400 13.5px/1.2 var(--sans); letter-spacing: .04em; color: var(--deep); transition: background .25s, border-color .25s, transform .25s; }
.chip:hover { background: #fff; transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: #345f84; border-color: #345f84; color: #fff; }
.chip:lang(ja) { font-family: var(--mincho); }
.chip-wait { font-size: 13px; color: var(--muted); }
.play-group[hidden] { display: none; }
.play-cta { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; margin: 9vh auto 0; font: 400 18px/1.5 var(--serif); letter-spacing: .08em; color: var(--deep); }

/* the zoom button and the medium-size view: the window and its panel lifted into the middle of the screen */
.play-zoom {
  position: absolute; z-index: 3; right: 12px; top: 12px; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .9); cursor: pointer;
  background: rgba(255, 255, 255, .72); backdrop-filter: blur(8px); color: var(--blue);
  box-shadow: 0 8px 18px -10px rgba(47, 111, 174, .6); transition: transform .3s, background .3s;
}
.play-zoom:hover { transform: scale(1.08); background: #fff; }
.play-zoom svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.play-zoom svg + svg, .play.is-big .play-zoom svg:first-child { display: none; }
.play.is-big .play-zoom svg + svg { display: block; }
.play.is-big .play-grid {
  position: fixed; inset: 0; z-index: 60; max-width: none; margin: 0; padding: 4vh 4vw;
  grid-template-columns: auto minmax(0, 420px); align-content: center; justify-content: center; align-items: center; gap: 28px;
  border: 0; background: rgba(236, 245, 251, .7); backdrop-filter: blur(16px) saturate(1.2);
  animation: play-in .35s ease-out;
}
@keyframes play-in { from { opacity: 0; } }
.play.is-big .play-stage { height: min(84vh, 920px); width: auto; }
.play.is-big .play-window, .play.is-big .play-panel { border: 1px solid #bdcfdb; background: #f8fbfd; box-shadow: 0 42px 66px -37px rgba(30, 60, 100, .55); }
html.play-lock { overflow: hidden; }

/* about: a train line through what she can do */
.about { padding: clamp(105px, 16vh, 185px) var(--gutter) 15vh; background: linear-gradient(180deg, #f6f9fb, #fffdf9 38%, #fdf4ea); }
.about-sky { position: absolute; left: 50%; top: 6vh; width: 94vw; height: 76vh; transform: translateX(-50%); -webkit-mask: url("img/wash-wide.png") center / 100% 100% no-repeat; mask: url("img/wash-wide.png") center / 100% 100% no-repeat; opacity: .42; pointer-events: none; overflow: hidden; }
.about-sky img { width: 100%; height: 260%; object-fit: cover; object-position: 50% 0%; filter: saturate(.75) brightness(1.12) sepia(.08); }
.about .sec-head::before { content: ""; position: absolute; inset: -50px -140px; z-index: -1; background: radial-gradient(closest-side, rgba(255, 253, 249, .9), rgba(255, 253, 249, .6) 55%, rgba(255, 253, 249, 0)); }
.route { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; }
.route-stage { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 5vw; }
.js-route .route { height: calc(7 * 52vh + 100vh); }
.js-route .route-stage { position: sticky; top: 92px; height: calc(100vh - 112px); }

.window {
  min-width: 0; padding: clamp(12px, 1.6vw, 22px); border: 1px solid #bdcfda;
  background: linear-gradient(135deg, #fdfcf7, #e2edf4 57%, #f8f7f2);
  box-shadow: 0 24px 54px -34px rgba(32, 58, 88, .55), inset 0 0 0 1px rgba(255, 255, 255, .85);
}
.sign {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-items: start; align-items: center;
  gap: 3px 10px; padding: 0 3px 12px;
}
.sign-name { font: 600 clamp(18px, 2vw, 26px)/1.3 var(--serif); letter-spacing: .1em; color: var(--deep); }
.sign-en { grid-column: 1; font: 500 11px/1.4 var(--sans); letter-spacing: .16em; color: var(--muted); }
.sign-no {
  grid-column: 2; grid-row: 1 / span 2; padding: 4px 8px; border: 1px solid rgba(67, 104, 136, .34);
  color: #305e82; font: 600 13px/1.25 var(--latin); letter-spacing: .12em;
}
.win-wrap { position: relative; padding: 5px; border: 1px solid #8ba7ba; background: linear-gradient(150deg, #55748d, #21354a 45%, #304d65); }
.win-screen { position: relative; overflow: hidden; aspect-ratio: 960 / 630; border-radius: 3px; background: #e3eef6; }
.win-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(116deg, rgba(255, 255, 255, .19), transparent 30% 80%, rgba(255, 255, 255, .07));
  box-shadow: inset 0 0 14px rgba(24, 40, 65, .24);
}
.win-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.win-v.on { opacity: 1; }
.win-progress { position: absolute; z-index: 1; inset: auto 0 0; height: 2px; background: #f0d0a9; transform-origin: left; transform: scaleX(0); }
.win-cap { display: flex; align-items: baseline; gap: 10px; padding: 12px 3px 0; }
.win-no { font: italic 500 21px/1 var(--latin); color: #925239; }
.win-desc { font: 400 14px/1.5 var(--sans); color: var(--deep); }
.win-who { margin-left: auto; font-size: 12px; letter-spacing: .07em; color: var(--muted); white-space: nowrap; }

.line-wrap { position: relative; padding-left: 8px; }
.line { position: relative; list-style: none; padding: 0; display: grid; }
.line::before { content: ""; position: absolute; left: 22px; top: 21px; bottom: 22px; width: 2px; background: linear-gradient(#9fb9d1, #527b9a, #bf936c); }
.line button {
  position: relative; width: 100%; display: grid; grid-template-columns: 46px 32px minmax(0, 1fr); column-gap: 4px;
  align-items: baseline; padding: 10px 12px 10px 0; border: 0; cursor: pointer; background: transparent;
  font: inherit; color: inherit; text-align: left; transition: background .35s ease;
}
.line .dot {
  grid-row: span 2; justify-self: center; align-self: start; margin-top: 8px; width: 12px; height: 12px;
  border-radius: 50%; background: #f9fbfd; border: 2px solid #5d86a7; position: relative; z-index: 1;
  transition: background .35s, border-color .35s;
}
.line .no { grid-row: span 2; font: italic 500 20px/1.3 var(--latin); color: #547c9d; }
.line .name { font: 500 17px/1.5 var(--serif); letter-spacing: .06em; color: var(--deep); }
.line .desc { grid-column: 3; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.line button:hover { background: rgba(255, 255, 255, .64); }
.line button.past .dot { background: #5d86a7; }
.line button.is-on { background: linear-gradient(90deg, transparent 28px, rgba(212, 229, 242, .65) 68px, rgba(255, 255, 255, .36)); }
.line button.is-on .dot { border-color: #a56d47; }
.line button.is-on .no, .line button.is-on .name { color: #854f35; }
.route-marker {
  position: absolute; z-index: 2; left: 31px; top: var(--marker-y, 0px); width: 13px; height: 13px;
  background: linear-gradient(135deg, #ffedc8, #bd8258); border: 1px solid #87563b; pointer-events: none;
  box-shadow: 0 0 0 3px #f9f5eb, 0 0 14px 3px rgba(200, 135, 82, .54);
  transform: translate(-50%, -50%) rotate(45deg); transition: top .2s linear;
}

.js-rise [data-rise] { opacity: 0; filter: blur(10px); transform: translateY(40px); transition: opacity 1.4s ease, filter 1.4s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.js-rise [data-rise].is-in { opacity: 1; filter: none; transform: none; }

/* ───────── the rest of the day: uses (afternoon), making, FAQ (dusk), the letter (sunset), the footer (night) ───────── */
.uses, .making, .faq, .contact { position: relative; overflow: clip; }
.uses { padding: clamp(98px, 13vh, 158px) var(--gutter) 14vh; background: linear-gradient(180deg, #fdf7ee, #fcf1e7 58%, #fbecdf); }
.making { padding: 16vh var(--gutter) 16vh; background: linear-gradient(180deg, #fbecdf 0%, #f8e7e2 100%); }
.faq { padding: 16vh var(--gutter) 18vh; background: linear-gradient(180deg, #f8e7e2 0%, #f2e4ec 100%); }
.uses .wm-sec, .faq .wm-sec { left: -2vw; right: auto; }
.making .wm-sec { top: 4vh; }

/* Four applications framed as finished scenes, with their captions outside the image. */
.examples {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 68px) clamp(22px, 4.5vw, 64px); max-width: 1160px; margin: 0 auto;
}
.example { min-width: 0; }
#after-school { scroll-margin-top: 86px; }
.example-frame {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid rgba(39, 58, 80, .28);
  background: #27384d; box-shadow: 0 20px 37px -23px rgba(53, 53, 71, .53);
}
.example-frame img { width: 100%; height: 100%; object-fit: cover; }
.example-copy { padding: 15px 0 0; }
.example-copy .example-index {
  display: flex; align-items: center; gap: 10px; color: #805137;
  font: 600 12px/1.35 var(--sans); letter-spacing: .14em;
}
.example-index span { display: inline-flex; align-items: center; gap: 10px; }
.example-index span::after { content: ""; width: 20px; height: 1px; background: #b98c70; }
.example-copy h3 { margin: 7px 0 5px; font: 500 clamp(19px, 2.2vw, 26px)/1.42 var(--serif); letter-spacing: .06em; color: var(--deep); }
.example-copy p { font-size: 15px; color: var(--muted); text-wrap: pretty; }
.example-copy .example-credit { margin: 3px 0 5px; font-size: 13px; font-weight: 500; color: #805137; }
.adv-preview { container-type: inline-size; }
.adv-video { width: 100%; height: 100%; object-fit: contain; }
.adv-video::cue { background-color: transparent; color: #fff4e6; font-family: var(--sans); font-size: clamp(10px, 2.5cqw, 20px); text-shadow: 0 1px 3px #171d30; }
.adv-controls:not([hidden]) { display: flex; align-items: center; gap: 12px; padding-right: 14px; background: #233244; color: #ffedd7; }
.adv-toggle {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 13px;
  border: 0; background: #35455a; color: inherit; cursor: pointer; font: 500 13px/1.3 var(--sans);
}
.adv-toggle:hover { background: #445872; }
.adv-toggle:focus-visible { outline-color: #ffedd7; outline-offset: -3px; }
.adv-toggle svg { flex: none; width: 14px; fill: currentColor; }
.adv-toggle[data-state="pause"] .adv-play-icon,
.adv-toggle:not([data-state="pause"]) .adv-pause-icon { display: none; }
.adv-controls progress { flex: 1; min-width: 0; height: 5px; accent-color: #e2ad85; }
.adv-time { flex: none; font: 400 12px/1.3 var(--sans); font-variant-numeric: tabular-nums; }
.adv-feedback { margin-top: 4px; font-size: 13px; color: #8e442f; }

/* making: the itinerary, with her layer table beside it (.layers, below) */
.trip-plan { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(36px, 6vw, 80px); max-width: 1040px; margin: 0 auto; align-items: start; }
.itinerary { position: relative; list-style: none; margin: 0; padding: 6px 0 0; }
.itinerary::before { content: ""; position: absolute; left: 13px; top: 18px; bottom: 34px; width: 1px; background: linear-gradient(#bc957b, #a9bfd4); }
.itinerary li { position: relative; padding: 0 0 40px 45px; }
.pin { position: absolute; left: 8px; top: 7px; width: 11px; height: 11px; border: 1px solid #98694e; background: #ffebd4; transform: rotate(45deg); }
.leg { font: italic 500 15px/1 var(--latin); letter-spacing: .12em; color: #89563e; }
.itinerary h3 { margin: 6px 0 6px; font: 500 22px/1.4 var(--serif); letter-spacing: .08em; color: var(--deep); }
.itinerary p { font-size: 15px; color: var(--muted); max-width: 30em; text-wrap: pretty; }
.sheets-note { position: absolute; left: -64px; bottom: 90px; margin: 0; font: 400 18px/1.4 var(--hand); color: var(--coral); transform: rotate(-6deg); text-shadow: 0 0 10px #fff; }

/* FAQ: one reading surface with a divider between questions. */
.qa-list {
  position: relative; z-index: 2; max-width: 860px; margin: 0 auto; border-block: 1px solid rgba(87, 86, 110, .26);
  background: linear-gradient(142deg, rgba(255, 253, 248, .68), rgba(253, 248, 246, .3));
}
.qa + .qa { border-top: 1px solid rgba(87, 86, 110, .2); }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 10px; padding: 18px 24px; font: 500 16.5px/1.55 var(--serif); letter-spacing: .04em; color: var(--deep); }
.qa summary:hover, .qa[open] { background: rgba(255, 255, 255, .46); }
.qa summary::-webkit-details-marker { display: none; }
.q { font: italic 500 23px/1 var(--latin); color: #914f3a; }
.qa summary i { width: 10px; height: 10px; border-right: 1.5px solid var(--blue); border-bottom: 1.5px solid var(--blue); transform: rotate(45deg) translate(-2px, -2px); transition: transform .35s ease; }
.qa[open] summary i { transform: rotate(-135deg) translate(-2px, -2px); }
.qa p { display: grid; grid-template-columns: 34px 1fr; gap: 10px; margin: 0; padding: 0 24px 20px; font-size: 15px; line-height: 1.95; color: var(--muted); }
.a { font: italic 500 23px/1.25 var(--latin); color: var(--blue); }
mark.tbd { background: linear-gradient(transparent 62%, rgba(255, 210, 110, .6) 0); color: inherit; }

/* Contact: the afternoon ends on the illustrated platform. */
.contact {
  isolation: isolate; padding: clamp(95px, 12vh, 148px) var(--gutter) clamp(82px, 12vh, 138px);
  background: #303951; color: #fff7ed;
}
.contact-bg { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 48%; }
.contact::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, #40496e, rgba(46, 48, 72, .32) 24%, transparent 58%),
    linear-gradient(90deg, rgba(27, 31, 47, .97), rgba(32, 34, 51, .91) 30%, rgba(32, 34, 51, .54) 53%, transparent 80%);
}
.contact-inner { max-width: 1160px; margin: 0 auto; }
.contact .sec-head { max-width: 510px; margin: 0 0 22px; text-align: left; }
.contact .sec-head h2 { color: #fff8ec; }
.contact .eyebrow, .contact .eyebrow span { color: #ffd2ae; }
.letter { position: relative; display: grid; gap: 22px; max-width: 490px; }
.letter-lead { font: 500 clamp(17px, 2vw, 21px)/1.65 var(--serif); letter-spacing: .045em; text-wrap: pretty; }
.letter-list { list-style: none; margin: 17px 0 0; padding: 0; display: grid; gap: 7px; color: #f8e8dc; }
.letter-list li { display: flex; align-items: baseline; gap: 11px; font-size: 15px; }
.letter-list li::before { content: ""; flex: none; align-self: center; width: 5px; height: 5px; background: #e8ba91; transform: rotate(45deg); }
.letter-sign { margin-top: 14px; font: 400 16px/1.5 var(--hand); color: #ffd0ab; }
.letter-addr { display: grid; align-content: start; gap: 8px; padding-top: 17px; border-top: 1px solid rgba(255, 226, 198, .35); }
.to { display: flex; align-items: baseline; gap: 12px; font: 500 20px/1.3 var(--latin); letter-spacing: .14em; color: #fff7ed; }
.to span { font: italic 400 16px/1 var(--latin); color: #ffd0ab; }
.addr { font: 500 22px/1.3 var(--latin); letter-spacing: .045em; color: #fff0db; }
.contact mark.tbd { background: linear-gradient(transparent 73%, rgba(255, 206, 148, .28) 0); }
.letter-addr .sun-btn { justify-self: start; margin-top: 9px; color: #43291f; background: linear-gradient(120deg, #fff1da, #f5c4a1); }
.contact :focus-visible { outline-color: #fff2d8; }
.social { font-size: 13px; color: #eddcd5; }

/* the footer: night after the sunset */
.site-foot {
  position: relative; overflow: hidden; display: grid; gap: 28px; padding: 11vh var(--gutter) 6vh;
  background: linear-gradient(180deg, #4d5480 0%, #2c3250 55%, #20253c 100%); color: rgba(255, 255, 255, .78);
}
.site-foot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background:
    radial-gradient(1.2px 1.2px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 28% 12%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 46% 30%, #fff, transparent), radial-gradient(1px 1px at 63% 16%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 78% 26%, #fff, transparent), radial-gradient(1px 1px at 90% 10%, #fff, transparent),
    radial-gradient(1px 1px at 36% 44%, #fff, transparent), radial-gradient(1.2px 1.2px at 85% 46%, #fff, transparent);
}
.site-foot > * { position: relative; }
.foot-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 40px; }
.site-foot .brand b { color: #fff; }
.site-foot .brand span { color: rgba(255, 255, 255, .6); }
.foot-tag { font: 400 17px/1.6 var(--serif); letter-spacing: .14em; color: #fff; }
.foot-tag span { margin-left: 16px; font: 400 14px/1.6 var(--mincho); letter-spacing: .3em; color: rgba(255, 255, 255, .62); }
.foot-nav, .foot-langs { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14px; }
.foot-nav a, .foot-langs a { text-decoration: none; color: rgba(255, 255, 255, .78); }
.foot-nav a:hover, .foot-langs a:hover, .foot-langs a[aria-current] { color: #ffd2b8; }
.foot-guide { margin: 0; font-size: 14px; } .foot-guide a { color: rgba(255, 255, 255, .78); text-decoration: none; border-bottom: 1px dashed rgba(255, 255, 255, .35); } .foot-guide a:hover { color: #ffd2b8; }
.foot-legal { display: grid; gap: 4px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.foot-top-link { justify-self: end; text-decoration: none; font: italic 400 15px/1 var(--latin); letter-spacing: .14em; color: #ffd2b8; }

/* ───────── languages (11/08): the same page in 繁中, 简中, 日本語 and English (scripts/build_trip_langs.py) ───────── */
.langs a { color: inherit; text-decoration: none; transition: color .3s; }
.langs a:hover { color: var(--blue); }
.langs a[aria-current] { color: var(--blue); font-weight: 500; }
:root:lang(zh-Hans) {
  --serif: "Noto Serif SC", "Shippori Mincho", serif;
  --sans: "Noto Sans SC", system-ui, sans-serif;
  --latin: "Cormorant Garamond", "Noto Serif SC", serif;
  --hand: "LXGW WenKai TC", "Klee One", cursive;
}
:root:lang(ja) {
  --serif: "Shippori Mincho", "Noto Serif JP", serif;
  --sans: "Noto Sans JP", system-ui, sans-serif;
  --latin: "Cormorant Garamond", "Shippori Mincho", serif;
  --hand: "Klee One", cursive;
}
/* English: Latin headlines need less tracking and a smaller size to keep the two-line hero */
:root:lang(en) h1 { font-size: clamp(34px, 3.5vw, 54px); line-height: 1.22; letter-spacing: .01em; }
:root:lang(en) .sec-head h2 { letter-spacing: .02em; }
:root:lang(en) h3, :root:lang(en) .sign-name, :root:lang(en) .line .name { letter-spacing: .02em; }
/* the station sign's small English line repeats the English name on the English page */
:root:lang(en) .sign-en { display: none; }
:root:lang(en) {
  --serif: "Noto Serif", Georgia, serif;
  --sans: "Noto Sans", system-ui, sans-serif;
  --latin: "Cormorant Garamond", "Noto Serif", serif;
  --hand: "Klee One", cursive;
}

/* ───────── making: her real layers on a light table (11/08). Scrolling the itinerary spreads the 39 layers she shows at
   rest out in depth (行程 02), puts them back (行程 03), and once whole her twin tails and ahoge sway (行程 03-04).
   Layers baked by scripts/bake_making_layers.py; the stage is sticky beside the itinerary on desktop. ───────── */
.trip-plan { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); }
.layers {
  position: sticky; top: 12vh; margin: 0; padding: 12px 12px 14px; border: 1px solid #c3d2dc;
  background: linear-gradient(145deg, #fffaf1, #edf5fa 55%, #e0ebf2); box-shadow: 0 24px 44px -31px rgba(45, 67, 89, .48);
}
.layers-view {
  --e: 0; position: relative; height: min(66vh, 640px); min-height: 440px; overflow: hidden; border-radius: 3px;
  perspective: 1500px; perspective-origin: 50% 38%;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    linear-gradient(rgba(47, 111, 174, .07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(47, 111, 174, .07) 1px, transparent 1px) 0 0 / 24px 24px,
    #e4eef6;
  box-shadow: inset 0 0 0 1px rgba(47, 111, 174, .1), inset 0 -40px 60px -40px rgba(120, 90, 60, .12);
}
.layers-rig { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.ly { position: absolute; transform-style: preserve-3d; outline: 5px solid rgba(47, 111, 174, calc(var(--e) * .3)); }
.ly img { display: block; width: 100%; height: 100%; }
.ly-tag {
  position: absolute; left: 0; top: 0; z-index: 2; padding: 4px 10px 5px; border-radius: 20px; white-space: nowrap; pointer-events: none;
  background: #fffaf0; box-shadow: 0 4px 10px rgba(80, 60, 40, .18); font: 500 12.5px/1.2 var(--serif); letter-spacing: .08em; color: var(--deep);
  opacity: clamp(0, calc((var(--e) - .6) * 3.2), 1);
}
.ly-tag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--coral); vertical-align: 2px; }
.layers-count { position: absolute; left: 16px; top: 12px; z-index: 3; margin: 0; display: flex; align-items: baseline; gap: 8px; color: var(--deep); pointer-events: none; }
.layers-count b { font: 500 46px/1 var(--latin); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--coral); min-width: 2.2ch; }
.layers-count span { font: 500 15px/1 var(--serif); letter-spacing: .14em; }
.layers figcaption { padding: 12px 6px 0; font-size: 13.5px; line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.layers .sheets-note { left: -78px; bottom: 120px; }
.layers-fallback { width: 100%; height: 100%; object-fit: contain; }
/* once whole again she starts moving: twin tails swing from the ribbons, the ahoge from its root */
.layers.is-alive [data-id="tail_l"] img { transform-origin: 72% 4%; animation: ly-sway 3.6s ease-in-out infinite; }
.layers.is-alive [data-id="tail_r"] img { transform-origin: 28% 4%; animation: ly-sway 3.6s ease-in-out -1.8s infinite reverse; }
.layers.is-alive [data-id="ahoge"] img { transform-origin: 40% 100%; animation: ly-sway 2.4s ease-in-out -.6s infinite; }
.layers.is-alive .layers-rig { animation: ly-breathe 4.2s ease-in-out infinite; }
@keyframes ly-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes ly-breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
/* the itinerary stop being shown beside it stays bright */
.itinerary li { transition: opacity .5s ease; }
.itinerary.is-staged li:not(.is-on) { opacity: .45; }
@media (min-width: 821px) {
  /* room to read each stop while the stage stays put beside it */
  .itinerary li { min-height: 36vh; }
  .itinerary { margin-bottom: 24vh; }
}
@media (max-width: 820px) {
  .layers { position: relative; top: auto; }
  .layers-view { height: 62vh; min-height: 400px; }
  .layers .sheets-note { left: auto; right: 10px; bottom: auto; top: -18px; }
}
@media (prefers-reduced-motion: reduce) {
  .layers.is-alive [data-id] img, .layers.is-alive .layers-rig { animation: none; }
}

/* The use-case scenes scale their internal UI to the image width. */
.mock { container-type: inline-size; isolation: isolate; }
.mock > :not(img) { position: absolute; z-index: 2; }
.mock *, .mock *::before, .mock *::after { animation-play-state: paused; }
.examples.is-live .mock *, .examples.is-live .mock *::before, .examples.is-live .mock *::after { animation-play-state: running; }

/* LOOP: the standby screen of a stream: badge, "starting soon" with a countdown, chat coming in */
.live-badge { left: 3cqw; top: 3cqw; display: flex; align-items: center; gap: 1.2cqw; padding: 1cqw 2.2cqw; border-radius: 99px; background: rgba(255, 253, 248, .9); font: 600 2cqw/1 var(--latin); letter-spacing: .2em; color: var(--deep); box-shadow: 0 .6cqw 1.6cqw rgba(60, 50, 40, .14); }
.live-badge i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #ec6f55; animation: live-dot 1.6s ease-in-out infinite; }
@keyframes live-dot { 50% { opacity: .25; } }
.live-soon { left: 3cqw; bottom: 3cqw; display: grid; grid-template-columns: auto auto; align-items: end; column-gap: 3cqw; row-gap: 1cqw; padding: 2.2cqw 3cqw 2.4cqw; border-radius: 1.6cqw; background: rgba(255, 253, 248, .92); box-shadow: 0 1cqw 3cqw rgba(60, 50, 40, .18); }
.live-soon small { grid-column: 1 / -1; font: 600 1.8cqw/1 var(--latin); letter-spacing: .32em; text-transform: uppercase; color: var(--coral); }
.live-soon b { font: 500 3.9cqw/1.15 var(--serif); letter-spacing: .1em; color: var(--deep); }
.live-count { font: 600 4.6cqw/1 var(--latin); font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--coral); }
.live-chat {
  right: 3cqw; top: 29cqw; bottom: 3cqw; width: 29cqw; margin: 0; padding: 0; list-style: none; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1.1cqw;
  -webkit-mask: linear-gradient(transparent, #000 34%); mask: linear-gradient(transparent, #000 34%);
}
.live-chat li { flex: none; padding: .9cqw 1.6cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, .86); font-size: 2.05cqw; line-height: 1.4; color: #3d4a5a; box-shadow: 0 .4cqw 1cqw rgba(60, 50, 40, .1); }
.live-chat li b { margin-right: 1cqw; font-weight: 600; color: #2f6fae; }
/* MV: 茉莉 on an evening platform, graded warm, a lyric line filling as it is sung */
.mock-mv .mv-bg { transform: scaleX(-1); object-position: 50% 60%; }
.mock .mv-girl { position: absolute; z-index: 1; left: 13cqw; top: 6cqw; width: 37cqw; height: auto; object-fit: initial; filter: sepia(.18) saturate(1.06) brightness(.94) drop-shadow(.8cqw 0 2.2cqw rgba(255, 168, 96, .55)); animation: mv-sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes mv-sway { 50% { transform: translateY(-.5cqw) rotate(-.6deg); } }
.mv-glow { inset: 0; background: radial-gradient(circle at 58% 40%, rgba(255, 196, 120, .42), transparent 46%), linear-gradient(transparent 50%, rgba(36, 20, 44, .6)); }
.mv-song { left: 3.4cqw; top: 3.4cqw; display: grid; gap: .6cqw; font: 500 2.6cqw/1.2 var(--serif); letter-spacing: .12em; color: #fff; text-shadow: 0 1px 6px rgba(70, 30, 10, .55); }
.mv-song span { font: italic 400 1.9cqw/1 var(--latin); letter-spacing: .1em; opacity: .9; }
.mv-lyric { left: 0; right: 0; bottom: 4.6cqw; text-align: center; }
.mv-l, .mv-l::after { font: 600 3.7cqw/1 var(--serif); letter-spacing: .14em; text-shadow: 0 0 .5cqw rgba(60, 24, 50, .9), 0 .3cqw 1.2cqw rgba(0, 0, 0, .35); }
.mv-l { position: relative; display: inline-block; color: #fffaf2; }
.mv-l::after { content: attr(data-l); position: absolute; left: 0; top: 0; color: #ffcf7a; clip-path: inset(-20% 100% -20% 0); animation: mv-sing 7s linear infinite; }
@keyframes mv-sing { 0%, 8% { clip-path: inset(-20% 100% -20% 0); opacity: 1; } 78% { clip-path: inset(-20% 0 -20% 0); opacity: 1; } 92%, 100% { clip-path: inset(-20% 0 -20% 0); opacity: 0; } }
/* WEB: a character site in a browser window; the cursor comes over, taps her, a heart pops */
.mock-web { background: #eef1f5; }
.web-bar { left: 0; right: 0; top: 0; height: 7cqw; display: flex; align-items: center; gap: 1.1cqw; padding: 0 2.4cqw; background: #e6e9ee; border-bottom: 1px solid rgba(40, 50, 60, .08); }
.web-bar i { flex: none; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #f08b7c; }
.web-bar i:nth-child(2) { background: #f3c467; } .web-bar i:nth-child(3) { background: #82cc8c; }
.web-url { margin-left: 2cqw; width: 44cqw; padding: .9cqw 2.4cqw; border-radius: 99px; background: #fff; font-size: 1.9cqw; line-height: 1.2; letter-spacing: .08em; color: #6b7682; }
.web-url::before { content: ""; display: inline-block; width: 1.2cqw; height: 1.1cqw; margin-right: 1.2cqw; border-radius: .25cqw; background: #8b95a0; vertical-align: -.05em; box-shadow: 0 -.75cqw 0 -.2cqw #fff, 0 -.75cqw 0 0 #8b95a0; }
.web-page { left: 0; right: 0; top: 7cqw; bottom: 0; overflow: hidden; }
.web-page > * { position: absolute; }
.mock .web-bg { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) brightness(1.04); }
.web-page::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 253, 248, .94) 0 34%, rgba(255, 253, 248, 0) 60%); }
.web-nav, .web-copy, .web-girl, .web-cursor, .web-heart, .web-tap { z-index: 2; }
.web-nav { left: 4cqw; top: 2.6cqw; display: flex; align-items: baseline; gap: 2.6cqw; font: 600 1.6cqw/1 var(--latin); letter-spacing: .2em; color: #5a6672; }
.web-nav b { margin-right: 1.4cqw; font: 600 2.5cqw/1 var(--latin); letter-spacing: .3em; color: var(--coral); }
.web-copy { left: 5cqw; top: 15cqw; width: 34cqw; display: grid; gap: 1.4cqw; }
.web-copy small { font: 600 1.7cqw/1 var(--latin); letter-spacing: .32em; text-transform: uppercase; color: var(--coral); }
.web-copy b { font: 500 5.2cqw/1.2 var(--serif); letter-spacing: .08em; color: var(--deep); }
.web-copy i { height: 1.2cqw; border-radius: 99px; background: rgba(61, 74, 90, .13); }
.web-copy i + i { width: 72%; }
.web-btn { justify-self: start; margin-top: 1.2cqw; padding: 1.3cqw 3.2cqw; border-radius: 99px; background: linear-gradient(90deg, #f59a6c, #ec6f55); color: #fff; font: 600 1.7cqw/1 var(--latin); letter-spacing: .24em; }
.mock .web-girl { left: 44cqw; top: 3cqw; width: 29cqw; height: auto; object-fit: initial; transform-origin: 50% 90%; filter: drop-shadow(0 1cqw 2cqw rgba(60, 80, 110, .25)); animation: web-girl 6s ease-in-out infinite; }
.web-cursor { left: 60cqw; top: 15cqw; width: 3.2cqw; fill: #fff; stroke: #26313c; stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 .3cqw .5cqw rgba(0, 0, 0, .25)); animation: web-cursor 6s ease-in-out infinite; }
.web-tap { left: 59.2cqw; top: 14.2cqw; width: 2cqw; height: 2cqw; border-radius: 50%; border: .35cqw solid rgba(236, 111, 85, .8); opacity: 0; animation: web-tap 6s ease-out infinite; }
.web-heart { left: 64cqw; top: 4cqw; font-style: normal; font-size: 4.4cqw; line-height: 1; color: #ec6f55; opacity: 0; text-shadow: 0 .4cqw 1cqw rgba(236, 111, 85, .35); animation: web-heart 6s ease-out infinite; }
@keyframes web-cursor { 0% { transform: translate(18cqw, 24cqw); } 34% { transform: translate(0, 0); } 40% { transform: translate(0, 0) scale(.86); } 46%, 66% { transform: translate(0, 0); } 100% { transform: translate(18cqw, 24cqw); } }
@keyframes web-tap { 0%, 39% { opacity: 0; transform: scale(.4); } 41% { opacity: 1; } 58%, 100% { opacity: 0; transform: scale(3); } }
@keyframes web-heart { 0%, 40% { opacity: 0; transform: translateY(1.5cqw) scale(.5); } 48% { opacity: 1; transform: translateY(0) scale(1.08); } 72% { opacity: 1; transform: translateY(-2cqw) scale(1); } 86%, 100% { opacity: 0; transform: translateY(-3.6cqw) scale(.95); } }
@keyframes web-girl { 0%, 100% { transform: rotate(.8deg); } 34%, 66% { transform: rotate(-1.2deg) translateX(.4cqw); } 44% { transform: rotate(-1.2deg) translateX(.4cqw) translateY(-.8cqw); } }
@media (prefers-reduced-motion: reduce) { .mock *, .mock *::before, .mock *::after { animation: none !important; } .web-heart { opacity: 1; } }

/* ───────── motion.js: the choreography's resting states and the small loops ───────── */
.top { transition: background .6s ease, box-shadow .6s ease, padding .6s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.top.is-tucked { transform: translateY(-110%); }
.skip { position: fixed; z-index: 80; left: 16px; top: -60px; padding: 10px 16px; border-radius: 999px; background: var(--blue); color: #fff; text-decoration: none; font-size: 14px; transition: top .3s; }
.skip:focus { top: 14px; }
/* the call-to-action pills: a glint passes on hover */
.sun-btn { overflow: hidden; }
.sun-btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); transition: left .7s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.sun-btn:hover::before { left: 130%; }
/* The route line draws in and light crosses the preview as the stop changes. */
.line::before { transform: scaleY(var(--draw, 1)); transform-origin: top; transition: transform 1.8s cubic-bezier(.45, 0, .2, 1) .2s; }
.pass { position: absolute; z-index: 2; top: -10%; bottom: -10%; left: 0; width: 45%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); filter: blur(8px); mix-blend-mode: screen; }
/* the stopover's glass: one glint when the window opens */
.play-stage::after { content: ""; position: absolute; z-index: 2; top: -20%; bottom: -20%; left: -60%; width: 45%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-14deg); opacity: 0; }
.play-stage.glint::after { animation: glint 1.4s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes glint { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
/* the itinerary's path follows the scroll */
.itinerary::before { transform: scaleY(var(--path, 1)); transform-origin: top; }
/* night: the stars twinkle and now and then one falls */
.site-foot::before { animation: twinkle 5s ease-in-out infinite alternate; }
@keyframes twinkle { 0% { opacity: .45; } 50% { opacity: .85; } 100% { opacity: .6; } }
.site-foot::after {
  content: ""; position: absolute; left: 70%; top: 8%; width: 120px; height: 1.5px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9)); border-radius: 2px;
  transform: rotate(-24deg); animation: falling 9s linear 2s infinite;
}
@keyframes falling { 0%, 86% { opacity: 0; translate: 0 0; } 88% { opacity: 1; } 96% { opacity: 0; translate: -260px 120px; } 100% { opacity: 0; translate: -260px 120px; } }
/* a day's clock on the right edge */
.dayclock { position: fixed; z-index: 25; right: 22px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; pointer-events: none; }
.dc-track { position: relative; width: 2px; height: 150px; border-radius: 2px; background: linear-gradient(#ffd27a, #f59a6c 70%, #6c74a8); opacity: .55; }
.dc-sun {
  --p: 0; position: absolute; left: 50%; top: calc(var(--p) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: radial-gradient(circle, #fff6d8 0 30%, #ffc95e 60%, #f59a6c); box-shadow: 0 0 0 4px rgba(255, 214, 120, .25), 0 0 14px rgba(255, 190, 100, .7);
  transition: background .8s, box-shadow .8s;
}
.dayclock.is-dusk .dc-sun { background: radial-gradient(circle, #ffe0c0 0 25%, #f58a5c 65%, #e0606a); box-shadow: 0 0 0 4px rgba(245, 138, 92, .25), 0 0 16px rgba(240, 110, 90, .7); }
.dayclock.is-night .dc-sun { background: #f4f1e2; box-shadow: inset -4px -1px 0 0 #c9c3a8, 0 0 12px rgba(255, 250, 220, .6); }
.dayclock p { display: grid; justify-items: end; gap: 3px; margin: 0; text-align: right; }
.dc-time { font: 500 13px/1 var(--latin); letter-spacing: .12em; color: var(--blue); }
.dc-place { font: 400 12.5px/1.2 var(--hand); letter-spacing: .12em; color: var(--coral); white-space: nowrap; }
.dayclock.is-night .dc-time { color: #c9d2ff; } .dayclock.is-night .dc-place { color: #ffd2b8; }
@media (max-width: 820px) { .dayclock { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .site-foot::before, .site-foot::after { animation: none; }
  .sun-btn::before { display: none; }
  .line::before, .itinerary::before { transform: none; transition: none; }
}

/* ───────── opt-in audio and the draft's sound audition ───────── */
.sound-switch, .menu-toggle { align-items: center; justify-content: center; min-width: 44px; min-height: 44px; gap: 6px; padding: 0 8px; border: 0; border-radius: 10px; background: none; cursor: pointer; font: 500 13px/1 var(--sans); color: var(--deep); }
.sound-switch { display: inline-flex; }
.sound-switch svg, .menu-toggle svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sound-switch:hover, .menu-toggle:hover, .menu-toggle[aria-expanded="true"], .sound-switch[aria-pressed="true"] { color: var(--blue); background: rgba(47, 111, 174, .09); }
.sound-switch[aria-pressed="false"] .sound-waves, .sound-switch[aria-pressed="true"] .sound-slash { display: none; }
.audition {
  position: fixed; z-index: 40; right: 18px; bottom: 18px; display: grid; gap: 6px;
  padding: 10px 12px 10px 16px; border-radius: 22px; background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -14px rgba(47, 111, 174, .6); font: 400 12.5px/1 var(--sans); letter-spacing: .08em; color: var(--muted);
}
.audition[hidden] { display: none; }
.audition p { display: flex; align-items: center; gap: 6px; margin: 0; }
.audition span { min-width: 3.2em; }
.audition button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(47, 111, 174, .3); background: #fff; cursor: pointer; font: 500 13px/1 var(--latin); color: var(--blue); }
.audition button[aria-pressed="true"] { background: var(--coral); border-color: var(--coral); color: #fff; }

/* ───────── phones ───────── */
@media (max-width: 820px), (hover: none), (pointer: coarse) {
  .play .play-grid, .play .play-live-copy { display: none; }
  .play-preview, .play-preview-copy { display: block; }
}
@media (max-width: 1080px) {
  .top, .top.is-scrolled { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px; padding: 6px 12px; background: rgba(255, 253, 249, .94); }
  .top.is-tucked { transform: none; }
  .top .brand { gap: 5px; }
  .top .brand b { font-size: 18px; letter-spacing: .18em; }
  .menu-toggle { display: inline-flex; }
  .site-menu { display: none; position: absolute; top: 100%; inset-inline: 0; padding: 8px 16px 16px; max-height: calc(100dvh - 60px); overflow: auto; background: var(--white); box-shadow: 0 14px 22px -14px rgba(34, 53, 74, .35); }
  .top.menu-open .site-menu { display: block; }
  .nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
  .nav a { display: flex; justify-content: center; align-items: center; min-height: 44px; padding: 5px 6px; border-radius: 8px; background: #eef5fa; text-align: center; }
  .nav a i { display: none; }
  .langs { justify-content: center; margin-top: 8px; }
  .langs a { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
  .sound-switch span { display: none; }
  .sun-btn.small { min-height: 44px; padding: 10px 13px; letter-spacing: .02em; white-space: nowrap; }
}
@media (max-width: 820px) {
  .hero { --hero-art-height: clamp(235px, 42svh, 400px); min-height: 0; padding: 60px 0 44px; }
  .wm-hero { font-size: 34vw; bottom: auto; top: var(--hero-art-height); }
  .pic { position: relative; right: auto; top: auto; width: calc(100% - 12px); height: var(--hero-art-height); margin: 0 auto; }
  .fog { bottom: auto; height: calc(60px + var(--hero-art-height)); }
  .bloom { width: 120vw; height: 60vh; right: -30vw; top: -10vh; }
  .sun { right: 14vw; top: 90px; } .sun .streak { display: none; }
  .her, .notes { top: 60px; bottom: auto; left: 50%; height: calc(var(--hero-art-height) + 18px); }
  .notes { display: none; }  /* no room beside her on a phone */
  .subtitle { left: 50%; bottom: auto; top: calc(30px + var(--hero-art-height)); width: calc(100% - 32px); text-align: center; white-space: normal; font-size: 13px; }
  .tate { right: 14px; top: 82px; font-size: 13px; }
  .copy { position: relative; left: auto; top: auto; transform: none; width: auto; padding: 16px 20px 0; }
  .copy .eyebrow { margin-bottom: 10px; font-size: 15px; }
  .copy h1 { font-size: clamp(30px, 9vw, 40px); line-height: 1.26; }
  :root:lang(en) .copy h1 { font-size: clamp(28px, 8vw, 38px); }
  .kw { gap: 8px; margin-top: 10px; font-size: 13.5px; letter-spacing: .06em; }
  .kw::before { width: 16px; }
  .lead { margin-top: 8px; line-height: 1.65; }
  .actions { gap: 8px 16px; margin-top: 16px; }
  .actions .sun-btn { padding-inline: 18px; letter-spacing: .04em; }
  .actions .sun-btn i { width: 17px; }
  .ticket { max-width: none; margin-top: 16px; }
  .t-main { padding: 8px 10px 9px; }
  .cut-switch:not([hidden]) { margin-top: 6px; }
  .scroll { display: none; }
  .mist i { top: -12vh; height: 24vh; }
  .mist .mist-b { top: -9vh; height: 20vh; }
  .works { padding: 82px 16px 64px; }
  .about { padding: 14vh 16px 12vh; }
  .works .sec-head, .play .sec-head { margin-bottom: 38px; }
  .scene { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 25px 20px; }
  .scene--study .scene-media { order: 0; }
  .scene-media { width: min(100%, 272px); justify-self: center; }
  .scene--room::before { background-image: linear-gradient(180deg, rgba(48, 34, 43, .17), #362a3a 63%), url("../concepts/img/bg/room-day.jpg"); }
  .route-stage { grid-template-columns: 1fr; gap: 20px; }
  .play { padding: 82px 16px 64px; }
  .uses, .making, .faq { padding: 12vh 16px 10vh; }
  .examples { grid-template-columns: minmax(0, 480px); justify-content: center; gap: 38px; }
  .uses .sec-head { max-width: 480px; }
  .trip-plan { grid-template-columns: 1fr; }
  .sheets-note { left: auto; right: 10px; bottom: auto; top: -18px; font-size: 15px; }
  .qa summary { padding: 16px 18px; font-size: 15.5px; }
  .qa p { padding: 0 18px 18px; }
  .contact { --contact-scene-height: clamp(248px, 63vw, 460px); padding: calc(var(--contact-scene-height) - 59px) 20px 76px; }
  .contact-bg { height: var(--contact-scene-height); object-position: 58% 50%; }
  .contact::after { background: linear-gradient(180deg, transparent 32px, #282e43 var(--contact-scene-height), #40496e 100%); }
  .contact-inner { max-width: 480px; }
  .foot-tag span { display: block; margin: 4px 0 0; }
  .wm-sec { font-size: 32vw; }
}
@media (max-width: 480px) {
  .copy { display: flex; flex-direction: column; }
  .copy .ticket { order: 1; }
  .copy .lead { order: 2; margin-top: 12px; }
}
@media (max-width: 420px) { .top .brand span { display: none; } }
@media (max-width: 360px) {
  .hero { --hero-art-height: clamp(220px, 40svh, 400px); }
  .top .brand b { font-size: 16px; letter-spacing: .12em; }
  :root:lang(en) .top .sun-btn.small { padding-inline: 9px; font-size: 13px; }
  .actions .sun-btn { gap: 8px; padding-inline: 13px; }
  :root:lang(en) .actions { column-gap: 12px; }
  :root:lang(en) .actions .sun-btn i { display: none; }
  .t-kind { font-size: 11px; letter-spacing: .12em; }
  .cut-switch svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll::after, .play.is-loading .play-bar i { animation: none; }
  .route-marker { transition: none; }
  .her-still, .her-alive { transition: none; }
}