@import url("home-base.css");

:root {
  color-scheme: light;
  --shell-glow-a: rgba(255, 224, 165, .24);
  --shell-glow-b: rgba(255, 249, 229, .44);
  --shell-shadow: rgba(60, 40, 20, .08);
  --card-glow: rgba(255, 226, 164, .7);
  --card-wash: rgba(250, 245, 233, .74);
  --card-wash-deep: rgba(224, 205, 172, .3);
  --card-rising: rgba(156, 62, 39, .17);
  --threshold-ink: #fff7e8;
  --threshold-muted: rgba(255, 246, 230, .8);
  --threshold-chip: rgba(35, 26, 18, .36);
  --threshold-chip-active: rgba(255, 242, 212, .9);
  --threshold-chip-active-ink: #3d2a19;
}

body {
  min-height: 100%;
  transition: color .8s ease, background-color .8s ease;
}

body[data-theme="day"] {
  color-scheme: light;
  --paper: #f4eddd;
  --paper-deep: #e9dcc4;
  --card: #faf5e9;
  --ink: #211d18;
  --soft: #5b5043;
  --faint: #7d7060;
  --rust: #9c3e27;
  --rust-deep: #742b1c;
  --gold: #c79b55;
  --rule: rgba(77, 59, 39, .24);
  --hair: rgba(77, 59, 39, .12);
}

body[data-theme="night"] {
  /* paper, card and ink come from the ground in house.css now. Only the
     threshold's own atmosphere is declared here. */
  color-scheme: dark;
  --paper-deep: #0b111d;
  --rust: #e69a72;
  --rust-deep: #c9714f;
  --gold: #dfb56e;
  --rule: rgba(238, 221, 193, .24);
  --hair: rgba(238, 221, 193, .12);
  --shell-glow-a: rgba(87, 116, 164, .18);
  --shell-glow-b: rgba(217, 173, 97, .08);
  --shell-shadow: rgba(0, 0, 0, .28);
  --card-glow: rgba(97, 122, 167, .28);
  --card-wash: rgba(32, 43, 61, .84);
  --card-wash-deep: rgba(15, 22, 35, .72);
  --card-rising: rgba(223, 181, 110, .13);
}

body[data-theme="day"] {
  background:
    radial-gradient(72% 42% at 9% 0%, var(--shell-glow-a), transparent 70%),
    radial-gradient(60% 44% at 92% 7%, var(--shell-glow-b), transparent 74%),
    var(--paper);
}

body[data-theme="night"] {
  background:
    radial-gradient(circle at 18% 9%, rgba(183, 205, 235, .1) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 16%, rgba(245, 225, 187, .13) 0 1px, transparent 1.7px),
    radial-gradient(circle at 52% 27%, rgba(195, 215, 242, .08) 0 1px, transparent 1.6px),
    radial-gradient(72% 42% at 9% 0%, var(--shell-glow-a), transparent 70%),
    radial-gradient(60% 44% at 92% 7%, var(--shell-glow-b), transparent 74%),
    var(--paper);
  background-size: 189px 189px, 271px 271px, 337px 337px, auto, auto, auto;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(13, 20, 34, 0), rgba(6, 10, 18, .22));
  transition: opacity .8s ease;
}

body[data-theme="night"]::after {
  opacity: 1;
}

.draft-mark {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  display: block;
  padding: 6px 9px;
  color: var(--faint);
  border: 1px solid var(--hair);
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  font: 600 var(--t-label)/1 var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  transition: color .8s ease, border-color .8s ease, background .8s ease;
}

.threshold {
  min-height: 100svh;
  color: var(--threshold-ink);
  background: #101621;
}

.threshold-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  transform: scale(1.02);
  transition: opacity 1.1s ease, transform 18s ease;
}

.night-event-film {
  display: none;
}

body[data-theme="day"] .threshold .night-film,
body[data-theme="night"] .threshold .day-film {
  opacity: 0;
  pointer-events: none;
}

body[data-theme="day"] .threshold .day-film,
body[data-theme="night"] .threshold .night-film {
  opacity: 1;
}

.threshold-media::after {
  background:
    linear-gradient(180deg, rgba(8, 11, 18, .62), rgba(8, 11, 18, .02) 48%, rgba(8, 11, 18, .58)),
    radial-gradient(62% 48% at 50% 43%, transparent 34%, rgba(5, 8, 14, .24));
  transition: background 1.1s ease;
}

/* NO DAYLIGHT WASH. Jane's call, 2026-07-28, chosen by eye from five options in her
   own browser after mine proved unreliable all evening. Scored closest to her
   reference: identical red channel, blue-over-red within 4. Every wash desaturated
   the sky. The night wash above is untouched - night was never the problem. */
body[data-theme="day"] .threshold-media::after,
.threshold[data-light="day"] .threshold-media::after {
  background: none;
}

body[data-theme="day"] .threshold-media--unused::after {
  background:
    linear-gradient(180deg, rgba(45, 30, 19, .46), rgba(40, 28, 18, .02) 48%, rgba(38, 25, 17, .53)),
    radial-gradient(62% 48% at 50% 43%, transparent 32%, rgba(43, 28, 17, .13));
}

.threshold-top {
  align-items: flex-start;
}

.threshold-actions,
.light-choice {
  display: flex;
  gap: 8px;
}

.light-choice {
  padding: 3px;
  border: 1px solid rgba(255, 246, 230, .25);
  border-radius: 999px;
  background: var(--threshold-chip);
  backdrop-filter: blur(12px);
}

.light-choice .threshold-control {
  min-width: 68px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.light-choice .threshold-control[aria-pressed="true"] {
  color: var(--threshold-chip-active-ink);
  background: var(--threshold-chip-active);
}

.threshold-actions > .threshold-control {
  background: var(--threshold-chip);
}

.threshold-content {
  max-width: 980px;
}

.threshold-content h1,
.threshold-content .inscription,
.threshold-content .hand {
  transition: color .8s ease, text-shadow .8s ease;
}

body[data-theme="day"] .threshold-content .hand {
  color: #ffd19f;
}

/* THE DOOR - where the photograph becomes the house.
 *
 * Chosen 2026-07-28 after rendering all three candidates in BOTH lights and looking:
 *
 *   PLAIN SCROLL  the picture is cut at a straight horizontal line. Survivable at night,
 *                 where the paper is nearly as dark as the sky. In DAYLIGHT it guillotines
 *                 a golden dawn into flat cream - Jane's word was "whited out", and she
 *                 called it before it was rendered, because the first pass only ever shot
 *                 this seam at night.
 *   DISSOLVE      the threshold goes sticky, so "Made Visible" stays ghosted behind the
 *                 house copy and the light pills float over everything. A defect.
 *   DOOR          the picture fades into the paper, then a gold hairline marks the
 *                 crossing. Works in both lights, because the fade is made OF the paper.
 *
 * The fix that made DOOR viable: its first version faded through `#000`, which is
 * invisible at night and a dirty grey smear across the meadow in daylight. The midpoint
 * was answering "what is dark" when the only question is "what is the paper". Now every
 * stop is var(--paper) at a different alpha, so one rule serves cream and navy alike.
 * 30vh, not the original 38vh, which ate the cabin. */
.threshold {
  position: relative;
}

/* NO FADE. THE CUT IS CLEAN AND THE LINE DOES THE WORK.
 *
 * Settled 2026-07-28 by rendering four versions in daylight and looking at them, after
 * Jane corrected me twice on this exact seam.
 *
 * The fade cannot win in daylight, and the reason is structural rather than a matter of
 * tuning: fading a photograph into the paper means fading it into whatever colour the
 * paper is. At night the paper is nearly black, so the fade is free - it costs the
 * picture nothing you can see. In daylight the paper is cream, so the same fade LIGHTENS
 * the bottom of the photograph. At 30vh the cabin became a ghost; shortened to 12vh it
 * still left the meadow and the cabin's base milky, and bought almost nothing for it.
 * You cannot fade into light without lightening.
 *
 * So the fade is gone and the picture is untouched to its last row of pixels. What stays
 * is the gold hairline below, which costs the photograph NOTHING and is the only thing
 * the cut actually needed: it turns an arbitrary edge into a declared threshold. The
 * picture stops because the house begins, and the line says so.
 *
 * Kept as a comment rather than deleted, so the next session does not re-derive it:
 *   the fade was `height:30vh` with stops at 52% / 88% of var(--paper). */

.house-arrival {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 94%, transparent), var(--paper) 11%);
  transition: background .8s ease;
  /* the gold line IS the threshold - the one mark that says you crossed something */
  border-top: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
}

/* a brighter centre to the line, so it reads as a doorway rather than a rule */
.house-arrival::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 84vw);
  height: 1px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.house-arrival::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .58;
  background:
    radial-gradient(52% 20% at 100% 10%, var(--shell-glow-a), transparent 78%),
    radial-gradient(44% 18% at 0% 45%, var(--shell-glow-b), transparent 80%);
  transition: background .8s ease, opacity .8s ease;
}

.label,
.flagline,
.house-intro .copy,
.way-card,
.way-card p,
.way-card .links,
.open-room,
.open-room-copy p,
.epigraph,
.footer,
.directory a {
  transition: color .8s ease, border-color .8s ease, background .8s ease, box-shadow .8s ease;
}

.way-card::before {
  background:
    radial-gradient(330px circle at var(--mx) var(--my), var(--card-glow), transparent 68%),
    linear-gradient(160deg, var(--card-wash), var(--card-wash-deep));
}

.way-card::after {
  background: radial-gradient(ellipse at center, var(--card-rising), transparent 70%);
}

body[data-theme="night"] .way-card .links a {
  border-color: rgba(230, 154, 114, .35);
}

.open-room {
  background: color-mix(in srgb, var(--card) 48%, transparent);
  box-shadow: 0 30px 80px var(--shell-shadow);
}

body[data-theme="night"] .open-room-media video {
  filter: sepia(.08) saturate(.72) brightness(.82) contrast(1.08);
}

body[data-theme="night"] .open-room:hover .open-room-media video {
  filter: sepia(.04) saturate(.92) brightness(.9) contrast(1.04);
}

body[data-theme="night"] .enter-room {
  color: #fff5e6;
}

body[data-theme="night"] .epigraph {
  background: radial-gradient(ellipse at center, rgba(223, 181, 110, .06), transparent 70%);
}

.shared-house-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  flex-wrap: wrap;
  padding: 18px 0 24px;
  border-top: 1px solid var(--hair);
}

.shared-house-action .house-auth-footer {
  display: inline-flex;
  align-items: center;
}

.shared-house-action a {
  color: var(--faint);
  font: 600 var(--t-label)/1.2 var(--sans);
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .25s ease;
}

.shared-house-action a:hover,
.shared-house-action a:focus-visible {
  color: var(--rust);
}

.footer {
  color: var(--ink);
}

.theme-confirmation {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 30;
  padding: 9px 13px;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  opacity: 0;
  pointer-events: none;
  font: 600 var(--t-label)/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: translate(-50%, 8px);
  transition: opacity .25s ease, transform .25s ease, color .8s ease, background .8s ease;
  backdrop-filter: blur(9px);
}

.theme-confirmation.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 760px) {
  .shared-house-action {
    justify-content: flex-start;
  }

  .draft-mark {
    right: 8px;
    bottom: 8px;
    max-width: 145px;
    text-align: center;
  }

  .threshold-top {
    right: 16px;
    left: 16px;
  }

  .threshold-top > .label {
    display: block;
    max-width: 240px;
  }

  .threshold-actions {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .light-choice .threshold-control {
    min-width: 62px;
  }

  .threshold-actions > .threshold-control {
    min-height: 44px;
  }

  .threshold-film {
    object-position: 72% 52%;
  }

  .threshold .night-film {
    object-position: 88% 52%;
  }

  .night-event-film {
    position: absolute;
    top: 116px;
    left: 0;
    z-index: 1;
    display: block;
    width: 124px;
    height: 112px;
    object-fit: cover;
    object-position: 0 0;
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    transform: scale(1.08);
    transition: opacity .8s ease;
    -webkit-mask-image: radial-gradient(ellipse at 35% 42%, #000 0 22%, rgba(0, 0, 0, .76) 47%, transparent 74%);
    mask-image: radial-gradient(ellipse at 35% 42%, #000 0 22%, rgba(0, 0, 0, .76) 47%, transparent 74%);
  }

  body[data-theme="night"] .night-event-film {
    opacity: .68;
  }

  .threshold-content {
    padding-right: 12px;
    padding-left: 12px;
  }

  .threshold-cue {
    width: 100%;
    text-align: center;
  }

  .house-arrival {
    padding-top: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .threshold-film {
    transform: none;
  }

  .night-event-film {
    display: none;
  }

  .room-status i {
    animation: none;
  }

  .theme-confirmation {
    transition: none;
  }
}

/* ---------------------------------------------- THE DAY TYPE
   NO SHADOW. Removed 2026-07-28 after Jane said, repeatedly and correctly, that a
   version she had open was brighter, and after four of my theories were each killed
   by measurement:
     the film's own brightness   0% swing across the loop
     the poster vs the video     6.8 apart, not 164
     the viewport size           418 vs 417
     my push-in animation        418 vs 421
     six consecutive loads       spread of ZERO

   The answer was in her own screenshots the whole time. The bright one has no halo
   around the headline; the dark one has an obvious one. My shadow blurred up to 44px
   in every direction, which across a 700px headline is a large soft dark cloud
   sitting in the sky. She was not seeing a darker sky. She was seeing my shadow
   spread across it, and reading the result as the light going down.

   So the front door carries its original vignette and nothing else, exactly as
   Codex built it. The headline sits at 1.33:1 in daylight, which is below the 3.00
   floor and is a known, deliberate trade on a display line over her own photograph -
   see the rejected approaches in git history before reaching for a scrim again. */

/* THE DAY FILM IS GRADED DARKER THAN ITS OWN POSTER. Measured 2026-07-28:
   mvd-home-cabin_day-dawn_v1.png and the first frame of the dawn film are DIFFERENT
   renders - 9.8 mean pixel difference across the frame, and the poster's sky is 24
   points brighter. Both are legitimate; they were simply generated separately.

   The consequence is that the page gets darker the moment the film starts playing,
   and every "wasn't it brighter" tonight was Jane comparing a frame showing the still
   against a frame showing the movie. She was right every time, and the difference was
   never in any stylesheet.

   1.045 is the measured ratio between the two skies, not a taste dial. It makes the
   moving version match the still she has been choosing all evening. */
.threshold-film.day-film {
  filter: brightness(1.045);
}

.threshold-content {
  position: relative;
  z-index: 3;
  /* THE RAISE - the one legibility lever that costs the picture nothing, tried at last
     on 2026-07-29. The sub-line used to sit across the bright gold band at the horizon,
     which is where its 1.3:1 daylight contrast came from; seven viewport-heights up it
     sits on the blue-grey sky and reads plainly, and the headline gains depth with it.
     Nothing is covered and nothing is washed - the block just stands higher.
     DESKTOP ONLY: at 390 the same raise shoved the handwriting into the cabin's roof,
     so the phone keeps the original position - checked in both, like everything else
     on this page should have been all along. The rule itself lives just below. */
  --edge: .30;    /* how hard the letterforms are drawn. 0 = bare type. */
  --scrim: .20;   /* Jane's number, chosen by parameter sweep in her own browser, then
                     raised from .15 to .20 on 2026-07-28 for the legibility.
                     The blue far from the text is IDENTICAL at every setting -
                     measured rgb(162,191,206) at 0 and rgb(161,191,206) at .20, one
                     point across the whole range. What changes is the patch behind
                     the words: sub-line contrast 1.13:1 bare, 1.42:1 at .15,
                     1.54:1 at .20. Still under the 3.00 floor at every setting - the
                     handwriting in rust is the line that carries the legibility, and
                     this is the headline getting as much help as it can take before
                     the patch starts to read as a smudge. 0 removes it. */
}

@media (min-width: 720px) {
  .threshold-content { transform: translateY(-7vh); }
}

/* THE PHONE'S OWN COLLISION, found while checking the raise: at 390 the handwriting was
   never on the gold band at all - it sat across the cabin's logs, rust on dark timber,
   half its letters lost. Not caused by the raise; it was always there, unread because
   nobody had read the phone render closely. At phone width the line steps out of the
   centre and sits to the left, over the mist, where the ground is pale and empty - the
   same words, finally on a surface that can hold them. */
@media (max-width: 719px) {
  .threshold-content .hand {
    display: block;
    text-align: left;
    padding-left: 2%;
  }
}



/* A MODEST SHADOW, ON THE HEADLINE AND THE SUB-LINE ONLY. Jane's call once the three
   darkening layers were off the picture.

   The blur is capped at 10px deliberately. The version that made the sky look grey
   reached 44px, and a 44px blur around a 700px headline is not a shadow on letters -
   it is a soft dark cloud the width of the screen. At 10px it stays on the glyphs,
   which is the whole point of asking for a shadow rather than a scrim.

   The handwritten cue and the eyebrow are left bare - they sit inside the vignette's
   darker bands already and do not need it. */
/* DEFINITION, NOT DARKENING.
   A scrim of any size darkens the picture behind the words - Jane saw that even at a
   tight 124%. So the type is defined at its own EDGE instead: a hairline stroke drawn
   behind the fill, plus a 3px shadow. Both stay within a few pixels of a glyph, so
   there is no region to darken and nothing that can grow into the cloud the 44px
   version became. paint-order puts the stroke UNDER the fill, so the letterform stays
   its true weight and only gains an edge. */
/* THE BARELY SCRIM. Tight to the lines, feathered so no edge can be found. */
.threshold-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 52%;
  width: 118%;
  height: 150%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(closest-side ellipse,
    rgba(28, 21, 12, var(--scrim)) 0%,
    rgba(28, 21, 12, calc(var(--scrim) * .74)) 44%,
    transparent 100%);
}

/* THE HANDWRITING IS THE ONE COLOURED THING ON THE PAGE. Her own rust, #9c3e27 -
   the Living House day accent, and what the live quarterly sets "And so. Here we
   are." in. 1.18:1 to 4.03:1 on the gold band it sits on. A LIGHT halo, not a dark
   one, so it lifts off the gold instead of smudging into it. */
body[data-theme="day"] .threshold-content .hand {
  color: #9c3e27;
  text-shadow:
    0 1px 2px rgba(255, 250, 240, .42),
    0 0 5px rgba(255, 250, 240, .30);
}

.threshold-content h1,
.threshold-content .inscription {
  text-shadow:
    0 1px 1px rgba(34, 25, 14, calc(var(--edge) * 1.10)),
    0 0 3px rgba(34, 25, 14, calc(var(--edge) * .80));
}

body[data-theme="night"] .threshold-content { --edge: .34; }


/* ============================================================================
   THE TWO CURATED SLOTS ON THE FRONT DOOR
   Jane, 2026-07-29: "we had a version in v4 or v5 where i was able to feature a
   few... should we hav a featres section that i can choose and can i choose one
   room is open?"

   The polaroid is lifted from v5 verbatim in geometry and re-tokenised to the
   house: it used its own --card/--tape/--hand, this uses the ground's. So a
   pinned piece follows day and night with the rest of the page instead of
   staying at v5's light.
   ========================================================================= */

/* THE RHYTHM, measured rather than felt (Jane: "the still wet is close to the 3 ways in.
   and then big gap from one room is opne. so maybe fix that. even it out bette.r").
   She was exactly right, and the page said so: Three-ways-in carries NO bottom padding of
   its own, so my clamp(6..16px) top left a 16px junction there, while Still-wet's 116
   bottom met One-room's 116 top and made a 232px canyon on the other side. One section
   was doing both jobs badly.
   Now: the air ABOVE this section is this section's to give, and the air BELOW it belongs
   to the next section's own top padding. 120 above, 0 below, against One-room's 116 - two
   junctions within four pixels of each other instead of 16 against 232. */
.wet { padding-top: clamp(72px, 8.4vw, 120px); padding-bottom: 0; }

.wet .section-head { align-items: center; justify-content: flex-start; }
/* title left; the label and the two hang buttons ride together on the right */
.wet .section-head .label { margin-left: auto; }

/* the grid the hang buttons drive. hangControls owns hang2/hang3/hang4/hangfull -
   the same four classes every room uses - so these are the only rules this page
   needs, and changing the control changes every wall at once. */
#wetGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px) clamp(18px, 2.2vw, 28px);
  padding-top: clamp(16px, 2.4vw, 26px);
}
#wetGrid.hang2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#wetGrid.hang3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#wetGrid.hang4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#wetGrid.hangfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: clamp(24px, 5vw, 80px);
  padding-right: clamp(24px, 5vw, 80px);
  box-sizing: border-box;
}
@media (max-width: 900px) {
  #wetGrid, #wetGrid.hang3, #wetGrid.hang4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  #wetGrid, #wetGrid.hang2, #wetGrid.hang3, #wetGrid.hang4 { grid-template-columns: 1fr !important; }
}

.wet-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px 4px;
  font-family: var(--qserif, Georgia, serif);
  font-style: italic;
  font-size: 17px;
  color: var(--faint);
}

/* the hang buttons, moved out of the fixed corner and into the section's own head -
   where she went looking for them, because that is where v5 kept them */
.hangbar.inhead { display: inline-flex; gap: 8px; padding: 0; margin-left: 16px; }
.hangbar.inhead button {
  font: 600 var(--t-label)/1 var(--qsans, Inter, system-ui, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(251, 246, 234, .95);
  border: 1px solid rgba(161, 73, 47, .55);
  color: #8a3b28;
  padding: 8px 13px;
  cursor: pointer;
  border-radius: 2px;
  transition: .25s;
}
body.night .hangbar.inhead button {
  background: rgba(13, 14, 17, .92);
  color: #f0dcb4;
  border-color: rgba(228, 200, 147, .5);
}
.hangbar.inhead button:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- the polaroid ---------- */
.pol {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  padding: 10px 10px 14px;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 10px 24px rgba(40, 32, 20, .14), 0 2px 5px rgba(40, 32, 20, .10);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s;
}
body.night .pol {
  border-color: rgba(228, 200, 147, .16);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
}
/* the tilt is per-position, so a shelf never reads as a spreadsheet */
.pol:nth-child(3n+1) { transform: rotate(-1.5deg); }
.pol:nth-child(3n+2) { transform: rotate(1.2deg); }
.pol:nth-child(3n+3) { transform: rotate(-.6deg); }
.pol:hover, .pol:focus-visible {
  transform: rotate(0) translateY(-6px);
  box-shadow: 0 20px 42px rgba(40, 32, 20, .2);
  z-index: 3;
}
body.night .pol:hover { box-shadow: 0 22px 46px rgba(0, 0, 0, .62); }

.pol .tape {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  width: 74px; height: 22px;
  background: rgba(226, 208, 168, .62);
  box-shadow: 0 1px 2px rgba(40, 32, 20, .14);
}
.pol:nth-child(3n+2) .tape { transform: translateX(-50%) rotate(5deg); }
body.night .pol .tape { background: rgba(228, 208, 166, .16); }

.pol .ph {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #241d16;
  display: block;
}
.pol .ph video, .pol .ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pol .play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.pol .play span {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(248, 241, 224, .88);
  color: #8a3b28;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  padding-left: 3px;
  box-shadow: 0 6px 16px rgba(40, 32, 20, .3);
  transition: transform .25s;
}
.pol:hover .play span { transform: scale(1.08); }

/* a piece with no picture is given TYPE, never a borrowed photograph */
.tword {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 8% 12%;
  background: linear-gradient(158deg, #2c2419, #14100b);
}
.tword span {
  font-family: var(--qserif, Georgia, serif);
  font-style: italic;
  color: #f0e4cd;
  font-size: var(--t-lead);
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
}
body.night .tword { background: linear-gradient(158deg, #1d2740, #0b1120); }

.pol .cap {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px;
  padding: 11px 4px 0;
}
.pol .cap .t {
  font-family: var(--qserif, Georgia, serif);
  font-size: var(--t-lead);
  font-weight: 440;
  text-wrap: balance;
}
.pol .cap2 {
  padding: 2px 4px 0;
  font: 400 var(--t-label)/1.4 var(--qsans, Inter, system-ui, sans-serif);
  letter-spacing: .05em;
  color: var(--soft);
}

.heart {
  position: absolute; right: 8px; top: 8px; z-index: 3;
  background: rgba(8, 5, 3, .35);
  border: 0; border-radius: 99px;
  color: rgba(242, 234, 223, .75);
  cursor: pointer;
  font: var(--t-body)/1 inherit;
  padding: 6px 8px;
  transition: .2s;
  backdrop-filter: blur(2px);
}
.heart.on, .heart:hover { color: #e0938a; }

/* ---------- the open room's chooser (owner only) ---------- */
.open-room { position: relative; }
.roompick {
  position: absolute; right: 16px; bottom: 16px; z-index: 4;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px;
  background: rgba(251, 246, 234, .95);
  border: 1px solid rgba(161, 73, 47, .55);
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(40, 32, 20, .2);
}
body.night .roompick {
  background: rgba(13, 14, 17, .94);
  border-color: rgba(228, 200, 147, .5);
}
.roompick .lb {
  font: 600 var(--t-label)/1 var(--qsans, Inter, system-ui, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a3b28;
}
body.night .roompick .lb { color: #f0dcb4; }
.roompick select, .roompick button {
  font: 600 var(--t-small)/1 var(--qsans, Inter, system-ui, sans-serif);
  color: #8a3b28;
  background: transparent;
  border: 1px solid rgba(161, 73, 47, .45);
  border-radius: 2px;
  padding: 7px 9px;
  cursor: pointer;
}
body.night .roompick select, body.night .roompick button {
  color: #f0dcb4;
  border-color: rgba(228, 200, 147, .45);
}
.roompick select:hover, .roompick button:hover { border-color: var(--accent); }

/* A featured room with no footage of its own gets a LAMP, not a label - see the note in
   home-feature.js. Warm pool, dark room, breathing on a 7s rhythm so the panel reads as
   inhabited rather than merely lit. */
.roomlight {
  position: absolute; inset: 0;
  background:
    radial-gradient(115% 85% at 50% 60%, rgba(239, 183, 92, .34), rgba(239, 183, 92, .08) 44%, transparent 72%),
    linear-gradient(168deg, #241d14, #100c08);
  animation: roomlamp 7s ease-in-out infinite alternate;
}
body.night .roomlight {
  background:
    radial-gradient(115% 85% at 50% 60%, rgba(223, 181, 110, .28), rgba(120, 150, 200, .08) 44%, transparent 72%),
    linear-gradient(168deg, #131c2e, #080c14);
}
@keyframes roomlamp { from { opacity: .88 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .roomlight { animation: none } }

/* ON A PHONE THE PICKER JOINS THE FLOW. Pinned to the card's bottom-right it landed
   directly on top of "enter the room" - the one control a visitor needs - because the
   stacked layout leaves no bottom-right corner to sit in. Below the CTA it collides with
   nothing and still reads as hers. */
@media (max-width: 720px) {
  .roompick {
    position: static;
    margin: 20px 0 4px;
    width: fit-content;
    padding: 8px 10px;
  }
}

/* a featured room whose bed is a STILL must fill the panel exactly as its video would.
   The house only ever styled `.open-room-media video`, so the first still bed rendered
   letterboxed against black - the image was right and nothing was told to cover. */
/* absolute, not height:100% - the panel's height comes from the grid row, so a
   percentage height on replaced content never resolved and the still fell back to its
   own intrinsic size, letterboxed against black. The video only looked fine by luck. */
.open-room-media img, .open-room-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(.15) saturate(.82) contrast(.97);
  transition: filter .6s ease, transform 12s ease;
}
.open-room:hover .open-room-media img { filter: sepia(.03) saturate(1) contrast(1); transform: scale(1.025); }

/* HER VIEW MOVES THE HEART OUT OF THE WAY. The pen and the ♡ both want the photo's
   top-right corner; signed in, they landed on top of each other. The curator's tools own
   that corner because they are the reason she is looking, so the heart steps down. A
   visitor never has a .cur8 on the card, so a visitor's heart never moves. */
.pol:has(.cur8) .heart { top: auto; bottom: 8px; }

/* ============================================================================
   THE FRONT DOOR'S CHROME - the house's navigation, wearing nothing.
   Jane: "the homepage menu thing we were wokring on dissepared." It never shipped;
   it lived only in drafts/door-chrome.html. Wired in now. The behaviour half and the
   full reasoning are in door-chrome.js - this is only what it looks like.
   ========================================================================= */

body.door-chrome.has-house-bar { padding-top: 0; }

/* the layer becomes invisible scaffolding: it still HOLDS the real panel and the real
   account coin, it just stops looking like a bar laid on a photograph */
body.door-chrome .house-layer {
  /* RELATIVE, NOT STATIC - and this was the whole bug behind "the panel is see-through".
     A static element ignores z-index, so the layer dropped out of the stacking order and
     .threshold-content (the wordmark, later in the DOM) painted straight OVER the open
     panel. Three passes at the background did nothing, because the background was never
     the problem: the letters were in front of the paper, not behind it. */
  position: relative;
  z-index: 8;
  min-height: 0;
  padding: 0;
  gap: 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  flex: 1 1 auto;
}
/* the wordmark is already set 90px tall in the middle of the picture, and the light
   has its own pills on the threshold - two of each would be two owners of one thing */
body.door-chrome .house-anchor,
body.door-chrome .house-light { display: none; }
body.door-chrome .house-tools {
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* ONE SIZE FOR THE WHOLE CLUSTER (her screenshot: three different weights in one row -
   a big filled Day/Night pill, a big Hear-the-evening pill, and small naked Rooms text).
   Now one height, one type size, one family; the only thing that varies is FILL, and
   fill means "this is the light you chose". */
/* 12px, never 11. The bench this was lifted from used 11px and 10.5px, and the render
   gate refused it - her floor is 12px on every build, and a chrome that is "just chrome"
   is exactly where that floor quietly gets broken. */
body.door-chrome .house-tools .rooms-button,
body.door-chrome .threshold-actions .threshold-control {
  font: 600 var(--t-label)/1 var(--qsans, Inter, system-ui, sans-serif);
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 7px 14px;
  min-height: 0;
  border-radius: 100px;
}
body.door-chrome .house-tools .rooms-button {
  color: rgba(244, 241, 234, .9);
  background: transparent;
  border: 1px solid rgba(244, 241, 234, .4);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
body.door-chrome .house-tools .rooms-button:hover,
body.door-chrome .house-tools .rooms-button[aria-expanded="true"] {
  color: #f6e6c8;
  border-color: #e8c98f;
}
body[data-theme="day"].door-chrome .house-tools .rooms-button {
  color: rgba(40, 28, 18, .84);
  border-color: rgba(40, 28, 18, .35);
  text-shadow: 0 1px 8px rgba(255, 250, 240, .5);
}
body.door-chrome .threshold-actions { display: flex; align-items: center; gap: 10px; }
body.door-chrome .threshold-actions .light-choice { gap: 0; }

/* the account coin has to be legible ON a photograph, not on paper */
body.door-chrome .house-auth,
body.door-chrome .house-auth a,
body.door-chrome .house-auth button {
  color: rgba(244, 241, 234, .9);
  font: 600 var(--t-label)/1 var(--qsans, Inter, system-ui, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
body.door-chrome .house-auth .who-coin { border-color: rgba(244, 241, 234, .55) !important; }
body[data-theme="day"].door-chrome .house-auth,
body[data-theme="day"].door-chrome .house-auth a,
body[data-theme="day"].door-chrome .house-auth button {
  color: rgba(40, 28, 18, .86);
  text-shadow: 0 1px 8px rgba(255, 250, 240, .55);
}
body[data-theme="day"].door-chrome .house-auth .who-coin { border-color: rgba(40, 28, 18, .5) !important; }

/* THE PANEL, SIZED FOR A PHOTOGRAPH (her screenshot: "its kind of big when u click on
   it. can we make it the same way as the other rooms. but in this styling but that
   size"). On a room this panel sits on PAPER, where a wide opaque plate is right. On
   the door it sits on a PICTURE, where the same plate is a slab covering half the sky.
   Same panel, same links, same behaviour - narrower, tighter, and glass, so the world
   stays visible behind it. */
/* THE PANEL: A SHELF, NOT A COLUMN.
   Her question, and it is the right one to ask: "do you think it should be that dropdown
   menu versus the exact way that you have it, which is like a rectangle in the other
   rooms... What do you think is better: the long vertical or the... horizontal rectangle?"

   The horizontal one, for a reason that only applies here. On a ROOM the panel opens over
   paper, where the shape is free. On the DOOR it opens over a photograph, and the two
   shapes cost that photograph very differently: the tall column ran 780px down the right
   side and blotted out the sky, the treeline and the cabin - the whole reason anyone
   stops on this page. The same fourteen links laid across three columns are ~250px tall.
   It covers a third as much picture, and it reads as a shelf pulled out rather than a
   curtain pulled down.

   It is also what every other room does, which she liked: "the first version of this, you
   had it good, but it was a little wide." So: the room's shape, 620 instead of 680, tighter
   rows, and genuinely translucent - her ask - so the sky stays visible through it. */
body.door-chrome .rooms-panel {
  top: calc(100% + 14px);
  right: 0;
  width: min(620px, calc(100vw - 36px));
  grid-template-columns: repeat(3, 1fr);
  max-height: min(70vh, 560px);
  overflow: auto;
  /* OPAQUE, AND THAT IS THE ANSWER TO "a little translucent" HERE.
     Tried 74%, then 92%, and the wordmark read through both: "Play", "Stories" and
     "Meditations" land directly on a 90px white letterform, and even a tenth of that
     bleeding through is enough to make a link hard to read. Two things compounded it -
     --house-panel is ALREADY 97% translucent, so my percentage stacked on top of a value
     that was never opaque to begin with; and backdrop-filter cannot be relied on to save
     it, because it composites on the GPU and simply does not apply in some contexts.
     A design that is legible only when the blur happens to work is not legible.
     Translucent is an effect; readable is a requirement, and when they disagree the
     effect loses. The blur stays for the edge; the paper underneath is now real paper. */
  /* 96, not 90, and the reason is about the INSTRUMENT, not the design. Headless Chrome
     cannot composite backdrop-filter, so every render I judged showed the wordmark crisp
     through the panel while Safari would have blurred it into glass. I nearly retuned the
     background three times against a measurement my own tool could not make.
     96% is legible whether or not the blur lands - Safari gets real glass over a moving
     sky, anything that drops the filter still gets a readable menu. A design that reads
     only when the GPU cooperates is not a design. */
  /* 92 now that the letters are genuinely BEHIND it. 96 was insurance against a bug I
     had misdiagnosed; with the stacking fixed the panel can be the glass she asked for,
     and Safari's backdrop blur turns the wordmark behind it into light rather than type. */
  background: color-mix(in srgb, var(--house-panel, #f6efe0) 92%, transparent);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  box-shadow: 0 26px 66px rgba(0, 0, 0, .38);
}
body.door-chrome .rooms-panel > div { padding: 16px 18px; border-right: 1px solid var(--qrule2); }
body.door-chrome .rooms-panel > div:nth-child(3) { border-right: 0; }
body.door-chrome .rooms-panel > div > span { font-size: 12px; letter-spacing: .14em; margin-bottom: 8px; }
body.door-chrome .rooms-panel a { font-size: 13px; padding: 4px 0; }
body.door-chrome .rooms-panel .rooms-shared-actions { padding: 12px 16px; }
body.door-chrome .rooms-panel .rooms-shared-actions a { font-size: 12px; }

@media (max-width: 720px) {
  /* the three stay on ONE line. Wrapping put the coin alone on a second row, which reads
     as a fourth control rather than the same three a room has. Narrower padding and no
     wrap, and it fits at 390 with room to spare. */
  body.door-chrome .house-tools { gap: 7px; justify-content: flex-end; flex-wrap: nowrap; }
  body.door-chrome .house-tools .rooms-button,
  body.door-chrome .threshold-actions .threshold-control { padding: 6px 10px; font-size: 12px; letter-spacing: .1em; }
  body.door-chrome .house-auth .house-auth-shelf { width: 30px; height: 30px; }
  /* ON A PHONE THE SOUND GOES BACK UP TOP, on its own line under the three.
     The bottom-right corner is right on a desktop and wrong here: the curator's bench bar
     is fixed across the bottom centre and the sound control sat underneath it. Raising it
     by a few pixels only moved the collision, so it moves out of that corner entirely -
     a second line under the navigation, where nothing else is. */
  body.door-chrome .threshold .threshold-actions { position: absolute; top: 104px; bottom: auto; right: 14px; }
  body.door-chrome .rooms-panel { grid-template-columns: 1fr; width: min(300px, calc(100vw - 28px)); }
  body.door-chrome .rooms-panel > div { border-right: 0; }
  body.door-chrome .rooms-panel > div + div { border-top: 1px solid var(--qrule2); }
}

/* house.js builds its own empty account slot for lights.js to fill; the front door
   declares a real one in its markup instead, so the empty one must not take up space */
body.door-chrome .house-tools > .qright.house-auth:empty { display: none; }

/* THE PANEL, OPEN. Two faults caught only by clicking it and looking - a still of a
   closed menu proves nothing about an open one.
   1. A pale band appeared behind the whole strip the moment the panel opened. house.css
      gives the layer a background, a blur and - on `:has(.rooms-panel:not([hidden]))` -
      a shadow, all of which are right on paper and wrong on a photograph. Killed here for
      the open state as well as the closed one.
   2. The list clipped: 68vh cut it off after Artist, so Commissions, the Guestbook and
      the way home were below a fold nobody would look for. Taller, and it fits. */
body.door-chrome .house-layer,
body.door-chrome .house-layer:has(.rooms-panel:not([hidden])) {
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
}
body.door-chrome .rooms-panel { max-height: min(82vh, 780px); }
body.door-chrome .rooms-panel > div { padding: 12px 17px; }

/* the film sits over the still and only becomes visible once it is genuinely playing */
.open-room-media .roomfilm { opacity: 0; transition: opacity .8s ease; }
.open-room-media .roomfilm.rolling { opacity: 1; }

/* ============================================================================
   THE DOOR'S TOP ROW, CUT BACK TO A ROOM'S THREE THINGS
   Jane, 2026-07-29: "I feel like it's a little too cluttered right now... When you go
   into Worlds or any other room, there are the Rooms and Explore on the top right, and
   then a day and night, and then the circle that says J. Maybe we can try to keep that
   level of simplicity on the main world."

   She is right, and the count is the argument: a room carries THREE controls up there,
   the door had FIVE - and one of them was a sign-out, which is not something a visitor
   should be able to hit from the front step. Two changes, no capability lost:

     · HEAR THE MORNING moves out of the navigation and down to the bottom-right of the
       picture. It is weather, not a door. Only the front door HAS weather, which is
       exactly why it does not belong in the row every room shares.
     · THE ACCOUNT BECOMES A COIN. Signed in, this control drew "♥ YOUR SHELF ⋯" - a
       three-part lockup wider than the wordmark's neighbours, with a sign-out hanging off
       it. On the door it is now one circle that opens her shelf. Sign out still lives in
       the footer's copy of the same control and in the wing; it is simply not on the
       front step. Her words: "Why is that there to sign out? That shouldn't be there."
   ========================================================================= */

body.door-chrome .threshold-actions {
  position: absolute;
  z-index: 6;
  right: clamp(18px, 4vw, 48px);
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Day/Night belongs with the navigation; only the sound goes down to the corner.
   No `order` here on purpose - an earlier `order:2` put the coin BETWEEN Rooms/Explore
   and Day/Night, which is not the order any room uses. DOM order is the order. */

/* the coin */
body.door-chrome .house-auth .house-auth-signed-in { gap: 0; }
body.door-chrome .house-auth .house-auth-shelf {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 234, .55);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0;
  padding: 0;
  font-size: var(--t-small);
  text-decoration: none;
}
body[data-theme="day"].door-chrome .house-auth .house-auth-shelf { border-color: rgba(40, 28, 18, .45); }
/* the coin shows the INITIAL and nothing else. This rule used to spare the heart; when
   the initial arrived it was still hiding every other span, and at (0,4,2) it outranked
   the newer rule that tried to show it. Specificity, not order. */
body.door-chrome .house-auth .house-auth-shelf span:not(.house-auth-initial) { display: none; }
body.door-chrome .house-auth .house-auth-heart { font-size: var(--t-small); line-height: 1; }
/* no sign-out on the front step - the footer control and the wing both still have it */
body.door-chrome .house-auth .house-auth-menu-button,
body.door-chrome .house-auth .house-auth-menu,
body.door-chrome .house-auth .house-auth-status { display: none !important; }

/* THE PANEL WAS LOSING A TIE, NOT A TRANSPARENCY ARGUMENT.
   Jane's screenshot: "Listening", "Letters", "Media", "Play", "Stories", "Meditations"
   and the guestbook all sat under the wordmark with the menu open. I spent three passes
   on the background and one on position:static before measuring the thing that actually
   decides it:

     .threshold-top      z-index 3
     .threshold-content  z-index 3   <- and it comes LATER in the DOM

   Equal z-index means document order breaks the tie, so the wordmark painted over an
   opaque panel. Proof, not inference: elementFromPoint at a spot inside the open panel
   returned the <em> from "Visible", never a link. That is also why those links were not
   clickable there.

   The bar never hit this, because a fixed bar at z-index 70 sits in the page's own
   stacking context, above everything in the threshold. The moment the layer moved INTO
   the threshold it started competing with the picture's own furniture.

   12 beats 3, and only while the door is wearing this chrome. */
body.door-chrome .threshold-top { z-index: 12; }

/* ============================================================================
   THE DOOR'S CHROME, REFINEMENT PASS
   Jane, 2026-07-29, with two screenshots side by side: "shouldn't the Rooms and
   Explorer in Day and Night be somewhat similar pills?... Maybe it should be like a
   moderate pill?" and "this current version is also long... kind of extended long."

   She measured it before I did. Hers: 621 wide x 348 tall. The room's: 672 x 322.
   Mine was NARROWER and TALLER with the same fourteen links - which is the whole reason
   it reads as a column pretending to be a shelf. Two causes, both mine: I set the panel
   to 620 instead of the room's 680, and I gave every link `padding: 4px 0` ON TOP of the
   column's existing 7px gap, so each row cost 35px against the room's 31. Fourteen rows
   later that is the difference.

   ONE PILL LANGUAGE. Four controls, four different shapes before this: a bordered
   rectangle, a filled segmented pill, a naked circle, and a solid capsule. Now one
   capsule - same height, same radius, same type, same hairline - and the ONLY thing that
   varies is fill, because fill means "this is the one you chose". Each sits on its own
   faint scrim so it stays legible over any sky, day or night, which is what lets the type
   be quiet instead of shouting with a text-shadow.
   ========================================================================= */

body.door-chrome .house-tools { gap: 10px; align-items: center; }

body.door-chrome .house-tools .rooms-button,
body.door-chrome .threshold-actions .threshold-control,
body.door-chrome .house-auth .house-auth-shelf,
body.door-chrome .house-auth .house-auth-signin {
  min-height: 34px;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(244, 241, 234, .3);
  background: rgba(18, 15, 11, .3);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  color: rgba(248, 245, 238, .94);
  font: 600 var(--t-label)/1 var(--qsans, Inter, system-ui, sans-serif);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: border-color .3s ease, background .3s ease, color .3s ease;
}
body[data-theme="day"].door-chrome .house-tools .rooms-button,
body[data-theme="day"].door-chrome .threshold-actions .threshold-control,
body[data-theme="day"].door-chrome .house-auth .house-auth-shelf,
body[data-theme="day"].door-chrome .house-auth .house-auth-signin {
  border-color: rgba(38, 27, 17, .22);
  background: rgba(252, 249, 242, .5);
  color: rgba(38, 27, 17, .88);
}
body.door-chrome .house-tools .rooms-button:hover,
body.door-chrome .threshold-actions .threshold-control:hover,
body.door-chrome .house-auth .house-auth-shelf:hover,
body.door-chrome .house-auth .house-auth-signin:hover,
body.door-chrome .house-tools .rooms-button[aria-expanded="true"] {
  border-color: var(--accent, #dfb56e);
  color: #f6e6c8;
}
body[data-theme="day"].door-chrome .house-tools .rooms-button:hover,
body[data-theme="day"].door-chrome .threshold-actions .threshold-control:hover,
body[data-theme="day"].door-chrome .house-auth .house-auth-shelf:hover,
body[data-theme="day"].door-chrome .house-tools .rooms-button[aria-expanded="true"] {
  color: #7a4527;
}

/* the light is a segmented capsule: one pill holding two, the chosen one filled */
body.door-chrome .house-tools .light-choice {
  height: 34px;
  padding: 3px;
  gap: 0;
  border-radius: 999px;
  border: 1px solid rgba(244, 241, 234, .3);
  background: rgba(18, 15, 11, .3);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
}
body[data-theme="day"].door-chrome .house-tools .light-choice {
  border-color: rgba(38, 27, 17, .22);
  background: rgba(252, 249, 242, .5);
}
body.door-chrome .house-tools .light-choice .threshold-control {
  height: 26px;
  min-height: 26px;
  padding: 0 13px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.door-chrome .house-tools .light-choice .threshold-control[aria-pressed="true"] {
  background: rgba(248, 243, 231, .95);
  color: #2a1d12;
}
body[data-theme="day"].door-chrome .house-tools .light-choice .threshold-control[aria-pressed="true"] {
  background: #2f2419;
  color: #f7f2e6;
}

/* the coin: the same capsule, closed into a circle */
body.door-chrome .house-auth .house-auth-shelf { width: 34px; padding: 0; font-size: var(--t-small); }
body.door-chrome .house-auth .house-auth-heart { font-size: var(--t-small); line-height: 1; }

/* the sound keeps the identical capsule down in the corner - it is the same family of
   thing, just not part of the navigation */
body.door-chrome .threshold-actions .threshold-control { padding: 0 16px; }

/* HIERARCHY: THE LIGHT MUST NOT SHOUT LOUDER THAN THE DOOR.
   Her signed-out screenshot made it plain - DAY|NIGHT was a solid cream pill, the highest
   contrast object on the page after the wordmark, while ROOMS / EXPLORE (the actual
   navigation) and SIGN IN sat quietly beside it in thin outlines. The least important
   control was the loudest. A chosen light is a preference, not a destination: it gets a
   soft fill that says "this one", not a spotlight. */
body.door-chrome .house-tools .light-choice .threshold-control[aria-pressed="true"] {
  background: rgba(248, 243, 231, .2);
  color: #fbf7ee;
}
body[data-theme="day"].door-chrome .house-tools .light-choice .threshold-control[aria-pressed="true"] {
  background: rgba(38, 27, 17, .13);
  color: #241a10;
}

/* THE PANEL, REPROPORTIONED TO HER MEASUREMENT.
   621x348 (mine) against 672x322 (the room's). Wider and shorter is the fix, and the
   height came almost entirely from a mistake: I had given every link `padding: 4px 0` on
   top of the column's existing 7px gap, so each row cost 35px where the room's costs 31.
   Fourteen rows. Now the room's width, no double spacing, tighter columns - and genuinely
   translucent, which it can afford to be now that the stacking is fixed. */
body.door-chrome .rooms-panel {
  width: min(672px, calc(100vw - 36px));
  max-height: min(66vh, 520px);
  background: color-mix(in srgb, var(--house-panel, #f6efe0) 84%, transparent);
  backdrop-filter: blur(30px) saturate(1.25);
  -webkit-backdrop-filter: blur(30px) saturate(1.25);
  border-color: rgba(244, 241, 234, .14);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .42);
  animation: panelIn .38s cubic-bezier(.16, 1, .3, 1);
  transform-origin: top right;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { body.door-chrome .rooms-panel { animation: none } }
body.door-chrome .rooms-panel > div { padding: 15px 18px 16px; gap: 5px; }
body.door-chrome .rooms-panel > div > span {
  font-size: 12px; letter-spacing: .15em; margin-bottom: 6px; opacity: .72;
}
body.door-chrome .rooms-panel a { font-size: var(--t-small); padding: 0; line-height: 1.62; }
body.door-chrome .rooms-panel .rooms-shared-actions { padding: 11px 18px; }
body.door-chrome .rooms-panel .rooms-shared-actions a { font-size: 12px; }
/* the browser's blue focus ring is not in this house - house.js focuses the first link
   when the menu opens, which is right for a keyboard, and the ring should look like it
   belongs to the page rather than to Chrome */
body.door-chrome .rooms-panel a:focus-visible {
  outline: 0;
  color: var(--accent, #dfb56e);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* the coin's heart takes the capsule's own ink instead of alert-red - on a page this
   quiet a saturated red reads as a notification badge, which is a promise the control
   does not keep. It warms only on hover, where warmth means "this is clickable". */
body.door-chrome .house-auth .house-auth-heart { color: inherit; opacity: .82; }
body.door-chrome .house-auth .house-auth-shelf:hover .house-auth-heart { color: #e0938a; opacity: 1; }

/* 3. THE SOUND CONTROL REPORTS ITSELF.
   Alone in the corner, "hear the morning" could be a link to an essay - nothing says
   audio. Three bars in CSS (no glyph, so no font has to cooperate) that sit still when
   the sound is off and MOVE while it plays. The control then tells you its own state
   instead of asking you to remember it. */
body.door-chrome .sndbars {
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: 11px; margin-right: 9px;
}
body.door-chrome .sndbars i { width: 2px; height: 4px; background: currentColor; opacity: .75; border-radius: 1px; }
body.door-chrome #thresholdSound[aria-pressed="true"] .sndbars i { animation: sndbar .9s ease-in-out infinite; }
body.door-chrome #thresholdSound[aria-pressed="true"] .sndbars i:nth-child(2) { animation-delay: .18s }
body.door-chrome #thresholdSound[aria-pressed="true"] .sndbars i:nth-child(3) { animation-delay: .36s }
@keyframes sndbar { 0%,100% { height: 3px } 50% { height: 11px } }
@media (prefers-reduced-motion: reduce) { body.door-chrome .sndbars i { animation: none !important } }

/* 4. THE TOP-LEFT LABEL IS GONE, at her suggestion and I agree with the reasoning.
   "A LIVING STUDIO · THE LIGHT STAYS ON" was twelve words of small caps competing with a
   wordmark that already says what this is - and its second half is a duller restatement
   of "come in, the light's on", which sits under that wordmark in her own handwriting and
   says it better. Removing a line that repeats a better line is subtraction, not loss.
   Hidden rather than deleted, and scoped to the door, so it is one line to bring back. */
body.door-chrome .threshold-top > .label { display: none; }

/* 5. THE COIN CARRIES AN INITIAL, not a heart (the heart stays in the footer's copy of
   the same control, where it sits beside the words "Your Shelf" and reads correctly). */
body.door-chrome .house-auth .house-auth-initial {
  font: 600 var(--t-small)/1 var(--qsans, Inter, system-ui, sans-serif);
  letter-spacing: .04em;
}
/* the footer's copy of this control is untouched: there the initial is hidden and the
   heart sits beside the words "Your Shelf", where a heart reads correctly */
.house-auth-initial { display: none; }
body.door-chrome .house-auth .house-auth-initial { display: inline-flex; }

/* HOW MUCH GLASS - her question, and the principle is worth stating because it settles
   the "consistent or not" part too.

   The panel is ONE component, but it opens onto two different grounds: paper in every
   room, a photograph on the door. The right answer is not one opacity everywhere - it is
   one MATERIAL everywhere, letting the backdrop do the varying. Glass over paper reads
   nearly solid because paper is flat and pale; the same glass over a dawn sky reads as
   glass, because there is something behind it worth seeing. Same rule, different result.
   That is consistency at the level that matters, and it is why the whole house could take
   this material without any room changing much.

   80% here rather than 84: the door is the one page with a picture behind the menu, and
   the stacking is fixed now, so it can afford to show it. */
body.door-chrome .rooms-panel {
  background: color-mix(in srgb, var(--house-panel, #f6efe0) 80%, transparent);
  backdrop-filter: blur(34px) saturate(1.3);
  -webkit-backdrop-filter: blur(34px) saturate(1.3);
}

/* THE SKY MARKS. A sun and a crescent, drawn - see the note in door-chrome.js for why
   these are not emoji. The pill they sit in gets narrower with them, which further quiets
   the control that should never have been the loudest thing on the page. */
body.door-chrome .house-tools .light-choice .threshold-control { padding: 0 12px; }
body.door-chrome .skymark { width: 17px; height: 17px; display: block; opacity: .62; transition: opacity .3s ease }
body.door-chrome .light-choice .threshold-control[aria-pressed="true"] .skymark { opacity: 1 }
body.door-chrome .light-choice .threshold-control:hover .skymark { opacity: .95 }
/* visually hidden, still read aloud - a mark with no caption at all is a bad control */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0 }
body.door-chrome .sndlabel { display: inline-block }

/* THE LIGHT TOGGLE, CONDENSED. Jane: "you can see that it's clearly all that space. Can
   we center it or condense it?" She was right - I swapped two words for two 17px marks
   and left the word-sized padding around them, so each half was a wide plate holding a
   small drawing. Square segments, mark centred, and the pill shrinks to what it holds. */
body.door-chrome .house-tools .light-choice { padding: 3px; }
body.door-chrome .house-tools .light-choice .threshold-control {
  width: 34px; padding: 0; height: 26px; min-height: 26px;
}
body.door-chrome .skymark { width: 16px; height: 16px; }

/* THE SPEAKER. Replaces the three bars, which read as an ellipsis rather than as sound.
   Waves only while it plays - the mark states its own condition. */
body.door-chrome .sndmark { width: 16px; height: 16px; margin-right: 9px; flex: 0 0 auto; opacity: .8 }
body.door-chrome .sndmark .w1, body.door-chrome .sndmark .w2 { opacity: 0; transition: opacity .35s ease }
body.door-chrome #thresholdSound[aria-pressed="true"] .sndmark .w1 { opacity: 1 }
body.door-chrome #thresholdSound[aria-pressed="true"] .sndmark .w2 { opacity: .7; animation: sndwave 1.8s ease-in-out infinite }
@keyframes sndwave { 0%,100% { opacity: .25 } 50% { opacity: .8 } }
@media (prefers-reduced-motion: reduce) { body.door-chrome .sndmark .w2 { animation: none } }
body.door-chrome #thresholdSound { padding: 0 15px 0 13px }

/* the segments were still being stretched by a min-width inherited from the threshold's
   own button styling, so `width` alone did nothing and the pill kept a word's worth of
   dead space to the right of the moon. Pinned on all three axes. */
body.door-chrome .house-tools .light-choice { width: fit-content; }
body.door-chrome .house-tools .light-choice .threshold-control {
  flex: 0 0 32px; min-width: 32px; max-width: 32px; width: 32px;
}

/* THE MARKS WERE FLUSH LEFT, AND THE CAUSE IS A MOVE I MADE.
   Measured: #dayButton x=1216.4 w=32, its mark also x=1216.4 - hard against the left edge
   instead of 8.5px in. When door-chrome.js lifted Day/Night into the navigation cluster,
   those buttons LEFT .threshold-actions, so every rule written as
   `.threshold-actions .threshold-control` quietly stopped matching them. They kept the
   size rules (written against .house-tools) and lost the centring rules. A control that
   moves house needs its styling to move with it. */
body.door-chrome .house-tools .light-choice .threshold-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font: 600 var(--t-label)/1 var(--qsans, Inter, system-ui, sans-serif);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(248, 245, 238, .72);
  text-shadow: none;
  transition: background .3s ease, color .3s ease;
}
body[data-theme="day"].door-chrome .house-tools .light-choice .threshold-control {
  color: rgba(38, 27, 17, .6);
}