/* Obliga — shared styling for long-form guides under docs/site/guides/<slug>/index.html.
   Same Registrar vocabulary as the overview pages (docs/design-brief.md): ink on paper, one accent,
   Bitter for the title only, Public Sans for reading, IBM Plex Mono for identifiers and code.
   Written to be reused by every guide, so nothing here is specific to one article.
   NOTE the paths: a guide sits two levels down, so its HTML references ../../css/ and ../../images/.
   Font URLs inside fonts.css are relative to that file, so they resolve from any depth. */

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--ledger);
  color: var(--ink);
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
}
body { font-size: 17px; line-height: 1.7; }

/* --- Hero: pinned dark in both themes, matching the overview pages --------------------------- */
.hero {
  background-color: #1E2A3A;
  background-image: radial-gradient(120% 150% at 88% -30%, #2C3E58 0%, #1E2A3A 60%);
  color: #EEF1F4;
  padding: 3.25rem 1.5rem 2.75rem;
}
.hero__inner { max-width: 660px; margin: 0 auto; }
.hero__brand { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 1.4rem; }
.hero__icon { display: block; flex: none; }
a.hero__brand { text-decoration: none; color: inherit; cursor: pointer; }
a.hero__brand:hover .hero__kicker,
a.hero__brand:focus-visible .hero__kicker { color: #C6D0DC; }
.hero__kicker {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: #8FB0D9; margin: 0;
}
.hero h1 {
  font-family: 'Bitter', Georgia, serif; font-weight: 700;
  font-size: clamp(1.85rem, 4vw, 2.35rem); line-height: 1.15; letter-spacing: -0.005em;
  margin: 0; text-wrap: balance;
}
.hero__lede { font-size: 1.12rem; line-height: 1.55; color: #C6D0DC; margin: 1.1rem 0 0; max-width: 58ch; }
.hero__lede strong { color: #FFFFFF; font-weight: 600; }

/* --- Body ------------------------------------------------------------------------------------ */
.page { max-width: 660px; margin: 0 auto; padding: 3rem 1.5rem 6rem; }

h2 {
  font-family: 'Public Sans', sans-serif; font-weight: 600;
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--graphite);
  margin: 3rem 0 1.15rem; padding-top: 1.75rem; border-top: 1px solid var(--rule);
}
h2:first-of-type { margin-top: 2.25rem; }

/* Each failure mode is its own heading: they are four independent pitfalls, not four steps, so
   they get names rather than numbers. Numbering would imply an order that does not exist. */
h3 {
  font-family: 'Public Sans', sans-serif; font-weight: 600;
  font-size: 1.16rem; line-height: 1.4; color: var(--ink);
  margin: 2.25rem 0 0.65rem; text-wrap: balance;
}
h3 + p { margin-top: 0; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }

a { color: var(--ink-blue); text-underline-offset: 0.15em; }
a:focus-visible { outline: 2px solid var(--ink-blue); outline-offset: 2px; border-radius: 2px; }

code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.87em;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.08em 0.32em;
  word-break: break-word;
}

/* Block code. The inline `code` rule above gives every snippet a border and background, which
   doubles up inside a pre, so the nested code resets those. overflow-x keeps a long formula
   scrolling inside its own box rather than making the whole page scroll sideways on a phone. */
pre {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  line-height: 1.5;
}
pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.92rem;
  white-space: pre;
  word-break: normal;
}

/* The one thing to take away, when an article has one. Amber because it is a caution, matching the
   Notice Amber in the product's own status vocabulary rather than inventing a colour. */
.callout {
  background: var(--amber-bg);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--notice-amber);
  border-radius: 4px;
  padding: 1.1rem 1.25rem;
  margin: 1.75rem 0;
}
.callout p { margin: 0; }

/* Closing pitch. Deliberately quiet: the article earns its keep as a guide first. */
.closing {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  color: var(--graphite);
}
.closing strong { color: var(--ink); }

/* --- The guides index -------------------------------------------------------------------------
   Its own card list rather than reusing the homepage's, because index.css is not loaded here and
   duplicating those rules would mean two places to change one look. Deliberately plainer than the
   homepage cards: this page is a table of contents, not a pitch. */
.guide-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.guide-card {
  display: block;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-blue);
  border-radius: 4px;
  padding: 1.15rem 1.3rem;
  text-decoration: none;
  color: inherit;
}
.guide-card:hover, .guide-card:focus-visible { border-left-color: var(--notice-amber); }
.guide-card__topic {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--graphite); margin: 0 0 0.4rem;
}
.guide-card__title {
  font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 1.14rem;
  line-height: 1.35; color: var(--ink); margin: 0 0 0.45rem; text-wrap: balance;
}
.guide-card:hover .guide-card__title { color: var(--ink-blue); }
.guide-card__desc { font-size: 0.97rem; line-height: 1.6; color: var(--graphite); margin: 0; }

.back-link {
  display: inline-block; margin-top: 3rem;
  font-size: 0.95rem; color: var(--ink-blue); text-decoration: none;
}
.back-link:hover, .back-link:focus-visible { text-decoration: underline; }

footer {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  font-size: 0.87rem; color: var(--graphite);
}