/* editorial layout: atlas */
:root {
  --bg: #ecfdf5;
  --paper: #ffffff;
  --ink: #052e16;
  --accent: #14532d;
  --signal: #b45309;
  --muted: #64748b;
  --display: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
  --gutter: clamp(1.2rem, 4vw, 4rem);
  --space: clamp(3.5rem, 8vw, 7rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--paper); padding: .6rem 1rem; z-index: 9; }

.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; padding: 1.1rem var(--gutter);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.wordmark { font-family: var(--display); font-size: 1.55rem; letter-spacing: -.03em; }
.wordmark span { color: var(--signal); }
.site-header nav { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.edition { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.hero {
  display: grid; gap: 1.5rem; padding: var(--space) var(--gutter) 2rem;
}
.layout-split-field .hero { grid-template-columns: 1fr 1.15fr; align-items: end; }
.layout-cover-stack .hero { min-height: 78vh; grid-template-rows: 1fr auto; }
.layout-cover-stack .hero-figure { min-height: 52vh; }
.layout-ledger .hero,
.layout-atlas .hero { grid-template-columns: 1.1fr .9fr; }
.layout-gallery-first .hero { grid-template-columns: .9fr 1.1fr; }
.layout-timeline .hero { grid-template-columns: 1fr; max-width: 52rem; }
.layout-note-card .hero { grid-template-columns: 1fr 1fr; }
.layout-mono-essay .hero { grid-template-columns: minmax(0, 40rem); }

.kicker { margin: 0 0 1rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
.hero h1 {
  margin: 0 0 1rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5.8rem); letter-spacing: -.045em; line-height: .95;
}
.hero h1 em { font-style: italic; color: var(--signal); }
.standfirst { margin: 0; font-family: var(--display); font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.35; max-width: 38rem; }
.hero-figure { margin: 0; min-height: 22rem; overflow: hidden; background: color-mix(in srgb, var(--accent) 25%, var(--paper)); }
.hero-figure figcaption {
  display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0 0;
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

.quick-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin: 0 var(--gutter); padding: 1.2rem 0; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.quick-strip p { margin: 0; padding: .2rem 1rem; border-left: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); font-family: var(--display); }
.quick-strip p:first-child { border-left: 0; padding-left: 0; }
.quick-strip span { display: block; font-family: var(--sans); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }

.section { padding: var(--space) var(--gutter); }
.section h2 {
  margin: 0 0 1.5rem; font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.8rem); letter-spacing: -.035em; line-height: 1;
}
.notes { display: grid; gap: 2rem; }
.layout-note-card .notes,
.layout-gallery-first .notes { grid-template-columns: repeat(3, 1fr); }
.layout-ledger .notes { grid-template-columns: 1fr; }
.note-card {
  display: grid; gap: 1rem; background: var(--paper); padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.layout-ledger .note-card { grid-template-columns: 14rem 1fr; align-items: start; }
.note-card figure { margin: 0; height: 14rem; overflow: hidden; }
.layout-ledger .note-card figure { height: 10rem; }
.note-card h3 { margin: 0 0 .5rem; font-family: var(--display); font-size: 1.55rem; font-weight: 500; }
.note-card p { margin: 0; color: var(--muted); }

.feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  padding: var(--space) var(--gutter); background: var(--paper);
}
.feature blockquote {
  margin: 0; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.15; font-style: italic;
}
.feature figure { margin: 0; min-height: 20rem; }

.site-footer {
  padding: 2rem var(--gutter) 3rem; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: .85rem; color: var(--muted);
}

@media (max-width: 900px) {
  .layout-split-field .hero,
  .layout-ledger .hero,
  .layout-atlas .hero,
  .layout-gallery-first .hero,
  .layout-note-card .hero,
  .layout-cover-stack .hero,
  .feature,
  .layout-note-card .notes,
  .layout-gallery-first .notes,
  .layout-ledger .note-card { grid-template-columns: 1fr; }
  .quick-strip { grid-template-columns: 1fr 1fr; }
  .trip-tall { margin-top: 0; }
}