/* ==========================================================================
   KY WEB — DIRECTION C: ARTICLE COMPONENTS

   Loaded AFTER c-loud.css (tokens, nav, footer, buttons, bands, modal, CTA)
   and c-service.css (page hero, breadcrumbs, filters, related rows). This
   file is only the vocabulary long-form editorial needs and neither of those
   has: the article hero, the reading column, the sticky rail, and the four
   in-body blocks the source articles use.

   Same rules as the rest of the direction: zero radius, 3px rules, hard
   colour blocks, flood-invert on interaction, mobile-first, breakpoints
   640/1024/1280 only, no `!important`, no `style=`.

   One deliberate departure from the direction: body copy inside .artbody is
   sentence case and set in Inter, not uppercase Jakarta. Display type is for
   headlines. A 1,600-word article set in caps is unreadable, and readability
   is the entire product here. Headings stay uppercase — the voice is intact
   where it can be heard.
   ========================================================================== */

/* ── ARTICLE HERO ─────────────────────────────────────────────────────────
   .hero--page (c-service.css) already collapses the full-viewport homepage
   hero. An article title is a sentence, not a three-word slogan, so it needs
   a smaller cap and leading that survives eight words in caps. */

.hero--article .hero__h {
  font-size: min(clamp(1.75rem, 5.5vw, 3.25rem), 20vh);
  line-height: 0.95;
  max-width: 22ch;
  margin-bottom: var(--s4);
}

/* Category, sitting on green — ink block, never green text on green. */
.artcat {
  display: inline-block;
  padding: 8px var(--s2);
  margin-bottom: var(--s3);
  background: var(--ink);
  color: var(--green);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.2;
}

.artmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--s2);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.artmeta li { display: flex; align-items: center; gap: var(--s2); }
.artmeta li + li::before { content: '\002F'; opacity: 0.5; }

/* On an article the meta row follows the headline, which carries its own
   bottom margin. On /privacy-policy/ it follows the lede instead and was
   sitting hard against it. */
.hero__foot + .artmeta { margin-top: var(--s3); }

/* ── READING COLUMN + RAIL ────────────────────────────────────────────────
   Single column on mobile with the rail below the copy: on a phone a sticky
   sidebar is just a second scroll of content nobody asked for first. */

.artwrap {
  display: grid;
  gap: var(--s6);
  align-items: start;
  padding-block: clamp(var(--s5), 7vw, var(--s7));
  padding-inline: var(--pad);
  background: var(--paper);
  color: var(--ink);
  --fx: var(--ink);
}

/* A grid item defaults to min-width:auto, so it refuses to shrink below its
   widest child. The comparison table declares min-width:34rem, which dragged
   the whole reading column to 544px inside a 390px viewport and cut ~154px off
   every line of body copy. This lets the column shrink so the table scrolls
   inside .ctable-wrap, which is what that wrapper is for. */
.artbody, .artside { min-width: 0; }

@media (min-width: 1024px) {
  .artwrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    column-gap: var(--s6);
  }
  .artside {
    position: sticky;
    /* Header is sticky and in flow — clear it plus a breath. */
    top: calc(var(--nav-h) + var(--s3));
  }
}

.artside { display: grid; gap: var(--s3); }

/* ── BODY COPY ────────────────────────────────────────────────────────────
   The global reset zeroes p margins and strips ul markers, so the reading
   column restores both rather than every article carrying utility classes. */

.artbody { max-width: 68ch; font-size: 1.0625rem; line-height: 1.7; }

.artbody p { margin-bottom: var(--s3); }
.artbody > :last-child { margin-bottom: 0; }

.artbody h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.375rem, 3.6vw, 1.875rem);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: var(--s6) 0 var(--s3);
  padding-top: var(--s3);
  border-top: var(--rule) solid var(--ink);
  /* So a ToC jump doesn't land the heading under the sticky header. */
  scroll-margin-top: calc(var(--nav-h) + var(--s3));
}
.artbody > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.artbody h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.0625rem, 2.4vw, 1.3125rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: var(--s4) 0 var(--s2);
}

.artbody ul, .artbody ol { display: grid; gap: 10px; margin: 0 0 var(--s3); }
.artbody ol { padding-left: 1.35em; list-style: decimal; }
.artbody ol li { padding-left: 4px; }

/* Square markers, because nothing in this direction is round. */
.artbody ul li { position: relative; padding-left: 26px; }
.artbody ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 10px;
  background: var(--green);
  /* Green on paper is 1.63:1 — fine as a shape with a rule around it,
     never as text or as the only carrier of meaning. */
  outline: 2px solid var(--ink);
}

.artbody strong { font-weight: 600; color: var(--ink); }
.artbody em { font-style: italic; }

.artbody a {
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
}
.artbody a:hover, .artbody a:focus-visible { background: var(--ink); color: var(--green); }

.artbody code {
  padding: 2px 6px;
  border: 2px solid var(--ink);
  background: var(--white);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

.artbody blockquote {
  margin: var(--s5) 0;
  padding: var(--s3);
  border: var(--rule) solid var(--ink);
  border-left-width: 12px;
  background: var(--white);
}
.artbody blockquote p { margin: 0; font-size: 1.125rem; line-height: 1.55; }

/* ── HIGHLIGHT BOX — the source's `.highlight-box` / `.flag-box` ────────── */

.hlbox {
  margin: var(--s5) 0;
  border: var(--rule) solid var(--ink);
  background: var(--white);
}
.hlbox__h {
  margin: 0;
  padding: 12px var(--s3);
  background: var(--ink);
  color: var(--green);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
}
.hlbox__body { padding: var(--s3); }
.hlbox__body > :last-child { margin-bottom: 0; }

/* The red-flag variant. The source signalled it with pale red fill and dark
   red text; that palette does not exist here, so it is marked by inversion
   instead — the warning reads as the negative of a normal box. */
.hlbox--flag { border-color: var(--ink); background: var(--ink); color: var(--green); }
.hlbox--flag .hlbox__h { background: var(--green); color: var(--ink); }
.hlbox--flag strong { color: currentColor; }
.hlbox--flag li::before { background: var(--green); outline-color: var(--green); }
.hlbox--flag a { border-bottom-color: currentColor; }
.hlbox--flag a:hover, .hlbox--flag a:focus-visible { background: var(--green); color: var(--ink); }

/* ── STAT ROW — the source's `.stat-row` / `.stat-box` ─────────────────── */

.artstats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
  margin: var(--s5) 0;
}
@media (min-width: 640px) { .artstats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.artstat {
  display: grid;
  gap: var(--s1);
  align-content: start;
  padding: var(--s3);
  border: var(--rule) solid var(--ink);
  background: var(--ink);
  color: var(--green);
}
.artstat__n {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.artstat__l { font-size: 0.875rem; line-height: 1.45; }

/* ── NUMBERED SIGNS — the source's `.sign-item` ────────────────────────── */

.signs { margin: var(--s5) 0; border-top: var(--rule) solid var(--ink); }

.sign {
  display: grid;
  gap: var(--s1) var(--s3);
  padding-block: var(--s3);
  border-bottom: var(--rule) solid var(--ink);
}
@media (min-width: 640px) {
  .sign { grid-template-columns: minmax(0, 4rem) minmax(0, 1fr); align-items: baseline; }
}

.sign__n {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 7vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.sign__c > :last-child { margin-bottom: 0; }

/* The row already carries its own rule and number, so the heading inside it
   drops the section chrome .artbody h2 would otherwise add. */
.sign__c h2, .sign__c h3 {
  margin: 0 0 var(--s2);
  padding-top: 0;
  border-top: 0;
  font-size: clamp(1.0625rem, 2.4vw, 1.3125rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* ── COMPARISON TABLE — the source's `.compare-table` ──────────────────── */

.ctable-wrap { margin: var(--s5) 0; overflow-x: auto; }

.ctable {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  border: var(--rule) solid var(--ink);
  background: var(--white);
  font-size: 0.9375rem;
  text-align: left;
}
.ctable th {
  padding: 12px var(--s2);
  background: var(--ink);
  color: var(--green);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ctable td { padding: 12px var(--s2); border-top: 2px solid var(--ink); line-height: 1.5; }
.ctable td:first-child { font-weight: 600; }

/* ── SIDE RAIL ────────────────────────────────────────────────────────── */

.rail {
  border: var(--rule) solid var(--ink);
  background: var(--white);
  color: var(--ink);
}
.rail--ink { background: var(--ink); color: var(--green); }

.rail__h {
  margin: 0;
  padding: 12px var(--s3);
  background: var(--ink);
  color: var(--green);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.3;
}
.rail--ink .rail__h { background: var(--green); color: var(--ink); }

.rail__body { padding: var(--s3); }
.rail__body p { font-size: 0.9375rem; line-height: 1.55; margin-bottom: var(--s3); }
.rail__body .btn { width: 100%; }

/* Contents list — built from the article's own h2s. */
.toc { display: grid; }

/* The longest articles carry nine entries. Stuck to a 768px-tall viewport
   that pushes the enquiry card below the fold with no way to scroll to it,
   because the rail itself is not scrolling. The list gets its own overflow
   so the card underneath is always reachable. */
@media (min-width: 1024px) {
  .toc { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
}
.toc li { border-top: 2px solid var(--ink); }
.toc li:first-child { border-top: 0; }
.toc a {
  display: block;
  padding: 12px var(--s3);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color var(--flip), color var(--flip);
}
.toc a:hover, .toc a:focus-visible { background: var(--ink); color: var(--green); }

/* ── ARTICLE CARDS — the index grid ───────────────────────────────────── */

.agrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}
@media (min-width: 640px)  { .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .agrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.acard { display: flex; }
.acard[hidden] { display: none; }

.acard > a {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  width: 100%;
  padding: var(--s3);
  border: var(--rule) solid var(--ink);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--flip), color var(--flip);
}
.acard > a:hover, .acard > a:focus-visible { background: var(--ink); color: var(--green); }

.acard__cat {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.acard__t {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.acard__d { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); }
.acard > a:hover .acard__d, .acard > a:focus-visible .acard__d { color: currentColor; }

.acard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: auto;
  padding-top: var(--s2);
  border-top: 2px solid currentColor;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}