@font-face {
  font-family: "Hand of Jen";
  src: url("fonts/hand-of-jen.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --ink: #1a1a1a;
  --muted: #9a9a9a;
  --faint: #e6e6e6;
  --dot: #1a1a1a;
  --dot-empty: #e0e0e0;
  --accent: #002FA7; /* Klein blue for meters, prices, hearts */
  --sidebar-w: 236px;
  --hand: "Hand of Jen", "SF Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }

body {
  font-family: var(--hand);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- sidebar ---------- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg);
  z-index: 10;
}
.brand { line-height: 1.25; }
.site-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.byline { color: var(--muted); }
.byline a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--faint); }
.byline a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.search-wrap {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--ink); padding-bottom: 6px;
}
.search-icon { color: var(--muted); font-size: 12px; }
#search { border: 0; outline: 0; width: 100%; font: inherit; color: var(--ink); background: transparent; }
#search::placeholder { color: var(--muted); }

.filter-group { border-top: 1px solid var(--faint); padding-top: 12px; }
.group-toggle {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  border: 0; background: none; font: inherit; color: var(--ink);
  cursor: pointer; padding: 0; text-align: left;
}
.group-title { font-weight: 700; }
.group-value { color: var(--muted); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.group-chev { color: var(--muted); width: 10px; text-align: center; }
.group-chev::before { content: "+"; }
.filter-group.open .group-chev::before { content: "\2013"; }
.filter-list { list-style: none; }
.filter-group:not(.open) .filter-list { display: none; }
.filter-group .filter-list { margin-top: 8px; }
.filter-list li { margin-bottom: 3px; }
.filter-btn, .sort-btn {
  border: 0; background: none; font: inherit; color: var(--muted);
  cursor: pointer; padding: 0; text-align: left;
}
.filter-btn:hover, .sort-btn:hover { color: var(--ink); }
.filter-btn.is-active, .sort-btn.is-active { color: var(--ink); }

.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.count { color: var(--muted); }

/* ---------- grid ---------- */
.grid {
  margin-left: var(--sidebar-w);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  padding: 28px 40px 90px;
  column-gap: 24px;
  row-gap: 28px;
}

.chair {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.chair-img-wrap {
  position: relative;
  height: 260px; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.chair-img-wrap .chair-photo {
  max-width: 88%; max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ---------- sit-test motion personalities ----------
   Hover (or focus, or the ~20s idle "breath") plays each chair's signature
   move — an invisible sitter testing the chair. Transform origins sit at the
   seat per personality; data.js motionOrigin overrides outliers. Every squash
   pairs with a shadow deepen so it reads as weight, not distortion. */
[data-motion="squish"] .chair-photo,
[data-motion="settle"] .chair-photo { transform-origin: 50% 78%; }
[data-motion="rock"] .chair-photo { transform-origin: 50% 100%; }
[data-motion="swivel"] .chair-photo { transform-origin: 50% 60%; perspective: 600px; }
[data-motion="recline"] .chair-photo { transform-origin: 50% 85%; }

@media (prefers-reduced-motion: no-preference) {
  [data-motion="squish"]:hover .chair-photo,
  [data-motion="squish"].sit .chair-photo { animation: sit-squish 700ms cubic-bezier(0.3, 1.4, 0.4, 1); }
  [data-motion="rock"]:hover .chair-photo,
  [data-motion="rock"].sit .chair-photo { animation: sit-rock 1100ms ease-in-out; }
  [data-motion="swivel"]:hover .chair-photo,
  [data-motion="swivel"].sit .chair-photo { animation: sit-swivel 950ms ease-in-out; }
  [data-motion="recline"]:hover .chair-photo,
  [data-motion="recline"].sit .chair-photo { animation: sit-recline 900ms ease-in-out; }
  [data-motion="settle"]:hover .chair-photo,
  [data-motion="settle"].sit .chair-photo { animation: sit-settle 650ms ease-out; }

  /* idle breath: same personality, half amplitude, slower */
  [data-motion="squish"].breath .chair-photo { animation: breath-squish 1600ms ease-in-out; }
  [data-motion="rock"].breath .chair-photo { animation: breath-rock 2200ms ease-in-out; }
  [data-motion="swivel"].breath .chair-photo { animation: breath-swivel 2000ms ease-in-out; }
  [data-motion="recline"].breath .chair-photo { animation: breath-recline 2000ms ease-in-out; }
  [data-motion="settle"].breath .chair-photo { animation: breath-settle 1600ms ease-in-out; }
}

@keyframes sit-squish {
  0% { transform: none; }
  35% { transform: scaleY(0.93) scaleX(1.035); filter: drop-shadow(0 7px 9px rgba(0,0,0,0.16)); }
  65% { transform: scaleY(1.015) scaleX(0.995); }
  100% { transform: none; }
}
@keyframes sit-rock {
  0% { transform: none; }
  25% { transform: rotate(-2.4deg); filter: drop-shadow(0 5px 7px rgba(0,0,0,0.12)); }
  55% { transform: rotate(1.7deg); }
  80% { transform: rotate(-0.7deg); }
  100% { transform: none; }
}
@keyframes sit-swivel {
  0% { transform: perspective(600px); }
  35% { transform: perspective(600px) rotateY(-11deg); filter: drop-shadow(0 5px 7px rgba(0,0,0,0.12)); }
  70% { transform: perspective(600px) rotateY(4deg); }
  100% { transform: perspective(600px); }
}
@keyframes sit-recline {
  0% { transform: none; }
  40% { transform: rotate(-2.6deg) translateY(1%); filter: drop-shadow(0 6px 8px rgba(0,0,0,0.14)); }
  75% { transform: rotate(0.5deg); }
  100% { transform: none; }
}
@keyframes sit-settle {
  0% { transform: none; }
  40% { transform: scaleY(0.975); filter: drop-shadow(0 5px 7px rgba(0,0,0,0.14)); }
  100% { transform: none; }
}

@keyframes breath-squish {
  0%, 100% { transform: none; }
  50% { transform: scaleY(0.965) scaleX(1.017); filter: drop-shadow(0 5px 7px rgba(0,0,0,0.1)); }
}
@keyframes breath-rock {
  0%, 100% { transform: none; }
  30% { transform: rotate(-1.2deg); }
  70% { transform: rotate(0.8deg); }
}
@keyframes breath-swivel {
  0%, 100% { transform: perspective(600px); }
  50% { transform: perspective(600px) rotateY(-5deg); }
}
@keyframes breath-recline {
  0%, 100% { transform: none; }
  50% { transform: rotate(-1.3deg); }
}
@keyframes breath-settle {
  0%, 100% { transform: none; }
  50% { transform: scaleY(0.988); filter: drop-shadow(0 4px 6px rgba(0,0,0,0.08)); }
}

/* ---------- the room ---------- */
.room {
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg);
}
.room[hidden] { display: none; }
.room-back {
  position: absolute; top: 6px; left: 22px; z-index: 60;
  border: 0; background: none; font: inherit; color: rgba(58,32,10,0.65);
  cursor: pointer; padding: 4px 8px;
}
.room-back:hover { color: var(--ink); }
.room-scene { position: absolute; inset: 0; overflow: hidden; }

/* ---- Maybeck shell: amber plaster, redwood, beamed ceiling ---- */
/* fractal-noise textures (SVG feTurbulence) multiply-blended for realism */
:root {
  --grain-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.28 0.012' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0.55 0.55 0 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  --grain-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.28' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0.55 0.55 0 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  --stone-tx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09' numOctaves='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0.5 0.5 0 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23s)' opacity='0.5'/%3E%3C/svg%3E");
  --plaster-tx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0.18 0.18 0 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23p)' opacity='0.4'/%3E%3C/svg%3E");
  /* broad troweled-concrete cloudiness (low freq) + fine grit */
  --concrete-tx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.015' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.42 0.42 0.42 0 0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23c)' opacity='0.5'/%3E%3C/svg%3E");
  --concrete-grit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='cg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0.14 0.14 0 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23cg)' opacity='0.4'/%3E%3C/svg%3E");
  /* rough raw-stone (chunky, higher contrast) for the hearth plinth */
  --rawstone-tx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03 0.06' numOctaves='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.62 0.62 0.62 0 0'/%3E%3C/filter%3E%3Crect width='300' height='200' filter='url(%23r)' opacity='0.6'/%3E%3C/svg%3E");
}
.room-scene { background: #c99a55; }
.room-wall {
  position: absolute; left: 0; right: 0; top: 17%; height: 35.2%;
  background:
    var(--plaster-tx),
    radial-gradient(120% 90% at 50% 10%, rgba(255,214,140,0.35), rgba(0,0,0,0) 60%),
    linear-gradient(#d9a75f, #b97f3c);
  background-blend-mode: multiply, normal, normal;
  z-index: 0;
}
.room-ceiling {
  position: absolute; left: 0; right: 0; top: 0; height: 17%;
  background: var(--plaster-tx), linear-gradient(#f4e9d2, #ecdcbb);
  background-blend-mode: multiply, normal;
  z-index: 2;
}
.beam {
  position: absolute; left: 0; right: 0;
  background: linear-gradient(rgba(58,26,11,0.34), rgba(40,19,8,0.5)), url("assets/tex/redwood.jpg");
  background-size: auto, 240px auto;
  background-blend-mode: multiply, normal;
  box-shadow: 0 3px 6px rgba(50,25,8,0.45);
}
.beam-a { top: 24%; height: 13%; }
.beam-b { bottom: 0; height: 24%; }
.cove-glow {
  position: absolute; left: 0; right: 0; bottom: 24%; height: 18px;
  background: linear-gradient(rgba(255,190,90,0), rgba(255,186,80,0.6));
  filter: blur(2px);
}
.picture-rail {
  position: absolute; left: 0; right: 0; top: 26%; height: 9px;
  background: linear-gradient(rgba(58,26,11,0.34), rgba(40,19,8,0.5)), url("assets/tex/redwood.jpg");
  background-size: auto, 240px auto;
  background-blend-mode: multiply, normal;
  box-shadow: 0 2px 4px rgba(50,25,8,0.35);
  z-index: 1;
}
.wainscot {
  position: absolute; left: 0; right: 0; top: 40%; height: 12.4%;
  background: linear-gradient(rgba(62,28,12,0.28), rgba(44,20,9,0.42)), url("assets/tex/redwood.jpg");
  background-size: auto, 300px auto;
  background-blend-mode: multiply, normal;
  border-top: 3px solid #4e2c12;
  z-index: 1;
}
.room-floorline {
  position: absolute; left: 0; right: 0; top: 52.3%;
  border-top: 2px solid rgba(50,25,8,0.6);
  z-index: 1;
}
/* warm honey-oak floor — real plank photo with a soft sun sheen */
.room-floor {
  position: absolute; left: 0; right: 0; top: 52.4%; bottom: 0;
  background:
    radial-gradient(60% 70% at 24% 16%, rgba(255,228,158,0.32), rgba(0,0,0,0) 58%),
    linear-gradient(rgba(196,138,78,0.14), rgba(150,98,52,0.24)),
    url("assets/tex/floor.jpg");
  background-size: auto, auto, 560px auto;
  background-blend-mode: screen, multiply, normal;
  z-index: 0;
}
/* Nordic Knots "Modern Milano" in green: olive field, thin black grid,
   white squares on the intersections — SVG tile so it stays crisp */
.room-rug {
  position: absolute; left: 26%; width: 48%; top: 57%; height: 35%;
  padding: 0;
  background-color: #7c8130;
  background-image:
    url("assets/tex/wool.jpg"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='%236f7426'/%3E%3Cpath d='M0 0.5H120M0.5 0V120' stroke='%2323231a' stroke-width='1.6'/%3E%3Crect x='-6' y='-6' width='12' height='12' fill='%23f2efe6'/%3E%3Crect x='114' y='-6' width='12' height='12' fill='%23f2efe6'/%3E%3Crect x='-6' y='114' width='12' height='12' fill='%23f2efe6'/%3E%3Crect x='114' y='114' width='12' height='12' fill='%23f2efe6'/%3E%3C/svg%3E");
  background-size: 300px 300px, 120px 120px;
  background-clip: border-box, content-box;
  background-blend-mode: soft-light, normal;
  box-shadow: 0 8px 22px rgba(60,25,8,0.3);
  transform: perspective(620px) rotateX(50deg);
  transform-origin: top center;
  z-index: 1;
}
/* rug micro-interaction: a soft SQUASH & STRETCH settle when a chair lands. */
.room-rug.settle { animation: rug-settle 480ms ease-out; }
@keyframes rug-settle {
  0%   { transform: perspective(620px) rotateX(50deg) scale(1, 1); }
  35%  { transform: perspective(620px) rotateX(50deg) scale(1.014, 0.982); }
  70%  { transform: perspective(620px) rotateX(50deg) scale(0.997, 1.006); }
  100% { transform: perspective(620px) rotateX(50deg) scale(1, 1); }
}

/* maker credits — appear on hover, link to the real pieces */
.credit {
  position: absolute; z-index: 60;
  font: inherit; font-size: 13px; color: var(--ink);
  background: rgba(255,255,252,0.92);
  border: 1px solid rgba(50,30,10,0.25); border-radius: 999px;
  padding: 3px 12px; text-decoration: none; white-space: nowrap;
  opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.credit:hover { color: var(--accent); }
.credit-lamp { left: 50%; bottom: -12%; transform: translateX(-50%) translateY(4px); }
.room-pendant:hover .credit-lamp { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
/* upright floating tag near the rug (sibling of .room-rug, not on the floor) */
.credit-rug { left: 50%; top: 66%; transform: translateX(-50%) translateY(6px); }
.room-rug:hover ~ .credit-rug,
.credit-rug:hover { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
/* sunlight falling from the window onto the floor */
.room-sunlight {
  position: absolute; left: 3%; top: 53%; width: 32%; height: 36%;
  background: linear-gradient(rgba(255,206,120,0.38), rgba(255,206,120,0));
  transform: skewX(-20deg);
  z-index: 1; pointer-events: none;
  transition: opacity 2s ease;
}
.room-scene[data-sky="night"] .room-sunlight { opacity: 0; }

/* wood-latticed windows looking into the oaks */
.room-window {
  position: absolute; left: 4%; top: 20%; width: 25%; height: 32.3%;
  border: 7px solid #5f3a22;
  box-shadow: inset 0 0 14px rgba(30,15,5,0.4), 0 3px 8px rgba(50,25,8,0.3);
  overflow: hidden; z-index: 2; background: #fff;
}
.room-window-r { left: 72%; width: 16%; }
.muntins {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, #5f3a22 0 4px, rgba(0,0,0,0) 4px calc(33.33% - 1px)),
    repeating-linear-gradient(180deg, #5f3a22 0 4px, rgba(0,0,0,0) 4px calc(25% - 1px)),
    linear-gradient(115deg, rgba(255,255,255,0.16) 0 28%, rgba(255,255,255,0) 34%);
}
/* both windows look out on the same coastline (17-Mile Drive), but each
   frame shows a DIFFERENT slice — left frame the near cypress grove,
   right frame the Lone Cypress on its rock — so it reads as one
   continuous view broken by the chimney, not two identical trees */
.room-sky {
  position: absolute; inset: 0;
  background: url("assets/window-right.jpg") center 48% / cover no-repeat;
  transition: filter 2.5s ease;
}
.room-sky-r { background: url("assets/window-left.jpg") center 60% / cover no-repeat; transition: filter 2.5s ease; }
.room-sky[data-state="sunrise"], .room-scene[data-sky="sunrise"] .room-sky-r { filter: sepia(0.32) saturate(1.15) brightness(0.96) hue-rotate(-12deg); }
.room-sky[data-state="day"], .room-scene[data-sky="day"] .room-sky-r         { filter: none; }
.room-sky[data-state="sunset"], .room-scene[data-sky="sunset"] .room-sky-r   { filter: sepia(0.45) saturate(1.3) brightness(0.85) hue-rotate(-18deg); }
.room-sky[data-state="night"], .room-scene[data-sky="night"] .room-sky-r     { filter: brightness(0.3) saturate(0.45) hue-rotate(28deg); }

/* ---- the great hearth: a monolithic troweled-concrete chimney breast
   over a raw stone plinth (à la a Vincent Van Duysen fireplace) ---- */
.fireplace { position: absolute; left: 32%; width: 36%; top: 18%; height: 34.4%; z-index: 2; }
.fp-breast {
  position: absolute; inset: 0;
  /* real board-formed concrete photo, lightened + a soft raking light */
  background:
    linear-gradient(104deg, rgba(255,255,252,0.10) 0 42%, rgba(40,38,32,0.10) 58% 100%),
    linear-gradient(rgba(244,244,242,0.44), rgba(224,224,220,0.4)),
    url("assets/tex/concrete.jpg");
  background-size: auto, auto, 120% auto;
  background-position: center, center, center;
  background-blend-mode: overlay, screen, normal;
  border-radius: 2px;
  box-shadow:
    inset 0 3px 10px rgba(255,255,255,0.22),
    inset 0 -10px 20px rgba(48,34,20,0.2),
    0 8px 22px rgba(40,25,10,0.32);
}
/* recessed arched firebox, low and centered */
.fp-box {
  position: absolute; left: 30%; width: 40%; top: 55%; bottom: 12%;
  background: radial-gradient(72% 84% at 50% 100%, #2a1508 0 52%, #0c0603 100%);
  border-radius: 46% 46% 4px 4px / 44% 44% 4px 4px;
  overflow: hidden;
  box-shadow: inset 0 0 26px rgba(0,0,0,0.92), inset 0 3px 8px rgba(0,0,0,0.8);
}
/* glowing ember bed at the base of the firebox */
.fp-logs {
  position: absolute; bottom: 0; left: 8%; right: 8%; height: 20%;
  background: radial-gradient(60% 120% at 50% 100%, rgba(255,150,50,0.8), rgba(200,60,10,0.3) 55%, rgba(0,0,0,0) 80%);
  filter: blur(3px);
  animation: ember 2.4s ease-in-out infinite alternate;
}
@keyframes ember { from { opacity: 0.6; } to { opacity: 1; } }
/* wispy flame tongues that lick and sway */
.flame {
  position: absolute; bottom: 4%;
  transform-origin: 50% 100%;
  background: radial-gradient(46% 58% at 50% 88%,
    #fff6cf 0 10%, #ffdf72 24%, #ff9d2a 48%, rgba(255,110,20,0.55) 72%, rgba(255,60,0,0) 100%);
  border-radius: 50% 50% 46% 46% / 82% 82% 18% 18%;
  mix-blend-mode: screen;
  filter: blur(1.5px);
}
.flame-a { left: 22%; width: 15%; height: 60%; animation: lick 1.5s ease-in-out infinite -0.2s; }
.flame-b { left: 32%; width: 20%; height: 82%; animation: lick 1.9s ease-in-out infinite -0.9s; }
.flame-c { left: 44%; width: 22%; height: 100%; animation: lick 1.6s ease-in-out infinite; }
.flame-d { left: 58%; width: 19%; height: 84%; animation: lick 2.1s ease-in-out infinite -0.5s; }
.flame-e { left: 68%; width: 14%; height: 58%; animation: lick 1.4s ease-in-out infinite -1.1s; }
@keyframes lick {
  0%   { transform: translateX(0) scaleY(1) skewX(0deg); border-radius: 50% 50% 46% 46% / 82% 82% 18% 18%; opacity: 0.85; }
  25%  { transform: translateX(-7%) scaleY(1.16) skewX(-6deg); border-radius: 44% 56% 48% 46% / 88% 80% 18% 18%; opacity: 1; }
  55%  { transform: translateX(6%) scaleY(0.9) skewX(5deg); border-radius: 56% 44% 44% 50% / 76% 88% 18% 18%; opacity: 0.92; }
  80%  { transform: translateX(-3%) scaleY(1.08) skewX(-3deg); border-radius: 48% 52% 46% 46% / 84% 80% 18% 18%; opacity: 1; }
  100% { transform: translateX(0) scaleY(1) skewX(0deg); border-radius: 50% 50% 46% 46% / 82% 82% 18% 18%; opacity: 0.85; }
}
/* raw hewn stone plinth the hearth sits on — chunky, irregular top edge */
.fp-hearth {
  position: absolute; left: -12%; right: -12%; top: 90%; height: 17%;
  background:
    linear-gradient(rgba(255,251,244,0.4), rgba(238,232,222,0.28)),
    url("assets/tex/concrete.jpg");
  background-size: auto, 200% auto;
  background-position: center, center 40%;
  background-blend-mode: screen, normal;
  border-radius: 3px 3px 4px 4px;
  box-shadow:
    inset 0 3px 7px rgba(255,255,255,0.32),
    inset 0 -7px 12px rgba(52,38,22,0.3),
    0 9px 18px rgba(40,25,10,0.35);
  clip-path: polygon(0 22%, 4% 8%, 11% 18%, 22% 6%, 34% 16%, 47% 5%, 60% 15%, 72% 6%, 84% 17%, 94% 8%, 100% 20%, 100% 100%, 0 100%);
}
/* firelight on the floor — invisible in a lit room, blooms when the
   chandelier goes off (sits ABOVE the dim layer) */
.fire-light {
  position: absolute; left: 30%; width: 40%; top: 52%; height: 30%;
  background: radial-gradient(50% 46% at 50% 4%, rgba(255,150,60,0.4), rgba(255,150,60,0) 70%);
  filter: blur(14px);
  z-index: 46; pointer-events: none;
  opacity: 0; transition: opacity 0.8s ease;
}
.room.lights-off .fire-light { animation: firelight 1.6s ease-in-out infinite alternate; }
@keyframes firelight { from { opacity: 0.55; } to { opacity: 0.95; } }
.stars span {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #fff; opacity: 0;
}
.room-sky[data-state="night"] .stars span { animation: star-twinkle 4s ease-in-out infinite; }
@keyframes star-twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }

/* the Flora chandelier (In Common With) — real product photos, and the
   light switch is the ICW trick itself: crossfade lit ↔ unlit states */
.room-pendant {
  position: absolute; left: 62%; top: -1%; width: 24%;
  aspect-ratio: 1000 / 922;
  z-index: 4; cursor: pointer;
  transform-origin: 50% 0;
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.4, 1);
}
.room-pendant:hover { transform: rotate(-1.6deg); }
.pendant-cord {
  position: absolute; top: -4%; height: 12%; left: 50%; width: 0.9%; margin-left: -0.45%;
  background: #241610;
}
.flora {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-user-drag: none; user-select: none;
  filter: drop-shadow(0 6px 8px rgba(60,30,20,0.28));
}
/* chandelier ON (default) = bells glow, room lives in its normal light.
   Chandelier OFF = bells go matte and the room falls DARK — only the
   fireplace and the windows are left glowing. No halo ring: the lit
   photo's own glass carries the light. */
.flora-on { opacity: 1; transition: opacity 0.55s ease; }
.room.lights-off .flora-on { opacity: 0; }

.room-dim {
  position: absolute; inset: 0; z-index: 45; pointer-events: none;
  background:
    radial-gradient(38% 34% at 50% 44%, rgba(16,10,6,0) 0%, rgba(14,10,20,0.55) 100%),
    rgba(14,10,20,0.38);
  opacity: 0; transition: opacity 0.8s ease;
}
.room.lights-off .room-dim { opacity: 1; }

/* chairs on the floor */
.room-chair { position: absolute; cursor: grab; touch-action: none; user-select: none; }
.room-chair.dragging { cursor: grabbing; }
.room-chair img { height: 100%; width: auto; display: block; -webkit-user-drag: none; transition: filter 0.8s ease; }
/* with the chandelier off the room goes dark — the chairs go dark with it */
.room.lights-off .room-chair img { filter: brightness(0.3) saturate(0.72) contrast(0.95); }
.room-chair-shadow {
  position: absolute; left: 8%; right: 8%; bottom: -6px; height: 12px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.18), rgba(0,0,0,0));
  border-radius: 50%;
}
.room-chair.dragging img { transform: scale(1.03); }

.room-greeting {
  position: absolute; right: 26px; bottom: 18px; z-index: 60;
  color: rgba(58,32,10,0.6); font-size: 18px;
}
.room-hint {
  position: absolute; left: 50%; top: 72%; transform: translateX(-50%);
  color: var(--muted); z-index: 60;
}

.room-btn {
  border: 0; background: none; font: inherit; color: var(--muted);
  cursor: pointer; padding: 0; text-align: left;
}
.room-btn:hover { color: var(--ink); }
.desktop-note { display: none; color: var(--muted); font-size: 13px; line-height: 1.4; }

/* ---------- entrance ---------- */
#intro {
  position: fixed; inset: 0; z-index: 300;
  background: var(--bg);
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.65s ease;
}
#intro.out { opacity: 0; pointer-events: none; }
#intro canvas { position: absolute; inset: 0; }
body.intro-on { overflow: hidden; }

/* ---------- likes ---------- */
.like-btn {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: none; font: inherit; line-height: 1;
  cursor: pointer; padding: 4px;
}
/* cuter plump heart: black outline empty, terracotta filled */
.heart {
  width: 21px; height: 19px; display: block;
  fill: none; stroke: #1a1a1a; stroke-width: 7px; stroke-linejoin: round; stroke-linecap: round;
  transition: transform 0.18s cubic-bezier(0.3,1.6,0.4,1);
}
.heart.on { fill: var(--accent); stroke: var(--accent); }
.like-btn:hover .heart { transform: scale(1.15); }
.like-btn:hover .heart:not(.on) { stroke: var(--accent); }
.like-count { font-size: 11px; color: var(--muted); }
/* no pill backdrop on the card heart — just the outline, with a hair of
   white glow so the black outline still reads over dark chairs */
.chair-img-wrap .like-btn { position: absolute; top: 7px; right: 7px; }
.chair-img-wrap .heart { filter: drop-shadow(0 0 1.2px rgba(255,255,255,0.95)) drop-shadow(0 0 1.2px rgba(255,255,255,0.7)); }
.liked-btn .heart { width: 17px; height: 16px; }
.viewer-like .heart { width: 22px; height: 20px; }

.liked-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; font: inherit; color: var(--muted);
  cursor: pointer; padding: 0; text-align: left;
}
.liked-btn:hover { color: var(--ink); }
.liked-btn.is-on { color: var(--accent); }

.meter { display: flex; align-items: center; gap: 6px; }
.meter-label { color: var(--muted); font-size: 12px; }
.dots { display: inline-flex; gap: 3px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot-empty); }
.dot.on { background: var(--accent); }

.rec-tag {
  display: table; margin: 12px auto 0; font-size: 11px; color: var(--muted);
  border: 1px solid var(--faint); border-radius: 999px; padding: 2px 9px;
}

.empty { grid-column: 1 / -1; color: var(--muted); padding-top: 40px; }

/* ---------- viewer ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(255,255,255,0.97);
  display: flex; flex-direction: column;
}
.viewer[hidden] { display: none; }
.viewer-stage { position: relative; overflow: hidden; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 48px 40px 0; }
.viewer-stage #viewer-img { max-width: min(900px, 90vw); max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.viewer { cursor: zoom-out; }
.viewer-meta { padding: 20px 28px 40px; text-align: center; }
.viewer-like { font-size: 22px; vertical-align: 2px; }
.viewer-title { font-size: 24px; }
.viewer-sub { color: var(--muted); font-size: 15px; margin-top: 4px; }
.viewer-price { color: var(--accent); font-size: 18px; margin-top: 8px; }
.viewer-meters { display: flex; justify-content: center; gap: 26px; margin-top: 14px; }
.viewer-link { display: inline-block; margin-top: 16px; color: var(--muted); font-size: 14px; }
.viewer-link a { color: var(--muted); }
.viewer-link a:hover { color: var(--ink); }

@media (max-width: 720px) {
  .sidebar { position: static; width: auto; gap: 14px; }
  .sidebar-footer { margin-top: 0; }
  .grid { margin-left: 0; padding: 8px 20px 60px; grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 32px; }
  .chair-img-wrap { height: 150px; }
  /* the room is a desktop experience — hide the entry + the scene on phones */
  #room-btn { display: none; }
  .desktop-note { display: block; }
  .room { display: none !important; }
}