* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #04050a;
  color: var(--ink);
  font-family: var(--font-mono);
}

button,
input,
select,
textarea {
  font: inherit;
}

#app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  background:
    linear-gradient(90deg, rgba(242,244,248,0.03), transparent 20%),
    #04050a;
}

#preview-panel {
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
}

#artboard-wrap {
  display: grid;
  place-items: center;
  width: min(100%, 920px);
}

#artboard {
  --format-w: 1080;
  --format-h: 1920;
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: var(--format-w) / var(--format-h);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 28px 80px rgba(0,0,0,0.5);
  color: var(--ink);
  container-type: size;
}

#artboard[data-format="post"] {
  --format-w: 1080;
  --format-h: 1350;
  width: min(100%, 560px);
  min-width: min(480px, 100vw);
}

#artboard[data-format="square"] {
  --format-w: 1080;
  --format-h: 1080;
  width: min(100%, 620px);
  min-width: 480px;
}

#artboard[data-format="banner"] {
  --format-w: 1920;
  --format-h: 1080;
  width: min(100%, 900px);
  min-width: 720px;
}

#artboard[data-format="desktop"] {
  --format-w: 1440;
  --format-h: 900;
  width: min(100%, 880px);
  min-width: 720px;
}

#background-canvas,
#grid-layer,
#safezone-layer,
#substrate-layer,
#info-layer {
  position: absolute;
  inset: 0;
}

#background-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

#grid-layer {
  z-index: 2;
  pointer-events: none;
  opacity: 0.82;
  mix-blend-mode: screen;
}

#grid-layer.is-hidden {
  display: none;
}

#safezone-layer {
  z-index: 6;
  display: none;
  pointer-events: none;
}

#safezone-layer.is-visible {
  display: block;
}

#info-layer {
  z-index: 4;
  pointer-events: none;
}

/* The ink sits IN the substrate, not on it: a static grain + scanline pass
   ABOVE the foreground type, blended, so the material crosses the glyph
   fills exactly as it crosses the field. Painted by paintSubstrateLayer()
   in app.js; intensity follows config.visual.material. Static — material,
   not animation, so it persists under reduced motion. */
#substrate-layer {
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.safezone-box {
  position: absolute;
  border: 1px dashed rgba(255, 42, 77, 0.78);
  background: rgba(255, 42, 77, 0.07);
}

.grid-margin-frame,
.grid-column,
.grid-gutter,
.grid-baseline,
.grid-label {
  position: absolute;
  pointer-events: none;
}

/* Grid overlay — a sanctioned output layer (structural editions):
   zinc traces with Current majors. */
.grid-margin-frame {
  border: 1px solid var(--grid);
  box-shadow: inset 0 0 0 1px rgba(174, 182, 194, 0.03);
}

.grid-column {
  border-left: 1px solid rgba(92, 100, 112, 0.34);
  border-right: 1px solid rgba(92, 100, 112, 0.20);
  background: rgba(92, 100, 112, 0.05);
}

.grid-gutter {
  background: rgba(46, 230, 255, 0.03);
}

.grid-baseline {
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(92, 100, 112, 0.10);
}

.grid-baseline.is-major {
  background: rgba(46, 230, 255, 0.16);
}

.grid-label {
  color: rgba(46, 230, 255, 0.6);
  font-size: clamp(5px, 0.85cqw, 9px);
  line-height: 1;
  letter-spacing: 0;
}

.flyer-frame {
  position: absolute;
  border: 1px solid rgba(174, 182, 194, 0.14);
}

.info-panel {
  position: absolute;
  container-type: size;
  padding: clamp(3px, 1.25cqw, 20px);
  color: var(--ink);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8, 10, 16, 0.38), rgba(8, 10, 16, 0.16) 72%, rgba(8, 10, 16, 0));
  border: 0;
}

.brand-panel,
.title-panel {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

/* Washed panels take the 45° chamfer — the single angular signature.
   Transparent panels never do (nothing to cut but glyphs).
   No hairline border: edges are made by typography, the gridline, or
   committed structural rules (circuit traces with nodes) — never a
   1px divider box (SKILL.md geometry: rules read as traces, not dividers). */
.lineup-panel,
.event-panel {
  background:
    linear-gradient(180deg, rgba(8, 10, 16, 0.36), rgba(8, 10, 16, 0.17) 70%, rgba(8, 10, 16, 0.02));
  clip-path: polygon(0 0, calc(100% - 1.4cqw) 0, 100% 1.4cqw, 100% 100%, 0 100%);
}

.brand-lockup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(4px, 1cqw, 14px);
  padding-top: clamp(2px, 0.7cqw, 8px);
  border-top: 2px solid var(--accent);
  text-transform: uppercase;
}

.brand-main {
  min-width: 0;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fit-brand-size, clamp(8px, 7.2cqw, 58px));
  font-weight: var(--weight-display, 900);
  font-stretch: var(--stretch-display, condensed);
  line-height: 0.78;
  letter-spacing: var(--tracking-display, 0);
  white-space: nowrap;
}

.brand-meta {
  display: grid;
  gap: 0.22em;
  color: var(--ink);
  font-size: var(--fit-brand-meta-size, clamp(4px, 1.35cqw, 12px));
  font-weight: var(--weight-meta);
  line-height: 1;
  letter-spacing: var(--tracking-meta);
  text-align: right;
}

.brand-publisher {
  color: var(--ink-dim);
  letter-spacing: var(--tracking-wide);
  font-size: 0.86em;
}

.brand-publisher::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 1px;
  margin-right: 0.5em;
  vertical-align: middle;
  background: var(--accent);
}

@container (max-width: 210px) {
  .brand-lockup {
    grid-template-columns: 1fr;
  }

  .brand-meta {
    text-align: left;
  }
}

.display-title {
  font-family: var(--font-display);
  font-weight: var(--weight-display, 900);
  font-stretch: var(--stretch-display, condensed);
  margin: 0;
  color: var(--accent);
  font-size: var(--fit-title-size, clamp(22px, 22cqw, 280px));
  line-height: 0.72;
  letter-spacing: var(--tracking-display, 0);
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
  text-rendering: geometricPrecision;
  /* Print misregistration — a hard 1px second impression in steel, never a
     soft glow (soft shadows read as web overlay, not ink). Material, not
     motion: static in every phase and under reduced motion. */
  text-shadow: 1px 0 0 rgba(174, 182, 194, 0.22);
}

.display-title.is-long {
  font-size: var(--fit-title-size, clamp(16px, 14cqw, 180px));
  line-height: 0.78;
}

.display-title.is-very-long {
  font-size: var(--fit-title-size, clamp(13px, 9.4cqw, 120px));
  line-height: 0.84;
}

.display-title.is-stacked {
  line-height: 0.75;
}

.title-line {
  display: block;
  max-width: none;
  white-space: nowrap;
}

.subtitle {
  margin: 0.55em 0 0;
  max-width: 82%;
  color: var(--ink);
  font-size: clamp(14px, 4.6cqw, 32px);
  font-weight: var(--weight-meta);
  line-height: 1.1;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.lineup-list {
  display: grid;
  gap: clamp(3px, 1.05cqw, 16px);
}

.lineup-row {
  min-width: 0;
  display: grid;
  gap: clamp(2px, 0.55cqw, 8px);
  text-transform: uppercase;
}

.lineup-primary {
  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display, 900);
  font-stretch: var(--stretch-display, condensed);
  color: var(--ink);
  font-size: max(var(--fit-lineup-size, clamp(18px, 8cqw, 76px)), 18px);
  line-height: 0.86;
  letter-spacing: var(--tracking-display, 0);
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
  white-space: nowrap;
  text-transform: uppercase;
  text-rendering: geometricPrecision;
}

/* Names that still overflow at the fit floor wrap instead of clipping —
   core lineup info is never cut mid-glyph (design-review HIGH class). */
.lineup-primary.is-overflow-wrap {
  white-space: normal;
  overflow-wrap: normal;
}

.lineup-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42em 0.8em;
  color: var(--accent);
  font-size: max(var(--fit-lineup-meta-size, clamp(15px, 6.2cqw, 28px)), 15px);
  font-weight: var(--weight-meta);
  line-height: 1.04;
  letter-spacing: var(--tracking-meta);
}

/* Meta fragments never break internally — the wrap point is between the
   time and the genre/country unit, killing orphan country codes. */
.lineup-secondary span {
  white-space: nowrap;
}

.lineup-genre,
.lineup-country {
  color: var(--ink);
}

.event-info {
  display: grid;
  gap: clamp(2px, 0.78cqw, 12px);
  color: var(--ink);
  font-size: max(var(--fit-event-size, clamp(14px, 7.6cqw, 26px)), 14px);
  font-weight: var(--weight-meta);
  line-height: 1.18;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  overflow-wrap: break-word;
  word-break: keep-all;
  hyphens: manual;
}

.event-info-primary {
  color: var(--accent);
}

/* Structural rules read as circuit traces: hairline + square terminal nodes. */
.segment-rule {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background: rgba(174, 182, 194, 0.18);
}

.segment-rule::before,
.segment-rule::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--accent);
  opacity: 0.85;
}

.segment-rule-v {
  width: 1px;
}

.segment-rule-v::before {
  top: -2px;
  left: -2px;
}

.segment-rule-v::after {
  bottom: -2px;
  left: -2px;
}

.segment-rule-h {
  height: 1px;
}

.segment-rule-h.is-heavy {
  height: 2px;
  background: var(--accent);
}

.segment-rule-h.is-heavy::before,
.segment-rule-h.is-heavy::after {
  width: 7px;
  height: 7px;
  opacity: 1;
}

.segment-rule-h::before {
  left: -2px;
  top: -2px;
}

.segment-rule-h::after {
  right: -2px;
  top: -2px;
}

/* TUNNEL — axial composition: type stacks on a centered spine. */
#artboard[data-template="TUNNEL"] .title-panel,
#artboard[data-template="TUNNEL"] .lineup-panel,
#artboard[data-template="TUNNEL"] .event-panel {
  text-align: center;
}

#artboard[data-template="TUNNEL"] .lineup-secondary {
  justify-content: center;
}

#artboard[data-template="TUNNEL"] .event-info {
  justify-items: center;
}

/* TYPE SYSTEM — specimen: bare type on the organism, no panel washes.
   Readability comes from the canvas dimming its zones (dimReadableZones).
   No chamfer either: transparent panels never take the cut. */
#artboard[data-template="TYPE SYSTEM"] .info-panel {
  background: none;
  clip-path: none;
}

#artboard[data-template="SEGMENTED"] .title-panel,
#artboard[data-template="SEGMENTED"] .lineup-panel,
#artboard[data-template="SEGMENTED"] .event-panel {
  background: rgba(8, 10, 16, 0.26);
}

#artboard[data-template="TYPE SYSTEM"] .brand-main,
#artboard[data-template="TYPE SYSTEM"] .display-title,
#artboard[data-template="SIGNAL"] .brand-main,
#artboard[data-template="SIGNAL"] .display-title {
  color: var(--accent);
}

/* CHROME voice — the Deco chrome band on display type. Placed after the
   template color rules so the gradient wins at equal specificity. */
#artboard[data-type-voice="CHROME"] .display-title,
.display-title.is-chrome {
  background: var(--chrome-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

#artboard:not([data-format="story"]) .display-title {
  font-size: var(--fit-title-size, clamp(16px, 18cqw, 170px));
}

#artboard:not([data-format="story"]) .display-title.is-long {
  font-size: var(--fit-title-size, clamp(13px, 11.5cqw, 112px));
}

#artboard:not([data-format="story"]) .display-title.is-very-long {
  font-size: var(--fit-title-size, clamp(11px, 7.8cqw, 82px));
}

#artboard:not([data-format="story"]) .subtitle {
  max-width: 100%;
  font-size: clamp(14px, 4.2cqw, 22px);
}

#artboard:not([data-format="story"]) .lineup-primary {
  font-size: max(var(--fit-lineup-size, clamp(18px, 6cqw, 60px)), 18px);
}

#artboard:not([data-format="story"]) .lineup-secondary,
#artboard:not([data-format="story"]) .event-info {
  font-size: max(var(--fit-lineup-meta-size, var(--fit-event-size, clamp(14px, 5.4cqw, 22px))), 14px);
}

#artboard[data-format="banner"] .display-title,
#artboard[data-format="desktop"] .display-title {
  font-size: var(--fit-title-size, clamp(14px, 32cqh, 112px));
}

#artboard[data-format="banner"] .display-title.is-long,
#artboard[data-format="desktop"] .display-title.is-long {
  font-size: var(--fit-title-size, clamp(12px, 24cqh, 78px));
}

#artboard[data-format="banner"] .display-title.is-very-long,
#artboard[data-format="desktop"] .display-title.is-very-long {
  font-size: var(--fit-title-size, clamp(10px, 18cqh, 56px));
}

#artboard[data-format="banner"] .lineup-list,
#artboard[data-format="desktop"] .lineup-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2px, 0.85cqh, 10px) clamp(12px, 2.4cqw, 36px);
}

/* FIELD, SEGMENTED, and TUNNEL run narrow lineup columns at wide formats —
   two sub-columns collide the meta rows there, so they stay a single stack. */
#artboard[data-template="FIELD"][data-format="banner"] .lineup-list,
#artboard[data-template="FIELD"][data-format="desktop"] .lineup-list,
#artboard[data-template="SEGMENTED"][data-format="banner"] .lineup-list,
#artboard[data-template="SEGMENTED"][data-format="desktop"] .lineup-list,
#artboard[data-template="TUNNEL"][data-format="banner"] .lineup-list,
#artboard[data-template="TUNNEL"][data-format="desktop"] .lineup-list {
  grid-template-columns: 1fr;
}

#artboard[data-format="banner"] .lineup-secondary,
#artboard[data-format="desktop"] .lineup-secondary,
#artboard[data-format="banner"] .event-info,
#artboard[data-format="desktop"] .event-info {
  font-size: max(var(--fit-lineup-meta-size, var(--fit-event-size, clamp(14px, 3.4cqh, 22px))), 14px);
}

#artboard[data-format="banner"] .brand-main,
#artboard[data-format="desktop"] .brand-main {
  font-size: clamp(10px, 7.2cqh, 44px);
}

#editor-panel {
  height: 100vh;
  overflow: auto;
  padding: 18px;
  border-left: 1px solid rgba(242,244,248,0.08);
  background: #0b0d14;
}

.editor-section {
  margin: 0 0 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.editor-section h2 {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--accent);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.control {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
}

.control label {
  color: rgba(174,182,194,0.72);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.control input,
.control select,
.control textarea,
.lineup-editor-fields input,
.editor-button {
  width: 100%;
  min-height: 32px;
  border: 1px solid rgba(174,182,194,0.20);
  background: #070810;
  color: var(--ink);
  padding: 7px 8px;
  border-radius: var(--radius);
}

.control textarea {
  min-height: 80px;
  resize: vertical;
}

.editor-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.editor-button {
  cursor: pointer;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}

.editor-button:hover {
  border-color: var(--accent);
  background: rgba(242,244,248,0.05);
  box-shadow: inset 0 0 12px rgba(46, 230, 255, 0.10);
}

.editor-button.is-active,
.editor-button[aria-pressed="true"] {
  border-color: var(--accent);
  background: rgba(46, 230, 255, 0.12);
  color: var(--accent);
}

/* Recording = alarm state. Infrared only. */
.editor-button.is-recording {
  border-color: var(--infrared);
  background: rgba(255, 42, 77, 0.18);
  color: var(--infrared);
  animation: pulse-rec 1s ease-in-out infinite;
}

@keyframes pulse-rec {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.download-link {
  display: block;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: rgba(46, 230, 255, 0.10);
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}

.download-link:hover {
  background: rgba(46, 230, 255, 0.20);
  box-shadow: inset 0 0 12px rgba(46, 230, 255, 0.12);
}

.editor-note {
  margin: 6px 0 10px;
  color: rgba(174,182,194,0.55);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.lineup-editor-item {
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.lineup-editor-fields {
  display: grid;
  gap: 6px;
}

.lineup-editor-actions {
  display: grid;
  gap: 6px;
}

.status-line {
  color: rgba(174,182,194,0.58);
  font-size: 11px;
  line-height: 1.35;
}

@media (max-width: 960px) {
  #app-shell {
    grid-template-columns: 1fr;
  }

  #editor-panel {
    height: auto;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  #preview-panel {
    min-height: 70vh;
    padding: 16px;
  }

}

/* Persistent signal telemetry — [ SIGNAL: STABLE ] on the flyer surface.
   Publisher-level device (like the EDITION mark): present on every family,
   pinned to the top-right margin. Color wired to data-phase (HARD CHROME:
   color displays machine state, never decorates). Static text, hard-cut
   color changes (no transition — net.art edges, reduced-motion safe). */
.signal-telemetry {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(4px, 1cqw, 14px);
  padding-top: clamp(4px, 0.8cqh, 12px);
  padding-right: clamp(6px, 1.5cqw, 20px);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: clamp(7px, 1.1cqw, 14px);
  font-weight: var(--weight-meta);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  pointer-events: none;
  z-index: 3;
}

.signal-telemetry-edition {
  color: var(--ink-dim);
  opacity: 0.5;
}

/* The composition's one electric (--accent), not a hard-coded Current —
   keeps single-electric doctrine with non-cyan scene accents and matches
   drawRecordingTelemetry() in exports. */
#artboard[data-phase="escalation"] .signal-telemetry-label,
#artboard[data-phase="recovery"] .signal-telemetry-label {
  color: var(--accent);
}

#artboard[data-phase="failure"] .signal-telemetry-label {
  color: var(--infrared);
}

/* Phase-driven foreground motion — the desfase reaches the type.
   HARD CHROME: hard-cut offsets, no blur (net.art edges). The Current rises
   through ESCALATION; INFRARED seizes FAILURE — the takeover is the event.
   Suppressed under reduced motion. */
#artboard[data-phase="escalation"] .display-title {
  text-shadow: 1px 0 0 rgba(46, 230, 255, 0.5);
}

#artboard[data-phase="failure"] .display-title {
  text-shadow: 2px 0 0 rgba(255, 42, 77, 0.85), -2px 0 0 rgba(46, 230, 255, 0.6);
}

#artboard[data-phase="recovery"] .display-title {
  text-shadow: 1px 0 0 rgba(46, 230, 255, 0.28);
}

/* CALM needs no rule of its own: the base .display-title misregistration IS
   the resting telegraph — the second impression the phase offsets replace. */

#artboard[data-phase="failure"] .brand-main {
  text-shadow: 1.5px 0 0 rgba(46, 230, 255, 0.5), -1.5px 0 0 rgba(255, 42, 77, 0.55);
}

/* CHROME voice runs gradient-filled (transparent) glyphs — text-shadow would
   bleed through, so its resting misregistration and phase cuts use
   drop-shadow instead. */
#artboard[data-type-voice="CHROME"] .display-title {
  text-shadow: none;
  filter: drop-shadow(1px 0 rgba(174, 182, 194, 0.22));
}

#artboard[data-phase="escalation"][data-type-voice="CHROME"] .display-title {
  text-shadow: none;
  filter: drop-shadow(1px 0 rgba(46, 230, 255, 0.5));
}

#artboard[data-phase="failure"][data-type-voice="CHROME"] .display-title {
  text-shadow: none;
  filter: drop-shadow(2px 0 rgba(255, 42, 77, 0.85)) drop-shadow(-2px 0 rgba(46, 230, 255, 0.6));
}

#artboard[data-phase="recovery"][data-type-voice="CHROME"] .display-title {
  text-shadow: none;
  filter: drop-shadow(1px 0 rgba(46, 230, 255, 0.28));
}

/* Reduced motion freezes the phase offsets back to the static resting
   misregistration — a fixed second impression is material, not animation. */
#artboard[data-reduced-motion="true"][data-phase] .display-title {
  text-shadow: 1px 0 0 rgba(174, 182, 194, 0.22);
  filter: none;
}

#artboard[data-reduced-motion="true"][data-phase] .brand-main {
  text-shadow: none;
  filter: none;
}

#artboard[data-reduced-motion="true"][data-type-voice="CHROME"][data-phase] .display-title {
  text-shadow: none;
  filter: drop-shadow(1px 0 rgba(174, 182, 194, 0.22));
}

/* Poster bleed — the display title breaks the content margin and reaches
   the artboard edge. True poster scale, controlled tension. */
.title-panel.is-bleed {
  padding: 0;
}

.title-panel.is-bleed .display-title {
  padding-left: clamp(6px, 2.4cqw, 28px);
  padding-right: clamp(6px, 2.4cqw, 28px);
}

/* Constructivist colophon rail — the publisher mark as a structural element. */
.colophon-rail {
  position: absolute;
  display: flex;
  align-items: center;
  gap: clamp(4px, 1cqw, 12px);
  color: var(--ink-dim);
  font-size: clamp(5px, 1.1cqw, 11px);
  font-weight: var(--weight-meta);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  pointer-events: none;
}

.colophon-rail .colophon-mark {
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: var(--weight-display, 900);
  font-size: 1.1em;
  letter-spacing: var(--tracking-display, 0);
}

.colophon-rail .colophon-bar {
  width: clamp(10px, 4cqw, 60px);
  height: 1px;
  background: var(--accent);
}

/* Oversized EDITION numeral — a registration mark in sanctioned empty space.
   Chrome gradient fill (the Deco band reserved for display type) or ink-dim
   outline. Never the Current (HARD CHROME: one electric per composition).
   The numeral gives the void purpose and telegraphs the living-signal
   concept at rest (SKILL.md: every artifact is EDITION NNNN of a signal log). */
.edition-mark {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(2px, 0.6cqw, 8px);
  pointer-events: none;
  overflow: hidden;
}

.edition-mark-label {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: clamp(6px, 1.1cqw, 14px);
  font-weight: var(--weight-meta);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.edition-mark-numeral {
  font-family: var(--font-display);
  font-weight: var(--weight-display, 900);
  font-stretch: var(--stretch-display, condensed);
  font-size: clamp(28px, 12cqw, 160px);
  line-height: 0.78;
  letter-spacing: var(--tracking-display, 0);
  background: var(--chrome-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
}

#artboard[data-type-voice="CHROME"] .edition-mark-numeral {
  color: var(--ink-dim);
  background: none;
  -webkit-text-fill-color: var(--ink-dim);
}