/* Hallmark · genre: editorial · macrostructure: Split Studio · theme: Newsprint · enrichment: none (terminal exhibits are the proof) · nav: N6 · footer: Ft1
 * tone: editorial magazine · anchor hue: 35 (vermilion)
 * pre-emit critique: P4 H4 E4 S5 R4 V4
 */

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.85;
  font-feature-settings: "palt" 1;
}

a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.25em; }
a:hover { text-decoration-color: var(--color-accent); }
a:focus-visible, button:focus-visible { outline: var(--rule-thick) solid var(--color-focus); outline-offset: var(--space-2xs); }

code { font-family: var(--font-mono); font-size: 0.92em; }
p code { background: var(--color-paper-2); padding: 0 var(--space-2xs); border-radius: var(--radius-sm); }

/* Masthead */
.mast { display: grid; gap: var(--space-2xs); padding: var(--space-lg) var(--page-gutter) 0; text-align: center; max-width: var(--page-max); margin: 0 auto; }
.mast-line { margin: 0; color: var(--color-muted); font-size: var(--text-xs); letter-spacing: 0.12em; }
.mast-name { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1; letter-spacing: 0.06em; }
.mast-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-lg); list-style: none; padding: 0; margin: var(--space-xs) 0 0; font-size: var(--text-sm); }
.mast-nav a { text-decoration: none; white-space: nowrap; padding: var(--space-2xs) 0; }
.mast-nav a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.mast-rule { border: 0; border-top: var(--rule-hair) solid var(--color-ink); border-bottom: var(--rule-hair) solid var(--color-ink); height: var(--space-2xs); margin: var(--space-md) 0 0; }

/* Split Studio rows */
main { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-gutter); }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "text proof";
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-3xl) 0;
}
.split + .split { border-top: var(--rule-hair) solid var(--color-rule); }
.split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "proof text"; }
.split--lead { padding-top: var(--space-2xl); padding-bottom: var(--space-4xl); align-items: end; }
.split-text { grid-area: text; min-width: 0; max-width: var(--measure); }
.split-proof { grid-area: proof; min-width: 0; }
.split-text p { margin: 0 0 var(--space-md); }
.split-text p a { white-space: nowrap; }

.display {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-display);
  line-height: 1.15;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
.phrase { display: inline-block; }
.deck { font-size: var(--text-md); line-height: 1.8; color: var(--color-muted); }
.head {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: auto-phrase;
  text-wrap: balance;
}
.head::after { content: ""; display: block; width: 1.25em; height: var(--rule-thick); margin-top: var(--space-sm); background: var(--color-accent); }
.glyphs { font-family: var(--font-mono); letter-spacing: 0.05em; }

/* Install */
.install { margin-top: var(--space-xl); }
.install-label { margin: 0 0 var(--space-xs); font-size: var(--text-sm); font-weight: 700; }
.install-row { display: flex; align-items: stretch; border: var(--rule-hair) solid var(--color-ink); background: var(--color-paper-2); }
.install-cmd {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.6;
  white-space: nowrap;
  overflow-x: auto;
}
.install-note { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-muted); }

.copy {
  flex: 0 0 auto;
  min-width: 6.5em;
  padding: 0 var(--space-lg);
  border: 0;
  border-left: var(--rule-hair) solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-paper);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.copy:hover { background: var(--color-accent); }
.copy:active { transform: translateY(1px); }
.copy:disabled { cursor: not-allowed; background: var(--color-neutral); }
.copy[data-state="success"] { background: var(--color-paper); color: var(--color-ink); }
.copy[data-state="error"] { background: var(--color-paper); color: var(--color-accent); }

/* Terminal exhibits: plain figures, no imitation window chrome */
.exhibit { margin: 0; }
.term {
  margin: 0;
  padding: var(--space-lg);
  background: var(--color-term);
  color: var(--color-term-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.9;
  overflow-x: auto;
  border-radius: var(--radius-sm);
}
.term-line { white-space: pre; }
.exhibit figcaption { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); line-height: 1.7; }
.split--lead .term { font-size: var(--text-base); padding: var(--space-xl) var(--space-lg); }

.dim { color: var(--color-term-dim); }
.track { color: var(--color-term-rule); }
.warn { color: var(--color-warn); }
.danger { color: var(--color-danger); }

/* Rainbow: each character carries an index; the shared --hue walks over time */
.rainbow > span, .frames > span, .check, .arc {
  color: oklch(var(--rainbow-l) var(--rainbow-c) calc(var(--hue, 0) * 1deg + var(--i, 0) * 25deg));
}
.check { --i: 3; font-weight: 700; }
.arc { display: inline-block; width: 1.3ch; font-size: 1.3em; line-height: 1; vertical-align: -0.05em; }
.frames { font-size: 1.3em; letter-spacing: 0.3em; }
.rainbow-bold { font-weight: 700; }
.wobble { display: inline-block; transition: transform var(--dur-slow) var(--ease-in-out); }
.wobble.is-right { transform: translateX(0.5ch); }
.sway { display: inline-block; color: var(--color-term-dim); animation: sway 2s var(--ease-in-out) infinite alternate; }
@keyframes sway {
  from { transform: translateX(0); opacity: 0.6; }
  to   { transform: translateX(0.4ch); opacity: 1; }
}

/* Footer */
.foot {
  max-width: var(--page-max);
  margin: var(--space-2xl) auto 0;
  padding: var(--space-xl) var(--page-gutter) var(--space-2xl);
  border-top: var(--rule-thick) solid var(--color-ink);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-xs) var(--space-xl);
  align-items: baseline;
}
.foot p { margin: 0; }
.foot-mark { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); letter-spacing: 0.06em; }
.foot-tag { color: var(--color-muted); font-size: var(--text-sm); }
.foot-links { font-size: var(--text-sm); white-space: nowrap; }

@media (max-width: 52rem) {
  .split, .split--reverse {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text" "proof";
    gap: var(--space-xl);
    padding: var(--space-2xl) 0;
  }
  .split--lead { padding-bottom: var(--space-3xl); }
  .split-text { max-width: none; }
  .foot { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 30rem) {
  .term { padding: var(--space-md); font-size: var(--text-xs); }
  .split--lead .term { font-size: var(--text-sm); padding: var(--space-lg) var(--space-md); }
  .install-row { flex-direction: column; }
  .copy { border-left: 0; border-top: var(--rule-hair) solid var(--color-ink); padding: var(--space-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .sway { animation: none; opacity: 1; }
  .wobble { transition: none; }
  .copy { transition: none; }
  .copy:active { transform: none; }
}