/* The opening stands alone; navigation leads to the project and evidence. */
.spirit-discovery { display: block; height: auto; min-height: 100svh; }
/* Reserve the sculpture's column without cutting its surrounding light. */
.spirit-discovery .world-layout { overflow-x: clip; }
.spirit-discovery .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.spirit-discovery .hero-copy { grid-column: 1; grid-row: 1; min-width: 0; top: 0; }
.spirit-discovery .hero-signup { grid-column: 3; grid-row: 1; min-width: 0; top: 0; padding-left: 0; }
.scene-slot { grid-column: 2; grid-row: 1; position: relative; overflow: visible; min-width: 0; width: 100%; max-width: calc((100svh - var(--header) - 48px) * .6); justify-self: center; aspect-ratio: 3 / 5; max-height: calc(100svh - var(--header) - 48px); pointer-events: none; }
.spirit-discovery .scene-slot .iskra-axis { position: absolute; top: 50%; bottom: auto; left: -90%; right: auto; width: 250%; height: auto; aspect-ratio: 3 / 2; transform: translateY(-50%); scale: .74 1; transform-origin: 56.5% 50%; }
.spirit-discovery .scene-slot .iskra-axis picture { mask-image: url('images/iskra-solid-desktop.svg'); mask-size: 100% 100%; mask-mode: alpha; filter: contrast(1.22); }
.spirit-discovery .hero { min-height: max(570px, calc(100svh - var(--header))); height: auto; padding-block: 24px; }
.home-intro { margin: 24px 0 0; color: #c4c8c4; font: 300 14px/1.8 var(--read); }

.experience-link { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px; margin-top: 26px; padding: 12px 0; border-block: 1px solid #ffffff50; color: #f0f0eb; font: 400 16px/1.5 var(--body); }
.experience-link:hover { border-color: #eee; }
.experience-link > span:last-child { flex-shrink: 0; font-size: 22px; }
.home-report-link { display: flex; gap: 16px; align-items: center; min-height: 44px; margin-top: 14px; color: #b9bdb9; font-size: 13px; }
.home-report-link:hover { color: white; }
.home-chapter { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 48px 10%; padding: clamp(64px, 9vw, 144px) var(--edge); background: var(--silver-surface); color: var(--silver-ink); border-top: 1px solid var(--silver-line); scroll-margin-top: 24px; }
.home-heading { max-width: 520px; }
.home-heading, .home-story { min-width: 0; }
.chapter-index { display: block; color: var(--silver-muted); font-size: 13px; letter-spacing: .15em; margin-bottom: 32px; }
.home-heading h2 { font: 300 clamp(38px, 4.2vw, 66px)/1.12 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.home-story { max-width: 580px; }
.home-story p { font: 300 16px/1.85 var(--read); color: var(--silver-copy); }
.home-story .home-statement { margin-bottom: 24px; font: 300 clamp(24px, 2.3vw, 34px)/1.4 var(--display); color: var(--silver-ink); }
.home-story .home-note { margin-top: 24px; font-size: 13px; color: var(--silver-muted); }
.research-entry h3 { margin: 12px 0; font: 400 22px/1.3 var(--display); color: var(--silver-ink); }
.sequence-link { grid-column: 2; margin-top: 0; }
.home-story .home-date { font: 400 12px/1.6 var(--body); color: var(--silver-muted); letter-spacing: .06em; }
.research-entry { margin-top: 28px; }
.home-story .live-scope { padding-top: 24px; border-top: 1px solid var(--silver-line); }
.follow-chapter { padding-block: 64px 88px; }
.home-chapter .experience-link { color: var(--silver-ink); border-color: var(--silver-muted); }
.home-chapter .experience-link:hover { border-color: var(--silver-ink); }
.spirit-discovery .foot { color: var(--silver-muted); position: relative; min-height: 70px; background: var(--silver-surface); }
.spirit-home.spirit-discovery .foot { background: transparent; color: #c4c8c4; }
.spirit-home.spirit-discovery .foot .copyright { color: inherit; }
@media (min-width: 1101px) {
  .spirit-home.spirit-discovery .hero { min-height: max(570px, calc(100svh - var(--header) - 70px)); }
  .spirit-home.spirit-discovery .scene-slot { max-height: calc(100svh - var(--header) - 118px); max-width: calc((100svh - var(--header) - 118px) * .6); }
}
@media (max-width: 760px) {
  .spirit-discovery { --hero-stage: clamp(280px, 45svh, 400px); }
  .spirit-discovery .hero { min-height: 0; padding-top: 20px; padding-bottom: 36px; }
  .spirit-discovery .hero-copy { width: 65%; min-height: 0; }
  .spirit-discovery .hero-signup { isolation: isolate; background: none; padding-top: 20px; }
  .spirit-discovery .hero-signup::before { content: ''; position: absolute; z-index: -1; inset: -24px calc(-1 * var(--edge)) -36px; background: linear-gradient(#10111200, #101112de 20%, #101112 85%); pointer-events: none; }
  .spirit-discovery .scene-slot { width: min(100%, 360px); aspect-ratio: 2 / 3; }
  .spirit-discovery .scene-slot .iskra-axis { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: none; transform-origin: 51.3% 50%; }
  .spirit-discovery .scene-slot .iskra-axis picture { mask-image: url('images/iskra-solid-mobile.svg'); }
  .spirit-discovery .central-iskra { object-fit: contain; }
  .spirit-discovery h1 { font-size: clamp(28px, 8vw, 40px); }
  html[lang='de'] .spirit-discovery h1 em { width: auto; }
  .home-intro { margin-top: 12px; font-size: 13px; max-width: 420px; }
  .experience-link { margin-top: 18px; }
  .home-report-link { margin-top: 8px; }
  .home-chapter { grid-template-columns: 1fr; gap: 30px; padding-block: 54px; }
  .chapter-index { margin-bottom: 20px; }
  .home-heading h2 { max-width: 440px; font-size: clamp(32px, 9vw, 40px); }
  .home-story p { font-size: 15px; }
  .sequence-link { grid-column: 1; }
}
@media (max-width: 360px) {
  .experience-sequence { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 1100px) {
  .spirit-discovery .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 32px; min-height: 0; }
  .spirit-discovery .hero-copy { grid-column: 1; grid-row: 1; width: 65%; min-height: 0; }
  .spirit-discovery .scene-slot { grid-column: 1; grid-row: 2; justify-self: center; max-height: none; max-width: none; width: min(100%, 420px); }
  .spirit-discovery .hero-signup { grid-column: 1; grid-row: 3; justify-self: stretch; isolation: isolate; top: 0; padding: 20px 0 0; }
  /* The sculpture's lower tip fades into the black under the opening text instead of meeting an edge. */
  .spirit-discovery .hero-signup::before { content: ''; position: absolute; z-index: -1; inset: -110px calc(-1 * var(--edge)) -36px; background: linear-gradient(transparent, #101112b3 56px, #101112f2 92px, #101112 110px); pointer-events: none; }
}
@media (max-width: 760px) {
  .spirit-discovery .scene-slot { width: min(100%, 360px); }
}

/* The record stands on the opening's own silver → black gradient, never on flat silver.
   Wide screens: transparent over the fixed landscape; heading on silver, list on black.
   Narrow screens: the opening ends in black, so the record continues in black. */
.experience-link-trial { margin-top: 10px; border-top: 0; }
.ledger { align-items: start; background: transparent; border-top: 0; isolation: isolate; }
/* A soft shade that travels with the list keeps light text readable where the fixed gradient is still grey. */
@media (min-width: 1101px) {
  .ledger::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 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
  .ledger .ledger-note { color: var(--silver-ink); }
}
.ledger .home-heading { max-width: 440px; }
.ledger-note { max-width: 36ch; }
.ledger-list { --silver-copy: #d1d4d0; --silver-muted: #c2c5c2; --silver-line: #ffffff3d;
  counter-reset: ledger; margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ledger-list li { counter-increment: ledger; position: relative; padding: 18px 0 20px 34px; border-top: 1px solid var(--silver-line); color: var(--silver-copy); font: 300 16px/1.75 var(--read); text-wrap: pretty; }
.ledger-list li:last-child { border-bottom: 1px solid var(--silver-line); }
.ledger-list li::before { content: counter(ledger, decimal-leading-zero); position: absolute; left: 0; top: 22px; color: var(--silver-muted); font: 400 10px/1.5 var(--body); letter-spacing: .12em; }
@media (max-width: 1100px) {
  /* A translucent graphite veil: the fixed silver-to-black landscape shows through, the text stays readable. */
  .ledger { background: linear-gradient(180deg, #101112 0, #10111299 180px); --silver-ink: #f0f0eb; --silver-copy: #d1d4d0; --silver-muted: #c2c5c2; --silver-line: #ffffff3d; }
  .spirit-home.spirit-discovery.has-ledger .foot { background: #10111299; }
  /* The record's heading stands on a silver plate rising out of the black, like the opening. */
  .ledger .home-heading { margin-inline: calc(-1 * var(--edge)); padding: 56px var(--edge) 48px; max-width: none;
    background: linear-gradient(180deg, transparent 0, #a9a9a9 40px, #b9b9b9 50%, #9a9a9a calc(100% - 40px), transparent 100%);
    --silver-ink: #101112; --silver-copy: #252727; --silver-muted: #303232; --silver-line: #10111233; color: #101112; }
}
@media (max-width: 760px) {
  .ledger-list li { padding: 14px 0 16px 28px; font-size: 15px; }
}

/* The chronicle: time on the left, the sentence, its proof one click away. */
.chronicle .ledger-list li { display: grid; grid-template-columns: minmax(6.5em, auto) 1fr; gap: 4px 18px; padding-left: 0; }
.chronicle .ledger-list li::before { content: none; }
.chronicle .ledger-list time { padding-top: 5px; color: var(--silver-muted); font: 400 11px/1.6 var(--body); letter-spacing: .08em; white-space: nowrap; }
.chronicle-live + .chronicle-past { margin-top: 28px; }
.chronicle-past li { color: var(--silver-muted); }
.chronicle details summary { cursor: pointer; list-style: none; }
.chronicle details summary::-webkit-details-marker { display: none; }
.chronicle details summary::after { content: ' ⌄'; color: var(--silver-muted); font-size: .8em; }
.chronicle details[open] summary::after { content: ' ⌃'; }
.chronicle details summary:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.chronicle-proof { margin: 8px 0 0; color: var(--silver-muted); font: 400 12px/1.6 var(--body); letter-spacing: .02em; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .chronicle .ledger-list li { grid-template-columns: 1fr; gap: 2px; }
  .chronicle .ledger-list time { padding-top: 0; }
}