/* junco.ironforgesoftware.com — "Snowbird Spec Sheet"
   One mono face on a character grid; slate & rose from junco's own TUI theme.
   All colors live in the token blocks below — nowhere else. */

@font-face {
  font-family: "Commit Mono";
  src: url("assets/fonts/CommitMono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Commit Mono";
  src: url("assets/fonts/CommitMono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  --bg: #f2f4f5;
  --panel: #e9ecee;
  --ink: #232833;
  --ink-muted: #5b6472;
  --accent: #a84067;
  --line: #c5ccd2;
  --shadow: #cdd3d8;
  --lh: 1.5rem;
  --mono:
    "Commit Mono", ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #14171d;
  --panel: #1c2029;
  --ink: #dfe3ea;
  --ink-muted: #9099a7;
  --accent: #eb6f92;
  --line: #343b48;
  --shadow: #0b0d12;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171d;
    --panel: #1c2029;
    --ink: #dfe3ea;
    --ink-muted: #9099a7;
    --accent: #eb6f92;
    --line: #343b48;
    --shadow: #0b0d12;
    color-scheme: dark;
  }
}

/* ---------- reset & chassis ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font: 400 16px/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  color: var(--ink);
}

.wrap {
  max-width: 84ch;
  margin-inline: auto;
  padding-inline: 2ch;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

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

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--ink-muted);
}
a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

code {
  font-family: var(--mono); /* explicit: fallback mono must cover box glyphs */
  font-size: 1em;
}

pre {
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: var(--lh);
  white-space: pre;
}

.scroll {
  overflow-x: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -100vw;
  top: 0;
  background: var(--panel);
  padding: 0.25rem 1ch;
}
.skip:focus {
  left: 0;
  z-index: 1;
}

/* buttons only work with JS; keep them out of the no-JS page */
html:not(.js) .copy,
html:not(.js) #theme-toggle {
  display: none;
}

button {
  font: inherit;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0 1ch;
  cursor: pointer;
}
button:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- header ---------- */

.bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2ch;
  padding-block: var(--lh);
}

.wordmark {
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 1ch;
}
.wordmark .mark {
  flex: none;
}

.bar nav {
  display: flex;
  gap: 2ch;
  align-items: baseline;
}

/* ---------- hero ---------- */

.hero {
  padding-block: calc(2 * var(--lh)) calc(1 * var(--lh));
}

.kicker {
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  line-height: var(--lh);
}

h1 {
  font-size: clamp(1.5rem, 5.5vw + 0.25rem, 2.5rem);
  line-height: 1.3;
  font-weight: 700;
  margin-block: var(--lh);
  letter-spacing: -0.02em;
}

.sub {
  max-width: 62ch;
  margin-block-end: calc(1.5 * var(--lh));
}

.micro {
  color: var(--ink-muted);
  font-size: 0.75rem;
  line-height: var(--lh);
  margin-block: calc(0.5 * var(--lh)) calc(2 * var(--lh));
}

/* spec-sheet key/value table */
.spec {
  border-block: 1px solid var(--line);
  padding-block: calc(0.5 * var(--lh));
}
.spec > div {
  display: grid;
  grid-template-columns: 14ch minmax(0, 1fr);
  gap: 0 2ch;
}
@media (max-width: 480px) {
  .spec > div {
    grid-template-columns: 1fr;
  }
  .spec dd {
    padding-block-end: calc(0.25 * var(--lh));
  }
}
.spec dt {
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  line-height: var(--lh);
  padding-block: calc(0.125 * var(--lh)) 0;
}
.spec dd {
  font-size: 0.875rem;
  line-height: var(--lh);
}

/* ---------- panels ---------- */

.panel {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 1ch 1.5rem 0 0 var(--shadow);
  box-shadow: 1ch 1lh 0 0 var(--shadow);
  padding: var(--lh) 2ch;
  margin-block: var(--lh) calc(1.5 * var(--lh));
}

.panel-cap {
  color: var(--ink-muted);
  font-size: 0.75rem;
  line-height: var(--lh);
  margin-block-end: calc(0.5 * var(--lh));
}

.install {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2ch;
  flex-wrap: wrap;
}
.install code {
  font-weight: 700;
  display: block;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
}

.block-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2ch;
}
.block-bar .panel-cap {
  margin-block-end: 0;
}
.block-bar {
  margin-block-end: calc(0.5 * var(--lh));
}

/* ---------- sections ---------- */

.sec,
.cta {
  border-top: 1px solid var(--line);
  margin-block-start: calc(2.5 * var(--lh));
  padding-block-start: calc(1.5 * var(--lh));
}

h2 {
  font-size: 1rem;
  line-height: var(--lh);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-block-end: var(--lh);
}
h2 .num {
  color: var(--accent);
  font-weight: 400;
}

.sec > p {
  max-width: 68ch;
}

/* pipeline diagram — structure muted, stations bold, outcome accented */
.diagram {
  color: var(--ink-muted);
}
.diagram b {
  color: var(--ink);
  font-weight: 700;
}
.diagram .hot {
  color: var(--accent);
  font-weight: 700;
}
.fig {
  margin-block: var(--lh);
}

.notes {
  padding-inline-start: 3ch;
  color: var(--ink-muted);
  font-size: 0.875rem;
  display: grid;
  gap: calc(0.5 * var(--lh));
  max-width: 72ch;
}
.notes li::marker {
  color: var(--accent);
}

/* terminal demo */
.term .demo .l {
  display: block;
  white-space: pre;
}
.caret {
  color: var(--accent);
}

.caption {
  color: var(--ink-muted);
  font-size: 0.875rem;
  max-width: 68ch;
}

/* ---------- capabilities grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(32ch, 100%), 1fr));
  gap: var(--lh) 4ch;
}
.grid dt {
  font-weight: 700;
}
.grid dd {
  color: var(--ink-muted);
  font-size: 0.875rem;
  line-height: var(--lh);
}

/* ---------- field guide card (the one whimsy object) ---------- */

.card {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 1ch 1.5rem 0 0 var(--shadow);
  box-shadow: 1ch 1lh 0 0 var(--shadow);
  padding: var(--lh) 2ch;
  margin-block-start: calc(1.5 * var(--lh));
  max-width: 56ch;
}
.card .panel-cap {
  color: var(--accent);
}
.card .fg {
  font-size: 0.875rem;
}

/* ---------- final CTA & footer ---------- */

.cta-line {
  font-weight: 700;
}

.foot {
  border-top: 1px solid var(--line);
  margin-block-start: calc(2 * var(--lh));
  padding-block: var(--lh) calc(2 * var(--lh));
  color: var(--ink-muted);
  font-size: 0.875rem;
}
.foot a {
  color: var(--ink-muted);
}
.foot a:hover {
  color: var(--accent);
}
.bird {
  margin-block-start: calc(0.5 * var(--lh));
}

/* ---------- motion (typed-once demo; JS + no-preference only) ---------- */

@media (prefers-reduced-motion: no-preference) {
  html.js .demo.armed .l {
    width: 0;
    overflow: hidden;
  }
  html.js .demo.armed.play .l {
    animation: type 0.7s steps(var(--n)) both;
    animation-delay: calc(var(--i) * 0.35s);
  }
  @keyframes type {
    from {
      width: 0;
    }
    to {
      width: calc(var(--n) * 1ch);
    }
  }
}

/* ---------- print ---------- */

@media print {
  :root,
  [data-theme="dark"] {
    --bg: #ffffff;
    --panel: #ffffff;
    --ink: #000000;
    --ink-muted: #444444;
    --accent: #000000;
    --line: #999999;
    --shadow: transparent;
  }
  .copy,
  #theme-toggle {
    display: none;
  }
}