/* ═══════════════════════════════════════════════════════════════
   LAWRYSE — the article page (W2b).

   Loaded on single posts only. Everything here is expressed in the tokens
   from style.css, so the brand revision (and the satire yellow) stay a
   one-file change.

   The measure is the point of this stylesheet. Legal prose is dense, and the
   single thing that makes it readable is a narrow column with real line
   height — so the body caps its own width rather than filling the shell.
   ═══════════════════════════════════════════════════════════════ */

.lw-article {
  max-width: 46rem;
}

/* ── Header ──────────────────────────────────────────────────────── */

.lw-article__kicker {
  margin: 0 0 var(--lw-s2);
  font-size: var(--lw-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lw-red);
}

/* SATIRE label (§12.5.4). Deliberately the same device as the advertising
   disclosure — small, quiet, permanent, sitting above the headline — because
   it does the same job: telling a reader what they are looking at BEFORE they
   read it. The yellow rule is what stops it reading as just another kicker. */
.lw-article__satire-label {
  display: inline-block;
  margin: 0 0 var(--lw-s3);
  padding: var(--lw-s1) var(--lw-s3);
  background: var(--lw-satire);
  color: var(--lw-satire-ink);
  font-size: var(--lw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--lw-radius-sm);
}

/* The whole header is banded on a satire piece, so the treatment survives a
   screenshot of the top of the article — the same reasoning as the card badge
   sitting inside the image area. */
.lw-article__header--satire {
  border-top: 5px solid var(--lw-satire);
  border-bottom: 5px solid var(--lw-satire);
  padding: var(--lw-s5) 0;
  margin-bottom: var(--lw-s5);
}

.lw-article__title {
  margin: 0 0 var(--lw-s4);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-3xl);
  font-weight: 700; /* Roboto Condensed tops out at 700 in the enqueue */
  letter-spacing: -0.01em;
  line-height: var(--lw-lh-tight);
  color: var(--lw-ink);
}

.lw-article__standfirst {
  margin: 0 0 var(--lw-s4);
  font-size: var(--lw-fs-md);
  font-weight: 500;
  line-height: var(--lw-lh-snug);
  color: var(--lw-body);
}

.lw-article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lw-s3);
  font-size: var(--lw-fs-sm);
  color: var(--lw-muted);
}

.lw-article__jurisdiction {
  padding: 2px var(--lw-s2);
  border: 1px solid var(--lw-border-strong);
  border-radius: 999px;
  font-weight: 600;
  color: var(--lw-ink);
}

.lw-article__author {
  font-weight: 600;
  color: var(--lw-ink);
}

.lw-article__badge {
  padding: 2px var(--lw-s2);
  border-radius: 999px;
  background: var(--lw-pink-soft);
  color: var(--lw-red);
  font-size: var(--lw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* §12.5.1 — the paid-contribution disclosure, directly under the byline. */
.lw-article__paid-note {
  margin: var(--lw-s2) 0 0;
  font-size: var(--lw-fs-xs);
  color: var(--lw-muted);
}

/*
 * A fixed, cropped box rather than "width:100%, height:auto" (Alice,
 * 2026-08-03: "images... hopelessly too big and distorted"). The old rule
 * scaled the SOURCE FILE'S native size straight onto the page — fine for a
 * clean 1200×675 hero crop, but add_image_size() can't upscale a smaller
 * original, so any image narrower than 1200px (portrait stock photos, a
 * demo image dropped in at its native size) rendered at its own native
 * aspect ratio instead: sometimes a huge portrait taking most of the fold,
 * inconsistent from article to article. object-fit: cover on a fixed box
 * guarantees the same shape everywhere, same as the card system already
 * does — center-cropped, never stretched. A focal-point/taller-variant
 * choice (KNOWN, NOT YET ADDRESSED in CURRENT) is still a real later
 * improvement for WHICH part of a tall image is kept; this fixes the size.
 */
.lw-article__media {
  margin: var(--lw-s5) 0 0;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  overflow: hidden;
  border-radius: var(--lw-radius);
}

.lw-article__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lw-article__media figcaption {
  margin-top: var(--lw-s2);
  font-size: var(--lw-fs-sm);
  color: var(--lw-muted);
}

.lw-article__credit::before {
  content: "—";
  margin: 0 var(--lw-s1);
}

.lw-article__credit {
  font-style: italic;
}

/* ── Body ────────────────────────────────────────────────────────── */

.lw-article__body {
  margin-top: var(--lw-s6);
  font-size: var(--lw-fs-base);
  line-height: var(--lw-lh-body);
  color: var(--lw-body);
}

.lw-article__body > * + * {
  margin-top: var(--lw-s4);
}

.lw-article__body h2 {
  margin-top: var(--lw-s7);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-lg);
  font-weight: 700;
  line-height: var(--lw-lh-snug);
  color: var(--lw-ink);
}

.lw-article__body h3 {
  margin-top: var(--lw-s6);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-md);
  font-weight: 700;
  color: var(--lw-ink);
}

.lw-article__body ul,
.lw-article__body ol {
  padding-left: var(--lw-s5);
}

.lw-article__body li + li {
  margin-top: var(--lw-s2);
}

.lw-article__body a {
  color: var(--lw-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lw-article__body img {
  max-width: 100%;
  max-height: 70vh; /* a body image can't dominate the viewport either */
  height: auto;
  border-radius: var(--lw-radius-sm);
}

.lw-article__body blockquote {
  margin-left: 0;
  padding-left: var(--lw-s4);
  border-left: 3px solid var(--lw-red);
  font-size: var(--lw-fs-md);
  font-style: italic;
  color: var(--lw-ink);
}

/* Wide content scrolls inside itself rather than pushing the page sideways. */
.lw-article__body table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
}

.lw-article__body th,
.lw-article__body td {
  padding: var(--lw-s2) var(--lw-s3);
  border: 1px solid var(--lw-border);
  text-align: left;
}

/* ── Pull-out callout ────────────────────────────────────────────── */

.lw-callout {
  margin: var(--lw-s6) 0;
  padding: var(--lw-s4) var(--lw-s5);
  background: var(--lw-canvas-alt);
  border-left: 4px solid var(--lw-red);
  border-radius: 0 var(--lw-radius-sm) var(--lw-radius-sm) 0;
}

.lw-callout__title {
  margin: 0 0 var(--lw-s2);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lw-red);
}

.lw-callout__body {
  font-size: var(--lw-fs-sm);
  line-height: var(--lw-lh-body);
  color: var(--lw-body);
}

.lw-callout__body > * + * {
  margin-top: var(--lw-s3);
}

/* ── Sources & references ────────────────────────────────────────── */

.lw-sources {
  margin-top: var(--lw-s7);
  padding-top: var(--lw-s5);
  border-top: 1px solid var(--lw-border);
}

.lw-sources__title {
  margin: 0 0 var(--lw-s3);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-md);
  font-weight: 700;
  color: var(--lw-ink);
}

.lw-sources__list {
  margin: 0;
  padding-left: var(--lw-s5);
  font-size: var(--lw-fs-sm);
  line-height: var(--lw-lh-body);
  color: var(--lw-body);
}

.lw-sources__list li + li {
  margin-top: var(--lw-s2);
}

.lw-related-src__list {
  margin: 0;
  padding-left: var(--lw-s5);
  font-size: var(--lw-fs-sm);
  line-height: var(--lw-lh-body);
}

.lw-related-src__list li + li {
  margin-top: var(--lw-s2);
}

.lw-related-src__list a {
  color: var(--lw-teal);
}

.lw-sources__list a {
  color: var(--lw-teal);
  word-break: break-word;
}

/* ── Author bio (§12.4) ──────────────────────────────────────────── */

.lw-authorbio {
  margin-top: var(--lw-s7);
  padding: var(--lw-s5);
  background: var(--lw-canvas-alt);
  border-radius: var(--lw-radius);
}

.lw-authorbio__name {
  margin: 0 0 var(--lw-s2);
  font-family: var(--lw-font-head);
  font-size: var(--lw-fs-md);
  font-weight: 700;
  color: var(--lw-ink);
}

.lw-authorbio__text {
  font-size: var(--lw-fs-sm);
  line-height: var(--lw-lh-body);
  color: var(--lw-body);
}

/* ── Standing disclaimers ────────────────────────────────────────── */

.lw-disclaimer {
  margin-top: var(--lw-s5);
  padding: var(--lw-s4);
  border: 1px solid var(--lw-border);
  border-radius: var(--lw-radius-sm);
  font-size: var(--lw-fs-sm);
  line-height: var(--lw-lh-body);
  color: var(--lw-muted);
}

/* Satire's footer disclaimer is NOT quiet. The header label is the polite
   warning; by the time a reader reaches the foot they may be about to share
   it, which is where the real exposure is (§12.5.4). */
.lw-disclaimer--satire {
  border: none;
  border-left: 5px solid var(--lw-satire);
  background: var(--lw-canvas-alt);
  color: var(--lw-body);
  font-weight: 500;
}

/* ── Retention layer (§19.0) ─────────────────────────────────────── */

.lw-related {
  margin-top: var(--lw-s8);
  padding-top: var(--lw-s6);
  border-top: 1px solid var(--lw-border);
}

.lw-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--lw-s5);
}

@media (max-width: 40rem) {
  .lw-article__title {
    font-size: var(--lw-fs-2xl);
  }
}