@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 12px/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 12px/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 12px/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; }