/* ============================================
   LOCAL FONTS
   ============================================ */
@font-face {
  font-family: "Logic Mono";
  src: url("/fonts/logic-mono-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Graphik Web";
  src: url("/fonts/graphik-web-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  /* Colors — pulled from Atlantic live site extractor */
  --color-bg: #FFFFFF;
  --color-text: #1A1A1A;
  --color-text-secondary: #757575;
  --color-headline: #1A1A1A;
  --color-accent: #E7131A;
  --color-divider: #C1C1C1;
  --color-divider-light: #E5E5E5;
  --color-nav: #1A1A1A;

  /* Typography */
  --font-serif: 'EB Garamond', 'AGaramondPro', Georgia, serif;
  --font-sans: 'Inter', 'Graphik', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Logic Monospace', 'Courier New', monospace;
  --font-kicker: "Logic Mono", "JetBrains Mono", monospace;
  --font-nav: "Graphik Web", "Inter", system-ui, sans-serif;

  /* Layout */
  --max-outer: 1280px;
  --grid-padding: 32px;
  --rule-divider: 1px solid var(--color-divider);
  --rule-divider-light: 1px solid var(--color-divider-light);

  /* Top stroke (full-viewport black bar at top, fixed) */
  --top-stroke-height: 4px;

  /* ============================================
     HEADER STATE MACHINE — see index.html scroll JS
     ============================================ */

  /* Sticky bar (final-state height; pre-scroll same height; right nav may overflow visibly) */
  --site-nav-height: 56px;

  /* Header outer edges — narrow-viewport floor; widens to align nav content with the 1280 outer band on desktop. */
  --header-edge-padding: 24px;

  /* Right-nav travel (measured from current pre-scroll geometry; tunable via QA) */
  --right-nav-start-y: 28px;         /* viewport y of nav top edge in pre-scroll (= top-stroke 4 + 24) */
  --right-nav-final-y: 12px;         /* viewport y of nav top edge in final state (centered in 56px bar with 40px button) */
  --right-nav-travel: 16px;          /* start-y minus final-y */
  --right-nav-settle-scroll: 108px;  /* scrollY at which travel completes */
  --right-nav-progress: 0;           /* 0..1, set by JS each frame */

  /* Wordmark sticky position (centered in 56px bar with 32px italic glyph) */
  --wordmark-sticky-top: 16px;       /* viewport y of wordmark top edge in final state */

  /* Masthead lockup — preserves current pre-scroll giant-HS Y at viewport y=28 */
  --monogram-size: 140px;
  --lockup-y-offset: -32px;          /* lockup top = mast-top + this; with mast-top=60 (4+56), gives y=28 */
  --masthead-height: 108px;          /* fits the 140px monogram (lockup overflows -32 above and ends at mast bottom) */

  /* Gray rule — fixed-position, holds at pre-rule-Y; trigger is content-relative,
     not a scrollY threshold. Rule begins moving when .top-grid top is within
     --rule-content-buffer of --rule-pre-y. JS toggles body.h-rule-moving accordingly. */
  --rule-position: 0.55;             /* fraction of monogram height where rule cuts pre-scroll */
  --rule-pre-y: 105px;               /* viewport y of rule pre-scroll = mast-top 60 + (-32 + 140*0.55) = 105 */
  --rule-final-y: 60px;              /* viewport y of rule in final state = bar bottom (4 + 56) */
  --rule-content-buffer: 23px;       /* trigger rule movement when top-grid is this close to the rule */
  --lockup-gap: 91px;                /* half-width of central rule break (pre-scroll) */
}

/* Top black stroke — fixed to viewport. Highest layer (z 10002) so the giant HS
   always scrolls UNDER it, never over it. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-stroke-height);
  background: #000;
  z-index: 10002;
}

/* ============================================
   RESET
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--color-bg);
}

body {
  position: relative;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-bg);
  padding-top: var(--top-stroke-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

ul {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
}

/* ============================================
   PRE-SCROLL LEFT NAV — absolute to body, scrolls naturally with the page.
   Mirrors .left-nav-sticky; only one is keyboard-focusable at a time (JS toggles).
   ============================================ */
.left-nav-pre {
  position: absolute;
  top: var(--right-nav-start-y);
  left: max(var(--header-edge-padding), calc((100% - var(--max-outer)) / 2));
  z-index: 110;                  /* above .site-nav (100) so the bar's white bg doesn't cover it pre-scroll */
  display: flex;
  align-items: center;
  gap: 20px;
  height: 40px;
}

/* Once the sticky bar has fully taken over (body.h-final), the pre-scroll left nav
   is far above the viewport anyway — but hide it explicitly to avoid any chance of
   visual or focus duplication with the sticky-left-nav float-down. */
body.h-final .left-nav-pre {
  visibility: hidden;
  pointer-events: none;
}

/* ============================================
   STICKY BAR — sticks at top:4. Right nav lives here always (translates).
   Sticky left nav and small monogram live here too but are hidden until h-final.
   ============================================ */
.site-nav {
  position: sticky;
  top: var(--top-stroke-height);
  z-index: 100;
  height: var(--site-nav-height);
  background: var(--color-bg);
  width: 100%;
  padding: 0 max(var(--header-edge-padding), calc((100% - var(--max-outer)) / 2));
  display: grid;
  grid-template-columns: minmax(25%, 1fr) auto minmax(25%, 1fr);
  align-items: start;
  overflow: visible;
}

.left-nav-sticky {
  position: relative;
  top: calc(var(--right-nav-final-y) - var(--top-stroke-height));
  display: flex;
  align-items: center;
  gap: 20px;
  height: 40px;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0s, opacity 0s;
  grid-column: 1;
}

body.h-final .left-nav-sticky {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.small-monogram {
  font-family: "Prata", Georgia, serif;
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
  color: var(--color-accent);
  letter-spacing: 0.5px;
  text-decoration: none;
}

.center-slot {
  grid-column: 2;
}

.right-nav {
  position: relative;
  top: calc(var(--right-nav-start-y) - var(--top-stroke-height) - var(--right-nav-progress) * var(--right-nav-travel));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  height: 40px;
  grid-column: 3;
}

@media (prefers-reduced-motion: reduce) {
  .left-nav-sticky,
  body.h-final .left-nav-sticky {
    transition: none;
  }
}

.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-nav);
  cursor: pointer;
}

.nav-icon:hover {
  opacity: 0.7;
}

.nav-icon:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.nav-links {
  display: flex;
  gap: 28px;
}

.nav-links a,
.signin {
  font-family: var(--font-nav);
  font-weight: 400;
  font-size: 14px;
  line-height: 16.1px;
  letter-spacing: 0.3px;
  color: #000000;
}

.nav-links a:hover,
.signin:hover {
  text-decoration: underline;
}

.subscribe-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  background: var(--color-accent);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  border-radius: 4px;
  white-space: nowrap;
}

.subscribe-btn:hover {
  opacity: 0.92;
}

/* ============================================
   MASTHEAD — block in normal flow below the sticky site-nav.
   Holds only the giant HS lockup (absolutely positioned). Scrolls naturally.
   The giant HS is allowed to clip behind the top stroke (z 10002) and to paint
   over the sticky bar (z 100) on its way up — no opacity, no force-hide.
   ============================================ */
.masthead {
  position: relative;
  max-width: var(--max-outer);
  margin: 0 auto;
  padding: 0 var(--grid-padding);
  height: var(--masthead-height);
}

.logo-lockup {
  position: absolute;
  top: var(--lockup-y-offset);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--color-bg);
  padding: 0 4px;
}

.monogram {
  font-family: "Prata", Georgia, serif;
  font-size: var(--monogram-size);
  line-height: 1;
  font-weight: 400;
  color: var(--color-accent);
}

/* ============================================
   WORDMARK ROW — separate sticky element so the wordmark sticks for the
   lifetime of the page. ONE wordmark element. Same font/size/weight/style
   in every state (no smaller swap). It just translates (via sticky) from
   its natural position below the giant HS to the bar center.
   ============================================ */
.wordmark-row {
  position: sticky;
  top: var(--wordmark-sticky-top);
  z-index: 150;
  text-align: center;
  height: 32px;
}

.wordmark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: var(--color-text);
  /* inline-block + opaque bg + horizontal padding so the wordmark masks the
     bar border (z 100) as it scrolls through y=60. Mirrors the lockup's
     masking pattern. Parent .wordmark-row paints at z 150, above the bar. */
  display: inline-block;
  background: var(--color-bg);
  padding: 0 24px;
}

/* ============================================
   MASTHEAD RULE — absolutely positioned to body so it scrolls with the masthead.
   Pre-scroll: at viewport y = --rule-pre-y (105), split via ::before / ::after.
   As the page scrolls, the rule slides up and disappears behind the sticky bar
   (z 50 < site-nav z 100, white bg covers it). When body.h-final fires the rule
   is hidden entirely and the sticky bar shows its own bottom border instead —
   one state change, never two visible rules.
   ============================================ */
.masthead-rule {
  position: absolute;
  top: var(--rule-pre-y);
  left: 0;
  right: 0;
  height: 1px;
  z-index: 50;
  pointer-events: none;
}

body.h-final .masthead-rule {
  display: none;
}

/* Bar border reveals the moment the masthead rule reaches viewport y = --rule-final-y
   (scrollY = --rule-pre-y minus --rule-final-y = 45). Until then, the rule is the
   visible line. From that point on, the rule slides behind the bar (z 50, hidden by
   the bar's white bg) and the bar's own bottom border is the visible line. No gap. */
body.h-bar-bordered .site-nav {
  border-bottom: 1px solid var(--color-divider);
}

.masthead-rule::before,
.masthead-rule::after {
  content: "";
  position: absolute;
  top: 0;
  height: 1px;
  background: var(--color-divider);
  pointer-events: none;
  transition: right 0.4s ease, left 0.4s ease;
}

.masthead-rule::before {
  left: 0;
  right: calc(50% + var(--lockup-gap));
}

.masthead-rule::after {
  left: calc(50% + var(--lockup-gap));
  right: 0;
}

/* h-gap-closed is mirrored to h-final by JS. The rule itself is display:none in
   the final state, so these gap-close styles never paint visibly — they remain
   only as a marker hook for any future use (and to keep the pseudos tidy). */
body.h-gap-closed .masthead-rule::before {
  right: 50%;
}

body.h-gap-closed .masthead-rule::after {
  left: 50%;
}

@media (prefers-reduced-motion: reduce) {
  /* Only the gap pseudos have time-based transitions now (right/left for gap close).
     The rule's vertical position is scroll-driven, no transition to disable. */
  .masthead-rule::before,
  .masthead-rule::after,
  body.h-gap-closed .masthead-rule::before,
  body.h-gap-closed .masthead-rule::after {
    transition: none;
  }
}

/* ============================================
   MAIN CONTAINER
   ============================================ */
main {
  max-width: var(--max-outer);
  margin: 0 auto;
  padding: 0 var(--grid-padding);
}

/* ============================================
   TOP GRID: 4 × 296px, hero spans cols 2–3, 1280px wrapper
   ============================================ */
.top-grid {
  display: grid;
  grid-template-columns: 296px 296px 296px 296px;
  column-gap: 32px;
  margin-left: calc(var(--grid-padding) * -1);
  margin-right: calc(var(--grid-padding) * -1);
  padding-top: 44px;
  padding-bottom: 24px;
  border-bottom: var(--rule-divider);
}

.left-col {
  grid-column: 1;
}

.hero-story {
  grid-column: 2 / span 2;
  position: relative;
}

/* Vertical gray rules in the centerline of the 32px gaps either side of hero.
   Pseudo-elements are absolutely positioned and do not affect hero layout
   or image dimensions. */
.hero-story::before,
.hero-story::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-divider);
  pointer-events: none;
}

.hero-story::before {
  left: -16px;
}

.hero-story::after {
  right: -16px;
}

@media (max-width: 768px) {
  .hero-story::before,
  .hero-story::after {
    display: none;
  }
}

.right-rail {
  grid-column: 4;
}

/* ============================================
   LEFT COLUMN
   ============================================ */
.left-col {
  display: flex;
  flex-direction: column;
}

.left-story {
  padding-bottom: 28px;
  border-bottom: var(--rule-divider-light);
  margin-bottom: 28px;
}

.left-story:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.left-story-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: 10px;
}

.left-headline {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  color: var(--color-headline);
  margin: 8px 0 12px;
}

/* ============================================
   CENTER COLUMN: dominant hero
   ============================================ */
.hero-story {
  width: 100%;
}

.hero-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: 10px;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 38px;
  line-height: 44px;
  font-weight: 400;
  color: var(--color-headline);
  text-align: center;
  max-width: 760px;
  margin: 32px auto 16px;
}

.hero-deck {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.35;
  color: var(--color-text);
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.hero-byline {
  font-family: var(--font-kicker);
  font-weight: 500;
  font-size: 12px;
  line-height: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #181A18;
  text-align: center;
  margin: 16px 0 0;
}

/* ============================================
   RIGHT RAIL: compact editorial modules
   ============================================ */
.right-rail {
  display: flex;
  flex-direction: column;
}

.rail-item {
  border-bottom: var(--rule-divider-light);
}

.rail-item:first-child {
  padding-top: 0;
}

.rail-item:last-child {
  border-bottom: none;
}

a.rail-link {
  display: grid;
  grid-template-columns: auto 80px;
  gap: 20px;
  padding: 24px 0;
  align-items: start;
}

.rail-item:first-child .rail-link {
  padding-top: 0;
}

.rail-thumb {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
  object-position: 50% 50%;
}

.rail-headline {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.28;
  font-weight: 400;
  color: var(--color-headline);
  margin: 0 0 14px;
}

.rail-author {
  font-family: var(--font-kicker);
  font-weight: 500;
  font-size: 12px;
  line-height: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #181A18;
  margin: 0;
}

/* ============================================
   IMAGE CREDIT
   ============================================ */
.image-credit {
  font-family: var(--font-kicker);
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
  text-align: left;
  margin: 8px 0 0;
}

.image-credit-wrap {
  position: relative;
  height: 17px;
}

.image-credit-wrap .image-credit {
  position: absolute;
  left: 0;
  margin: 0;
}

.hero-figure {
  margin: 0;
}

/* ============================================
   BYLINE (left column)
   ============================================ */
.byline {
  font-family: var(--font-kicker);
  font-weight: 500;
  font-size: 12px;
  line-height: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #181A18;
  margin: 0;
}

/* ============================================
   BELOW-THE-FOLD BELT SECTIONS
   ============================================ */
.belt-section {
  padding: 24px 0;
  border-bottom: var(--rule-divider-light);
}

.top-grid + .belt-section {
  padding-top: 24px;
}

.belt-section + .belt-section {
  padding-top: 12px;
}

.belt-section:last-of-type {
  border-bottom: none;
}

.section-header {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-headline);
  padding-bottom: 12px;
  border-bottom: var(--rule-divider-light);
  margin-bottom: 28px;
}

.quad-belt {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 32px;
}

.quad-belt .card {
  position: relative;
}

.quad-belt .card + .card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  width: 1px;
  background: var(--color-divider-light);
  pointer-events: none;
}

.card {
  transition: opacity 0.2s ease;
}

.card:hover {
  opacity: 0.75;
}

.card-link {
  display: block;
}

.card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: 12px;
}

.headline-standard {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--color-headline);
  margin: 0 0 8px;
}

.dek {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.35;
  color: var(--color-text);
  margin: 0;
}

/* ============================================
   DOUBLE-WIDE ROW
   Outer: 624 + 32 + 624 = 1280
   Left card: 296 text + 32 + 296 image
   Right grid: 2 cols × 2 rows of rail items, column-flow
   ============================================ */
.double-wide-row {
  display: grid;
  grid-template-columns: 624px 624px;
  column-gap: 32px;
}

a.dw-card-link {
  display: grid;
  grid-template-columns: 296px 296px;
  column-gap: 32px;
}

.dw-figure {
  margin: 0;
}

.dw-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.dw-headline {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  color: var(--color-headline);
  margin: 0 0 4px;
  text-wrap: pretty;
}

.dw-deck {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: var(--color-headline);
  margin: 0 0 12px;
  text-wrap: pretty;
}

.dw-byline {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-headline);
  margin: 12px 0 0;
}

.dw-rail-grid {
  display: grid;
  grid-template-columns: 296px 296px;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  column-gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dw-rail-grid > li:nth-child(odd) {
  padding-bottom: 16px;
}

.dw-rail-grid > li:nth-child(even) {
  padding-top: 16px;
}

a.dw-rail-link {
  display: grid;
  grid-template-columns: auto 80px;
  gap: 20px;
}

.dw-rail-headline {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: var(--color-headline);
  margin: 0;
  text-wrap: pretty;
}

.dw-rail-byline {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-headline);
  margin: 12px 0 0;
}

.dw-rail-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  max-width: var(--max-outer);
  margin: 0 auto;
  padding: 48px var(--grid-padding);
  border-top: var(--rule-divider-light);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: center;
}