/* Hallmark · genre: editorial · macrostructure: Letter (home) / Long Document (content) / Workbench-plain (app) · design-system: design.md · designed-as-app
 * theme: custom (vibe: "paper, ink, blackletter sun, quiet print") · paper oklch(96.5% 0.012 85) · accent oklch(50% 0.12 55) ochre
 * fonts: Fraunces 600 (display) + IBM Plex Sans (body) + IBM Plex Mono (outlier) · nav: N9 · footer: Ft2 · enrichment: none (typography + brand mark)
 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-display); margin: 0 0 var(--space-md); }
h2 { font-size: var(--text-2xl); margin: var(--space-2xl) 0 var(--space-sm); }
h3 { font-size: var(--text-lg); margin: var(--space-lg) 0 var(--space-2xs); }
h4 { font-size: var(--text-md); margin: var(--space-md) 0 var(--space-3xs); }
p { margin: 0 0 var(--space-sm); color: var(--color-ink-2); max-width: var(--measure); }
strong, b { font-weight: 600; color: var(--color-ink); }
code { font-family: var(--font-mono); font-size: 0.875em; background: var(--color-paper-2); padding: 0.1em 0.35em; border-radius: var(--radius-sm); }

a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--dur-short) var(--ease-out); }
a:hover { color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }
.meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0.01em; }
.mono { font-family: var(--font-mono); }

main { width: 100%; max-width: 64rem; margin: 0 auto; padding: var(--space-xl) var(--space-md) var(--space-3xl); flex: 1; }
main > :first-child { margin-top: 0; }

/* ── nav: N9 edge-aligned, on an ink masthead (the Snydus mark is white) ── */
.masthead { background: var(--color-ink); color: var(--color-on-ink); }
.masthead :focus-visible { outline-color: var(--color-on-ink); }
.top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  max-width: 64rem; width: 100%; margin: 0 auto; padding: var(--space-sm) var(--space-md);
}
.masthead.has-hero .top { border-bottom: 1px solid var(--color-ink-rule); }
.brand { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-on-ink); text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--color-on-ink); }
.brand span { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.01em; }
.brand span b { font-weight: 400; color: var(--color-on-ink-muted); }
.top nav { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; justify-content: flex-end; }
.top nav a, .top nav button.link { color: var(--color-on-ink-muted); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; }
.top nav a:hover, .top nav button.link:hover, .top nav a.on { color: var(--color-on-ink); }
.top nav a.on { text-decoration: underline; text-underline-offset: 0.35em; }
form.inline { display: inline; margin: 0; }
button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--color-ink-2); }
button.link:hover { color: var(--color-ink); text-decoration: underline; }

/* ── home hero: the mark large, beside one statement ── */
.hero {
  max-width: 64rem; margin: 0 auto; padding: var(--space-2xl) var(--space-md) var(--space-2xl);
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--space-xl); align-items: center;
}
.hero-mark img { width: 100%; height: auto; display: block; }
.hero h1 { color: var(--color-on-ink); max-width: 14ch; }
.hero .lead { color: var(--color-on-ink-muted); font-size: var(--text-md); max-width: 46ch; }
.hero .row { margin-top: var(--space-lg); gap: var(--space-lg); }
.btn.on-ink { background: var(--color-on-ink); color: var(--color-ink); border-color: var(--color-on-ink); }
.btn.on-ink:hover { background: var(--color-paper-2); border-color: var(--color-paper-2); color: var(--color-ink); }
.textlink.on-ink { color: var(--color-on-ink); }
.textlink.on-ink:hover { color: var(--color-on-ink-muted); }

/* ── footer: Ft2 inline single line ── */
.foot {
  display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: baseline;
  max-width: 64rem; width: 100%; margin: 0 auto; padding: var(--space-md);
  border-top: var(--rule); font-size: var(--text-sm); color: var(--color-muted);
}
.foot a { color: var(--color-muted); white-space: nowrap; }
.foot a:hover { color: var(--color-ink); }

/* ── buttons: solid ink rectangle + text-link secondary ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm);
  background: var(--color-ink); color: var(--color-paper); border: 1px solid var(--color-ink);
  font: inherit; font-weight: 600; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.btn:hover { background: var(--color-ink-2); border-color: var(--color-ink-2); color: var(--color-paper); }
.btn:active { background: var(--color-ink); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--color-paper-2); color: var(--color-muted); border-color: var(--color-rule); cursor: default; }
.btn.sm { padding: var(--space-2xs) var(--space-sm); font-size: var(--text-xs); }
.btn.lg { padding: var(--space-sm) var(--space-lg); font-size: var(--text-base); }
.btn.ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule-strong); }
.btn.ghost:hover { border-color: var(--color-ink); color: var(--color-ink); background: transparent; }
.btn.danger { background: var(--color-danger); border-color: var(--color-danger); }
.btn.danger:hover { background: var(--color-ink); border-color: var(--color-ink); }
.textlink { color: var(--color-ink); font-weight: 600; white-space: nowrap; }
.textlink::after { content: " →"; }
.row { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }

/* ── forms ── */
label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); margin: var(--space-sm) 0 var(--space-3xs); }
input, textarea, select {
  width: 100%; padding: var(--space-2xs) var(--space-xs); font: inherit; font-size: var(--text-base);
  color: var(--color-ink); background: var(--color-paper); border: var(--rule-strong); border-radius: var(--radius-sm);
}
input:hover, textarea:hover, select:hover { border-color: var(--color-ink-2); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }
input[type="checkbox"] { width: auto; accent-color: var(--color-ink); }
input[type="file"] { padding: var(--space-2xs); background: var(--color-paper-2); }
textarea { line-height: 1.5; }
.form { max-width: 26rem; margin: var(--space-lg) 0; }
.form h1 { font-size: var(--text-2xl); }
.form .btn { width: 100%; margin-top: var(--space-md); }
.error-text { color: var(--color-danger); font-size: var(--text-sm); margin-top: var(--space-xs); }
.flash { padding: var(--space-xs) 0; margin-bottom: var(--space-lg); border-top: var(--rule-strong); border-bottom: var(--rule-strong); font-size: var(--text-sm); color: var(--color-ink); }
.flash.error { color: var(--color-danger); border-color: var(--color-danger); }

/* cards are sections, not boxes: a ruled band */
.card { border-top: var(--rule-strong); padding: var(--space-md) 0; }
.card > h3:first-child, .card > h2:first-child { margin-top: 0; }

/* ── home: one ruled entry per product ── */
.entry { padding-top: var(--space-md); display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--space-md); border-top: var(--rule-strong); }
.entry h2 { margin: 0; font-size: var(--text-xl); display: flex; align-items: center; gap: var(--space-2xs); align-self: start; }
.entry h2 img { width: 1.5rem; height: 1.5rem; }
.entry ul { margin: 0 0 var(--space-md); padding-left: 1.1em; color: var(--color-ink-2); }
.entry li { margin: var(--space-3xs) 0; }
.entry .row { margin: var(--space-sm) 0 var(--space-xs); gap: var(--space-lg); }

/* ── downloads: Long Document ledger ── */
.doc { max-width: 46rem; }
.doc-head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.doc-head img { width: 2.75rem; height: 2.75rem; }
.doc-head h1 { margin: 0; }
.latest { border-top: var(--rule-strong); border-bottom: var(--rule); padding: var(--space-md) 0; margin: var(--space-lg) 0; display: flex; justify-content: space-between; gap: var(--space-md); align-items: center; flex-wrap: wrap; }
.latest h2 { margin: 0 0 var(--space-3xs); font-size: var(--text-xl); }
.note { font-size: var(--text-sm); color: var(--color-ink-2); }
.hash { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); overflow-wrap: anywhere; }
.label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); }
.badge { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.badge.off { color: var(--color-danger); }

details.release { border-top: var(--rule); }
details.release:last-of-type { border-bottom: var(--rule); }
details.release summary { cursor: pointer; padding: var(--space-sm) 0; display: flex; gap: var(--space-sm); align-items: baseline; list-style: none; }
details.release summary::-webkit-details-marker { display: none; }
details.release summary::after { content: "+"; font-family: var(--font-mono); color: var(--color-muted); margin-left: auto; }
details.release[open] summary::after { content: "–"; }
details.release summary .v { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); }
details.release summary:hover .v { color: var(--color-accent); }
details.release .body { padding: 0 0 var(--space-md); }
.notes { color: var(--color-ink-2); }
.notes ul { padding-left: 1.1em; margin: var(--space-2xs) 0; }
.notes h4 { font-size: var(--text-base); margin: var(--space-sm) 0 var(--space-3xs); }

/* ── tables (admin, account) ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-xs) var(--space-2xs); border-bottom: var(--rule); vertical-align: top; }
th { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-xs); color: var(--color-muted); border-bottom: var(--rule-strong); }
.tabs { display: flex; gap: var(--space-md); margin: var(--space-2xs) 0 var(--space-lg); border-bottom: var(--rule); flex-wrap: wrap; }
.tabs a { padding: var(--space-2xs) 0; color: var(--color-ink-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--color-ink); }
.tabs a.on { color: var(--color-ink); border-bottom-color: var(--color-ink); }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); }

/* ── legal ── */
.legal { max-width: var(--measure); }
.legal h2 { font-size: var(--text-lg); margin-top: var(--space-xl); }
.legal ul { padding-left: 1.1em; color: var(--color-ink-2); }
.legal li { margin: var(--space-3xs) 0; }

/* ── Snydus mark in the nav ── */
.brand-logo img { height: 1.9rem; width: auto; display: block; }

@media (max-width: 720px) {
  main { padding: var(--space-lg) var(--space-sm) var(--space-2xl); }
  .top { padding: var(--space-sm); flex-wrap: wrap; }
  .entry, .grid2, .hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .hero { padding: var(--space-lg) var(--space-sm) var(--space-xl); }
  .hero-mark img { max-width: 11rem; }
  .latest .btn { width: 100%; }
}