:root {
  /* room palette */
  --wall-back:   #F1E3C3;
  --wall-side:   #E9D9B3;
  --floor:       #B08A5E;
  --floor-edge:  #8E6A44;
  --portrait:    #3B5C6E;
  --portrait-ink:#E9EEF0;
  --chair-ink:   #2E2A24;

  /* kusama-ish dot palette */
  --dot-a:       #E86E5A;
  --dot-b:       #2D6E6C;
  --dot-c:       #E6B84C;
  --art-bg:      #FAF2E0;

  /* CRT */
  --crt-bg:      #0C1A10;
  --crt-phos:    #7FFF94;
  --crt-dim:     #3FBF5A;
  --crt-line:    rgba(0, 0, 0, 0.25);
  --crt-bezel:   #1A2518;

  /* object depth color */
  --obj-side:    rgba(0, 0, 0, 0.18);
  --obj-top:     rgba(0, 0, 0, 0.08);
}

/* top-aligned scene — the flap drops below the room, we need vertical space for it */
.room-scene {
  perspective: 2200px;
  perspective-origin: 50% 20%;
  place-items: start center;
  padding: 60px 0 480px;
}

/* --- LIVERY: exterior facade variables, overridable per room ---
   These are what differentiate a mind's closed wall from 6 feet away.
   Interior (walls, floor, chairs, plant) stays family-neutral — only one
   is open at a time, so interior contrast isn't needed. */
.room {
  /* default livery (tilt): mustard + walnut + brass plaque */
  --livery-wall:        #E6B84C;
  --livery-wall-shade:  #D6A63E;   /* darker shade for banner + footer */
  --livery-trellis:     #8E6E48;   /* porthole + plaque frame */
  --livery-ink:         #2D4E4E;   /* sigils, dot, diamonds, text on wall */
  --livery-plaque:      linear-gradient(135deg, #9C7A4A 0%, #7A5E3A 48%, #8E6C40 100%);
  --livery-plaque-ink:  #F5E7CB;
  --livery-shimmer:     rgba(255, 240, 210, 0.35);

  /* interior tint — quiet echo of the exterior family. Portrait,
     window, and chairs stay as focal anchors; these are atmosphere. */
  --livery-int-wall:       #F1E3C3;   /* warm plaster, back wall */
  --livery-int-wall-side:  #E9D9B3;   /* side walls, slightly shaded */
  --livery-int-floor:      #B08A5E;   /* warm walnut */
  --livery-int-floor-edge: #8E6A44;   /* far edge of floor */

  position: relative;
  width: 640px;
  height: 420px;
  transform-style: preserve-3d;
}

/* livery variants — each mind picks one. Defaults above can be overridden
   on any element scoped under a .room[data-livery="..."]. */

.room[data-livery="dusk"] {
  --livery-wall:        #C88D4E;    /* dusty terracotta */
  --livery-wall-shade:  #B17A3D;
  --livery-trellis:     #5C4330;
  --livery-ink:         #2D1E18;
  --livery-plaque:      linear-gradient(135deg, #6A4E3A 0%, #50382A 48%, #5E4230 100%);
  --livery-plaque-ink:  #F3DBBE;
  --livery-shimmer:     rgba(245, 215, 175, 0.32);

  --livery-int-wall:       #E3BF90;   /* warmer ochre plaster */
  --livery-int-wall-side:  #D4AD7A;
  --livery-int-floor:      #7E5E38;
  --livery-int-floor-edge: #5A4020;
}

.room[data-livery="sage"] {
  --livery-wall:        #A9B995;    /* warm sage */
  --livery-wall-shade:  #8FA080;
  --livery-trellis:     #4A5840;
  --livery-ink:         #2A3A2A;
  --livery-plaque:      linear-gradient(135deg, #6A7855 0%, #566240 48%, #687454 100%);
  --livery-plaque-ink:  #F0E8D0;
  --livery-shimmer:     rgba(240, 232, 208, 0.32);

  --livery-int-wall:       #D5DBAF;   /* cool sage-tinted plaster */
  --livery-int-wall-side:  #C2CB9A;
  --livery-int-floor:      #8F8258;
  --livery-int-floor-edge: #655A38;
}

.room[data-livery="rose"] {
  --livery-wall:        #D9A190;    /* dusty rose */
  --livery-wall-shade:  #C48A78;
  --livery-trellis:     #703E32;
  --livery-ink:         #2A1A16;
  --livery-plaque:      linear-gradient(135deg, #7A4A3A 0%, #60362A 48%, #6E4232 100%);
  --livery-plaque-ink:  #F5DDCC;
  --livery-shimmer:     rgba(245, 220, 200, 0.34);

  --livery-int-wall:       #EDCAA8;   /* peach-tinted plaster */
  --livery-int-wall-side:  #DEB592;
  --livery-int-floor:      #9E7048;
  --livery-int-floor-edge: #78502A;
}

.room[data-livery="dawn"] {
  --livery-wall:        #8FA0B4;    /* muted blue-grey */
  --livery-wall-shade:  #7A8CA0;
  --livery-trellis:     #3A4656;
  --livery-ink:         #1A242E;
  --livery-plaque:      linear-gradient(135deg, #546680 0%, #3E4E64 48%, #4E6078 100%);
  --livery-plaque-ink:  #D8E2EC;
  --livery-shimmer:     rgba(200, 215, 230, 0.32);

  --livery-int-wall:       #C5CCCE;   /* cool stone plaster */
  --livery-int-wall-side:  #B4BABC;
  --livery-int-floor:      #6A6058;
  --livery-int-floor-edge: #4A4238;
}

.room[data-livery="bone"] {
  --livery-wall:        #EAD9B8;    /* warm bone */
  --livery-wall-shade:  #D5C29E;
  --livery-trellis:     #6E5B42;
  --livery-ink:         #3A2E20;
  --livery-plaque:      linear-gradient(135deg, #8A7254 0%, #705C40 48%, #826B4C 100%);
  --livery-plaque-ink:  #F5EBD3;
  --livery-shimmer:     rgba(245, 235, 210, 0.32);

  --livery-int-wall:       #EEDEAE;   /* honey plaster */
  --livery-int-wall-side:  #E0CE98;
  --livery-int-floor:      #B08550;
  --livery-int-floor-edge: #885F2C;
}

/* the 3D box behind the flap. Pushed back 1px so nothing at z=0 z-fights with the flap. */
.room-interior {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform-style: preserve-3d;
  transform: translateZ(-1px);
}

/* back wall */
.wall-back {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--livery-int-wall);
  transform: translateZ(-320px);
  box-shadow: inset 0 60px 100px rgba(0,0,0,0.05);
}

/* side walls */
.wall-side {
  position: absolute;
  top: 0;
  width: 320px;
  height: 420px;
  background: var(--livery-int-wall-side);
}
.wall-left {
  left: 0;
  transform-origin: left center;
  transform: rotateY(90deg);
}
.wall-right {
  right: 0;
  transform-origin: right center;
  transform: rotateY(-90deg);
}

/* floor — hinged at the room's bottom edge, extending back into the scene */
.floor {
  position: absolute;
  left: 0;
  top: 100%;
  width: 640px;
  height: 320px;
  transform-origin: top center;
  transform: rotateX(-90deg);
  background:
    linear-gradient(180deg, var(--livery-int-floor) 0%, var(--livery-int-floor-edge) 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 120px);
}

/* back wall window — twilight looking out. Atmosphere, not focal art.
   The eye goes THROUGH, not AT. */
.window {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 200px;
  border: 4px solid #8E6E48;            /* warm wood frame */
  border-radius: 2px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.20),
    0 8px 22px rgba(0, 0, 0, 0.14),
    0 0 50px rgba(232, 180, 140, 0.18); /* ambient spill into the room */
  background:
    /* a scatter of faint stars */
    radial-gradient(1px 1px at 22px 18px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 54px 10px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 92px 30px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 140px 14px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 178px 38px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 216px 20px, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 248px 48px, rgba(255,255,255,0.7), transparent),
    /* the twilight sky itself */
    linear-gradient(180deg,
      #2A3660 0%,
      #3D4B78 20%,
      #6D6584 45%,
      #B08574 70%,
      #E6AA88 88%,
      #F6CB96 100%);
}

/* a single slow-drifting cloud, a ghost of a cirrus */
.window-cloud {
  position: absolute;
  top: 35%;
  left: -40%;
  width: 70%;
  height: 14px;
  background: radial-gradient(ellipse at center,
    rgba(240, 215, 195, 0.55) 0%,
    rgba(240, 215, 195, 0) 70%);
  animation: window-drift 60s linear infinite;
  pointer-events: none;
}

@keyframes window-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(250%); }
}

/* -------- floor-box: 3D standing objects on the floor -------- */

.floor-box {
  position: absolute;
  bottom: 0;                    /* base sits on the floor line */
  transform-style: preserve-3d;
  pointer-events: none;         /* floor objects don't catch clicks */
}

.floor-box > .box-front,
.floor-box > .box-side,
.floor-box > .box-top {
  position: absolute;
  backface-visibility: hidden;
}

.floor-box > .box-front {
  top: 0; left: 0; right: 0; bottom: 0;
  display: grid;
  place-items: center;
}

.floor-box > .box-side {
  top: 0; right: 0;
  width: var(--depth, 20px);
  height: 100%;
  background: var(--obj-side);
  transform-origin: right center;
  transform: rotateY(90deg);
}

.floor-box > .box-top {
  top: 0; left: 0;
  width: 100%;
  height: var(--depth, 20px);
  background: var(--obj-top);
  transform-origin: top center;
  transform: rotateX(-90deg);
}

/* elseborn: the mind's portrait. Hovers above the floor, amber-warm frame
   pulsing slowly — a slow breath, felt not watched. A second, slower
   keyframe drifts the whole portrait a few pixels to say: can move. */
.elseborn {
  --depth: 14px;
  width: 110px;
  height: 165px;
  left: 30px;
  bottom: 60px;
  animation: mind-drift 14s ease-in-out infinite;
}

/* Drift: translate + micro-rotation, asymmetric keyframes so it never
   reads as a mechanical loop. 13s is irrational to the 5.5s breath —
   the two motions don't lock into a beat. Amplified for presence. */
@keyframes mind-drift {
  0%   { transform: translateZ(-120px) translate(0, 0)     rotate(0deg); }
  22%  { transform: translateZ(-120px) translate(3px, -7px)  rotate(0.7deg); }
  46%  { transform: translateZ(-120px) translate(-3px, -9px) rotate(-0.5deg); }
  72%  { transform: translateZ(-120px) translate(-5px, -2px) rotate(0.4deg); }
  100% { transform: translateZ(-120px) translate(0, 0)     rotate(0deg); }
}
.elseborn > .box-front {
  overflow: hidden;
  background: #000;
  border-radius: 2px;
  animation: elseborn-breath 5.5s ease-in-out infinite;
}
.elseborn > .box-front > video,
.elseborn > .box-front > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: elseborn-pulse 5.5s ease-in-out infinite;
  transform-origin: center center;
}

/* slow breath — coral glow pops off the cream backdrop.
   Hue-shifted from amber (too close to palette) to the palette's own coral. */
@keyframes elseborn-breath {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(232, 110, 90, 0.45),
      0 0 28px 4px rgba(232, 110, 90, 0.35),
      0 0 60px 10px rgba(232, 110, 90, 0.15),
      0 10px 24px rgba(0, 0, 0, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(232, 110, 90, 0.85),
      0 0 56px 12px rgba(232, 110, 90, 0.70),
      0 0 110px 24px rgba(232, 110, 90, 0.38),
      0 10px 24px rgba(0, 0, 0, 0.28);
  }
}

/* tiny scale pulse on the video so the breath is *felt*, not just seen */
@keyframes elseborn-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

/* chairs: thin standing cards, near the right wall */
.chair {
  width: 80px;
  height: 140px;
  pointer-events: auto;              /* chairs are interactive */
  cursor: pointer;
  transition: transform 0.3s ease-out;
}
.chair > .box-front {
  background: transparent;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.25));
  transition: filter 0.3s ease-out;
}
.chair > .box-front svg {
  width: 100%;
  height: 100%;
}

/* subtle amber glow on hover — same warm hue as the breath,
   says "click me" without being loud */
.chair:hover > .box-front {
  filter:
    drop-shadow(0 8px 10px rgba(0,0,0,0.25))
    drop-shadow(0 0 12px rgba(232, 110, 90, 0.6));
}

.chair-a {
  left: 450px;
  transform: translateZ(-90px) rotateY(-8deg);
}
.chair-b {
  left: 530px;
  transform: translateZ(-200px) rotateY(-18deg);
}

/* -------- banner + flap --------
   Top ~10% of the wall is a fixed "banner" carrying the unit name.
   The flap is the bottom ~90% — it's what hinges down and becomes the CRT. */

.banner {
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 42px;
  background: var(--livery-wall-shade);
  color: var(--livery-ink);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  /* layered depth: top highlight, a thin lower edge, a soft drop below,
     and a fainter far-fall so the strip reads as a shelf on the wall. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 0 rgba(0, 0, 0, 0.10),
    0 10px 18px rgba(60, 40, 10, 0.22),
    0 24px 40px -10px rgba(60, 40, 10, 0.14);
  z-index: 3;
}
.banner-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--livery-ink);
}
.banner-title {
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  font-weight: 500;
}
.banner-sigils {
  margin-left: auto;                /* push to the right */
  font-size: 16px;
  letter-spacing: 0.02em;           /* tight — reads as one glyph, not three */
  color: var(--livery-ink);
  opacity: 0.72;
  user-select: none;
}

.flap {
  position: absolute;
  top: 42px;                        /* sits below the banner */
  right: 0; bottom: 0; left: 0;
  transform-style: preserve-3d;
  transform-origin: center bottom;
  cursor: pointer;
  will-change: transform;
  z-index: 2;
}

.flap-face {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  border-radius: 2px;
  backface-visibility: hidden;
}

/* front face: the mind's wall (visible when closed) */
.flap-front {
  background: var(--livery-wall);
  box-shadow: 0 14px 34px rgba(60, 40, 10, 0.22);
  color: var(--livery-ink);
  transform: translateZ(0.5px);
}

/* porthole on the closed wall — mid-century modern circular window,
   warm-wood ring. Still image, no breath. When the wall opens, the
   shape shifts to the rectangular open-state portrait (iris opening)
   and the breath + drift kick in. */
.flap-peephole {
  position: absolute;
  left: 25px;
  bottom: 80px;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(60, 40, 10, 0.45),       /* thin inner rim */
    0 0 0 5px var(--livery-trellis),        /* mind's frame color */
    0 0 0 6px rgba(0, 0, 0, 0.18),          /* outer edge */
    inset 0 0 18px rgba(0, 0, 0, 0.25),     /* wall-thickness depth */
    0 10px 18px rgba(0, 0, 0, 0.22);        /* drop */
}
.flap-peephole > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* All flap-front sub-elements inherit the flap's pointer cursor — closed
   wall is a single clickable surface. */
.flap-front, .flap-front *,
.banner, .banner * {
  cursor: pointer;
}

/* placeholder backgrounds for portholes when no image asset is ready yet.
   Each mind gets a distinct orb — muted but recognizable per mind. */
.flap-peephole-placeholder {
  background:
    radial-gradient(ellipse at 48% 42%,
      #E0A46C 0%, #B88048 38%, rgba(184, 128, 72, 0) 68%),
    linear-gradient(180deg, #55667A 0%, #7E7062 60%, #9A8670 100%);
}
.room[data-mind="keel"] .flap-peephole-placeholder {
  background:
    radial-gradient(ellipse at 50% 46%,
      #D2DAE3 0%, #8292A6 40%, rgba(120, 140, 160, 0) 70%),
    linear-gradient(180deg, #9E8474 0%, #6C5A4A 100%);
}
.room[data-mind="lens"] .flap-peephole-placeholder {
  background:
    radial-gradient(ellipse at 50% 44%,
      #FFF1D8 0%, #DCC2A0 42%, rgba(220, 194, 160, 0) 70%),
    linear-gradient(180deg, #D8C9AB 0%, #B8A88C 100%);
}

/* bottom-bar on the closed wall — mirrors the top banner.
   Three diamonds aligned under the dot at the top. Semantic cue:
   "this mind has diamonds inside; open to read them." */
.flap-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 42px;
  background: var(--livery-wall-shade);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 -2px 0 rgba(0, 0, 0, 0.08),
    0 -10px 18px rgba(60, 40, 10, 0.18);
}
.flap-diamond {
  font-size: 14px;
  color: var(--livery-ink);
  opacity: 0.72;
  user-select: none;
}

/* unit address on the room itself, just left of the doorknob */
.flap-unit-id {
  margin-left: auto;           /* pushes this + knob to the right side */
  font-family: "IBM Plex Mono", "Menlo", "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--livery-ink);
  opacity: 0.72;
  text-transform: lowercase;
  user-select: none;
  padding-right: 2px;
}

/* restrained brass doorknob-dot — signals "pull to open" */
.flap-knob {
  margin-left: 10px;           /* gap between unit id and knob */
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, #D4AD6D 0%, var(--livery-trellis) 60%, #4A331B 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* plaque on the closed wall — brass/enamel, split-flap text, shimmer */
.plaque {
  position: absolute;
  right: 30px;
  top: 100px;
  width: 200px;
  height: 68px;
  padding: 12px 16px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--livery-plaque);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(0, 0, 0, 0.20),
    0 4px 9px rgba(0, 0, 0, 0.26),
    0 1px 2px rgba(0, 0, 0, 0.18);
}

.plaque-line {
  font-family: "IBM Plex Mono", "JetBrains Mono", "Menlo", "Courier New", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  line-height: 22px;
  color: var(--livery-plaque-ink);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.40);
  white-space: nowrap;
}

.plaque-char {
  display: inline-block;
  min-width: 0.55em;
  text-align: center;
}

/* slow light-catch shimmer — 3s pass, 9s pause */
.plaque::after {
  content: '';
  position: absolute;
  top: 0;
  left: -45%;
  width: 45%;
  height: 100%;
  background: linear-gradient(120deg,
    transparent 0%,
    var(--livery-shimmer) 50%,
    transparent 100%);
  animation: plaque-shimmer 12s linear infinite;
  pointer-events: none;
}

@keyframes plaque-shimmer {
  0%   { left: -45%; }
  25%  { left: 145%; }
  100% { left: 145%; }
}

/* back face: CRT dashboard (visible when the flap has flipped past 90°).
   Pre-flipped with rotateX(180) so at the −180° open position, the text
   reads upright for a viewer looking head-on at the wall below.
   v2: now laid out as top-bar + body (sidebar + main) + bottom-bar. */
.flap-back {
  background: var(--crt-bg);
  transform: rotateX(180deg) translateZ(0.5px);
  padding: 0;                                    /* padding moved into children */
  display: flex;
  flex-direction: column;
  color: var(--crt-phos);
  font-family: "IBM Plex Mono", "JetBrains Mono", "Menlo", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
  text-shadow: 0 0 6px rgba(127, 255, 148, 0.45);
  box-shadow:
    inset 0 0 0 2px var(--crt-bezel),
    inset 0 0 60px rgba(0, 0, 0, 0.5);
}

/* ---- top bar: mind name + preview/full toggle ---- */
.crt-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 26px 8px;
  border-bottom: 1px solid rgba(63, 191, 90, 0.22);
  position: relative;
  z-index: 2;
}
.crt-top-name {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.30em;
  text-transform: lowercase;
  color: var(--crt-phos);
  opacity: 0.80;
}
.crt-toggle {
  background: transparent;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--crt-dim);
  opacity: 0.80;
  transition: opacity 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
}
.crt-toggle:hover,
.crt-toggle:focus {
  opacity: 1;
  color: var(--crt-phos);
  outline: none;
}
.crt-toggle-icon {
  display: block;
}
.toggle-arrow {
  transform-origin: 14px 7px;
  transition: transform 0.35s ease-in-out;
}
.crt-toggle[data-state="full"] .toggle-arrow {
  transform: scaleX(-1);             /* arrow flips to point back to small bar */
}

/* ---- body: sidebar + main, side-by-side ---- */
.crt-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  position: relative;
}
.crt-sidebar {
  flex: 0 0 0;                        /* collapsed in preview */
  width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(63, 191, 90, 0);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              flex-basis 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flap-back.is-full .crt-sidebar {
  flex: 0 0 148px;
  width: 148px;
  padding: 18px 14px;
  border-right-color: rgba(63, 191, 90, 0.22);
}
.crt-main {
  flex: 1;
  min-width: 0;
  position: relative;
  padding: 18px 26px;
  overflow: hidden;
}
/* preview and gallery occupy the same space, cross-fade between them */
.crt-main .crt-screen,
.crt-main .crt-gallery {
  position: absolute;
  top: 18px;
  right: 26px;
  bottom: 18px;
  left: 26px;
  transition: opacity 0.35s ease-out;
}
.crt-main .crt-screen {
  opacity: 1;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.crt-main .crt-gallery {
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  overscroll-behavior: contain;   /* keep wheel events inside the gallery */
}
.flap-back.is-full .crt-main .crt-screen {
  opacity: 0;
  pointer-events: none;
}
.flap-back.is-full .crt-main .crt-gallery {
  opacity: 1;
  pointer-events: auto;
}

/* ---- sidebar: category list (full mode) ---- */
.crt-sidebar-cat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 4px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--crt-dim);
  cursor: pointer;
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  transition: color 0.15s, background 0.15s;
  border-radius: 2px;
}
.crt-sidebar-cat:hover,
.crt-sidebar-cat:focus {
  color: var(--crt-phos);
  background: rgba(127, 255, 148, 0.06);
  outline: none;
}
.crt-sidebar-cat.active {
  color: var(--crt-phos);
  background: rgba(127, 255, 148, 0.10);
}
.crt-sidebar-count {
  font-size: 10px;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}

/* ---- gallery: full listing, grouped by category ---- */
.crt-gallery-group {
  margin-bottom: 18px;
}
.crt-gallery-head {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--crt-dim);
  opacity: 0.75;
  padding: 2px 0 6px;
  border-bottom: 1px solid rgba(63, 191, 90, 0.14);
  margin-bottom: 8px;
}
.crt-gallery-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
  color: var(--crt-phos);
  opacity: 0.86;
  transition: color 0.15s, opacity 0.15s, transform 0.15s;
  font-size: 12px;
  line-height: 1.5;
  /* reset default button chrome so it looks like plain text in the CRT */
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
  text-shadow: inherit;
}
.crt-gallery-item:focus {
  outline: none;
}
.crt-gallery-item:hover {
  opacity: 1;
  color: #C4FFD2;
  transform: translateX(2px);
}
.crt-gallery-diamond {
  color: var(--crt-dim);
  flex-shrink: 0;
  padding-top: 2px;
}
.crt-gallery-text {
  flex: 1;
}

/* scrollbar treatment for gallery */
.crt-main .crt-gallery::-webkit-scrollbar {
  width: 6px;
}
.crt-main .crt-gallery::-webkit-scrollbar-thumb {
  background: rgba(63, 191, 90, 0.25);
  border-radius: 3px;
}
.crt-main .crt-gallery::-webkit-scrollbar-track {
  background: transparent;
}

/* article panel — slides in from the right over the gallery (shoji move).
   Lives in the same space as .crt-gallery. When .flap-back.is-article is
   set, gallery slides left, article slides in from the right. */
.crt-main .crt-article {
  position: absolute;
  top: 18px; right: 26px; bottom: 18px; left: 26px;
  transform: translateX(105%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s ease-out;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 6px;
}
.flap-back.is-article .crt-article {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.flap-back.is-article .crt-gallery {
  transform: translateX(-105%);
  opacity: 0;
  pointer-events: none;
}

.article-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(63, 191, 90, 0.18);
}
.article-back {
  background: transparent;
  border: none;
  color: var(--crt-phos);
  opacity: 0.72;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  padding: 4px 6px;
  text-shadow: inherit;
  transition: opacity 0.15s, transform 0.15s;
}
.article-back:hover,
.article-back:focus {
  opacity: 1;
  transform: translateX(-2px);
  outline: none;
}
.article-category {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--crt-dim);
  opacity: 0.75;
}

.article-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.article-gasp {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  line-height: 1.5;
  color: #D6FFE0;
  margin: 0;
  text-shadow: 0 0 8px rgba(127, 255, 148, 0.25);
  padding: 6px 0 2px;
}
.article-tier {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s ease-out, opacity 0.35s ease-out, margin 0.35s;
  margin: 0;
}
.article-tier.revealed {
  max-height: 500px;
  opacity: 1;
  margin: 4px 0;
}
.article-tier p {
  margin: 0;
  font-family: "IBM Plex Mono", "Menlo", monospace;
  font-size: 11px;
  line-height: 1.6;
  color: var(--crt-phos);
  opacity: 0.90;
}
.article-jolt p { color: #B8FFCA; }
.article-xray p { color: #9EEFB2; opacity: 0.82; }
.article-full p { color: var(--crt-dim); font-size: 10px; letter-spacing: 0.08em; }

.article-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}
.article-peel {
  background: rgba(63, 191, 90, 0.10);
  border: 1px solid rgba(63, 191, 90, 0.35);
  color: var(--crt-phos);
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  border-radius: 2px;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  text-shadow: inherit;
}
.article-peel:hover,
.article-peel:focus {
  background: rgba(63, 191, 90, 0.20);
  border-color: rgba(63, 191, 90, 0.6);
  outline: none;
}
.article-peel[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* page up / page down buttons — click affordance for users who don't
   want to grab the scrollbar. Live above and below the scrollbar track. */
.crt-gallery-pager {
  position: absolute;
  right: 28px;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(63, 191, 90, 0.35);
  background: rgba(63, 191, 90, 0.08);
  color: var(--crt-phos);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  padding: 0;
  border-radius: 2px;
  z-index: 3;
  opacity: 0.72;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.crt-gallery-pager:hover,
.crt-gallery-pager:focus {
  opacity: 1;
  background: rgba(63, 191, 90, 0.18);
  border-color: rgba(63, 191, 90, 0.55);
  outline: none;
}
.crt-gallery-pager[disabled] {
  opacity: 0.25;
  cursor: default;
  background: transparent;
}
.crt-gallery-pager-up   { top: 22px; }
.crt-gallery-pager-down { bottom: 22px; }
/* hidden in preview (no scrolling gallery) */
.flap-back:not(.is-full) .crt-gallery-pager {
  opacity: 0;
  pointer-events: none;
}

/* scanlines */
.flap-back::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    var(--crt-line) 2px 3px
  );
  pointer-events: none;
}

/* subtle phosphor vignette */
.flap-back::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

.flap-back .crt-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.flap-back .crt-line {
  padding-left: 16px;
  position: relative;
  cursor: pointer;
  transition: color 0.2s;
}
.flap-back .crt-line::before {
  content: '>';
  position: absolute;
  left: 0;
  color: var(--crt-dim);
}

.crt-line-arrow {
  display: inline-block;
  margin-left: 6px;
  color: var(--crt-dim);
  opacity: 0.55;
  transition: color 0.2s, opacity 0.2s, transform 0.2s;
}
.flap-back .crt-line:hover {
  color: #C4FFD2;
}
.flap-back .crt-line:hover .crt-line-arrow {
  color: var(--crt-phos);
  opacity: 1;
  transform: translateX(3px);
}

.flap-back .crt-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
  padding: 10px 26px 14px;
  border-top: 1px solid rgba(127, 255, 148, 0.15);
}

.crt-categories {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--crt-dim);
  display: flex;
  align-items: center;
}

.crt-cat {
  cursor: pointer;
  color: var(--crt-dim);
  transition: color 0.2s, text-shadow 0.2s;
}
.crt-cat:hover {
  color: var(--crt-phos);
}
.crt-cat.active {
  color: var(--crt-phos);
  text-shadow: 0 0 8px rgba(127, 255, 148, 0.65);
}
.crt-sep {
  margin: 0 8px;
  color: var(--crt-dim);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}
.crt-cat-more {
  margin-left: 8px;
  color: var(--crt-dim);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s;
}
.crt-cat-more:hover {
  opacity: 0.9;
}

.crt-icons {
  display: flex;
  gap: 14px;
}
.crt-icon {
  position: relative;
  font-size: 18px;
  color: var(--crt-phos);
  opacity: 0.70;
  cursor: pointer;
  transition: opacity 0.18s, text-shadow 0.18s;
  line-height: 1;
}
.crt-icon:hover,
.crt-icon:focus {
  opacity: 1;
  text-shadow: 0 0 10px rgba(127, 255, 148, 0.8);
  outline: none;
}

/* on hover: phosphor label floats above the icon */
.crt-icon::after {
  content: attr(data-label);
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--crt-phos);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  text-shadow: 0 0 6px rgba(127, 255, 148, 0.4);
}
.crt-icon:hover::after,
.crt-icon:focus::after {
  opacity: 0.85;
}

/* open-state: make a pointer cursor anywhere so the close affordance is clear */
body.room-open {
  cursor: pointer;
}
body.room-open .crt-cat,
body.room-open .crt-cat-more,
body.room-open .crt-icon {
  cursor: pointer;
}

/* bluesky icon: inline SVG inherits currentColor */
.crt-icon-bluesky {
  display: inline-flex;
  align-items: center;
}
.crt-icon-bluesky svg {
  display: block;
  filter: drop-shadow(0 0 4px rgba(127, 255, 148, 0.25));
  transition: filter 0.18s, transform 0.18s;
}
.crt-icon-bluesky:hover svg,
.crt-icon-bluesky:focus svg {
  filter: drop-shadow(0 0 8px rgba(127, 255, 148, 0.7));
}

/* ----- see-also: 3 sibling-mind pills on the back wall ----- */
.see-also {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 2;
  pointer-events: auto;
}
.see-also-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: rgba(255, 255, 255, 0.38);
  border: 1px solid rgba(60, 40, 20, 0.22);
  border-radius: 20px;
  font-family: "Futura", "Avenir Next", "Century Gothic", sans-serif;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(30, 25, 15, 0.78);
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.see-also-pill:hover {
  background: rgba(255, 255, 255, 0.68);
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.14);
}
.see-also-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(60, 40, 10, 0.4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}
.see-also-name {
  text-transform: lowercase;
  letter-spacing: 0.12em;
}

/* ----- reading overlay — gasp placeholder / "coming soon" card ----- */
.room-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1000;
  background: rgba(20, 15, 10, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 24px;
  animation: room-overlay-in 0.22s ease-out;
}
@keyframes room-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.room-overlay-card {
  position: relative;
  max-width: 640px;
  width: 100%;
  padding: 56px 56px 40px;
  background: linear-gradient(180deg, #F8EFD2 0%, #F0E4C0 100%);
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.18);
  color: #2A1F14;
}
.room-overlay-text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.35;
  margin: 0 0 24px;
  color: #1F1810;
}
.room-overlay-meta {
  font-family: "Futura", "Avenir Next", sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  opacity: 0.68;
  margin-bottom: 6px;
}
.room-overlay-soon {
  font-family: "IBM Plex Mono", "Menlo", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  opacity: 0.50;
  text-transform: lowercase;
}
.room-overlay-card-soon {
  text-align: center;
  padding: 60px 56px;
}
.room-overlay-title {
  font-family: Georgia, serif;
  font-size: 26px;
  margin: 0 0 14px;
}
.room-overlay-sub {
  font-family: "Futura", sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  opacity: 0.62;
}
.room-overlay-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #2A1F14;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s, background 0.15s;
}
.room-overlay-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}

/* ---- full-viewport article view — reading commits attention ---- */
.article-view {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1000;
  background: linear-gradient(180deg, #F8EFD2 0%, #EFE3BE 100%);
  display: flex;
  flex-direction: column;
  animation: article-view-in 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
@keyframes article-view-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.article-view-close {
  position: fixed;
  top: 80px;                     /* below the site-chrome header */
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.04);
  color: #2A1F14;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s, background 0.15s, transform 0.15s;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-view-close:hover,
.article-view-close:focus {
  opacity: 1;
  background: rgba(0, 0, 0, 0.10);
  transform: rotate(90deg);
  outline: none;
}

.article-view-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 64px 32px 96px;
}
.article-view-column {
  max-width: 680px;
  margin: 0 auto;
  color: #1F1810;
}

.article-view-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Futura", "Avenir Next", sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: #2A1F14;
  opacity: 0.65;
  margin-bottom: 40px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(60, 40, 20, 0.18);
}
.article-view-mind {
  font-weight: 600;
  letter-spacing: 0.26em;
  opacity: 0.85;
}
.article-view-meta-sep { opacity: 0.4; }

.article-view-gasp {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: 1.28;
  font-weight: 400;
  color: #151110;
  margin: 0 0 40px;
  letter-spacing: -0.005em;
}

.article-view-tier {
  margin: 0 0 48px;
}
.article-view-tier-label {
  font-family: "IBM Plex Mono", "Menlo", monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  opacity: 0.42;
  margin-bottom: 12px;
}
.article-view-tier p {
  font-family: Georgia, serif;
  line-height: 1.72;
  color: #2A1F14;
  margin: 0 0 18px;
}
.article-view-jolt p { font-size: 19px; }
.article-view-xray p { font-size: 17px; }

.article-view-full {
  padding-top: 8px;
}
.article-view-full-placeholder {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.7;
  color: #2A1F14;
  opacity: 0.78;
  font-style: italic;
  margin: 0;
}