/* Magazine feature system — shared sheet.

   One reading surface for library guides and (from Batch B1 onward) the blog
   articles. It is a light-theme editorial layout: full-bleed hero, stat band,
   chapter art, key-idea boxes, pull quotes, checklist, and the next-in-path
   band. Only the reading measure is narrow; the bands run edge to edge of
   whatever container they sit in.

   Adapted from the approved version-a-magazine mockup, re-expressed on the
   site's own token family (--lt-*, --ba-*, --ink*, --font-*). No SVG, no
   baked-in text: every number, label, and caption is real HTML text.

   Loading order: shared/site.css -> library/article.css -> visual-blocks.css
   -> shared/magazine.css. This sheet owns .mag-* only; the guide skin that
   consumes it lives in library/article.css. */

:root {
  --mag-paper: #ffffff;
  --mag-wash: var(--lt-surface-soft, #eef3f9);
  --mag-tint: var(--lt-tint-blue, #edf6fe);
  --mag-ink: var(--lt-ink, #0b1220);
  --mag-ink-body: var(--lt-ink-body, #2c3444);
  --mag-ink-muted: var(--lt-ink-muted, #4c5567);
  --mag-line: var(--lt-line, rgba(11, 18, 32, 0.12));
  --mag-line-strong: var(--lt-line-strong, rgba(11, 18, 32, 0.22));
  --mag-accent: var(--ba-blue-ink, #0056e2);
  --mag-accent-bright: var(--ba-blue, #0061fd);
  --mag-accent-soft: rgba(0, 97, 253, 0.1);
  --mag-display: var(--font-display, "Fraunces", Georgia, serif);
  --mag-body: var(--font-body, "Archivo", system-ui, sans-serif);
  --mag-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mag-measure: 44rem;
}

/* ------------------------------------------------------------------ hero */

.mag-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--mag-wash);
  color: var(--mag-ink);
  border-bottom: 1px solid var(--mag-line);
}

/* Art-led covers get real height; a text-only guide hero (no art fragment
   yet) stays compact so it does not push the first chapter off-screen. */
.mag-hero--placeholder,
.mag-hero--photo {
  min-height: clamp(20rem, 40vw, 30rem);
}

.mag-hero__media {
  position: absolute;
  inset: 0;
}

.mag-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mag-hero__copy {
  position: relative;
  width: 100%;
  padding: clamp(1.5rem, 4vw, 3.5rem) 0 clamp(1.75rem, 4vw, 3.25rem);
}

.mag-hero__kicker {
  margin: 0 0 0.85rem;
  color: var(--mag-accent);
  font: 700 0.78rem/1.35 var(--mag-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mag-hero__title {
  margin: 0;
  max-width: 30ch;
  color: var(--mag-ink);
  font: 700 clamp(2.1rem, 5.4vw, 3.9rem) / 1.03 var(--mag-display);
  letter-spacing: -0.012em;
}

.mag-hero__dek {
  max-width: 40ch;
  margin: 1rem 0 0;
  color: var(--mag-ink-body);
  font: 400 clamp(1.02rem, 1.4vw, 1.22rem) / 1.6 var(--mag-body);
}

.mag-hero__byline {
  margin: 1.1rem 0 0;
  color: var(--mag-ink-muted);
  font: 600 0.8rem/1.4 var(--mag-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Breadcrumb links follow the hero copy colour so the trail stays legible on
   the pale stacked panel and on the darkened photo alike. */
.mag-hero .guide-breadcrumbs a {
  color: inherit;
}

/* Over a real photograph the copy rides on the art. The directional shade is
   always drawn, but the light type scale only applies in the overlay
   composition (>=1200px; see the stacking breakpoint at the foot of the
   sheet). At narrow widths the hero stacks and the copy sits on the pale hero
   panel, where it keeps the ink scale — that is what makes the title, kicker,
   and metadata readable on mobile. */
.mag-hero--photo .mag-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(4, 10, 22, 0.94),
    rgba(4, 10, 22, 0.85) 46%,
    rgba(4, 10, 22, 0.72) 74%,
    rgba(4, 10, 22, 0.2)
  );
}

@media (min-width: 1200px) {
  .mag-hero--photo {
    color: #fff;
  }

  .mag-hero--photo .mag-hero__title,
  .mag-hero--photo .mag-hero__dek {
    color: #fff;
  }

  .mag-hero--photo .mag-hero__dek {
    color: #f2f6fd;
  }

  .mag-hero--photo .mag-hero__kicker {
    color: #ffffff;
  }

  .mag-hero--photo .mag-hero__byline {
    color: #ffffff;
  }

  /* The guide metadata cluster (breadcrumbs, topic, authorship, return link)
     rides over the photograph too, so it flips to the light scale with the
     rest of the copy instead of holding the dark ink it uses on paper. The
     small 12-13px items go pure white: a tinted light blue drops under 4.5:1
     wherever a bright photo shows through the shade. */
  .mag-hero--photo .guide-breadcrumbs,
  .mag-hero--photo .guide-breadcrumbs li:not(:last-child)::after {
    color: #ffffff;
  }

  .mag-hero--photo .guide-breadcrumbs a,
  .mag-hero--photo .guide-return {
    color: #ffffff;
  }

  .mag-hero--photo .guide-path-marker,
  .mag-hero--photo .guide-topic {
    color: #ffffff;
  }

  .mag-hero--photo .guide-authorship p {
    color: #ffffff;
  }

  .mag-hero--photo .guide-meta {
    border-top-color: rgba(255, 255, 255, 0.4);
  }

  /* A soft shade under the copy keeps the smaller meta legible where the
     photographic shade is lightest. */
  .mag-hero--photo .mag-hero__copy {
    text-shadow: 0 1px 14px rgba(4, 10, 22, 0.55);
  }
}

/* ------------------------------------------------------- art placeholders */

/* Until the Luna photo pass lands, each art slot renders as a labelled block
   that names the shot it is holding a place for. It is decorative, so it is
   inert markup with an aria-label; the caption beneath it is real text. */
.mag-art {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--mag-tint), var(--mag-wash) 55%, #fff);
}

.mag-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 97, 253, 0.07) 0,
    rgba(0, 97, 253, 0.07) 2px,
    transparent 2px,
    transparent 14px
  );
}

.mag-hero .mag-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 0.28));
}

.mag-art__note {
  position: absolute;
  top: clamp(0.9rem, 2vw, 1.4rem);
  right: clamp(0.9rem, 2vw, 1.6rem);
  z-index: 1;
  max-width: min(22rem, 60%);
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--mag-line-strong);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--mag-ink-muted);
  font: 600 0.72rem/1.45 var(--mag-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mag-art__note b {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--mag-accent);
  letter-spacing: 0.12em;
}

/* ------------------------------------------------------------ chapter bar */

.mag-chapterbar {
  position: sticky;
  /* The page header is in normal flow and scrolls away (it is not sticky),
     so pinning the chapter bar below --nav-h would leave a live band of body
     text scrolling through the top of the viewport above the bar. Pinning to
     the viewport top instead means the bar itself is always the first thing
     on screen once it engages, with nothing to peel above it. z-index sits
     above page content but below the fixed reading-progress indicators
     (.gut-progress z-index 110) so those stay visible. */
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--mag-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mag-chapterbar__inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-block: 0.55rem;
}

.mag-chapterbar__label {
  flex: 0 0 auto;
  margin: 0;
  color: var(--mag-ink-muted);
  font: 700 0.68rem/1 var(--mag-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mag-chapterbar__list {
  display: flex;
  flex: 1 1 auto;
  gap: 0.4rem 1.1rem;
  margin: 0;
  padding: 0 0 0.15rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.mag-chapterbar__list a {
  /* The in-page jump strip is the primary control on a long article, so each
     chip keeps a 44px touch target at every width. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0;
  color: var(--mag-ink-body);
  font: 600 0.82rem/1.2 var(--mag-body);
  white-space: nowrap;
}

.mag-chapterbar__list a:hover,
.mag-chapterbar__list a.is-current {
  color: var(--mag-accent);
}

/* Chapter-bar scroll cue (narrow viewports)
   ------------------------------------------------------------------------
   At narrow widths the sticky chapter bar scrolls horizontally, so several
   chapter links start off-screen. A right-edge fade plus a border-drawn
   chevron signals that more chapters sit past the edge. Pure CSS
   pseudo-elements, shared by library guides and blog articles so the
   affordance cannot drift between the two article families. */

@media (max-width: 640px) {
  .mag-chapterbar .mag-chapterbar__inner {
    position: relative;
  }

  /* Fade so the last visible chapter dissolves rather than clips. */
  .mag-chapterbar .mag-chapterbar__inner::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 3.4rem;
    display: block;
    pointer-events: none;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.9) 62%,
      rgba(255, 255, 255, 0.99) 100%
    );
  }

  /* Chevron drawn with borders: the "scroll for more" affordance. */
  .mag-chapterbar .mag-chapterbar__inner::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.85rem;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.28rem;
    border-top: 2px solid var(--mag-accent, #0056e2);
    border-right: 2px solid var(--mag-accent, #0056e2);
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 1;
  }

  /* Let the final link scroll clear of the fade. */
  .mag-chapterbar .mag-chapterbar__list {
    padding-right: 2.6rem;
  }
}

/* ------------------------------------------------------------- stat band */

.mag-statband {
  margin: clamp(1.75rem, 4vw, 3rem) 0;
  background: var(--mag-wash);
  border-block: 1px solid var(--mag-line);
}

.mag-statband__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1.5rem 2rem;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.mag-stat {
  min-width: 0;
}

.mag-stat__value {
  display: block;
  color: var(--mag-accent-bright);
  font: 700 clamp(2.6rem, 6vw, 4rem) / 1 var(--mag-display);
  letter-spacing: -0.02em;
}

.mag-stat__label {
  display: block;
  margin-top: 0.5rem;
  color: var(--mag-ink-muted);
  font: 500 0.92rem/1.5 var(--mag-body);
}

/* ---------------------------------------------------------- chapter art */

.mag-figure {
  margin: clamp(1.75rem, 4vw, 2.75rem) 0;
}

.mag-figure__frame {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--mag-wash);
  border-block: 1px solid var(--mag-line);
}

.mag-figure__frame .mag-art {
  position: absolute;
  inset: 0;
}

.mag-figure__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mag-figure__caption {
  margin: 0.65rem 0 0;
  color: var(--mag-ink-muted);
  font: 500 0.85rem/1.5 var(--mag-body);
}

/* ----------------------------------------------- key box + pull quote */

.mag-keybox {
  margin: clamp(1.5rem, 3vw, 2.25rem) auto;
  padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.15rem, 2vw, 1.75rem);
  border-left: 4px solid var(--mag-accent-bright);
  background: var(--mag-tint);
}

.mag-keybox__label {
  margin: 0 0 0.4rem;
  color: var(--mag-accent);
  font: 700 0.7rem/1.2 var(--mag-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mag-keybox p {
  margin: 0;
  color: var(--mag-ink);
  font: 400 clamp(1.02rem, 1.3vw, 1.12rem) / 1.6 var(--mag-body);
}

.mag-pull {
  max-width: 26em;
  margin: clamp(2rem, 4.5vw, 3.25rem) auto;
  padding: 0;
  color: var(--mag-ink);
  font: 600 clamp(1.35rem, 2.6vw, 1.9rem) / 1.35 var(--mag-display);
  text-align: center;
  letter-spacing: -0.01em;
}

.mag-pull::before {
  content: "\201C";
  display: block;
  margin-bottom: 0.15rem;
  color: var(--mag-accent-bright);
  font-size: 2.6rem;
  line-height: 0.7;
}

/* ------------------------------------------------------------ checklist */

.mag-checklist {
  margin: 1.25rem auto;
  padding: 0;
  list-style: none;
}

.mag-checklist li {
  position: relative;
  padding: 0.75rem 0 0.75rem 2rem;
  border-bottom: 1px solid var(--mag-line);
  font: 400 1rem/1.6 var(--mag-body);
}

.mag-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0.25rem;
  color: var(--mag-accent-bright);
  font-weight: 700;
}

/* ----------------------------------------------------------- next band */

.mag-next {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--mag-surface, #f6f8ff);
  border-top: 1px solid var(--mag-rule, #dbe1ed);
  color: var(--mag-ink);
}

.mag-next__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-block: clamp(2rem, 4vw, 3rem);
}

.mag-next__eyebrow {
  margin: 0 0 0.35rem;
  color: var(--mag-accent);
  font: 700 0.7rem/1.2 var(--mag-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.mag-next__link {
  /* Standalone band link: take the 44px tap floor with padding. inline-block
     keeps the large display face and its wrap; min-height supplies the height
     when the title fits on one line. */
  display: inline-block;
  min-height: 44px;
  padding-block: 0.3rem;
  color: var(--mag-ink);
  font: 700 clamp(1.15rem, 2vw, 1.45rem) / 1.25 var(--mag-display);
  text-decoration: none;
}

.mag-next__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mag-next__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.3rem;
  color: var(--mag-accent);
  font: 600 0.92rem/1.4 var(--mag-body);
  text-decoration: none;
}

.mag-next__back:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Below the wide desktop cover, stack the art band above the copy so the
   art-direction note never sits on top of the title and dek. The overlay
   composition only holds when the hero is tall relative to its copy. */
@media (max-width: 1199px) {
  .mag-hero,
  .mag-hero--placeholder,
  .mag-hero--photo {
    display: block;
    min-height: 0;
  }

  .mag-hero__media {
    position: relative;
    inset: auto;
    height: clamp(10rem, 26vw, 15rem);
  }

  .mag-art__note {
    top: auto;
    right: 0.7rem;
    bottom: 0.7rem;
    max-width: min(26rem, 74%);
    padding: 0.4rem 0.6rem;
    font-size: 0.7rem;
  }
}

@media (max-width: 720px) {
  .mag-statband__grid {
    grid-template-columns: 1fr;
  }

  .mag-next__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mag-chapterbar__list {
    scroll-behavior: auto;
  }
}
/* Raster teaching diagrams keep their labels in accessible page text. */
.teaching-raster {
  margin: 1.5rem 0;
  padding: clamp(1rem, 3vw, 1.75rem);
  background: #f5f8fc;
  border: 1px solid #dce4ef;
  border-radius: 18px;
  color: #15223b;
}
.teaching-raster img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}
.teaching-raster__labels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1rem;
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.5;
}
.teaching-raster__labels strong {
  display: block;
  color: #15223b;
}
.teaching-raster figcaption {
  margin-top: 1rem;
  color: #46536b;
  font-size: .9375rem;
  line-height: 1.55;
}

/* ---- Shell footer link columns (article pages) -----------------------------
   Blog articles render the shell's .shell-footer-list columns. The shell sheet
   (shared/site.css) sets their colour and hover but leaves the box inline, so
   each link measured ~20px tall on a phone. They are standalone nav, not prose,
   so hold them to the 44px tap floor with padding; the face, colour, and light
   theme are unchanged. */
.shell-footer-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.5rem;
}