/* Glyph kit site. The visual language of traykov.cc: printed paper, one ink, square corners,
   Departure Mono for headings, labels and every character grid (it draws block and box characters
   at exactly one cell), Geist Sans for reading. Steps inside, curves across; no blur, no slide. */
@font-face { font-family: "Departure Mono"; src: url("fonts/DepartureMono-Regular.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Geist Sans"; src: url("fonts/geist-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Sans"; src: url("fonts/geist-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  --ink: #080808;
  --paper: #fbfbf8;
  --panel: rgba(8, 8, 8, 0.035);
  --line: rgba(8, 8, 8, 0.16);
  --edge-strong: rgba(8, 8, 8, 0.28);
  --text-soft: rgba(8, 8, 8, 0.72);
  --text-caption: rgba(8, 8, 8, 0.68);
  --signal-ok: #04764e;
  --signal-fail: #b8421f;
  --pixel: "Departure Mono", ui-monospace, Menlo, monospace;
  --sans: "Geist Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --px-11: 11px; --px-22: 22px; --px-33: 33px; --px-44: 44px; --px-66: 66px;
  --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 28px; --space-6: 42px; --space-7: 72px;
  --hairline: 1px;
  --tap: 44px;
  --measure: 1180px;
  --step: 120ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #f4f2ea; --paper: #0c0c0b; --panel: rgba(244, 242, 234, 0.06); --line: rgba(244, 242, 234, 0.24);
    --edge-strong: rgba(244, 242, 234, 0.34); --text-soft: rgba(244, 242, 234, 0.78); --text-caption: rgba(244, 242, 234, 0.74);
    --signal-ok: #4cc58f; --signal-fail: #ef7c56;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f4f2ea; --paper: #0c0c0b; --panel: rgba(244, 242, 234, 0.06); --line: rgba(244, 242, 234, 0.24);
  --edge-strong: rgba(244, 242, 234, 0.34); --text-soft: rgba(244, 242, 234, 0.78); --text-caption: rgba(244, 242, 234, 0.74);
  --signal-ok: #4cc58f; --signal-fail: #ef7c56;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--pixel); font-weight: 400; }
p { margin: 0; }

.shell { width: min(var(--measure), 100% - 2 * var(--space-4)); margin: 0 auto; }
.label { color: var(--text-caption); font: 400 var(--px-11)/1.4 var(--pixel); text-transform: uppercase; }

/* Header */
.top { position: sticky; top: 0; z-index: 2; background: var(--paper); border-bottom: var(--hairline) solid var(--ink); }
.top .shell { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; }
.brand { display: flex; white-space: nowrap; align-items: center; gap: var(--space-2); text-decoration: none; font: 400 var(--px-22)/1 var(--pixel); }
.brand img { width: 22px; height: 22px; }
.nav { display: flex; gap: var(--space-4); font-size: .9rem; }
.nav a { white-space: nowrap; text-decoration: none; padding-block: var(--space-1); border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--ink); }

/* Sections */
main { display: grid; gap: var(--space-7); padding-block: var(--space-6) var(--space-7); }
.section { display: grid; gap: var(--space-5); }
.heading { display: grid; justify-items: start; gap: var(--space-3); max-width: 62ch; }
.heading h2 { font-size: var(--px-33); line-height: 1.1; }
.heading > p:not(.label) { color: var(--text-soft); }
.kicker { color: var(--text-caption); font: 400 var(--px-11)/1.4 var(--pixel); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-6); align-items: center; }
.hero h1 { font-size: var(--px-66); line-height: .95; }
.hero__copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.lead { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.3; letter-spacing: -.01em; }
.hero__copy > p:not(.lead) { color: var(--text-soft); max-width: 46ch; }

/* Install */
.install { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.cmd { display: flex; align-items: stretch; border: var(--hairline) solid var(--ink); background: var(--paper); }
.cmd code { flex: 1; min-width: 0; padding: var(--space-2) var(--space-3); overflow-x: auto; white-space: pre; font: 400 .82rem/1.6 ui-monospace, Menlo, monospace; }
.cmd button { flex: none; min-width: 72px; border: 0; border-left: var(--hairline) solid var(--ink); background: transparent; color: var(--ink); font: 400 var(--px-11)/1 var(--pixel); text-transform: uppercase; cursor: pointer; }
.cmd button:hover { box-shadow: inset 0 -3px 0 var(--ink); }
.cmd button[data-done] { color: var(--signal-ok); }
.cmd__for { color: var(--text-caption); font-size: .8rem; }

/* Buttons: one primary per view, quiet text links otherwise. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-4); border: var(--hairline) solid var(--ink); background: var(--ink); color: var(--paper); font-weight: 500; text-decoration: none; }
.button:hover { background: var(--paper); color: var(--ink); }
.text-link { font-weight: 500; text-decoration: none; border-bottom: 2px dotted var(--ink); padding-bottom: 2px; }
.text-link:hover { border-bottom-style: solid; }

/* Framed demos */
.demo { margin: 0; display: grid; grid-template-rows: auto 1fr auto; border: var(--hairline) solid var(--edge-strong); background: var(--paper); }
.demo__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); border-bottom: var(--hairline) solid var(--line); }
.demo figcaption { padding: var(--space-3); border-top: var(--hairline) solid var(--line); color: var(--text-soft); font-size: .85rem; line-height: 1.55; }

/* Character grids: one cell per glyph, lines join, air comes from padding. */
.grid-figure { margin: 0; padding: var(--space-5); overflow-x: auto; background: var(--panel); color: var(--ink); font: 400 var(--px-11)/1.25 var(--pixel); font-variant-ligatures: none; letter-spacing: 0; white-space: pre; }
.live { padding: var(--space-6) var(--space-5); }
.gk-e { opacity: .45; } .gk-f { color: var(--text-caption); } .gk-x { color: var(--signal-fail); } .gk-ok { color: var(--signal-ok); }
.gl-ok { color: var(--signal-ok); } .gl-fail { color: var(--signal-fail); } .gl-mute { color: var(--text-caption); }

/* The hero showcase: the dither press covers the whole frame between views. */
.showcase { position: relative; }
[data-showcase-state="pending"] [data-showcase-grid] { visibility: hidden; }
.showcase__press { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Measured readings */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--hairline) solid var(--ink); }
.stat { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-5) 0; }
.stat + .stat { padding-left: var(--space-5); border-left: var(--hairline) solid var(--line); }
.stat strong { font: 400 var(--px-33)/1.1 var(--pixel); }
.stat > p:last-child { color: var(--text-soft); font-size: .9rem; line-height: 1.55; }
.stat--open strong { color: var(--text-caption); }

/* Galleries */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 36rem), 1fr)); gap: var(--space-5); }
.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: var(--space-6) var(--space-5); }
.area { display: grid; align-content: start; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--hairline) solid var(--ink); }
.area h3 { font-size: var(--px-22); line-height: 1.2; }
.area > p { color: var(--text-soft); font-size: .88rem; }
.kind { display: grid; align-content: start; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--hairline) solid var(--line); }
.kind h3 { font-size: var(--px-22); }
.kind__when { color: var(--text-soft); font-size: .92rem; }
.kind__watch { color: var(--text-caption); font-size: .85rem; }
.jump { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding-block: var(--space-4); border-block: var(--hairline) solid var(--ink); font-size: .9rem; }
.jump a { text-decoration: none; }
.jump a:hover { text-decoration: underline; }

/* Guardrails and formats */
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.rules li { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--hairline) solid var(--line); color: var(--text-soft); font-size: .92rem; }
.rules strong { color: var(--ink); font-weight: 500; }
.pages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.pages img { border: var(--hairline) solid var(--line); }
.gallery__note { display: grid; align-content: center; justify-items: start; gap: var(--space-4); padding: var(--space-5); }
.gallery__note h3 { font-size: var(--px-33); line-height: 1.1; }
.gallery__note > p:not(.label) { color: var(--text-soft); max-width: 44ch; }
.links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }

/* The note */
.note { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; padding-top: var(--space-5); border-top: var(--hairline) solid var(--ink); }
.note img { border: var(--hairline) solid var(--line); }
.note__copy { display: grid; justify-items: start; gap: var(--space-4); }
.note__copy h2 { font-size: var(--px-44); line-height: 1.05; }
.note__copy > p:not(.label) { color: var(--text-soft); max-width: 46ch; }

footer { border-top: var(--hairline) solid var(--ink); padding-block: var(--space-5); color: var(--text-caption); font-size: .85rem; }
footer .shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }

@media (max-width: 1180px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n + 3) { border-top: var(--hairline) solid var(--line); }
}
@media (max-width: 900px) {
  .hero, .note { grid-template-columns: minmax(0, 1fr); }
  .pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero h1 { font-size: var(--px-44); }
  .heading h2 { font-size: var(--px-22); }
  .note__copy h2 { font-size: var(--px-33); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat, .stat + .stat { padding: var(--space-4) 0; border-left: 0; }
  .stat + .stat { border-top: var(--hairline) solid var(--line); }
  .top .shell { flex-wrap: wrap; row-gap: 0; padding-block: var(--space-2); }
  .nav { width: 100%; justify-content: space-between; gap: var(--space-3); font-size: .85rem; }
  .grid-figure, .live { padding: var(--space-4); }
}