/* ---------------- Article pages ----------------
 * Standalone stylesheet for the long-form pages in articles.js. It deliberately does NOT extend
 * public/style.css: that file sets `body { height: 100dvh; overflow: hidden }` for the app, which
 * clips a document, and an article is a reading layout rather than an app screen. Keeping them
 * apart is also what stops article rules leaking back into the app.
 *
 * The token block below is a deliberate COPY of the app's brand values (style.css :root), not an
 * import. Only the handful a document needs are here. If the brand palette changes, change both.
 */
:root {
  --felt: #16181b;
  --line: #3a3f45;
  --ink: #e9eaec;
  --ink-dim: #9aa0a6;
  --brass: #d0d3d7;       /* light-silver accent, named brass for continuity with the app */
  --brass-soft: #71767d;
  /* Same fluid root as the app, so type matches across a click from the article into the tool. */
  font-size: clamp(16px, 9.9px + 0.476vw, 26px);
  /* 60ch, not the app's 68ch: `ch` is the width of the "0" glyph and average prose letters are
     narrower, so 68ch renders around 80 real characters. 60ch lands near 70, inside the 55-75
     readability band. The app's value is right for its mixed UI copy; this is for solid prose. */
  --read-max: 60ch;
  --bar-h: 3.4rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  /* Same gradient as the app, but NOT background-attachment: fixed. The app's body never scrolls so
     it never needed one; on a long document a fixed attachment costs a full-viewport repaint per
     scroll frame on mobile and buys nothing, since the gradient lives at the top of the page. */
  background: radial-gradient(1200px 700px at 50% -10%, #20242a 0%, var(--felt) 60%) no-repeat;
  background-color: var(--felt); /* below the gradient's reach the page is flat felt, never the canvas default */
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.65;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-text-size-adjust: 100%;
}

/* ---- top bar ---- */
/* Full bleed bar, content capped inside it: the same shape #forum-top uses in the app, which is
   what keeps the wordmark lined up with the article's left edge instead of floating. */
.art-top {
  position: sticky; top: 0; z-index: 10;
  background: rgba(8, 8, 14, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.art-top-inner {
  /* read-max plus TWICE this element's own side padding, so that after padding the wordmark's left
     edge lands exactly on the article column's left edge. A bare read-max would inset it by one
     padding, a wider cap pushes it out: measured 31px adrift at 1280 before this. */
  max-width: calc(var(--read-max) + 2.2rem);
  margin: 0 auto;
  min-height: var(--bar-h);
  padding: .4rem 1.1rem;
  display: flex; align-items: center; gap: 1.2rem;
  flex-wrap: wrap;
}
/* Matches .brand-logo in style.css, including the image heights, so a guide's top bar carries the
   same mark at the same size as every bar in the app. The type rules are the onerror fallback.
   NOTE: logo.png has a dark backdrop baked into it, so it only sits clean on a dark surface and
   must never take a CSS filter of its own. The bar it sits on here is the app's own
   rgba(8,8,14,.92), which is exactly where it already lives. */
.art-brand {
  font-family: "Cinzel", serif; font-weight: 700;
  font-size: 1.15rem; letter-spacing: .02em;
  color: var(--ink); text-decoration: none;
  white-space: nowrap; line-height: 1; flex: 0 0 auto;
}
.art-brand span { color: var(--brass); }
.art-brand-img { height: 30px; width: auto; display: block; }
@media (max-width: 560px) { .art-brand-img { height: 22px; } }
.art-nav { display: flex; gap: 1rem; flex-wrap: wrap; margin-left: auto; }
.art-nav a {
  color: var(--ink-dim); text-decoration: none;
  font-size: .82rem; font-weight: 500;
  min-height: 26px; display: inline-flex; align-items: center; /* WCAG 2.2 target size */
}
.art-nav a:hover, .art-nav a:focus-visible { color: var(--ink); }

/* ---- body ---- */
.art-main { flex: 1 0 auto; width: 100%; padding: 2.6rem 1.1rem 3.4rem; }
.art-body { max-width: var(--read-max); width: 100%; margin: 0 auto; }

.art-body h1 {
  font-family: "Cinzel", serif; font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.15; letter-spacing: .01em;
  color: var(--ink);
  margin-bottom: .7rem;
}
.art-standfirst {
  font-size: 1.06rem; color: var(--ink-dim); line-height: 1.6;
  padding-bottom: 1.5rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.art-body h2 {
  font-family: "Cinzel", serif; font-weight: 700;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.25; color: var(--brass);
  margin: 2.6rem 0 .9rem;
}
.art-body h3 {
  font-size: 1rem; font-weight: 600; color: var(--ink);
  margin-bottom: .3rem;
}
.art-body p { margin-bottom: 1.15rem; }
.art-body ul, .art-body ol { margin: 0 0 1.3rem 1.35rem; }
.art-body li { margin-bottom: .65rem; padding-left: .2rem; }
.art-body li::marker { color: var(--brass-soft); }
.art-body a { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; text-decoration-color: var(--brass-soft); }
.art-body a:hover, .art-body a:focus-visible { text-decoration-color: var(--ink); }

.art-note {
  border-left: 2px solid var(--brass-soft);
  padding: .1rem 0 .1rem 1rem;
  margin: 0 0 1.3rem;
  color: var(--ink-dim);
}

/* ---- table ---- */
/* Its own scroller: a table is the one block that cannot reflow on a phone, and the page body must
   never scroll sideways. */
.art-tablewrap { overflow-x: auto; margin: 0 0 1.5rem; -webkit-overflow-scrolling: touch; }
.art-table { border-collapse: collapse; width: 100%; min-width: 26rem; font-size: .92rem; }
.art-table th, .art-table td {
  text-align: left; padding: .55rem .8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.art-table thead th { color: var(--brass); font-weight: 600; white-space: nowrap; }
.art-table tbody th { font-weight: 500; color: var(--ink-dim); }
.art-table tbody tr:last-child th, .art-table tbody tr:last-child td { border-bottom: 0; }

/* ---- call to action ---- */
/* The one filled control on the page, matching the app's single-filled-button convention. */
.art-cta-wrap { margin: 1.8rem 0 2rem; }
/* `a.art-cta`, not `.art-cta`: `.art-body a` above is (0,1,1) and beats a lone class (0,1,0)
   whatever the source order, so a bare class here rendered the button in link ink on its own brass
   fill. Measured 1.25:1 before this. Do not relax the selector. */
a.art-cta {
  display: inline-block;
  background: var(--brass); color: #14161a;
  font-weight: 600; font-size: .98rem;
  padding: .7rem 1.5rem; border-radius: 7px;
  border: 1px solid transparent; /* matches the bordered variants' box, see the app's button rules */
  text-decoration: none;
}
a.art-cta:hover, a.art-cta:focus-visible { background: #fff; color: #14161a; text-decoration: none; }

/* ---- faq ---- */
.art-faq { margin-bottom: 1.4rem; }
.art-faq p { margin-bottom: 0; color: var(--ink-dim); }

/* ---- more guides ---- */
/* Generated from the sibling articles, so it is never a stale hand-kept list. Set apart from the
   body with a rule because it is navigation, not more of the argument. */
.art-more { margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.art-more h2 { margin-top: 0; }
.art-more ul { list-style: none; margin: 0; }
.art-more li { margin-bottom: .55rem; padding-left: 0; }
.art-more a { color: var(--ink); text-decoration: none; }
.art-more a:hover, .art-more a:focus-visible { text-decoration: underline; text-underline-offset: .18em; }

/* ---- footer ---- */
.art-foot {
  flex-shrink: 0; /* a flex column child squeezed below its content height overflows, see style.css */
  border-top: 1px solid var(--line);
  padding: 1.4rem 1.1rem 2rem;
  text-align: center;
  /* --ink-dim, matching the app's #legal-foot. --brass-soft measured 3.89:1 here, under AA for text
     this size; --ink-dim is 6.74:1. The disclaimer is a Fan Content Policy condition, so it has to
     be legible rather than decorative. */
  color: var(--ink-dim);
  font-size: .74rem; line-height: 1.6;
}
.art-foot p { max-width: 46rem; margin: 0 auto; }
.art-foot-links { margin-bottom: .7rem !important; }
.art-foot-links a {
  color: var(--ink-dim); text-decoration: none;
  min-height: 26px; display: inline-flex; align-items: center;
}
.art-foot-links a:hover, .art-foot-links a:focus-visible { color: var(--ink); }

:where(a, button):focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}