/* ============================================================================
   The Bridge — long-form article template
   ----------------------------------------------------------------------------
   Loaded AFTER style.css. The masthead, the footer and the 1200px canvas with
   its paper-grey margins all come from style.css, so an article page is framed
   exactly like the homepage and there is only one place to change any of it.
   This file styles the body of an article and nothing else.

   Written mobile-first: every rule applies to the narrowest phone, and the
   media queries at the end only ever add to it. No JavaScript anywhere.
   ========================================================================== */

.article-page {
  --paper: #f7f4ec;
  --ink-soft: #4c554a;      /* 7.9:1 on paper — captions and bylines */
  --rule-soft: #ded6c4;

  /* Shared type sizes. Every article draws its label, section numbers and
     section headings from these three, so the hierarchy
     NUMBER -> HEADING -> BODY reads identically in all six pieces and cannot
     drift apart when one of them is edited. Section headings are set bold
     (700, a real weight now loaded from Google Fonts rather than a synthesised
     one) so they separate from the body text by weight as well as by size. */
  --size-kicker:        clamp(.875rem, .79rem + .42vw, 1.0625rem);   /* 14 -> 17 */
  --size-section-num:   clamp(1.875rem, 1.42rem + 2.28vw, 2.875rem); /* 30 -> 46 */
  --size-section-title: clamp(1.5rem, 1.22rem + 1.4vw, 2.125rem);    /* 24 -> 34 */

  font-family: var(--serif-body);
  font-size: clamp(1.0625rem, 1rem + .34vw, 1.1875rem);   /* 17px -> 19px */
  line-height: 1.72;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

.article-page main { background: var(--paper); }

/* style.css stretches every img to 100% for the homepage cards; inside an
   article the figures set their own widths. */
.article-page img { width: auto; max-width: 100%; }

.article-page ::selection { background: rgba(169, 133, 72, .24); }

/* --------------------------------------------------------------------------
   Content grid: gutter | reading measure | gutter. Children sit in the middle
   column; .bleed spans the whole canvas. This is what lets a photograph run
   edge-to-edge on a phone without a pixel of horizontal scroll.

   The gutter is in px on purpose. Set in rem it grows with the reader's text
   size, and at 400% zoom it ate a 320px phone down to a 160px column.
   -------------------------------------------------------------------------- */

.article {
  --gutter: clamp(20px, 5.6vw, 56px);
  --measure: 34rem;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] min(var(--measure), 100% - var(--gutter) * 2) [content-end]
    minmax(var(--gutter), 1fr) [full-end];
  padding-bottom: clamp(3rem, 12vw, 5rem);
}

.article > * { grid-column: content; }
.article > .bleed { grid-column: full; }

/* ---------------------------------------------------------------- header --- */

.article-header { padding-top: clamp(2rem, 8vw, 4rem); }

.kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .7rem;
  margin: 0 0 clamp(1rem, 4vw, 1.375rem);
  font-family: var(--serif-display);
  font-size: var(--size-kicker);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--forest);
  overflow-wrap: break-word;
}

.kicker .sep,
.kicker .year { color: var(--gold-ink); }
.kicker .year { letter-spacing: .14em; }

/* "August Pre-Launch · 2026" stays together, so when the label is too long for
   one line on a phone it breaks after "Article 0X ·" rather than stranding the
   year on a line of its own. */
.kicker-edition {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .7rem;
}

.article-title {
  margin: 0;
  font-family: var(--serif-display);
  font-size: clamp(2.125rem, 1.15rem + 4.9vw, 3.75rem);   /* 34px -> 60px */
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--forest);
  hyphens: none;
  overflow-wrap: break-word;
}

.title-rule {
  display: block;
  width: 3.25rem;
  height: 1px;
  margin: clamp(1.125rem, 4.5vw, 1.75rem) 0 0;
  background: var(--gold);
}

.standfirst {
  margin: clamp(1.25rem, 5vw, 2rem) 0 0;
  font-family: var(--serif-display);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.625rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--forest);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.standfirst + .standfirst { margin-top: .7em; }

/* ----------------------------------------------------------- hero divider ---
   Closes the hero section — label, title, lead image — and opens the body.
   A hairline, never a rule with weight: 1px of the same gold used everywhere
   else, set to the width of the hero image so it reads as the bottom edge of
   that block rather than as decoration floating in the text column. */

.hero-rule {
  grid-column: full;
  width: calc(100% - var(--gutter) * 2);
  height: 0;
  margin: clamp(1.5rem, 6vw, 2.25rem) auto clamp(2rem, 8vw, 3rem);
  border: 0;
  border-top: 1px solid var(--gold);
}

/* The first body block after the divider carries its own top margin, which
   would add to the divider's and make the gap below it differ from article to
   article depending on what follows. Zeroing it keeps that space identical on
   all seven pages. Specificity has to beat .prose / .standfirst, hence the
   .article prefix. */
.article > .hero-rule + * { margin-top: 0; }

/* ----------------------------------------------------------------- prose --- */

.prose { margin-top: clamp(1.75rem, 7vw, 2.75rem); }

.prose > p {
  margin: 0 0 1.35em;
  overflow-wrap: break-word;
}

.prose > p:last-child { margin-bottom: 0; }

.prose .lede::first-letter {
  float: left;
  margin: .06em .07em 0 0;
  font-family: var(--serif-display);
  font-size: 3.45em;
  font-weight: 500;
  line-height: .8;
  color: var(--forest);
}

.pull-line + .prose,
.figure + .prose { margin-top: clamp(1.5rem, 6vw, 2.25rem); }

/* ------------------------------------------------------------- pull line --- */

.pull-line {
  margin: clamp(1.75rem, 7vw, 2.75rem) 0;
  padding-left: clamp(.875rem, 3.5vw, 1.25rem);
  border-left: 2px solid var(--gold);
  font-family: var(--serif-display);
  font-size: clamp(1.375rem, 1.1rem + 1.35vw, 1.75rem);
  font-weight: 500;
  line-height: 1.32;
  color: var(--gold-ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------- steps ---
   The numbered sections. In the printed pages a large numeral sits beside a
   two-line heading; on a phone that stacks, which is the only way it stays
   readable at 320px. */

.steps {
  margin: clamp(1.75rem, 7vw, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
}

.steps > li {
  padding-top: clamp(1.5rem, 6vw, 2.25rem);
  border-top: 1px solid var(--rule-soft);
}

.steps > li:first-child { padding-top: 0; border-top: 0; }

.step-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .875rem;
  margin: 0 0 .7rem;
}

.step-num {
  flex: none;
  font-family: var(--serif-display);
  font-size: var(--size-section-num);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}

.step-title {
  margin: 0;
  font-family: var(--serif-display);
  font-size: var(--size-section-title);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: .01em;
  color: var(--forest);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.steps p {
  margin: 0 0 1em;
  overflow-wrap: break-word;
}

.steps p:last-child { margin-bottom: 0; }
.steps > li > .figure { margin-top: clamp(1.25rem, 5vw, 1.75rem); }

/* ---------------------------------------------------------------- books --- */

.books {
  margin: clamp(1.75rem, 7vw, 2.75rem) 0 0;
  padding: 0;
  list-style: none;
}

.books > li {
  padding: clamp(1.375rem, 5.5vw, 2rem) 0;
  border-top: 1px solid var(--rule-soft);
}

.books > li:last-child { border-bottom: 1px solid var(--rule-soft); }

/* Cover beside the title, prose at full measure underneath. Putting the whole
   entry in two columns would squeeze the description to about 24 characters a
   line on a 320px phone; this way the cover anchors the heading and the
   reading column is never narrowed. */
.book-head {
  display: flex;
  align-items: flex-start;
  gap: clamp(.875rem, 4vw, 1.5rem);
  margin-bottom: clamp(.875rem, 3.5vw, 1.25rem);
}

.book-cover {
  flex: none;
  width: clamp(74px, 23vw, 116px);
  margin: 0;
}

.book-cover img {
  width: 100%;
  aspect-ratio: 305 / 461;
  object-fit: cover;
  border: 1px solid rgba(20, 43, 32, .14);
  box-shadow: 0 1px 2px rgba(20, 43, 32, .10), 0 8px 18px -10px rgba(20, 43, 32, .45);
}

.book-id { min-width: 0; padding-top: .15rem; }

.book-num {
  display: block;
  margin: 0 0 .35rem;
  font-family: var(--serif-display);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.book-title {
  margin: 0 0 .15rem;
  font-family: var(--serif-display);
  font-size: clamp(1.375rem, 1.15rem + 1.15vw, 1.875rem);
  font-weight: 500;
  line-height: 1.16;
  color: var(--forest);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.book-author {
  margin: 0;
  font-size: .9375rem;
  font-style: italic;
  color: var(--ink-soft);
  overflow-wrap: break-word;
}

.books p:last-child { margin-bottom: 0; }

.read-if {
  margin: .8rem 0 0;
  padding-left: clamp(.75rem, 3vw, 1rem);
  border-left: 2px solid var(--gold);
  font-family: var(--serif-display);
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.25rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--gold-ink);
  overflow-wrap: break-word;
}

.read-if-label {
  display: block;
  margin-bottom: .1rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------- figures --- */

.figure { margin: clamp(1.75rem, 7vw, 2.75rem) 0 0; }
.figure img { width: 100%; }

.figure-caption {
  margin: .75rem 0 0;
  padding-inline: var(--gutter);
  font-size: .8125rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-soft);
  overflow-wrap: break-word;
}

/* -------------------------------------------------------------- sections --- */

.section-heading {
  margin: clamp(2rem, 8vw, 3rem) 0 clamp(.75rem, 3vw, 1.125rem);
  font-family: var(--serif-display);
  font-size: var(--size-section-title);
  font-weight: 700;
  line-height: 1.16;
  color: var(--forest);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.note-block {
  margin: clamp(2rem, 8vw, 3rem) 0 0;
  padding: clamp(1.25rem, 5vw, 1.75rem);
  background: var(--ivory);
  border-left: 3px solid var(--gold);
}

.note-block h2 {
  margin: 0 0 .5rem;
  font-family: var(--serif-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--forest);
  overflow-wrap: break-word;
}

.note-block p { margin: 0 0 .7em; font-size: .9375rem; overflow-wrap: break-word; }
.note-block p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- end card --- */

.closing {
  margin: clamp(2rem, 8vw, 3rem) 0 0;
  padding: clamp(1.75rem, 7vw, 2.75rem) var(--gutter);
  background: var(--ivory);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  text-align: center;
}

.closing-ornament {
  width: clamp(4.5rem, 18vw, 6rem);
  margin: 0 auto clamp(.875rem, 3.5vw, 1.25rem);
}

.closing-eyebrow {
  margin: 0 0 .5rem;
  font-family: var(--serif-display);
  font-size: clamp(.75rem, .68rem + .35vw, .875rem);
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--gold-ink);
  overflow-wrap: break-word;
}

.closing-line {
  margin: 0;
  font-family: var(--serif-display);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.375rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: .02em;
  color: var(--forest);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.closing-line + .closing-line { margin-top: .4em; }
.closing-date { text-transform: uppercase; letter-spacing: .04em; }

/* --------------------------------------------------------------- signoff --- */

.signoff {
  margin: clamp(2rem, 8vw, 3rem) 0 0;
  padding-top: clamp(1.25rem, 5vw, 1.75rem);
  border-top: 1px solid var(--rule-soft);
}

.signoff-name {
  margin: 0 0 .2rem;
  font-family: var(--serif-display);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1;
  color: var(--forest);
}

.signoff-role {
  margin: 0;
  font-family: var(--serif-display);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------- end of piece --- */

.article-end {
  margin: clamp(2rem, 8vw, 3rem) 0 0;
  text-align: center;
}

.all-articles {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem .875rem;
  width: 100%;
  max-width: 100%;
  min-height: 3.25rem;
  padding: .875rem 16px;
  border: 1px solid var(--gold-edge);
  color: var(--forest);
  font-family: var(--serif-display);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background .25s ease-in-out;
}

.all-articles:hover { background: rgba(169, 133, 72, .1); }
.all-articles .arrow { color: var(--gold-ink); }

/* --------------------------------------------------------------- back tab ---
   The way back lives at the bottom-left, out of the masthead, where a thumb
   reaches it. It is pinned to the 1200px canvas rather than to the viewport,
   so on a wide screen it sits inside the page, not out on the grey margin. */

/* The nav wrapper exists so the control sits inside a landmark; the button
   itself is what is pinned. */
.back-nav { position: static; }

.back-fab {
  position: fixed;
  z-index: 40;
  left: max(14px, calc(50% - (var(--desktop-canvas-width) / 2) + 14px));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /* The button floats over both grounds: the pale article paper and the dark
     green footer, which is its own colour. The gold ring is what keeps it
     readable against the footer, the shadow is what lifts it off the paper. */
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(20, 43, 32, .22), 0 10px 24px -12px rgba(20, 43, 32, .55);
  transition: background .2s ease-in-out, transform .2s ease-in-out;
}

.back-fab svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back-fab:hover { background: #1d3a2c; transform: translateX(-2px); }
.back-fab:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

/* ==========================================================================
   Wider screens. Everything above already works on its own.
   ========================================================================== */

@media (max-width: 22.5rem) {
  .article-title { font-size: 1.9375rem; }
  .prose .lede::first-letter { font-size: 3.1em; }
}

@media (min-width: 34rem) {
  .figure-caption { padding-inline: 0; }
  .all-articles { width: auto; min-width: 18rem; }
  /* numeral beside the heading, as it is set in the printed pages */
  .step-head { flex-wrap: nowrap; }
  .step-num { padding-top: .1em; }
}

@media (min-width: 48rem) {
  .article { --measure: 36rem; }

  .article > .bleed.figure,
  .article > .hero-rule,
  .article > .closing {
    grid-column: full;
    width: min(46rem, 100% - var(--gutter) * 2);
    margin-inline: auto;
  }

  .article > .closing { border: 1px solid var(--rule-soft); }
}

@media (min-width: 64rem) {
  .article-header { padding-top: 4.5rem; }
  .back-fab { width: 50px; height: 50px; bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .back-fab { transition: none; }
  .back-fab:hover { transform: none; }
}

@media print {
  .back-fab, .article-end, .site-header, .site-footer { display: none; }
  .article-page main { background: #fff; }
  .article > * { grid-column: content; }
  .closing, .figure, .steps > li, .books > li { break-inside: avoid; }
}

@media (forced-colors: active) {
  .all-articles, .closing, .back-fab { border: 1px solid CanvasText; }
}

/* The masthead lives entirely in style.css now — one set of rules for the
   homepage and every article, so the two can never drift apart. */