/* Morticia's Lullaby — © 2026 Joshua Borsman. All rights reserved.
 * Imports the shared base, then sets this piece's colour signature: the
 * slate-and-sage palette of the 2025 installation, a touch warmer and
 * lower-key than the indigo void the Seven Layers pieces sit in.  Sage is
 * reserved for the living readings — the key and state of the bloom — so the
 * chrome quietly tells you whether the body is warm or cold by colour alone.
 */

@import url("/engine/styles.base.css");

:root {
  /* Slate ground, matching the canvas's VOID so the chrome dissolves into
     the visual rather than framing it. */
  --void: #10161c;

  /* Morticia palette. */
  --sage:      #a9cba4;   /* the living light */
  --sage-soft: rgba(169, 203, 164, 0.80);
  --sage-faint:rgba(169, 203, 164, 0.50);
  --slate:     #2e3b3c;
}

/* The vital-signs cluster, top-right.  Base .readout already lays out the
   dt/dd columns; here we lift the living values into sage and give the
   pulse a hair more presence — it is the conductor. */
.chrome--top-right .readout dd { color: var(--ink); }
#r-pulse { color: var(--sage); }
#r-key   { color: var(--sage-soft); }
#r-state {
  color: var(--sage-faint);
  font-style: italic;
  font-family: var(--serif);
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Signal indicator — hollow ring on the internal model, filled and sage
   when a live sensor is driving the body. */
.readout .signal { color: var(--ink-faint); }
.readout .signal::before { content: "○ "; }
body.is-live .readout .signal { color: var(--sage); }
body.is-live .readout .signal::before { content: "● "; }

/* The wordmark carries a breath of sage so it belongs to the body of light
   behind it without competing with the readout. */
.wordmark { color: #dfe7d8; }

/* A slightly warmer, lower gate veil than the base indigo, to sit over the
   slate field. */
.gate {
  background: radial-gradient(120% 80% at 50% 52%,
    rgba(16, 22, 28, 0.74), rgba(10, 14, 18, 0.56));
}

/* Long two-word title — keep it on one line on wide screens, let it wrap
   gracefully (centred) when it must. */
.gate__title { line-height: 1.08; }

@media (max-width: 640px) {
  /* The five-item readout is a lot for a phone; drop the literal air figure
     and the signal word, keeping pulse · key · state — the poetic core. */
  .chrome--top-right .readout div:nth-child(2),
  .chrome--top-right .readout div:nth-child(5) { display: none; }

  /* On a narrow portrait screen the wordmark spans the full width, so the
     top-right readout cannot share the top row — it collides with the title.
     Drop it out of the corner to a compact line just under the wordmark and
     byline, left-aligned, where it reads as the piece's instrument cluster
     without crowding the title. */
  .chrome--top-right {
    top: calc(var(--pad) + env(safe-area-inset-top) + 3.5rem);
    left: calc(var(--pad) + env(safe-area-inset-left));
    right: auto;
  }
  .chrome--top-right .readout {
    justify-content: flex-start;
    text-align: left;
    gap: 1.15rem;
  }
  .chrome--top-right .readout > div { align-items: flex-start; }

  /* Keep the wordmark to one tidy line that comfortably clears the readout. */
  .wordmark { font-size: 1.22rem; letter-spacing: 0.13em; }
}

/* Museum statement (about.html) -----------------------------------------
   A didactic panel: a label block (title · artist · medium) above the
   essay, with a quiet technical colophon below.  Reads on screen as the
   in-app About, and prints as a wall text (see @media print). */
.page-wrap.museum .label {
  margin-bottom: 2.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.page-wrap.museum .label h1 { margin-bottom: 0.5rem; }
.page-wrap.museum .label .artist {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin: 0;
}
.page-wrap.museum .label .medium {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--ink-faint);
  margin: 1rem 0 0;
}
.page-wrap .artist-note {
  font-size: 0.96rem;
  color: var(--ink-soft);
  margin-top: 2.4rem;
}
.page-wrap dl.spec.colophon {
  grid-template-columns: 8rem 1fr;
  font-size: 0.86rem;
  margin-bottom: 0;
}

/* Print — the wall panel.  Light ground, black ink, generous margins, no
   navigation or canvas.  CSS variables are re-pointed for print so every
   colour that references them flips to paper values in one place. */
@media print {
  :root {
    --void: #ffffff;
    --ink: #14181d;
    --ink-soft: #39424c;
    --ink-faint: #66707a;
    --rule: rgba(0, 0, 0, 0.22);
  }
  @page { margin: 2cm; }
  html, body.page { background: #ffffff !important; color: var(--ink); }
  body.page #stage { display: none !important; }
  .chrome, .gate, .about-overlay, .toast { display: none !important; }

  .page-wrap {
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-size: 11pt;
    line-height: 1.6;
    color: var(--ink);
  }
  .page-wrap.museum .label { margin-bottom: 1.6rem; padding-bottom: 1rem; }
  .page-wrap h1 { font-size: 25pt; letter-spacing: 0.16em; }
  .page-wrap h2 { font-size: 11pt; margin: 1.5rem 0 0.6rem; color: var(--ink); }
  .page-wrap .lede { font-size: 13pt; margin-bottom: 1.4rem; color: var(--ink-soft); }
  .page-wrap p { color: var(--ink); }
  .page-wrap .label .medium, .page-wrap dl.spec { font-size: 9.5pt; }
  .page-wrap .back { display: none; }       /* no "return" link on paper */
  .page-wrap a { color: inherit; text-decoration: none; border: 0; }
  /* Keep headings with the text that follows them. */
  .page-wrap h2 { break-after: avoid; }
}