/* Iskra divides every screen in half: she stands from its top edge to its bottom edge, and the line
   between the silver half and the black half runs through her, from tip to tip, through the middle of
   the screen. Each half keeps its own gradient, in the tones of the original silver-to-black opening.
   Titles stand on the silver half in dark ink, reading text on the black half in light ink. On narrow
   screens the opening keeps the division; below it the page continues in blocks of the same two
   gradients, with straight edges. Loaded last on every page. */
:root {
  /* Her tips sit at x 57.6% / 49.5% (desktop photo, y 1.5% / 98.1%), so the line leans 5.3°. */
  --split-angle: 95.3deg;
  /* Each half carries the opening's own gradient: silver brightening to the left edge, black opening
     out of graphite at the line; the light falls from the upper left as in the original 110° sweep. */
  --split-bg: linear-gradient(160deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .28) 100%),
    linear-gradient(var(--split-angle), #d0d0ce 0%, #b1b1af 18%, #8c8c8a 38%, #747472 50%, #3d3d3d 50%, #262626 62%, #161616 80%, #0e0e0e 100%);
  /* Below the opening the line is vertical: the same two gradients, meeting at the middle of the screen. */
  --split-vertical: linear-gradient(160deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .28) 100%),
    linear-gradient(90deg, #d0d0ce 0%, #b1b1af 18%, #8c8c8a 38%, #747472 50%, #3d3d3d 50%, #262626 62%, #161616 80%, #0e0e0e 100%);
  --silver-block: linear-gradient(110deg, #d0d0ce 0%, #a9a9a7 55%, #8a8a88 100%);
  --black-block: linear-gradient(110deg, #3a3a3a 0%, #1e1e1e 45%, #0e0e0e 100%);
  --split-black: #0e0e0e;
  --on-silver: #101112; --on-silver-soft: #2b2d2f; --on-silver-line: #10111233;
  --on-black: #eeefea; --on-black-soft: #c9ccc7; --on-black-dim: #979a95; --on-black-line: #ffffff2e;
  /* Iskra's box: tall enough that her tips touch the top and bottom of the screen. */
  --iskra-h: calc(100svh / .966); --iskra-w: calc(var(--iskra-h) * 1.11);
  --iskra-top: calc(-.015 * var(--iskra-h)); --iskra-mid: .5355;
}
@media (max-width: 760px) {
  /* Phone photo: tips at x 55.0% / 44.1%, y 2.4% / 96.9%. */
  /* Narrower than the photo (ratio .40), so the titles keep room on the silver side; the line leans 2.64°. */
  :root { --split-angle: 92.64deg; --iskra-h: calc(100svh / .945); --iskra-w: calc(var(--iskra-h) * .40);
    --iskra-top: calc(-.0241 * var(--iskra-h)); --iskra-mid: .4955; }
}

/* ── The landscape: on the opening the two gradients meet on her line; it stands only as tall as the
   first screen. Everything below it stands on the same two gradients meeting on a vertical line, which
   the page itself paints, fixed to the screen. No veils, shades or plates over them. */
html { background: var(--split-vertical); background-attachment: fixed; }
.site-landscape, .spirit-index .site-landscape { position: absolute; inset: 0 0 auto; height: 100svh; background: var(--split-bg); }
.menu-open .site-landscape { position: fixed; }
.site-landscape::before, .site-landscape::after { content: none; }
.spirit-page .world-layout::before { content: none; }
.ledger::before, .spirit-reading .mf::before { content: none; }

/* ── Iskra on the line, from the top of the screen to its bottom, on every page's opening.
   The opening's own boxes stay in the flow; she is placed against the page below the header. */
body.spirit .scene-slot, .spirit-index .index-opening { position: static; }
body.spirit .scene-slot::before { content: none; }
body.spirit .scene-slot .iskra-axis, body.spirit-live .iskra-axis {
  position: absolute; inset: auto; top: calc(-1 * var(--header) + var(--iskra-top)); left: calc(50% - var(--iskra-mid) * var(--iskra-w));
  width: var(--iskra-w); height: var(--iskra-h); aspect-ratio: auto; transform: none; scale: none; z-index: 1; }
body.spirit-live .iskra-axis { top: var(--iskra-top); }
body.spirit .scene-slot .iskra-axis picture, body.spirit-live .iskra-axis picture {
  -webkit-mask-image: url('images/iskra-solid-desktop.svg'); mask-image: url('images/iskra-solid-desktop.svg');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
@media (max-width: 760px) {
  body.spirit .scene-slot .iskra-axis picture, body.spirit-live .iskra-axis picture {
    -webkit-mask-image: url('images/iskra-solid-mobile.svg'); mask-image: url('images/iskra-solid-mobile.svg'); }
}
/* Text of the opening stays above her. */
.hero-copy, .hero-signup, .index-contents, .index-navigation, .spirit-live .mind, .spirit-live .world-labels { position: relative; z-index: 2; }

/* ── Header: the wordmark on the silver half, the pages as plain words on the black half. */
header.top { display: flex; align-items: center; gap: 0; position: relative; z-index: 5; }
header.top .word { margin-right: auto; color: var(--on-silver); }
header.top .chapter-nav { display: flex; align-items: center; gap: clamp(13px, 1.05vw, 24px); margin: 0; padding: 0;
  font: 400 12px/1.4 var(--body); letter-spacing: .03em; background: none; border: 0; }
header.top .chapter-nav a { min-height: 44px; color: var(--on-black-dim); white-space: nowrap; }
header.top .chapter-nav a::after { inset: auto 0 10px; }
header.top .chapter-nav a:hover, header.top .chapter-nav a[aria-current='page'] { color: var(--on-black); }
header.top .top-tools { margin-left: clamp(18px, 1.6vw, 30px); color: var(--on-black-dim); font-size: 12px; }
header.top .langs { padding: 0; border: 0; background: none; }
header.top .langs .lang { min-width: 0; gap: 6px; color: var(--on-black-dim); }
header.top .langs .lang:hover { color: var(--on-black); }
header.top .lang-list { background: #161718; border-color: var(--on-black-line); color: var(--on-black); }
.menu-toggle { display: none; min-height: 44px; padding: 0; border: 0; background: none; color: var(--on-black);
  font: 400 14px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.menu-toggle:focus-visible, header.top .chapter-nav a:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }

/* Where the seven words would reach Iskra's top tip: one Menu button; the open menu covers the screen. */
@media (max-width: 1380px) {
  :root { --header: 72px; }
  header.top { height: var(--header); }
  .menu-toggle { display: inline-flex; align-items: center; position: relative; z-index: 31; }
  header.top .chapter-nav { position: fixed; inset: 0; z-index: 30; display: none; flex-direction: column; align-items: flex-start;
    justify-content: center; gap: 4px; padding: 96px var(--edge) 120px; background: var(--black-block); }
  header.top .chapter-nav a { min-height: 0; padding: 6px 0; color: var(--on-black-soft); font: 300 clamp(34px, 6vw, 56px)/1.1 var(--display); letter-spacing: -.02em; }
  header.top .chapter-nav a::after { inset: auto 0 2px; }
  header.top .top-tools { display: none; }
  .menu-open header.top .chapter-nav { display: flex; }
  .menu-open header.top .top-tools { display: flex; position: fixed; z-index: 31; left: var(--edge); bottom: 40px; margin: 0; }
  .menu-open header.top .lang-list { top: auto; bottom: 48px; left: 0; right: auto; }
  .menu-open header.top .word { position: relative; z-index: 31; color: var(--on-black); }
  .menu-open { overflow: hidden; }
}

/* ── Home: the record's heading on silver, its list on black. */
@media (max-width: 1100px) {
  .ledger { background: var(--black-block); }
  .ledger .home-heading { background: var(--silver-block); }
  .spirit-home.spirit-discovery.has-ledger .foot { background: var(--black-block); }
}
@media (max-width: 760px) {
  .spirit-discovery .hero-signup::before { inset: 0 calc(-1 * var(--edge)) -36px; background: var(--black-block); }
}

/* ── Documents (Manifest, About, Privacy…): headings on the silver half, text on the black half;
   the two columns meet the line with the same gap on each side. */
@media (min-width: 1101px) {
  .spirit-reading .mf { --doc-cols: minmax(0, 1fr) minmax(0, 1fr); --doc-gap: clamp(120px, 12vw, 200px);
    --doc-rule: linear-gradient(90deg, var(--on-silver-line), var(--on-silver-line) 50%, var(--on-black-line) 50%); padding-inline: var(--edge); }
  .spirit-reading .mf > [data-l] > :not(h2, .art, .close), .spirit-reading .mf .art > :not(.art-head, .kicker, h2), .spirit-reading .mf .close > :not(blockquote) { max-width: 620px; }
}
@media (max-width: 1100px) {
  .spirit-reading .mf { background: var(--black-block); }
  .spirit-reading .mf .art-head, .spirit-reading .mf > [data-l] > h2 { background: var(--silver-block); }
  .spirit-reading .foot { background: var(--black-block); }
}

/* ── Contents pages (What we build, How we test, What's next): the opening is the home's — the title on
   silver, Iskra on the line, the topics listed on black — and below it every topic is one row,
   its title on silver and its text on black. Nothing is hidden behind a click. */
.spirit-index .chapter-index-layout { display: block; min-height: 0; padding: 0; }
.spirit-index .index-opening { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(100svh * .46 + 48px);
  align-items: center; min-height: calc(100svh - var(--header)); padding: 0 var(--edge) 48px; }
.spirit-index .index-contents { grid-column: 1; grid-row: 1; color: var(--on-silver); }
.spirit-index .index-kicker { color: var(--on-silver-soft); }
.spirit-index .index-contents h1 { max-width: 12ch; color: var(--on-silver); font-size: clamp(40px, 4.4vw, 72px); line-height: 1.04; }
.spirit-index .index-navigation { grid-column: 2; grid-row: 1; margin: 0; }
.spirit-index .index-list { gap: 18px; padding: 0; }
.spirit-index .index-list li, .spirit-index .index-list li:nth-child(2), .spirit-index .index-list li:nth-child(3) { max-width: none; margin: 0; }
.spirit-index .index-topic { padding: 4px 0 6px 34px; color: var(--on-black-soft); font-size: clamp(22px, 1.9vw, 30px); }
.spirit-index .index-topic:hover { color: var(--on-black); }
.spirit-index .index-topic::after { left: 34px; }
.spirit-index .topic-number { top: 11px; color: var(--on-black-dim); }
.spirit-index .topic-arrow { opacity: .6; transform: none; }
.spirit-index .index-detail { position: relative; z-index: 2; padding: 0 var(--edge) 72px; color: var(--on-black); }
.spirit-index .index-panel, .spirit-index .index-panel[hidden] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(120px, 12vw, 200px);
  align-items: start; padding: 56px 0 64px; border-top: 1px solid; border-image: linear-gradient(90deg, var(--on-silver-line) 50%, var(--on-black-line) 50%) 1; }
.spirit-index .index-panel + .index-panel { margin-top: 0; }
.spirit-index .index-position { grid-column: 1; grid-row: 1; margin: 0 0 18px; color: var(--on-silver-soft); }
.spirit-index .index-panel h2 { grid-column: 1; grid-row: 2; max-width: 14ch; margin: 0; color: var(--on-silver); font-size: clamp(32px, 3.4vw, 54px); }
.spirit-index .index-panel p { grid-column: 2; grid-row: 1 / span 2; max-width: 34em; margin: 0; padding-top: 30px; color: var(--on-black-soft); font-size: clamp(17px, 1.25vw, 19px); }
.spirit-index .index-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(120px, 12vw, 200px); margin: 0; padding-top: 32px;
  border-top: 1px solid; border-image: linear-gradient(90deg, var(--on-silver-line) 50%, var(--on-black-line) 50%) 1; color: var(--on-black); }
.spirit-index .index-actions > :first-child { grid-column: 2; justify-self: start; }
.spirit-index .index-actions > span { display: none; }
.spirit-index .index-actions a { text-decoration-color: var(--on-black-line); }
.spirit-index .foot { position: relative; z-index: 2; color: var(--on-black-dim); }
@media (max-width: 760px) {
  .spirit-index .index-opening { grid-template-columns: minmax(0, 1fr); min-height: 0; height: calc(100svh - var(--header)); align-items: start; padding-top: 24px; }
  .spirit-index .index-contents { max-width: calc(50% - 40px); }
  .spirit-index .index-contents h1 { font-size: clamp(22px, 6.2vw, 34px); }
  .spirit-index .index-navigation { display: none; }
  .spirit-index .index-detail { padding: 0; background: var(--black-block); }
  .spirit-index .index-panel, .spirit-index .index-panel[hidden] { grid-template-columns: minmax(0, 1fr); padding: 0; border: 0; }
  .spirit-index .index-panel { background: var(--black-block); }
  .spirit-index .index-position, .spirit-index .index-panel h2 { grid-column: 1; margin: 0; padding-inline: var(--edge); background: var(--silver-block); }
  .spirit-index .index-position { grid-row: 1; padding-top: 44px; padding-bottom: 14px; }
  .spirit-index .index-panel h2 { grid-row: 2; max-width: none; padding-bottom: 40px; font-size: clamp(28px, 7vw, 40px); }
  .spirit-index .index-panel p { grid-column: 1; grid-row: 3; max-width: none; padding: 32px var(--edge) 48px; }
  .spirit-index .index-actions { grid-template-columns: minmax(0, 1fr); padding: 28px var(--edge) 40px; border: 0; background: var(--black-block); }
  .spirit-index .index-actions > :first-child { grid-column: 1; }
  .spirit-index .foot { background: var(--black-block); }
}

/* ── Live: the reader is opaque (the canvas world must not show through) and carries the same two
   gradients, fixed to the screen like the landscape. */
.spirit-live .experience-reader, .spirit-live .foot { background: var(--split-vertical); background-attachment: fixed; -webkit-mask-image: none; mask-image: none; }
.spirit-live .experience-reader::before, .spirit-live .mind::before { content: none; }
@media (min-width: 761px) {
  .spirit-live .experience-reader { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(120px, 12vw, 200px); }
}
@media (max-width: 760px) {
  .spirit-live .experience-reader, .spirit-live .foot { background: var(--black-block); }
  .spirit-live .reader-intro h2 { background: var(--silver-block); }
}
/* Phone: the number and its caption stand on silver above Iskra's widest part; the record and the links
   follow right below the opening, on black, across the whole width. */
.spirit-live .mind-more { display: contents; }
@media (max-width: 760px) {
  .spirit-live .hero { display: block; }
  .spirit-live .mind { max-width: none; width: auto; }
  .spirit-live .mind > .eyebrow, .spirit-live .mind > .figure, .spirit-live .mind > .figure-caption { max-width: calc(50vw - 40px); }
  .spirit-live .mind-more { display: block; margin: calc(100svh - var(--header) - 270px) calc(-1 * var(--edge)) 0; padding: 32px var(--edge) 40px;
    background: var(--black-block); color: var(--on-black-soft);
    --silver-ink: #f0f0eb; --silver-copy: #d1d4d0; --silver-muted: #c2c5c2; --silver-line: #ffffff3d; }
  .spirit-live .mind-more .log li, .spirit-live .mind-more .status { color: var(--on-black-soft); }
  .spirit-live .mind-more a, .spirit-live .mind-more .link { color: var(--on-black); }
}

/* Live: the two trials of the model, one line under the record. */
.spirit-live .trial-links { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 0; font: 400 15px/1.5 var(--body); }
.spirit-live .trial-links a { text-decoration: underline; text-underline-offset: 5px; }
.spirit-live .trial-links span { margin-right: 10px; }