/* ========== TYPOGRAPHY RENDERING (LOW-RISK POLISH) ========== */
html{
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1;
}

body{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== ISSUE KICKER (ARTICLE PAGE) ========== */

.issue-kicker{
  max-width:var(--maxw);
  margin:0 auto;
  padding:8px 22px 0;
  text-align: center;
}

.issue-kicker .kicker a{
  color:inherit;
  text-decoration:none;
  transition:color .25s ease;
}

.issue-kicker .kicker a span{
  color:var(--accent);
}

.issue-kicker .kicker a:hover{
  color:var(--accent);
}

/* ========== ARTICLE LAYOUT (BRIDGE & OTHER STORIES) ========== */

main{
  max-width:var(--maxw);
  margin:0 auto;
  padding:20px 22px 48px;
}

main.section{
  padding-top:10px;        /* was 20px via `main { padding:20px 22px 48px; } */
}

.story{
  max-width:var(--readw);
  margin:0 auto;
  overflow:visible; /* required: negative-margin floats extend past this element */
}

.story-header{
  margin-bottom: clamp(.65rem, 1.2vw, 1.05rem);
}

.story-kicker{
  margin:0 0 .25rem;
  font-family: Inter, "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--accent);
}

.story-title{
  margin: .05rem auto .7rem;
  font-size: clamp(32px, 4vw, 58px);
  font-style: italic;
  font-weight: 700;
  line-height: 1.00;
  max-width: 20ch;
  text-wrap: balance;
  letter-spacing: -0.015em;
  color: var(--iron);
}

.story-dek{
  margin:0;
  font-style:italic;
  color:var(--sea);
  font-size:1.05rem;
}

/* Full-bleed hero image within article*/
.hero-image{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}

.hero-image img{
  width:100%;
  height:min(80vh, 760px);   /* fallback */
  height:min(92svh, 920px);  /* larger + stable on iOS URL bar */
  object-fit:cover;
  display:block;
}

.hero-image figcaption{
  max-width:var(--readw);
  margin:.5rem auto 0;
  padding:0 22px;
  font-size:.9rem;
  color: var(--iron);
}

/* Generic full-bleed figure (for timeline and other pages) */
.full-bleed{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}

.full-bleed img{
  width:100%;
  height:min(80vh, 760px);
  object-fit:cover;
  display:block;
}

.full-bleed figcaption{
  max-width:var(--readw);
  margin:.5rem auto 0;
  padding:0 22px;
  font-size:.9rem;
  color: var(--iron);
}

/* Initial scrolly credits */

.scrolly-credit {
    position: absolute;
    bottom: 10px;
    right: 14px;
    margin: 0;
    font-size: 11px;
    font-family: Inter, system-ui, sans-serif;
    color: var(--bone);
	text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    letter-spacing: 0.04em;
    pointer-events: none;
    z-index: 10;
}

.scrolly-credit--map {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 5px; 
    text-align: center;
    color: color-mix(in srgb, var(--bone) 25%, transparent);
}

/* Story body text */
.story-body{
  font-family:"Georgia","Times New Roman",serif;
  font-size: clamp(1.08rem, 0.9vw + 0.92rem, 1.32rem);
  line-height:1.65;
  position:relative;
  padding-top: clamp(.75rem, 1.4vw, 1.25rem);
}

.story-body p{
  margin:0;
  max-width:72ch;
  hyphens:auto;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
}

.story-body p + p{
  margin-top:1.25rem;
}

.story-body > :first-child{
  margin-top:0;
}

.story-body > :last-child{
  margin-bottom:0;
}

.story-body p.lead{
  font-size: clamp(1.3rem, 1.45vw + 1rem, 1.9rem);
  line-height: 1.48;
  max-width: 60ch;

  color: color-mix(in srgb, var(--iron) 82%, var(--bone));
  font-weight: 500;

  margin: 0 0 1.8rem;

  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;

  text-wrap: pretty;
}

/* ========== STORY BODY FLOW RHYTHM (NON-PARAGRAPH BLOCKS) ========== */

/* Neutralise browser-default margins that break rhythm */
.story-body :is(ul, ol, blockquote){
  margin: 0;
}

/* Keep list indentation consistent (no vertical spacing here) */
.story-body :is(ul, ol){
  padding-left: 1.35em;
}

/* Apply the same “magazine” spacing when blocks meet */
.story-body p + :is(ul, ol, blockquote),
.story-body :is(ul, ol, blockquote) + p,
.story-body :is(ul, ol, blockquote) + :is(ul, ol, blockquote){
  margin-top: 1.25rem;
}

/* If a lead follows a block, keep it clean */
.story-body :is(ul, ol, blockquote) + p.lead{
  margin-top: 1.25rem;
}


/* Generic reveal animation for scrollytelling elements */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s ease-out, transform .8s ease-out;
  will-change:opacity, transform;
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

blockquote.pull{
  margin:1.4rem 0;
  padding:.9rem 1rem;
  border-left:3px solid var(--accent);
  font-style:italic;
  color:var(--thames);
  background:rgba(255,255,255,.45);
}

/* Inline (column-width) figures inside story body */
.story-body figure.inline-figure{
  margin:1.8rem auto;
  max-width:min(var(--readw), 680px); /* editorial, never accidentally huge */
}

.story-body figure.inline-figure img{
  width:100%;
  height:auto;
  display:block;

  border:1px solid rgba(0,0,0,.14);
  border-radius:2px;
  box-shadow:none;
  background:transparent;
}

.story-body figure.inline-figure figcaption{
  max-width:var(--readw);
  margin:.5rem auto 0;
  padding:0 22px;
  font-size:.9rem;
  color: var(--iron);
  line-height:1.5;
}

.story-body figure.inline-figure .portrait-grid img {
  border: none;
}

.story-body h2{
  margin: clamp(2.6rem, 4vw, 4rem) 0 1rem;
  font-size: clamp(1.55rem, 1.6vw + 1.1rem, 2.2rem);
  line-height: 1.15;
  font-family: Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  max-width: 28ch;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

.story-body h2 + p{
  margin-top: 0;
}

/* ========== RESPONSIVE TYPOGRAPHY (CONTROLLED BREAKPOINTS) ========== */

/* Small screens: slightly smaller type, more leading, tighter vertical rhythm */
@media (max-width: 720px){
.story-body{
  font-size: 1.04rem;
  line-height: 1.72;
  padding-top: 1rem;
}

  .story-body p{
    max-width: 68ch;
  }

  .story-body p + p{
    margin-top: 1.05rem;
  }

.story-body p.lead{
  font-size: 1.32rem;
  line-height: 1.52;
  max-width: 56ch;

  color: var(--iron);
  font-weight: 500;

  margin: 0 0 1.4rem;

  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;

  text-wrap: pretty;
}

  .story-body h2{
    margin: 2.2rem 0 0.9rem;
    font-size: 1.7rem;
    max-width: 22ch;
  }
}

/* Large screens: keep measure stable, slightly tighter leading, more confident scale */
@media (min-width: 1200px){
.story-body{
  font-size: 1.26rem;
  line-height: 1.62;
  padding-top: 1.25rem;
}

  .story-body p{
    max-width: 74ch;
  }

  .story-body p + p{
    margin-top: 1.35rem;
  }

.story-body p + .para-aside-pair { margin-top: 1.25rem; }
.story-body .para-aside-pair + p  { margin-top: 1.25rem; }

.story-body p.lead{
  font-size: 1.78rem;
  line-height: 1.44;
  max-width: 60ch;

  color: var(--iron);
  font-weight: 500;

  margin: 0 0 2rem;

  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;

  text-wrap: pretty;
}

  .story-body h2{
    font-size: 2.15rem;
    max-width: 30ch;
  }
}

/* ========== MARGINALIA (ARTICLE NOTES) ========== */

/* Shared caption typography (inline + hero + full-bleed) */
.story-body figcaption,
.hero-image figcaption,
.full-bleed figcaption{
  font-family: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: .85rem;
  line-height: 1.35;
  color: var(--iron);
  opacity: .9;
}

/* Map credit: like marginalia, but smaller and quieter */
.map-credit{
  font-family: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--iron);
  opacity: .85;
  margin: .2rem 0 1.1rem;
}

/* Desktop: sit in outer right margin (same mechanic as .marginalia) */
@media (min-width: 1280px){
  .map-credit{
    float: right;
    clear: right;
    width: 220px;
    margin: .2rem -260px 1.3rem 1.5rem;
    text-align: left;
  }
}

/* Mobile/tablet: keep it simple and out of the way */
@media (max-width: 1279px){
  .map-credit{
    text-align: right;
    margin: .2rem 0 1rem;
  }
}

.marginalia{
  font-family: Inter, "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
  font-size:.85rem;
  line-height:1.5;
  color: var(--iron);
  margin:1.1rem 0;
}

.marginalia img {
    width: 100%;
    height: auto;
    display: block;
}

.marginalia-caption {
    margin: .4rem 0 0;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--iron);
}

.marginalia-label{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  font-weight:600;
  color:var(--accent);
  margin-bottom:.15rem;
}

/* Desktop: notes in outer right margin.
   Breakpoint is 1280px because the -260px negative margin needs
   ~260px of right gutter beyond the 760px story column; that only
   exists at ≥1280px (computed: story_right ≈ 1020px at 1280px).
   Below 1280px the inline style is used instead. */
@media (min-width: 1280px){
  .marginalia{
    float:right;
    clear:right;
    width:220px;
    margin: .2rem -260px 1.3rem 1.5rem;
    text-align:left;
  }
}

/* Mobile / tablet / small laptops: inline notes */
@media (max-width: 1279px){
  .marginalia{
    padding-left:.75rem;
  }
}

/* Left marginalia pattern (for timeline years, etc.) */
@media (min-width: 1280px){
  .marginalia-left{
    float:left;
    clear:left;
    width:220px;
    margin:.2rem 1.5rem 1.3rem -260px;
    text-align:right;
  }
}

/* Paragraph–aside pairing
   Aside must be first in HTML for float to work on desktop.
   On mobile, column-reverse restores correct reading order.
*/
.para-aside-pair { display: block; }

@media (max-width: 1279px) {
  .para-aside-pair {
    display: flex;
    flex-direction: column-reverse;
    gap: .75rem;
  }
  .para-aside-pair .marginalia { margin: 0; }
}

/* Highlighted internal-link timeline notes */
.timeline-note--feature .note-body{
background: color-mix(in srgb, var(--rust) 12%, var(--bone));
color: var(--thames);
  padding:.65rem .75rem .7rem;
  border-radius:4px;
  margin-top:.3rem;
}

/* Keep the label untouched */
.timeline-note--feature .marginalia-label{
  margin-bottom:.25rem;
}

/* Make links readable on rust */
.timeline-note--feature .note-body a{
color: var(--rust);
text-decoration-color: var(--rust);
  text-decoration:underline;
  text-decoration-thickness:2px;
}

.timeline-note--feature .note-body a:hover {
  color: var(--thames);
  text-decoration-color: var(--thames);
}

.story-body .marginalia + p,
.story-body .marginalia + h2 {
    margin-top: 1.25rem;
}
/* ========== AUTHOR + REFERENCES (ARTICLE) ========== */

.story-end {
  margin-top: 2.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(0,0,0,.10);
  font-family: Inter, system-ui, sans-serif;
  font-size: .88rem;
  color: var(--slate);
  background: none;
}

/* ── Line 1: name | socials | date ── */

.byline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.byline-name {
  margin: 0;
  white-space: nowrap;
}

.byline-name strong {
  color: var(--thames);
  font-weight: 600;
}

.byline-social {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* sits in the centre column via space-between + auto margin */
  margin: 0 auto;
}

.byline-social a {
  display: inline-flex;
  align-items: center;
  opacity: 0.8;
  transition: opacity .2s ease, transform .2s ease;
}

.byline-social a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.svg-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.byline-date {
  margin: 0;
  font-size: .85rem;
  color: var(--slate);
  white-space: nowrap;
  text-align: right;
}

/* ── Line 2: cite (injected by cite-widget.js, mimics .refs) ── */

.cite-details {
  margin-top: 1.2rem;
  padding: 0;
  border: none;
  background: none;
}

/* Summary: identical to .refs summary */
.cite-details summary {
  cursor: pointer;
  font-family: Inter, system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
  list-style: none;
  margin-bottom: .4rem;
  background: none;
  opacity: .92;
}

.cite-details summary::-webkit-details-marker { display: none; }
.cite-details summary::after       { content: " ▼"; font-size: .8em; opacity: .6; }
.cite-details[open] summary::after { content: " ▲"; }

/* Citation text — Georgia, same scale as .refs li */
.cite-output {
  margin: 0 0 0.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--iron);
  word-break: break-word;
}

.cite-output em { font-style: italic; }

/* Last line: format switcher + copy, both muted */
.cite-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cite-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.cite-format-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--slate);
  cursor: pointer;
  opacity: .75;
  transition: opacity .12s, color .12s;
}

.cite-format-btn + .cite-format-btn::before {
  content: " · ";
  opacity: .5;
}

.cite-format-btn:hover { opacity: 1; color: var(--thames); }

.cite-format-btn.is-active {
  color: var(--thames);
  font-weight: 700;
  opacity: 1;
}

.cite-copy-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
  cursor: pointer;
  opacity: .75;
  transition: opacity .12s, color .12s;
  white-space: nowrap;
}

.cite-copy-btn:hover  { opacity: 1; color: var(--thames); }
.cite-copy-btn.is-copied { color: var(--accent); opacity: 1; }

/* ── References (unchanged structure, just margin rhythm) ── */

.refs {
  margin-top: 1.2rem;
  padding: 0;
  border: none;
  background: none;
}

.refs summary {
  cursor: pointer;
  font-family: Inter, system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--slate);
  list-style: none;
  margin-bottom: .4rem;
  background: none;
  opacity: .92;
}

.refs summary::-webkit-details-marker { display: none; }

.refs summary::after  { content: " ▼"; font-size: .8em; opacity: .6; }
.refs[open] summary::after { content: " ▲"; }

.refs ol {
  margin: .2rem 0 0 1.2rem;
  padding: 0;
  background: none;
}

.refs li {
  margin: .3rem 0;
  background: none;
}

/* ── CTA strip ── */

.cta-strip {
  padding: 16px 18px;
  background: color-mix(in srgb, var(--thames) 3.5%, var(--bone));
  border: none;
  border-radius: var(--radius);
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.92rem;
  color: var(--thames);
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}

.cta-strip p { margin: 0; }

/* ── Mobile: icons scale down, still one row ── */
@media (max-width: 380px) {
  .byline-social { gap: 8px; }
  .svg-icon { width: 18px; height: 18px; }
}

/* ========== MORE FROM THIS ISSUE (ARTICLE) ========== */

.more-issue{
  max-width: var(--readw);
  margin: 2rem auto 0;
  padding-top: 0rem;
}

.more-kicker {
  margin: 0 0 6px;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .92;
}

[data-issue="maps"] .more-kicker { color: var(--slate); }

[data-issue="crime"] .more-kicker { color: var(--rust); }

.more-title {
  margin: 0 0 18px;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--thames);
}

.more-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 720px){
  .more-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.more-card {
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--thames) 3.5%, var(--bone));
  border: none;
  box-shadow: none;
  padding: 16px 16px 18px;
  display: flex;
  gap: 16px;
  align-items: flex-start;

  color: inherit;
  font-family: Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.96rem;
  line-height: 1.6;

  transition: background .2s ease;
}

.more-card:hover {
  background: color-mix(in srgb, var(--thames) 7%, var(--bone));
}

.more-card-emoji{
  font-size: 30px;
  flex: 0 0 auto;
  line-height: 1;
  opacity: .9;
  transform: translateY(.06em);
}

.more-card h3{
  margin: 0 0 0.35rem;
  font-size: 1.12rem;
  line-height: 1.18;
  font-family: Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.more-card p{
  margin: 0;
color: var(--slate);
font-size: .84rem;
  line-height: 1.6;
  opacity: 0.92;
  color: inherit;
  font-family: inherit;
}

/* ========== GLOBAL SCROLL PROGRESS BAR (ALL CONTENT PAGES, NOT INDEX) ========== */

body:not([data-page="index"]) .scroll-progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:100%;
  transform-origin:0 0;
  transform:scaleX(0);
  background:var(--accent);
  z-index:999;
  pointer-events:none;
}

/* ========== PREFERS REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
  body:not([data-page="index"]) .scroll-progress{
    display:none;
  }
}