/* ===========================================================================
   404motivation — the room pages, in Kinetic Spark's language.

   The rooms were built with the museum's white-cube stylesheet, so clicking a
   room from a black homepage dropped you into a white gallery. This is the
   same markup, re-skinned.

   It follows the DESIGN-SYSTEM.md that shipped with the original site rather
   than an impression of it. Its first principle is the one that matters:

       "Warm ember vs. cold neon on a graded void. One source of heat (ember)
        against disciplined cold structure (cyan/green/pink). This tension IS
        the brand."

   So the ember is used sparingly — one warm mark per view — and the cold
   accents carry the structure. The token values are lifted exactly; the
   original file marks them LOCKED, and it is right to.

   Loaded AFTER museum.css, which it overrides. The museum sheet still supplies
   the layout — the exhibit grid, the studio, the print controls — because the
   two worlds share a builder and only their skin differs.
   ======================================================================== */

@import url("faces.css");

:root{
  /* the void, graded rather than flat */
  --bg-void-2:#050507;
  --bg-dark:#070709;
  --bg-void-1:#0a0a10;
  --bg-void-3:#0d0a0e;
  --bg-card:#121217;

  /* LOCKED accents */
  --ember:#ff7a18;
  --ember-soft:#ffb061;
  --ember-glow:rgba(255,122,24,.35);
  --accent-cyan:#00f0ff;
  --accent-green:#39ff14;
  --accent-pink:#ff007f;

  --text-white:#ffffff;
  --text-gray:#888899;
  --text-dim:#5a5a68;

  --glass-bg:linear-gradient(160deg, rgba(22,22,30,.72), rgba(10,10,14,.55));
  --glass-border:rgba(255,255,255,.10);
  --glass-blur:16px;
  --border-color:rgba(255,255,255,.08);
  --grid-color:rgba(0,240,255,.014);

  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 8px 24px -6px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  --shadow-3:0 30px 60px -18px rgba(0,0,0,.7), 0 10px 24px -12px rgba(0,0,0,.6);
  --edge-top:inset 0 1px 0 rgba(255,255,255,.07);
  --edge-glow-cyan:0 0 0 1px rgba(0,240,255,.18), 0 0 28px -6px rgba(0,240,255,.28);

  --ease-out-expo:cubic-bezier(.16,1,.3,1);

  --font-heading:"Syne","Space Grotesk",system-ui,sans-serif;
  --font-body:"Space Grotesk",system-ui,sans-serif;
  --font-quote:"EB Garamond",Georgia,serif;
  --font-label:"Courier Prime",ui-monospace,monospace;

  /* the museum sheet reads these; repoint them rather than fight every rule */
  --wall:var(--bg-dark);
  --wall-edge:var(--border-color);
  --ink:var(--text-white);
  --ink-soft:var(--text-gray);
  --ink-faint:var(--text-dim);
  --accent:var(--accent-cyan);
  --accent-deep:var(--ember);
  --paper:var(--bg-card);
}

/* ----------------------------------------------------------- substrate --- */
/* The living field. It sits under the CSS void and adds light to it — alpha
   follows luminance in the shader — so if WebGL never starts, or the script is
   blocked, or the visitor is on a phone where it is deliberately not run, what
   remains is the graded void below and nothing looks broken. */
#webgl-bg{
  position:fixed;inset:0;width:100vw;height:100vh;
  z-index:0;pointer-events:none;display:block;
  opacity:0;transition:opacity 1.2s ease;
}
#webgl-bg.on{opacity:1}
@media (max-width:760px){ #webgl-bg{display:none} }

/* --------------------------------------------------------------- ground --- */
html{background:var(--bg-void-2)}
body{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(0,240,255,.05), transparent 60%),
    radial-gradient(90% 70% at 100% 110%, rgba(255,122,24,.045), transparent 55%),
    radial-gradient(100% 80% at 0% 100%, rgba(255,0,127,.035), transparent 55%),
    linear-gradient(180deg, var(--bg-void-1) 0%, var(--bg-void-2) 45%, var(--bg-void-3) 100%);
  background-attachment:fixed;
  color:var(--text-white);
  font-family:var(--font-body);
}

/* The technical grid. Almost invisible on purpose — at 1.4% cyan it reads as a
   surface rather than as a pattern, which is the difference between depth and
   decoration. Fixed, so scrolling moves the content across it. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  background-size:45px 45px;
}
/* One warm source, high and behind everything, so the page has a direction of
   light instead of being evenly lit. */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% 34%, rgba(0,240,255,.055), transparent 70%),
    radial-gradient(38% 34% at 62% 26%, rgba(255,122,24,.06), transparent 72%);
}
body > *{position:relative;z-index:1}

/* ------------------------------------------------------------- masthead --- */
.masthead{border-bottom:1px solid var(--border-color);background:transparent}
.masthead .wordmark{
  font-family:var(--font-heading);font-weight:800;letter-spacing:.02em;
  color:var(--text-white);
}
.masthead .wordmark span{color:var(--accent-cyan)}
.masthead nav a{
  font-family:var(--font-label);color:var(--text-gray);
  text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;
}
.masthead nav a:hover,.masthead nav a:focus-visible{color:var(--text-white)}
.masthead nav a[aria-current]{color:var(--accent-cyan)}

/* --------------------------------------------------------------- signage -- */
.signage,.room-title,h1,h2,h3{font-family:var(--font-heading);color:var(--text-white)}
.room-title{
  font-weight:800;letter-spacing:-.02em;text-transform:uppercase;
  text-wrap:balance;
}
/* the one warm mark on the page */
.room-head .code{color:var(--ember);font-family:var(--font-label);letter-spacing:.16em}
.breadcrumb,.code{font-family:var(--font-label);color:var(--text-dim);letter-spacing:.1em}
.breadcrumb a{color:var(--text-gray)}
.breadcrumb a:hover{color:var(--accent-cyan)}
.lede{color:var(--text-gray);font-family:var(--font-body)}

/* ------------------------------------------------------------- exhibits --- */
/* Glass, per the system: a gradient fill, a hairline border, a real blur, and a
   top inner highlight so the card has an edge catching the light. */
.exhibit{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--shadow-2), var(--edge-top);
  border-radius:12px;
  transition:transform .4s var(--ease-out-expo), border-color .4s ease, box-shadow .4s ease;
}
.exhibit:hover,.exhibit:focus-within{
  transform:translateY(-4px);
  border-color:rgba(0,240,255,.22);
  box-shadow:var(--shadow-3), var(--edge-top), var(--edge-glow-cyan);
}
.exhibit .code{color:var(--text-dim)}

/* The quote itself is the serif — the system uses EB Garamond for quote body
   and posters, which is what keeps a wall of them from reading as interface. */
.exhibit blockquote{
  font-family:var(--font-quote);
  color:var(--text-white);
  font-weight:400;
  line-height:1.32;
  text-wrap:pretty;
}
.exhibit cite{
  font-family:var(--font-body);
  color:var(--accent-cyan);
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;font-size:.78rem;
  font-style:normal;
}
.provenance{color:var(--text-gray);font-family:var(--font-body)}
.provenance em{color:var(--text-white);font-style:italic}
.provenance strong{color:var(--text-white)}

/* A finding is shown, not shouted. Green rather than red: the museum's job here
   is to report what it found, and a red warning stripe editorialises. */
.correction{
  border-left:2px solid var(--accent-green);
  background:rgba(57,255,20,.035);
  color:var(--text-gray);
  padding:.7em .95em;border-radius:0 6px 6px 0;
}
.correction a{color:var(--accent-green)}
.rendering{color:var(--text-dim);font-family:var(--font-label)}
.rendering .code{color:var(--accent-pink)}

.exhibit-actions .act,.act{
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent-cyan);font-size:.72rem;
}
.act:hover,.act:focus-visible{color:var(--ember)}

/* ---------------------------------------------------------------- prose --- */
.prose{color:var(--text-gray)}
.prose h2{color:var(--text-white);font-family:var(--font-heading);font-weight:700}
.prose p{color:var(--text-gray);text-wrap:pretty}
.prose a{color:var(--accent-cyan)}
.prose strong,.prose b{color:var(--text-white)}
.doorway{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:14px;box-shadow:var(--shadow-1), var(--edge-top);
}

/* ------------------------------------------------------------ neighbours -- */
.room-card{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--shadow-2), var(--edge-top);border-radius:14px;
  transition:transform .45s var(--ease-out-expo), border-color .45s ease, box-shadow .45s ease;
}
.room-card:hover,.room-card:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(0,240,255,.22);
  box-shadow:var(--shadow-3), var(--edge-top), var(--edge-glow-cyan);
}
.room-card h3{color:var(--text-white);font-family:var(--font-heading)}
.room-card p{color:var(--text-gray)}
.room-card .code{color:var(--ember)}

/* ---------------------------------------------------------------- plate --- */
.room-plate{border:1px solid var(--border-color);border-radius:14px;overflow:hidden;
            box-shadow:var(--shadow-2)}
.room-plate figcaption{color:var(--text-dim);font-family:var(--font-label)}

/* --------------------------------------------------------------- studio --- */
.fieldset,.studio,.print-stage{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  border-radius:14px;box-shadow:var(--shadow-1), var(--edge-top);
}
.legend,.seed-line{font-family:var(--font-label);color:var(--text-dim);letter-spacing:.1em}
.btn{
  font-family:var(--font-label);text-transform:uppercase;letter-spacing:.1em;
  background:linear-gradient(135deg,var(--ember),#ff9440);
  color:#170701;border:1px solid transparent;font-weight:700;border-radius:3px;
  transition:transform .3s var(--ease-out-expo), box-shadow .3s ease;
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 10px 26px -10px var(--ember-glow)}
.btn--ghost{
  background:transparent;color:var(--text-white);border-color:var(--glass-border);
}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--accent-cyan);box-shadow:var(--edge-glow-cyan)}
.ctrl span{font-family:var(--font-label);color:var(--text-dim)}
input[type="text"],input[type="range"],select,textarea{
  background:rgba(255,255,255,.04);color:var(--text-white);
  border:1px solid var(--glass-border);border-radius:4px;
}

/* -------------------------------------------------------------- colophon -- */
.colophon{border-top:1px solid var(--border-color);color:var(--text-dim)}
.colophon a{color:var(--accent-cyan)}
.colophon strong{color:var(--text-white)}

/* ---------------------------------------------------------------- focus --- */
:focus-visible{outline:2px solid var(--accent-cyan)!important;outline-offset:2px}

/* --------------------------------------------------------------- motion --- */
@media (prefers-reduced-motion:reduce){
  .exhibit,.room-card,.btn{transition:none!important}
  .exhibit:hover,.room-card:hover,.btn:hover{transform:none!important}
}
/* The system disables the expensive layers on small screens as well as under
   reduced motion — a blur behind every card is the first thing to cost a cheap
   phone its frame rate. */
@media (max-width:760px){
  .exhibit,.room-card,.doorway,.fieldset,.studio,.print-stage{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:linear-gradient(160deg, rgba(22,22,30,.92), rgba(10,10,14,.88));
  }
  .exhibit:hover,.room-card:hover{transform:none}
}

/* ---------------------------------------------------------------- print --- */
/* The original ships a print sheet so any quote page prints as a tidy sheet.
   Keep that: a black page is a cartridge-emptying way to print a quotation. */
@media print{
  html,body{background:#fff!important;color:#000!important}
  body::before,body::after{display:none!important}
  .masthead,.colophon,.studio,.print-stage,.fieldset,.exhibit-actions{display:none!important}
  .exhibit{
    background:#fff!important;border:1px solid #ccc!important;box-shadow:none!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    page-break-inside:avoid;
  }
  .exhibit blockquote,.room-title,.prose h2{color:#000!important}
  .exhibit cite{color:#333!important}
  .provenance,.prose p{color:#333!important}
}