/* Glyph docs hub — shared stylesheet.
   Extracted from landing/index.html and extended for long-form article pages.
   Fonts (Archivo body/headings, IBM Plex Mono for code) are SELF-HOSTED from
   /glyph/assets/fonts/ via the shared @font-face declarations in fonts.css
   (linked separately by the page template) — still no external network
   request, just no CDN. A graceful system fallback stack covers the load gap. */

:root {
  /* Dark palette aligned to nanyte.com's dark-section tokens (tokens.css):
     nyt-black / graphite / steel surfaces, nyt-orange signal colour. */
  --bg: #0a0a0a; /* nyt-black */
  --panel: #1a1a1c; /* nyt-graphite (surface/card) */
  --panel-2: #2a2a2e; /* nyt-steel (raised surface) */
  --border: rgba(255, 255, 255, 0.1);
  --text: #f4f4f5;
  --muted: #d4d4d8;
  /* Tertiary/muted-most — verified ≥4.5:1 (≈7.5:1) on #0a0a0a. */
  --faint: #9aa0aa;
  /* Single brand accent — NANYTE orange (#FF7A00), per the ClaudeOS brandbook. */
  --accent: #ff7a00;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 28%, transparent);
  --radius: 12px;
  --maxw: 820px;
  --font-body: Archivo, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:
    'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
    monospace;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--accent);
  text-underline-offset: 2px;
}
a:hover {
  text-decoration: underline;
}

/* Skip link (a11y) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #0a0a0a;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  z-index: 10;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}
.skip-link:focus-visible,
.nav a:focus-visible,
nav.pager a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Header / nav ---- */
header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  max-width: 1080px;
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
}
.brand svg {
  height: 26px;
  width: auto;
}
.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  color: var(--muted);
  flex-wrap: wrap;
}
.nav a {
  text-decoration: none;
  color: var(--muted);
}
.nav a:hover {
  color: var(--text);
  text-decoration: none;
}
.nav a[aria-current] {
  color: var(--accent);
}
.nav a.btn.sm {
  color: #0a0a0a;
}
.nav a.btn.sm:hover {
  color: #0a0a0a;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 10px;
  transition:
    transform 0.08s ease,
    opacity 0.15s ease;
  white-space: nowrap;
}
.btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  text-decoration: none;
}
.btn.sm {
  padding: 8px 16px;
  font-size: 14px;
}

/* ---- Breadcrumbs ---- */
.breadcrumbs {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 24px 0;
  font-size: 13px;
  color: var(--faint);
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.breadcrumbs li + li::before {
  content: '/';
  color: var(--border);
}
.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--text);
}
.breadcrumbs [aria-current='page'] {
  color: var(--text);
}

/* ---- Article body ---- */
main {
  display: block;
}
.article {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 24px 8px;
}
.article h1 {
  font-size: clamp(28px, 4.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 8px 0 18px;
  font-weight: 800;
}
.article h2 {
  font-size: clamp(21px, 3vw, 27px);
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.article h3 {
  font-size: 18px;
  margin: 28px 0 10px;
}
.article h4 {
  font-size: 16px;
  margin: 22px 0 8px;
  color: var(--muted);
}
.article p,
.article li {
  color: var(--text);
  /* Long bare URLs / tokens wrap instead of pushing the page wide on mobile. */
  overflow-wrap: break-word;
}
.article p {
  margin: 0 0 16px;
}
.article ul,
.article ol {
  margin: 0 0 16px;
  padding-left: 24px;
}
.article li {
  margin: 6px 0;
}
/* Hub index lists (docs/guides/reference) are a table of contents, not prose:
   20+ permanently underlined links read as a wall. Underline on hover only.
   Prose links below keep their underline — the `.hub-list` class emitted by
   `indexContentHtml` is the only thing distinguishing the two. */
.article ul.hub-list {
  list-style: none;
  padding-left: 0;
}
.article ul.hub-list li {
  margin: 10px 0;
  padding-left: 14px;
  border-left: 2px solid var(--border);
}
.article ul.hub-list a {
  text-decoration: none;
  font-weight: 600;
}
.article ul.hub-list a:hover {
  text-decoration: underline;
}
.article ul.hub-list li:hover {
  border-left-color: var(--accent);
}

/* ---- Guides hub cards ----
   The guides hub renders as a card grid (`guideCardsHtml` in
   scripts/build-site.mjs) rather than the `.hub-list` above: a preview shot, a
   short title, a 2-line-clamped blurb and a reading-time chip. Docs and
   reference keep the list. Card titles stay TEXT-coloured on purpose — the old
   list read as a wall of orange links, so accent now appears only on the hover
   border and the focus ring. One column below ~380px falls out of the
   `min(340px, 100%)` track, so no extra breakpoint is needed. */
/* The guides hub earns a wider column than prose articles: 18 cards at 820px
   forced oversized 2-up cards (WL: "too large, information not displayed
   efficiently"). :has() scoping keeps every other page at --maxw; browsers
   without :has() gracefully keep the narrow layout. */
.article:has(.guide-cards) {
  max-width: 1040px;
}
html {
  scroll-behavior: smooth;
}
.guide-cards {
  display: grid;
  /* ~236px min → FOUR columns at the 1040px hub (4-item groups fill a row
     exactly), 3/2 in the mid bands, 1 narrow. */
  grid-template-columns: repeat(auto-fill, minmax(min(236px, 100%), 1fr));
  gap: 16px;
  margin: 20px 0 8px;
}
/* At-a-glance index: the whole catalogue in one block, grouped, each entry
   scroll-jumping to its card. */
.guide-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px 22px;
  margin: 22px 0 6px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.guide-index-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.article .guide-index a {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
  text-decoration: none;
}
.article .guide-index a:hover {
  color: var(--accent);
  text-decoration: none;
}
.article .guide-index a.guide-index-group {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
/* Section headers as mono eyebrows: five scan anchors must out-compete 18 bold
   card titles, which same-face bold h2s did not (design-critic finding 14).
   More air above the rule than below it (finding 16). */
.article h2.guide-group-title {
  margin-top: 64px;
  padding-top: 24px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Accent, not faint: five small orange anchors are the page's wayfinding —
     faint grey made the section headers the dimmest text in their own sections
     (critic r2 f6); a 10px mono dose of accent scans without shouting. */
  color: var(--accent);
}
.article a.guide-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 42%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  scroll-margin-top: 24px;
  color: var(--text);
  text-decoration: none;
  transition:
    border-color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}
.article a.guide-card:hover {
  /* Full-strength accent border + a lifted fill: the softer accent-border mix
     measured ~28% alpha on the dark card — below the perceptual floor, and a
     black shadow on a black page adds nothing (design-critic finding 6). */
  border-color: var(--accent);
  background: var(--panel-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  text-decoration: none;
}
.article a.guide-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* A jump-link lands among 18 look-alikes: mark the card you asked for. */
.article a.guide-card:target {
  border-color: var(--accent);
}
.guide-card-thumb {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
/* Single-column widths: the thumb becomes an inset-framed 16:9 image. All 18
   card sources are authored at exactly 1120×630, so the cover-fit never crops
   in practice; the frame makes the screenshot read as deliberate. */
@media (max-width: 640px) {
  .guide-card-thumb {
    margin: 14px 14px 0;
    border: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 8px;
  }
}
/* Beats `.article img { max-width:100%; height:auto; border-radius:8px }` —
   the thumb must FILL the 16/9 box and take the card's own corner radius. */
.article .guide-card-thumb img {
  /* absolute inset-0 hard-locks the 16:9 box: aspect-ratio alone is only a
     preferred ratio, and a portrait source (claude-pill.png, 500x470) was
     stretching its card taller than its row. */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
}
.guide-card-body {
  display: block;
  padding: 12px 13px 8px;
}
.guide-card-title {
  display: block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--text);
}
.guide-card-blurb {
  display: -webkit-box;
  /* 3 lines: the dense 4-col cards hold ~68 chars per 2 lines and were eating
     the blurbs' payoff verbs mid-word (critic r3 f3). */
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}
.guide-card-meta {
  align-self: start;
  /* margin-top:auto pins every chip to its card's bottom edge, so chips share
     a baseline across a row even when one title wraps and a neighbor doesn't. */
  margin: auto 13px 12px;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--faint);
}
/* Cohesion across mismatched screenshots: rest thumbs sit slightly dimmed and
   desaturated, waking to full strength on hover — the grid reads as one set. */
.article .guide-card-thumb img {
  filter: brightness(0.92) saturate(0.95);
  transition:
    filter 160ms ease,
    transform 160ms ease;
}
.article a.guide-card {
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}
.article a.guide-card:hover .guide-card-thumb img {
  filter: brightness(1) saturate(1);
}

.article a {
  color: var(--accent);
  /* A long link (bare URL) must break rather than overflow at 390px. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.article strong {
  color: var(--text);
  font-weight: 600;
}
.article blockquote {
  margin: 18px 0;
  padding: 8px 18px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--muted);
  border-radius: 0 8px 8px 0;
}
.article code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
}
.article pre {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow-x: auto;
  max-width: 100%;
  margin: 0 0 18px;
}
.article pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.55;
}
.article img,
.article svg {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.article figure {
  margin: 18px 0;
}
.article figcaption {
  color: var(--faint);
  font-size: 13px;
  margin-top: 6px;
}
.article hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}
/* Wide Markdown tables are wrapped in .table-wrap (see scripts/build-site.mjs)
   so they scroll horizontally on narrow viewports instead of pushing the page
   wide. The table itself stays a normal block-level table. */
.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin: 0 0 20px;
  /* Subtle scroll affordance on the raised surface edge. */
  border-radius: 8px;
}
.article table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 14.5px;
}
.article th,
.article td {
  border: 1px solid var(--border);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
/* Only the LAST column wraps. That column is the prose one in every table we
   ship (DXF "What happens", the record catalogue's "Meaning"), and it is the
   one that used to be clipped at 390px. Scoping the exception to :first-child
   instead was worse: it let the record catalogue's short columns break inside
   tokens like `10 / 0x0A`, doubling row heights while the table still had to
   scroll — wrapping there bought nothing. A table whose prose sits in a middle
   column falls back to horizontal scroll in .table-wrap, as before. */
.article th:not(:last-child),
.article td:not(:last-child) {
  white-space: nowrap;
}
.article th {
  background: var(--panel-2);
  font-weight: 600;
}

/* ---- Chapter pager (prev/next) ---- */
nav.pager {
  max-width: var(--maxw);
  margin: 28px auto 0;
  padding: 0 24px;
  display: flex;
  gap: 12px;
}
nav.pager a {
  flex: 1 1 0;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--text);
  background: var(--panel);
  transition:
    border-color 0.12s ease,
    background 0.12s ease;
}
nav.pager a:hover {
  border-color: var(--accent-border);
  background: var(--panel-2);
  text-decoration: none;
}
nav.pager a::before {
  display: block;
  color: var(--faint);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
/* `\00a0` not a literal space: a space directly after a CSS hex escape is
   consumed as the escape's terminator, so '\2190 Previous' renders "←Previous"
   while 'Next \2192' keeps its space — the two halves came out asymmetric. */
a.pager-prev::before {
  content: '\2190\00a0Previous';
}
a.pager-next {
  text-align: right;
}
a.pager-next::before {
  content: 'Next\00a0\2192';
}
/* A first/last chapter has only one link; let it keep its side of the row
   instead of stretching into a full-width card that reads like a banner. */
nav.pager a:only-child {
  flex: 0 1 50%;
}
nav.pager a.pager-next:only-child {
  margin-left: auto;
}
@media (max-width: 560px) {
  nav.pager {
    flex-direction: column;
  }
  a.pager-next {
    text-align: left;
  }
}

/* ---- Updated line ---- */
.updated {
  max-width: var(--maxw);
  margin: 8px auto 0;
  padding: 0 24px;
  color: var(--faint);
  font-size: 13px;
}

/* ---- CTA band ---- */
.cta-band {
  background: var(--panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 44px;
}
.cta-band .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 34px;
  padding-bottom: 34px;
}
.cta-band .cta-copy {
  font-size: 17px;
  font-weight: 600;
  max-width: 46ch;
}
.cta-band .cta-copy span {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 14px;
  margin-top: 4px;
}

/* ---- Footer ---- */
footer.site {
  border-top: 1px solid var(--border);
  color: var(--faint);
  font-size: 13.5px;
}
footer.site .wrap {
  max-width: 1080px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  padding-bottom: 20px;
}
footer.site a {
  color: var(--muted);
  text-decoration: none;
}
footer.site a:hover {
  color: var(--text);
}
footer .links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
footer .legal {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 34px;
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.5;
}
footer .legal p {
  margin: 4px 0;
}
footer .legal a {
  text-decoration: underline;
}

.page-toc {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 20px 0;
}
.page-toc .page-toc-title {
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.page-toc ul {
  margin: 0;
  padding-left: 18px;
  column-width: 220px;
  font-size: 14px;
}

@media (max-width: 560px) {
  .nav a:not(.btn) {
    font-size: 13px;
    gap: 14px;
  }
  .cta-band .wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}