/* ============================================================================
   NEGATIVE SPACE — LAUNCH CHASSIS
   The single inherited grammar. Press release object, wordmark, LinkedIn cards,
   IG grid all descend from this. White-cube law: the surface behaves like the
   gallery wall; the content behaves like the contents.
   Refinery: negative-space-launch V01 · visual proposal P1.
   ----------------------------------------------------------------------------
   Doctrine: "The room stays white and quiet. The people, art and sound make it
   alive." Calm, expensive container; the only edge is content edge.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght@400;500&display=swap');

:root {
  /* — Surface: constructed white, never flat #fff (CB §3.2) — */
  --paper:        #f6f6f3;
  --paper-hi:     #fbfbf9;   /* plaster highlight */
  --paper-lo:     #eeeeea;   /* plaster shadow */
  --stage:        #e4e4df;   /* the floor the white object sits on */
  --stage-deep:   #dcdcd6;

  /* — Ink — */
  --ink:          #16160f;   /* warm near-black, body */
  --ink-soft:     #46463e;
  --chrome:       #3a3a33;   /* mono accession chrome */
  --chrome-faint: #8a8a82;

  /* — Hairlines (institutional honesty) — */
  --hair:         rgba(22,22,15,0.22);
  --hair-soft:    rgba(22,22,15,0.12);
  --hair-faint:   rgba(22,22,15,0.07);

  /* — The single permitted accent: system-pink, glyph-only (CB §3.4) — */
  --status:       #ff2d78;

  /* — Content colour: oxblood wine verdict-trace ONLY (CB §4.2, P2-C) — */
  --wine:         #6e1322;

  /* — Type — */
  --mono:    'Red Hat Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --grotesk: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --symbol:  'Times New Roman', Times, serif; /* Θ maker's-mark only */

  --measure: 60ch;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--stage);
  color: var(--ink);
  font-family: var(--grotesk);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- The mono accession chrome: the institution's system-syntax ---- */
.mono {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--chrome);
}
.mono--faint { color: var(--chrome-faint); }
.mono--mid   { font-size: 11px; }

/* status glyph — at most a glyph's worth, never decoration */
.status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--status);
  border-radius: 0;            /* square: a system mark, not a bubble */
  vertical-align: middle;
  transform: translateY(-1px);
}

/* the one moving element — web only (CB §3.5) */
.cursor {
  display: inline-block;
  width: 0.46em;
  height: 1.0em;
  margin-left: 0.08em;
  background: var(--ink);
  vertical-align: -0.12em;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* the Θ maker's-mark — Times, quiet, never co-headlined */
.theta {
  font-family: var(--symbol);
  font-style: normal;
  color: var(--ink-soft);
}

/* ---- Constructed-white surface (a sheet / a card / a plate) ---- */
.surface {
  position: relative;
  background:
    radial-gradient(120% 90% at 28% 8%, var(--paper-hi) 0%, var(--paper) 46%, var(--paper-lo) 130%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 40px 90px -50px rgba(20,20,15,0.45),
    0 4px 14px -8px rgba(20,20,15,0.22);
}

/* ---- Crop marks: institutional honesty, the V08 chrome (severance left behind) ---- */
.crop { position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: 0.7; }
.crop::before, .crop::after { content: ""; position: absolute; background: var(--hair); }
.crop::before { width: 14px; height: 1px; }
.crop::after  { width: 1px;  height: 14px; }
.crop.tl { top: 14px; left: 14px; }
.crop.tr { top: 14px; right: 14px; }
.crop.tr::before { right: 0; } .crop.tr::after { right: 0; }
.crop.bl { bottom: 14px; left: 14px; }
.crop.bl::before { bottom: 0; } .crop.bl::after { bottom: 0; }
.crop.br { bottom: 14px; right: 14px; }
.crop.br::before { right: 0; bottom: 0; } .crop.br::after { right: 0; bottom: 0; }

/* ---- Hairline rules ---- */
.rule       { border: 0; border-top: 1px solid var(--hair);      margin: 0; }
.rule--soft { border: 0; border-top: 1px solid var(--hair-soft); margin: 0; }

/* ---- The verbatim mantra — never paraphrased (CB §9) ---- */
.mantra {
  font-family: var(--grotesk);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}

/* ---- The wordmark — typography-as-mark, given room (negative space IS the logo) ---- */
.wordmark {
  font-family: var(--grotesk);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* ---- Museum aperture: "image withheld / revealed at aperture" (V08 device) ---- */
.aperture {
  position: relative;
  background: var(--paper-lo);
  border: 1px solid var(--hair);
  overflow: hidden;
}
.aperture img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.96) contrast(1.01); }
/* hairline die-line inset */
.aperture::after {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid rgba(246,246,243,0.55);
  pointer-events: none;
}

/* ---- The verdict trace — oxblood, content-colour, used once, asymmetric (P2-C) ---- */
.verdict-trace {
  position: relative;
}
.verdict-trace .scar {
  position: absolute;
  width: 38px; height: 26px;
  background: radial-gradient(60% 70% at 50% 18%, rgba(110,19,34,0.78), rgba(110,19,34,0.30) 60%, rgba(110,19,34,0.0) 78%);
  filter: blur(0.3px);
}
.verdict-trace .sheen {
  position: absolute;
  width: 30px; height: 18px;
  background: radial-gradient(60% 70% at 50% 30%, rgba(255,255,255,0.55), rgba(255,255,255,0.0) 70%);
  opacity: 0.5;
}

/* ---- Feed plates are NOT floating cards: the edge is content, never architectural.
   The white runs to the trim (a hairline), no drop-shadow, no crop-mark decoration.
   Only the press SHEET keeps a real-paper shadow + crop marks (it is a sheet of paper).
   (formal-critic fixes 2,3,5 — CB §1 / §8 #1) ---- */
.card.surface, .plate.surface {
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
  border: 1px solid var(--hair-soft);
}
.card .crop, .plate .crop { display: none; }
.card .theta, .plate .theta { font-size: 12px; color: var(--chrome-faint); }

/* In-situ verdict trace: oxblood ON a real work inside the aperture, low + tiny,
   content not graphic — never a free-floating blob on blank paper (CB §4.2 / P2-C) */
.aperture .scar {
  position: absolute; z-index: 2;
  width: 16%; height: 13%; left: 11%; bottom: 9%;
  background: radial-gradient(58% 72% at 50% 16%, rgba(110,19,34,0.82), rgba(110,19,34,0.34) 58%, rgba(110,19,34,0) 78%);
  filter: blur(0.3px); pointer-events: none;
}
.aperture .sheen {
  position: absolute; z-index: 2;
  width: 13%; height: 9%; right: 16%; bottom: 13%;
  background: radial-gradient(58% 72% at 50% 30%, rgba(255,255,255,0.5), rgba(255,255,255,0) 70%);
  opacity: 0.55; pointer-events: none;
}

/* utility */
.stage-pad { padding: 48px; }
.center { display: flex; align-items: center; justify-content: center; }
.col { display: flex; flex-direction: column; }