/* ============================================================
   OpenHouse — screens.css
   Screen-level layouts (hero · latest header · feed grid ·
   profile · open post · creative accents). Requires tokens +
   components.css.
   ============================================================ */

/* ============================================================
   HOME TOP BLOCK / MASTHEAD (above the 10-card index — PREHANDOFF Task 1)
   A two-column editorial frame that anchors the index so it no longer
   floats. NO giant "OpenHouse" title (BRANCH §2). LEFT = the section
   frame (the tagline + the dynamic VOLUME · MONTH line); RIGHT = a medium
   editorial statement in the brand's quiet-luxury voice (serif-italic
   accent allowed). Hairline rule + tracked labels echo THE LATEST /
   THE ARCHIVE. Balanced breathing: s8 above the rule, s8 below the block
   to the index — the index reads anchored, not floating.
   ============================================================ */
.oh-masthead { padding-block: var(--oh-s8) var(--oh-s8); }
.oh-masthead-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--oh-s7) var(--oh-s8);
  align-items: start;
  border-top: 1px solid var(--oh-line);
  padding-top: var(--oh-s6);
}
/* LEFT — the frame: tagline + the dynamic VOLUME · MONTH line */
.oh-masthead-frame { display: flex; flex-direction: column; gap: var(--oh-s4); }
.oh-masthead-tagline { color: var(--oh-text); }
.oh-masthead-vol {
  display: inline-flex;
  align-items: center;
  gap: var(--oh-s4);
  color: var(--oh-text-3);
  white-space: nowrap;
}
.oh-masthead-vol .sep { width: 32px; height: 1px; background: var(--oh-text-3); }
/* RIGHT — the editorial statement: a quiet typewriter "dispatch", right-aligned
   so it ends flush with the index's right edge. Monospace, muted, no contrasting
   accent face; a faint 01 —— 10 index mark quietly counts the ten columns. */
.oh-masthead-statement {
  margin: 0 0 0 auto;
  max-width: 48ch;
  text-align: right;
  font-family: var(--oh-font-mono);
  text-wrap: pretty;
}
.oh-masthead-stmt-body {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.75;
  letter-spacing: 0.005em;
  color: var(--oh-text-2);
}
.oh-masthead-stmt-mark {
  margin: var(--oh-s4) 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--oh-text-3);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   MASTHEAD ENTRANCE — A6(b)(c)(d). Slow, quiet, deliberate.
   All states resolve to the final text; reduced-motion and the
   frozen-clock failsafe (.oh-reveal-instant) are covered below.
   ============================================================ */
/* (b) LEFT frame — the frame itself stops fading (children carry the motion):
   tagline first, Volume line settles in behind it, soft blur resolving. */
.oh-masthead-frame.oh-reveal { opacity: 1; transform: none; }
.oh-masthead-frame .oh-masthead-tagline,
.oh-masthead-frame .oh-masthead-vol {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(5px);
}
.oh-masthead-frame.is-in .oh-masthead-tagline,
.oh-masthead-frame.is-in .oh-masthead-vol {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 1100ms var(--oh-ease-fluid), transform 1100ms var(--oh-ease-fluid), filter 1100ms var(--oh-ease-fluid);
}
.oh-masthead-frame.is-in .oh-masthead-vol { transition-delay: 280ms; }

/* (c) RIGHT statement — "dispatch composing": nav-stage JS splits the body
   into word fragments (adds .oh-stmt-split); each rises from a small offset
   with a blur that settles, left-to-right (per-fragment delay set inline by
   the same JS). NOT a character scramble — rejected. If the split never runs
   (reduced-motion / frozen clock / any JS failure) the class is absent and
   the statement behaves as a plain reveal with the text intact. */
.oh-masthead-statement.oh-stmt-split { opacity: 1; transform: none; }
.oh-stmt-frag { display: inline-block; }
.oh-masthead-statement.oh-stmt-split .oh-stmt-frag {
  opacity: 0;
  transform: translateY(0.4em);
  filter: blur(4px);
}
.oh-masthead-statement.oh-stmt-split.is-in .oh-stmt-frag {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity 760ms var(--oh-ease-fluid), transform 760ms var(--oh-ease-fluid), filter 760ms var(--oh-ease-fluid);
}

/* (d) the 01 —— 10 mark — one-time load treatment (audit #21): tracking
   settles 0.34em → 0.28em + fade, after the statement has composed. */
.oh-masthead-statement .oh-masthead-stmt-mark { opacity: 0; letter-spacing: 0.34em; }
.oh-masthead-statement.is-in .oh-masthead-stmt-mark {
  opacity: 1;
  letter-spacing: 0.28em;
  transition: opacity 900ms var(--oh-ease-fluid) 980ms, letter-spacing 900ms var(--oh-ease-fluid) 980ms;
}

/* frozen-clock failsafe coverage — when JS adds .oh-reveal-instant the whole
   masthead must paint final-state immediately */
.oh-reveal.oh-reveal-instant .oh-masthead-tagline,
.oh-reveal.oh-reveal-instant .oh-masthead-vol,
.oh-reveal.oh-reveal-instant .oh-stmt-frag,
.oh-reveal.oh-reveal-instant .oh-masthead-stmt-mark {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}
.oh-reveal.oh-reveal-instant .oh-masthead-stmt-mark { letter-spacing: 0.28em !important; }

/* reduced-motion: final state, no movement — non-negotiable */
@media (prefers-reduced-motion: reduce) {
  .oh-masthead-frame .oh-masthead-tagline,
  .oh-masthead-frame .oh-masthead-vol,
  .oh-masthead-statement.oh-stmt-split .oh-stmt-frag {
    opacity: 1; transform: none; filter: none; transition: none;
  }
  .oh-masthead-statement .oh-masthead-stmt-mark {
    opacity: 1; letter-spacing: 0.28em; transition: none;
  }
}
@media (max-width: 768px) {
  .oh-masthead { padding-block: var(--oh-s7) var(--oh-s7); }
  .oh-masthead-row { grid-template-columns: 1fr; gap: var(--oh-s6); }
  .oh-masthead-statement { text-align: left; margin-left: 0; }
}

/* ============================================================
   THEME INDEX GRID — 2 rows × 5 (desktop) / horizontal rail (mobile)
   ============================================================ */
.oh-theme-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--oh-s4);
  /* the top block / masthead (PREHANDOFF Task 1) now opens the page and carries
     the top breathing (its s8 bottom padding is the gap to this index). Bottom
     gap stays 0: the feed section's own padding-top (s9) gives space below. */
  padding-top: 0;
  padding-bottom: 0;
}
@media (max-width: 1000px) {
  .oh-theme-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* real card sizes in the rail (audit #17): the old minmax(210px, 62%) was
       inert (mins overflow the container → every track collapsed to 210px).
       clamp: 390 stays ~210 (peek of ~1.8 cards), 768 ≈ 261, 950 ≈ 300. */
    grid-auto-columns: clamp(210px, 34vw, 300px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--oh-s8);
    margin-inline: calc(-1 * var(--oh-gutter));
    padding-inline: var(--oh-gutter);
    scroll-padding-inline: var(--oh-gutter);
    scrollbar-width: none;
  }
  .oh-theme-grid::-webkit-scrollbar { display: none; }
  .oh-theme-grid .oh-theme-card { scroll-snap-align: start; aspect-ratio: 4 / 5; min-height: 0; }
  /* BUG FIX (audit #1): components.css gives .oh-theme-index margin-top s11
     (160px), sized for the 400–540px desktop card. In the ~210×262 rail card
     that pushed the name + signature past the bottom edge, where
     overflow:hidden clipped them invisible. Zeroed here, the index anchors
     top and .oh-theme-body (margin-top:auto) anchors bottom — content fits. */
  .oh-theme-grid .oh-theme-card .oh-theme-index { margin-top: 0; }
}

/* ============================================================
   SECTION HEADER ("Recent dispatches from the desk")
   ============================================================ */
/* anchor targets land clear of the sticky nav (audit #19) */
#latest, #archive { scroll-margin-top: 96px; }
.oh-secthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--oh-s5);
  padding-block: var(--oh-s9) var(--oh-s7);
  flex-wrap: wrap;
}
.oh-secthead-eyebrow { color: var(--oh-text-3); display: flex; align-items: center; gap: var(--oh-s3); margin-bottom: var(--oh-s5); }
.oh-secthead-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--oh-text-3); }
.oh-secthead h2 { margin: 0; max-width: 16ch; text-wrap: balance; } /* D3: even breaks */
.oh-secthead-note { color: var(--oh-text-3); }

/* ============================================================
   FEED GRID (two-up)
   ============================================================ */
.oh-feed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--oh-s8) var(--oh-s7);
  /* tightened so the pagination divider sits close under the cards (matches
     the profile archive → pagination spacing); the pagination's own
     padding-bottom carries the gap to the footer */
  padding-bottom: var(--oh-s7);
}
.oh-feed .oh-card-media { aspect-ratio: 16 / 11; }
/* 2-up → 1 column on mobile (PREHANDOFF Task 2, target 768/390) */
@media (max-width: 768px) {
  .oh-feed { grid-template-columns: 1fr; gap: var(--oh-s8); }
}

/* ============================================================
   PROFILE (screen 2)
   ============================================================ */
.oh-profile-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--oh-s8);
  align-items: start;
  padding-block: var(--oh-s7) var(--oh-s5);
}
.oh-profile-left {
  display: flex;
  flex-direction: column;
  min-height: var(--oh-left-h, clamp(520px, 62vh, 740px));
}
.oh-profile-name {
  margin: var(--oh-s4) 0 0;
  font-size: clamp(3.2rem, 9vw, 8rem);
}
/* theme subtitle under the giant name — the columnist's single column/theme
   (1 columnist = 1 theme, BRANCH §3). Prominent subtitle scale; echoes the
   home theme-card family (uppercase label + display name). */
.oh-profile-theme {
  margin: var(--oh-s5) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--oh-s2);
}
.oh-profile-theme-eyebrow { color: var(--oh-text-3); }
.oh-profile-theme-name {
  font-family: var(--oh-font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--oh-text);
}
.oh-profile-bio-block {
  margin-top: auto;
  padding-top: var(--oh-s8);
  max-width: 46ch;
}
.oh-profile-bio { color: var(--oh-text-2); font-size: 0.98rem; }
.oh-profile-bio p { margin: 0 0 var(--oh-s4); }
.oh-profile-rule {
  display: flex;
  align-items: center;
  gap: var(--oh-s4);
  margin-top: var(--oh-s6);
}
.oh-profile-rule .num { font-family: var(--oh-font-display); font-weight: 600; font-size: 0.82rem; white-space: nowrap; }
.oh-profile-rule .line { flex: 1; height: 1px; background: var(--oh-line); }
.oh-profile-rule a { font-family: var(--oh-font-display); font-weight: 600; font-size: 0.82rem; white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color 200ms var(--oh-ease); }
.oh-profile-rule a:hover { border-color: var(--oh-text); }
.oh-profile-portrait {
  position: relative;
  height: var(--oh-portrait-h, clamp(620px, 78vh, 880px));
  overflow: hidden;
}
.oh-profile-portrait .oh-portrait-meta {
  position: absolute;
  left: var(--oh-s5); right: var(--oh-s5); bottom: var(--oh-s5);
  z-index: 4;
  display: flex; justify-content: space-between;
  color: rgba(255,255,255,0.55);
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  /* legibility over photography (audit #7) — black-alpha only, not color */
  text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 0 14px rgba(0,0,0,0.35);
}
@media (max-width: 900px) {
  /* PREHANDOFF Task 2: giant name stacks ABOVE; portrait full-width BELOW
     (natural source order — no order:-1 flip). */
  .oh-profile-hero { grid-template-columns: 1fr; gap: var(--oh-s7); align-items: stretch; }
  .oh-profile-left { min-height: 0; }
  .oh-profile-portrait { height: clamp(440px, 68vh, 580px); }
  .oh-profile-bio-block { padding-top: var(--oh-s6); }
}

.oh-archive-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--oh-s8) var(--oh-s7);
  padding-bottom: var(--oh-s7);
}
/* profile-scoped: bring the archive header nearer the portrait while keeping a
   clear, non-touching gap (portrait sits closer to the section below) */
.oh-archive .oh-secthead { padding-top: var(--oh-s8); }
.oh-archive-grid .oh-card-media { aspect-ratio: 16 / 9; }
.oh-archive-grid.is-oneup { grid-template-columns: 1fr; }
.oh-archive-grid.is-oneup .oh-card-media { aspect-ratio: 16 / 7; }
@media (max-width: 768px) { .oh-archive-grid { grid-template-columns: 1fr; } }

/* ============================================================
   OPEN POST (screen 3)
   ============================================================ */
.oh-breadcrumb {
  display: flex; gap: var(--oh-s3); align-items: center;
  padding-block: var(--oh-s5) var(--oh-s7);
  color: var(--oh-text-3);
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  flex-wrap: wrap;
}
.oh-breadcrumb a:hover { color: var(--oh-text-2); }
.oh-breadcrumb .sep { color: var(--oh-text-3); }

.oh-post-head { max-width: 860px; margin-inline: auto; text-align: center; padding-bottom: var(--oh-s7); }
.oh-post-cat { color: var(--oh-text-3); display: inline-flex; align-items: center; gap: var(--oh-s3); margin-bottom: var(--oh-s5); }
.oh-post-cat::before, .oh-post-cat::after { content: ""; width: 24px; height: 1px; background: var(--oh-text-3); }
.oh-post-head h1 { margin: 0 0 var(--oh-s5); }
.oh-post-dek { font-family: var(--oh-font-serif); font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--oh-text-2); max-width: 52ch; margin: 0 auto var(--oh-s7); line-height: 1.45; }
.oh-post-byline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--oh-s7);
  flex-wrap: wrap;
}
.oh-post-meta { display: flex; gap: var(--oh-s6); }
.oh-post-meta .m { text-align: left; }
.oh-post-meta .m .k { color: var(--oh-text-3); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 3px; }
.oh-post-meta .m .v { font-family: var(--oh-font-display); font-weight: 600; font-size: 0.82rem; }

.oh-post-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  margin-block: var(--oh-s5) var(--oh-s4);
}
.oh-post-hero .oh-photo-hint { z-index: 3; }
.oh-post-caption { color: var(--oh-text-3); font-size: 0.78rem; text-align: center; max-width: 60ch; margin: 0 auto var(--oh-s10); line-height: 1.5; }

.oh-article { max-width: 680px; margin-inline: auto; }
.oh-article-marker { color: var(--oh-text-3); margin-bottom: var(--oh-s6); display: flex; align-items: center; gap: var(--oh-s3); }
.oh-article-marker::before { content: ""; width: 24px; height: 1px; background: var(--oh-text-3); }
.oh-article p { font-family: var(--oh-font-serif); font-size: 1.125rem; line-height: 1.7; margin: 0 0 var(--oh-s5); color: rgba(255,255,255,0.86); }
.oh-article p.lead::first-letter {
  font-family: var(--oh-font-serif);
  font-weight: 600;
  float: left;
  font-size: 4.6em;
  line-height: 0.78;
  padding: 0.04em 0.12em 0 0;
  color: var(--oh-text);
}
.oh-inline-right {
  float: right;
  width: 46%;
  margin: 6px 0 var(--oh-s5) var(--oh-s6);
}
.oh-inline-right .oh-photo { aspect-ratio: 4/5; width: 100%; display: block; }
.oh-inline-right figcaption { color: var(--oh-text-3); font-size: 0.74rem; margin-top: var(--oh-s3); line-height: 1.5; }
/* inline image floats on desktop; full-width stacked on mobile (PREHANDOFF Task 2) */
@media (max-width: 768px) { .oh-inline-right { float: none; width: 100%; margin: var(--oh-s6) 0; } }

.oh-endnote {
  border-top: 1px solid var(--oh-line);
  margin-top: var(--oh-s8);
  padding-top: var(--oh-s6);
}
.oh-endnote .k { color: var(--oh-text-3); display: block; margin-bottom: var(--oh-s4); }
.oh-endnote p { font-family: var(--oh-font-serif); font-style: italic; color: var(--oh-text-2); font-size: 1.05rem; line-height: 1.6; margin: 0; }

.oh-related { padding-block: var(--oh-s9); border-top: 1px solid var(--oh-line); margin-top: var(--oh-s10); }
/* .oh-enter — the tracked "enter" link (Open Post related-head). E1: relocated
   here from the retired hero block (the rules are LIVE — only the hero died). */
.oh-enter {
  display: inline-flex;
  align-items: center;
  gap: var(--oh-s4);
  font-family: var(--oh-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oh-text);
  border-bottom: 1px solid var(--oh-text);
  padding-bottom: var(--oh-s2);
  white-space: nowrap; /* D2: never squeezes onto two lines (doubled underline) */
}
.oh-enter .arr { transition: transform 300ms var(--oh-ease); }
.oh-enter:hover .arr { transform: translateX(6px); }
/* ============================================================
   CREATIVE ACCENT (final pass — one signature beat per page).
   Trivially reversible: delete this whole block to remove both.
   No JS changes — both beats ride the existing reveal sequence.

   OPEN POST — "the photograph comes to rest": the full-bleed hero
   fades in while its photograph settles 1.04→1.0 inside its own frame
   (scale-settle, 1300ms ease-fluid) in the slot the hero already holds
   in the lead stagger — the quiet counterpoint to the home's theatrical
   beat. (An earlier clip-path "curtain" was tried and dropped; it is NOT
   in the build — see the reformulation note on the rule below.)

   PROFILE — "the portrait anchors": the editorial portrait arrives
   last in the hero sequence with deeper travel (34px) and a longer
   settle (1400ms); the portrait-meta caption lands after the portrait
   does — written under the photograph once it's hung. Same site
   vocabulary (rise + settle), deepened at one point only.
   ============================================================ */

/* ---- Open Post: hero scale-settle ("the photograph comes to rest") ----
   REFORMULATED: the clip-path curtain was dropped — too showy for the
   reading page, and clip animation never glided. This is the quiet
   counterpoint to the home's theatrical beat: the hero fades in while the
   photograph settles 1.04→1.0 INSIDE its own frame (a ::before inheriting
   the photo background, scaled within the existing overflow:hidden — no
   full-bleed overflow, no scrollbar flicker, transform/opacity only so it
   runs entirely on the compositor). Same vocabulary as the card-media
   hover scale, slowed to entrance pace. Slot in the lead sequence and the
   caption settling after are unchanged. */
.oh-post-hero.oh-reveal {
  opacity: 0;
  transform: none;                 /* fade only — no rise on this element */
}
.oh-post-hero.oh-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;             /* duplicates the photo paint, in-frame */
  transform: scale(1.04);
  will-change: transform;
}
.oh-post-hero.oh-reveal.is-in {
  opacity: 1;
  transition: opacity 1300ms var(--oh-ease-fluid);
}
.oh-post-hero.oh-reveal.is-in::before {
  transform: scale(1);
  transition: transform 1300ms var(--oh-ease-fluid);
}

/* ---- Profile: portrait anchor arrival ---- */
.oh-profile-portrait.oh-reveal { transform: translateY(34px); }
.oh-profile-portrait.oh-reveal.is-in {
  transition: opacity 1400ms var(--oh-ease-fluid), transform 1400ms var(--oh-ease-fluid);
}
.oh-profile-portrait .oh-portrait-meta {
  opacity: 0;
  transform: translateY(10px);
}
.oh-profile-portrait.is-in .oh-portrait-meta {
  opacity: 1;
  transform: none;
  transition: opacity 900ms var(--oh-ease-fluid) 950ms, transform 900ms var(--oh-ease-fluid) 950ms;
}

/* ---- frozen-clock failsafe coverage (instant = final state) ---- */
.oh-post-hero.oh-reveal.oh-reveal-instant::before {
  transform: none !important;
  transition: none !important;
}
.oh-profile-portrait.oh-reveal-instant .oh-portrait-meta {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---- reduced-motion: final state, no movement (these selectors out-
   specify the generic .oh-reveal reduce rule, so explicit coverage) ---- */
@media (prefers-reduced-motion: reduce) {
  .oh-post-hero.oh-reveal { opacity: 1; }
  .oh-post-hero.oh-reveal::before { transform: none; transition: none; }
  .oh-profile-portrait.oh-reveal { transform: none; }
  .oh-profile-portrait .oh-portrait-meta { opacity: 1; transform: none; transition: none; }
}

/* D2 (audit #15): wraps cleanly at 390; sizes hoisted from the old inline
   style="" attributes in Open Post.html (handoff hygiene) */
.oh-related-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--oh-s7); flex-wrap: wrap; gap: var(--oh-s4) var(--oh-s5); }
.oh-related-head h3 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.6rem); }
.oh-related-head .oh-enter { font-size: 0.68rem; }
.oh-related-head h3 em { font-family: var(--oh-font-serif); font-style: italic; font-weight: 500; }
.oh-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--oh-s6); }
.oh-related-grid .oh-card-media { aspect-ratio: 4/3; }
.oh-related-grid .oh-card-title { font-size: 1.05rem; }
@media (max-width: 768px) { .oh-related-grid { grid-template-columns: 1fr; gap: var(--oh-s7); } }