/* 717ai-prod — the Colophon. Two first-class themes, no web fonts, no framework. */

:root {
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* dark (default) — terminal / observability */
  --bg: #0c0c0d;
  --panel: #121214;
  --fg: #e9e7e1;
  --muted: #8a8780;
  --faint: #86847b;
  --line: #232325;
  --line-2: #34342f;
  --accent: #7fd0a6;
  --link: #85b7eb;
  --hl: #9ec9f0;
  /* --faint must still clear WCAG AA (4.5:1) for small text on --bg */
}

:root[data-theme="light"] {
  /* light — warm paper / ink (designed, not an invert) */
  --bg: #fbfaf7;
  --panel: #f3f1ea;
  --fg: #1a1a18;
  --muted: #5f5e57;
  --faint: #6f6e66;
  --line: #e3e1d9;
  --line-2: #cfcdc4;
  --accent: #1d8a5e;
  --link: #185fa5;
  --hl: #185fa5;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  max-width: 46rem;
  padding: 30px 34px 40px;
  margin-inline: auto;
}

@media (max-width: 560px) { body { padding: 22px 18px 32px; font-size: 14.5px; } }

a { color: var(--link); }
.hl { color: var(--hl); }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--panel); color: var(--fg); padding: 8px 12px; border: 1px solid var(--line-2);
}
.skip:focus { left: 8px; top: 8px; z-index: 10; }

/* header */
.bar {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 11px; margin-bottom: 26px;
}
.who { font-size: 12.5px; letter-spacing: .04em; color: var(--muted); }
.bar-nav { display: flex; align-items: baseline; gap: 14px; }
.lang { font-size: 12.5px; color: var(--muted); }
.lang a { color: var(--muted); text-decoration: none; }
.lang a[aria-current="page"] { color: var(--fg); }
.lang a:hover { color: var(--fg); }

.ghost {
  font-family: inherit; font-size: 11.5px; letter-spacing: .04em;
  padding: 4px 11px; cursor: pointer; color: var(--muted);
  background: transparent; border: 1px solid var(--line-2); border-radius: 0;
  transition: color .15s ease, border-color .15s ease;
}
.ghost:hover { color: var(--fg); border-color: currentColor; }
.ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* hero */
.thesis {
  font-size: 22px; font-weight: 500; line-height: 1.4; letter-spacing: -.012em;
  margin: 0 0 16px; color: var(--fg);
}
.thesis .ac { color: var(--accent); }
@media (max-width: 560px) { .thesis { font-size: 19px; } }
.lede { font-size: 14.5px; margin: 0 0 24px; color: color-mix(in srgb, var(--fg) 82%, var(--bg)); }

/* vitals */
.vitals { border: 1px solid var(--line); padding: 15px 17px; margin: 0 0 26px; }
.vitals-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.cap { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.edge { font-size: 10.5px; letter-spacing: .04em; color: var(--faint); }
.vitals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metric { display: flex; flex-direction: column; gap: 3px; }
.metric .n { font-size: 27px; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.metric:last-child .n { color: var(--fg); }
.metric .lbl { font-size: 11px; letter-spacing: .03em; color: var(--muted); }

/* sections */
.kicker { font-size: 13px; font-weight: 400; letter-spacing: .05em; color: var(--faint); margin: 0 0 9px; }
/* decorative "//" marker — kept OUT of the heading's accessible name (CSS, not text) */
.kicker::before { content: "// "; }
.body { font-size: 14px; margin: 0 0 26px; color: color-mix(in srgb, var(--fg) 88%, var(--bg)); }
.body strong { font-weight: 500; }
.link { color: var(--link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--link) 45%, transparent); padding-bottom: 1px; transition: border-color .16s ease; }
.link:hover { border-bottom-color: currentColor; }

.rows { margin: 0 0 26px; padding: 0; }
.row { display: flex; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row dt { color: var(--faint); width: 74px; flex-shrink: 0; }
.row dd { margin: 0; color: color-mix(in srgb, var(--fg) 85%, var(--bg)); }

.role-list { list-style: none; margin: 0 0 26px; padding: 0; font-size: 14px; }
.role-list li { display: grid; grid-template-columns: 9.5em min-content 1fr; column-gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); }
.role-list li:last-child { border-bottom: 0; }
.role { color: var(--fg); font-weight: 500; }
.dash { color: var(--faint); }
.what { color: var(--muted); }
@media (max-width: 460px) { .role-list li { grid-template-columns: 1fr; row-gap: 2px; } .dash { display: none; } }

/* footer */
.foot {
  display: flex; flex-wrap: wrap; gap: 9px 22px; font-size: 13.5px;
  border-top: 1px solid var(--line); padding-top: 15px; margin-top: 8px;
}
.hint { margin-top: 16px; font-size: 11.5px; color: var(--faint); }

:where(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}