/* ==========================================================================
   Editorial system — the article layout AND the /news/ listing that indexes it.
   Loaded by /news/ and by every article under it.

   ⚠️ THIS IS A READING PAGE AND IT IS DELIBERATELY NOT SIZED LIKE THE REST OF
   THE SITE. The first build of it used the site's marketing scale — 15/16px body
   (--text-md), --step-3 section heads, a hero-weight h1 — and the result read as
   a landing page with prose poured into it. Long-form has its own physics:

     body      --step-1, capped 19px   not --text-md (15/16px)
     lead      --step-2, capped 22px
     subheads  --step-2  (22→28px)      not --step-3
     h1        --step-4  (31→51px)      not the hero clamp
     leading   --line-loose on body     not --line-relaxed

   ⚠️ THE CAPS ARE LOAD-BEARING. The Utopia steps are tuned for a marketing page
   and keep growing with the viewport: --step-1 tops out at 21.3px and --step-2 at
   28px. At a 42rem measure that is magazine-cover size, not reading size, so each
   is bounded with min(). Using the raw step is what made the first pass look like
   a pull-quote that never ended.

   Do not "harmonise" these back to the marketing scale. A 16px body at a 42rem
   measure is the single thing that made the page read as an ad.

   Everything else is shared: .callout, .btn, .eyebrow and .cta-band do the
   component work; only what the framework lacks lives here.

   ⚠️ If a second article is ever written, this file is already generic (every
   selector is `ar-*`, nothing is keyed to the Bondi piece) — reuse it rather than
   forking a per-article stylesheet, and promote anything that earns a third use
   into components.css.
   ========================================================================== */

/* ---- The shell ----
   NOT .wrap. The site container is 1180px, which at desktop leaves a 42rem
   reading column stranded in the middle of a very wide empty band — the "prose
   floating in a void" effect. This shell is narrower, and the column sits at its
   LEFT edge with the meta rail to its right, so the headline, the body and the
   sources all share one left margin. */
.ar-shell { max-width: 64rem; margin-inline: auto;
  padding-inline: var(--grid-gutter); }

/* ---- Hero (light register) ----
   No dark gradient and no cc-deco: the deco motif is this site's pitch idiom and
   it does not belong on material about six deaths. A plain tint ramp, closed by a
   hairline so the headline block reads as a masthead rather than a hero band. */
.ar-hero { position: relative; overflow: hidden; padding: 148px 0 var(--space-l);
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--color-page) 100%); }
.ar-head { max-width: 42rem; }
/* h1 steps DOWN from the site's hero clamp. An editorial headline is heavy, not
   huge — at hero scale it announces a product rather than reporting something. */
.ar-hero h1 { margin: var(--space-2xs) 0 0; font-size: var(--step-4);
  line-height: 1.08; letter-spacing: -.025em; color: var(--color-secondary); }
/* Deck, not a second headline. At --step-2 it ran six lines under the h1 and the two
   competed; --step-1 with a 34em cap keeps it to three or four. */
.ar-standfirst { margin: var(--space-m) 0 0; max-width: 34em;
  font-size: min(var(--step-1), 1.25rem); line-height: var(--line-relaxed);
  font-weight: var(--weight-normal); color: var(--color-ink-soft); }
.ar-standfirst strong { color: var(--color-secondary); font-weight: var(--weight-semibold); }

/* Byline row. Tabular figures so the date does not wobble against the reading time. */
.ar-meta { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2xs) var(--space-s);
  margin: var(--space-l) 0 0; padding-block-start: var(--space-s);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm); letter-spacing: .02em; color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums; }
.ar-meta .ar-dot { color: var(--color-ink-muted); }

@media (max-width: 760px) { .ar-hero { padding-top: 120px; } }

/* ---- Two-column reading grid ----
   Rail on the RIGHT, not the left: with it on the left the headline and the body
   sit on different left margins and the page looks misaligned. On the right both
   share one edge and the rail reads as an aside, which is what it is.
   ⚠️ 1080px, not the usual 1000px breakpoint — below that the rail squeezes the
   measure under 40rem and the body starts to look like a newspaper column. */
.ar-body { padding-block: var(--space-xl) var(--space-2xl); }
.ar-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
@media (min-width: 1080px) {
  .ar-cols { grid-template-columns: minmax(0, 42rem) 14rem;
    gap: var(--space-2xl); align-items: start; }
}

/* ---- The contents rail ----
   Sticky under the fixed nav. Hidden below the breakpoint rather than stacked:
   on a phone an in-page contents list is furniture the reader scrolls past, and
   the article is short enough not to need one. */
.ar-rail { display: none; }
@media (min-width: 1080px) {
  .ar-rail { display: block; position: sticky; top: 112px; }
}
.ar-rail-h { margin: 0 0 var(--space-xs); padding-block-end: var(--space-2xs);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-soft); }
.ar-toc { margin: 0; padding: 0; list-style: none; }
.ar-toc li + li { margin-block-start: var(--space-3xs); }
.ar-toc a { display: block; padding-block: var(--space-3xs);
  font-size: var(--text-sm); line-height: var(--line-snug);
  color: var(--color-ink-soft); text-decoration: none;
  border-left: 2px solid transparent; padding-left: var(--space-2xs);
  transition: color var(--transition-fast), border-color var(--transition-fast); }
.ar-toc a:hover, .ar-toc a:focus-visible {
  color: var(--color-primary); border-left-color: var(--color-accent); }

/* ---- The reading column ---- */
.ar-main > * + * { margin-block-start: var(--space-m); }
.ar-main > :first-child { margin-block-start: 0; }
/* ⚠️ --step-1 and --line-loose are the whole reason this reads as an article.
   See the note at the top of the file before changing either. */
.ar-main p, .ar-main li { font-size: min(var(--step-1), 1.1875rem);
  line-height: var(--line-loose); color: var(--color-ink); }
/* Section heads are article subheads, not marketing section heads: one step down
   from the site's h2, and set on a hairline so a scanning reader finds them. */
.ar-main h2 { margin-block-start: var(--space-xl); padding-block-start: var(--space-s);
  border-top: 1px solid var(--color-border);
  font-size: var(--step-2); line-height: var(--line-snug); letter-spacing: -.015em; }
.ar-main a { color: var(--color-primary); }
.ar-main strong { color: var(--color-secondary); }

/* The opening paragraph of the piece carries a touch more size — the standard
   editorial lead-in. Applied with a class, never to `:first-of-type`, so moving a
   box above it does not silently move the treatment with it. */
.ar-lead { font-size: min(var(--step-2), 1.375rem) !important;
  line-height: var(--line-relaxed) !important; color: var(--color-ink-soft) !important; }

/* ⚠️ `framework/base.css` strips list markers site-wide (`:where(ul,ol){list-style:none}`)
   because every other list on the site is a styled component — pills, cards, steps. An
   article is the one place the reader needs an actual bullet to tell a list from a
   paragraph, so the markers are put back here rather than hand-rolled with ::before. */
.ar-main ul, .ar-main ol { padding-inline-start: var(--space-m); list-style: disc; }
.ar-main ol { list-style: decimal; }
.ar-main li::marker { color: var(--color-accent); }
.ar-main li + li { margin-block-start: var(--space-xs); }

/* ---- Opening quote ----
   The device the GP trade press opens with: one quoted sentence from the source
   document, set above the lede, no attribution line. It tells a scanning reader
   what the piece is about faster than a summary box does — which is why the
   "What's expected, in short" panel that used to sit here was dropped.
   No border and no fill: it is not an aside, it is the top of the article. */
.ar-opener { margin: 0 0 var(--space-l); padding: 0 0 var(--space-m);
  border-bottom: 1px solid var(--color-border); }
.ar-opener p { margin: 0; font-size: min(var(--step-2), 1.4375rem);
  line-height: var(--line-snug); font-weight: var(--weight-semibold);
  letter-spacing: -.01em; color: var(--color-secondary); }

/* ---- The three standards ----
   Numbered because the coroner's text is a sequence of moments in one patient's
   care — intake, transfer, deprescribing — not three unrelated checklists.
   ⚠️ NO SHADOW. With --sh-sm these read as product feature cards dropped into the
   prose; flat with a hairline, they read as a reference box, which is the job. */
.ar-cards { display: grid; gap: var(--space-m); }
.ar-card { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-m) var(--space-l); }
.ar-card-head { display: flex; align-items: baseline; gap: var(--space-xs); }
.ar-card-num { flex: none; font-size: var(--text-sm); font-weight: var(--weight-bold);
  letter-spacing: .14em; color: var(--color-primary);
  font-variant-numeric: tabular-nums; }
.ar-card h3 { margin: 0; font-size: var(--text-lg); line-height: var(--line-snug); }
/* The lead-in introduces the list under it, so it matches the list's size — set
   smaller it read as a caption and the bullets looked like the start of the card. */
.ar-card-when { margin: var(--space-xs) 0 0; }
.ar-card ul { margin: var(--space-s) 0 0; padding-inline-start: var(--space-m);
  list-style: disc; }
.ar-card-src { margin: var(--space-s) 0 0; padding-block-start: var(--space-xs);
  border-top: 1px solid var(--color-border-soft);
  font-size: var(--text-sm) !important; line-height: var(--line-relaxed) !important;
  color: var(--color-ink-soft) !important; }

/* ---- Pull quote ----
   .callout is the site's one sanctioned left-border device; this is a size variant
   of it, not a second one. */
.ar-quote { margin: var(--space-l) 0; padding: var(--space-s) var(--space-l); }
.ar-quote p { margin: 0; font-size: min(var(--step-2), 1.3125rem) !important;
  line-height: var(--line-relaxed) !important; }
.ar-quote cite { display: block; margin-block-start: var(--space-xs);
  font-size: var(--text-sm); font-style: normal; letter-spacing: .02em;
  color: var(--color-ink-soft); }

/* ---- Item numbers inline in prose ----
   The MBS links are dense and would otherwise read as a wall of blue; tabular
   figures keep a run of them legible as numbers. */
.ar-items { font-variant-numeric: tabular-nums; }

/* ---- Sources ---- */
.ar-sources { margin-block-start: var(--space-m); padding-inline-start: var(--space-m);
  list-style: decimal; }
.ar-sources li { font-size: var(--step-0) !important;
  line-height: var(--line-relaxed) !important; color: var(--color-ink-soft) !important; }
.ar-sources li + li { margin-block-start: var(--space-xs); }
.ar-sources a { color: var(--color-primary); }
.ar-sources cite { font-style: italic; }

/* ---- Fine print ---- */
.ar-fine { margin-block-start: var(--space-l); padding-block-start: var(--space-s);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm) !important; line-height: var(--line-relaxed) !important;
  color: var(--color-ink-soft) !important; }
.ar-fine strong { color: var(--color-ink); }

/* ==========================================================================
   /news/ listing
   Same stylesheet as the articles because it is the same editorial system —
   the index inherits .ar-hero, .ar-shell and .ar-head, and only the list itself
   needs rules of its own.

   ⚠️ Rows divided by hairlines, NOT cards. Cards imply a grid of equals and the
   shelf currently holds one item; a single card floating in a column reads as a
   bug, where a single ruled row reads as a list with one thing in it. Keep it
   ruled however long the list gets.
   ========================================================================== */
.nw-list { margin: 0; padding: 0; list-style: none; max-width: 42rem; }
.nw-item { padding-block: var(--space-l); border-top: 1px solid var(--color-border); }
.nw-item:first-child { border-top: 0; padding-block-start: 0; }

.nw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-s);
  margin: 0 0 var(--space-xs);
  font-size: var(--text-sm); letter-spacing: .02em; color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums; }
/* The kicker is UPPERCASE, so it carries the site's required .14em (craft.md). */
.nw-kicker { font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-primary); }

.nw-title { margin: 0; font-size: min(var(--step-3), 2rem); line-height: var(--line-tight);
  letter-spacing: -.02em; }
.nw-title a { color: var(--color-secondary); text-decoration: none; }
.nw-title a:hover, .nw-title a:focus-visible { color: var(--color-primary); }

.nw-summary { margin: var(--space-xs) 0 0; font-size: min(var(--step-1), 1.125rem);
  line-height: var(--line-relaxed); color: var(--color-ink-soft); }

.nw-more { display: inline-flex; align-items: center; gap: var(--space-3xs);
  margin-block-start: var(--space-s);
  font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .02em;
  color: var(--color-primary); text-decoration: none; }
.nw-more svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2;
  transition: transform var(--transition-fast); }
.nw-more:hover svg, .nw-more:focus-visible svg { transform: translateX(3px); }

/* ---- Tables in articles ----
   ⚠️ ALWAYS wrap in <div class="ar-scroll"> — DESIGN.md's responsive rule is that only
   tables, diagrams and code may exceed the measure, and each must sit in its own
   horizontal scroller so the page body never scrolls sideways on a phone. */
.ar-scroll { overflow-x: auto; margin-block-start: var(--space-m);
  -webkit-overflow-scrolling: touch; }
.ar-table { width: 100%; min-width: 34rem; border-collapse: collapse;
  font-size: var(--step-0); line-height: var(--line-relaxed); }
.ar-table th, .ar-table td { padding: var(--space-xs) var(--space-s);
  text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.ar-table thead th { border-bottom-width: 2px; color: var(--color-secondary);
  font-size: var(--text-sm); font-weight: var(--weight-bold);
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ar-table tbody th { font-weight: var(--weight-bold); color: var(--color-secondary);
  white-space: nowrap; }
.ar-table td { color: var(--color-ink); }
.ar-caption { margin-block-start: var(--space-xs); font-size: var(--text-sm);
  line-height: var(--line-relaxed); color: var(--color-ink-soft); }