/* ==========================================================================
   creative.asssheeesh.space — "the room"
   Each section is a different part of one room, drawn flat and seen straight
   on. Motion is slow and small: the room is alive, not busy.
   ========================================================================== */

:root {
  color-scheme: only light;

  --ink: #23201d;
  --ink-soft: #5e554d;
  --paper: #f7f2e7;
  --rule: rgba(70, 110, 160, .16);
  --accent: #c2412f;          /* used sparingly: active nav, placeholders */
  --teal: #1f6e7f;
  --pink: #e6c2c8;

  --display: "Fraunces", Georgia, serif;
  --ui: "Inter", system-ui, sans-serif;
  --read: "Literata", Georgia, serif;
  --spray: "Sedgwick Ave", "Fraunces", cursive;
  --spray-display: "Sedgwick Ave Display", "Sedgwick Ave", cursive;
  --pixel: "VT323", ui-monospace, monospace;

  --nav-h: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--ui); color: var(--ink); background: var(--teal); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Nav: small, quiet, frosted ---------- */
.nav {
  position: fixed; z-index: 50; left: 50%; transform: translateX(-50%);
  top: calc(14px + env(safe-area-inset-top, 0px));
  display: flex; gap: 2px; padding: 5px;
  background: rgba(20, 18, 16, .28);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  max-width: calc(100vw - 24px);
}
.nav a {
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  color: rgba(255, 255, 255, .82); text-decoration: none;
  transition: background .25s, color .25s;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.nav a.is-active { color: var(--ink); background: rgba(255, 252, 245, .95); }

/* ---------- Rooms ---------- */
.room { position: relative; min-height: 100svh; }
.room--scene { height: 100svh; overflow: hidden; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Page 1: the green wall ---------- */
#hi { background: var(--teal); }
.tag {
  font-family: var(--spray-display); font-size: 96px;
  fill: #f4cf55; stroke: #0b2f38; stroke-width: 3; paint-order: stroke; letter-spacing: 1px;
}
.bio {
  font-family: var(--spray); font-size: 31px; line-height: 1.2; text-align: center;
  color: #efe6cf; filter: url(#spray);
}
.bio p { margin: 0; }
.bio .note { margin-top: 10px; font-size: 13px; color: #ffcfc5; }
.wall-sun { animation: sun 38s ease-in-out infinite alternate; }
.lamp-light { mix-blend-mode: screen; animation: lamp 7s ease-in-out infinite; }
.lamp-halo { mix-blend-mode: screen; animation: flicker 5s ease-in-out infinite; }
.frame-photo { filter: sepia(.25) saturate(.7) contrast(1.04); }
.tiny-frame { opacity: .9; }
.cutout { filter: drop-shadow(0 6px 10px rgba(6, 34, 41, .28)); }
.credits {
  position: absolute; left: 16px; bottom: 10px; margin: 0;
  font-size: 10px; color: rgba(40, 36, 30, .55);
}
.credits a { color: inherit; }
.led { animation: led 3.2s ease-in-out infinite; }
.dust circle { opacity: 0; animation: dust 14s linear infinite; }
.dust circle:nth-child(2) { animation-delay: -3s; animation-duration: 17s; }
.dust circle:nth-child(3) { animation-delay: -7s; animation-duration: 12s; }
.dust circle:nth-child(4) { animation-delay: -2s; animation-duration: 16s; }
.dust circle:nth-child(5) { animation-delay: -9s; animation-duration: 19s; }
.dust circle:nth-child(6) { animation-delay: -5s; animation-duration: 15s; }

/* ---------- Page 3: the study ---------- */
#upto { background: #a9737f; }
.pan { position: absolute; inset: 0; }
.sconce-light { animation: flicker 6s ease-in-out infinite; }
.sconce-bulb { filter: drop-shadow(0 0 10px rgba(255, 210, 140, .9)); }
.ring-glow { animation: breathe 5s ease-in-out infinite; transform-origin: 1210px 410px; }
.air path { animation: air var(--air-dur, 4s) ease-in-out infinite; }
.air path:nth-child(2) { animation-delay: -1.3s; }
.air path:nth-child(3) { animation-delay: -2.6s; }
.steam { opacity: var(--steam-o, .7); transition: opacity 1s; }
.steam path { animation: steam var(--steam-dur, 3.4s) ease-in-out infinite; transform-box: fill-box; }
.steam path:nth-child(2) { animation-delay: -1.1s; }
.steam path:nth-child(3) { animation-delay: -2.2s; }

/* the lived-in room (js/room.js) */
/* lighting by time of day: classes set on #scene-study */
.sunlight { display: none; mix-blend-mode: screen; }
.light-day .sunlight { display: inline; animation: sun-flicker 6s ease-in-out infinite; }
.light-day .sconce-light, .light-night .sconce-light { display: none; }
.light-day .sconce-bulb, .light-night .sconce-bulb { fill: #e5dccb; filter: none; }
.night-dim { display: none; }
.light-night .night-dim { display: inline; opacity: .58; }
.light-night .ring-glow { display: none; }
.cast-shadows { transition: opacity .6s; }
.figure rect, #figure-fx rect { shape-rendering: crispEdges; }
.fx-zzz { font-family: var(--pixel); font-size: 26px; fill: #eef4ff; opacity: 0; animation: zzz 2.7s ease-out infinite; }
.fx-heart { animation: heart 2.6s ease-out forwards; transform-box: fill-box; }
.ac-temp { font-family: var(--pixel); font-size: 30px; fill: #8fd3ff; text-anchor: middle; }
.ac-btn { cursor: pointer; outline: none; }
.ac-btn:hover circle + circle, .ac-btn:focus-visible circle + circle { fill: #9e9688; }
#clock.is-draggable { cursor: grab; touch-action: none; }
#clock.is-draggable:active { cursor: grabbing; }
.god-reset { font-family: var(--ui); font-size: 11px; fill: #f1ebdf; text-decoration: underline; cursor: pointer; outline: none; }
.headphones, .headphones-hit { cursor: pointer; outline: none; }
.headphones { transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); transform-box: fill-box; transform-origin: 50% 100%; }
.headphones:hover, .headphones:focus-visible { transform: translateY(-5px); }
.credits--study { color: rgba(255, 245, 240, .6); z-index: 2; }
.player {
  position: absolute; right: 16px; bottom: 16px; z-index: 30; width: min(300px, calc(100vw - 32px));
  padding: 10px; border-radius: 10px; background: rgba(20, 16, 20, .82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #f1ebdf; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .6);
  animation: fade .3s ease;
}
.player__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; letter-spacing: .03em; }
.player__close { color: inherit; font-size: 13px; opacity: .8; }
.player iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; }
.player__title { margin-top: 8px; font-family: var(--display); font-size: 13px; opacity: .9; }
.code { animation: code 26s linear infinite; }
.piano-screen { animation: breathe 3s ease-in-out infinite; }
.pixel-text { font-family: var(--pixel); font-size: 19px; fill: #a8f5b4; animation: caret 1.4s steps(1) infinite; }
#pixel-cat .eye { animation: blink 4.5s steps(1) infinite; }

.shelf-plates text { font-family: var(--ui); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; fill: #3b2a1d; text-anchor: middle; }

.book { cursor: pointer; outline: none; }
.book > g { transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.book:hover > g, .book:focus-visible > g { transform: translateY(-10px); }
.book text { font-family: var(--display); font-size: 10.5px; fill: rgba(255, 249, 236, .92); pointer-events: none; }

.notebook { cursor: pointer; outline: none; }
.journal-book { cursor: pointer; outline: none; }
.journal-book__inner { transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.journal-book:hover .journal-book__inner, .journal-book:focus-visible .journal-book__inner { transform: translateY(-6px); }
.journal-book__label { font-family: var(--ui); font-size: 13px; font-weight: 600; letter-spacing: .32em; fill: #d9b36a; text-anchor: middle; pointer-events: none; }
.notebook__inner { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); transform-origin: 568px 652px; transform-box: view-box; }
.notebook:hover .notebook__inner, .notebook:focus-visible .notebook__inner { transform: rotate(-4deg) translateY(-6px); }
.notebook__glint { animation: glint 6s ease-in-out infinite; }

/* ---------- Page 2: notice board ---------- */
.room--board {
  display: grid; place-items: center;
  padding: calc(var(--nav-h) + 40px) 16px 56px;
  /* a dusky plum wall: halfway between the teal room and the pink study */
  background: radial-gradient(90% 70% at 50% 20%, #6a5a73, #54465c 60%, #463a4d);
}
.board {
  position: relative;
  width: min(1080px, 100%);
  min-height: 420px;
  padding: 44px clamp(20px, 4vw, 56px) 56px;
  background: #c99b66;
  border: 14px solid #7b5537;
  border-radius: 6px;
  box-shadow: 0 1px 0 #946a48 inset, 0 40px 60px -35px rgba(60, 35, 15, .55);
}
.board__header {
  display: inline-block; margin-bottom: 36px; padding: 14px 22px 12px;
  background: #1f4f5c; color: #f1e7cf; transform: rotate(-1.2deg);
  box-shadow: 0 10px 18px -12px rgba(40, 20, 5, .55);
}
.board__header h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -.01em; }
.board__header p { margin: 2px 0 0; font-family: var(--display); font-style: italic; color: #e6c2c8; }
.board__pins { display: flex; flex-wrap: wrap; gap: 36px 40px; }
.pin-card {
  position: relative; width: min(280px, 100%); text-align: left;
  padding: 26px 22px 20px;
  background: var(--card, #e7c06b);
  box-shadow: 0 14px 20px -14px rgba(40, 20, 5, .6);
  transform: rotate(var(--tilt, -1.5deg));
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s;
}
.pin-card:hover, .pin-card:focus-visible { transform: rotate(0) translateY(-4px); box-shadow: 0 22px 26px -16px rgba(40, 20, 5, .65); outline: none; }
.pin-card::before {
  content: ""; position: absolute; top: -8px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #ff8f7a 0 22%, #c2412f 24%);
  box-shadow: 0 3px 4px rgba(0, 0, 0, .3);
}
/* coloured index cards, cycling */
.pin-card:nth-child(4n+1) { --card: #e7c06b; }
.pin-card:nth-child(4n+2) { --card: #a7c4b5; }
.pin-card:nth-child(4n+3) { --card: #e3a9a4; }
.pin-card:nth-child(4n+4) { --card: #b9b2d6; }
.pin-card__icon { margin-right: .35em; }
.pin-card h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 600; font-size: 1.35rem; line-height: 1.15; }
.pin-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 16px; font-size: .92rem; line-height: 1.5; color: rgba(35, 32, 29, .78); }
.pin-card .count { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #7a2a1e; }

/* ---------- Page 4: Spillage journal ---------- */
/* full-bleed: index pinned to the left edge, the entry gets the rest of the screen */
.room--journal {
  display: flex;
  padding: calc(var(--nav-h) + 8px) 0 0;
  background: #1d4a56;
}
.journal { display: grid; grid-template-columns: clamp(240px, 21vw, 320px) 1fr; width: 100%; height: calc(100svh - var(--nav-h) - 8px); }
.journal__index, .journal__page { color: #ece3d0; --rule: rgba(255, 255, 255, .12); }
.journal__index { background: #1d4a56; }
.journal__page { background: #26303a; }
.journal__index { display: flex; flex-direction: column; padding: 28px 22px 16px clamp(16px, 2vw, 28px); border-right: 1px solid rgba(0, 0, 0, .25); }
.journal__index h2 { margin: 0 0 18px; font-family: var(--display); font-weight: 600; font-size: 1.6rem; }
.journal__index ol { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; }
.journal__index li button { display: block; width: 100%; text-align: left; padding: 10px 0 10px 12px; border-left: 2px solid transparent; font-size: .95rem; line-height: 1.35; color: inherit; }
.journal__index li button small { display: block; margin-top: 2px; font-size: .75rem; color: #9fbcc2; }
.journal__index li button:hover { border-left-color: rgba(230, 194, 200, .4); }
.journal__index li button[aria-current="true"] { border-left-color: #e6c2c8; font-weight: 500; }
.journal__pager { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--rule); font-size: .8rem; color: #9fbcc2; }
.journal__pager button { padding: 4px 10px; font-size: 1rem; color: inherit; }
.journal__pager button:disabled { opacity: .2; cursor: default; }
.journal__page { position: relative; overflow: hidden; view-transition-name: journal-page; }
.journal__scroll {
  height: 100%; overflow-y: auto; outline: none;
  padding: 48px clamp(24px, 6vw, 72px) 56px;
  font-family: var(--read); font-size: 1.07rem; line-height: 1.85;
}
.journal__expand {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: #ece3d0; background: rgba(255, 255, 255, .06); transition: background .2s;
}
.journal__expand:hover, .journal__expand:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }
.journal__expand svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.journal__expand .icon-minimise, .journal__page.is-expanded .icon-expand { display: none; }
.journal__page.is-expanded .icon-minimise { display: block; }
/* full-screen reading: the page takes over the window, text stays at a readable measure */
.journal__page.is-expanded { position: fixed; inset: 0; z-index: 80; border-radius: 0; box-shadow: none; }
.journal__page.is-expanded .journal__scroll {
  padding: calc(72px + env(safe-area-inset-top, 0px)) max(24px, calc((100% - 68ch) / 2)) 96px;
  font-size: 1.14rem;
}
.journal__page.is-expanded .journal__expand { top: calc(18px + env(safe-area-inset-top, 0px)); right: 22px; }
::view-transition-group(journal-page) { animation-duration: .45s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
.journal__page h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; letter-spacing: -.01em; }
.journal__page time { display: block; margin: 10px 0 30px; font-family: var(--ui); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #a9b6bd; }
/* one column for title, date and body, centred in the reader */
.journal__entry { max-width: 68ch; margin-inline: auto; }
.journal__page .note { color: #ff9f8a; }
.journal__page .n-img { margin: 0 auto 1.4em; max-height: 420px; width: auto; }
.journal__page blockquote { border-left-color: #e6c2c8; color: #cfc4d8; }
.journal__page .n-page p { margin-bottom: 1em; }
.journal__page a { color: #9fc3ff; }

/* ---------- Shared content ---------- */
.content p, .content .li { margin: 0 0 .9em; }
.content .li { padding-left: 1.1em; text-indent: -1.1em; }
.content h4 { margin: 1em 0 .4em; font-family: var(--display); font-weight: 600; font-size: 1.15em; }
.content h4:first-child { margin-top: 0; }
.content a { color: #2f5fd0; }
.note { font-family: var(--ui); font-style: italic; font-size: .82em; color: var(--accent); }
.note::before { content: "Placeholder · "; font-style: normal; font-weight: 600; letter-spacing: .03em; }
.note--wall { margin: 0; text-align: center; font-size: 13px; color: #ffcfc5; }

/* ---------- Overlay ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.overlay__backdrop { position: absolute; inset: 0; background: rgba(22, 16, 12, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .3s ease; }
.overlay__body { position: relative; max-width: 100%; }
.close {
  position: absolute; top: -12px; right: -12px; z-index: 10; width: 34px; height: 34px; border-radius: 50%;
  background: #fbf8f0; color: var(--ink); font-size: 1rem; box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
}

.sheet {
  width: min(760px, 94vw); max-height: 84svh; overflow-y: auto;
  padding: 36px clamp(22px, 5vw, 52px) 40px;
  background: #2a2331; color: #ece3d0; border-radius: 6px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
  font-family: var(--read); font-size: 1rem; line-height: 1.7;
  --rule: rgba(255, 255, 255, .1);
  animation: unpin .4s cubic-bezier(.3, 1.3, .5, 1);
}
.sheet h3 { display: flex; align-items: center; gap: .45em; margin: 0 0 18px; font-family: var(--display); font-weight: 600; font-size: 1.7rem; line-height: 1.15; }
.sheet__blurb { margin: -8px 0 14px; color: #b9aec4; }
.sheet > ul { list-style: none; margin: 0; padding: 0; }
.sheet > ul > li + li { border-top: 1px solid var(--rule); }
.sheet > ul > li > button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 0; font-family: var(--display); font-size: 1.1rem; color: inherit; }
.sheet > ul > li > button span { flex: 1; }
.sheet > ul > li > button::after { content: "→"; color: #e6c2c8; }
.sheet > ul > li > button:hover { color: #e6c2c8; }
.sheet .back { font-family: var(--ui); font-size: .85rem; color: #b9aec4; margin-bottom: 14px; }
.sheet a { color: #9fc3ff; }
.sheet .embed { position: relative; aspect-ratio: 16 / 9; margin: 14px 0 22px; }
.sheet .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; }
.n-icon { display: inline-grid; place-items: center; flex: none; width: 1.25em; height: 1.25em; object-fit: contain; font-style: normal; }
.sheet .note { color: #ff9f8a; }

/* Notion blocks */
.n-page .n-list { margin: 0 0 .65em; padding-left: 1.3em; }
.n-page .n-list .n-list { margin: .3em 0 0; }
.n-page .n-list li { margin: 0 0 .35em; }
.n-page ul.n-list li::marker { color: #e6c2c8; }
.n-page ol.n-list li::marker { color: #e6c2c8; font-family: var(--ui); font-size: .85em; }
.n-page .n-gap { height: .9em; }
.n-page code { font-family: ui-monospace, monospace; font-size: .9em; padding: .1em .35em; border-radius: 4px; background: rgba(255, 255, 255, .08); }
.n-page .n-code { margin: 0 0 1em; padding: 12px 14px; border-radius: 6px; background: rgba(0, 0, 0, .25); overflow-x: auto; font-size: .85em; line-height: 1.5; }
.n-page .n-code code { padding: 0; background: none; }
.n-page p { margin: 0 0 .65em; padding-left: calc(var(--d, 0) * 1.4em); }
.n-page .n-li { position: relative; padding-left: calc(var(--d, 0) * 1.4em + 1.1em); }
.n-page .n-li::before { content: "•"; position: absolute; left: calc(var(--d, 0) * 1.4em); color: #e6c2c8; }
.n-page .n-ol::before { content: attr(data-n); }
.n-page hr { border: 0; border-top: 1px solid var(--rule); margin: 1.2em 0; }
.n-page blockquote { margin: 0 0 .8em; padding-left: 1em; border-left: 3px solid #e6c2c8; color: #cfc4d8; font-style: italic; }
.n-page h4, .n-page h5, .n-page h6 { margin: 1em 0 .4em; font-family: var(--display); font-weight: 600; }
.n-img { display: block; max-width: 100%; border-radius: 6px; margin: 0 0 1em; }
.n-toggle { margin: 0 0 .8em; }
.n-toggle > summary { cursor: pointer; list-style: none; font-weight: 600; padding: 4px 0; }
.n-toggle > summary::-webkit-details-marker { display: none; }
.n-toggle > summary::before { content: "▸"; display: inline-block; width: 1.1em; color: #e6c2c8; transition: transform .2s; }
.n-toggle[open] > summary::before { transform: rotate(90deg); }
.n-toggle__body { padding: 6px 0 4px 1.1em; border-left: 1px solid var(--rule); margin-left: .35em; }
.n-callout { display: flex; gap: .7em; margin: 0 0 .9em; padding: 12px 14px; border-radius: 6px; background: rgba(255, 255, 255, .05); }
.n-callout__icon { flex: none; }
.n-callout__body { flex: 1; min-width: 0; }
.n-c-green { color: #9fdcae; } .n-c-red { color: #ff9c8a; } .n-c-brown { color: #dcb68f; } .n-c-orange { color: #f3b77c; }
.n-c-purple { color: #c9a8f0; } .n-c-pink { color: #f2a7c6; } .n-c-blue { color: #9fc3ff; } .n-c-yellow { color: #f0d585; } .n-c-gray { color: #b0a8b8; }

/* book + notebook */
.book3d { --bw: min(920px, 94vw); position: relative; width: var(--bw); aspect-ratio: 3 / 2; max-height: 84svh; perspective: 2400px; transition: transform .9s cubic-bezier(.6, 0, .3, 1); }
.book3d.is-closed { transform: translateX(-25%); }
.book3d__page--left { transition: opacity .35s ease .5s; }
.book3d.is-closed .book3d__page--left, .book3d.is-closed::after { opacity: 0; transition: none; }
.book3d__page { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--paper); overflow: hidden; cursor: pointer; }
.book3d__page--left { left: 0; border-radius: 4px 0 0 4px; box-shadow: inset -26px 0 30px -22px rgba(0, 0, 0, .3); }
.book3d__page--right { right: 0; border-radius: 0 4px 4px 0; box-shadow: inset 26px 0 30px -22px rgba(0, 0, 0, .3); }
.book3d__content { position: absolute; inset: 8% 10% 10%; font-family: var(--read); font-size: clamp(.84rem, 1.4vw, 1rem); line-height: 1.7; color: #2e2622; }
.book3d__folio { position: absolute; bottom: 4%; left: 0; right: 0; text-align: center; font-size: .72rem; color: #a3978a; }
.book3d__hint { position: absolute; bottom: 4%; right: 8%; font-size: .72rem; color: #a3978a; }
.book3d__title { display: grid; place-content: center; height: 100%; text-align: center; }
.book3d__title h3 { margin: 0 0 .5em; font-family: var(--display); font-weight: 600; font-size: 1.8em; line-height: 1.1; }
.book3d__title p { margin: 0; font-family: var(--display); font-style: italic; color: var(--ink-soft); }

.leaf { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; transform-origin: left center; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.45, .05, .35, 1); z-index: 3; }
.leaf__face { position: absolute; inset: 0; backface-visibility: hidden; background: var(--paper); overflow: hidden; }
.leaf__face--front { border-radius: 0 4px 4px 0; box-shadow: inset 26px 0 30px -22px rgba(0, 0, 0, .3); }
.leaf__face--back { transform: rotateY(180deg); border-radius: 4px 0 0 4px; box-shadow: inset -26px 0 30px -22px rgba(0, 0, 0, .3); }
.leaf.is-turned { transform: rotateY(-180deg); }

.cover { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; z-index: 4; transform-origin: left center; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.6, 0, .3, 1); }
.cover__front, .cover__back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 0 4px 4px 0; }
.cover__front {
  display: grid; place-content: center; text-align: center; padding: 12%;
  background: linear-gradient(90deg, rgba(0, 0, 0, .28), transparent 7%), var(--c, #8a3b2e);
  color: rgba(255, 249, 236, .95); box-shadow: 0 24px 40px -14px rgba(0, 0, 0, .6);
}
.cover__front h3 { margin: 0 0 .4em; font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 3vw, 2.2rem); line-height: 1.1; }
.cover__front p { margin: 0; font-family: var(--display); font-style: italic; opacity: .8; }
.cover { cursor: pointer; }
.cover__hint { position: absolute; right: 9%; bottom: 6%; font-family: var(--ui); font-size: .75rem; letter-spacing: .04em; opacity: .7; }
.cover__back { transform: rotateY(180deg); background: var(--c, #8a3b2e); border-radius: 4px 0 0 4px; filter: brightness(.82); }
.cover.is-open { transform: rotateY(-180deg); }

.book3d--notebook { --c: #2f5fd0; }
.book3d--notebook .book3d__page, .book3d--notebook .leaf__face {
  background: repeating-linear-gradient(transparent 0 calc(1.7em - 1px), var(--rule) calc(1.7em - 1px) 1.7em) 0 8% / 100% 100%, var(--paper);
}
.book3d--notebook::after {
  content: ""; position: absolute; top: 4%; bottom: 4%; left: calc(50% - 8px); width: 16px; z-index: 6; pointer-events: none;
  background: radial-gradient(circle, transparent 3px, #8d8d96 3.5px, #cfcfd6 5px, transparent 6px) center / 16px 24px repeat-y;
}

.measure { position: absolute; left: -9999px; top: 0; visibility: hidden; overflow: hidden; }

/* ---------- Motion ---------- */
@keyframes sun { from { transform: translate(-60px, 0); } to { transform: translate(90px, 30px); } }
@keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes dust { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .5; } 80% { opacity: .35; } 100% { opacity: 0; transform: translate(40px, -110px); } }
@keyframes flicker { 0%, 100% { opacity: .9; } 37% { opacity: 1; } 40% { opacity: .86; } 43% { opacity: 1; } }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(14px, -46px); } }
@keyframes heart { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; transform: translateY(-6px) scale(1); } 100% { opacity: 0; transform: translateY(-58px) scale(1.1); } }
/* in step with the 6s curtain: more light when it swings open */
@keyframes sun-flicker { 0%, 100% { opacity: .65; } 33% { opacity: 1; } 66% { opacity: .8; } }
@keyframes hint-nudge { 0%, 100% { transform: translateX(-50%); } 50% { transform: translateX(calc(-50% + 6px)); } }
@keyframes lamp { 0%, 100% { opacity: .88; } 50% { opacity: 1; } }
@keyframes breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes air { 0%, 100% { opacity: 0; transform: translateY(0); } 50% { opacity: .7; transform: translateY(10px); } }
@keyframes steam { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: .7; } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes code { from { transform: translateY(0); } to { transform: translateY(-330px); } }
@keyframes caret { 50% { opacity: .55; } }
@keyframes blink { 0%, 93% { opacity: 1; } 94%, 97% { opacity: 0; } }
@keyframes glint { 0%, 70%, 100% { opacity: 0; } 80% { opacity: .22; } }
@keyframes fade { from { opacity: 0; } }
@keyframes unpin { from { opacity: 0; transform: translateY(24px) rotate(-1.5deg) scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

.swipe-hint {
  display: none; position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 20; margin: 0;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  font-size: 13px; font-weight: 500; color: #fff; background: rgba(20, 16, 20, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none;
  transition: opacity .6s;
}
.swipe-hint.is-gone { opacity: 0; }

/* ---------- Narrow screens ---------- */
@media (max-width: 760px) {
  .nav { gap: 0; padding: 4px; }
  .nav a { padding: 7px 10px; font-size: 12px; }
  /* the study becomes a room you pan across */
  .swipe-hint { display: block; animation: hint-nudge 2.4s ease-in-out infinite; }
  .room--pan .pan { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .room--pan .pan::-webkit-scrollbar { display: none; }
  .room--pan .scene { position: relative; width: auto; height: 100%; aspect-ratio: 1560 / 960; }
  .journal { grid-template-columns: 1fr; height: auto; }
  .journal__index ol { max-height: 220px; }
  .journal__page { min-height: 60svh; }
  .book3d { aspect-ratio: 3 / 4; --bw: 92vw; }
  .book3d.is-closed { transform: none; }
  .book3d__page--left, .book3d--notebook::after { display: none; }
  .book3d__page--right, .leaf, .cover { width: 100%; }
}