/* about.css — /about/ page styles (Obys paper system).
   Page-scoped only: layout rhythm comes from .section (frame.css),
   values come from tokens.css. Ambient budget: the frame.css .marquee
   opening the stack section, plus the frame-owned .term-cursor blink
   inside the build log (solid under reduced motion). Everything below
   is static surfaces or user-triggered hover/press/focus transitions
   (color, border, scale). No new keyframes on this page. */

/* ---- Back link ------------------------------------------------------------- */

.about-back {
  display: inline-block;
  margin-bottom: var(--space-6);
  font-size: var(--text-xs);
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.about-back:hover { color: var(--accent-dim); }

/* ---- H1 + section $ prompts --------------------------------------------------
   Every section opens with a mono "$ command" kicker; a 2px bar in
   --accent-dim sits before it as a scan anchor. Dim --accent-dim on
   purpose: bright --accent stays reserved for display-size accents, $
   symbols and focus (contract in tokens.css — accent is a signal, never
   decoration). */

/* Poster voice (font, size, ink) comes from .sec-head in the markup;
   this rule only keeps the rhythm the old .about-h1 owned. */
.about-h1 {
  margin: 0 0 var(--space-4);
}

/* .section prefix (0,2,0) outranks frame-level `.section p` (0,1,1) so the
   prompts keep their dim machine-voice color instead of body --text. */
.section .about-prompt {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-mono);
  color: var(--text-dim);
}

.about-prompt::before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-right: var(--space-2);
  background: var(--accent-dim);
  vertical-align: text-bottom; /* same seating as the terminal cursor */
}

.section .about-kicker {
  margin-bottom: var(--space-2); /* prompt hugs its heading */
}

/* The spot color marks the machine voice — the $ only (frame convention). */
.p-prompt { color: var(--accent); }

/* Section heads: frame.css .sec-head + .index-num carry the poster voice
   (01–05); this only restores the intra-section gap the old .about-h2 had. */
.section .sec-head {
  margin: 0 0 var(--space-4);
}

/* The one page-level ambient piece (frame contract: one marquee per page)
   opens the stack section; give it air before the kicker. */
.section .marquee {
  margin-block-end: var(--space-6);
}

.about-prompt + * , .section p {
  max-width: 68ch;
}
.section p {
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text);
  text-wrap: pretty;
}

/* ---- Human vs AI division -----------------------------------------------------
   The two dt prompts sit on --surface chips instead of bare text: white
   slabs over a 1px hairline, corners sharp (radius tokens are 0 — the Obys
   edge is a right angle; no surfaced child inside, so nothing to nest).
   dd text aligns flush with the chip's left edge to keep the section's
   left rail straight. */

.about-split { margin: 0; max-width: 68ch; }
.about-split dt {
  display: inline-block; /* shrinkwrap the chip to its text */
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: var(--leading-mono);
  color: var(--text-dim);
}
.about-split dd {
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text);
  font-variant-numeric: tabular-nums; /* 99 元/年 keeps its digits steady */
}

/* ---- Works: thumbnail + text rows, each row is one link -----------------------
   Mobile: thumb stacks above text at full width. >=720px: 176px 4:3 thumb on
   the left, text right. width/height attributes in the HTML + aspect-ratio
   here keep CLS at zero while the lazy images stream in. */

.about-works {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 68ch;
}

.work-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  color: inherit;
  text-decoration: none; /* card-like link; the path keeps its own underline */
  border: 1px solid var(--border-color); /* structural hairline, Obys print */
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.work-thumb {
  width: 100%;
  height: auto; /* let aspect-ratio win over the height attribute */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface); /* visible while the jpg loads */
  border: 1px solid var(--border-color); /* structural hairline, token contract */
  border-radius: var(--radius);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.work-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.work-path {
  font-size: var(--text-xs);
  line-height: var(--leading-mono);
  color: var(--accent-dim); /* xs orange must be body-size safe: dim, 4.4:1 */
  text-decoration: underline;
  text-decoration-color: var(--accent-dim);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

.work-desc {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums; /* 310 / 14 */
  text-wrap: pretty;
}

@media (min-width: 720px) {
  .work-row {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }
  .work-thumb {
    width: 176px;
    height: auto;
    flex: none;
  }
}

/* Hover only where hover exists (mirrors frame.css .lift). Obys hovers
   stroke black: the row hairline goes --border-strong; the thumb keeps its
   own hairline darkening plus the small nudge scale. */
@media (hover: hover) {
  .work-row:hover {
    border-color: var(--border-strong);
  }
  .work-row:hover .work-thumb {
    transform: scale(1.02);
    border-color: var(--border-strong);
  }
  .work-row:hover .work-path {
    text-decoration-color: var(--accent);
  }
}

/* Press feedback is device-independent and sinks to exactly 0.96 (feel-better
   #12). Transitions only, no keyframes; the global reduced-motion stop in
   tokens.css leaves an instant state change with the static border cue. */
.work-row:active .work-thumb {
  transform: scale(0.96);
}

.about-stack {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-mono);
  color: var(--text-dim);
}

/* ---- 05 Build log: the terminal window, moved home from the old homepage ----
   Paper surface + hairline, flat print (no CRT glow). The 17 log lines are
   FULLY STATIC — no typing, no stagger — so no-JS and reduced-motion readers
   see the identical complete log. The only motion on the window is the
   frame-owned .term-cursor blink on the last line (frame.css keeps it solid
   under reduced motion); no keyframes are introduced here. */

.term-window {
  position: relative;
  max-width: 44rem;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
}

.term-titlebar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-color);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* Sharp ink dots, the middle one the spot color — window chrome, Obys-ed. */
.term-dot {
  width: 0.5em;
  height: 0.5em;
  background: var(--border-strong);
}

.term-dot:nth-child(2) { background: var(--accent); }

.term-title {
  margin-left: var(--space-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term-body {
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: var(--leading-mono);
}

@media (min-width: 720px) {
  .term-body {
    padding: var(--space-6);
  }
}

/* Log line roles. A blank-line gap opens every new beat (dates lead them).
   Dates read --text-dim, one step safer than the homepage's faint: the token
   contract reserves --text-faint for large sizes only. */
.term-date {
  margin-top: var(--space-4);
  color: var(--text-dim);
}

.term-body > :first-child {
  margin-top: 0;
}

.term-cmd {
  color: var(--text);
  overflow-wrap: anywhere;
}

/* The one-character $ keeps the bright spot color (site-wide convention:
   wordmark, footer, section prompts). */
.prompt { color: var(--accent); }

.term-out {
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.term-out .ok { color: var(--accent); }

.term-out-strong { color: var(--text); }

/* ---- 06 Visitor console: the easter egg, also from the old homepage ---------
   Fixed-height output so nothing shifts as lines land. .section .console-line
   (0,2,0) must outrank `.section p` (0,1,1) — otherwise the body-copy rule
   would ink and margin every output line. The input row is JS-only: about.js
   adds html.js to reveal it (no JS: no dead input). min-height keeps the
   44px touch hit area; focus-within strokes the window hairline black
   (Obys hovers stroke black) — a static cue, no motion. */

.console-window:focus-within { border-color: var(--border-strong); }

.console-out {
  height: 15rem;
  overflow-y: auto;
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: var(--leading-mono);
}

.section .console-line {
  margin: 0;
  max-width: none;
  line-height: var(--leading-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-dim);
}

.console-line .cmd-echo { color: var(--text); }

.console-line .echo-prompt { color: var(--accent-dim); }

/* Body-size orange must stay AA: --accent-dim plus weight, so the highlight
   never rides on hue alone. */
.console-line .hot {
  color: var(--accent-dim);
  font-weight: 600;
}

.console-row {
  display: none; /* no JS: no dead input */
  align-items: baseline;
  gap: var(--space-2);
  min-height: 2.75rem; /* 44px hit area */
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border-color);
  font-family: var(--font-mono);
  font-size: var(--text-base);
}

html.js .console-row { display: flex; }

.console-prompt {
  flex: none;
  font-size: var(--text-xs);
  color: var(--accent-dim);
  white-space: nowrap;
}

.console-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  caret-color: var(--accent);
}