/* Aurora - dream residue: the exhibition mood. Void ground, slow pacing. */

body.aurora {
  background: var(--void);
  color: #fff;
}

body.aurora a:focus-visible, body.aurora button:focus-visible {
  outline-color: var(--digital);
}

body.aurora .site-header {
  background: color-mix(in srgb, var(--void) 82%, transparent);
  border-bottom-color: rgba(255,255,255,0.12);
}



/* chapter rail */
.rail {
  position: fixed; right: var(--gutter); top: 50%; transform: translateY(-50%);
  z-index: 30; display: flex; flex-direction: column; gap: 0.9rem;
  align-items: flex-end; text-align: right;
  padding-right: 0.9rem; border-right: 1px solid rgba(255,255,255,0.14);
}
.rail a {
  font-family: var(--font-mono); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.65);
  transition: color 0.3s ease;
}
.rail a.active, .rail a:hover { color: #fff; }
.rail a.active::before { content: ''; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.45em; background: var(--digital); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
@media (max-width: 1000px) { .rail { display: none; } }

/* hero */
.x-hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.x-hero video, .x-hero img.hero-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.75;
}
.x-hero::after {
  content: ''; position: absolute; inset: 50% 0 0 0;
  background: linear-gradient(to bottom, transparent, rgba(6,6,6,0.82));
}
.x-hero .x-hero-inner {
  position: relative; z-index: 2;
  padding: 0 var(--gutter) clamp(3rem, 10vh, 6rem);
}
.x-hero h1 { font-size: var(--size-hero); max-width: 7em; }
.x-hero .caption { color: var(--smoke); }

/* JS-gated: without the html.js class (script blocked/failed) text is simply visible */
html.js .fade-slow { opacity: 0; transition: opacity 1.1s ease 0.15s; }
html.arrived.js .fade-slow { transition-duration: 0.6s; transition-delay: 0.05s; }
html.js .fade-slow.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.js .fade-slow { opacity: 1; transition: none; } }

/* chapter heads */
.chapter { padding: clamp(4rem, 14vh, 9rem) var(--gutter); scroll-margin-top: 5.4rem; }
.chapter-head {
  position: sticky; top: 0; z-index: 6;
  background: var(--void);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  padding-block: 1.2rem;
  transition: padding 0.3s ease;
}
.chapter-head.stuck { padding-block: 0.55rem; }
.chapter-head.stuck h1, .chapter-head.stuck h2 { font-size: 1.05rem; }
.chapter-head h1, .chapter-head h2 { transition: font-size 0.3s ease; }
.chapter.room { position: relative; min-height: 92svh; border-top: 1px solid rgba(255,255,255,0.14); }
.room-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.16; z-index: 0; }
.room-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.4rem; }
.room-number { font-size: clamp(6rem, 18vw, 15rem); line-height: 1; color: rgba(255,255,255,0.07); margin-top: 0.4rem; user-select: none; position: relative; z-index: 1; }
.works-list { list-style: none; max-width: 44em; width: 100%; display: flex; flex-direction: column; gap: 0.7rem; }
.works-list li { display: flex; align-items: baseline; gap: 0.9rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.8); }
.works-list .lead-rule { flex: 1; border-bottom: 1px dotted rgba(255,255,255,0.28); transform: translateY(-0.3em); }
.works-list .status { color: var(--smoke); }
.room-ask { border-bottom: 1px solid var(--digital); align-self: flex-start; color: var(--digital); }
.room-ask:hover { color: #fff; border-bottom-color: #fff; }
.chapter .note { max-width: 30em; color: rgba(255,255,255,0.65); font-size: 0.95rem; }
.chapter-head { display: flex; align-items: baseline; gap: 1.4rem; border-bottom: 1px solid rgba(255,255,255,0.14); padding-bottom: 1.2rem; }
.chapter-head .counter { color: var(--digital); }
/* archive pages title with h1 so their heading order starts at the top */
.chapter-head h1, .chapter-head h2 { font-size: var(--size-section); }
.chapter .boards { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.chapter .boards span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); }

/* concept category bands */
.category {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem;
  align-items: center; padding-block: clamp(2.5rem, 8vh, 5rem);
}
.category .term { grid-column: 1 / 6; }
.category .term h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.4rem, 6vw, 5.4rem); line-height: 0.95; }
.category .term p { margin-top: 0.9rem; color: var(--smoke); max-width: 22em; }
.category .loop { grid-column: 7 / 13; }
.category:nth-child(even) .term { grid-column: 8 / 13; order: 2; }
.category:nth-child(even) .loop { grid-column: 1 / 7; order: 1; }
.category video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 760px) {
  .category { display: flex; flex-direction: column; align-items: flex-start; }
  .category:nth-child(even) .term { order: 0; }
}

/* in-preparation panels (designed slots) */
.slot {
  margin-top: clamp(2rem, 6vh, 3.5rem);
  border: 1px solid rgba(255,255,255,0.16);
  padding: clamp(2.5rem, 9vh, 6rem) clamp(1.5rem, 5vw, 4rem);
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.045), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(135,181,176,0.06), transparent 60%);
}
.slot .star { width: 1rem; color: var(--digital); }
.slot .caption { color: var(--smoke); }
.slot p.note { max-width: 30em; color: rgba(255,255,255,0.75); font-size: 0.98rem; }

/* atmosphere strips between chapters */
.atmos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; padding: 0 var(--gutter); }
.atmos video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 700px) { .atmos { grid-template-columns: 1fr; } .atmos video:nth-child(n+2) { display: none; } }

/* exit */
.x-exit { padding: clamp(4rem, 14vh, 8rem) var(--gutter); text-align: center; }
.x-exit a {
  font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em;
  border: 1px solid rgba(255,255,255,0.4); padding: 0.9rem 1.6rem; display: inline-block;
  transition: background 0.25s ease, color 0.25s ease;
}
.x-exit a:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* rooms: curated board viewers (2026-08-09). Void mood, existing vocabulary
   only: mono captions, smoke rules, digital accent, the about-plates
   scroll-snap pattern carried into the exhibition. */
.room-viewer { margin-top: clamp(1.6rem, 4vh, 2.8rem); position: relative; z-index: 1; }
.viewer-track {
  display: flex; gap: 0.9rem; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -0);
  padding-bottom: 0.6rem;
}
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-track:focus-visible { outline: 2px solid var(--digital); outline-offset: 4px; }
.board { flex: 0 0 auto; width: min(72vw, 900px); scroll-snap-align: center; margin: 0; }
.board img {
  width: 100%; height: auto; max-height: 72vh; object-fit: contain;
  background: rgba(255,255,255,0.03); outline: 1px solid rgba(255,255,255,0.14);
  display: block;
}
.viewer-nav { display: flex; align-items: center; gap: 1.1rem; margin-top: 0.9rem; }
.viewer-count { color: var(--smoke); font-feature-settings: 'tnum' 1; }
.viewer-btn {
  font-family: var(--font-mono); font-size: 0.85rem; line-height: 1;
  color: var(--paper); background: transparent;
  border: 1px solid rgba(255,255,255,0.4); padding: 0.55rem 0.9rem; cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.viewer-btn:hover:not(:disabled) { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.viewer-btn:focus-visible { outline: 2px solid var(--digital); outline-offset: 2px; }
.viewer-btn:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 700px) {
  .board { width: 88vw; }
  .board img { max-height: 64vh; }
  /* Mobile only. A flex track is as tall as its tallest board, so in the rooms
     that mix portrait and landscape the nav row was stranded up to 319px below
     a short picture. Centring the board turns that one sided drop into
     symmetric matting, the reserved band keeps the pill off the artwork, and
     pinning the pill means it sits in the same place in every room and on
     every slide. Nothing here scales or crops her work. */
  /* the band must clear the pill's own height (73px measured) or the pill
     rides up over the tallest board in the room */
  .viewer-track { align-items: center; padding-bottom: 5.8rem; }
  .viewer-nav {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
    margin-top: 0; gap: 0.9rem; padding: 0.35rem 0.6rem;
    background: rgba(12,12,12,0.72); border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px; backdrop-filter: blur(6px);
  }
  .viewer-btn { padding: 0.9rem 1.1rem; }  /* 44px tap target, measured */
}
@media (prefers-reduced-motion: reduce) { .viewer-track { scroll-behavior: auto; } }

/* chapter bar to the very top (founder directive 2026-08-09): inside the
   exhibition the room bar owns the top edge on every device; the site header
   stays at the door (static) so the bar never fights it and never hides work.
   The bar carries the way back up and the way to a commission. */
body.aurora .site-header { position: static; }
body.aurora .chapter-head { top: 0; }
body.aurora .chapter { scroll-margin-top: 3.6rem; }
.chapter-head .head-actions { margin-left: auto; display: flex; gap: 1.2rem; align-items: baseline; white-space: nowrap; }
.chapter-head .head-actions a { color: var(--smoke); border-bottom: 1px solid transparent; }
.chapter-head .head-actions a:hover { color: #fff; border-bottom-color: var(--digital); }
.chapter-head .head-actions a:focus-visible { outline: 2px solid var(--digital); outline-offset: 3px; }
@media (max-width: 700px) {
  .chapter-head { flex-wrap: nowrap; gap: 0.9rem; }
  .chapter-head .head-actions { gap: 0.9rem; }
}
/* the bar must pin at exactly 0: it keeps the reveal fade but never the
   translate, so sticky positioning is never offset mid-transition */
html.js body.aurora .chapter-head.reveal { transform: none; }

/* ---------- the Residue Archive (2026-08-10) ----------
   Every page she made, complete, one deliberate step behind each room's walk.
   Void mood, existing vocabulary only: mono captions, smoke rules, digital
   accent, the slot panel treatment reused to mount cited material. */
.archive-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  column-gap: 1.6rem; row-gap: 2.6rem;
  margin-top: clamp(2rem, 5vh, 3.2rem); position: relative; z-index: 1;
}
/* width:auto is a guard, not decoration: an archive tile is sized by its grid
   column and must never take a width from another class it happens to share a
   name with. .board once did exactly that at min(72vw, 900px). */
.archive-item { margin: 0; display: flex; flex-direction: column; gap: 0.85rem; width: auto; }
/* The ANCHOR owns the 3:2 box, not the image. That is what keeps a mounted
   citation, which carries inner padding, exactly the same size as a plain
   tile: the padding eats into the picture, never into the grid. */
.archive-open {
  /* Every tile in a room is identical, but each room picks the ratio its own
     pages actually have, measured at build time and written onto the grid as
     --tile-ar. Research keeps 92 percent of each picture at 3:2, development
     75 percent at 5:4, the collection 75 percent at 4:5. One global ratio
     scored far worse everywhere. */
  display: block; aspect-ratio: var(--tile-ar, 3 / 2); box-sizing: border-box;
  /* the tile is a column flex item, and min-height:auto would let a tall
     picture out-vote the aspect ratio; that is what made the boxes ragged */
  min-height: 0; flex: 0 0 auto; overflow: hidden;
  outline: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03);
}
.archive-open:hover { outline-color: var(--digital); }
.archive-open:focus-visible { outline: 2px solid var(--digital); outline-offset: 3px; }
/* One identical rectangle for every tile. Founder decision of 2026-08-10: a
   harmonious grid beats showing each page whole, even where the crop costs a
   model's face. The uncropped page is always one click away in the viewer.
   The crop is not centre blind: documents keep their top edge, where the title
   and the main figure sit, and photographs keep the head. */
.archive-item img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
}
.archive-item.k-photo img, .archive-item.k-bts img { object-position: center 18%; }
/* Every caption occupies the same block, badge line included, so the grid stays
   level however long the sentence is. The full text stays in the page for
   search and screen readers; the viewer shows it complete. */
.archive-item figcaption {
  color: var(--smoke); font-size: 0.66rem; line-height: 1.6;
  display: flex; flex-direction: column; gap: 0.3rem; min-height: 8.6em;
}
.cap-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}
/* Cited material sits physically smaller and mounted, never hung as her work. */
.archive-item.citation .archive-open {
  outline-color: rgba(255,255,255,0.1);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.045), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(135,181,176,0.06), transparent 60%);
  padding: 0.5rem;
}
/* Cited material is shown whole, never cropped, because it is somebody else's
   picture. The anchor still holds the 3:2 box, so the tile stays the same size
   as every other one and the grid does not notice. */
.archive-item.citation img { object-fit: contain; }
/* every kind keeps the whole frame on hover focus too */
.archive-item a { display: block; }
.cite-tag { display: block; color: var(--digital); letter-spacing: 0.1em; }
/* A badge must never take a second line: one extra line makes that tile taller
   than every other tile in the room. */
.cite-tag, .walk-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the opened page */
.archive-view {
  position: fixed; inset: 0; z-index: 120; background: rgba(6,6,6,0.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: clamp(1rem, 3vw, 2.5rem);
}
.archive-view[hidden] { display: none; }
html.archive-open-state, html.archive-open-state body { overflow: hidden; }
.archive-stage { margin: 0; display: flex; flex-direction: column; gap: 0.7rem; max-height: 82vh; }
.archive-stage img { max-width: min(96vw, 1600px); max-height: 74vh; width: auto; height: auto; object-fit: contain; }
.archive-stage figcaption { color: var(--smoke); text-align: center; }
.archive-close {
  position: absolute; top: clamp(0.8rem, 2vw, 1.6rem); right: clamp(0.8rem, 2vw, 1.6rem);
  background: transparent; color: var(--paper); border: 1px solid rgba(255,255,255,0.4);
  padding: 0.5rem 0.9rem; cursor: pointer;
}
.archive-close:hover { background: var(--paper); color: var(--ink); }
.archive-close:focus-visible { outline: 2px solid var(--digital); outline-offset: 2px; }
.archive-nav { justify-content: center; }
/* the door from a room into its archive */
.room-archive-door { border-bottom: 1px solid var(--digital); color: var(--digital); align-self: flex-start; }
.room-archive-door:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 700px) {
  /* One column on a phone. Two 160px columns fit about 22 characters a line,
     which clipped 44 of 44 captions at four lines and 34 of 44 at seven: the
     grid read as broken text. One column gives the picture the full width and
     the caption enough room to finish. */
  .archive-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 2.2rem; }
}
/* archive pages carry no room video, so they open closer to the top edge */
body.aurora .chapter.room:has(.archive-grid) { min-height: 0; padding-top: clamp(2rem, 6vh, 4rem); }
/* boards that also appear on the room's walk, so the archive reads complete */
.walk-tag { display: block; color: var(--smoke); letter-spacing: 0.1em; }

/* The viewer clones the tile caption, which carries the four line clamp, so
   the opened page was still truncating the text it exists to show in full. */
.archive-stage .cap-text { display: block; -webkit-line-clamp: unset; overflow: visible; }