/* ============================================================================
   08-article.css — the supporting-page (article) shell.

   Supporting pages are where the organic traffic actually lands: they answer
   one reader question each and hand the reader to the booking page. So the
   shell is deliberately quieter than the homepage — no full-bleed photo hero,
   no stat strip, no competing CTAs above the fold. The article earns the click
   with the text, and the CTA rail is always one glance away.

   Loaded with 07-prose.css, only by article-type pages.
   ============================================================================ */

/* Height of the frosted navbar: 3rem min + xs padding top and bottom.
   Anything that sticks or scroll-anchors has to clear it. */
:root { --navbar-h: calc(3rem + (var(--space-xs) * 2)); }

/* ---- editorial hero ------------------------------------------------------
   Type only. A photo here would push the opening paragraph — the part that
   tells the reader they are in the right place — below the fold on a phone. */
/* Same construction as the homepage hero at roughly half the height. An
   article still needs a room to stand in, but the reader came for the text, so
   it must not push the opening paragraph off a phone screen. */
.arthero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-block-size: clamp(19rem, 56svh, 34rem);
  color: #fff;
  overflow: hidden;
}
.arthero__media { position: absolute; inset: 0; z-index: -1; }
.arthero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.arthero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgb(var(--scrim-rgb) / 0.82) 0%, rgb(var(--scrim-rgb) / 0.44) 55%, rgb(var(--scrim-rgb) / 0.30) 100%),
    linear-gradient(rgb(var(--scrim-rgb) / 0.38), rgb(var(--scrim-rgb) / 0.38));
}
/* See the homepage note: inline-size:100% stops .center's auto margins from
   collapsing this grid item to the width of its widest child. */
.arthero__body { inline-size: 100%; padding-block: var(--space-3xl) var(--space-2xl); text-align: center; }
.arthero__body .stack { align-items: center; }
.arthero h1 {
  color: #fff;
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-inline-size: 22ch;
  margin-inline: auto;
}
.arthero .byline { justify-content: center; }
.arthero__kicker {
  display: inline-flex; align-items: center;
  align-self: center;  /* .stack is a flex column; without this the pill stretches */
  inline-size: fit-content;
  padding: 0.4rem 0.95rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.38);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
/* The byline sits on the image, so it inverts here. Breadcrumbs deliberately do
   NOT live in the hero: grey-on-photo never contrasts reliably across 200 sites
   with 200 different images, and the reference puts none there either. */
.arthero .byline { color: rgba(255,255,255,0.86); }
.arthero .byline__site { color: #fff; }
.arthero .byline__sep { background: rgba(255,255,255,0.5); }

/* ---- byline --------------------------------------------------------------
   Site name + last-updated date, no fake author. Inventing a human byline for
   200 affiliate sites is the kind of thing that reads as deceptive and is
   trivially disprovable; a freshness date is the signal that actually helps
   the reader, and it is true. */
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-s);
  font-size: var(--type-footnote);
  color: var(--label-secondary);
}
.byline__site { font-weight: var(--weight-semibold); color: var(--label); }
.byline__sep {
  inline-size: 3px; block-size: 3px; border-radius: 50%;
  background: var(--label-tertiary); flex: none;
}

/* ---- article + CTA rail --------------------------------------------------
   --sidebar-content-min is the wrap trigger: while the article can hold 62% of
   the row the rail stays beside it, otherwise the rail drops underneath. No
   media query decides this — the content does. */
/* Breadcrumbs sit between hero and article; pull the article up to compensate. */
.artwrap {
  --sidebar-width: 19rem;
  --sidebar-content-min: 62%;
  --sidebar-gap: var(--space-2xl);
  padding-block: var(--space-m) var(--section-gap);
}

.artrail > * {
  position: sticky;
  inset-block-start: calc(var(--navbar-h) + var(--space-m));
}
/* Once the rail has wrapped under the article, sticky is pointless and would
   pin the card to the top of a section it no longer sits beside. */
@media (max-width: 60rem) {
  .artrail > * { position: static; }
}

/* ---- CTA card ------------------------------------------------------------ */
.ctacard {
  background: var(--bg-elevated);
  border: 0.5px solid var(--separator);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-md);
  padding: var(--space-m);
  display: flex; flex-direction: column; gap: var(--space-s);
}
.ctacard__media { border-radius: var(--radius-m); overflow: hidden; }
.ctacard__title {
  font-size: var(--type-headline);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  text-wrap: balance;
}
.ctacard__price {
  display: flex; align-items: baseline; gap: var(--space-2xs);
}
.ctacard__from { font-size: var(--type-footnote); color: var(--label-secondary); }
.ctacard__value {
  font-size: var(--type-title-2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-title);
}
.ctacard__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-s);
  font-size: var(--type-footnote); color: var(--label-secondary);
}
.ctacard__meta > span { display: inline-flex; align-items: center; gap: 4px; }
.ctacard .btn { inline-size: 100%; justify-content: center; }
.ctacard__note {
  font-size: var(--type-caption);
  /* --label-tertiary (0.32 alpha) measures 2.65:1 here and fails AA. */
  color: var(--label-secondary);
  text-align: center;
}

/* ---- key-takeaways box ---------------------------------------------------
   Answers the question in the title before the reader scrolls. This is the
   block that wins featured snippets, so it is real content, not decoration. */
.takeaway {
  /* NOT --bg-grouped: body already uses it, so the box vanished into the page
     in light mode and again in dark, where --bg-grouped is pure black. */
  background: var(--bg-elevated);
  border: 0.5px solid var(--separator);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  box-shadow: var(--shadow-sm);
}
.takeaway h2 {
  font-size: var(--type-subhead);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--label-secondary);
}
.takeaway ul { margin-block-start: var(--space-xs); }
.takeaway li { max-inline-size: none; }

/* ---- last-updated / sources footer --------------------------------------- */
.artmeta {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  border-block-start: 0.5px solid var(--separator);
  font-size: var(--type-footnote);
  color: var(--label-secondary);
}

/* ---------------------------------------------------------------------------
   CITATIONS AND THE REFERENCE LIST

   The marker has to be findable without competing with the sentence it sits in,
   so it is a small superscript in the accent colour and nothing else: no
   background, no border, no pill.

   The list itself was the problem worth solving. Rendered as a plain <ol> it
   ran one narrow column down a wide screen while every entry wrapped three
   times around a forty-character URN, so the section read as broken rather
   than as a bibliography. Three fixes, in order of how much they mattered:
   the entry became a grid (number | body | back-link) so the wrap never
   collides with the marker; the list goes multi-column once there is genuinely
   room, using the FULL section width rather than the prose measure; and the
   permalink is demoted to a small monospaced line of its own, because a reader
   scans the description and the masthead, never the URN.

   `scroll-margin-top` matters more than it looks: without it the sticky header
   lands on top of the reference the reader just jumped to, and the jump appears
   to have done nothing.
   --------------------------------------------------------------------------- */
.ref {
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  scroll-margin-top: 6rem;
}
.ref sup {
  font-size: .68em;
  padding-inline-start: .12em;
  color: var(--accent);
  font-weight: 600;
}
.ref:hover sup { text-decoration: underline; }
.ref:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }

.refs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* One column until an entry can hold a readable measure beside another one. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: clamp(.85rem, 1.6vw, 1.5rem) clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.refs__item {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  column-gap: .7rem;
  align-items: baseline;
  scroll-margin-top: 6rem;
  padding: .6rem .7rem .6rem .2rem;
  border-radius: 8px;
  border-top: 1px solid var(--gray-5);
  padding-top: .8rem;
  transition: background var(--dur-fast, .15s) var(--ease, ease);
}
.refs__item:target { background: var(--accent-soft); }
.refs__n {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--accent);
  font-size: .92rem;
  text-align: right;
}
.refs__body { min-width: 0; display: flex; flex-direction: column; gap: .22rem; }
.refs__desc {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--label);
  text-wrap: pretty;
}
.refs__meta {
  margin: 0;
  font-size: .88rem;
  color: var(--label-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
}
.refs__pub { font-style: normal; font-weight: 600; color: var(--label); }
.refs__dot { opacity: .5; }
.refs__date { font-variant-numeric: tabular-nums; }
.refs__link {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .76rem;
  color: var(--label-secondary);
  /* A URN is one unbreakable token and will push a phone sideways if allowed. */
  overflow-wrap: anywhere;
  text-decoration-color: var(--gray-4);
  text-underline-offset: 2px;
  margin-top: .12rem;
}
.refs__link:hover { color: var(--accent); text-decoration-color: currentColor; }
.refs__back {
  text-decoration: none;
  opacity: .45;
  font-size: .95rem;
  line-height: 1;
  padding: .15rem .2rem;
  transition: opacity var(--dur-fast, .15s) var(--ease, ease);
}
.refs__back:hover, .refs__back:focus-visible { opacity: 1; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .refs__item, .refs__back { transition: none; }
}

/* What a cited book actually says, under its title and author. Present but clearly
   secondary: the reference identifies the work, this line explains why it is here. */
.refs__note {
  margin: 0;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--label-tertiary, var(--label-secondary));
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   ARCHIVE NOTES — the low band's home.

   A year in a fixed column and a sentence beside it, so the eye can run down
   the dates without reading every line. Tabular figures keep that column true.
   Two columns once there is room, because these are short and a single column
   of them down a wide screen is the same waste the reference list had.
   --------------------------------------------------------------------------- */
.anotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
  gap: .1rem clamp(1.5rem, 3vw, 3rem);
}
.anotes__row {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: .8rem;
  align-items: baseline;
  padding: .55rem 0;
  border-top: 1px solid var(--gray-5);
}
.anotes__year {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  font-size: .9rem;
  color: var(--accent);
}
.anotes__text {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--label);
  text-wrap: pretty;
}
.anotes__intro { color: var(--label-secondary); }

/* Licence credit for a sourced photograph. Small and factual: it is a condition of
   CC BY and CC BY-SA, so it must be present and legible, and it is not the point of
   the page, so it sits under the references rather than beside the picture. */
.imgcredits { margin-top: 1.4rem; }
.imgcredits h3 {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--label-secondary);
  margin: 0 0 .4rem;
}
.imgcredits ul { list-style: none; margin: 0; padding: 0; }
.imgcredits li {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--label-secondary);
  overflow-wrap: anywhere;
}