/* =========================================================
   Rhea Sharma — Studio (interactive cozy room)
   "3D-but-not-3D": camera zooms into objects, parallax depth.
   ========================================================= */

@import url('https://fonts.cdnfonts.com/css/lufga');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Montserrat:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Silkscreen:wght@400;700&family=Sixtyfour&display=swap');

:root {
  --paper:   #FAFBFC;
  --ink:     #1C2430;
  --muted:   #8A909C;
  --accent:  #7E93C4;            /* brand dusty blue */
  --warm-ink:#4A3A2A;
  --serif:  'Montserrat', sans-serif;
  --display:'Lufga', 'Outfit', 'Montserrat', sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, monospace;
  --pixel:  'Silkscreen', 'JetBrains Mono', monospace;
  --clock:  'Sixtyfour', 'Silkscreen', monospace;   /* LED-display digits with clearly-formed numerals */
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --cam-ease: cubic-bezier(0.66, 0, 0.2, 1);
  /* yellow game-style push buttons (face / pressed-in ledge / ink) */
  --btn: #FFCE3A;  --btn-ledge: #C28A1B;  --btn-ink: #4A3512;
  /* deep-olive background; the strip left of the table's top-left corner is ~2 shades darker */
  --wall: #6E7142;        /* olive-green paper wall */
  --wall-dark: #595B33;   /* ~two shades darker */
  /* subtle paper grain, tiled 1:1 (200px) so image-rendering:pixelated leaves it crisp; blended over the olive */
  --paper-tex: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.5'/></svg>");
  --split: 6.8%;          /* x of the table's top-left corner — left of this is darker */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background-color: var(--wall);
  background-image: var(--paper-tex); background-size: 200px 200px; background-blend-mode: soft-light;
  image-rendering: pixelated;
  overflow: hidden;
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'><path d='M5 3L5 20L9.5 15.8L12.4 22L15 20.8L12.1 14.8L18 14.8Z' fill='%23ffffff' stroke='%231C2430' stroke-width='1.6' stroke-linejoin='round'/></svg>") 5 3, auto;
}
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: none; background: none; cursor: inherit; }

/* handwriting + label classes used inside the SVG */
.rm-hand { font-family: 'Caveat', cursive; font-weight: 700; fill: #7A5A33; }
.rm-label { font-family: var(--display); font-weight: 700; letter-spacing: 0.04em; }

/* ---------- custom cursor ---------- */
/* the old dot/pad follower is gone — body uses a real mouse-pointer icon now */
.cursor { display: none; }
/* hover hint = a round cursor with the label text curved + rotating around it */
.cursor-label {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  width: 84px; height: 84px;
  opacity: 0; transition: opacity .16s var(--ease);
}
.cursor-label.show { opacity: 1; }
.cl-ring {                                               /* the text ring; spins slowly */
  width: 100%; height: 100%; overflow: visible; display: block;
  animation: clSpin 7s linear infinite;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));        /* slight shadow so the white text lifts off any bg */
}
.cl-ring text {
  font-family: var(--display); font-size: 9.4px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  fill: #FFFFFF;                                         /* white text */
}
.cl-dot {                                                /* frosted circle at the centre */
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; background: rgba(255,255,255,.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
@keyframes clSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cl-ring { animation: none; } }
@media (hover: none) { body { cursor: auto; } .cursor, .cursor-label { display: none; } }
body.cursor-ring { cursor: none; }                       /* hide the arrow so the ring IS the cursor */

/* ---------- intro loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 9000; background: #F4E2BD;
  display: flex; align-items: flex-end; justify-content: space-between; padding: clamp(20px,5vw,56px);
  will-change: transform;
}
.loader.done { transform: translateY(-101%); transition: transform 1s var(--ease); }
.loader__word { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9A7B47; align-self: flex-end; }
.loader__count { font-family: var(--display); font-weight: 600; letter-spacing: -.04em; line-height: .8; font-size: clamp(72px,16vw,220px); align-self: center; flex: 1; text-align: center; color: var(--warm-ink); }
.loader__count .pct { color: var(--accent); }
body.loading { overflow: hidden; }

/* ---------- viewport + camera + pixel stage ---------- */
.viewport { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
.camera {
  position: absolute; inset: 0;
  transform-origin: 0 0;
  transition: transform .9s var(--cam-ease);
  will-change: transform;
}
.stage {
  position: absolute; top: 0; left: 0;
  width: 100vw;                 /* overridden by JS to cover the viewport */
  aspect-ratio: 2000 / 1057;
  overflow: visible;            /* let the table show below the box (the viewport still clips) */
  background-color: var(--wall);   /* deep-olive background */
  background-image: var(--paper-tex); background-size: 200px 200px; background-blend-mode: soft-light;
  image-rendering: pixelated;
}
/* the darker olive strip, left of the table's top-left corner (sits behind the room art, runs full height) */
.wall-shade { position: absolute; top: -100%; bottom: -100%; left: -100%; width: calc(100% + var(--split)); background: var(--wall-dark); pointer-events: none; }
.ly { position: absolute; height: auto; display: block; image-rendering: auto; pointer-events: none; }
.viewport.grabbing { cursor: grabbing; }

/* interactive objects */
.obj { cursor: none; pointer-events: auto; transition: transform .35s var(--ease), filter .35s var(--ease); transform-origin: center bottom; }
.viewport:not(.zoomed) .obj:hover,
.viewport:not(.zoomed) .obj:focus-visible { transform: translateY(-1.2%) scale(1.025); filter: drop-shadow(0 1.4vh 1.2vh rgba(40,26,16,.4)); outline: none; }
.viewport.zoomed .obj { pointer-events: none; }
/* the folder/sticky-note overlays lift together with their object on hover.
   computer & board lift WITHOUT the grow so the overlay stays aligned; the overlay's %
   is the object's lift scaled by the height ratio, so both rise the same distance. */
.viewport:not(.zoomed) .screen, .viewport:not(.zoomed) .board-note { pointer-events: none; }   /* let the hover fall through to the object underneath */
.screen, .board-notes { transition: transform .35s var(--ease); transform-origin: center bottom; }
.viewport:not(.zoomed) .obj[data-obj="computer"]:hover,
.viewport:not(.zoomed) .obj[data-obj="computer"]:focus-visible,
.viewport:not(.zoomed) .obj[data-obj="board"]:hover,
.viewport:not(.zoomed) .obj[data-obj="board"]:focus-visible { transform: translateY(-1.2%); }
.viewport:not(.zoomed) .obj[data-obj="computer"]:hover ~ .screen,
.viewport:not(.zoomed) .obj[data-obj="computer"]:focus-visible ~ .screen { transform: translateY(-2.47%); }
.viewport:not(.zoomed) .obj[data-obj="board"]:hover ~ .board-notes,
.viewport:not(.zoomed) .obj[data-obj="board"]:focus-visible ~ .board-notes { transform: translateY(-1.44%); }
/* the desk clock lifts together with its LCD face (vh keeps both pixel-aligned, no scale) */
.viewport:not(.zoomed) .obj[data-obj="clock"]:hover,
.viewport:not(.zoomed) .obj[data-obj="clock"]:focus-visible,
.viewport:not(.zoomed) .obj[data-obj="clock"]:hover ~ .clock-face,
.viewport:not(.zoomed) .obj[data-obj="clock"]:focus-visible ~ .clock-face { transform: translateY(-0.7vh); }

/* the sky behind the window — a live time-of-day gradient (set in JS), with a hills horizon on top */
.sky { position: absolute; left: 27%; top: 5%; width: 38%; height: 56%; overflow: hidden; isolation: isolate;
  --cloud-op: 1;
  background: linear-gradient(to bottom, #3E8BD8 0%, #7CBDEC 46%, #CDE8F8 100%);
  transition: background 2s linear; }
/* the rolling hills + trees sit on the horizon and recolour with the hour */
.sky-land { position: absolute; left: 0; bottom: -1%; width: 100%; height: auto; z-index: 4; pointer-events: none;
  transition: filter 1.6s var(--ease); }
/* a faint starfield that fades in after dusk */
.sky-stars { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity 1.8s var(--ease); }
.sky-stars i { position: absolute; display: block; border-radius: 50%; background: #FBFAF4;
  box-shadow: 0 0 2px rgba(255,255,255,.8); animation: twinkle var(--tw, 3s) ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .2; } to { opacity: 1; } }
.sky-tint { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 5;
  transition: opacity 1.2s var(--ease), background-color 1.2s var(--ease); }
.cloud { position: absolute; left: -30%; width: 24%; height: auto; z-index: 2; opacity: var(--cloud-op, 1); pointer-events: none;
  transition: opacity 1.8s var(--ease);
  animation: cloudDrift var(--dur, 64s) linear infinite; animation-delay: var(--delay, 0s); }
@keyframes cloudDrift { from { left: -30%; } to { left: 114%; } }
.sky-sun { position: absolute; z-index: 3; left: 50%; top: 22%; width: 13%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url('scene/sun.png?v=2') center / contain no-repeat;
  filter: drop-shadow(0 0 0.7vh rgba(255,226,150,.85)) drop-shadow(0 0 2.4vh rgba(255,206,120,.4));
  transition: left .9s var(--ease), top .9s var(--ease); }

/* ---------- monitor desktop: always-on Windows XP ---------- */
.screen { position: absolute; overflow: hidden; cursor: pointer; background: transparent;
  container-type: inline-size; }   /* wallpaper is baked into the monitor image — we only place folders */
.viewport.zoomed .screen { cursor: default; }
.xp-icons { position: absolute; top: 4cqw; right: 7.5cqw; bottom: 3cqw; left: auto;
  display: grid; grid-template-columns: auto auto; align-content: start; justify-content: end; justify-items: center;
  row-gap: 3cqw; column-gap: 2cqw; }
/* two columns: left column = 2 folders, right column = 3 folders */
.xp-folder:nth-child(1) { grid-column: 1; grid-row: 1; }
.xp-folder:nth-child(2) { grid-column: 1; grid-row: 2; }
.xp-folder:nth-child(3) { grid-column: 2; grid-row: 1; }
.xp-folder:nth-child(4) { grid-column: 2; grid-row: 2; }
.xp-folder:nth-child(5) { grid-column: 2; grid-row: 3; }
.xp-folder { display: flex; flex-direction: column; align-items: center; gap: 0.6cqw;
  background: none; border: 0; padding: 0; cursor: pointer; }
.xp-ico { width: 10.5cqw; aspect-ratio: 30 / 24; image-rendering: pixelated;
  background: url('scene/folder.png') center / contain no-repeat;
  filter: drop-shadow(0.35cqw 0.5cqw 0 rgba(0,0,0,.3)); transition: filter .12s; }
.viewport.zoomed .xp-folder:hover .xp-ico { filter: drop-shadow(0.35cqw 0.5cqw 0 rgba(0,0,0,.3)) brightness(1.14); }
.xp-lbl { font-family: 'Tahoma', 'Montserrat', sans-serif; font-weight: 500; font-size: 2.7cqw; line-height: 1.12;
  color: #fff; text-align: center; max-width: 16cqw;   /* narrow like a real folder label → long names wrap to 2 lines */
  text-shadow: 0 0 1px #16356B, 0.3cqw 0.3cqw 0 rgba(0,0,0,.55); padding: 0 0.4cqw; }
.viewport.zoomed .xp-folder:hover .xp-lbl { background: #2A6FD6; border-radius: 0.4cqw; }
.xp-taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 9.5cqw; display: flex;
  align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #4D93ED 0%, #2E73D7 10%, #235FC4 86%, #1B4FAC 100%);
  border-top: 0.6cqw solid #2D5CB2; }
.xp-start { display: flex; align-items: center; height: 100%; padding: 0 3.6cqw 0 2.6cqw;
  font-family: 'Tahoma', sans-serif; font-style: italic; font-weight: 700; font-size: 4.6cqw; color: #fff;
  background: radial-gradient(130% 150% at 28% 26%, #76C976, #3E9D3E 58%, #2C7C2C);
  border-radius: 0 3.2cqw 3.2cqw 0; text-shadow: 0.3cqw 0.3cqw 0 rgba(0,0,0,.4); letter-spacing: 0.15cqw; }
.xp-clock { font-family: 'Tahoma', 'JetBrains Mono', sans-serif; font-size: 3cqw; color: #fff; padding: 0 2.8cqw;
  text-shadow: 0 1px 0 rgba(0,0,0,.35); }

/* ---------- boombox music player ---------- */
#ov-music { background: rgba(20,14,8,0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease), -webkit-backdrop-filter .35s var(--ease); }
#ov-music.show { background: rgba(20,14,8,.4); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.ov__inner.music-player { width: min(440px, 100%); background: linear-gradient(180deg, #3C2E23, #281E16); color: #F3E6CE;
  border-radius: 14px; padding: clamp(20px,4vw,30px); border: 2px solid #5A4632;
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.7), 4px 4px 0 rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,220,160,.06); }
.mp__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.mp__brand { font-family: var(--display); font-weight: 700; letter-spacing: .08em; color: #E8B45A; font-size: 18px; }
.mp__now { font-family: var(--mono); font-size: 11px; color: #C9B896; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp__list { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; }
.mp__song { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 9px;
  background: rgba(255,235,200,.05); cursor: pointer; transition: background .18s, transform .18s; text-align: left; width: 100%; }
.mp__song:hover { background: rgba(255,235,200,.12); transform: translateX(3px); }
.mp__song.is-playing { background: rgba(232,180,90,.18); box-shadow: inset 0 0 0 1px rgba(232,180,90,.5); }
.mp__ic { width: 16px; color: #E8B45A; font-size: 12px; flex: none; }
.mp__name { font-family: var(--serif); font-weight: 600; font-size: 15px; }
.mp__sub { margin-left: auto; font-family: var(--mono); font-size: 10px; color: #9C8C72; }
.mp__bar { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,220,160,.12); }
.mp__btn { width: 40px; height: 34px; border-radius: 8px; background: var(--btn); color: var(--btn-ink); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transform: translateY(0);
  box-shadow: 0 4px 0 var(--btn-ledge), 0 6px 9px rgba(0,0,0,.4);
  transition: transform .06s ease, box-shadow .06s ease, filter .15s; }
.mp__btn:hover { filter: brightness(1.07); }
.mp__btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--btn-ledge), 0 2px 3px rgba(0,0,0,.4); }
.mp__btn--sm { width: 34px; background: #F0D98A; }
.mp__hint { margin-left: auto; color: #9C8C72; }
.mp__vol-ic { font-size: 13px; opacity: .85; }
.mp__vol { -webkit-appearance: none; appearance: none; width: 72px; height: 5px; border-radius: 3px;
  background: rgba(255,235,200,.22); accent-color: #E8B45A; cursor: pointer; }
.mp__vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #E8B45A; cursor: pointer; }
.mp__vol::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #E8B45A; cursor: pointer; }

/* the alarm clock as a little "time machine" — scrub the hour, the whole room follows */
/* centred over the room with a soft blur, like the other overlays */
#ov-clock { background: rgba(14,10,20,0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease), -webkit-backdrop-filter .35s var(--ease); }
#ov-clock.show { background: rgba(14,10,20,.42); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.ov__inner.clock-card { width: min(440px, 100%); background: linear-gradient(180deg, #2E2533, #1A1524); color: #F3E6CE;
  border-radius: 14px; padding: clamp(22px,4vw,32px); border: 2px solid #4A3D52; text-align: center;
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.7), 4px 4px 0 rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,220,160,.06); }
.clock-card .ov__eyebrow { color: #C7A2D6; margin-bottom: 16px; }
.clk-read { margin-top: 6px; margin-bottom: 22px; }
.clk-read b { display: block; font-family: var(--clock); font-weight: 400; font-size: clamp(24px,6vw,38px); color: #8BE08B; letter-spacing: .04em; text-shadow: 0 0 10px rgba(120,255,120,.4); }
.clk-read span { display: block; margin-top: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #C9B8D6; }
.clk-ribbon { position: relative; height: 30px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  background: linear-gradient(to right, #10173A 0%, #10173A 20%, #7A4E86 25%, #C98AA6 28.75%, #9ACBEC 34.2%, #7CBDEC 52%, #8FC4E9 65.8%, #E7A765 72.5%, #B65177 77.9%, #5A3568 81.7%, #10173A 87%, #10173A 100%); }
.clk-slider { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 2; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.clk-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 30px; border-radius: 4px; background: #fff; border: 2px solid rgba(0,0,0,.4); box-shadow: 0 0 9px rgba(255,255,255,.7); cursor: grab; }
.clk-slider::-moz-range-thumb { width: 10px; height: 30px; border-radius: 4px; background: #fff; border: 2px solid rgba(0,0,0,.4); box-shadow: 0 0 9px rgba(255,255,255,.7); cursor: grab; }
/* the "now" marker — a faint white line at the live time; click it to snap back to real time */
.clk-now { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; z-index: 3; padding: 0; border: 0; border-radius: 2px;
  background: rgba(255,255,255,.5); box-shadow: 0 0 4px rgba(255,255,255,.4); cursor: pointer; }
.clk-now::before { content: ''; position: absolute; inset: -3px -7px; }      /* fatter click target than the hairline */
.clk-scale { display: flex; justify-content: space-between; margin-top: 11px; }
.clk-anchor { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .03em; color: #C9B8D6;
  background: none; cursor: pointer; padding: 3px 7px; border-radius: 7px; transition: color .15s, background .15s, transform .1s; }
.clk-anchor:hover { color: #fff; background: rgba(199,162,214,.24); transform: translateY(-1px); }
.clk-anchor:active { transform: scale(.94); }
/* Reset + Save — old-hardware push buttons: they sit on a solid base and press in on click */
.clk-actions { display: flex; justify-content: center; gap: 14px; margin-top: 24px; }
.clk-btn { padding: 12px 26px; border: 0; border-radius: 12px;
  font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer; transform: translateY(0); background: var(--btn); color: var(--btn-ink);
  box-shadow: 0 5px 0 var(--btn-ledge), 0 8px 12px rgba(0,0,0,.4);
  transition: transform .06s ease, box-shadow .06s ease, filter .15s, opacity .2s; }
.clk-btn:hover:not(:disabled) { filter: brightness(1.06); }
.clk-btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 0 0 var(--btn-ledge), 0 2px 4px rgba(0,0,0,.4); }
.clk-btn:disabled { opacity: .3; cursor: default; }
.clk-btn--reset { background: #F0D98A; }   /* a slightly calmer yellow for the secondary action */

/* boombox: a little bounce + pastel notes rising while it plays */
.obj.boom-playing { animation: boomBounce 0.55s ease-in-out infinite; }
@keyframes boomBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2%); } }
.boom-notes { position: absolute; pointer-events: none; z-index: 6; }
.boom-note { position: absolute; bottom: 0; width: 3.4vh; height: auto; image-rendering: auto;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.3)); animation: noteRise 2.4s ease-out forwards; will-change: transform, opacity; }
@keyframes noteRise {
  0%   { transform: translate(0,4px) scale(.45) rotate(0deg); opacity: 0; }
  20%  { opacity: 1; }
  38%  { transform: translate(calc(var(--dx,0) * .35), -60px) scale(1) rotate(calc(var(--r,0deg) * .4)); }
  80%  { opacity: 1; }
  100% { transform: translate(var(--dx,0), -180px) scale(1.05) rotate(var(--r,0deg)); opacity: 0; }
}

/* volume bar — fixed at the bottom-centre, appears while the boombox is playing */
.vol-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px);
  z-index: 62; display: flex; align-items: center; gap: 13px;
  background: var(--warm-ink); color: #F4E2BD; padding: 10px 18px; border-radius: 100px;
  box-shadow: 0 14px 34px -14px rgba(40,26,16,.6);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.vol-bar.on { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.vol-ic { font-family: var(--mono); font-size: 14px; line-height: 1; }
.vol-range { -webkit-appearance: none; appearance: none; width: 150px; height: 4px; border-radius: 100px;
  background: rgba(244,226,189,.28); outline: none; cursor: pointer; }
.vol-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: #F4E2BD; box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: pointer; }
.vol-range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #F4E2BD; cursor: pointer; }
/* a small "now playing" equaliser accent */
.vol-eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.vol-eq i { width: 3px; height: 100%; border-radius: 1px; background: #98F29B; transform: scaleY(.3); transform-origin: bottom;
  box-shadow: 0 0 5px rgba(140,255,150,.7); }
.vol-bar.on .vol-eq i { animation: eqBar .8s ease-in-out infinite; }
.vol-eq i:nth-child(1) { animation-duration: .66s; }
.vol-eq i:nth-child(2) { animation-duration: .90s; animation-delay: .10s; }
.vol-eq i:nth-child(3) { animation-duration: .54s; animation-delay: .05s; }
.vol-eq i:nth-child(4) { animation-duration: .78s; animation-delay: .15s; }
@keyframes eqBar { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* ---------- sketchbook flip-book (two-page spread) ---------- */
#ov-flip { overflow: visible; background: rgba(18,12,7,0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease), -webkit-backdrop-filter .35s var(--ease); }
#ov-flip.show { background: rgba(18,12,7,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.flip__close { position: fixed; top: clamp(16px,4vh,40px); right: clamp(16px,4vw,40px); z-index: 5;
  color: var(--btn-ink); background: var(--btn); padding: 9px 16px; border-radius: 999px; cursor: pointer; font-weight: 700;
  box-shadow: 0 4px 0 var(--btn-ledge), 0 6px 10px rgba(0,0,0,.4); transform: translateY(0);
  transition: transform .06s ease, box-shadow .06s ease, filter .15s; }
.flip__close:hover { filter: brightness(1.07); }
.flip__close:active { transform: translateY(4px); box-shadow: 0 0 0 var(--btn-ledge), 0 2px 4px rgba(0,0,0,.4); }
.fb-wrap { position: relative; width: min(44vw, 300px); aspect-ratio: 750 / 1000; perspective: 2200px; isolation: isolate; }
.fb-stack { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.22,.85,.25,1); }
.fb-stack.open { transform: translateX(50%); }
.fb-sheet { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 1s ease-in-out; }
.fb-sheet.flipped { transform: rotateY(-180deg); }
.fb-face { position: absolute; inset: 0; box-sizing: border-box; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-color: #F1E8D5;                              /* warm paper instead of plain white */
  background-position: center, center; background-size: contain, 150px 150px;
  background-repeat: no-repeat, repeat; background-origin: content-box, padding-box;
  background-blend-mode: normal, multiply;               /* artwork on top; paper grain multiplies onto the page */
  padding: 24px; cursor: pointer; }
.fb-face.front { border-radius: 2px 8px 8px 2px; box-shadow: inset 14px 0 22px -14px rgba(0,0,0,.1), 2px 3px 10px rgba(0,0,0,.16); }
.fb-face.back { transform: rotateY(180deg); border-radius: 8px 2px 2px 8px; box-shadow: inset -14px 0 22px -14px rgba(0,0,0,.1), -2px 3px 10px rgba(0,0,0,.16); }
.fb-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 46px; height: 46px;
  border-radius: 50%; background: var(--btn); border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 5px 0 var(--btn-ledge), 0 7px 10px rgba(0,0,0,.4);
  transition: opacity .2s, transform .08s ease, box-shadow .08s ease, filter .15s; }
.fb-arrow--l { left: -66px; } .fb-arrow--r { right: -66px; }
.fb-wrap.open .fb-arrow--l { left: calc(-50% - 66px); }
.fb-wrap.open .fb-arrow--r { right: calc(-50% - 66px); }
.fb-arrow:hover { filter: brightness(1.07); }
.fb-arrow:active { transform: translateY(calc(-50% + 4px)); box-shadow: 0 0 0 var(--btn-ledge), 0 2px 3px rgba(0,0,0,.4); }
.cal-arrow svg, .fb-arrow svg { stroke: var(--btn-ink); }   /* dark chevrons read on the yellow face */
.fb-arrow.hide { opacity: 0; pointer-events: none; }
@media (max-width: 600px) { .fb-arrow--l, .fb-wrap.open .fb-arrow--l { left: -6px; } .fb-arrow--r, .fb-wrap.open .fb-arrow--r { right: -6px; } }

/* ---- vertical flip-up mode (phones + portrait tablets) ---- */
.fb-wrap.fb-vert { width: min(86vw, 380px); }
/* clip the PAGES (not the coils): flipped pages vanish at the binding line, coils still poke out above */
.fb-wrap.fb-vert .fb-stack { overflow: hidden; perspective: 1500px; transform-style: flat; border-radius: 0 0 8px 8px; }
.fb-wrap.fb-vert .fb-stack.open { transform: none; }              /* single page — no spread shift */
.fb-wrap.fb-vert .fb-sheet { transform-origin: center top; }
.fb-wrap.fb-vert .fb-sheet.flipped { transform: rotateX(180deg); }/* flip up & over the top */
.fb-wrap.fb-vert .fb-face.back { transform: rotateX(180deg); }
.fb-wrap.fb-vert .fb-face.front { border-radius: 3px 3px 10px 10px;
  box-shadow: inset 0 14px 22px -14px rgba(0,0,0,.1), 2px 3px 10px rgba(0,0,0,.16); }
.fb-wrap.fb-vert .fb-face.back { border-radius: 10px 10px 3px 3px; box-shadow: inset 0 -14px 22px -14px rgba(0,0,0,.1), -2px 3px 10px rgba(0,0,0,.16); }
/* both arrows centred below the page */
.fb-wrap.fb-vert .fb-arrow, .fb-wrap.fb-vert.open .fb-arrow { top: 100%; bottom: auto; margin-top: 16px; transform: none; }
.fb-wrap.fb-vert .fb-arrow--l, .fb-wrap.fb-vert.open .fb-arrow--l { left: auto; right: calc(50% + 8px); }
.fb-wrap.fb-vert .fb-arrow--r, .fb-wrap.fb-vert.open .fb-arrow--r { left: calc(50% + 8px); right: auto; }
.fb-wrap.fb-vert .fb-arrow:active { transform: translateY(4px); box-shadow: 0 0 0 var(--btn-ledge), 0 2px 3px rgba(0,0,0,.4); }

/* lamp glow / room light */
.lamp-glow { display: none; }   /* no localized blur on the lamp — lighting is done with the room colour wash */
/* night dim is an <svg> overlay; the dark <rect> inside it is masked by the lamp cone (set in JS) */
.night-dim { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; opacity: 0; pointer-events: none; transition: opacity 1.2s var(--ease); }
.warm-glow { position: fixed; inset: 0; z-index: 41; background: radial-gradient(115% 95% at 50% 14%, rgba(255,210,140,.40), rgba(255,200,116,.22) 58%, rgba(255,194,108,.12) 100%); opacity: 0; pointer-events: none; transition: opacity 1.2s var(--ease); }

/* live clock digits over the alarm-clock LCD */
.clock-face { position: absolute; overflow: hidden; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: transform .35s var(--ease); }
.clock-digits { display: block; font-family: var(--clock); font-weight: 400; color: #8BE08B; letter-spacing: 0; white-space: nowrap; line-height: 1; text-shadow: 0 0 5px rgba(120,255,120,.5); transform: translateY(var(--cdy, 22%)) scaleY(var(--cy, 1)); transform-origin: center; }

/* ---------- HUD ---------- */
.hud { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px clamp(18px,4vw,48px); pointer-events: none; transition: opacity .5s var(--ease); }
.hud__name { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--warm-ink); }
.hud__hint { color: #9A7B47; }
.hud__clock { color: #9A7B47; }
.viewport.zoomed ~ .hud, .viewport.zoomed .hud { opacity: 0; }

/* universal close button — top-right corner of anything that opens */
.ov-x {
  position: fixed; top: clamp(14px,3.2vh,28px); right: clamp(14px,3.2vw,28px); z-index: 80;
  width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 6px; background: #1B2740; color: #EAF0FB;
  box-shadow: 0 5px 0 #0C1322, 0 8px 14px rgba(12,18,34,.34);
  transition: background .15s, color .15s, transform .12s ease, box-shadow .12s ease, opacity .35s var(--ease);
}
.ov-x svg { display: block; pointer-events: none; }
.ov-x:hover { background: #24355A; color: #fff; }
.ov-x:active { transform: translateY(3px); box-shadow: 0 0 0 #0C1322, 0 2px 4px rgba(12,18,34,.34); }
/* #roomClose fades in/out via a JS .show toggle (it lives outside the overlay fade) */
#roomClose { opacity: 0; transform: translateY(-6px); pointer-events: none; }
#roomClose.show { opacity: 1; transform: none; pointer-events: auto; }
#roomClose.show:active { transform: translateY(3px); }
/* inline variant — sits in the top-right corner of the card itself */
.ov-x--in { position: absolute; top: 12px; right: 12px; z-index: 6; width: 38px; height: 38px; border-radius: 6px; }
.ov-x--in:active { transform: translateY(3px); }
.ov-x--in svg { width: 15px; height: 15px; }
/* flipbook: pin the × to the top-right corner of the (right) page, not the spine */
#ov-flip .ov-x--in { top: 8px; right: 8px; }
#ov-flip .fb-wrap.open .ov-x--in { right: calc(-50% + 8px); }   /* open spread → out to the right page's corner */


/* ---------- overlays ---------- */
.ov {
  position: fixed; inset: 0; z-index: 65; display: flex; align-items: center; justify-content: center;
  padding: clamp(20px,5vw,80px); opacity: 0; pointer-events: none;
  background: rgba(16,22,34,.34); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  transition: opacity .28s var(--ease);
}
.ov.show { opacity: 1; pointer-events: auto; }   /* opacity instant; the card animates via transform */
.ov__inner {
  position: relative;
  width: min(880px, 100%); max-height: 84vh; overflow-y: auto;
  background: #FBF4E6; border-radius: 18px; padding: clamp(26px,4vw,52px);
  box-shadow: 0 40px 90px -30px rgba(74,58,42,.6), 0 0 0 1px rgba(74,58,42,.08);
  transform: translateY(24px) scale(.97); transition: transform .55s var(--ease);
}
.ov.show .ov__inner { transform: none; }
.ov__eyebrow { color: #B08A4E; margin-bottom: 10px; }
.ov__title { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; font-size: clamp(22px,2.6vw,34px); color: var(--warm-ink); }
.ov__more { display: inline-block; margin-top: 24px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.ov__more:hover { text-decoration: underline; }

/* folder files */
.files { margin-top: 26px; display: grid; gap: 12px; }
.file {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 16px;
  padding: 18px 22px; background: #FFFDF7; border-radius: 12px; border: 1px solid #EADCBE;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.file:hover { transform: translateX(6px); background: #fff; box-shadow: 0 14px 30px -16px rgba(74,58,42,.4); }
.file__no { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.file__name { font-family: var(--display); font-weight: 600; font-size: clamp(18px,2.2vw,26px); color: var(--warm-ink); }
.file__tag { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* ---------- pixel post-it notes ON the cork board (live in the stage, zoom with it) ---------- */
.board-notes { position: absolute; pointer-events: none; }
.board-note {
  position: absolute;
  left: calc(var(--x, 0) * 100%); top: calc(var(--y, 0) * 100%);
  width: calc(var(--w, 0.22) * 100%); aspect-ratio: 1 / 1;
  pointer-events: auto; touch-action: none;
  background: transparent center/cover no-repeat;   /* square sticky-note sprite set inline */
  image-rendering: pixelated; border-radius: 0;
  padding: 1.5em 0.9em 0.9em 1em; font-size: clamp(5px, 0.62vw, 11px);
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(2px 3px 0 rgba(60,44,28,.34));
  display: flex; flex-direction: column; gap: 0.45em;
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.viewport.zoomed .board-note { cursor: grab; }
.viewport.zoomed .board-note:hover { filter: drop-shadow(3px 4px 0 rgba(60,44,28,.42)) brightness(1.05); z-index: 6; transform: rotate(var(--r, 0deg)) scale(1.06); }
.board-note.dragging { cursor: grabbing; z-index: 8; filter: drop-shadow(5px 7px 0 rgba(60,44,28,.4)) brightness(1.06); transition: filter .12s; }
.bn-pin {                                   /* pixel pushpin sprite */
  position: absolute; top: -11%; left: 50%; transform: translateX(-50%);
  width: 22%; aspect-ratio: 1;
  background: center/contain no-repeat; image-rendering: pixelated;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.3));
}
.bn-hand { font-family: 'Caveat', cursive; font-weight: 600; font-size: 1.15em; line-height: 1.1; color: #5A4632; overflow: hidden;
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
.bn-name { font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.25em; line-height: 1; color: #4A3A2A; margin-top: auto; text-align: right; overflow: hidden; white-space: nowrap; }

/* enlarged single note (modal) */
.note-card { position: relative; width: min(680px, 93vw); min-height: min(46vh, 320px); max-height: 88vh; overflow-y: auto;
  background: center / 100% 100% no-repeat url('scene/testimonial-page.webp?v=1'); border-radius: 0;
  padding: 8.5% 9.5% 9% 11%; display: flex; flex-direction: column; justify-content: center; }
.note-card blockquote { font-family: var(--serif); font-weight: 500; font-size: clamp(13px,1.4vw,17px); line-height: 1.45; color: #4A3A2A; }
.note-by { margin-top: 3.5%; display: flex; flex-direction: column; gap: 2px; }
.note-name { font-family: var(--display); font-weight: 700; font-size: clamp(12px,1.5vw,16px); color: #3A2D1E; }
.note-role { font-family: var(--mono); font-size: clamp(8px,1vw,10px); text-transform: uppercase; letter-spacing: .06em; color: #8A7350; }
/* expanded note blurs the room behind it */
#ov-note { background: rgba(26,17,9,0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); transition: background .35s var(--ease), backdrop-filter .35s var(--ease), -webkit-backdrop-filter .35s var(--ease); }
#ov-note.show { background: rgba(26,17,9,0.34); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.note-card { filter: drop-shadow(0 22px 38px rgba(0,0,0,.5)); }
/* the board reads as one entity: flip between testimonials without leaving */
.note-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.note-nav { display: flex; align-items: center; gap: 18px; }
.note-count { font-family: var(--mono); font-weight: 700; font-size: 18px; letter-spacing: .1em; color: rgba(255,255,255,.8); min-width: 64px; text-align: center; }
.note-arrow { width: 46px; height: 46px; border-radius: 50%; background: var(--btn); color: var(--btn-ink); border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transform: translateY(0);
  box-shadow: 0 5px 0 var(--btn-ledge), 0 7px 10px rgba(0,0,0,.4);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s; }
.note-arrow svg { stroke: var(--btn-ink); }
.note-arrow:hover { filter: brightness(1.07); }
.note-arrow:active { transform: translateY(5px); box-shadow: 0 0 0 var(--btn-ledge), 0 2px 4px rgba(0,0,0,.4); }
.note-card { transition: opacity .2s var(--ease), transform .2s var(--ease); }
.note-card.swapping { opacity: 0; transform: translateY(10px); }   /* fade+lift out, swap text while hidden, fade back in */

/* work overlay = a screen */
.ov__inner.screen { background: #232C44; border: 6px solid #11162a; box-shadow: 0 40px 90px -30px rgba(10,14,34,.7), inset 0 0 60px rgba(0,0,0,.3); }
.ov__inner.screen .ov__eyebrow { color: #8FA4D6; }
.ov__inner.screen .ov__title { color: #EAF0FF; }

/* switch pulse — subtle hint that the switch is interactive when it gets dark */
.obj.pulse { animation: swpulse 1.3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes swpulse { 0%,100%{ filter: drop-shadow(0 0 0 rgba(255,210,90,0)); } 50%{ filter: drop-shadow(0 0 12px rgba(255,210,90,.9)); } }

/* about / contact */
.about-card { display: flex; gap: clamp(22px,3.4vw,46px); align-items: stretch; width: min(960px,100%); }
.about-text { flex: 1 1 56%; min-width: 0; }
.about-card .about-lead { margin-top: 18px; font-size: clamp(15px,1.6vw,19px); font-weight: 500; line-height: 1.45; color: var(--warm-ink); }
.about-card .hl { color: var(--accent); }
.about-card .about-body { margin-top: 14px; font-size: clamp(13px,1.15vw,14.5px); color: #6E5F4A; line-height: 1.6; max-width: 56ch; }
/* portrait carousel on the right — framed as a Polaroid */
.about-gallery { flex: none; width: clamp(170px,26%,230px); display: flex; flex-direction: column; gap: 16px; align-self: center; }
.ag-polaroid { position: relative; background: #fcfbf6; padding: 11px 11px 42px; border-radius: 3px;
  box-shadow: 0 24px 44px -16px rgba(12,18,34,.5), 0 3px 9px rgba(0,0,0,.16); transform: rotate(-2deg); }
.ag-frame { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 1px;
  background: #11162a; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); touch-action: pan-y; }
.ag-track { display: flex; height: 100%; transition: transform .55s var(--ease); will-change: transform; }
.ag-slide { flex: 0 0 100%; width: 100%; height: 100%; }
.ag-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-ph { display: grid; place-items: center; background: linear-gradient(140deg, #2c3960, #1a2238); }
.ag-ph span { font-family: var(--display); font-weight: 700; font-size: 30px; color: rgba(255,255,255,.32);
  width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); }
.ag-cap { position: absolute; left: 0; right: 0; bottom: 11px; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 13px; color: #3a3934; opacity: .82; }
.ag-dots { display: flex; gap: 7px; justify-content: center; }
.ag-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(28,36,64,.26); transition: background .2s, transform .2s; }
.ag-dot.on { background: #1B2740; transform: scale(1.3); }
@media (max-width: 640px) {
  .about-card { flex-direction: column; }
  .about-gallery { width: min(220px,68%); align-self: center; order: -1; }
}
.contact-sub { margin-top: 18px; color: #6E5F4A; line-height: 1.5; max-width: 46ch; }
.contact-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; }
.c-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 22px; border-radius: 100px; background: var(--warm-ink); color: #F4E2BD; font-family: var(--mono); font-size: 13px; letter-spacing: .02em; transition: transform .25s var(--ease), background .3s; }
.c-btn:hover { transform: translateY(-2px); background: var(--accent); }
.c-copy { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }

/* contact — the Nokia phone with a little menu on its LCD */
#ov-contact { background: rgba(16,12,8,0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease), -webkit-backdrop-filter .35s var(--ease); }
#ov-contact.show { background: rgba(16,12,8,.5); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.ov__inner.phone-card { width: auto; max-height: none; overflow: visible; background: none;
  border-radius: 0; padding: 0; box-shadow: none; position: relative; display: inline-block; }
.phone-img { display: block; height: min(86vh, 760px); width: auto; image-rendering: pixelated;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)); }
/* the menu sits inset on the grey LCD as boxed rows, like an old Nokia menu */
.phone-screen { position: absolute; left: 17%; top: 28%; width: 66%; height: 18.5%;
  container-type: inline-size; color: #1c2916;
  padding: 0 10px;                      /* pull the content in from the LCD edges */
  display: flex; flex-direction: column; }
/* top status bar — signal "tower" + battery, like an old Nokia */
.phone-status { display: flex; align-items: center; justify-content: space-between;
  height: 22%; padding: 0 1cqw 1.6cqw; }
.phone-signal { display: flex; align-items: flex-end; gap: 1cqw; height: 78%; }
.phone-signal i { width: 2.2cqw; background: currentColor; }
.phone-signal i:nth-child(1) { height: 40%; }
.phone-signal i:nth-child(2) { height: 62%; }
.phone-signal i:nth-child(3) { height: 82%; }
.phone-signal i:nth-child(4) { height: 100%; }
.phone-batt { position: relative; display: flex; align-items: center; gap: 1.1cqw; height: 64%;
  padding: 0 1.6cqw; border: 0.9cqw solid currentColor; border-radius: 0.8cqw; }
.phone-batt::after { content: ''; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  width: 1.4cqw; height: 48%; background: currentColor; border-radius: 0 0.8cqw 0.8cqw 0; }
.phone-batt i { width: 2.4cqw; height: 56%; background: currentColor; }
/* menu list — divider lines, big text, tight rows (no boxes) */
.phone-menu { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.phone-opt { flex: 1; min-height: 0; display: flex; align-items: center; gap: 3cqw;
  font-family: var(--mono); font-weight: 700; font-size: 9.6cqw; line-height: 1; letter-spacing: .01em;
  color: inherit; background: transparent; border: 0; border-top: 0.7cqw solid rgba(28,40,22,.45);
  padding: 0 1.5cqw; text-decoration: none; cursor: pointer; overflow: hidden;
  transition: background .12s, color .12s; }
.phone-opt:hover, .phone-opt:focus-visible { background: #1c2916; color: #c6ecb9; outline: none; }
.phone-opt__num { flex: 0 0 auto; }
.phone-opt__lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* wall calendar → book a meeting */
#ov-calendar { background: rgba(16,12,8,0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease), -webkit-backdrop-filter .35s var(--ease); }
#ov-calendar.show { background: rgba(16,12,8,.5); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
/* the month sits on a portrait paper page; arrows go below it (flip-book style) */
.ov__inner.cal-card { width: auto; max-height: none; overflow: visible; background: none; border-radius: 0;
  padding: 0; box-shadow: none; display: flex; flex-direction: column; align-items: center; }
.cal-page { position: relative; width: min(360px, 86vw); aspect-ratio: 916 / 1136;
  background: center / 100% 100% no-repeat url('scene/portrait-page.webp?v=1');
  filter: drop-shadow(0 22px 38px rgba(0,0,0,.5)); padding: 13% 11% 13.5% 11%;
  display: flex; flex-direction: column; justify-content: center; }
.cal-cap { font-family: var(--display); font-weight: 700; font-size: clamp(20px,4.6vw,26px); line-height: 1.15;
  letter-spacing: -.01em; color: var(--warm-ink); text-align: center; margin-bottom: 64px; }
.cal-month { transform-origin: top center; }
.cal-month.flip { animation: calFlip .34s var(--ease); }
@keyframes calFlip { from { transform: perspective(700px) rotateX(-50deg); opacity: .25; } to { transform: none; opacity: 1; } }
.cal-mh { font-family: var(--mono); font-weight: 600; font-size: clamp(11px,2.8vw,13px); text-transform: uppercase; letter-spacing: .16em; color: #A8997A; text-align: center; margin-bottom: 12px; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 5px; }
.cal-dow span { text-align: center; font-family: var(--mono); font-size: clamp(9px,2.4vw,11px); letter-spacing: .02em; color: #A8997A; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px 3px; }
.cal-day, .cal-pad { aspect-ratio: 0.95; }
.cal-day { display: flex; align-items: center; justify-content: center; font-family: var(--mono);
  font-size: clamp(13px,1.7vw,15px); color: var(--warm-ink); background: rgba(74,58,42,.06); border: 0;
  border-radius: 7px; cursor: pointer; transition: background .15s, color .15s, transform .1s; }
.cal-day:hover, .cal-day:focus-visible { background: var(--accent); color: #fff; outline: none; transform: translateY(-1px); }
.cal-day.is-past { background: transparent; color: #D2C7AC; cursor: default; }
/* prev / next month arrows, centred below the page (flip-book style) */
.cal-nav { display: flex; justify-content: center; gap: 16px; margin-top: 22px; }
.cal-arrow { width: 46px; height: 46px; border-radius: 50%; background: var(--btn); color: var(--btn-ink); border: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transform: translateY(0);
  box-shadow: 0 5px 0 var(--btn-ledge), 0 7px 10px rgba(0,0,0,.4);
  transition: opacity .2s, transform .08s ease, box-shadow .08s ease, filter .15s; }
.cal-arrow:hover:not(:disabled) { filter: brightness(1.07); }
.cal-arrow:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 0 0 var(--btn-ledge), 0 2px 4px rgba(0,0,0,.4); }
.cal-arrow:disabled { opacity: .3; pointer-events: none; box-shadow: 0 5px 0 var(--btn-ledge); }

/* plant toast */
.toast { position: fixed; left: 50%; bottom: clamp(40px,7vh,64px); transform: translateX(-50%) translateY(16px); z-index: 80;
  background: #FAFBFC; color: #1C2430; padding: 18px 34px; border-radius: 12px;
  box-shadow: 0 36px 90px -34px rgba(28,36,48,.42), 0 0 0 1px rgba(28,36,48,.08);
  font-family: var(--display); font-weight: 600; font-size: clamp(15px,1.7vw,18px); letter-spacing: 0; white-space: nowrap;
  opacity: 0; transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

#fx { position: fixed; inset: 0; z-index: 75; pointer-events: none; }

/* ---------- mobile: scale stays via slice; HUD smaller ---------- */
@media (max-width: 640px) {
  .hud__hint { display: none; }
  .ov__inner { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .camera, .ov, .ov__inner, .obj { transition-duration: .01ms; }
  .obj-floaty, .bird { animation: none; }
}

/* ===================================================================
   Neutral "case-study" skin for the room's pop-up interactions only.
   Light off-white paper, neutral ink/gray type, dark buttons — no warm
   browns/golds/purples. Room art + case-study pages are untouched.
   =================================================================== */
.ov { --btn: #1C2430; --btn-ledge: #0E141E; --btn-ink: #ffffff; }
.ov__inner,
.ov__inner.music-player,
.ov__inner.clock-card {
  background: #FAFBFC; color: #1C2430; border-radius: 8px;
  box-shadow: 0 36px 90px -34px rgba(28,36,48,.42), 0 0 0 1px rgba(28,36,48,.08);
}
.ov__eyebrow, .clock-card .ov__eyebrow { color: #8A909C; }
.ov__title { color: #1C2430; }
.ov__more, .ov__more:hover { color: #1C2430; }
/* music player */
.mp__brand, .mp__ic, .mp__name { color: #1C2430; }
.mp__now, .mp__sub, .mp__hint { color: #8A909C; }
.mp__song:hover { background: rgba(28,36,48,.06); }
.mp__song.is-playing { background: rgba(28,36,48,.07); box-shadow: inset 0 0 0 1px rgba(28,36,48,.16); }
.mp__btn--sm { background: #5B6472; }
.mp__vol::-webkit-slider-thumb { background: #1C2430; }
.mp__vol::-moz-range-thumb { background: #1C2430; }
/* time machine (clock) */
.clk-read b { font-family: var(--clock); font-weight: 400; color: #1C2430; text-shadow: none; font-size: clamp(20px,4.4vw,28px); letter-spacing: .03em; }
.clk-anchor { color: #8A909C; }
.clk-anchor:hover { color: #1C2430; background: rgba(28,36,48,.08); }
.clk-btn--reset { background: #5B6472; }
/* testimonials */
.note-card blockquote, .note-name { color: #1C2430; }
.note-role { color: #8A909C; }
.note-count { color: rgba(255,255,255,.8); }   /* sits on the blurred backdrop, not the card */
/* about / contact / calendar */
.about-card .about-lead, .cal-mh, .cal-cap { color: #1C2430; }
.about-card .hl { color: #5B6472; }
.about-card .about-body, .contact-sub { color: #5B6472; }
.cal-dow span { color: #8A909C; }
/* calendar page → the same clean card as the testimonial note (drop the painted parchment) */
.cal-page { background: #FAFBFC; border-radius: 8px; aspect-ratio: auto; height: auto;
  padding: clamp(30px,5vw,44px) clamp(22px,5vw,34px);
  box-shadow: 0 36px 90px -34px rgba(28,36,48,.42), 0 0 0 1px rgba(28,36,48,.08); }
.cal-mh { color: #8A909C; }
.cal-day { color: #1C2430; background: rgba(28,36,48,.05); }
.cal-day.is-past { background: transparent; color: #C7CBD2; }

/* cursor pet (dog.js) — sizing/transform is handled inline in the script */

/* =================================================================
   Unified buttons — rectangular dark-navy push-buttons matching the
   case-study .cs-back. Nothing round/pill/circular anywhere.
   ================================================================= */
.zoom-back, .note-arrow, .cal-arrow, .fb-arrow, .mp__btn, .clk-btn {
  border-radius: 4px;
  background: #1B2740; color: #EAF0FB;
  box-shadow: 0 5px 0 #0C1322, 0 8px 14px rgba(12,18,34,.34);
}
.zoom-back:hover, .note-arrow:hover, .cal-arrow:hover, .fb-arrow:hover,
.mp__btn:hover, .clk-btn:hover:not(:disabled) { background: #24355A; color: #fff; filter: none; }
.zoom-back:active, .note-arrow:active, .cal-arrow:active, .fb-arrow:active,
.mp__btn:active, .clk-btn:active:not(:disabled) { box-shadow: 0 0 0 #0C1322, 0 2px 4px rgba(12,18,34,.34); }
.note-arrow svg, .cal-arrow svg, .fb-arrow svg { stroke: #EAF0FB; }
.mp__btn--sm, .clk-btn--reset { background: #2C3C5C; }      /* secondary action — still navy + rectangular */
/* floating volume bar + sliders → square, navy */
.vol-bar { border-radius: 4px; background: #1B2740; color: #EAF0FB; }
.vol-range, .mp__vol { border-radius: 2px; }
.vol-range::-webkit-slider-thumb, .mp__vol::-webkit-slider-thumb { border-radius: 1px; }
.vol-range::-moz-range-thumb, .mp__vol::-moz-range-thumb { border-radius: 1px; }
.cal-day { border-radius: 2px; }
/* cards: crisp rectangular corners like the case study */
.ov__inner, .ov__inner.music-player, .ov__inner.clock-card, .note-card, .cal-page, .toast { border-radius: 4px; }