/* Mama Bloom — INNER PAGES (every page except home). Loads after css/mb-core.css.
   One rhythm for every page: header → a title band tinted for its time of day → the
   content on paper → the same night close and footer as home. The thread is the same
   vocabulary, calmer: a straight reading line in the margin, with a bead at each section. */

/* ------------------------------------------------------------------ page frame */
.page main { position: relative; display: block; }
.sheet {
  position: relative; overflow-x: clip; color: var(--fg); background: var(--bg, var(--sand));
  padding: clamp(40px, 6vw, 88px) 0 clamp(64px, 8vw, 120px);
}
.sheet::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--grain) repeat 0 0 / 256px 256px; }
.sheet--petal { --bg: var(--petal); }
.sheet--quiet { --bg: #f6eff1; }
.sheet + .sheet { padding-top: 0; }
.run-gap { margin-top: clamp(56px, 8vw, 110px); }

/* ------------------------------------------------------------------ THE TITLE-BAND RULE (one rule, every inner page, no exceptions)
   Every page opens the way home v2 does: at NIGHT, and turns to MORNING paper.
     1. band      night #1d1323 with gold grain; the header is dark over it.
     2. lines     always in this order, left column, same start position on every page:
                  breadcrumb ("Mama Bloom / <section>")  ->  eyebrow  ->  H1  ->  [summary]  ->  [meta]
     3. art slot  optional, right column (>= 900px) / after the copy (phones): the stage illustration,
                  the About mark, the press phone, the 404 numeral. It never changes the copy position.
     4. height    the band's copy block has one minimum height, so short titles don't make short bands.
     5. horizon   the same painted dawn (the home dune with its gold rim) dissolves into the paper.
     6. paper     sand-cream #f9f2ef, entered with one spacing (--into-paper) on every page.
   The only variant: QUIET pages (loss guides, After Loss, Pregnancy After Loss) use the softer dusk:
   plum-grey #2b2029, a painted-free gradient horizon (no gold), quiet paper #f6eff1, no App Store button.
   Why: the site's story is "a night into morning". Opening every page in the same night makes the
   header, the thread and the close read as one place, and the paper is always where the reading is. */
.band {
  position: relative; overflow: clip; color: var(--fg); background: var(--band-bg);
  --band-bg: #1d1323; --band-top: #1d1323; --paper: var(--sand);
  padding: calc(var(--nav-h) + clamp(36px, 6vw, 88px)) 0 0;
}
.band--quiet { --band-bg: #2b2029; --band-top: #2b2029; --paper: #f6eff1; }
.band::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--grain) repeat 0 0 / 256px 256px; }
.band .dust { z-index: 0; }
.band__inner { position: relative; z-index: 2; display: grid; gap: 28px; align-items: end; min-height: clamp(250px, 24vw, 340px); }
.band__copy { max-width: 46rem; align-self: start; }
.band__art { position: relative; justify-self: end; width: min(52vw, 230px); }
@media (min-width: 900px) {
  .band__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); column-gap: clamp(64px, 8vw, 120px); }
  .band__art { width: min(100%, 300px); align-self: end; }
}
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 22px; margin-bottom: 18px; color: var(--fg-2); font-size: .84rem; }
.crumbs a { color: var(--fg-2); text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.band .eyebrow, .band .issue-line, .band .section-eyebrow { margin: 0 0 16px; }
.band__title, .band h1 { max-width: 20ch; margin: 0; font: 400 clamp(2.05rem, 1.15rem + 3.3vw, 4.3rem)/1.03 var(--display); letter-spacing: -.025em; text-wrap: balance; color: var(--fg); }
.band__title em, .band h1 em { font-family: var(--serif); font-style: italic; font-weight: 320; letter-spacing: -.02em; }
.band__summary, .band .lede { margin-top: clamp(16px, 2vw, 22px); max-width: 52ch; color: var(--fg-2); font-size: clamp(1.02rem, .95rem + .32vw, 1.2rem); line-height: 1.6; text-wrap: pretty; }
.band__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: clamp(18px, 2.4vw, 24px); color: var(--fg-2); font-size: .84rem; }
.band__meta strong { color: var(--fg); font-weight: 600; }
.band__meta > span { display: inline-block; }
.band__meta > span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 9px 2px 0; border-radius: 50%; background: var(--gold); vertical-align: middle; }
.band__horizon { position: relative; z-index: 1; height: clamp(140px, 20vw, 300px); margin-top: clamp(24px, 4vw, 48px); overflow: hidden; }
.band__horizon img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.band__horizon::before, .band__horizon::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.band__horizon::before { top: 0; height: 40%; background: linear-gradient(var(--band-top), transparent); }
.band__horizon::after { bottom: 0; height: 60%; background: linear-gradient(transparent, rgba(249, 242, 239, .6) 45%, var(--paper)); }
/* Quiet: the same shape, no painting and no gold: plum-grey dusk that melts into the quiet paper. */
.band__horizon--quiet { background: linear-gradient(var(--band-top) 0%, #3a2c37 22%, #6c5663 48%, #b7a1ab 72%, #e7dce1 88%, var(--paper) 100%); }
.band__horizon--quiet::before, .band__horizon--quiet::after { display: none; }
.sheet { --into-paper: clamp(40px, 6vw, 88px); padding-top: var(--into-paper) !important; }

/* ------------------------------------------------------------------ "a letter on paper": the reading surface */
.reading { display: grid; gap: 28px; }
.reading__rail { font-size: .9rem; }
.review { padding: 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--divider); color: var(--ink-2); }
.review p { margin-bottom: 8px; color: var(--eyebrow); font: 600 .68rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.review strong { display: block; color: var(--ink); font: 400 .98rem/1.45 var(--serif); }
.review span { display: block; margin-top: 10px; font-size: .8rem; }
.toc { margin-top: 22px; }
.toc summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none;
  color: var(--eyebrow); font: 600 .68rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; width: 11px; height: 11px; transition: transform .4s var(--ease);
  background: linear-gradient(var(--gold), var(--gold)) center / 100% 1.5px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 1.5px 100% no-repeat; }
.toc details[open] summary::after { transform: rotate(45deg); }
@media (max-width: 1023.98px) {
  .toc { margin-top: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .toc ol { padding-bottom: 12px; }
  .review { padding: 12px 14px; border-radius: 14px; }
  .review strong { font-size: .9rem; }
  .review span { margin-top: 6px; }
}
@media (min-width: 1024px) { .toc summary { min-height: 0; margin-bottom: 10px; pointer-events: none; } .toc summary::after { display: none; } }
.toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px; padding: 8px 0 8px 2px;
  color: var(--ink-2); text-decoration: none; line-height: 1.4; transition: color .3s;
}
.toc a::before { content: counter(toc, decimal-leading-zero); color: var(--numeral); font: 400 .82rem/1.6 var(--serif); }
.toc--self-numbered a { grid-template-columns: minmax(0, 1fr); }
.toc--self-numbered a::before { content: none; }
.toc a:hover, .toc a[aria-current="location"] { color: var(--ink); }
.toc a[aria-current="location"]::after { content: ""; position: absolute; left: -12px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--gold); }

.prose { max-width: 38em; color: var(--ink); font: 400 clamp(1.06rem, 1rem + .28vw, 1.19rem)/1.72 var(--serif); font-optical-sizing: auto; text-wrap: pretty; hyphens: manual; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.prose h2 { margin: 2em 0 .65em; font: 400 clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem)/1.14 var(--display); letter-spacing: -.015em; color: var(--ink); scroll-margin-top: calc(var(--nav-h) + 24px); text-wrap: balance; }
.prose h3 { margin: 1.6em 0 .5em; font: 500 1.14em/1.3 var(--serif); }
.prose a { color: var(--rose); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.15em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--rose); }
.prose strong { font-weight: 600; }
/* Drop cap, as the app's journal does: the first letter of the first paragraph. */
.prose--dropcap > p:first-child::first-letter {
  float: left; margin: .08em .1em 0 -.02em; color: var(--rose); font: 400 3.9em/.78 var(--display);
}
[data-tone="quiet"] .prose--dropcap > p:first-child::first-letter { color: var(--ink-2); }

.help { margin-top: clamp(36px, 5vw, 56px); padding: 22px 24px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--divider); }
.help h2 { margin-bottom: 8px; color: var(--eyebrow); font: 600 .7rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.help p { color: var(--ink-2); font-size: .98rem; line-height: 1.6; }
.help p + p { margin-top: 12px; }
.help .guide-scope__urgent { padding-left: 14px; border-left: 3px solid #c0392b; color: var(--ink); font-weight: 500; }

.sources { margin-top: clamp(36px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--line); }
.sources .guide-section-label, .related .guide-section-label { color: var(--eyebrow); font: 600 .68rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.sources h2 { margin: 8px 0 8px; font: 400 clamp(1.2rem, 1.05rem + .5vw, 1.45rem)/1.25 var(--serif); }
.sources > p { color: var(--ink-2); font-size: .9rem; }
.sources ol { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: src; }
.sources li { counter-increment: src; display: grid; grid-template-columns: 28px minmax(0, 1fr); font-size: .95rem; }
.sources li::before { content: counter(src, decimal-leading-zero); color: var(--numeral); font: 400 .85rem/1.6 var(--serif); }
.sources a { color: var(--rose); text-underline-offset: 3px; }

.related { margin-top: clamp(56px, 8vw, 100px); }
.guide-related__head h2 { margin: 8px 0 6px; font: 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1.08 var(--display); letter-spacing: -.02em; }
.guide-related__head p { color: var(--ink-2); }
.related ol { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.related ol a {
  position: relative; display: grid; gap: 6px; height: 100%; padding: 20px 44px 20px 20px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--divider); color: var(--ink); text-decoration: none; transition: border-color .3s, transform .5s var(--ease);
}
.related ol a span { color: var(--eyebrow); font: 600 .66rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.related ol a strong { font: 400 1.08rem/1.3 var(--serif); }
.related ol a i { position: absolute; right: 18px; top: 18px; color: var(--gold-text); font-style: normal; transition: transform .35s var(--ease); }
.related ol a:hover { border-color: var(--gold); transform: translateY(-2px); }
.related ol a:hover i { transform: translate(2px, -2px); }
@media (min-width: 768px) { .related ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (min-width: 1024px) {
  .reading { grid-template-columns: minmax(200px, 250px) minmax(0, 38em); column-gap: clamp(88px, 9vw, 140px); justify-content: start; }
  .reading__rail { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
  .reading--wide { grid-template-columns: minmax(200px, 250px) minmax(0, 46rem); }
}

/* ------------------------------------------------------------------ B · guide hub: an editorial index */
.hub-facts { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: clamp(22px, 3vw, 32px) 0 0; }
.hub-facts div { display: flex; align-items: baseline; gap: 10px; }
.hub-facts dt { font: 400 clamp(1.6rem, 1.3rem + 1vw, 2.2rem)/1 var(--display); color: var(--gold-night); }
.hub-facts dd { margin: 0; color: var(--fg-2); font-size: .9rem; }
.hub-intro { display: grid; gap: 14px; max-width: 62rem; }
.hub-intro h2, .shelf__head h2 { font: 400 clamp(1.7rem, 1.2rem + 1.7vw, 2.7rem)/1.05 var(--display); letter-spacing: -.02em; }
.hub-intro > p, .shelf__head p:not(.guide-section-label) { color: var(--ink-2); max-width: 52ch; }
.guide-section-label { color: var(--eyebrow); font: 600 .68rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
@media (min-width: 900px) { .hub-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: end; } }
.shelf { margin-top: clamp(56px, 8vw, 104px); }
.shelf__head { display: grid; gap: 8px; margin-bottom: 18px; }
.shelf ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.shelf li { border-bottom: 1px solid var(--line); }
.shelf li > a {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; padding: 18px 34px 18px 0;
  color: var(--ink); text-decoration: none;
}
.guide-index__number { padding-top: 3px; color: var(--numeral); font: 400 .92rem/1.4 var(--serif); }
.guide-index__copy { display: grid; gap: 6px; }
.guide-index__copy strong { font: 400 clamp(1.08rem, 1rem + .35vw, 1.28rem)/1.3 var(--serif); transition: color .3s; }
.guide-index__copy small { color: var(--ink-2); font-size: .92rem; line-height: 1.5; }
.guide-index__time { grid-column: 2; margin-top: 8px; color: var(--ink-2); font-size: .8rem; }
.shelf li > a i { position: absolute; right: 4px; top: 20px; color: var(--gold-text); font-style: normal; transition: transform .35s var(--ease); }
.shelf li > a:hover strong { color: var(--rose); }
.shelf li > a:hover i { transform: translate(2px, -2px); }
@media (min-width: 1024px) {
  .shelf { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); column-gap: clamp(96px, 9vw, 140px); }
  .shelf__head { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
  .shelf li > a { grid-template-columns: 48px minmax(0, 1fr); padding: 22px 40px 22px 0; }
}
/* Loss & what follows: softer dusk, no gold, more air. */
.shelf--quiet { position: relative; padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px); border-radius: 28px; background: #f3e9ec; }
.shelf--quiet .guide-index__number, .shelf--quiet li > a i { color: var(--ink-2); }
.shelf--quiet ol, .shelf--quiet li { border-color: rgba(30, 13, 23, .1); }

/* ------------------------------------------------------------------ C · comparison: presentation only, the copy is frozen */
.cmp-col { max-width: 46rem; }
.cmp-col h2, .cmp-table h2 { margin: 0 0 14px; font: 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1.08 var(--display); letter-spacing: -.02em; }
.cmp-col h3 { margin: 1.4em 0 .4em; font: 500 1.12rem/1.3 var(--serif); }
.cmp-col p, .cmp-col li { color: var(--ink); font-size: 1.02rem; line-height: 1.65; }
.cmp-col ul { margin: 14px 0 0; padding-left: 1.1em; }
.cmp-col li { margin-bottom: 8px; }
.cmp-col li::marker { color: var(--rose); }
.cmp-col a { color: var(--rose); }
.cmp-col + .cmp-col, .cmp-block + .cmp-block { margin-top: clamp(40px, 5vw, 64px); }
.compare-sources { padding-top: 24px; border-top: 1px solid var(--line); font-size: .92rem; }
.compare-sources p, .compare-sources li { font-size: .92rem !important; }
.compare-trademark { color: var(--ink-2) !important; font-size: .86rem !important; }
.cmp-table { margin-top: clamp(40px, 6vw, 80px); }
.compare-key { margin-bottom: 18px; color: var(--ink-2); font-size: .92rem; }
.compare-legend, .compare-note { max-width: 70ch; margin-top: 14px; color: var(--ink-2); font-size: .88rem; line-height: 1.6; }
.compare-scroll { overflow-x: auto; border-radius: 22px; border: 1px solid var(--divider); background: var(--card); overscroll-behavior-x: contain; }
.compare-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .95rem; }
.compare-table th, .compare-table td { padding: 12px 14px; border-bottom: 1px solid rgba(237, 213, 220, .9); text-align: center; vertical-align: middle; }
.compare-table thead th { position: sticky; top: 0; padding: 18px 14px 14px; background: var(--card); font: 400 1.02rem/1.2 var(--serif); }
.compare-table thead th.is-self { min-width: 120px; color: var(--rose); font-family: var(--display); font-size: 1.2rem; }
.compare-table tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; min-width: 200px; background: var(--card); text-align: left; font-weight: 500; }
.compare-table td.is-self { background: rgba(255, 240, 243, .9); }
.compare-group th { padding-top: 22px; background: var(--card) !important; text-align: left !important; }
.compare-group th span { color: var(--eyebrow); font: 600 .68rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.compare-mark { color: var(--gold-text); font-size: 1.05rem; font-weight: 600; }
.compare-mark--none { color: var(--ink-2); font-weight: 400; }
.compare-text { font-size: .88rem; line-height: 1.45; }
.cmp-app { display: none; }
/* Phones: every row becomes a small card; the app names repeat on each cell (hidden from
   assistive tech, which keeps the table's own header association through the ARIA roles). */
@media (max-width: 719.98px) {
  .compare-scroll { overflow: visible; border: 0; background: none; border-radius: 0; }
  .compare-table { min-width: 0; font-size: .9rem; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 12px; overflow: hidden; border-radius: 16px; border: 1px solid var(--divider); background: var(--divider); }
  .compare-table tbody tr.compare-group { display: block; margin: 26px 0 10px; border: 0; background: none; }
  .compare-table tbody tr.is-text { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare-table tbody th[scope="row"] { position: static; grid-column: 1 / -1; min-width: 0; padding: 12px 14px; border: 0; background: var(--card); font: 500 1rem/1.3 var(--serif); }
  .compare-table td { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 12px 11px; border: 0; background: #fffafb; text-align: left; }
  .compare-table td.is-self { background: #fff0f3; }
  .cmp-app { display: block; max-width: 100%; color: var(--ink-2); font: 600 .6rem/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; hyphens: auto; }
  .compare-table td.is-self .cmp-app { color: var(--rose); }
  .compare-group th { padding: 0 !important; border: 0; background: none !important; }
}

/* ------------------------------------------------------------------ D · press kit */
.page--press .band__inner { display: grid; gap: 32px; }
.issue-line { color: var(--eyebrow); font: 600 .72rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 18px; }
.press-index { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 26px; }
.press-index a { display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--fg); text-decoration: none; }
.press-index a span { color: var(--numeral); font: 400 .85rem/1 var(--serif); }
.press-index a b { font-weight: 500; }
.press-index a:hover { border-color: var(--gold); }
.press-hero__folio { position: relative; justify-self: center; width: min(52vw, 250px); margin-right: 40px; }
.press-hero__stamp { position: absolute; right: -34%; top: -6%; z-index: 2; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-night); font: 400 1.2rem/1 var(--display); text-align: center; }
.press-hero__stamp span { display: block; font: 600 .56rem/1 var(--sans); letter-spacing: .2em; }
/* Phones: the stamp sits in the flow above the phone, clear of the thread's gutter. */
@media (max-width: 899.98px) { .press-hero__folio { margin-right: 0; } .press-hero__stamp { position: static; width: 64px; height: 64px; margin: 0 auto 14px; font-size: 1rem; } }
/* One rhythm between sections of a long inner page. */
.press-flow > [data-run] + [data-run], .contact-flow > [data-run] + [data-run] { margin-top: clamp(64px, 9vw, 120px); }
.press-hero__folio figcaption { margin-top: 18px; color: var(--fg-2); font-size: .85rem; }
.press-hero__folio figcaption strong { display: block; color: var(--fg); font: 400 1.05rem/1.3 var(--serif); }
@media (min-width: 900px) { .page--press .band__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); column-gap: clamp(64px, 8vw, 120px); align-items: center; } }

.press-signal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: 22px; border: 1px solid var(--divider); background: var(--divider); }
.press-signal__cell { display: grid; gap: 6px; padding: 18px 20px; background: var(--card); color: var(--ink); text-decoration: none; }
.press-signal__cell span { color: var(--eyebrow); font: 600 .66rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.press-signal__cell strong { font: 400 1.08rem/1.3 var(--serif); overflow-wrap: anywhere; }
.press-signal__cell i { font-style: normal; color: var(--gold-text); }
@media (min-width: 900px) { .press-signal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.press-sec h2 { margin: 0 0 12px; font: 400 clamp(1.7rem, 1.2rem + 1.7vw, 2.7rem)/1.05 var(--display); letter-spacing: -.02em; }
.press-sec h2 em, .contact-sec h2 em { font-family: var(--serif); font-style: italic; font-weight: 380; }
.section-eyebrow { color: var(--eyebrow); font: 600 .7rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 14px; }
.section-intro, .press-section-note { max-width: 60ch; color: var(--ink-2); line-height: 1.6; }
.fact-grid-v2 { display: grid; gap: 1px; margin: 28px 0 0; overflow: hidden; border-radius: 22px; border: 1px solid var(--divider); background: var(--divider); }
.fact-grid-v2 .fact { display: grid; gap: 6px; padding: 18px 20px; background: var(--card); }
.fact-grid-v2 dt { color: var(--eyebrow); font: 600 .66rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.fact-grid-v2 dd { margin: 0; color: var(--ink); font-size: .98rem; line-height: 1.55; }
.fact-grid-v2 a { color: var(--rose); }
@media (min-width: 900px) { .fact-grid-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fact-grid-v2 .fact:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.press-media-grid, .assets-grid { display: grid; gap: 20px; margin-top: 28px; }
.press-media-card, .asset-card { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--divider); }
.press-media-card__image { position: relative; display: block; justify-self: center; width: min(100%, 220px); }
.press-media-card__image span { position: absolute; right: -6px; bottom: 10%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cta); color: #fff; }
.press-media-card p, .asset-card p { color: var(--ink-2); font-size: .82rem; }
.press-media-card h3, .asset-card h3 { font: 400 1.08rem/1.3 var(--serif); }
.download-link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--rose); font-weight: 600; font-size: .92rem; text-underline-offset: 4px; }
.asset-preview { display: grid; place-items: center; padding: 24px; border-radius: 14px; }
.asset-preview img { max-height: 180px; width: auto; }
.asset-preview.on-cream { background: var(--sand); }
.asset-preview.on-plum { background: var(--noir); }
.brand-guidance { max-width: 62ch; margin-top: 14px; padding: 16px 18px; border-left: 3px solid var(--gold); background: var(--card); border-radius: 0 14px 14px 0; color: var(--ink); }
.brand-rules { margin-top: 20px; }
@media (min-width: 900px) { .press-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .assets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.founder-card { display: grid; gap: 24px; margin-top: 18px; padding: clamp(22px, 3vw, 36px); border-radius: 22px; background: var(--card); border: 1px solid var(--divider); }
.founder-folio { display: grid; place-content: center; width: 120px; height: 150px; border-radius: 999px 999px 16px 16px; background: var(--noir); color: var(--gold-night); text-align: center; font: 400 2rem/1 var(--display); }
.founder-folio small { margin-top: 10px; color: var(--on-dark-2); font: 600 .56rem/1.4 var(--sans); letter-spacing: .2em; }
.founder-eyebrow { color: var(--eyebrow); font: 600 .66rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.founder-card h3 { margin: 8px 0 12px; font: 400 1.9rem/1.1 var(--display); }
.founder-card p { max-width: 62ch; margin-bottom: 12px; line-height: 1.65; }
.muted { color: var(--ink-2); }
@media (min-width: 900px) { .founder-card { grid-template-columns: 140px minmax(0, 1fr); } }
.palette-grid-v2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.palette-swatch-v2 { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--divider); }
.palette-swatch-v2 .chip { grid-row: span 2; width: 44px; height: 44px; border-radius: 10px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(30, 13, 23, .12); }
.palette-swatch-v2 .name { font-weight: 600; font-size: .9rem; }
.palette-swatch-v2 .hex { color: var(--ink-2); font-size: .8rem; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .palette-grid-v2 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.type-grid-v2 { display: grid; gap: 20px; margin-top: 24px; }
.type-sample-v2 { display: grid; gap: 12px; padding: 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--divider); }
.type-sample-v2 .kicker { color: var(--eyebrow); font: 600 .66rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.type-sample-v2 .display { font: 400 clamp(2.6rem, 2rem + 2vw, 3.8rem)/1 var(--display); }
.type-sample-v2 .body { font: 400 1.15rem/1.55 Georgia, serif; }
.type-sample-v2 .muted { font-size: .86rem; line-height: 1.55; }
@media (min-width: 900px) { .type-grid-v2 { grid-template-columns: 1fr 1fr; } }
.interior-quote { text-align: center; }
.interior-quote .section-eyebrow { text-align: center; }
.interior-quote blockquote { margin: 0; font: 400 clamp(2.2rem, 1.5rem + 3vw, 4.2rem)/1.05 var(--display); letter-spacing: -.02em; }
.interior-quote cite { display: block; margin-top: 14px; color: var(--ink-2); font-style: normal; font-size: .88rem; }
.mail-link { display: inline-block; margin-top: 10px; color: var(--rose); font: 400 clamp(1.3rem, 1.1rem + 1vw, 2rem)/1.2 var(--serif); overflow-wrap: anywhere; text-underline-offset: 6px; }
.social-row { margin-top: 18px; color: var(--ink-2); }
.social-row a { color: var(--ink); }

/* ------------------------------------------------------------------ E · contact: three calm help tiles, then every door */
.contact-sec .section-eyebrow, .contact-sec h2, .contact-sec > .meta { text-align: left; }
.contact-sec h2 { margin: 0 0 10px; font: 400 clamp(1.7rem, 1.2rem + 1.7vw, 2.7rem)/1.05 var(--display); letter-spacing: -.02em; }
.contact-sec .meta { max-width: 60ch; color: var(--ink-2); }
.contact-directory { display: grid; gap: 16px; margin-top: 26px; }
.contact-tile { display: grid; gap: 10px; align-content: start; padding: 22px 22px 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--divider); }
.contact-tile .tile-eyebrow { color: var(--eyebrow); font: 600 .66rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.contact-tile h2 { margin: 0; font: 400 1.3rem/1.25 var(--serif) !important; letter-spacing: 0 !important; }
.contact-tile p { color: var(--ink-2); font-size: .96rem; line-height: 1.6; }
.contact-tile .tile-meta { font-size: .84rem; }
.contact-tile a { color: var(--rose); }
.tile-link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font: 400 1.1rem/1.2 var(--serif); overflow-wrap: anywhere; text-underline-offset: 5px; }
.contact-sec--help .contact-tile { background: #fffdfd; border-color: rgba(155, 78, 106, .22); }
@media (min-width: 900px) { .contact-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.postal-block { margin-top: 16px; font: 400 1.2rem/1.5 var(--serif); }
.contact-sec .meta a, .postal a { color: var(--rose); }

/* ------------------------------------------------------------------ F · legal: chrome and typography only */
.legal-doc { max-width: 44rem; color: var(--ink); font-size: 1.02rem; line-height: 1.72; }
.legal-doc h2 { position: relative; margin: 2.2em 0 .6em; font: 400 clamp(1.35rem, 1.15rem + .8vw, 1.8rem)/1.2 var(--serif); letter-spacing: -.01em; scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal-doc h3 { margin: 1.6em 0 .4em; font: 600 1.05rem/1.35 var(--sans); scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal-doc p, .legal-doc ul, .legal-doc ol, .legal-doc address { margin: 0 0 1em; }
.legal-doc address { font-style: normal; }
.legal-doc ul, .legal-doc ol { padding-left: 1.2em; }
.legal-doc li { margin-bottom: .4em; }
.legal-doc li::marker { color: var(--rose); }
.legal-doc a { color: var(--rose); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-doc table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .92rem; }
.legal-doc th, .legal-doc td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-doc hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.legal-doc .meta { color: var(--ink-2); font-size: .9rem; }
.authoritative-note { margin: 0 0 14px; padding: 14px 16px; border-radius: 0 14px 14px 0; border-left: 3px solid var(--rose); background: var(--card); font-size: .95rem; line-height: 1.6; }
.anchor-link { margin-left: .35em; color: var(--gold-text); font: 400 .8em/1 var(--sans); text-decoration: none; opacity: .55; transition: opacity .3s; }
.legal-doc h2:hover .anchor-link, .anchor-link:focus-visible { opacity: 1; }
.legal-lang + .legal-lang { margin-top: 3em; padding-top: 2em; border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .legal-grid--toc { display: grid; grid-template-columns: minmax(210px, 250px) minmax(0, 44rem); column-gap: clamp(88px, 9vw, 140px); } }
.legal-grid--toc .reading__rail { margin-bottom: 28px; }
.legal-grid--toc .toc { margin-top: 0; }
@media (min-width: 1024px) { .legal-grid--toc .reading__rail { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; max-height: calc(var(--vh) * 100 - var(--nav-h) - 64px); overflow: auto; margin-bottom: 0; } }

/* ------------------------------------------------------------------ G · 404: the same band; the numeral lives in the art slot */
.art-numeral { justify-self: end; font: 400 clamp(5rem, 3rem + 10vw, 11rem)/.85 var(--display); letter-spacing: -.04em;
  background: linear-gradient(180deg, #d9b86b, #b86185); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound-body { display: grid; justify-items: start; gap: 22px; }
.notfound-body .not-found-routes { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; }
.notfound-body .not-found-routes a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; font-size: .9rem; }
.notfound-body .not-found-routes a:hover { border-color: var(--gold); }
.notfound-body .still { color: var(--ink-2); }

/* ------------------------------------------------------------------ H · about + stage pages */
.arch { display: block; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 999px 999px 22px 22px; box-shadow: 0 40px 70px -46px rgba(0, 0, 0, .6); }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.arch--mark { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #fff8f9, var(--petal)); }
.arch--mark img { width: 64%; height: auto; object-fit: contain; }
.stage-sec h2 { margin: 0 0 16px; font: 400 clamp(1.55rem, 1.15rem + 1.3vw, 2.3rem)/1.1 var(--display); letter-spacing: -.02em; }
.stage-sec p { max-width: 62ch; color: var(--ink); font: 400 clamp(1.04rem, 1rem + .2vw, 1.14rem)/1.7 var(--serif); }
.stage-sec p + p { margin-top: 1em; }
.stage-sec a { color: var(--rose); text-underline-offset: 3px; }
.stage-sec + .stage-sec { margin-top: clamp(48px, 7vw, 88px); }
.feature-list { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.feature-list li { padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--divider); color: var(--ink-2); line-height: 1.6; }
.feature-list li strong { color: var(--ink); font: 500 1.05em/1.35 var(--serif); }
.link-list { display: grid; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
.link-list a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 400 1.08rem/1.3 var(--serif); }
.link-list a::after { content: "↗"; color: var(--gold-text); font-family: var(--sans); font-size: .9em; }
.stage-note { max-width: 62ch; margin-top: clamp(40px, 6vw, 72px); padding: 16px 18px; border-left: 3px solid var(--gold); background: var(--card); border-radius: 0 14px 14px 0; color: var(--ink-2); font-size: .95rem; line-height: 1.6; }
@media (min-width: 1024px) { .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feature-list + p, .link-list + p { margin-top: 22px; }

/* ------------------------------------------------------------------ the close on inner pages */
.close--quiet { --bg: #2b2029; }
.close--quiet .close__title { max-width: 18ch; font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); }
.close .close__body a { color: var(--fg); }

/* ------------------------------------------------------------------ CONSISTENCY LAYER (one set of rules for every page type)
   Headings, eyebrows, body text, measure, links and the thread are defined once here and win over
   the per-type blocks above. Home uses the same values through mb-core.css (.title, .eyebrow). */
.page { --measure: 40rem; --h2: 400 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1.08 var(--display); --h3: 500 1.14rem/1.3 var(--serif); }
/* H2 inside the paper: one scale, one face, on every page type. */
.sheet h2:not(.band__title), .sheet .prose h2, .sheet .legal-doc h2, .sheet .guide-related__head h2, .sheet .hub-intro h2,
.sheet .shelf__head h2, .sheet .cmp-col h2, .sheet .cmp-table h2, .sheet .press-sec h2, .sheet .contact-sec h2, .sheet .stage-sec h2 {
  margin: 0 0 16px; font: var(--h2) !important; letter-spacing: -.02em !important; color: var(--ink); text-wrap: balance; scroll-margin-top: calc(var(--nav-h) + 24px);
}
.sheet .prose h2, .sheet .legal-doc h2 { margin-top: 1.9em; }
.sheet h3, .sheet .contact-tile h2 { font: var(--h3) !important; letter-spacing: 0 !important; }
.sheet .contact-tile h2 { margin: 0; }
.sheet .help h2, .sheet .sources h2 { font: 600 .7rem/1.3 var(--sans) !important; letter-spacing: .2em !important; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 8px; }
.sheet .sources h2 { font: var(--h3) !important; letter-spacing: 0 !important; text-transform: none; color: var(--ink); }
/* Eyebrows: one style everywhere (the core .eyebrow). */
.section-eyebrow, .guide-section-label, .stage__kicker, .tile-eyebrow, .boundary__tag, .review p, .toc summary, .founder-eyebrow, .issue-line,
.type-sample-v2 .kicker, .press-signal__cell span, .fact-grid-v2 dt, .room__cap small {
  color: var(--eyebrow) !important; font: 600 .7rem/1.3 var(--sans) !important; letter-spacing: .2em !important; text-transform: uppercase;
}
/* Body text: the letter voice (serif) at one size and one measure, on every page type. */
.prose, .legal-doc, .stage-sec, .cmp-col, .hub-intro, .press-sec > p, .contact-sec > p.meta, .help, .sources, .notfound-body { max-width: var(--measure); }
.prose, .legal-doc, .stage-sec p, .cmp-col p, .cmp-col li, .press-sec .section-intro, .press-section-note, .hub-intro > p, .shelf__head p:not(.guide-section-label),
.contact-sec > .meta, .founder-card p, .notfound-body p {
  font-family: var(--serif) !important; font-size: clamp(1.04rem, 1rem + .22vw, 1.15rem) !important; line-height: 1.7 !important; color: var(--ink);
}
.shelf__head p:not(.guide-section-label), .hub-intro > p, .contact-sec > .meta, .press-section-note, .press-sec .section-intro { color: var(--ink-2); }
/* Links in running text: rose, one underline. */
.prose a, .legal-doc a, .stage-sec a, .cmp-col a, .sources a, .help a, .contact-tile a, .press-sec p a, .notfound-body p a, .privacy__note a {
  color: var(--rose); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
/* One content rhythm inside the paper. */
.sheet [data-run] + [data-run] { margin-top: clamp(64px, 9vw, 120px) !important; }
.sheet > .wrap > [data-run]:first-child, .sheet > .wrap:first-child > :first-child { margin-top: 0 !important; }
.legal-doc > .legal-lang > :first-child, .legal-doc > .legal-lang > .authoritative-note:first-child { margin-top: 0; }
/* German: Grandeur has no umlaut dots, so German display type is Fraunces (as live). */
html[lang|="de"] .page, html[lang|="de"] { --display: "Fraunces", Georgia, serif; }

/* ------------------------------------------------------------------ the thread on every inner page: the margin line, with beads */
.page [data-run] { --amp: 0; --lane: left; }
.page [data-lane-key="close"] { --lane: end; }
.sheet h2[data-bead] { --bead: 1; }

/* ------------------------------------------------------------------ THE FLOW: every page travels along its own hour
   The paper is two opacity-only colour layers (compositor-friendly) driven by the paper's own view
   timeline: layer A (the next hour) rises through the first half, layer B (the hour after) settles in
   the second. The close then lands in the same calm night as home. Every tint keeps AA for all paper
   text (tightest: rose #9b4e6a at 4.69:1 on the quiet 'deep calm' tint). Reduced motion: plain paper. */
.sheet { view-timeline: --paper block; }
.sheet::before { z-index: 1; }
.sheet__sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sheet__sky i { position: absolute; inset: 0; opacity: 0; background: var(--arc-a); }
.sheet__sky i + i { background: var(--arc-b); }
.arc--guide  { --arc-a: #fcf1e7; --arc-b: #f7e9e8; }   /* dawn -> morning -> soft evening */
.arc--quiet  { --arc-a: #f3ebef; --arc-b: #efe7ec; }   /* dusk -> deep calm, nothing bright */
.arc--ttc    { --arc-a: #fcf1e7; --arc-b: #fbf0df; }   /* first light -> morning gold */
.arc--preg   { --arc-a: #fdf4ef; --arc-b: #fcefef; }   /* morning -> noon petal */
.arc--pp     { --arc-a: #f7eeec; --arc-b: #f5ecec; }   /* 3 a.m. -> first light */
.arc--em     { --arc-a: #fcf3ea; --arc-b: #faefe3; }   /* day -> afternoon */
.arc--peri   { --arc-a: #f8ecec; --arc-b: #f4e8ea; }   /* evening -> dusk */
.arc--about  { --arc-a: #fcf1e7; --arc-b: #fdf6f1; }   /* morning -> day */
.sheet__sky i { animation: arc-a 1000ms linear both paused; }
.sheet__sky i + i { animation-name: arc-b; }
@supports (animation-timeline: view()) {
  .motion .sheet__sky i { animation-duration: auto; animation-play-state: running; animation-timeline: --paper; animation-range: contain 0% contain 100%; }
}
@keyframes arc-a { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arc-b { 0%, 45% { opacity: 0; } 100% { opacity: 1; } }
.reduce .sheet__sky { display: none; }

/* Onward: the close leads her to the next chapter, as home's chapters do (existing titles only). */
.onward { display: grid; gap: 6px; justify-items: center; margin: clamp(26px, 3vw, 36px) 0 0; padding: 0; list-style: none; }
.onward a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--fg); font: 400 1.04rem/1.3 var(--serif); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 6px; }
.onward a:hover { text-decoration-color: var(--gold); }
.onward a span { color: var(--gold-night); text-decoration: none; }