/* HUMAN CONTEXT — IDEAS ARTICLE SYSTEM ---------------------------------
   The reusable long-form reading layer. Loaded last, after styles.css,
   site-refresh.css, mobile-fixes.css and footer-adjustments.css, and
   scoped entirely to .page-article so nothing here can reach the rest of
   the site. The global header, the footer and the newsletter band are
   untouched by this file.

   Layout intent on large desktop, one grid:

       .     head   head          head and hero are offset to the main
       left  hero   hero          column, so the title lines up with the
       left  body   right         prose and the picture runs main + right

   The left rail spans the hero and body rows, so it begins at the top of
   the picture; the right rail sits in the body row only, so it begins
   below it. Both are sticky inside that grid, and the grid ends before
   Sources & Notes - which is what stops them there, with no scroll
   maths involved. */

.page-article {
  /* One canvas for the whole article, centred, narrower than the page
     gutter the rest of the site uses. 1180 = 180 + 44 + 698 + 48 + 210. */
  /* The canvas is the shell's outer width; the shell's own padding sits
     inside it. At 1440 that puts the rail's left edge within a few
     pixels of the site's page gutter, so the article reads as inset from
     the masthead rather than wider than it.
       1240 - 80 padding = 1160 across the three tracks
       1160 - 172 - 210 - 40 - 44 = 694px of reading measure  */
  --ia-canvas: 1240px;
  --ia-left: 172px;
  --ia-right: 210px;
  --ia-gap-l: 2.5rem;
  --ia-gap-r: 2.75rem;
  --ia-measure: 43.375rem;

  /* Set from JS so sticky offsets track the real chrome. The fallbacks
     are the header's own min-height plus its border, and a collapsed
     article bar. */
  --ia-head-h: 73px;
  --ia-bar-h: 0px;
  /* The bar's height whether or not it is showing; see article.js. */
  --ia-bar-full: 42px;
  --ia-sticky-gap: 1.75rem;

  --ia-paper: #FAF7F0;
  --ia-cream: #F6F2E7;
  --ia-sage-pale: #EDF1E7;
  --ia-rule: rgba(32, 51, 41, 0.13);
  --ia-rule-soft: rgba(32, 51, 41, 0.08);
}

.page-article main { background: var(--paper); }
/* styles.css caps every paragraph in main at a 40rem reading measure.
   The article system sets its own measures on its own containers, so
   the blanket cap is released here and re-applied where it is wanted -
   it was silently truncating the Continue exploring footer to 640px. */
.page-article main p { max-width: none; }

.ia-shell {
  width: 100%;
  max-width: var(--ia-canvas);
  margin-inline: auto;
  padding-inline: clamp(1.125rem, 4vw, 2.5rem);
}

/* READING PROGRESS ----------------------------------------------------
   One line, and it always sits on the bottom edge of whatever chrome is
   currently showing: the header on its own, or the header plus the
   article identity bar once that has appeared. It is fixed rather than
   parented to either, so there is never a second rule above it - the
   header's own border is suppressed while the bar is up, and the bar
   carries no bottom border of its own. --ia-bar-h is 0 until the bar
   shows, so the same expression covers both states, and the transition
   lets the line travel down with the bar instead of jumping. */

.ia-progress {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--ia-head-h) + var(--ia-bar-h) - 2px);
  z-index: 90;
  height: 2px;
  background: var(--ia-rule-soft);
  pointer-events: none;
  transition: top 180ms var(--ease);
}
.ia-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--rust);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 90ms linear;
}

/* ARTICLE IDENTITY BAR ------------------------------------------------
   A second, much quieter bar that rides directly under the global header
   once the title and hero have gone. It overlays rather than reserving
   space, so revealing it cannot shift the article underneath it. */

.ia-bar {
  position: fixed;
  top: var(--ia-head-h);
  left: 0;
  right: 0;
  z-index: 70;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding-inline: var(--page-gutter);
  background: rgba(245, 241, 232, 0.97);
  /* No rule of its own: the progress line rides the bar's bottom edge
     and is the only horizontal rule in the chrome. */
  border-bottom: 0;
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
.ia-bar.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}
/* While the bar is up the header and the bar are one surface, so the
   header's own bottom border would read as a line above the bar. */
.page-article.ia-chrome-bar .hc-head { border-bottom-color: transparent; }
/* The kind label is the one anchor with any colour in the bar; the
   title beside it stays deliberately quiet, because the reader already
   knows what they are reading and only needs reminding. A hairline
   divider does the separating so neither has to shout. */
.ia-bar-kind {
  flex: none;
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust);
}
.ia-bar-kind::after {
  content: "";
  width: 1px;
  height: 0.9rem;
  margin-left: clamp(0.75rem, 2vw, 1.5rem);
  background: var(--border);
}
.ia-bar-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The bar's share control and its popover. */
.ia-bar-share { flex: none; position: relative; }
.ia-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 30px;
  padding: 0.25rem 0.5rem;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
  cursor: pointer;
  transition: color 160ms var(--ease);
}
.ia-share-btn:hover { color: var(--rust); }
.ia-share-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ia-share-pop {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 5;
  min-width: 12rem;
  /* The items carry their own inset, so the box only needs to keep the
     first and last off its border. */
  padding: 0.35rem 0;
  background: var(--paper-light);
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(32, 51, 41, 0.1);
}
.ia-share-pop[hidden] { display: none; }
.page-article .ia-share-pop .ia-share-item {
  width: 100%;
  padding: 0.44rem 1rem 0.44rem 1.05rem;
}
.page-article .ia-share-pop .ia-share-item:hover { background: var(--ia-sage-pale); }
/* In the rail the confirmation can hold a line of its own. In the
   popover a permanently reserved line reads as dead space under Email,
   so it takes no room until there is something to say. */
.ia-share-pop .ia-copy-note {
  margin: 0;
  height: 0;
  overflow: hidden;
  padding-inline: 1.05rem;
  transition: height 200ms var(--ease), margin-top 200ms var(--ease), opacity 200ms var(--ease);
}
.ia-share-pop .ia-copy-note.is-shown { height: 1.1rem; margin-top: 0.3rem; }

/* THE ARTICLE GRID ---------------------------------------------------- */

.ia-grid { display: block; }

@media (min-width: 1100px) {
  .ia-grid {
    display: grid;
    grid-template-columns: var(--ia-left) minmax(0, 1fr) var(--ia-right);
    column-gap: 0;
    grid-template-areas:
      ".    head hero-none"
      "left hero hero"
      "left body right";
    align-items: start;
  }
  /* The gaps live on the cells rather than the grid, because the head and
     hero rows span two tracks and a column-gap would cut through them. */
  .ia-head  { grid-area: head; padding-left: var(--ia-gap-l); }
  .ia-hero  { grid-area: hero; padding-left: var(--ia-gap-l); }
  .ia-body  { grid-area: body; padding-left: var(--ia-gap-l); padding-right: var(--ia-gap-r); }
  .ia-left  { grid-area: left; }
  .ia-right { grid-area: right; }

  .ia-left,
  .ia-right {
    position: sticky;
    top: calc(var(--ia-head-h) + var(--ia-bar-h) + var(--ia-sticky-gap));
    align-self: start;
  }
  /* The right rail starts under the hero; a little more air than the
     left rail so it reads as a card rather than a column heading. */
  .ia-right { padding-top: 0.35rem; }
}

/* ARTICLE HEADER ------------------------------------------------------ */

.ia-head { padding-top: clamp(1.75rem, 3.2vw, 3rem); }
.page-article .ia-kicker {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 0.75rem;
}
.page-article .ia-title {
  font-family: var(--display);
  font-weight: 500;
  /* 60-72px on a large desktop, and it wraps rather than shrinking hard. */
  font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.008em;
  color: var(--ink-green);
  margin: 0 0 0.85rem;
  max-width: 19ch;
  text-wrap: balance;
}
.page-article main .ia-deck {
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.5;
  color: var(--olive);
  margin: 0 0 1rem;
  max-width: var(--ia-measure);
}
.page-article .ia-meta {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0;
}

/* HERO ---------------------------------------------------------------- */

.ia-hero { margin: clamp(1.25rem, 2.4vw, 2rem) 0 0; }
/* figure carries a 40px inline margin by default, which walked the
   hero and the layer graphic off their own tracks. */
.ia-layers, .ia-hero { margin-inline: 0; }
.ia-hero img {
  display: block;
  width: 100%;
  height: auto;
  /* Natural 3:2 on small screens; a wider editorial crop once the
     picture runs main + right. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center 55%;
}
@media (min-width: 1100px) {
  .ia-hero img { aspect-ratio: 2.35 / 1; }
}

/* LEFT RAIL ------------------------------------------------------------
   No long vertical rule: a short rule under each heading, whitespace,
   and a small rust marker on the section being read. */

.ia-rail-h {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 0.6rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--ia-rule);
}
.ia-toc-list { list-style: none; margin: 0 0 2.25rem; padding: 0; }
.ia-toc-list li { margin: 0; }
.page-article .ia-toc-link {
  position: relative;
  display: block;
  padding: 0.3rem 0 0.3rem 0.75rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
  color: var(--text-2);
  transition: color 160ms var(--ease);
}
/* The marker is a short rust rule beside the current item only - it
   appears and disappears with the item rather than running the length
   of the rail. */
.page-article .ia-toc-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 2px;
  background: var(--rust);
  opacity: 0;
  transition: opacity 180ms var(--ease);
}
.page-article .ia-toc-link:hover { color: var(--forest); }
.page-article .ia-toc-link[aria-current="true"] { color: var(--rust); font-weight: 500; }
.page-article .ia-toc-link[aria-current="true"]::before { opacity: 1; }

/* SHARE (left rail and popover share the same item styling) ------------ */

.ia-share-list { list-style: none; margin: 0; padding: 0; }
.page-article .ia-share-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.34rem 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.875rem;
  text-align: left;
  text-decoration: none;
  color: var(--forest);
  cursor: pointer;
  transition: color 160ms var(--ease);
}
.page-article .ia-share-item:hover { color: var(--rust); }
.ia-share-item svg {
  flex: none;
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.ia-share-item .ia-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Confirmation for Copy link, announced politely and shown quietly. */
.ia-copy-note {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rust);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.ia-copy-note.is-shown { opacity: 1; }

/* RIGHT RAIL CTA CARD -------------------------------------------------- */

.ia-card {
  background: var(--ia-cream);
  border: 1px solid var(--border);
  padding: 1.15rem 1.15rem 1.25rem;
}
.page-article .ia-card-h {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.15;
  color: var(--ink-green);
  margin: 0 0 0.5rem;
}
.page-article .ia-card-p {
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0 0 0.9rem;
}
.ia-card-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 0.9rem;
}
/* The context marks are square line art, not photographs: cropping them
   to 4:3 took a quarter of the drawing off the top and bottom. They sit
   whole on the card's own ground instead. */
.ia-card-art--mark {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  width: 62%;
  margin-inline: auto;
  margin-block: 0.15rem 0.9rem;
}
.page-article .ia-card-btn,
.page-article .ia-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  text-align: center;
  background: var(--ink-green);
  border: 1px solid var(--ink-green);
  color: var(--paper-light);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
/* The rail is only 166px of content wide, so the card's button takes the
   full width and centres rather than running to three short lines. */
.page-article .ia-card-btn {
  display: block;
  width: 100%;
  text-align: center;
  letter-spacing: 0.09em;
  padding-inline: 0.5rem;
  line-height: 1.5;
}
/* Block, not flex, so the arrow stays in the text flow and follows the
   last word instead of floating beside a wrapped label. */
.page-article .ia-card-btn .arw { display: inline-block; margin-left: 0.3rem; }
.page-article .ia-card-btn:hover,
.page-article .ia-cta-btn:hover {
  background: transparent;
  color: var(--ink-green);
}
.page-article .ia-card-btn .arw,
.page-article .ia-cta-btn .arw { transition: transform 200ms var(--ease); }
.page-article .ia-card-btn:hover .arw,
.page-article .ia-cta-btn:hover .arw { transform: translateX(3px); }

/* BODY TYPOGRAPHY ------------------------------------------------------
   The long-form reading system. Scoped here rather than pushed into the
   global body token, so only the Ideas article template reads at this
   size. */

.ia-body { padding-top: clamp(1.5rem, 2.6vw, 2.25rem); }
.ia-prose { max-width: var(--ia-measure); }
.page-article .ia-prose p {
  font-family: var(--sans);
  font-size: 1.1875rem;
  line-height: 1.72;
  color: var(--forest);
  margin: 0 0 1.25em;
  max-width: none;
}
.page-article .ia-prose p:last-child { margin-bottom: 0; }
.page-article .ia-prose a {
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: border-color 180ms var(--ease), color 180ms var(--ease);
}
.page-article .ia-prose a:hover { color: var(--rust); border-bottom-color: var(--rust); }

.page-article .ia-h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.375rem);
  line-height: 1.12;
  letter-spacing: -0.004em;
  color: var(--ink-green);
  /* Clearly more room above than below: the heading belongs to the
     paragraph under it, not the one above it. */
  margin: 2.75rem 0 0.85rem;
  /* No measure of its own. .ia-prose already caps the column at
     --ia-measure, so the heading turns on the same right-hand edge the
     paragraphs under it turn on instead of breaking short of it. */
  max-width: none;
  /* Anchor jumps have to clear both bars - and --ia-bar-full, not
     --ia-bar-h, because the jump itself is usually what brings the
     identity bar out. Reserving only what is on screen at click time
     landed the heading behind it. */
  scroll-margin-top: calc(var(--ia-head-h) + var(--ia-bar-full) + 1.5rem);
}
.page-article .ia-prose > .ia-h2:first-child { margin-top: 0; }

/* A list inside the reading column. Same measure and colour as the
   paragraphs around it, with the rust dot the layer pages already use for
   their lists rather than a browser bullet. */
.page-article .ia-prose-list {
  list-style: none;
  max-width: var(--ia-measure);
  margin: 0 0 1.25em;
  padding: 0;
}
.page-article .ia-prose-list li {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--forest);
  margin-bottom: 0.6em;
}
.page-article .ia-prose-list li:last-child { margin-bottom: 0; }
.page-article .ia-prose-list li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rust);
}
.page-article .ia-prose-list strong { color: var(--ink-green); font-weight: 600; }

/* A heading that moved but whose old id still has links pointing at it.
   Carries the same scroll offset .ia-h2 does, so a legacy deep link lands
   where the current heading would. */
.ia-anchor { display: block; height: 0; scroll-margin-top: calc(var(--ia-head-h) + var(--ia-bar-full) + 1.5rem); }

/* THE IDEA IN BRIEF ---------------------------------------------------- */

.ia-brief {
  display: flex;
  gap: 0.85rem;
  margin: 0 0 2rem;
  padding: 1.1rem 1.25rem;
  background: var(--ia-sage-pale);
  max-width: var(--ia-measure);
}
.ia-brief-mark { flex: none; width: 17px; height: 17px; margin-top: 0.22rem; color: var(--rust); }
.ia-brief-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.page-article .ia-brief-label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 0.35rem;
}
.page-article .ia-brief p {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--forest);
  margin: 0;
}

/* PULL QUOTE ----------------------------------------------------------- */

.page-article .ia-quote {
  margin: 2.25rem 0;
  padding: 0.2rem 0 0.2rem 1.35rem;
  border-left: 2px solid var(--rust);
  max-width: var(--ia-measure);
}
.page-article .ia-quote p {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9375rem);
  font-weight: 500;
  line-height: 1.24;
  color: var(--ink-green);
  margin: 0;
}

/* SIX-LAYER GRAPHIC ----------------------------------------------------
   The /context marks, unchanged, each dropped into a restrained circular
   brand field. Decorative alt, because the label under each one names it. */

.ia-layers {
  margin: 2.5rem 0;
  padding: 1.5rem 1.25rem 1.25rem;
  background: var(--ia-sage-pale);
  max-width: var(--ia-measure);
}
.page-article .ia-layers-label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust);
  text-align: center;
  margin: 0 0 1.15rem;
}
.ia-layers-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ia-layer { text-align: center; }
/* Every layer addresses its own page. The whole tile is the target, so
   the mark and the gloss are as clickable as the name, and the name
   takes the colour change on hover. The prose link rule would otherwise
   underline it. */
.page-article .ia-prose .ia-layer-link,
.page-article .ia-layer-link {
  display: block;
  border-bottom: 0;
  text-decoration: none;
  color: inherit;
}
.page-article .ia-layer-link:hover .ia-layer-name,
.page-article .ia-layer-link:focus-visible .ia-layer-name { color: var(--rust); }
.page-article .ia-layer-link:hover .ia-layer-note,
.page-article .ia-layer-link:focus-visible .ia-layer-note { color: var(--forest); }
.ia-layer-link .ia-layer-disc { transition: transform 200ms var(--ease); }
.ia-layer-link:hover .ia-layer-disc { transform: translateY(-2px); }
.ia-layer-disc {
  display: grid;
  place-items: center;
  width: clamp(44px, 5.2vw, 56px);
  height: clamp(44px, 5.2vw, 56px);
  margin: 0 auto 0.5rem;
  border-radius: 50%;
}
.ia-layer-disc img { width: 58%; height: 58%; object-fit: contain; filter: brightness(0) invert(1); }
/* Muted brand tones, dark enough that the knocked-out mark reads on each. */
.ia-layer--person      .ia-layer-disc { background: #2A342D; }
.ia-layer--inner       .ia-layer-disc { background: #4A5B4B; }
.ia-layer--relations   .ia-layer-disc { background: #8B421F; }
.ia-layer--environment .ia-layer-disc { background: #62634B; }
.ia-layer--institutions{ }
.ia-layer--institutions .ia-layer-disc { background: #9A7B4F; }
.ia-layer--biosphere   .ia-layer-disc { background: #3F5741; }
.page-article .ia-layer-name {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-green);
  margin: 0 0 0.2rem;
  transition: color 160ms var(--ease);
}
.page-article .ia-layer-note {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-2);
  margin: 0;
  transition: color 160ms var(--ease);
}

/* INLINE CTA ----------------------------------------------------------- */

.ia-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 2.5rem 0 0;
  padding: 1.25rem 1.4rem;
  background: var(--ia-sage-pale);
  max-width: var(--ia-measure);
}
.ia-cta-copy { flex: 1 1 18rem; min-width: 0; }
.page-article .ia-cta-h {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.4375rem;
  line-height: 1.15;
  color: var(--ink-green);
  margin: 0 0 0.3rem;
}
.page-article .ia-cta-p {
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
}

/* SOURCES & NOTES ------------------------------------------------------
   Aligned to the reading measure, not the full canvas, and with no icon
   beside the heading. Collapsed it shows two entries whole and fades the
   third, so the list reads as continuing rather than ending. */

.ia-sources { margin-top: clamp(2.5rem, 4vw, 3.75rem); }
.ia-sources-inner {
  max-width: var(--ia-measure);
  /* Sits under the main column, not the left rail. */
  margin-left: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ia-rule);
}
@media (min-width: 1100px) {
  .ia-sources-inner { margin-left: calc(var(--ia-left) + var(--ia-gap-l)); }
}
.ia-sources-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.page-article .ia-sources-h {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-green);
  margin: 0;
}
.page-article .ia-sources-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rust);
  cursor: pointer;
}
.ia-sources-toggle svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease); }
.ia-sources-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.ia-sources-body { position: relative; }
/* Collapsed: clip to roughly two and a half entries and fade the cut,
   so it implies more rather than stopping dead. */
.ia-sources-body.is-collapsed {
  max-height: 7.5rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}
.ia-sources-list {
  list-style: none;
  counter-reset: ia-src;
  margin: 0;
  padding: 0;
}
.ia-sources-list li {
  counter-increment: ia-src;
  position: relative;
  padding: 0 0 0.7rem 2rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-2);
}
.ia-sources-list li::before {
  content: counter(ia-src);
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--sage);
}
/* A note that is not a source of anything: no number, so the counter keeps
   counting only the sources, but the same indent so its text still lines up
   with theirs. */
.ia-sources-list li.ia-source-note { counter-increment: none; }
.ia-sources-list li.ia-source-note::before { content: none; }

/* A numbered study the body never points at. The list still carries it,
   because a reference list is allowed to hold background reading, but the
   reader is told why no [n] in the text leads here. */
.ia-sources-list .ia-src-unref {
  font-style: italic;
  color: var(--sage);
}

/* A note that qualifies the source above it rather than being a source of
   its own: stepped in, and marked with a turn arrow instead of taking a
   number, so the numbering still counts only the sources. */
.ia-sources-list li.ia-source-sub {
  counter-increment: none;
  margin-left: 2rem;
  padding-left: 1.6rem;
}
.ia-sources-list li.ia-source-sub::before { content: none; }
.ia-source-sub-mark {
  position: absolute;
  left: 0;
  top: 0.1rem;
  display: block;
  width: 13px;
  height: 13px;
  color: var(--sage);
}
.ia-source-sub-mark svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-article .ia-sources-none {
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}

/* CONTINUE EXPLORING ---------------------------------------------------
   Pulled in from the widest canvas, with real air above it so it never
   reads as attached to the Sources rule. */

.ia-more { margin-top: clamp(3.5rem, 6vw, 6rem); }
.ia-more-inner { max-width: 66rem; margin-inline: auto; }
.page-article .ia-more-h {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.5rem + 0.9vw, 2.25rem);
  line-height: 1.1;
  color: var(--ink-green);
  text-align: center;
  margin: 0 0 clamp(1.5rem, 2.6vw, 2.25rem);
}
.ia-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ia-more-link { display: block; text-decoration: none; color: inherit; }
.ia-more-media { display: block; overflow: hidden; margin-bottom: 0.85rem; }
.ia-more-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.72);
  transform: scale(1);
  transition: filter 240ms var(--ease), transform 240ms var(--ease);
}
.ia-more-link:hover .ia-more-media img,
.ia-more-link:focus-visible .ia-more-media img {
  filter: saturate(1);
  transform: scale(1.012);
}
.page-article .ia-more-kind {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 0.4rem;
  transition: color 240ms var(--ease);
}
.page-article .ia-more-title {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3125rem;
  line-height: 1.18;
  color: var(--ink-green);
  margin: 0;
  transition: color 240ms var(--ease);
}
.ia-more-link:hover .ia-more-kind,
.ia-more-link:focus-visible .ia-more-kind { color: var(--rust); }
.ia-more-link:hover .ia-more-title,
.ia-more-link:focus-visible .ia-more-title { color: var(--rust); }
.ia-more-foot { margin-top: clamp(1.5rem, 2.4vw, 2rem); text-align: right; }
.page-article .ia-more-all {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rust);
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease);
}
.page-article .ia-more-all:hover { border-bottom-color: var(--rust); }
.page-article .ia-more-all .arw { display: inline-block; transition: transform 200ms var(--ease); }
.page-article .ia-more-all:hover .arw { transform: translateX(3px); }

/* BACK TO TOP ---------------------------------------------------------- */

.ia-top {
  position: fixed;
  right: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 2.4vw, 2rem);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ink-green);
  background: var(--ink-green);
  color: var(--paper-light);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease),
              background 160ms var(--ease), color 160ms var(--ease),
              visibility 0s linear 200ms;
}
.ia-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms var(--ease), transform 200ms var(--ease), background 160ms var(--ease), color 160ms var(--ease), visibility 0s; }
.ia-top:hover { background: var(--rust); border-color: var(--rust); }
.ia-top svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* TABLET AND MOBILE ----------------------------------------------------
   No sticky composition below 1100: one column, contents collapse into
   an inline control, share becomes a row, the right card falls inline. */

@media (max-width: 1099px) {
  .ia-left, .ia-right { position: static; }
  .ia-left { margin-bottom: 2rem; }
  .ia-right { margin-top: 2.25rem; }
  .ia-head { padding-top: clamp(1.5rem, 4vw, 2.25rem); }
  .ia-body { padding-top: 1.5rem; }
  .ia-prose, .ia-brief, .ia-layers, .ia-cta, .ia-quote { max-width: none; }
  .ia-card { max-width: 32rem; }
  .ia-card-art { aspect-ratio: 16 / 7; }

  /* Contents becomes a disclosure so it does not push the article down. */
  .ia-toc-wrap { border-top: 1px solid var(--ia-rule); border-bottom: 1px solid var(--ia-rule); }
  .ia-toc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.85rem 0;
    border: 0;
    background: none;
    font-family: var(--mono);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--rust);
    cursor: pointer;
  }
  .ia-toc-summary svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease); }
  .ia-toc-summary[aria-expanded="true"] svg { transform: rotate(180deg); }
  .ia-rail-h.ia-toc-h { display: none; }
  .ia-toc-list { margin-bottom: 0.85rem; }
  .ia-toc-list[hidden] { display: none; }
  .ia-share-block { margin-top: 1.25rem; }
  .ia-share-list { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }

  .ia-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .ia-more-grid { grid-template-columns: minmax(0, 1fr); }
  .ia-layers-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 0.5rem; }
  .ia-cta { flex-direction: column; align-items: flex-start; }
  .page-article .ia-prose p { font-size: 1.0625rem; line-height: 1.68; }
  .ia-bar-kind { display: none; }
  .ia-bar { padding-inline: clamp(1rem, 4vw, 1.5rem); }
  .ia-share-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .ia-more-foot { text-align: left; }
}

/* REDUCED MOTION ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ia-progress-fill,
  .ia-bar,
  .ia-top,
  .ia-more-media img,
  .ia-toc-link::before,
  .ia-sources-toggle svg { transition: none; }
  .ia-more-link:hover .ia-more-media img,
  .ia-more-link:focus-visible .ia-more-media img { transform: none; }
}