/* ═══ welcome-observatory.css — per-surface slice of oxford.css (#297 LH-1b) ═══
   Extracted 2026-07-28. Linked ONLY by templates/welcome-observatory.html.

   Why: every rule below styles the welcome-observatory home page and nothing
   else — verified against every template class attribute, every .py HTML
   builder, and every static/js consumer. They were living in oxford.css, so
   they shipped (a) inside bundle-core.min.css to the 6 SSR/marketing pages
   that link it, and (b) inside bundle-ssr-shell.min.css to ~90 SSR pages,
   because `_extract_oxford_ssr_shell` slices the PageFooter rule → EOF and
   this block sat inside that tail. (Do NOT quote that selector verbatim in
   an oxford.css comment — the extractor finds it with str.find() and the
   first textual hit wins; pinned by
   test_ssr_shell_slice_anchors_are_not_shadowed_by_comment_text.)

   DELIBERATELY LEFT IN oxford.css (other surfaces render them):
     • .ol-obs-chrome-wordmark(+strong) and the Cormorant @font-face — pricing.html
     • .ol-obs-search* and .ol-obs-pull-thread* — pricing.html's pull-a-thread block
     • .ol-obs-foot* (+ its 720px block) — learn-index / learn-journey /
       practice-landing / practice-portfolio / whats-new
     • [data-ol-auth="1"] .ol-anon-only — theme-bootstrap.js, site-wide

   Cascade: source order is preserved exactly, and the sheet is linked AFTER
   bundle-ssr-shell.min.css (the later of the two bundles that used to carry
   these rules), so nothing that used to win can lose. No selector here is
   also defined in oxford.css, so there is no cross-file tie to resolve.

   Contract pins: tests/test_oxford_css_section_split_contract.py
                  tests/test_a12_whats_new_panel_contract.py
                  tests/test_observatory_voice_grammar.py
                  tests/test_contrast_browser_pass_2026_06_01_contract.py
   ════════════════════════════════════════════════════════════════════════════ */


/* ── Observatory minimal chrome (welcome-observatory.html) ──────────
   The meditative open replaces the full marketing PageNav with just
   a brand mark + Sign in. Everything else (SEARCH, theme, CTA, primary
   nav links) is intentionally absent — the page itself is the search,
   and the secondary nav competes with the gallery for attention. */

.ol-obs-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: var(--space-6) var(--space-8);
  font-family: var(--font-brand);
}

.ol-obs-chrome-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  text-decoration: none;
  color: var(--text-primary);
  border-radius: 0;
  padding: var(--space-1);
  margin: -var(--space-1);
  transition: background 200ms ease;
}

.ol-obs-chrome-mark:hover {
  background: var(--surface-hover, rgba(255,255,255,0.04));
}

.ol-obs-chrome-mark img {
  border-radius: 0;
  display: block;
}


.ol-obs-chrome-signin {
  /* C9 (welcome redesign 2026-07-01): group the two chrome links at the right edge --
     margin-left:auto pushes Sign in + the following Start free together as a pair
     (header is display:flex; justify-content:space-between). CSS-only, byte-stable. */
  margin-left: auto;
  font-family: var(--font-brand);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 200ms ease;
  /* 2026-04-29 mobile-UI Tier 2 (STEVE JOBS audit): expand the touch
     target to 44px without shifting the visible position. The
     negative margin offsets the padding so the rendered text stays
     where the design wants it; the hit-rect grows. Apple HIG floor. */
  padding: var(--space-2-5) var(--space-3-5);
  margin: -var(--space-2-5) -var(--space-3-5);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.ol-obs-chrome-signin:hover {
  color: var(--text-primary);
}


/* Start free — the page's single conversion affordance. Same
   typographic register as Sign in (brand italic, 14px, 44px hit-rect)
   but gold: on a page that is deliberately quiet, exactly one element
   may carry the accent. Sits right of Sign in with a measured gap. */
.ol-obs-chrome-startfree {
  margin-left: var(--space-4); /* C9: gap between Sign in and Start free in the group */
  font-family: var(--font-brand);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--gold-brand);
  text-decoration: none;
  transition: color 200ms ease;
  /* Responsive intentionality (OWNER 2026-06-12): the 44px hit-rects
     of Sign in and Start free must NOT overlap on touch screens —
     both expand 14px past their text via negative margins, so the
     visible gap must exceed 28px. margin-left 22px + the sibling's
     14px right padding = 8px clearance between hit zones. */
  padding: var(--space-2-5) var(--space-3-5);
  margin: -var(--space-2-5) -var(--space-3-5) -var(--space-2-5) var(--space-5-5);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.ol-obs-chrome-startfree:hover {
  color: var(--text-primary);
}


/* Masthead line — the quiet last line of the masthead block, AFTER the
   date-greeting and the editorial fact. Serif (the page's editorial
   voice), secondary ink, no emphasis: it states what the place is, it
   does not sell. Width-capped to the pulse line's measure. */
.ol-obs-masthead-line {
  font-family: var(--font-serif, Georgia, serif);
  /* C4 (welcome redesign, OWNER mockup approval 2026-07-01): --text-md/--text-secondary
     -> --text-18/--text-primary for value-prop hierarchy. Supersedes the 2026-06-16
     "secondary ink" treatment. Stays declarative (no CTA/exclamation) — hierarchy, not
     salesmanship. The single Start-free CTA remains the chrome one (OWNER Option A
     2026-06-12); DESIGN dropped the mockup's inline masthead CTA as redundant. */
  font-size: var(--text-18);
  line-height: 1.6;
  color: var(--text-primary);
  /* 2026-06-16 DESIGN/BUILDER: left-align + match the LEDGE FACT pulse
     (max-width 720, flush-left) so the orientation line reads as a coherent
     masthead block. Was centered (margin auto + text-align center) while the
     date + pulse are flush-left — it floated awkwardly (OWNER screenshot). */
  max-width: 720px;
  margin: 0 0 var(--space-4);
  text-align: left;
}
/* PH-2 C1 (2026-07-28): the OWNER Option A conversion pair, relocated from
   the retired .ol-obs-chrome header into the masthead (the PageNav chrome
   is auth-neutral by contract — #63a). The anchors keep their typography +
   44px hit-rects; the chrome-flex positioning margins (margin-left:auto /
   the C9 pair-gap) are neutralized here — flex `gap` owns the spacing, and
   22px between boxes keeps the touch targets non-overlapping. */
.ol-obs-masthead-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5-5);
  margin: 0 0 var(--space-4);
}
.ol-obs-masthead-actions .ol-obs-chrome-signin,
.ol-obs-masthead-actions .ol-obs-chrome-startfree {
  margin: 0;
}

/* Pinned anon lesson tile — a full-width INVITATION STRIP between the
   lead news box and the 4-tile rail, not a 5th rail item: a 5th item
   in the repeat(4,1fr) row would wrap and orphan the permanent Markets
   tile to its own row on desktop. Full-width works identically at
   every breakpoint (the mobile 1fr stack is unaffected). */
.ol-obs-tile.ol-anon-only {
  grid-column: 1 / -1;
  /* C3 (welcome redesign 2026-07-01): elevate the single anon conversion path from
     footnote-weight rail styling to an invitation strip. CSS-only + a gold-rule span
     added in the template — byte-stable across anons. */
  background: var(--bg-elevated);
  border-left: 2px solid var(--gold-brand);
}
.ol-obs-tile.ol-anon-only .ol-obs-tile-title {
  font-style: italic;
  font-size: var(--text-sm);
}
.ol-obs-tile.ol-anon-only .ol-obs-tile-body {
  font-size: var(--text-18);
}


@media (max-width: 720px) {
  .ol-obs-chrome { padding: var(--space-4) var(--space-5); }
}

/* ── Observatory home (templates/welcome-observatory.html) ──────────
   Phase 1A — visual treatment + asymmetric grid + bookish lesson tile.
   Live data wiring lands in Phase 1C+. The voice grammar is: italic,
   lowercase, observational. The pacing is: silent default, fade-in
   on hover, no springs/bounces. Compounding is the page's *posture*,
   not a feature on it.
   ─────────────────────────────────────────────────────────────────── */

.ol-observatory {
  max-width: 1100px;
  margin: 0 auto;
  /* 2026-06-23 (OWNER: "reduce vertical space of welcome page"): tightened the
     hero/footer padding 80/120 → 44/72 so the cold page reads denser and the
     fold lands closer to the search/gallery. Mobile keeps its own 48px override
     below. */
  padding: 44px var(--space-8) 72px;
}

/* Date headline — Naval-style, hero presence. Pulse-tip sits
   directly beneath. */
.ol-obs-date {
  font-family: var(--font-brand);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-32);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 var(--space-2-5);
}

/* Pulse — rotating LEDGE FACT/QUOTE beneath the date. Prefix bold,
   body italic, both lighter than the date headline. Reserved height
   (3 lines worth) so the gallery position never shifts when the tip
   wraps differently — motion is only in the text, not the layout. */
.ol-obs-pulse {
  font-family: var(--font-brand);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--text-secondary); /* WCAG AA: --text-muted × opacity 0.85 fell below 4.5:1 — browser-pass 2026-06-01 */
  opacity: 0.85;
  margin: 0 0 var(--space-6); /* 2026-06-23 vertical-space trim: 36 → 24 */
  /* Reserve 3 lines of height so 1/2/3-line tips don't reflow the
     page below. 13.5 * 1.55 * 3 ≈ 63px → 66px for breathing room.
     (min-height kept — it's anti-CLS for the rotating tip, not slack.) */
  min-height: 66px;
  max-width: 720px;
  transition: opacity 800ms ease;
}
.ol-obs-pulse.is-fading {
  opacity: 0;
}
.ol-obs-pulse-prefix {
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-right: var(--space-1-5);
}
.ol-obs-pulse-text {
  font-weight: 400;
}
@media (prefers-reduced-motion: reduce) {
  .ol-obs-pulse { transition: none; }
  .ol-obs-pulse.is-fading { opacity: 0.85; }
}

/* Gallery — 2026-05-06 hierarchy reflow (DESIGN audit, OWNER greenlit).
   Lesson tile is the 180px lead-at-top spanning all 4 columns; the 4
   contextual tiles (3 rotating + Markets) form a uniform "More inside"
   rail below at reduced visual weight. Reverses the 2026-04-30
   lesson-bottom decision so the editorial promise lands first. */
.ol-obs-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  /* 2026-06-23 vertical-space trim: 80 → 44. This was the largest single gap on
     the page — the empty band between the "More inside" rail and the search. */
  margin-bottom: 44px;
}

.ol-obs-tile {
  display: flex;
  flex-direction: column;
  padding: var(--space-5-5) var(--space-5-5) var(--space-4-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  min-height: 116px; /* 2026-06-23 vertical-space trim: 144 → 116 (content still grows past it) */
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
}

.ol-obs-tile:hover {
  transform: translateY(-1px);
  background: var(--bg-elevated);
  border-color: var(--border-default);
}

.ol-obs-tile:focus-visible {
  outline: 2px solid var(--gold-brand);
  outline-offset: 2px;
}

.ol-obs-tile-title {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
}

.ol-obs-tile-body {
  font-family: var(--font-brand);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
  flex: 1;
}

/* Sub-observations — 2026-04-30 PM rebuild. Up to 3 per tile.
   Rendered as flat <p> paragraphs (NOT a <ul><li> tree) so there's
   no list semantics to suppress and no UA-stylesheet edge case can
   re-introduce a disc marker. Earlier `.ol-obs-tile-subs` rules
   chased that bug across mobile + desktop; switching to <p> at the
   markup level retires the chase. Smaller font + secondary color
   marks these as supporting context, same visual register as the
   prior implementation. */

/* Lesson tile — 2026-05-06 hierarchy reflow: full-bleed 180px lead at
   the TOP of the gallery (was 2-wide bottom-right). DESIGN audit's
   recommendation, OWNER greenlit. The single off-pattern tile in the
   gallery. Differentiation is typographic + material, not promotional.
   No "FEATURED" badge. */
.ol-obs-tile--lesson {
  grid-column: 1 / -1;       /* span all 4 columns */
  min-height: 180px;
  padding: var(--space-7) var(--space-8) var(--space-6);   /* uplifted breathing room for lead-at-top */
  background: var(--bg-elevated);
  position: relative;
}

.ol-obs-tile--lesson .ol-obs-tile-title {
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-md);            /* +1px for lead position */
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

/* .ol-obs-tile-meta + .ol-obs-tile-time were dropped 2026-04-30 PM
   when OWNER asked to remove the per-tile time labels ("30 seconds",
   "two minutes", "11:45 AM ET"). Rules removed to keep the bundle
   clean — adding them back is trivial via the Python time_label
   field (still emitted by every generator) + a one-line template
   render. */

.ol-obs-tile-rule {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold-brand);
  margin: 0 0 var(--space-2-5);
}
/* C2 (2026-07-02 welcome redesign): lead-tile source as a small mono meta-line under
   the headline (replaces the inline "(PC Gamer)" parenthetical). :empty-hidden so an
   archive/empty source renders nothing. */
.ol-obs-tile-meta {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-data);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.ol-obs-tile-meta:empty { display: none; }

.ol-obs-tile--lesson .ol-obs-tile-body {
  font-size: var(--text-24);            /* +2px for lead position; reads as the page's primary editorial promise */
  line-height: 1.4;
  margin-bottom: 0;
  /* No first-line indent — the gold rule + italic title already
     signal "this is reading"; the indent was over-typesetting. */
}

/* "More inside" rail — 4 contextual tiles below the lead lesson at
   uniform reduced visual weight. DESIGN spec: Georgia 16px titles, no
   eyebrow, hairline border-top separator instead of full card chrome.
   Closer to a newspaper "More inside" rail than four equal tiles. */
.ol-obs-tile:not(.ol-obs-tile--lesson) {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: var(--space-4) var(--space-1) var(--space-3); /* 2026-06-23 vertical-space trim: 18/14 → 16/12 */
  min-height: 92px;       /* 2026-06-23 vertical-space trim: 120 → 92 (short rail tiles) */
}

.ol-obs-tile:not(.ol-obs-tile--lesson):hover {
  background: var(--bg-elevated);
  border-top-color: var(--gold-brand);
  transform: none;             /* the chrome is reduced; the hover lift is too noisy here */
}

.ol-obs-tile:not(.ol-obs-tile--lesson) .ol-obs-tile-title {
  font-family: var(--font-brand);
  font-size: var(--text-16);             /* DESIGN spec: Georgia 16px titles on the rail */
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;        /* drop the eyebrow uppercase styling */
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}
/* #125 (OWNER 2026-06-04): subtle "go here" arrow after each rail tile title
   (BDC universe, Today's headlines, Markets, …) — same affordance as the
   "pull a thread →" link. Gold seasoning at low opacity; brightens + nudges
   right on hover/focus. */
.ol-obs-tile:not(.ol-obs-tile--lesson) .ol-obs-tile-title::after {
  /* #144a (OWNER 2026-06-04): the leading space in `content` is trimmed
     because the pseudo-element is display:inline-block — use margin-left
     for the gap so the arrow doesn't butt against the title text. */
  content: "\2192";
  margin-left: 0.28em;
  color: var(--gold-brand, #c9a84c);
  opacity: 0.5;
  font-weight: 400;
  display: inline-block;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ol-obs-tile:not(.ol-obs-tile--lesson):hover .ol-obs-tile-title::after,
.ol-obs-tile:not(.ol-obs-tile--lesson):focus-visible .ol-obs-tile-title::after {
  opacity: 1;
  transform: translateX(2px);
}
/* OWNER 2026-06-09 (#133 f/u): the featured "Today's headlines" lead tile
   carries --lesson as its styling hook, so the :not(--lesson) arrow rule
   above skips it. Re-add the same gold arrow on the --lead-news variant so
   the lead tile reads as clickable like the rail tiles. */
.ol-obs-tile--lead-news .ol-obs-tile-title::after {
  content: "\2192";
  margin-left: 0.28em;
  color: var(--gold-brand, #c9a84c);
  opacity: 0.5;
  font-weight: 400;
  display: inline-block;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ol-obs-tile--lead-news:hover .ol-obs-tile-title::after,
.ol-obs-tile--lead-news:focus-visible .ol-obs-tile-title::after {
  opacity: 1;
  transform: translateX(2px);
}

/* #126 (OWNER 2026-06-04): anon lesson-deep-link register gate. Elegant,
   closeable panel shown when an anon visitor opens a gated lesson link. Theme-
   adaptive tokens (works on the SPA's dark or light theme); text styling scoped
   to the card so it doesn't depend on the global .ol-empty-* sheet. */

.ol-obs-tile:not(.ol-obs-tile--lesson) .ol-obs-tile-body {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Page-edge effect: 1px shadow on right edge suggests paper lying on
   a desk. Easy to miss; brand-true. */
.ol-obs-tile--lesson::after {
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.04);
  pointer-events: none;
}

/* A12 What's New panel (UX_audit_2026_05_10, Wave 6, Q5b ratified
   2026-05-10): distinct What's New card on the gallery page. Sits
   below the 4-up tile row + above the search section. Visually
   distinct from the surrounding tiles (subtle parchment-tinted
   background + quiet brand-blue accent rule) so returning users
   notice fresh-ship signal without the gallery's meditative voice
   getting overrun.

   :empty collapses the entire surrounding margin when no entries
   are present (services.whats_new returns '' on read failure or
   empty list — the welcome page must still render). */
.ol-obs-whats-new {
  margin: var(--space-8) 0 var(--space-6);
  padding: var(--space-4-5) var(--space-5-5) var(--space-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  /* C8 (welcome redesign 2026-07-01): gold accent (was --brand-blue); dropped the
     hardcoded #fafaf6/#d8d4c4 light fallbacks so the panel is dark-correct (tokens
     are always defined per-theme). */
  border-left: 3px solid var(--gold-brand);
  border-radius: 0;
}

.ol-obs-whats-new:empty {
  display: none;
  margin: 0;
  padding: 0;
  border: none;
}

.ol-obs-whats-new-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.ol-obs-whats-new-title {
  font-family: Georgia, serif;
  font-size: var(--text-18);
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  letter-spacing: 0.01em;
  margin: 0;
}

.ol-obs-whats-new-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-subtle);
}

.ol-obs-whats-new-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3-5) var(--space-6);
}

.ol-obs-whats-new-item { margin: 0; }

.ol-obs-whats-new-link {
  display: block;
  padding: var(--space-2) var(--space-1);
  text-decoration: none;
  color: var(--text-primary, #1a1a1a);
  border-radius: 0;
  transition: background 0.15s ease;
}

.ol-obs-whats-new-link:hover,
.ol-obs-whats-new-link:focus-visible {
  background: rgba(31, 58, 95, 0.04);
  text-decoration: none;
}

.ol-obs-whats-new-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-muted, #6b6b66);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.ol-obs-whats-new-tag {
  padding: 1px var(--space-2);
  background: rgba(31, 58, 95, 0.08);
  color: var(--brand-blue);
  border-radius: 0;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.ol-obs-whats-new-headline {
  display: block;
  font-family: Georgia, serif;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-1);
}

.ol-obs-whats-new-body {
  display: block;
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--text-secondary, #4a4a45);
}

/* Mobile: stack to a single column on narrow viewports. */
@media (max-width: 640px) {
  .ol-obs-whats-new {
    margin: var(--space-6) 0 var(--space-4-5);
    padding: var(--space-3-5) var(--space-4) var(--space-3);
  }
  .ol-obs-whats-new-list {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}


/* Autocomplete dropdown — sits beneath the search input, surfaces
   matching tickers / learning paths / features as the visitor types.
   Quiet treatment: same surface tone as gallery tiles, hairline
   border, italic kind-labels in lighter color. The user picks a
   real platform surface; the dropdown disappears once they land. */
.ol-obs-suggest {
  position: absolute;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  text-align: left;
  z-index: 50;
  overflow: hidden;
}

.ol-obs-suggest-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2-5) var(--space-3-5);
  text-decoration: none;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-brand);
  font-size: var(--text-md);
  line-height: 1.4;
  cursor: pointer;
  transition: background 120ms ease;
}
.ol-obs-suggest-row:last-child { border-bottom: 0; }
.ol-obs-suggest-row:hover,
.ol-obs-suggest-row.is-active {
  background: var(--bg-surface);
}
.ol-obs-suggest-kind {
  font-family: var(--font-data);
  font-size: var(--text-3xs);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  flex-shrink: 0;
  min-width: 50px;
}
.ol-obs-suggest-label {
  flex: 1;
  font-style: normal;
}


/* Mobile — single-column stack, lesson loses its 2-wide span.
   Below 720px the asymmetric desk-feel collapses naturally to a
   reading column, which is the right default for small screens. */
@media (max-width: 720px) {
  .ol-observatory { padding: 48px var(--space-5) 80px; }
  .ol-obs-date { font-size: var(--text-20); margin-bottom: var(--space-8); }
  /* Option A responsive (OWNER 2026-06-12): the masthead line wraps to
     2-3 lines on phones — tighter type, page-level side padding already
     applies (20px via .ol-observatory). The chrome CTAs keep their
     44px targets; the wordmark shrinks first (rule below, 14px). */
  .ol-obs-masthead-line { font-size: var(--text-base); line-height: 1.55; }
  .ol-obs-chrome-startfree { font-size: var(--text-base); }
  .ol-obs-chrome-signin { font-size: var(--text-base); }
  .ol-obs-gallery {
    grid-template-columns: 1fr;
    gap: var(--space-3-5);
    margin-bottom: 48px;
  }
  .ol-obs-tile { min-height: auto; padding: var(--space-5-5) var(--space-5); }
  .ol-obs-tile--lesson {
    grid-column: 1 / -1;       /* still full-width on mobile */
    min-height: 140px;
    padding: var(--space-5-5) var(--space-5) var(--space-4-5);
  }
  .ol-obs-tile--lesson .ol-obs-tile-body { font-size: var(--text-18); }
  /* "More inside" rail — single column on mobile, reduced padding. */
  .ol-obs-tile:not(.ol-obs-tile--lesson) {
    padding: var(--space-4) var(--space-2) var(--space-3);
    min-height: auto;
  }
}


/* Tablet portrait (721-1023px): keep the lesson lead full-width,
   collapse the 4-up rail to 2x2 so titles + bodies stay legible. */
@media (min-width: 721px) and (max-width: 1023px) {
  .ol-obs-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .ol-obs-tile--lesson {
    grid-column: 1 / -1;
  }
}