/* The Hall: ten painted stretches of corridor, each already its world, and
   the far wall at the end. You walk it. Scroll pushes into each painting and
   dissolves into the next; the mouse turns your head; the door in each
   painting opens in place when you reach for it. Desktop only; phones keep
   the door bank below. */

.hw-walk { display: none; }

/* the hour of the hall: 0 at midday, 1 late at night, set from the visitor's clock by hall-walk.mjs.
   Registered so the lighting can crossfade over it. */
@property --hw-night { syntax: '<number>'; inherits: true; initial-value: 0; }

@media (min-width: 320px) {
  .hall-body .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    background: linear-gradient(180deg, rgba(6,6,10,.72), rgba(6,6,10,0)); border-bottom: 0; }
  .hall { overflow: visible; }
  /* 1300vh: eleven stretches of about 110vh each, double the original 55vh, so every
     room holds a few seconds of scrolling before the doorway beat (was 700vh, 2026-09-25) */
  .hw-walk { display: block; position: relative; height: 1300vh; z-index: 3; }
  .hw-stage { position: sticky; top: 0; height: 100vh; min-height: 0; overflow: hidden; background: #050407; --hw-night: 0; }
  .hw-stage.hw-clock { transition: --hw-night 90s linear; }
  .hw-strip { position: absolute; inset: 0; z-index: 1; }
  .hw-stop { position: absolute; inset: 0; visibility: hidden; opacity: 0; will-change: opacity; }
  .hw-stop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transform-origin: 50% 50%; will-change: transform; display: block; }
  .hw-stop .hw-open { opacity: 0; transition: opacity .9s ease; z-index: 2; }
  .hw-stop.open .hw-open { opacity: 1; }
  .hw-stop .hw-brush { inset: auto; left: 50%; bottom: -6%; width: clamp(180px, 16vw, 320px); height: auto;
    transform: translate(-50%, 40%) rotate(-8deg); opacity: 0; transition: transform 1.4s cubic-bezier(.2,.7,.2,1), opacity 1s ease;
    filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); z-index: 3; }
  .hw-stop.arrived .hw-brush { opacity: 1; transform: translate(-50%, 0) rotate(-4deg); }
  .hw-strip::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: radial-gradient(ellipse 72% 62% at 50% 50%, transparent 46%, rgb(3 2 5 / calc(.55 + .18 * var(--hw-night))) 100%); }
  /* the hour's light, between the paintings and the doorway veil: the shade cools the shadows and
     dims the windows after dark, the glow is the lamps burning brighter, the day is daylight from above */
  .hw-hour { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .hw-hour.shade { mix-blend-mode: multiply; opacity: calc(var(--hw-night) * .42);
    background: linear-gradient(180deg, #2a3358 0%, #2b2a44 55%, #1e1a2e 100%); }
  .hw-hour.glow { mix-blend-mode: screen; opacity: calc(var(--hw-night) * .5);
    background: radial-gradient(ellipse 110% 64% at 50% 10%, rgba(255,178,98,.42) 0%, rgba(255,150,70,.14) 50%, transparent 80%); }
  .hw-hour.day { mix-blend-mode: soft-light; opacity: calc((1 - var(--hw-night)) * .55);
    background: linear-gradient(180deg, #e4ebf7 0%, #e4ebf7 26%, rgba(228,235,247,0) 60%); }
  /* the doorway beat: the frame darkens toward the vanishing point, lit by the next world's accent */
  .hw-veil { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; will-change: opacity;
    background: radial-gradient(ellipse 62% 55% at 50% 50%, color-mix(in srgb, var(--accent, #d4a84c) 45%, transparent) 0%,
      rgba(5,4,7,.45) 40%, rgba(5,4,7,.97) 100%); }

  /* the paintings carry their own worlds now; the old floating creature layers stay off */
  .hall-body[data-hall-walk] .hall-world { display: none !important; }
  .hall-body[data-hall-walk] .hall-atmos { z-index: 4; }

  /* the door you reach for */
  .hw-hot { position: absolute; left: 0; top: 0; width: 10px; height: 10px; z-index: 8; display: none;
    cursor: pointer; text-decoration: none; border-radius: 3px; }
  .hw-hot.on { display: block; }
  /* the title at the mouth of the hall */
  .hw-title { position: absolute; left: clamp(24px, 4vw, 72px); bottom: 10vh; z-index: 10; max-width: min(46vw, 760px); pointer-events: none;
    transition: opacity .6s ease, transform .8s ease; }
  .hwt-eyebrow { display: block; font-family: var(--font-ui); font-size: 12px; letter-spacing: .5em; text-transform: uppercase;
    color: var(--accent, #d4a84c); margin-bottom: 14px; text-shadow: 0 2px 12px #000; }
  .hwt-h { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: clamp(36px, 4.4vw, 72px);
    line-height: .98; letter-spacing: -.02em; color: #ece7db; margin: 0 0 14px; text-shadow: 0 6px 40px rgba(0,0,0,.9); }
  .hwt-h em { color: var(--accent, #d4a84c); font-style: italic; }
  .hwt-deck { font-family: var(--font-body); font-style: italic; font-size: clamp(16px, 1.3vw, 20px); color: #cfc9bb;
    margin: 0; text-shadow: 0 2px 12px #000; }

  /* what you reach for, named */
  .hw-hud { position: absolute; left: 50%; bottom: 9vh; transform: translate(-50%, 12px); z-index: 11; text-align: center;
    pointer-events: none; opacity: 0; transition: opacity .45s ease, transform .7s cubic-bezier(.22,.9,.25,1); max-width: 44ch; }
  .hw-hud.on { opacity: 1; transform: translate(-50%, 0); }
  .hw-hud .hh-no { display: block; font-family: var(--font-ui); font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
    color: #9a9482; margin-bottom: 10px; text-shadow: 0 2px 12px #000; }
  .hw-hud .hh-name { display: block; font-family: var(--font-display); font-weight: 500; font-style: italic;
    font-size: clamp(34px, 3.4vw, 60px); line-height: 1; color: var(--accent, #d4a84c); letter-spacing: -.015em; margin-bottom: 12px;
    text-shadow: 0 4px 30px rgba(0,0,0,.95), 0 0 40px color-mix(in srgb, var(--accent, #d4a84c) 40%, transparent); }
  .hw-hud .hh-sub { display: block; font-family: var(--font-body); font-style: italic; font-size: 16px; line-height: 1.5;
    color: #ece7db; opacity: .85; text-shadow: 0 2px 12px #000; margin-bottom: 12px; }
  .hw-hud .hh-go { display: inline-block; font-family: var(--font-ui); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
    color: var(--accent, #d4a84c); border: 1px solid color-mix(in srgb, var(--accent, #d4a84c) 50%, transparent); padding: 8px 14px;
    transition: opacity .4s; }
  .hw-hud.near .hh-go { opacity: 0; }
  /* visitor trails: how many have walked this stretch, a whisper under the name */
  .hw-hud .hh-walked { display: block; font-family: var(--font-ui); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
    color: #9a9482; opacity: .72; margin: -2px 0 12px; text-shadow: 0 2px 12px #000; }
  .hw-hud .hh-walked:empty { display: none; }
  .hwt-walked { display: block; font-family: var(--font-ui); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
    color: #9a9482; opacity: .72; margin-top: 16px; text-shadow: 0 2px 12px #000; }

  /* the far wall */
  .hw-end { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); z-index: 12; text-align: center;
    opacity: 0; pointer-events: none; transition: opacity .8s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
  .hw-end.on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
  .hwe-line { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: clamp(44px, 6vw, 96px);
    line-height: .95; letter-spacing: -.02em; color: #2a2118; margin: 0 0 28px; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
  .hwe-cta { display: inline-block; font-family: var(--font-ui); font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
    color: #f4efe4; background: #2a2118; border: 0; padding: 16px 30px; cursor: pointer; text-decoration: none;
    transition: transform .2s, box-shadow .2s; }
  .hwe-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); }
  /* the far door: a second plaque on the far wall, ink on the plaster like the line above it */
  .hwe-door { display: block; width: max-content; max-width: 100%; margin: 34px auto 0; padding: 14px 26px 15px; border: 1px solid rgba(42,33,24,.42);
    text-decoration: none; text-align: center; transition: border-color .35s ease, transform .35s ease; }
  .hwe-door:hover, .hwe-door:focus-visible { border-color: #2a2118; transform: translateY(-2px); outline: none; }
  .hwd-name { display: block; font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.05; letter-spacing: -.015em; color: #2a2118; }
  .hwd-sub { display: block; font-family: var(--font-body); font-style: italic; font-size: 14px; line-height: 1.4; color: #4a3e30; margin-top: 6px; }
  /* through the far door: the veil closes over the hall, then the other hall opens */
  .hw-stage.hw-leaving .hw-veil { transition: opacity .75s ease; }
  .hw-stage.hw-leaving .hw-end, .hw-stage.hw-leaving .hw-hud, .hw-stage.hw-leaving .hw-sound, .hw-stage.hw-leaving .hw-fx { opacity: 0 !important; transition: opacity .5s ease; }
  /* an arrival through the far door: the hall opens with its veil already lifting */
  .hw-arrival { position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: 1; transition: opacity 1.6s ease .15s;
    background: radial-gradient(ellipse 62% 55% at 50% 50%, color-mix(in srgb, var(--accent, #d4a84c) 45%, transparent) 0%,
      rgba(5,4,7,.45) 40%, rgba(5,4,7,.97) 100%); }
  .hw-arrival.lift { opacity: 0; }

  .hw-hint { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); z-index: 11; font-family: var(--font-ui);
    font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #9a9482; pointer-events: none; opacity: 0;
    animation: hw-hint 1.2s ease 1.8s forwards; transition: opacity .6s; }
  .hw-hint kbd { display: inline-block; margin: 0 14px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.25); border-radius: 3px;
    color: #ece7db; font-family: inherit; }
  .hw-hint.off { opacity: 0 !important; animation: none; }
  /* the sound of each world, opt in; sits where the HUD's own labels sit */
  .hw-sound { position: absolute; right: clamp(24px, 4vw, 72px); bottom: 4vh; z-index: 12; font-family: var(--font-ui); font-size: 10px;
    letter-spacing: .3em; text-transform: uppercase; color: #9a9482; background: rgba(6,6,10,.45); border: 1px solid rgba(255,255,255,.18);
    padding: 8px 14px; cursor: pointer; transition: color .3s, border-color .3s; }
  .hw-sound[aria-pressed="true"] { color: #d4a84c; border-color: rgba(212,168,76,.6); }
  .hw-sound:hover { color: #ece7db; border-color: #ece7db; }
  .hw-sound:focus-visible { outline: none; color: #ece7db; border-color: #ece7db; box-shadow: 0 0 0 2px rgba(236,231,219,.6); }
  @keyframes hw-hint { to { opacity: 1; } }

  /* the old hero is the walk now; the door bank stays beneath as the key board */
  .hall-body[data-hall-walk] .hall-hero { display: none; }
  .hall-body[data-hall-walk] .hall-inner { padding-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-stop, .hw-stop img, .hw-hud, .hw-end, .hw-title { transition: none !important; }
  .hw-stage.hw-clock { transition: none; }
  .hw-hint, .hw-veil, .hw-arrival { display: none; }
  .hwe-door { transition: none; }
}

/* ---- below the walk: the key board, the relay, the close ---- */
.kb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; margin: 0 0 18px; }
.kb-label { font-family: var(--font-ui); font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--hall-accent, #d4a84c); }
.kb-sub { font-family: var(--font-display); font-style: italic; font-size: 16px; color: #9a9482; }
.doors.kb { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; transform: none !important; perspective: none; }
.doors.kb .portal { position: relative; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; gap: 2px 14px; align-items: center;
  padding: 12px 16px 12px 12px; background: rgba(9,8,12,.62); border: 1px solid rgba(255,255,255,.08); text-decoration: none; color: inherit;
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  transition: background .5s ease, border-color .5s ease, transform .5s cubic-bezier(.22,.9,.25,1), box-shadow .5s ease; aspect-ratio: auto; }
.doors.kb .portal:hover, .doors.kb .portal:focus-visible { background: rgba(12,10,16,.78); border-color: var(--accent); transform: translateY(-3px); outline: none;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.9), 0 0 0 1px var(--accent), 0 0 60px -20px var(--accent); }
.doors.kb:hover .doors.kb .portal { filter: none; }
.kb-thumb { grid-row: 1 / 3; width: 56px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; box-shadow: 0 8px 20px -6px rgba(0,0,0,.9); }
.kb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s cubic-bezier(.22,.9,.25,1); }
.doors.kb .portal:hover .kb-thumb img { transform: scale(1.08); }
.kb-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kb-no { font-family: var(--font-ui); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #9a9482; }
.kb-name { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: 19px; line-height: 1.1; color: #ece7db; transition: color .4s; }
.doors.kb .portal:hover .kb-name { color: var(--accent); }
.kb-subline { font-family: var(--font-body); font-style: italic; font-size: 12px; line-height: 1.35; color: #9a9482; }
.kb-walked { display: block; font-family: var(--font-ui); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #9a9482; opacity: .7; margin-top: 6px; }
.kb-state { grid-column: 2; font-family: var(--font-ui); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #9a9482; margin-top: 4px; }
.kb-state strong { font-family: var(--font-display); font-style: italic; font-size: 18px; letter-spacing: 0; color: var(--accent); margin-right: 6px; font-weight: 500; }
.kb-state em { font-style: normal; color: var(--accent); }

.ra-relay { position: relative; margin: 72px auto 0; padding: 56px 0 64px; }
.ra-relay::before { content: ""; position: absolute; inset: 0 -100vw; background: linear-gradient(180deg, rgba(6,6,10,0) 0%, rgba(6,6,10,.55) 18%, rgba(6,6,10,.55) 82%, rgba(6,6,10,0) 100%); pointer-events: none; }
.ra-relay > * { position: relative; }
.rr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.rr-label { font-family: var(--font-ui); font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--hall-accent, #d4a84c); }
.rr-sub { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2vw, 30px); color: #ece7db; letter-spacing: -.01em; }
.rr-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; counter-reset: rr; }
.rr-step { position: relative; padding: 76px 0 0; min-height: 200px; }
.rr-step::before { counter-increment: rr; content: counter(rr, upper-roman); position: absolute; left: 0; top: 0; font-family: var(--font-ui); font-size: 11px; letter-spacing: .2em; color: #9a9482; }
.rr-num { position: absolute; left: -6px; top: -28px; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(96px, 9vw, 168px); line-height: 1; letter-spacing: -.04em; color: var(--hall-accent, #d4a84c); opacity: .16; pointer-events: none; transition: opacity .6s, transform .8s cubic-bezier(.22,.9,.25,1); }
.rr-step:hover .rr-num { opacity: .34; transform: translateY(-6px); }
.rr-ttl { display: block; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(24px, 2.1vw, 32px); line-height: 1.05; color: #ece7db; letter-spacing: -.015em; margin-bottom: 12px; }
.rr-txt { display: block; font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: #ece7db; opacity: .78; max-width: 30ch; }
.rr-track { position: relative; height: 1px; margin: 40px 0 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28) 12%, rgba(255,255,255,.28) 88%, transparent); }
.rr-baton { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--hall-accent, #d4a84c);
  box-shadow: 0 0 8px var(--hall-accent, #d4a84c), 0 0 22px var(--hall-accent, #d4a84c); animation: rr-run 14s cubic-bezier(.45,0,.2,1) infinite; }
.rr-baton::after { content: ""; position: absolute; right: 100%; top: 50%; height: 1px; width: 160px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, var(--hall-accent, #d4a84c)); opacity: .7; }
@keyframes rr-run { 0% { left: 0; opacity: 0; } 4% { opacity: 1; } 22% { left: 24%; } 26% { left: 24%; } 46% { left: 49%; } 50% { left: 49%; } 70% { left: 74%; } 74% { left: 74%; } 94% { left: 99%; opacity: 1; } 100% { left: 100%; opacity: 0; } }

.ra-close { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 96px 0 40px; text-align: center; }
.rc-cta { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(56px, 8vw, 132px); line-height: .9; letter-spacing: -.03em;
  color: var(--hall-accent, #d4a84c); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
  text-shadow: 0 4px 30px rgba(0,0,0,.9); transition: color .4s, text-shadow .6s; }
.rc-cta::after { content: ""; display: block; height: 1px; width: 0; margin: 14px auto 0; background: var(--hall-accent, #d4a84c); transition: width .7s cubic-bezier(.22,.9,.25,1); }
.rc-cta:hover { color: #ece7db; text-shadow: 0 4px 30px rgba(0,0,0,.9), 0 0 90px rgb(var(--hall-r) var(--hall-g) var(--hall-b) / .6); }
.rc-cta:hover::after { width: 100%; }
.rc-meta { font-family: var(--font-ui); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #9a9482; }
.rc-meta em { font-style: normal; color: var(--hall-accent, #d4a84c); padding: 0 .4em; }

@media (max-width: 1200px) { .doors.kb { grid-template-columns: repeat(3, 1fr); } .rr-steps { grid-template-columns: repeat(3, 1fr); } .rr-step { min-height: 0; } .rr-track { display: none; } }
@media (max-width: 720px) { .doors.kb { grid-template-columns: 1fr 1fr; } .rr-steps { grid-template-columns: 1fr 1fr; } .rr-num { font-size: 84px; top: -20px; } .ra-close { padding: 64px 0 24px; } }
@media (max-width: 480px) { .doors.kb { grid-template-columns: 1fr; } .rr-steps { grid-template-columns: 1fr; } .rr-step { padding-top: 64px; } }
@media (prefers-reduced-motion: reduce) { .rr-baton { animation: none; left: 0; } }

/* ---- the air of each world: particles on a canvas, and one soft light each ---- */
@media (min-width: 320px) {
  .hw-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
  .hw-light { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; mix-blend-mode: screen;
    filter: brightness(calc(.78 + .55 * var(--hw-night))); }
  .hw-light[data-world="deep"] { opacity: 1; background: radial-gradient(ellipse 40% 30% at 50% 0%, rgba(150,230,215,.22), transparent 70%); animation: hw-caustic 9s ease-in-out infinite alternate; }
  @keyframes hw-caustic { from { transform: translateX(-3%) scaleX(1); } to { transform: translateX(3%) scaleX(1.15); } }
  .hw-light[data-world="night_city"] { opacity: 1; background: linear-gradient(90deg, rgba(242,95,176,.10), transparent 40%, transparent 60%, rgba(80,160,255,.10)); animation: hw-neon 3.6s steps(1, end) infinite; }
  @keyframes hw-neon { 0%, 88%, 100% { opacity: 1; } 89% { opacity: .55; } 91% { opacity: 1; } 93% { opacity: .7; } 94% { opacity: 1; } }
  .hw-light[data-world="wild"] { opacity: 1; background: radial-gradient(ellipse 30% 60% at 62% 0%, rgba(255,240,190,.14), transparent 70%); animation: hw-shaft 12s ease-in-out infinite alternate; }
  @keyframes hw-shaft { from { transform: translateX(-2%); } to { transform: translateX(2%); } }
  .hw-light[data-world="far_out"] { opacity: 1; background: radial-gradient(ellipse 50% 40% at 20% 40%, rgba(201,166,255,.10), transparent 70%); }
  .hw-light[data-world="realm"] { opacity: 1; background: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(255,190,100,.14), transparent 70%); animation: hw-candle 2.8s ease-in-out infinite alternate; }
  @keyframes hw-candle { 0% { opacity: .8; } 35% { opacity: 1; } 55% { opacity: .85; } 100% { opacity: 1; } }
  .hw-light[data-world="dreamscape"] { opacity: 1; background: radial-gradient(ellipse 40% 40% at 50% 20%, rgba(205,180,240,.12), transparent 70%); animation: hw-breathe 8s ease-in-out infinite alternate; }
  @keyframes hw-breathe { from { opacity: .6; } to { opacity: 1; } }
  .hw-light[data-world="carnival"] { opacity: 1; background: radial-gradient(ellipse 70% 40% at 50% 10%, rgba(255,210,63,.12), transparent 70%); animation: hw-bulbs 1.6s ease-in-out infinite alternate; }
  @keyframes hw-bulbs { from { opacity: .7; } to { opacity: 1; } }
  .hw-light[data-world="hometown"] { opacity: 1; background: radial-gradient(ellipse 30% 40% at 18% 20%, rgba(255,200,120,.16), transparent 70%); animation: hw-candle 3.4s ease-in-out infinite alternate; }
  .hw-light[data-world="workshop"] { opacity: 1; background: radial-gradient(ellipse 40% 50% at 55% 15%, rgba(255,220,160,.12), transparent 70%); }
  .hw-light[data-world="tiny_worlds"] { opacity: 1; background: radial-gradient(ellipse 30% 40% at 25% 45%, rgba(255,210,130,.16), transparent 70%); animation: hw-candle 2.2s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: reduce) { .hw-light { animation: none !important; } .hw-fx { display: none; } }

/* ---- back to the hallway: the door you came through closes behind you ---- */
.hw-return { display: none; }
@media (min-width: 320px) {
  .hw-return { position: fixed; inset: 0; z-index: 60; background: #050407; transition: opacity 1.1s ease; }
  .hw-return.active { display: block; }
  .hw-return.fadeout { opacity: 0; }
  .hwr-scene { position: absolute; inset: 0; overflow: hidden; }
  .hw-return.active .hwr-scene { animation: hwr-pull 4.6s cubic-bezier(.2,.6,.2,1) forwards; }
  @keyframes hwr-pull { from { transform: scale(1.1); } to { transform: scale(1); } }
  .hwr-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pan, 50% 50%); display: block; }
  .hwr-open { opacity: 1; transition: opacity 1.6s ease; }
  .hw-return.closing .hwr-open { opacity: 0; }
  .hwr-text { position: absolute; left: clamp(24px, 4vw, 72px); bottom: 10vh; z-index: 2; opacity: 0; animation: hwr-text 0.9s ease 1.4s forwards; }
  @keyframes hwr-text { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .hwr-over { display: block; font-family: var(--font-ui); font-size: 12px; letter-spacing: .5em; text-transform: uppercase; color: var(--accent, #d4a84c); margin-bottom: 14px; text-shadow: 0 2px 12px #000; }
  .hwr-sub { display: block; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(34px, 4vw, 64px); line-height: 1; letter-spacing: -.02em; color: #ece7db; text-shadow: 0 6px 40px rgba(0,0,0,.9); }
}

/* ---- phones: the same walk, touched ---- */
html.walk-touch .hw-hud .hh-go { font-size: 0; }
html.walk-touch .hw-hud .hh-go::before { content: "Tap the door to enter"; font-size: 10px; }
html.walk-touch .hw-hint kbd, html.walk-touch .hw-hint span { display: none; }
@media (max-width: 639px) {
  .hw-title, .hwr-text { left: 20px; right: 20px; max-width: none; }
  .hw-hud { max-width: 90vw; }
  .hw-hud .hh-sub { font-size: 14px; }
  .hall-body[data-hall-walk] .hall-hero { display: none; }
}

/* almost hung (2026-09-30): the walls one pair of hands from done, under the door board */
.ra-almost { position: relative; margin: 56px auto 0; }
.al-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.06); }
.al-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 16px; background: #0a0a0d; text-decoration: none; color: inherit; min-width: 0; transition: background .25s ease, transform .25s ease; }
.al-card:hover, .al-card:focus-visible { background: #121218; transform: translateY(-1px); outline: none; }
.al-card:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); }
.al-room { font-family: var(--font-ui); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #9a9482; }
.al-title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 18px; line-height: 1.15; color: #ece7db; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.al-meter { display: flex; gap: 4px; margin-top: 4px; }
.al-meter i { display: block; height: 3px; flex: 1; background: rgba(255,255,255,.12); }
.al-meter i.on { background: var(--accent); }
.al-state { font-family: var(--font-ui); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #9a9482; }
.al-state strong { font-family: var(--font-display); font-style: italic; font-size: 18px; letter-spacing: 0; color: var(--accent); margin-right: 4px; font-weight: 500; }
.al-state em { font-style: normal; color: var(--accent); margin: 0 .3em; }
.al-go { margin-top: auto; padding-top: 8px; font-family: var(--font-ui); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 900px) { .al-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .al-grid { grid-template-columns: 1fr; } }