/* ═══════════════════════════════════════════════════════════════
   fajar · a little corner in malang
   warm paper, ink lines, small surprises.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --paper:      #F6F1E7;
  --paper-2:    #EFE7D8;
  --paper-3:    #FBF7EE;
  --ink:        #2B2118;
  --ink-soft:   #57503F;
  --muted:      #6F6553;
  --line:       rgba(43, 33, 24, .16);
  --amber:      #D98E32;
  --amber-soft: #E8B15C;
  --amber-text: #8A4E12;
  --red:        #B02E2E;
  --sage:       #A8B89A;
  --night:      #1C2340;
  --night-2:    #232B4D;
  --cream:      #EFE6D6;
  --night-mountain: #3A4164;
  --night-red: #E0765F;
  --night-red-wash: rgba(224, 118, 95, .4);
  --arrival-indigo: #2A2545;
  --sky-day-top: #C7DAE6;
  --sky-day-mid: #DCE9EA;
  --sky-day-low: #F2F0E0;
  --sky-fallback-top: #CBDDE7;
  --sky-dawn-top: #B9A3C0;
  --sky-dawn-mid: #EEC7A2;
  --sky-dawn-low: #FFE9C4;
  --sky-dawn-glow: rgba(255, 236, 200, .8);
  --sky-dusk-top: #695A7E;
  --sky-dusk-mid: #B67D72;
  --sky-dusk-low: #E9AE63;
  --sky-dusk-glow: rgba(248, 202, 128, .65);
  --hand-ink: #A57B54;
  --book-frieren: #C9D2D8;
  --chalkboard: #2E3A2F;
  --rooftop-bright: #FFF6E4;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand:  "Caveat", "Segoe Script", "Comic Sans MS", cursive;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-tactile: cubic-bezier(.2, .8, .2, 1);
  --label-size: .75rem;
  --label-track: .04em;
  --proverb-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --note-size: 1.32rem;
  --support-size: .82rem;
  --ticket-title-size: 1.3rem;
  --hand-small-size: 1.25rem;
  --chalk-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  --hand-large-size: 1.55rem;
  --hand-medium-size: 1.45rem;
  --plan-number-size: 9px;
  --plan-name-size: 8px;
  --display-phone-size: clamp(2.4rem, 11vw, 3rem);
}

/* ── base ─────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .25vw, 1.125rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color 1.3s ease;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 1.1em;
  text-wrap: balance;
}

h2 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.6rem); }

p { margin: 0 0 1.2em; }

em { font-style: italic; }

strong { font-weight: 700; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--amber-text);
  outline-offset: 4px;
  border-radius: 2px;
}

::selection { background: rgba(232, 177, 92, .45); }

/* visually hidden but available to assistive tech — used by the
   navigation live region, the sky-shift announcement, etc. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mono {
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  text-transform: lowercase;
}

/* paper grain — barely there, just enough to feel printed */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

/* (the old blink-veil is gone — the shift now plays out room by room) */

/* ═══════════════════════════════════════════════════════════════
   night mode — the whole house keeps the malang sky company.
   script.js mirrors the hero sky onto <html data-sky>, so the
   same palette rules serve both the real clock and the toggle.
   ═══════════════════════════════════════════════════════════════ */

html[data-sky="night"] {
  --paper:    #141B33;
  --paper-2:  #182140;
  --paper-3:  #202A50;
  --ink:      #EFE6D6;
  --ink-soft: #CFC5B0;
  --muted:    #B8B4CF;
  --line:     rgba(239, 230, 214, .16);
  --amber-text: var(--amber-soft);
  --red: var(--night-red);
}

/* moonlit strokes: only the hand-drawn lines that float on
   transparent ground need a lighter ink after dark */
html[data-sky="night"] .object--cup [fill="none"],
html[data-sky="night"] .object--mug [fill="none"],
html[data-sky="night"] .object--headphones [fill="none"],
html[data-sky="night"] .object--tasbih g[fill="none"],
html[data-sky="night"] .object--plant path[fill="none"] { stroke: rgba(239, 230, 214, .75); }

/* the window sees a different view at night */
.window-night { opacity: 0; transition: opacity 1.2s ease; }
html[data-sky="night"] .window-glass { fill: #232C52; }
html[data-sky="night"] .window-mtn   { fill: var(--night-mountain); }
html[data-sky="night"] .object--window .window-bar { stroke: #EFE6D6; }
html[data-sky="night"] .window-night { opacity: 1; }

/* rainy season on the glass — november through march in malang */
.window-rain line { opacity: 0; }
html[data-season="wet"] .window-rain line { animation: drip 1.5s linear infinite; }
html[data-season="wet"] .window-rain line:nth-child(2) { animation-delay: .3s; }
html[data-season="wet"] .window-rain line:nth-child(3) { animation-delay: .75s; }
html[data-season="wet"] .window-rain line:nth-child(4) { animation-delay: .15s; }
html[data-season="wet"] .window-rain line:nth-child(5) { animation-delay: .95s; }
html[data-season="wet"] .window-rain line:nth-child(6) { animation-delay: .55s; }

@keyframes drip {
  0%   { opacity: 0; transform: translateY(-12px); }
  18%  { opacity: .85; }
  82%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(66px); }
}

/* small palette repairs for pieces that hard-code their colors */
html[data-sky="night"] .book span { color: #F6F1E7; }
html[data-sky="night"] .book--naruto span,
html[data-sky="night"] .book--frieren span,
html[data-sky="night"] .book--dandadan span,
html[data-sky="night"] .book--csm span { color: #2B2118; } /* its spine is var(--ink), so it turns cream too */
html[data-sky="night"] .artist { border-color: rgba(239, 230, 214, .35); }
html[data-sky="night"] .room-sign--red { color: var(--night-red); }
html[data-sky="night"] .room-sign--red::after { background: var(--night-red-wash); }
html[data-sky="night"] .toast { background: var(--amber-soft); color: #2B2118; }
html[data-sky="night"] .fp-house a.here .fp-room-rect { fill: var(--amber-soft); }
html[data-sky="night"] .room--night { background: var(--paper-2); }

/* ── reveal on scroll ─────────────────────────────────────────── */

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   the arrival — a slow walk to the door. plays once, by request
   after that. four quiet beats; the house waits below the whole time
   ═══════════════════════════════════════════════════════════════ */

.arrival {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: radial-gradient(130% 110% at 50% 100%, #1A2140 0%, #10162B 52%, #0B1122 100%);
  overflow: hidden;
}

.arrival[hidden] { display: none; }
.no-js .arrival { display: none; }

html.arrival-open, html.arrival-open body { overflow: hidden; }

.arrival.leaving {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1s ease, transform 1.1s var(--ease-out);
  pointer-events: none;
}

.arrival-stars span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #EFE6D6;
  opacity: .75;
  animation: twinkle 4.6s ease-in-out var(--d, 0s) infinite;
}

.arrival-scene {
  position: absolute;
  inset: 0 0 27vh 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform-origin: 62% 76%;
  transition: transform 2.4s var(--ease-out);
}

.arrival-scene svg { width: min(920px, 150vw); height: auto; max-height: 60vh; display: block; }

.arrival[data-beat="1"] .arrival-scene { transform: scale(1.32) translate(-4%, 3%); }
.arrival[data-beat="2"] .arrival-scene { transform: scale(1.16) translate(-1%, 1%); }
.arrival[data-beat="3"] .arrival-scene { transform: scale(1.03); }

/* the lamps come on, one life at a time */
.a-lit { opacity: 0; transition: opacity 1.8s ease, filter 1.8s ease; }

.arrival[data-beat="2"] .a-win-family .a-lit {
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(242, 200, 121, .4));
}

.arrival[data-beat="2"] .a-win-desk .a-lit {
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(159, 182, 232, .4));
}

.a-plate-text {
  font-family: var(--hand);
  font-size: 19px;
  fill: #E8B15C;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.arrival[data-beat="1"] .a-plate-text { opacity: 1; }

.a-door { transition: fill 1.6s ease, filter 1.6s ease; }

.arrival[data-beat="3"] .a-door {
  fill: var(--arrival-indigo);
  filter: drop-shadow(0 0 14px rgba(232, 177, 92, .3));
}

.arrival-text-block {
  position: relative;
  z-index: 2;
  width: min(640px, 88vw);
  text-align: center;
  margin-bottom: clamp(4.6rem, 13vh, 7.5rem);
}

.arrival-text {
  font-family: var(--serif);
  font-size: clamp(1.2rem, .95rem + 1.6vw, 1.75rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--cream);
  min-height: 4.6em;
  margin: 0;
  transition: opacity .45s ease;
}

.arrival-text.swap { opacity: 0; }

.arrival-cta {
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: #10162B;
  background: var(--amber-soft);
  border: 0;
  border-radius: 999px;
  padding: .95em 2em;
  cursor: pointer;
  transition: transform .35s var(--ease-tactile), background .3s ease;
}

.arrival-cta:hover { transform: translateY(-2px); background: #F6CE85; }

.arrival-skip {
  position: absolute;
  left: clamp(1rem, 4vw, 2.4rem);
  bottom: calc(1.3rem + env(safe-area-inset-bottom, 0px));
  color: rgba(239, 230, 214, .38);
  background: none;
  border: 0;
  transition: color .3s ease;
}

.arrival-skip:hover { color: var(--amber-soft); }

.arrival-hint {
  position: absolute;
  right: clamp(1rem, 4vw, 2.4rem);
  bottom: calc(1.3rem + env(safe-area-inset-bottom, 0px));
  margin: 0;
  color: rgba(239, 230, 214, .35);
  transition: opacity 1.2s ease;
}

.arrival-hint.gone { opacity: 0; }

/* the doorway keeps a quiet way back to the walk */
.arrive-again {
  display: block;
  margin-top: 1.6em;
  pointer-events: auto; /* the hero frame ignores pointers; this button may not */
  color: var(--hero-link);
  opacity: .85;
  transition: color .3s ease;
}

.arrive-again:hover { color: var(--hero-accent, var(--amber-text)); }

/* ═══════════════════════════════════════════════════════════════
   no. 01 · the doorway
   ═══════════════════════════════════════════════════════════════ */

.room--hero {
  /* the doorway is a full page of sky: the ridges hold the bottom edge,
     the sun and moon own everything above them, the words live in between */
  --mtn-h: min(32vh, 380px);
  --hero-title: var(--ink);
  --hero-sub: var(--ink-soft);
  --hero-quote: var(--ink);
  --hero-link: var(--ink-soft);
}

/* .room adds vertical padding to every room; the doorway stages itself */
.room.room--hero {
  position: relative;
  overflow: clip;
  padding: 0;
  min-height: 100svh;
}

.sky {
  position: absolute;
  inset: 0;
  background: var(--sky-grad, linear-gradient(var(--sky-fallback-top) 0%, var(--sky-day-mid) 55%, var(--sky-day-low) 100%));
  pointer-events: none; /* the glow layer must not steal star clicks */
}

.sky .star { pointer-events: auto; }

/* moonlight restyles the ridges a little */
[data-sky="night"] .mountains svg > path:nth-of-type(1) { fill: var(--night-mountain); }
[data-sky="night"] .mountains svg > path:nth-of-type(2) { fill: #E2D7C2; }
[data-sky="night"] .mountains svg > g path { stroke: rgba(239, 230, 214, .55); }

/* a soft glow resting on the horizon */
.sky::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(58vh, 540px);
  background: var(--sky-glow, radial-gradient(58% 90% at 50% 100%, rgba(255, 244, 214, .55), transparent 72%));
}

/* the sun & the moon share one button — click, and they trade places.
   left and top run on different easings, so the path bends like an arc */
.celestial {
  position: absolute;
  left: var(--cx, 27%);
  top: var(--cy, 26%);
  width: clamp(42px, 4.6vw, 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: auto;
  transition: transform .25s var(--ease-out);
}

.celestial:hover { transform: scale(1.14); }

.orb {
  position: absolute;
  inset: 0;
  transition: opacity 1.4s ease, transform 1.9s var(--ease-out);
}

.orb svg { width: 100%; height: 100%; display: block; }
.orb--sun svg  { filter: drop-shadow(0 0 14px rgba(232, 177, 92, .55)); }
.orb--moon svg { filter: drop-shadow(0 0 16px rgba(239, 230, 214, .4)); }

.orb--moon { opacity: 0; transform: translateY(26px); }
[data-sky="night"] .orb--moon { opacity: 1; transform: none; }
[data-sky="night"] .orb--sun  { opacity: 0; transform: translateY(30px) rotate(50deg); }

.orb--sun .rays { animation: sunspin 42s linear infinite; }

@keyframes sunspin { to { transform: rotate(360deg); } }

/* where each body hangs through the day — the ridges hold only the
   bottom edge of the page now, so these can never be swallowed */
[data-sky="dawn"]  :is(.celestial, .sky-hint) { --cx: 24%; --cy: 16%; }
[data-sky="day"]   :is(.celestial, .sky-hint) { --cx: 27%; --cy: 13%; }
[data-sky="dusk"]  :is(.celestial, .sky-hint) { --cx: 66%; --cy: 30%; }
[data-sky="night"] :is(.celestial, .sky-hint) { --cx: 83%; --cy: 12%; }

/* one-time nudge so visitors learn the sky is a button */
.sky-hint {
  position: absolute;
  left: calc(var(--cx, 27%) + 4.4rem);
  top: calc(var(--cy, 26%) + 1.4rem);
  display: flex;
  align-items: flex-start;
  gap: .4em;
  max-width: 13rem;
  font-family: var(--hand);
  font-size: 1.15rem;
  line-height: 1.3;
  text-align: left;
  transform: rotate(-2deg);
  color: var(--hand-ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s ease, transform 1.1s var(--ease-out);
}

.sky-hint svg { flex: none; margin-top: .3em; transform: rotate(8deg); }

.sky-hint.show { opacity: 1; transform: rotate(-2deg) translateY(4px); }

[data-sky="night"] .sky-hint { color: rgba(239, 230, 214, .85); }

/* sky moods — set from real malang time (or a visitor's shift) */
[data-sky="night"] {
  --sky-grad: linear-gradient(#131A33 0%, #1E2544 58%, #343B66 100%);
  --sky-glow: radial-gradient(60% 78% at 50% 96%, rgba(217, 142, 50, .16), transparent 70%);
  --star-fill: #EFE6D6;
}
[data-sky="dawn"] {
  --sky-grad: linear-gradient(var(--sky-dawn-top) 0%, var(--sky-dawn-mid) 56%, var(--sky-dawn-low) 100%);
  --sky-glow: radial-gradient(60% 82% at 50% 98%, var(--sky-dawn-glow), transparent 74%);
  --star-fill: #FFF7E8;
}
[data-sky="day"] {
  --sky-grad: linear-gradient(var(--sky-day-top) 0%, var(--sky-day-mid) 54%, var(--sky-day-low) 100%);
  --sky-glow: radial-gradient(60% 84% at 50% 98%, rgba(255, 246, 218, .6), transparent 74%);
  --star-fill: transparent;
}
[data-sky="dusk"] {
  --sky-grad: linear-gradient(var(--sky-dusk-top) 0%, var(--sky-dusk-mid) 52%, var(--sky-dusk-low) 100%);
  --sky-glow: radial-gradient(60% 84% at 50% 98%, var(--sky-dusk-glow), transparent 74%);
  --star-fill: #FFF3DD;
}

[data-sky="day"] .star { visibility: hidden; }

/* the lettering over the sky must survive every palette —
   each pair is picked against the gradient's own top color */
[data-sky="night"] { --meta-1: rgba(239, 230, 214, .78); --meta-2: rgba(239, 230, 214, .96); --hero-accent: var(--amber-soft); }
[data-sky="dawn"]  { --meta-1: #43334A; --meta-2: #372A40; }
[data-sky="day"]   { --meta-1: #514A3C; --meta-2: #514A3C; }
[data-sky="dusk"]  { --meta-1: #FFF3DD; --meta-2: #FFF6E8; --hero-accent: #FFF3DD; }

[data-sky="dusk"] .hero-meta,
[data-sky="night"] .hero-meta { text-shadow: 0 1px 3px rgba(16, 22, 43, .3); }

/* the words live in the scene now — each sky brings its own ink */
[data-sky="night"] {
  --hero-title: #F6F1E7;
  --hero-sub: rgba(239, 230, 214, .85);
  --hero-quote: #F6F1E7;
  --hero-link: rgba(239, 230, 214, .78);
}
[data-sky="dawn"] {
  --hero-title: #3A2C40;
  --hero-sub: #4C3A52;
  --hero-quote: #3A2C40;
  --hero-link: #4C3A52;
}
[data-sky="dusk"] {
  --hero-title: #FFF6E8;
  --hero-sub: rgba(255, 243, 221, .92);
  --hero-quote: #FFF6E8;
  --hero-link: rgba(255, 243, 221, .85);
}

[data-sky="dusk"] .hero-frame,
[data-sky="night"] .hero-frame { text-shadow: 0 1px 4px rgba(16, 22, 43, .28); }

.star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  color: var(--star-fill, transparent);
  width: 44px;
  height: 44px;
  margin: -13px;
  display: grid;
  place-items: center;
  transition: color 1.5s ease;
  animation: twinkle 5.2s ease-in-out var(--td, 0s) infinite;
}

.star svg {
  transform: scale(var(--s, 1));
  transition: transform .25s var(--ease-out);
}

.star--wish { --td: .8s; }

.star:hover svg,
.star:focus-visible svg { transform: scale(calc(var(--s, 1) * 1.35)) rotate(14deg); }

/* a rare small surprise, on clear nights only */
.shooting {
  position: absolute;
  width: 74px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(239, 230, 214, 0), #F3EDDD);
  transform: rotate(26deg);
  opacity: 0;
  animation: shoot .95s ease-out forwards;
  pointer-events: none;
}

@keyframes shoot {
  0%   { transform: translate(0, 0) rotate(26deg) scaleX(.4); opacity: 0; }
  14%  { opacity: .9; }
  100% { transform: translate(-150px, 116px) rotate(26deg) scaleX(1); opacity: 0; }
}

@keyframes twinkle {
  0%, 100% { opacity: .95; }
  50%      { opacity: .35; }
}

/* the passing light — a satellite, maybe. stars twinkle and streak;
   this one glides, steady, west to east, taking its sweet time.
   it never twinkles. that's how you know. */
.passing-light {
  position: absolute;
  left: 0;
  top: var(--pl-y, 22%);
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  visibility: hidden; /* between passes, the sky keeps its secret */
  display: none;
}

html[data-sky="night"] .passing-light { display: block; }

/* the generous, invisible tap target */
.passing-light::before {
  content: "";
  position: absolute;
  inset: -19px;
}

.pl-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #F3EDDD;
  box-shadow: 0 0 12px 3px rgba(239, 230, 214, .5);
  transition: box-shadow .3s ease;
}

.passing-light:hover .pl-dot,
.passing-light:focus-visible .pl-dot {
  box-shadow: 0 0 0 3px rgba(239, 230, 214, .35), 0 0 14px 4px rgba(239, 230, 214, .55);
}

.passing-light.crossing {
  visibility: visible;
  animation: pass var(--pl-dur, 90s) linear forwards;
}

@keyframes pass {
  0%   { transform: translateX(-4vw); opacity: 0; }
  7%   { opacity: .9; }
  88%  { opacity: .9; }
  100% { transform: translateX(105vw); opacity: 0; }
}

.mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: var(--mtn-h);
  pointer-events: none;
  z-index: 1;
}

.mountains svg { width: 100%; height: 100%; display: block; }

/* hero content sits on the paper, below the horizon */
.hero-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: min(1080px, 92vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5.5rem 0 calc(var(--mtn-h) + 1.5rem);
  pointer-events: none; /* let the stars and sun behind stay clickable */
}

.hero-frame a { pointer-events: auto; }

/* letterhead row: coordinates + live malang time */
.hero-meta {
  position: absolute;
  top: clamp(1.4rem, 4.5vh, 3rem);
  left: 0;
  right: 0;
  width: min(1080px, 92vw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem 2.5rem;
  flex-wrap: wrap;
  z-index: 3;
}

.coords {
  color: var(--meta-1, var(--muted));
  margin: 0;
}

.greeting {
  color: var(--meta-2, var(--ink-soft));
  margin: 0;
  text-align: right;
}

.hero-title {
  font-size: clamp(2.9rem, 2rem + 5.4vw, 5.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 .35em;
  color: var(--hero-title);
}

.hero-title .w {
  display: inline-block;
}

.js .hero-title .w {
  opacity: 0;
  transform: translateY(.55em);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(.25s + var(--i) * .13s);
}

.js .hero-title.in .w {
  opacity: 1;
  transform: none;
}

.swash {
  position: relative;
  font-style: italic;
  color: var(--hero-accent, var(--amber-text));
  white-space: nowrap;
}

.swash svg {
  position: absolute;
  left: -2%;
  bottom: -.18em;
  width: 104%;
  height: .34em;
  color: var(--amber-soft);
  opacity: .85;
}

.swash svg path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}

.js .hero-title.in .swash svg path {
  transition: stroke-dashoffset 1.1s var(--ease-out) 1.05s;
  stroke-dashoffset: 0;
}

.hero-sub {
  max-width: 44ch;
  color: var(--hero-sub);
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
  margin-bottom: 2.4em;
}

/* which half of the life is awake right now */
.hero-hours { margin: -1.4em 0 2.2em; }
.hero-hours .hh { display: inline-flex; align-items: center; gap: .6em; }
.hero-hours .hh svg { opacity: .8; }
.hero-hours .hh--night { display: none; color: var(--amber-soft); }
.hero-hours .hh--day { color: var(--hero-sub); opacity: .85; }

html[data-sky="night"] .hero-hours .hh--day { display: none; }
html[data-sky="night"] .hero-hours .hh--night { display: inline-flex; }

/* jar, the doorway host — framed like a small portrait so the glossy
   sprite belongs to the house's paper-and-ink language instead of
   reading like a floating app widget */
.jar-mascot {
  --mascot-size: clamp(126px, 11.5vw, 148px);
  position: absolute;
  top: auto;
  right: clamp(.25rem, 4vw, 3.5rem);
  bottom: calc(var(--mtn-h) + 16rem);
  z-index: 4;
  width: var(--mascot-size);
  pointer-events: auto;
  color: var(--hero-sub);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.jar-mascot__portrait {
  position: relative;
  display: block;
  width: var(--mascot-size);
  height: var(--mascot-size);
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--hero-title) 18%, transparent);
  border-radius: 46% 54% 48% 52% / 54% 48% 52% 46%;
  background: color-mix(in srgb, var(--paper-3) 80%, transparent);
  box-shadow: 0 14px 30px -20px rgba(43, 33, 24, .5);
  transform: rotate(1.5deg);
  transition: transform .4s var(--ease-tactile), background-color 1.2s ease;
}

.jar-mascot__portrait::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -8px;
  left: 50%;
  width: 42%;
  height: 18px;
  background: rgba(232, 177, 92, .58);
  border: 1px solid rgba(43, 33, 24, .08);
  transform: translateX(-50%) rotate(-3deg);
}

.jar-mascot:hover .jar-mascot__portrait,
.jar-mascot:focus-visible .jar-mascot__portrait {
  transform: rotate(-.5deg) translateY(-3px);
}

.jar-mascot:focus-visible {
  outline-offset: 8px;
  border-radius: 48%;
}

.jar-mascot__sprite {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 78%;
}

.jar-mascot__layer {
  position: absolute;
  inset: 0;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 300% 300%;
}

.jar-mascot__layer--directions {
  background-image: url("jar-mascot/jar-directions.webp");
}

.jar-mascot__layer--reactions {
  background-image: url("jar-mascot/jar-reactions.webp");
  opacity: 0;
}

.jar-mascot__note {
  display: block;
  width: max-content;
  max-width: 11rem;
  margin: .35rem auto 0;
  font-family: var(--hand);
  font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem);
  line-height: 1.3;
  color: var(--hero-sub);
  opacity: .7;
  transform: rotate(-2deg);
  transition: opacity .3s ease, color 1.2s ease;
}

.jar-mascot:hover .jar-mascot__note,
.jar-mascot:focus-visible .jar-mascot__note { opacity: 1; }

.proverb {
  position: absolute;
  right: clamp(0px, 3vw, 3.5rem);
  bottom: calc(var(--mtn-h) + 2.4rem);
  margin: 0;
  max-width: 30ch;
  text-align: right;
  z-index: 2;
}

.proverb-id {
  display: block;
  font-family: var(--hand);
  font-size: var(--proverb-size);
  line-height: 1.3;
  color: var(--hero-quote);
  transform: rotate(-1.5deg);
}

.proverb cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  color: var(--hero-sub);
  opacity: .72;
  margin-top: .9em;
  line-height: 1.7;
}

.come-in {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  align-self: flex-start;
  text-decoration: none;
  font-family: var(--mono);
  min-height: 44px;
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  color: var(--hero-link);
  padding-bottom: .5em;
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  transition: color .25s ease, border-color .25s ease;
}

.come-in svg { animation: nudge 2.6s ease-in-out infinite; }

.come-in:hover { color: var(--hero-accent, var(--amber-text)); border-color: currentColor; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

/* ═══════════════════════════════════════════════════════════════
   rooms, in general
   ═══════════════════════════════════════════════════════════════ */

.room {
  position: relative;
  padding: clamp(5rem, 12vh, 9rem) 0;
  transition: opacity .4s ease;
}

.room--small { padding: clamp(4rem, 9vh, 6.5rem) 0; }

.room-inner {
  width: min(1080px, 90vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.room--flip .room-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.room--flip .room-copy  { order: 2; }
.room--flip .scene      { order: 1; }

.room--wide .room-inner { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }

.room-sign {
  color: var(--muted);
  margin-bottom: 2.2em;
  display: flex;
  align-items: center;
  gap: 1.2em;
}

.room-sign::after {
  content: "";
  flex: 0 0 3.2em;
  height: 1px;
  background: var(--line);
}

.room-sign--red { color: var(--red); }
.room-sign--red::after { background: rgba(176, 46, 46, .35); }

.room-copy p { max-width: 54ch; }

.small-aside {
  color: var(--muted);
  font-style: italic;
  font-size: .95em;
}

.room--after { margin-top: 1rem; }
.room--after .room-inner { display: block; }

.plain-list {
  list-style: none;
  margin: 1.6em 0 0;
  padding: 0;
}

.plain-list li {
  padding-left: 1.6em;
  position: relative;
  margin-bottom: .5em;
  color: var(--ink-soft);
}

.plain-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--amber);
}

/* ── next door: every room ends by handing you its idea ───────── */

.next-door {
  display: inline-flex;
  align-items: baseline;
  gap: 1em;
  margin-top: 2.8em;
  text-decoration: none;
  color: var(--ink-soft);
  min-height: 44px;
}

.next-door .mono {
  flex: none;
  color: var(--muted);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  transform: translateY(-2px);
}

.next-door .next-thread {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05em;
  line-height: 1.45;
}

.next-door svg {
  flex: none;
  align-self: center;
  color: var(--amber);
  transition: transform .4s var(--ease-out);
}

.next-door:hover { color: var(--amber-text); }
.next-door:hover svg { transform: translateX(6px); }

.habits { color: var(--ink-soft); }
.habits span { white-space: nowrap; }

/* scene = a small stage for objects */
.scene {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

/* ── day & night hours ──────────────────────────────────────────
   family rooms keep day hours; hobby rooms wake after dark.
   the lamps dim, the words stay readable: closed rooms keep their
   copy at ~.72 and only the illustrations sink toward the dark —
   hover (or a tap, on touch) wakes a room fully; a visitor can
   always read what a room says without needing a pointer */

.room-inner {
  transition: opacity .9s ease;
  transition-delay: var(--stagger, 0s);
}

.room-inner > :not(.room-copy) { transition: opacity .9s ease; }

.room-hours {
  display: none;
  width: min(1080px, 90vw);
  margin: 0 auto 2.8rem;
  text-align: center;
  font-family: var(--hand);
  font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem);
  line-height: 1.3;
  transform: rotate(-1deg);
  color: var(--amber-soft);
}

.room-hours svg { vertical-align: -2px; margin-right: .45em; }

.room-hours .peek { display: none; font-size: .82em; opacity: .9; }
.room-hours .wake-hint { display: none; font-size: .8em; opacity: .9; }

/* the wake trigger is a real disclosure button: it inherits the
   `.room-hours` murmur styling but stays clickable, focusable, and
   announces its expanded state to assistive tech */
.room-wake-trigger {
  position: relative;
  display: block;
  width: min(1080px, 90vw);
  margin: 0 auto 2.8rem;
  padding: .6em 1em;
  text-align: center;
  font-family: var(--hand);
  font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem);
  line-height: 1.3;
  transform: rotate(-1deg);
  color: var(--amber-soft);
  cursor: pointer;
  border-radius: 4px;
  transition: color .3s ease, background-color .3s ease;
}
.room-wake-trigger:hover { color: var(--amber-text); }
.room-wake-trigger:focus-visible { outline-color: var(--amber-soft); }
.room-wake-trigger::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .3em;
  width: 2em;
  height: 1px;
  background: currentColor;
  opacity: .25;
  transform: translateX(-50%);
}
.room-wake-trigger[aria-expanded="true"] { color: var(--amber-text); }
.room-wake-trigger[aria-expanded="true"]::after { width: 3.5em; opacity: .55; }

/* while a room is awake, the wake trigger quiets itself so it
   doesn't compete with the content it just opened */
.room.awake .room-wake-trigger { opacity: .55; }
.room.awake .room-wake-trigger:hover { opacity: 1; }

/* room-shell wraps every room's content; a closed room hides it
   while keeping the markup in the DOM (so screen-readers can still
   reach it once the disclosure is expanded) */
.room-shell { display: contents; }

/* on touch / coarse pointers, the wake hint is part of the prompt */
@media (pointer: coarse) {
  .room-wake-trigger .wake-hint { display: inline; }
}

/* the murmur: copy and controls stay fully legible while only drawn
   objects and the shelf doze */
html.js[data-sky="night"] .room[data-hours="day"] :is(.object, .shelf),
html.js:not([data-sky="night"]) .room[data-hours="night"] :is(.object, .shelf) { opacity: .42; }

html.js[data-sky="night"] .room[data-hours="day"]:hover :is(.object, .shelf),
html.js:not([data-sky="night"]) .room[data-hours="night"]:hover :is(.object, .shelf),
html.js[data-sky="night"] .room[data-hours="day"].awake :is(.object, .shelf),
html.js:not([data-sky="night"]) .room[data-hours="night"].awake :is(.object, .shelf) { opacity: 1; }

/* closed rooms keep shorter hours in the layout too */
html.js[data-sky="night"] .room[data-hours="day"],
html.js:not([data-sky="night"]) .room[data-hours="night"] { padding: clamp(3.2rem, 7vh, 5rem) 0; }

html.js[data-sky="night"] .room[data-hours="day"] .room-hours,
html.js:not([data-sky="night"]) .room[data-hours="night"] .room-hours { display: block; }

html.js:not([data-sky="night"]) .room[data-hours="night"] .room-hours { color: var(--amber-text); }

/* peeking into a closed room earns you a whisper back */
html.js[data-sky="night"] .room[data-hours="day"]:hover .room-hours .peek,
html.js:not([data-sky="night"]) .room[data-hours="night"]:hover .room-hours .peek { display: inline; }

/* touch devices: the sign is an invitation, not a barrier */
@media (pointer: coarse) {
  html.js[data-sky="night"] .room[data-hours="day"] .room-hours .wake-hint,
  html.js:not([data-sky="night"]) .room[data-hours="night"] .room-hours .wake-hint { display: inline; }

  .fp-keys { display: none; }
  .fp-tap { display: inline; }
}

.fp-tap { display: none; }

/* high contrast comes first — nothing ever dims */
@media (prefers-contrast: more) {
  html.js[data-sky="night"] .room[data-hours="day"] .room-inner,
  html.js:not([data-sky="night"]) .room[data-hours="night"] .room-inner,
  html.js[data-sky="night"] .room[data-hours="day"] .room-inner .scene,
  html.js:not([data-sky="night"]) .room[data-hours="night"] .room-inner .scene { opacity: 1; }
}

/* lamp pools — the rooms that stay up after dark glow a little */
.scene--desk::before,
.scene--workbench::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(70%, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 177, 92, .3), rgba(232, 177, 92, .08) 58%, transparent 74%);
  opacity: 0;
  transition: opacity 1.4s ease, transform 1.4s var(--ease-out);
  transform: scale(.7);
  pointer-events: none;
}

.scene--desk::before { left: 50%; top: 50%; translate: -50% -50%; }
.scene--workbench::after { left: 56%; top: 46%; translate: -50% -50%; }

html[data-sky="night"] .scene--desk::before,
html[data-sky="night"] .scene--workbench::after { opacity: 1; transform: none; }

.object {
  display: block;
  transition: transform .6s var(--ease-out);
}

.object svg { display: block; width: 100%; height: auto; }

.object--frame     { width: clamp(150px, 16vw, 205px); transform: rotate(-4deg); }
.object--frame:hover { transform: rotate(0deg) translateY(-6px); }

.object--cup       { width: clamp(120px, 12vw, 160px); transform: rotate(2deg); }
.object--cup:hover  { transform: rotate(0deg) translateY(-4px); }
.object--cup:hover .steam path { animation: steam 2.4s ease-in-out infinite; }
.object--cup:hover .steam path:nth-child(2) { animation-delay: .5s; }
.object--cup:hover .steam path:nth-child(3) { animation-delay: 1s; }

@keyframes steam {
  0%   { opacity: 0; transform: translateY(4px); }
  40%  { opacity: .7; }
  100% { opacity: 0; transform: translateY(-8px); }
}

.object--window { width: clamp(190px, 20vw, 260px); }
.object--window:hover { transform: translateY(-4px); }

.object--cassette {
  position: relative;
  width: clamp(230px, 24vw, 310px);
  transform: rotate(-2deg);
  perspective: 1200px;
}
.object--cassette:hover { transform: rotate(0deg) translateY(-5px); }

/* the flip card: both faces stacked, the container rotates on Y
   when the .side-b class is added. a short dial in JS re-arms it. */
.cassette-flip {
  position: relative;
  display: block;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.5, .08, .32, 1);
}
.object--cassette.side-b .cassette-flip { transform: rotateY(180deg); }

.cassette-face {
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cassette-face--a { position: relative; }
.cassette-face--b {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
}
.cassette-face svg { display: block; width: 100%; height: auto; }

.cassette-side {
  display: block;
  margin-top: .8em;
  text-align: center;
  font-size: var(--label-size);
  color: var(--ink-soft);
  letter-spacing: var(--label-track);
  text-transform: lowercase;
  opacity: 0;
  transition: opacity .3s ease;
}
.object--cassette:hover .cassette-side,
.object--cassette:focus-visible .cassette-side,
.object--cassette.side-b .cassette-side { opacity: 1; }
.object--cassette.side-b .cassette-side { color: var(--amber-text); }

/* reels spin on whichever side is facing the visitor.
   the cue animation targets both faces via the .reel class */
.object--cassette.playing .reel--a,
.object--cassette.playing .reel--b { animation: reelspin 1.6s linear infinite; }
.object--cassette.playing .reel--b { animation-duration: 2.1s; }

.reel, .reel--a, .reel--b { transform-box: fill-box; transform-origin: center; }

@keyframes reelspin { to { transform: rotate(360deg); } }

.object--headphones { width: clamp(130px, 13vw, 175px); opacity: .9; }

.object--ball { width: clamp(110px, 11vw, 140px); transition: transform .7s var(--ease-tactile); }
.object--ball:hover { transform: rotate(14deg) translateY(-3px); }
.object--ball.rolled-1 { transform: translateX(24px) rotate(80deg); }
.object--ball.rolled-2 { transform: translateX(52px) rotate(190deg); }

.object--tasbih { width: clamp(130px, 13vw, 170px); animation: sway 7s ease-in-out infinite; }
.object--tasbih:hover { animation-play-state: paused; transform: rotate(2deg); }

@keyframes sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}

.object--plant {
  width: clamp(160px, 16vw, 215px);
  transform-origin: 50% 100%;
  transform: scale(var(--plant-scale, 1));
  transition: transform 1.4s var(--ease-out);
}

.object--laptop:hover { transform: translateY(-5px) rotate(-1deg); }

/* ── the workbench: pegboard + hanging project tags ───────────── */

.scene--workbench { gap: 1.1rem; }

.pegboard {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -52%;
  width: clamp(280px, 30vw, 400px);
  z-index: 0;
}

.object--tag {
  position: relative;
  z-index: 1;
  width: clamp(72px, 7.4vw, 94px);
  transition: transform .5s var(--ease-tactile);
}

.tag--yorunote { transform: rotate(-3.5deg); }
.tag--house    { transform: rotate(1.5deg) translateY(6px); }
.tag--drawer   { transform: rotate(4deg); }

.object--tag:hover { transform: translateY(-7px) rotate(0deg); }

.tag-label {
  display: block;
  margin-top: .5em;
  text-align: center;
  font-size: var(--label-size);
  color: var(--ink-soft);
  opacity: .85;
}

.note-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: .7em;
  color: var(--amber-text);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  padding-bottom: .15em;
  transition: color .3s ease, border-color .3s ease;
}

.note-link:hover { color: var(--red); border-color: var(--red); }

/* interactive object hint: a quiet underline that appears */
.object[aria-expanded]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 2.4em;
  height: 2px;
  border-radius: 2px;
  background: var(--amber-soft);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity .5s ease;
}

.object[aria-expanded]:hover::after,
.object[aria-expanded="true"]::after { opacity: .8; }

.object { position: relative; }

/* ── one-time introductions: each object says hello exactly once ── */

.cue-tilt { animation: cuetilt 1.7s var(--ease-tactile) 1; }
@keyframes cuetilt {
  0%, 100% { transform: rotate(-4deg); }
  45%      { transform: rotate(.5deg) translateY(-7px); }
}

.cue-steam .steam path { animation: steam 2.4s ease-in-out 1; }
.cue-steam .steam path:nth-child(2) { animation-delay: .4s; }
.cue-steam .steam path:nth-child(3) { animation-delay: .8s; }

.cue-sparkle path[fill="#D98E32"] {
  transform-box: fill-box;
  transform-origin: center;
  animation: cuepulse 1.8s var(--ease-tactile) 1;
}
@keyframes cuepulse { 50% { transform: scale(1.7) rotate(24deg); } }

.cue-reel .reel--a, .cue-reel .reel--b { animation: reelspin 1.5s linear 1; }

.cue-spin { animation: reelspin .9s cubic-bezier(.3, .1, .3, 1) 1; }

.cue-swing svg { transform-origin: 50% 4px; animation: cueswing 1.7s var(--ease-tactile) 1; }
@keyframes cueswing { 25% { transform: rotate(7deg); } 60% { transform: rotate(-5deg); } }

.cue-roll { animation: cueroll 1.3s var(--ease-tactile) 1; }
@keyframes cueroll { 40% { transform: translateX(14px) rotate(48deg); } }

/* the desk: a bigger machine and its late-night company, on a surface */
.scene--desk { align-items: flex-end; min-height: 0; gap: 2.2rem; padding-bottom: .4rem; }

.desk-line {
  flex-basis: 100%;
  margin: 1.1rem 6% 0;
  border-bottom: 3px solid var(--ink);
  opacity: .75;
}

.object--laptop { width: clamp(260px, 30vw, 400px); }

.object--mug {
  width: clamp(84px, 9vw, 120px);
  transform: rotate(4deg);
}

.object--thesis {
  /* lies on the desk in front of the laptop, not floating in its own row */
  position: absolute;
  left: 3%;
  bottom: .4rem;
  width: clamp(120px, 12vw, 160px);
  margin: 0;
}

.object--mug:hover .steam path { animation: steam 2.4s ease-in-out infinite; }
.object--mug:hover .steam path:nth-child(2) { animation-delay: .5s; }

/* ── handwritten notes ────────────────────────────────────────── */

.note {
  position: absolute;
  z-index: 5;
  width: min(240px, 68vw);
  padding: 1.3em 1.4em 1.2em;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 14px 30px -18px rgba(43, 33, 24, .35);
  font-family: var(--hand);
  font-size: var(--note-size);
  line-height: 1.35;
  color: var(--ink);
  transform: rotate(-2deg);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-tactile);
}

.note::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 64px;
  height: 20px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(232, 177, 92, .5);
  border-radius: 1px;
}

.note .note-hint {
  display: block;
  margin-top: .7em;
  font-size: var(--label-size);
  color: var(--muted);
  letter-spacing: .04em;
}

.note.show { opacity: 1; transform: rotate(-2deg) scale(1); pointer-events: auto; }
.note { opacity: 0; transform: rotate(-2deg) scale(.85); pointer-events: none; }
.note[hidden] { display: none; }

.note--living { top: 0; right: 0; }
.note--cup    { bottom: 4%; right: 0; }
.note--window { top: 6%; right: -4%; }
.note--music  { top: -7%; left: -10%; width: 200px; } /* clear of the cassette — the next tap must land on it */
.note--pitch  { bottom: 8%; left: -2%; }
.note--tasbih { top: 2%; left: -4%; }
.note--plant  { bottom: 22%; right: -2%; }
.note--desk   { top: 10%; left: -4%; }
.note--thesis { top: -14%; left: 36%; width: 264px; }
.note--yorunote { top: -6%; left: -8%; }
.note--house    { top: 18%; right: -6%; }
.note--drawer   { bottom: 2%; left: 2%; }

/* the satellite signal box — a small tactile pull-tab on the thesis
   note. lives inside .note--thesis; quietly fades in once opened. */
.signal-trigger {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: .9em;
  padding: .35em .9em;
  font-size: var(--label-size);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-3);
  cursor: pointer;
  letter-spacing: .04em;
  text-transform: lowercase;
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}
.signal-trigger:hover,
.signal-trigger[aria-expanded="true"] { color: var(--amber-text); border-color: currentColor; transform: translateY(-1px); }
.signal-trigger::before {
  content: "▸ ";
  font-size: .9em;
  opacity: .7;
}
.signal-trigger[aria-expanded="true"]::before { content: "▾ "; }

.signal-box {
  margin-top: .9em;
  padding: .7em .9em .85em;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(28, 35, 64, .04);
  font-family: var(--mono);
  font-size: var(--label-size);
  color: var(--ink-soft);
  line-height: 1.7;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s ease, transform .35s var(--ease-out);
}
.signal-box.show { opacity: 1; transform: none; }
.signal-line {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin: 0;
  padding: .05em 0;
  border-bottom: 1px dashed rgba(43, 33, 24, .12);
}
.signal-line:last-child { border-bottom: 0; }
.signal-line .sig-key { color: var(--amber-text); flex: none; }
.signal-line .sig-val { color: var(--ink); font-weight: 500; }
.signal-line--log .sig-val { font-style: italic; opacity: .85; }

/* the carpenter's blueprint: a pull-tag below the repair ledger */
.blueprint-pull {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: .9em;
  padding: 0;
  font-size: var(--label-size);
  letter-spacing: .04em;
  color: var(--amber-text);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: color .25s ease, transform .25s ease;
}
.blueprint-pull:hover { color: var(--red); transform: translateX(2px); }
.blueprint-pull::before { content: "▸ "; opacity: .8; }
.blueprint-pull[aria-expanded="true"]::before { content: "▾ "; }

.colophon-drawer {
  margin-top: .9em;
  padding: .9em 1em .95em;
  border-top: 1px dashed rgba(43, 33, 24, .25);
  font-family: var(--sans);
  font-size: var(--support-size);
  line-height: 1.55;
  color: var(--ink);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s var(--ease-out);
}
.colophon-drawer.show {
  opacity: 1;
  transform: none;
}
.colophon-line { margin: 0 0 .55em; }
.colophon-line:last-child { margin-bottom: 0; }
.col-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  color: var(--amber-text);
  text-transform: lowercase;
  margin-right: .5em;
}

/* the satellite's note floats in the clear patch of sky — right of the
   words, below the moon, above the proverb. it never covers copy. */
.note--sat {
  left: auto;
  right: clamp(4rem, 8vw, 7rem);
  top: clamp(8.5rem, 17vh, 10rem);
  bottom: auto;
  width: min(272px, 76vw);
  font-size: 1.18rem;
}

/* ── shelf of stories ─────────────────────────────────────────── */

.shelf-area { position: relative; }

.shelf {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 2.2rem 0 15%;
  border-bottom: 10px solid var(--ink);
  min-height: 240px;
  position: relative;
}

.shelf::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 10px;
  background: var(--paper-2);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
  transform: translateY(3px);
}

.book {
  position: relative;
  width: 52px;
  border-radius: 3px 3px 0 0;
  border: 1.5px solid var(--ink);
  transform-origin: bottom center;
  transition: transform .45s var(--ease-tactile), box-shadow .45s ease;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 1.1em;
}

.book span {
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: var(--label-size);
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--paper-3);
  max-height: 100%;
  overflow: hidden;
}

.book--onepiece { height: 200px; background: var(--red); }
.book--naruto   { height: 176px; background: var(--amber-soft); }
.book--naruto span { color: var(--ink); }
.book--bleach   { height: 210px; background: var(--night); }
.book--frieren  { height: 186px; background: var(--book-frieren); }
.book--frieren span { color: var(--ink); }
.book--dandadan { height: 168px; background: var(--sage); }
.book--dandadan span { color: var(--ink); }
.book--csm      { height: 196px; background: var(--ink); box-shadow: inset 0 14px 0 -11px var(--red); }

.book:hover,
.book:focus-visible {
  transform: translateY(-14px);
  box-shadow: 0 18px 26px -16px rgba(43, 33, 24, .5);
}

.book--csm:hover { transform: translateY(-14px) rotate(-2deg); }

.shelf-note {
  min-height: 2.2em;
  margin-top: 1.6em;
  color: var(--muted);
  font-size: var(--label-size);
  transition: opacity .3s ease;
}

/* ── artists flow ─────────────────────────────────────────────── */

.artists {
  line-height: 2.1;
  max-width: 46ch;
}

.artist {
  border-bottom: 1px dashed rgba(43, 33, 24, .3);
  cursor: default;
  transition: color .35s ease, border-color .35s ease;
  padding-bottom: 1px;
}

.artist:hover,
.artist:focus-visible {
  color: var(--amber-text);
  border-color: currentColor;
}

.vibeline {
  min-height: 2.4em;
  color: var(--muted);
  transition: opacity .3s ease;
}

.vibeline.swap { opacity: 0; }

/* ── the matchday ticket — the next one at san siro ───────────── */

.object--ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  width: clamp(200px, 21vw, 250px);
  padding: 0 0 1.1rem;
  background: var(--paper-3);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 16px 30px -18px rgba(43, 33, 24, .45);
  transform: rotate(-2deg);
  transition: transform .5s var(--ease-out);
  overflow: hidden;
  text-align: center;
}

.object--ticket:hover { transform: rotate(0deg) translateY(-5px); }

.object--ticket.flip { animation: ticketflip .38s var(--ease-out); }

@keyframes ticketflip {
  0%   { transform: rotate(-2deg) scale(1); }
  50%  { transform: rotate(2.5deg) scale(.93); }
  100% { transform: rotate(-2deg) scale(1); }
}

.ticket-band {
  width: 100%;
  height: 30px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(-55deg, #B02E2E 0 13px, #2B2118 13px 26px);
  border-bottom: 2.5px solid var(--ink);
}

.ticket-band-text {
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
  color: rgba(246, 241, 231, .85);
}

.ticket-crest {
  position: absolute;
  top: 13px;
  left: 50%;
  translate: -50% 0;
  filter: drop-shadow(0 3px 4px rgba(43, 33, 24, .35));
}

.ticket-league {
  margin-top: 2rem;
  color: var(--muted);
  font-size: var(--label-size);
}

.ticket-line {
  font-family: var(--serif);
  font-size: var(--ticket-title-size);
  line-height: 1.3;
  color: var(--ink);
  max-width: 90%;
}

.ticket-milan { color: var(--red); font-weight: 500; }
.ticket-line i { font-style: italic; font-size: .72em; color: var(--muted); }
.ticket-opp { overflow-wrap: anywhere; }

.ticket-when, .ticket-venue { color: var(--muted); font-size: var(--label-size); }
.ticket-venue { margin-top: -.2rem; }

.ticket-perf {
  position: relative;
  width: calc(100% + 6px);
  border-top: 2px dashed var(--line);
  margin: .45rem 0 .55rem;
}

.ticket-perf::before, .ticket-perf::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--ink);
}

.ticket-perf::before { left: -10px; }
.ticket-perf::after  { right: -10px; }

.ticket-count {
  color: var(--red);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  min-height: 1.6em;
}

/* ── the scarf on the corner nail ─────────────────────────────── */

.object--scarf {
  width: clamp(58px, 6.4vw, 82px);
  transform-origin: 50% 6px;
  animation: scarfsway 6.5s ease-in-out infinite;
}

.object--scarf:hover { animation-play-state: paused; }

@keyframes scarfsway {
  0%, 100% { transform: rotate(4deg); }
  50%      { transform: rotate(9deg); }
}

/* ═══════════════════════════════════════════════════════════════
   no. 01½ · the hallway table — a narrow passage between rooms
   ═══════════════════════════════════════════════════════════════ */

.hallway { padding: clamp(4rem, 9vh, 6.5rem) 0 clamp(4.5rem, 10vh, 7rem); }

.hallway-inner {
  width: min(680px, 88vw);
  margin: 0 auto;
  text-align: center;
}

.hallway-sign {
  color: var(--muted);
  margin-bottom: 2.2em;
  display: flex;
  align-items: center;
  gap: 1.2em;
  justify-content: center;
}

.hallway-sign::after, .hallway-sign::before {
  content: "";
  flex: 0 0 2.4em;
  height: 1px;
  background: var(--line);
}

.hallway h2 { margin-bottom: .8em; }

.hallway-note {
  color: var(--ink-soft);
  font-style: italic;
  font-size: .98em;
  margin-bottom: 3em;
}

.hall-scene {
  position: relative;
  height: 300px;
  margin-top: 1rem;
}

/* the table itself */
.hall-table {
  position: absolute;
  left: 50%;
  bottom: 24px;
  translate: -50% 0;
  width: min(440px, 82%);
}

.hall-top {
  height: 14px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 10px 18px -14px rgba(43, 33, 24, .5);
}

.hall-legs {
  display: flex;
  justify-content: space-between;
  padding: 0 34px;
}

.hall-legs span {
  width: 12px;
  height: 58px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-top: none;
  border-radius: 0 0 5px 5px;
}

/* the keys — lift them and there's a scrawl underneath */
.object--keys {
  position: absolute;
  left: 8%;
  bottom: 106px;
  width: clamp(96px, 11vw, 128px);
  z-index: 2;
  transition: transform .6s var(--ease-tactile);
}

.object--keys.lifted { transform: translate(26px, -34px) rotate(14deg); }

.object-hint {
  display: block;
  margin-top: .3em;
  font-size: var(--label-size);
  color: var(--muted);
  opacity: 0;
  transition: opacity .4s ease;
}

.object--keys:hover .object-hint, .object--keys.lifted .object-hint { opacity: .9; }

.hall-under {
  position: absolute;
  left: 4%;
  bottom: 96px;
  width: clamp(120px, 14vw, 160px);
  height: 44px;
  display: grid;
  place-items: center;
  z-index: 1;
}

.hall-scrawl {
  font-family: var(--hand);
  font-size: var(--hand-small-size);
  color: var(--red);
  transform: rotate(-3deg);
  opacity: 0;
  transition: opacity .7s ease .2s;
}

.object--keys.lifted ~ .hall-under .hall-scrawl { opacity: 1; }

/* the child-style doodle, taped a little crooked */
.object--doodle {
  position: absolute;
  right: 6%;
  bottom: 108px;
  width: clamp(120px, 13vw, 158px);
  transform: rotate(3deg);
}

/* the taped scrap — today at home */
.scrap {
  position: absolute;
  left: 50%;
  bottom: 96px;
  translate: -58% 0;
  width: min(230px, 60vw);
  padding: 1em 1.1em .9em;
  background: var(--paper-3);
  border: 1px solid var(--line);
  box-shadow: 0 12px 24px -16px rgba(43, 33, 24, .4);
  font-family: var(--hand);
  font-size: 1.22rem;
  line-height: 1.35;
  color: var(--ink);
  transform: rotate(-1.6deg);
  z-index: 3;
}

.scrap::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 58px;
  height: 18px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(232, 177, 92, .5);
  clip-path: polygon(0 12%, 96% 0, 100% 88%, 4% 100%);
}

.scrap-title {
  display: block;
  font-size: 1.35em;
  margin-bottom: .15em;
  color: var(--amber-text);
}

.scrap .crossed { opacity: .8; }

.scrap-ps {
  display: block;
  margin-top: .5em;
  font-size: .88em;
  color: var(--muted);
}

/* ── the repair ledger — small improvements, on the record ────── */

.ledger {
  margin-top: 2.2em;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-3);
  padding: 1em 1.2em 1.1em;
  max-width: 54ch;
  transform: rotate(.4deg);
}

.ledger-title {
  color: var(--red);
  margin-bottom: .8em;
}

.ledger ul { list-style: none; margin: 0; padding: 0; }

.ledger li {
  display: flex;
  gap: 1em;
  align-items: baseline;
  padding: .3em 0;
  font-size: .92em;
  color: var(--ink-soft);
}

.ledger li .mono {
  flex: none;
  color: var(--amber-text);
  font-size: var(--label-size);
}

/* ── sound postcards — four seconds, always tap-to-play ───────── */

.sound-chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: .8em;
  min-height: 44px;
  font-size: var(--label-size);
  letter-spacing: .04em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45em 1.1em;
  background: var(--paper-3);
  transition: color .3s ease, border-color .3s ease, transform .3s ease;
}

.sound-chip:hover { color: var(--amber-text); border-color: currentColor; transform: translateY(-2px); }

.sound-chip.playing { color: var(--amber-text); border-color: currentColor; }

.sound-chip.playing::before {
  content: "";
  width: .7em;
  height: .7em;
  border-radius: 50%;
  background: var(--amber);
  animation: chipulse 1s ease-in-out infinite;
}

@keyframes chipulse { 50% { opacity: .3; } }

/* ── the letter slot ──────────────────────────────────────────── */

.rooftop-extras {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

.rooftop-extras .sound-chip {
  margin-top: 0;
  color: rgba(239, 230, 214, .7);
  background: transparent;
  border-color: rgba(239, 230, 214, .2);
}

.rooftop-extras .sound-chip:hover,
.rooftop-extras .sound-chip.playing { color: var(--amber-soft); border-color: var(--amber-soft); }

.rooftop-extras .sound-chip.playing::before { background: var(--amber-soft); }

.object--letter { width: clamp(96px, 10vw, 124px); transition: transform .5s var(--ease-tactile); }
.object--letter:hover { transform: translateY(-4px) rotate(-2deg); }

/* ── chalkboard ───────────────────────────────────────────────── */

.object--chalk {
  width: clamp(170px, 17vw, 225px);
  aspect-ratio: 4 / 3;
  background: var(--chalkboard);
  border: 7px solid #8A6B4A;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1em;
  text-align: center;
  transform: rotate(1.5deg);
  transition: transform .5s var(--ease-out);
}

.object--chalk:hover { transform: rotate(0deg) translateY(-4px); }

.chalk-face {
  font-family: var(--hand);
  font-size: var(--chalk-size);
  line-height: 1.3;
  color: #EFE6D6;
  transform: rotate(-1deg);
}

.chalk-foot {
  font-size: var(--label-size);
  letter-spacing: .04em;
  color: rgba(239, 230, 214, .55);
}

/* ── plant corner ─────────────────────────────────────────────── */

.plant-corner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}

.water-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45em 1.1em;
  min-height: 44px;
  transition: color .25s ease, border-color .25s ease, transform .25s var(--ease-out), opacity .25s ease;
  background: var(--paper-3);
}

.water-btn:hover { color: var(--amber-text); border-color: currentColor; transform: translateY(-2px); }
.water-btn:disabled { opacity: .4; cursor: default; transform: none; }
.water-btn:disabled:hover { color: var(--ink-soft); border-color: var(--line); }

.plant-label { color: var(--muted); min-height: 1.6em; margin: 0; }

/* leaf groups start hidden, revealed by js */
.js .object--plant g[id] {
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-tactile);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.js .object--plant g[id]:not(.grown) { opacity: 0; transform: scale(.55) translateY(6px); }

/* cassette reels spin around their own centers */
#reelA, #reelB { transform-box: fill-box; transform-origin: center; }

/* ═══════════════════════════════════════════════════════════════
   no. 09 · the rooftop
   ═══════════════════════════════════════════════════════════════ */

.room--night {
  background: var(--night);
  color: var(--cream);
  padding-bottom: 3rem;
}

.room--night::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 64px;
  background: linear-gradient(var(--paper), rgba(246, 241, 231, 0));
  pointer-events: none;
}

.rooftop-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tw {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cream);
  opacity: .7;
  animation: twinkle 4.4s ease-in-out var(--d, 0s) infinite;
}

.room--night .room-inner {
  width: min(860px, 90vw);
  display: block;
}

.room-sign--night, .room--night .room-sign { color: rgba(239, 230, 214, .55); }
.room--night .room-sign::after { background: rgba(239, 230, 214, .2); }

.someday {
  list-style: none;
  margin: 2em 0 3em;
  padding: 0;
}

.someday li {
  display: flex;
  align-items: baseline;
  gap: 1em;
  padding: .55em 0;
  border-bottom: 1px solid rgba(239, 230, 214, .12);
  color: rgba(239, 230, 214, .82);
  transition: color .25s ease, transform .25s var(--ease-out);
}

.someday li svg {
  flex: none;
  color: rgba(239, 230, 214, .4);
  transform: translateY(1px);
  transition: color .4s ease, transform .5s var(--ease-tactile);
}

.someday li:hover {
  color: var(--rooftop-bright);
  transform: translateX(.4em);
}

.someday li:hover svg {
  color: var(--amber-soft);
  transform: translateY(1px) rotate(72deg) scale(1.15);
}

.someday--secret .secret-text {
  filter: blur(5px);
  transition: filter .7s ease;
  cursor: help;
}

.someday--secret:hover .secret-text,
.someday--secret:focus-within .secret-text { filter: blur(0); }

/* the oldest item on the list — written by a kid, in faded ink.
   ink fades with age; it never gets deleted. */
.someday--origin { flex-wrap: wrap; }

.origin-line {
  flex: 1;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
  font-family: var(--hand);
  font-size: var(--hand-large-size);
  line-height: 1.3;
  color: rgba(239, 230, 214, .48);
  transition: color .4s ease;
}

.someday--origin:hover .origin-line { color: rgba(239, 230, 214, .72); }

.origin-line:focus-visible {
  outline: 1px dashed rgba(239, 230, 214, .45);
  outline-offset: 4px;
}

.origin-note {
  flex-basis: 100%;
  padding: .4em 0 .5em 2.2rem;
  font-family: var(--hand);
  font-size: 1.18rem;
  line-height: 1.4;
  color: var(--amber-soft);
  transform: rotate(-1deg);
}

.doorbell {
  font-family: var(--hand);
  font-size: var(--hand-medium-size);
  color: rgba(239, 230, 214, .85);
  transform: rotate(-1deg);
}

.site-foot {
  width: min(1080px, 90vw);
  margin: 4rem auto 0;
  padding-top: 2.5rem;
  padding-right: clamp(5.5rem, 9vw, 8rem);
  border-top: 1px solid rgba(239, 230, 214, .15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.site-foot p { margin: 0; color: rgba(239, 230, 214, .72); }

.to-top {
  display: inline-flex;
  align-items: center;
  gap: .8em;
  text-decoration: none;
  min-height: 44px;
  color: rgba(239, 230, 214, .82);
  transition: color .4s ease;
}

.to-top svg { transition: transform .5s var(--ease-tactile); }
.to-top:hover { color: var(--amber-soft); }
.to-top:hover svg { transform: translateY(-4px); }

/* ═══════════════════════════════════════════════════════════════
   floor plan navigation
   ═══════════════════════════════════════════════════════════════ */

.floorplan {
  position: fixed;
  right: clamp(1rem, 3vw, 2.2rem);
  bottom: clamp(1rem, 3vw, 2.2rem);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .8rem;
}

/* the pocket sun/moon — shift the house from any room */
.fp-mode {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper-3);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  transition: color .35s ease, border-color .35s ease, transform .35s ease;
}

.fp-mode:hover, .fp-mode[aria-pressed="true"] {
  color: var(--amber-text);
  border-color: currentColor;
  transform: translateY(-2px);
}

.fp-mode .ic {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition: opacity .7s ease, transform .7s var(--ease-out);
}

.fp-mode .ic--moon { opacity: 0; transform: rotate(-70deg) scale(.5); }
html[data-sky="night"] .fp-mode .ic--moon { opacity: 1; transform: none; }
html[data-sky="night"] .fp-mode .ic--sun  { opacity: 0; transform: rotate(70deg) scale(.5); }

/* which rooms keep which hours — closed rooms sit dark on the map */
html[data-sky="night"] .fp-house a[data-hours="day"],
html:not([data-sky="night"]) .fp-house a[data-hours="night"] { opacity: .4; }

html[data-sky="night"] .fp-house a[data-hours="day"]:hover,
html:not([data-sky="night"]) .fp-house a[data-hours="night"]:hover { opacity: 1; }

.fp-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .7em 1.2em;
  color: var(--ink-soft);
  min-height: 44px;
  transition: color .25s ease, border-color .25s ease, transform .25s var(--ease-out);
}

.fp-toggle span { font-size: var(--label-size); }

.fp-toggle:hover, .fp-toggle[aria-expanded="true"] {
  color: var(--amber-text);
  border-color: currentColor;
  transform: translateY(-2px);
}

.fp-panel {
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.2rem 1.3rem 1.4rem;
  box-shadow: 0 24px 50px -20px rgba(43, 33, 24, .45);
  transform-origin: bottom right;
  animation: planin .45s var(--ease-tactile);
  width: 300px;
}

@keyframes planin {
  from { opacity: 0; transform: translateY(10px) scale(.92); }
  to   { opacity: 1; transform: none; }
}

.fp-title {
  color: var(--muted);
  margin: 0 0 .9rem;
}

/* the house map — the whole place, drawn small */
.fp-house {
  display: block;
  width: 100%;
  height: auto;
}

.fp-house a { cursor: pointer; }

.fp-room-rect {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.4;
  transition: fill .5s ease;
}

.fp-house a:hover .fp-room-rect { stroke: var(--amber); stroke-width: 2; }

.fp-num {
  font-family: var(--mono);
  font-size: var(--plan-number-size);
  font-weight: 500;
  fill: var(--muted);
  text-anchor: middle;
}

.fp-name {
  font-family: var(--mono);
  font-size: var(--plan-name-size);
  letter-spacing: .04em;
  fill: var(--ink-soft);
  text-anchor: middle;
}

.fp-house a.here .fp-room-rect { fill: var(--amber-soft); }
.fp-house a.here .fp-num,
.fp-house a.here .fp-name { fill: #2B2118; }

.fp-star { fill: var(--amber); opacity: .8; }
.fp-door { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.fp-win { fill: rgba(232, 177, 92, .5); stroke: var(--ink); stroke-width: 1.4; }

.fp-wall { fill: none; stroke: var(--ink); stroke-width: 2; }

.fp-legend {
  display: flex;
  align-items: center;
  gap: .45em;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: var(--label-size);
}

.fp-legend svg { flex: none; }

/* the replay of the arrival lives with the navigation */
.fp-panel .arrive-again {
  margin: 1rem 0 0;
  width: 100%;
  text-align: center;
  min-height: 44px;
  font-size: var(--label-size);
}

/* room highlight while hovering a floor plan link */
body[data-spot] .room { opacity: .35; transition: opacity .4s ease; }
body[data-spot="living"]  #living-room,
body[data-spot="window"]  #window,
body[data-spot="shelf"]   #shelf,
body[data-spot="music"]   #music,
body[data-spot="pitch"]   #pitch,
body[data-spot="quiet"]   #quiet,
body[data-spot="desk"]    #desk,
body[data-spot="rooftop"] #rooftop,
body[data-spot="doorway"] .room--hero { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   toast + confetti
   ═══════════════════════════════════════════════════════════════ */

.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 70;
  transform: translate(-50%, 260%);
  visibility: hidden;
  background: var(--ink);
  color: var(--cream);
  padding: .8em 1.5em;
  border-radius: 999px;
  font-size: .74rem;
  letter-spacing: .04em;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5);
  transition: transform .55s var(--ease-tactile), visibility 0s linear .55s;
  pointer-events: none;
  max-width: 88vw;
  text-align: center;
}

.toast.show {
  transform: translate(-50%, 0);
  visibility: visible;
  transition: transform .55s var(--ease-tactile);
}

.spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 6;
}

/* ═══════════════════════════════════════════════════════════════
   responsive
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 880px) {
  .room-inner,
  .room--flip .room-inner,
  .room--wide .room-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .room--flip .room-copy { order: 1; }
  .room--flip .scene { order: 2; }

  .scene { min-height: 0; padding: 1.5rem 0; }

  .room--hero { --mtn-h: min(26vh, 250px); }

  /* small screens: the frame flows (the sky still fills the whole
     doorway) so the words never compete with the ridges for space */
  .hero-frame {
    position: relative;
    inset: auto;
    width: auto;
    padding: 6.8rem 4vw calc(var(--mtn-h) * 0.9);
    justify-content: flex-start;
  }
  .hero-sub { margin-bottom: 1.6em; }
  .hero-hours { margin: -.4em 0 1.8em; }
  .proverb { margin: 1.6em 0; }
  .arrive-again { margin-top: 1em; }

  .jar-mascot {
    --mascot-size: 104px;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    align-self: flex-end;
    margin: -.35rem 5vw .5rem 0;
  }

  .celestial { width: 44px; }
  /* small screens: every body stays high, clear of the wrapped title */
  [data-sky="day"]   .celestial { --cx: 30%; --cy: 12%; }
  [data-sky="dawn"]  .celestial { --cx: 28%; --cy: 14%; }
  [data-sky="dusk"]  .celestial { --cx: 70%; --cy: 12%; }
  [data-sky="night"] .celestial { --cx: 82%; --cy: 7%; }

  /* the hint sits under the sun/moon instead of beside it */
  .sky-hint {
    left: calc(var(--cx, 27%) - 1.2rem);
    top: calc(var(--cy, 26%) + 3.6rem);
    max-width: 11rem;
    font-size: 1.02rem;
  }

  /* keep the stars clear of the greeting */
  .sky .star { top: calc(var(--y) + 20%); }

  .hero-meta {
    position: absolute;
    top: clamp(1.2rem, 3.5vh, 2.2rem);
    left: 4vw;
    right: 4vw;
    width: auto;
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }

  .greeting { text-align: left; }

  .proverb {
    position: static;
    margin: 1.8em 0 3em;
    text-align: left;
  }

  .proverb-id { transform: rotate(-1deg); }

  .shelf {
    justify-content: center;
    gap: 2px;
    padding-left: 0;
    padding-right: 0;
  }
  .book { flex: 0 0 44px; width: 44px; }
  .book--onepiece { height: 158px; }
  .book--naruto { height: 138px; }
  .book--bleach { height: 166px; }
  .book--frieren { height: 146px; }
  .book--dandadan { height: 132px; }
  .book--csm { height: 154px; }

  .note--living, .note--cup, .note--window, .note--music,
  .note--pitch, .note--tasbih, .note--plant, .note--desk,
  .note--thesis, .note--sat, .note--yorunote, .note--house, .note--drawer {
    position: fixed;
    left: 50%;
    top: auto;
    bottom: 5.5rem;
    transform: translateX(-50%) rotate(-1.5deg);
    z-index: 55;
  }

  .note.show { transform: translateX(-50%) rotate(-1.5deg); }
  .note { transform: translateX(-50%) rotate(-1.5deg) scale(.9); }
  .note::before { top: -8px; }

  .site-foot { flex-direction: column; align-items: flex-start; gap: 1.4rem; }

  /* ── the pocket dock: one row, thumb-reach, gets out of the way ── */
  .floorplan {
    right: 50%;
    transform: translateX(50%);
    bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    align-items: center;
    gap: .6rem;
    transition: transform .45s var(--ease-out);
  }

  .floorplan.dock-hidden { transform: translateX(50%) translateY(calc(100% + 1.4rem)); }

  .fp-mode { width: 44px; height: 44px; }
  .fp-toggle { padding: .6em 1em; }

  /* the plan opens as a bottom sheet */
  .fp-panel {
    position: fixed;
    left: 50%;
    bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(360px, calc(100vw - 1.4rem));
    max-height: 72vh;
    overflow: auto;
    z-index: 56;
    transform-origin: bottom center;
  }

  /* notes sit above the dock */
  .toast { bottom: 5.8rem; }
}

@media (max-width: 480px) {
  .hero-title { font-size: var(--display-phone-size); }
  .fp-panel { width: calc(100vw - 3.4rem); }
}

/* ═══════════════════════════════════════════════════════════════
   reduced motion
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .reveal { opacity: 1; transform: none; }
  .js .hero-title .w { opacity: 1; transform: none; transition: none; }
  .swash svg path { stroke-dashoffset: 0 !important; }
  .someday--secret .secret-text { filter: none; }

  .arrival-stars span,
  html[data-season="wet"] .window-rain line,
  .orb--sun .rays,
  .star,
  .shooting,
  .come-in svg,
  .object--cup:hover .steam path,
  .object--mug:hover .steam path,
  .object--cassette.playing .reel--a,
  .object--cassette.playing .reel--b,
  .object--tasbih,
  .cue-tilt,
  .cue-steam .steam path,
  .cue-sparkle,
  .cue-reel .reel--a,
  .cue-reel .reel--b,
  .cue-spin,
  .cue-swing svg,
  .cue-roll,
  .object--ticket.flip,
  .object--scarf,
  .sound-chip.playing::before,
  .tw,
  .fp-panel,
  .passing-light.crossing { animation: none !important; }

  .arrival.leaving,
  .celestial,
  .orb,
  .jar-mascot__portrait,
  .next-door svg,
  .room-inner,
  .object,
  .shelf,
  .note,
  .object,
  .floorplan,
  .fp-mode,
  .fp-toggle {
    transition-duration: .15s !important;
  }

  .jar-mascot__portrait,
  .jar-mascot:hover .jar-mascot__portrait,
  .jar-mascot:focus-visible .jar-mascot__portrait { transform: rotate(1deg); }

  /* the passing light never flies — it rests in the sky, still findable */
  html[data-sky="night"] .passing-light {
    visibility: visible;
    opacity: .8;
    transform: translateX(30vw);
  }
}