/* ============================================================
   THE INNER ROOM · the light register
   Loaded on this page only. Nardus Kruger's own room, held
   beside ROOT and never inside it. Same family of colours,
   inverted: the visitor steps out of the soil and into the light.

   Accessibility note, and the reason this file redefines gold:
   the ROOT gold (#c2973a) reads at 2.36:1 on cream, which fails
   for text. Every gold that carries WORDS on this page is
   therefore the deeper bronze (#7a5a1c, 5.55:1). The lighter
   gold survives only where it carries no meaning: rules,
   borders, the glow.
   ============================================================ */

.room-page {
  --ink: #1c1408;          /* body text on light */
  --ink-strong: #0f0c07;   /* headings */
  --ink-soft: #3a2910;     /* secondary text */
  --ink-faint: #6a4e2c;    /* tertiary, captions */
  --bronze: #7a5a1c;       /* gold that carries words */
  --bronze-deep: #6f5218;  /* gold that carries words, on hover */
  --page: #f5efe4;
  --page-warm: #e6d7be;
  --hair: rgba(58,41,16,0.18);

  background: var(--page);
  color: var(--ink);
}

/* A room has light in it. This is the light, laid on the paper. */
.room-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(230,215,190,0.55), transparent 65%);
}
/* Everything sits above the light. The skip link is the one exception:
   its position:absolute is what holds it off-screen until a keyboard
   finds it, and making it relative parked it permanently in the room.
   It stays in the HTML, it stays functional, it is simply not painted
   until Tab asks for it. */
.room-page > *:not(.skip-link) { position: relative; z-index: 1; }

.room-page ::selection { background: rgba(122,90,28,0.22); color: var(--ink-strong); }

/* ---------- the chrome changes too, so the room is felt ---------- */

.room-page .nav {
  background: rgba(245,239,228,0.92);
  border-bottom: 1px solid var(--hair);
}
.room-page .nav-word { color: var(--ink-strong); }
.room-page .nav-links a { color: var(--ink-soft); }
.room-page .nav-links a:hover,
.room-page .nav-links a[aria-current] { color: var(--bronze-deep); }

.room-page .inner-room-band {
  background: var(--page-warm);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.room-page .inner-room-band p { color: var(--ink-soft); }

.room-page a { color: var(--bronze); }
.room-page a:hover { color: var(--bronze-deep); text-decoration: underline; text-underline-offset: 4px; }

/* Two places where the room's bronze must not follow the link.
   The skip link keeps ROOT's dark chip, and bronze on that chip
   reads 2.36:1, so the only person who ever sees this link, the
   one arriving by keyboard, could not read it. It keeps the pale
   gold it was given. */
.room-page .skip-link { color: var(--gold-pale); }
.room-page a:focus-visible,
.room-page button:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 4px; }

.room-page h1, .room-page h2, .room-page h3 { color: var(--ink-strong); }
.room-page em { color: var(--ink-soft); font-style: italic; }
.room-page .eyebrow { color: var(--bronze); }
.room-page .rule {
  background: linear-gradient(to right, transparent, rgba(122,90,28,0.55), transparent);
  opacity: 0.5;
}

/* ---------- the header: his name, then the room ---------- */

.room-page .room {
  position: relative;
  padding: 104px 0 44px;
  text-align: center;
  overflow: hidden;
}
.room-page .room-light {
  position: absolute;
  top: -30%;
  left: 50%;
  right: auto;      /* the base rule sets inset:0; release it */
  bottom: auto;
  width: min(760px, 96vw);
  height: 520px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,0.9), rgba(245,239,228,0) 72%);
}
.room-title { margin: 0; }
.room-name {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: clamp(1.9rem, 5.4vw, 3.1rem);
  letter-spacing: 0.2em;
  color: var(--ink-strong);
  text-indent: 0.2em;          /* optical: tracking pushes right */
  line-height: 1.2;
}
.room-sub {
  display: block;
  margin-top: 20px;
  font-family: 'Cinzel', serif;
  font-size: clamp(0.66rem, 1.5vw, 0.82rem);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--bronze);
  text-indent: 0.5em;
}
.room-page .room .verse-line {
  margin-top: 30px;
  font-style: italic;
  color: var(--ink-faint);
  font-size: 0.95rem;
}

/* ---------- the door: this page's one miracle ----------
   The visitor arrives out of ROOT's darkness. The room is dark
   for a breath, then the door opens and the light is simply
   there. Pure CSS, so it cannot fail open. It runs only when
   html.js is set, which the bootstrap withholds from anyone who
   asked for reduced motion. They arrive in a room already lit,
   which is the same room.
------------------------------------------------------------ */

.enter { position: fixed; inset: 0; z-index: 200; pointer-events: none; visibility: hidden; }
html.js .enter { visibility: visible; }
html.js .enter.enter-done { visibility: hidden; }

.enter-leaf {
  position: absolute;
  top: -2%;
  bottom: -2%;
  width: 51%;
  background: linear-gradient(180deg, #0f0c07 0%, #1c1408 100%);
  will-change: transform;
}
.enter-leaf-l { left: 0; transform-origin: left center; }
.enter-leaf-r { right: 0; transform-origin: right center; }

.enter-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 62vh;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, transparent, rgba(238,223,166,0.95), transparent);
  filter: blur(1px);
  opacity: 0;
}

html.js .enter-leaf-l { animation: door-l 1.25s cubic-bezier(0.65, 0, 0.15, 1) 0.12s both; }
html.js .enter-leaf-r { animation: door-r 1.25s cubic-bezier(0.65, 0, 0.15, 1) 0.12s both; }
html.js .enter-glow   { animation: door-glow 1.1s ease-out 0.12s both; }
html.js .enter        { animation: door-clear 0.01s linear 1.5s both; }

@keyframes door-l   { from { transform: translate3d(0,0,0); } to { transform: translate3d(-101%,0,0); } }
@keyframes door-r   { from { transform: translate3d(0,0,0); } to { transform: translate3d(101%,0,0); } }
@keyframes door-glow {
  0%   { opacity: 0; width: 2px; }
  28%  { opacity: 1; width: 3px; }
  100% { opacity: 0; width: 40vw; }
}
@keyframes door-clear { to { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .enter { display: none; }
}

/* ---------- the well ---------- */

.room-page .well-head { text-align: center; margin: 20px 0 30px; }
.room-page .well-rings circle {
  fill: none;
  stroke: rgba(122,90,28,0.5);
  stroke-width: 1;
}
.room-page .well-head h2 { margin-top: 6px; letter-spacing: 0.16em; }

/* ---------- boxes, notes, the disclaimer ---------- */

.room-page .prose h3 { color: var(--bronze); }
.room-page .prose ul li::before { color: var(--bronze); }
.room-page .prose p { color: var(--ink); }

.room-page .note-box {
  border: 1px solid var(--hair);
  background: rgba(255,255,255,0.55);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset;
}
.room-page .note-box .note-label { color: var(--bronze); }
.room-page .note-box p { color: var(--ink-soft); }

.room-page blockquote {
  border-left: 2px solid var(--bronze);
  background: rgba(255,255,255,0.5);
  color: var(--ink-strong);
}
.room-page blockquote cite { color: var(--bronze); }

/* The disclaimer is the most important paragraph on the page.
   On light paper it can finally look like what it is: a plain,
   sober note, not a warning label. */
.room-page .disclaimer {
  border: 1px solid rgba(122,90,28,0.35);
  background: rgba(255,255,255,0.5);
  color: var(--ink-soft);
}

/* ---------- the threshold and the invitation ---------- */

.room-page .threshold { position: relative; }
.room-page .threshold::before,
.room-page .threshold::after { display: none; }
.room-page .threshold-light {
  position: absolute;
  inset: -10% -5% auto;
  height: 220px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,0.9), transparent 70%);
}

.room-page .slot {
  border: 1px solid rgba(122,90,28,0.3);
  background: rgba(255,255,255,0.55);
}
.room-page .slot p { color: var(--ink-soft); }

.room-page .btn {
  color: var(--bronze-deep);
  border: 1px solid rgba(122,90,28,0.45);
  background: rgba(255,255,255,0.6);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.room-page .btn:hover {
  background: var(--bronze-deep);
  color: #f5efe4;
  border-color: var(--bronze-deep);
}

/* ---------- footer, in the same light ---------- */

.room-page footer { border-top: 1px solid var(--hair); background: var(--page-warm); }
.room-page footer p { color: var(--ink-soft); }
.room-page footer .foot-links a { color: var(--ink-soft); }
.room-page footer .foot-links a:hover { color: var(--bronze-deep); }
/* The footer sits on the warmer paper, where the lighter bronze
   reads 4.48:1 and misses the line by a hair. The deeper bronze
   carries the address at 5.12:1. */
.room-page footer p a { color: var(--bronze-deep); }
.room-page footer .firewall { color: var(--ink-faint); }
.room-page footer .seed { opacity: 0.55; }

/* ---------- ROOT's darkness does not follow you in here ----------
   The desktop signature layer paints a cursor lamp and a night
   filter over the soil pages. Both belong to ROOT. In this room
   the light is already on. */

body.room-page .stage-lamp { display: none; }
html.stage.tod body.room-page::before { content: none; }

@media (max-width: 640px) {
  .room-page .room { padding: 76px 0 30px; }
  .room-name { letter-spacing: 0.14em; }
  .room-sub { letter-spacing: 0.36em; }
}