/* The opening uses the landing's original scene, assets and home.css geometry. */
.spirit-reading { min-height: 100svh; background: transparent; color: #eeeee8; }
.spirit-reading .world-layout::before { display: none; }
.spirit-reading .skip { background: #eeeff0; color: #17191b; }
.spirit-reading .chapter { display: block; width: 100%; margin: 0; padding: 0; min-height: 0; }
.spirit-reading .chapter-title, .spirit-reading .document-opening .hero-copy { grid-column: 1; grid-row: 1; position: relative; align-self: center; top: 0; display: block; height: auto; margin: 0; color: #101112; pointer-events: auto; }
.spirit-reading .chapter-title .eyebrow, .spirit-reading .document-opening .kicker { color: #303030; margin: 0 0 22px; font-size: 12px; }
.spirit-reading .chapter-title h1, .spirit-reading .document-opening h1 { max-width: 11ch; margin: 0; color: #101112; font-size: clamp(34px, 3.8vw, 58px); font-weight: 300; line-height: 1.12; letter-spacing: -.035em; overflow-wrap: anywhere; }
.spirit-reading .document-opening h1 em { font: inherit; }
.spirit-reading .hero-signup .method-lead, .spirit-reading .hero-signup .lede { max-width: none; margin: 0; color: #eeeee8; font: 300 clamp(17px, 1.32vw, 20px)/1.7 var(--read); }
.spirit-reading .hero-signup .upd { color: #c4c8c4; font: 400 14px/1.7 var(--read); }
.spirit-reading .chapter-body { grid-column: auto; align-self: auto; margin: 0; padding: 72px var(--edge) 88px; background: var(--silver-surface); color: var(--silver-ink); border-top: 1px solid var(--silver-line); scroll-margin-top: 24px; }
.spirit-reading .chapter-body > * { width: min(100%, 760px); max-width: 760px; margin-inline: auto; }
.spirit-reading .chapter-section { padding-top: 22px; border-top: 1px solid var(--silver-line); }
.spirit-reading .chapter-section + .chapter-section { margin-top: 48px; }
.spirit-reading .section-step { display: block; margin-bottom: 20px; color: var(--silver-muted); font: 12px/1.4 var(--body); letter-spacing: .12em; }
.spirit-reading .chapter-section h2 { margin-bottom: 20px; color: var(--silver-ink); font: 400 clamp(24px, 2.2vw, 30px)/1.2 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.spirit-reading .chapter-body .story p { margin: 0 0 18px; color: var(--silver-copy); font-size: 17px; font-weight: 400; line-height: 1.8; }
.spirit-reading .chapter-body .story p:last-child { margin-bottom: 0; }
.spirit-reading .chapter-body .detail-footer { margin-top: 48px; padding-top: 24px; }
.spirit-reading .chapter-body .stay { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--silver-line); }
.spirit-reading .stay-label { font-size: 14px; }
.spirit-reading .stay-privacy { font-size: 12px; }
.spirit-reading .manifest-layout { padding-inline: 0; }
/* Documents stand on the opening's silver → black gradient, never on flat silver.
   Wide screens: headings on the silver side, reading text on the black side, over the fixed landscape.
   Narrow screens: the opening ends in black, so the document continues in black. */
.spirit-reading .mf { position: relative; isolation: isolate; width: 100%; max-width: none; margin: 0; padding: 72px var(--edge) 96px; background: transparent; color: var(--silver-ink); scroll-margin-top: 24px; }
.spirit-reading .mf p, .spirit-reading .mf li { font-family: var(--read); line-height: 1.8; }
.spirit-reading .home-scroll { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; color: #c4c8c4; font: 400 13px/1.6 var(--body); letter-spacing: .06em; }
.spirit-reading .home-scroll:hover { color: #fff; }
.spirit-reading .foot { background: transparent; border-top: 0; padding-block: 20px; color: #c4c8c4; }
.spirit-reading .foot .copyright { color: inherit; }
@media (min-width: 1101px) {
  .spirit-reading .mf { --doc-cols: minmax(0, .9fr) minmax(0, 1fr); --doc-gap: clamp(48px, 7vw, 120px); --doc-rule: linear-gradient(90deg, #10111247, #10111226 42%, #ffffff2e 58%, #ffffff3d); }
  /* A soft shade under the black side keeps light text readable where the fixed gradient is still grey. */
  .spirit-reading .mf::before { content: ''; position: absolute; z-index: -1; inset: 0 0 0 40%; pointer-events: none;
    background: linear-gradient(90deg, transparent 0, #0d0e0fb8 32%, #0d0e0fb8 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 64px, #000 calc(100% - 96px), transparent);
    mask-image: linear-gradient(180deg, transparent 0, #000 64px, #000 calc(100% - 96px), transparent); }
  .spirit-reading .mf > [data-l] { display: grid; grid-template-columns: var(--doc-cols); column-gap: var(--doc-gap); align-items: start; }
  .spirit-reading .mf .art-head { display: contents; }
  .spirit-reading .mf > [data-l] > :not(h2, .art, .close), .spirit-reading .mf .art > :not(.art-head, .kicker, h2), .spirit-reading .mf .close > :not(blockquote) {
    grid-column: 2; max-width: 680px; color: var(--silver-ink);
    --silver-ink: #f0f0eb; --silver-copy: #d1d4d0; --silver-muted: #c2c5c2; --silver-line: #ffffff3d; --paper: #f0f0eb; --faint: #c2c5c2; --line: #ffffff3d; }
  .spirit-reading .mf > [data-l] > h2 { grid-column: 1; max-width: 16ch; margin: 44px 0 0; color: #101112; }
  .spirit-reading .mf > [data-l] > h2 + * { margin-top: 44px; }
  .spirit-reading .mf .art { display: contents; }
  .spirit-reading .mf .art .kicker { grid-column: 1 / -1; display: grid; grid-template-columns: var(--doc-cols); column-gap: var(--doc-gap); margin: 64px 0 0; padding-top: 22px; border-top: 1px solid; border-image: var(--doc-rule) 1; color: #101112; }
  .spirit-reading .mf .art .kicker > span:last-child { color: #c2c5c2; }
  .spirit-reading .mf .art h2 { grid-column: 1; max-width: 14ch; margin: 20px 0 0; color: #101112; }
  .spirit-reading .mf .art > .art-head + * { margin-top: 26px; }
  .spirit-reading .mf .close { grid-column: 1 / -1; display: grid; grid-template-columns: var(--doc-cols); column-gap: var(--doc-gap); align-items: start; border-top: 1px solid; border-image: var(--doc-rule) 1; }
  .spirit-reading .mf .close > blockquote { grid-column: 1; grid-row: 1 / span 3; color: #101112; }
}
@media (max-width: 1100px) {
  /* A translucent graphite veil over the fixed silver-to-black landscape, as on the home record. */
  .spirit-reading .mf { background: linear-gradient(180deg, #101112 0, #10111299 180px);
    --silver-ink: #f0f0eb; --silver-copy: #d1d4d0; --silver-muted: #c2c5c2; --silver-line: #ffffff3d; --paper: #f0f0eb; --faint: #c2c5c2; --line: #ffffff3d; }
  .spirit-reading .mf > [data-l] { width: min(100%, 760px); margin-inline: auto; }
  .spirit-reading .foot { background: #10111299; }
  /* Headings stand on a silver plate that rises out of the black and sinks back into it: the opening's
     silver-to-black gradient, top to bottom, with dark ink on the silver and light text on the black. */
  .spirit-reading .mf .art-head, .spirit-reading .mf > [data-l] > h2 {
    margin-inline: calc(-1 * var(--edge)); padding: 56px var(--edge) 44px; color: #101112;
    background: linear-gradient(180deg, transparent 0, #a9a9a9 40px, #b9b9b9 50%, #9a9a9a calc(100% - 36px), transparent 100%);
    --silver-ink: #101112; --silver-copy: #252727; --silver-muted: #303232; --silver-line: #10111233;
    --paper: #101112; --faint: #303232; --line: #10111233; }
  .spirit-reading .mf .art { margin-top: 28px; padding-top: 0; border-top: 0; }
  .spirit-reading .mf .art-head .kicker { margin: 0; }
  .spirit-reading .mf .art-head h2 { margin: 18px 0 0; color: #101112; }
  .spirit-reading .mf .art > .art-head + * { margin-top: 24px; }
  .spirit-reading .mf > [data-l] > h2 { margin-top: 28px; margin-bottom: 20px; }
}
@media (max-width: 760px) {
  .spirit-reading .chapter-title, .spirit-reading .document-opening .hero-copy { top: 0; }
  .spirit-reading .chapter-title h1, .spirit-reading .document-opening h1 { font-size: clamp(28px, 8vw, 40px); }
  .spirit-reading .chapter-title .eyebrow, .spirit-reading .document-opening .kicker { font-size: 11px; margin-bottom: 18px; }
  .spirit-reading .hero-signup .method-lead, .spirit-reading .hero-signup .lede { font-size: 17px; }
  .spirit-reading .chapter-body, .spirit-reading .mf { padding-block: 42px 48px; }
  .spirit-reading .section-step { margin-bottom: 16px; }
  .spirit-reading .chapter-section + .chapter-section { margin-top: 36px; }
  .spirit-reading .chapter-section h2 { font-size: 25px; }
  .spirit-reading .chapter-body .story p, .spirit-reading .mf p, .spirit-reading .mf li { font-size: 16px; }
}