/* Upright silver Iskra; moving light is confined to the recessed inner rim. */
:root { --paper: #e9e7df; --ink: #101112; --display: 'Jost', Arial, sans-serif; --body: 'Jost', Arial, sans-serif; --mono: 'Jost', Arial, sans-serif; --read: 'Space Grotesk', 'Jost', Arial, sans-serif; --edge: clamp(24px, 5.5vw, 100px); --header: 104px; --footer: 60px; }
html { background: #909090; }
/* The opening's silver becomes a shaded metal surface, rather than flat grey. */
:root {
  --opening-surface: linear-gradient(110deg, #b7b7b7, #777 44%, #141414 78%);
  --silver-surface: radial-gradient(ellipse 70% 100% at 8% 4%, #eeeeee4d, transparent 72%), radial-gradient(ellipse 80% 90% at 100% 100%, #3535351c, transparent 75%), linear-gradient(110deg, #b7b7b7, #aeaeae 44%, #a5a5a5 78%, #b7b7b7);
  --silver-ink: #101112; --silver-copy: #252727; --silver-muted: #303232; --silver-line: #10111233;
}
:is(.home-chapter, .chapter-body, .mf, .experience-reader, .details, .index-detail) {
  --paper: var(--silver-ink); --faint: var(--silver-muted); --line: var(--silver-line);
}
:is(.home-chapter, .chapter-body, .index-detail) .stay input { color: var(--silver-ink); border-color: var(--silver-muted); }
:is(.home-chapter, .chapter-body, .index-detail) .stay input::placeholder { color: var(--silver-muted); }
:is(.home-chapter, .chapter-body, .index-detail) .stay input:focus { border-color: var(--silver-ink); }
:is(.home-chapter, .chapter-body, .index-detail) .stay-note, :is(.home-chapter, .chapter-body, .index-detail) .stay-privacy { color: var(--silver-muted); }
:is(.home-chapter, .chapter-body, .index-detail) .stay-note.is-bad { color: #762518; }
:is(.home-chapter, .chapter-body, .index-detail) .stay-privacy a { border-color: var(--silver-muted); }
:is(.home-chapter, .chapter-body, .index-detail) .stay-label { color: var(--silver-muted); }
:is(.home-chapter, .chapter-body, .index-detail) .stay button { color: var(--silver-ink); }
:is(.home-chapter, .chapter-body, .index-detail) .stay button:hover { color: var(--silver-ink); }
:is(.home-chapter, .chapter-body, .index-detail) .stay-row { border-color: var(--silver-muted); }
:is(.home-chapter, .chapter-body, .index-detail) .stay-row:focus-within { border-color: var(--silver-ink); box-shadow: 0 1px 0 var(--silver-ink); }
.chapter-body .chapter-next .next-label { color: var(--silver-muted); }
.chapter-body .detail-footer { border-color: var(--silver-line); }
.chapter-body .detail-footer .text-link { text-decoration-color: currentColor; }
.spirit-discovery .foot .copyright, .spirit-live .foot .copyright { opacity: 1; color: var(--silver-muted); }
.site-landscape { background: var(--opening-surface); }
.site-landscape::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 30% 22% at 89% 88%, #08080870, transparent 100%); }
.central-iskra { object-fit: fill; }
.iskra-axis { left: 10%; right: 10%; transition: transform .65s cubic-bezier(.22, 1, .36, 1), opacity .45s; }
.iskra-axis picture { mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.lunar-haze, .lunar-light { display: none; }
.lunar-motion-paused .lunar-atmosphere > * { animation-play-state: paused; }
/* Stroked inner-contour masks leave both broad metal faces and the dark core untouched. */
.iskra-sheen, .lunar-atmosphere {
  mask-image: url('images/iskra-inner-rim-desktop.svg');
  mask-size: 100% 100%; mask-position: center; mask-repeat: no-repeat; mask-mode: alpha;
}
.iskra-sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.iskra-sheen-band {
  position: absolute; inset: 0 -30%; opacity: 0;
  background: linear-gradient(170deg, transparent 40%, #ffffff18 45%, #ffffffa6 48%, #fff 50%, #ffffffa6 52%, #ffffff18 55%, transparent 60%);
  transform: translate3d(0, -65%, 0);
}
.has-lunar-motion .iskra-sheen-band { animation: iskra-silver-sweep 8.4s linear infinite; }
.has-lunar-motion .iskra-sheen-band, .has-lunar-motion .lunar-pointer { will-change: transform; }
.lunar-motion-paused .iskra-sheen-band, .lunar-motion-paused .lunar-pointer { will-change: auto; }
.lunar-motion-paused .iskra-sheen-band { animation-play-state: paused; }
@keyframes iskra-silver-sweep {
  0% { transform: translate3d(0, -65%, 0); opacity: 0; }
  8%, 80% { opacity: 1; }
  88%, 100% { transform: translate3d(0, 65%, 0); opacity: 0; }
}
.word { color: var(--ink); }
.letters { width: 118px; }
.top { gap: 40px; }
.top-tools { gap: 12px; }
.langs { padding-left: 22px; }
.lang { min-width: 44px; justify-content: center; }
.screen { padding-block: clamp(24px, 5vh, 56px); }
.hero { color: var(--ink); grid-template-columns: minmax(0, 1fr) 35% minmax(0, 1fr); }
.hero-copy { align-self: start; }
h1 { margin-top: 0; font-size: clamp(38px, 4vw, 64px); font-weight: 400; line-height: 1.12; letter-spacing: -.045em; }
h1 em { font: normal 400 clamp(64px, 6vw, 96px)/1.08 var(--display); letter-spacing: -.05em; margin-top: 4px; }
.lede { max-width: 300px; margin-top: 30px; color: #282828; font-size: 15px; line-height: 1.8; }
.hero-facts { align-self: end; padding: 0 0 4px 22px; border-left: 1px solid #dededc50; color: #f0f0eb; }
.hero-facts .eyebrow { font-size: 10px; color: #e0e0da; letter-spacing: .1em; }
.core-fact { font-size: clamp(18px, 1.55vw, 24px); font-weight: 400; margin-top: 12px; letter-spacing: -.03em; }
.essence-note { color: #d2d2cc; margin-top: 10px; font-size: 12px; line-height: 1.6; }
.foot { color: #dededb; }
.copyright { color: var(--ink); }
.detail-screen { align-items: flex-start; padding-block: clamp(28px, 5vh, 64px); }
.detail-content { width: min(56%, 740px); flex-shrink: 0; min-width: 0; margin-block: auto; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
.detail-content > .eyebrow { margin-bottom: 32px; color: #b2b8b4; letter-spacing: .14em; }
.section-number { color: #7f8581; }
.detail-content h1 { margin: 0; font-size: clamp(38px, 3.5vw, 58px); font-weight: 400; line-height: 1.1; letter-spacing: -.045em; }
.direction h1 > span { font-size: .65em; color: #d4d6d3; letter-spacing: -.035em; }
.direction h1 em { margin-top: 14px; color: var(--paper); font: normal 400 clamp(42px, 4.2vw, 64px)/1.12 var(--display); letter-spacing: -.045em; }
.direction-text { gap: 18px; max-width: 540px; margin-top: 32px; }
.direction-text p, .method-steps p, .invite-body { color: #bcc1be; font-size: 14px; line-height: 1.85; }
.direction-text p:first-child { color: #eaebe6; font-size: 17px; line-height: 1.75; }
.detail-footer { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 36px; padding-top: 20px; border-top: 1px solid #ffffff26; }
.detail-footer .text-link { min-height: 44px; margin: 0; padding-block: 10px; border: 0; font-size: 10px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #ffffff55; }
.detail-footer .text-link > span { font: inherit; }
.chapter-next { display: inline-flex; flex-shrink: 0; align-items: center; gap: 20px; min-height: 48px; font: 400 13px/1.6 var(--body); }
.chapter-next > span > span { display: block; }
.chapter-next .next-label { margin-bottom: 3px; color: #a8b0aa; font: 9px/1.5 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.chapter-next .enter-spark { display: block; width: 18px; height: 36px; transition: transform .25s; }
.chapter-next:hover .enter-spark { transform: translateY(-3px); }
.method-steps { gap: 0; margin-top: 32px; }
.method-steps li { gap: 20px; padding-block: 22px; border-top: 1px solid #ffffff26; }
.method-steps li::before { min-width: 22px; color: #919a94; font-size: 10px; }
.method-steps li > div { display: grid; grid-template-columns: minmax(110px, .7fr) 1.3fr; align-items: start; gap: 22px; width: 100%; }
.method h3 { margin: 0; font-size: 22px; font-weight: 400; line-height: 1.3; }
.method .detail-footer { margin-top: 0; }
.research-note { max-width: 260px; margin: 0; padding: 0; border: 0; color: #a8b0aa; font-size: 11px; }
.invite h1 { max-width: 620px; font: normal 400 clamp(48px, 4.6vw, 72px)/1.08 var(--display); letter-spacing: -.045em; }
.invite-body { max-width: 430px; margin-top: 32px; font-size: 16px; }
.stay { margin-top: 36px; }
.stay-label { display: block; margin-bottom: 8px; color: #c5cac6; font: 10px/1.6 var(--mono); }
.stay-row { flex-wrap: nowrap; gap: 0; border-bottom: 1px solid #ffffff65; transition: border-color .2s, box-shadow .2s; }
.stay-row:focus-within { border-bottom-color: #fff; box-shadow: 0 1px 0 #fff; }
.stay input { flex: 1 1 0; min-height: 54px; padding: 12px 0; font: 16px/1.5 var(--body); border: 0; }
.stay input:focus-visible { outline: none; }
.stay input::placeholder { color: #89928c; }
.stay button { flex: 0 0 auto; gap: 14px; min-height: 54px; padding: 0 0 0 18px; background: none; border: 0; color: #f0f0eb; font: 500 13px/1.5 var(--body); letter-spacing: .01em; white-space: nowrap; transition: color .2s; }
.stay button:hover { background: none; color: #fff; }
.stay button .enter-spark { width: 14px; height: 28px; transition: transform .25s; }
.stay button:hover .enter-spark { transform: translateY(-2px); }
.stay-privacy { max-width: 430px; color: #959e97; font-size: 10px; }
@media (min-width: 761px) and (max-height: 720px) {
  :root { --header: 80px; --footer: 46px; }
  .screen { padding-block: 18px; }
  h1 { font-size: 38px; }
  h1 em { font-size: 64px; }
  .lede { margin-top: 20px; font-size: 13px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  :root { --edge: 30px; }
  .top { gap: 24px; }
  .detail-content { width: 64%; }
  .method-steps li > div { grid-template-columns: 1fr; gap: 8px; }
  .hero { grid-template-columns: minmax(0, 1fr) 28% minmax(0, 1fr); }
  h1 { font-size: 36px; }
  h1 em { font-size: 64px; }
  .lede { font-size: 13px; }
}
@media (max-width: 760px) {
  :root { --edge: 24px; --header: 168px; --footer: 46px; }
  .top { gap: 0; grid-template-rows: 68px 88px; }
  .letters { width: 100px; }
  .top-tools { color: #171717; }
  .langs { border-left-color: #17171740; }
  .lang-list { color: var(--paper); }
  .site-landscape { background: linear-gradient(110deg, #b8b8b8, #777 45%, #202020 75%, #121212); }
  .site-landscape::before { background: linear-gradient(180deg, #b9b9b9f2, #b9b9b9e0 11%, #b9b9b9b0 14%, #b9b9b970 17.5%, #b9b9b938 21%, #b9b9b914 25%, transparent 30%, transparent 68%, #111a 80%, #111 95%); }
  .iskra-axis { top: 11%; bottom: auto; left: 19.5%; right: 2.5%; height: 66%; }
  .iskra-axis picture { mask-image: url('images/iskra-upright-mobile-halo-20261003.webp'); mask-size: 100% 100%; mask-repeat: no-repeat; }
  .iskra-sheen, .lunar-atmosphere { mask-image: url('images/iskra-inner-rim-mobile.svg'); }
  .iskra-sheen-band { inset: 0 -30%; }
  .screen { padding-block: 16px; }
  .hero { grid-template-columns: 1fr; grid-template-rows: auto minmax(70px, 1fr) auto auto; }
  .hero-copy { width: 61%; }
  h1 { font-size: clamp(28px, 7vw, 40px); }
  h1 span, h1 em { display: block; }
  h1 em { font-size: 1.45em; margin: 4px 0 0; }
  .hero-copy .lede { display: none; }
  .hero-facts { width: 100%; background: none; backdrop-filter: none; padding: 12px 0 0; border: 0; border-top: 1px solid #ffffff35; }
  .hero-facts .eyebrow { font-size: 9px; }
  .core-fact { margin-top: 7px; font-size: clamp(16px, 4.7vw, 18px); }
  .essence-note { margin-top: 7px; font-size: 11px; }
  .copyright { color: #bdbdbb; }
  .foot { font-size: 10px; gap: 12px; }
  .foot nav { gap: 18px; }
  .detail-screen { padding-block: 28px; }
  .detail-content { width: 100%; margin-block: 0 auto; padding: 0; }
  .detail-content > .eyebrow { margin-bottom: 28px; font-size: 9px; }
  .detail-content h1 { margin: 0; font-size: 38px; }
  .direction h1 > span { font-size: 26px; }
  .direction h1 em { max-width: 390px; font-size: clamp(38px, 10vw, 48px); }
  .direction-text { margin-top: 28px; gap: 16px; }
  .direction-text p:first-child { font-size: 16px; }
  .direction-text p, .method-steps p { font-size: 13px; }
  .detail-footer { gap: 20px; margin-top: 28px; padding-top: 16px; }
  .detail-footer .text-link { max-width: 52%; line-height: 1.8; }
  .chapter-next { gap: 12px; font-size: 12px; }
  .method-steps { margin-top: 28px; }
  .method-steps li { gap: 16px; padding-block: 20px; }
  .method-steps li > div { grid-template-columns: 1fr; gap: 8px; }
  .method h3 { font-size: 23px; }
  .research-note { max-width: 180px; font-size: 10px; }
  .invite h1 { font-size: clamp(40px, 11vw, 58px); }
  .invite-body { margin-top: 28px; font-size: 15px; }
  .stay { margin-top: 32px; }
}
@media (max-width: 760px) and (max-height: 730px) {
  :root { --edge: 18px; --header: 156px; --footer: 36px; }
  .top { grid-template-rows: 56px 88px; }
  .iskra-axis { top: 12%; height: 57.5%; }
  .screen { padding-block: 10px; }
  .hero { grid-template-rows: auto minmax(40px, 1fr) auto auto; }
  h1 { margin-top: 0; font-size: 26px; }
  h1 em { font-size: 1.4em; }
  .hero-facts { padding-top: 9px; }
}

/* Home links lead to full documents; article pages scroll naturally. */
.spirit-home { height: 100svh; min-height: 560px; display: grid; grid-template-rows: var(--header) minmax(0, 1fr) var(--footer); }
.spirit-home .hero { height: 100%; min-height: 0; }
.spirit .iskra-axis { left: 17%; right: 17%; bottom: 0; }
.spirit-page { min-height: 100svh; display: grid; grid-template-rows: var(--header) 1fr auto; }
/* The scene is identical to home; a separate veil sits only behind reading areas. */
.spirit-page .world-layout { isolation: isolate; }
.spirit-page .world-layout::before { content: ''; position: absolute; inset: calc(-1 * var(--header)) 0 calc(-1 * var(--footer)); z-index: -1; pointer-events: none; background: linear-gradient(90deg, transparent 26%, #10111214 34%, #101112d1 44%, #101112de 68%, #101112d9); }
.spirit-page .detail-screen { min-height: calc(100svh - var(--header) - var(--footer)); }
.spirit-page .foot { position: relative; z-index: 1; min-height: var(--footer); }
.chapter-nav { display: flex; align-items: center; gap: 36px; margin-left: auto; font: 500 13px/1.5 var(--body); letter-spacing: .01em; }
.chapter-nav a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; color: #c4c8c4; transition: color .2s; }
.chapter-nav a::after { content: ''; position: absolute; inset: auto 0 1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.chapter-nav a:hover, .chapter-nav a[aria-current='page'] { color: #fff; }
.chapter-nav a:hover::after, .chapter-nav a[aria-current='page']::after { transform: scaleX(1); }
@media (max-width: 1100px) and (min-width: 761px) {
  .chapter-nav { gap: 26px; font-size: 12px; }
}
@media (max-width: 760px) {
  .spirit-home .hero { grid-template-rows: auto minmax(0, 1fr) auto; }
  .spirit .iskra-axis { top: 13%; bottom: auto; left: 27.5%; right: 9.5%; height: 68%; }
  .chapter-nav { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 0 16px; margin: 0; border-bottom: 1px solid #ffffff26; font-size: 14px; }
  .chapter-nav a { min-height: 44px; justify-content: flex-start; white-space: nowrap; }
  .chapter-nav { border-bottom-color: #17171740; }
  .chapter-nav a { color: #333; }
  .chapter-nav a:hover, .chapter-nav a[aria-current='page'] { color: #000; }
  .spirit-page .detail-content { margin: 0; }
  .spirit-page .world-layout::before { inset: 0; background: #101112ce; mask-image: linear-gradient(180deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
}
@media (max-width: 760px) and (max-height: 730px) {
  .spirit .iskra-axis { top: 16%; height: 58%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── The ground is made of micro-dots: a tight matrix over the whole scene, every dot pulsing in its
   own rhythm (ground.js). --ground-grain is the distance between dots in px, --ground-strength how
   strongly they pulse. The surface lives by that pulse alone: no sparks, no glints, no patches of light. */
:root { --ground-strength: 1; --ground-grain: 2; }
.living-ground { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 3s ease; }
.has-lunar-motion .living-ground { opacity: 1; }
.living-ground canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Home: the claim on the grey half, the sentence and the field on the black half, on one
   horizontal axis through the Iskra. On phones the claim stays on top and the sentence and
   the field close the screen. */
.spirit-home .hero { grid-template-columns: minmax(0, 1fr) 36% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.spirit-home .hero-copy { grid-column: 1; grid-row: 1; align-self: center; position: relative; top: -3vh; }
.hero-signup { grid-column: 3; grid-row: 1; align-self: center; min-width: 0; position: relative; top: -3vh; padding-left: clamp(18px, 3.4vw, 56px); }
.hero-signup .lede { max-width: 380px; margin: 0; color: #ecece7; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; }
.hero-signup .stay { max-width: 380px; margin-top: 28px; }
.hero-signup .stay-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-signup .stay input { min-height: 50px; }
.hero-signup .stay button { min-height: 50px; }
.hero-signup .stay-note { margin-top: 10px; }
.hero-signup .stay-note:empty { min-height: 0; margin: 0; }
.foot a { color: inherit; }
@media (min-width: 1101px) and (min-height: 721px) {
  .spirit-home h1 { font-size: clamp(40px, 4.2vw, 68px); }
  .spirit-home h1 em { font-size: clamp(72px, 7.2vw, 116px); }
  html[lang='fr'] .spirit-home h1 em, html[lang='de'] .spirit-home h1 em { font-size: clamp(56px, 5.6vw, 92px); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .spirit-home .hero { grid-template-columns: minmax(0, 1fr) 30% minmax(0, 1fr); }
  .hero-signup .stay button { padding-left: 12px; gap: 10px; font-size: 12px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .hero-signup .stay-row { flex-wrap: wrap; border-bottom: 0; box-shadow: none; }
  .hero-signup .stay input { flex: 1 1 100%; border-bottom: 1px solid #ffffff65; }
  .hero-signup .stay button { padding-left: 0; }
}
@media (min-width: 761px) and (max-height: 720px) {
  .hero-signup .stay { margin-top: 20px; }
}
@media (max-width: 760px) {
  .spirit-home .hero { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; }
  .spirit-home .hero-copy { top: 0; align-self: start; }
  .spirit-home .iskra-axis { height: 61%; }
  .hero-signup { grid-column: 1; grid-row: 3; align-self: end; top: 0; padding: 12px 0 0; border-top: 1px solid #ffffff35; }
  html[lang='de'] .spirit-home h1 em { width: min-content; }
  .hero-signup .lede { max-width: none; color: #e6e6e1; font-size: 13px; }
  .hero-signup .stay { max-width: none; margin-top: 6px; }
  .hero-signup .stay input, .hero-signup .stay button { min-height: 46px; }
  .hero-signup .stay-note { margin-top: 8px; font-size: 12px; }
}
@media (max-width: 760px) and (max-height: 730px) {
  .spirit-home .iskra-axis { height: 50%; }
  .hero-signup { padding-top: 9px; }
  .hero-signup .lede { font-size: 12px; }
}

/* Type: Jost, a thin geometric face close to the wordmark. It runs lighter and smaller than
   Inter did: display sizes lose the tight tracking, small text gains a step. */
body, button, input { font-family: var(--body); }
.spirit h1, .spirit h1 em, .spirit .method h3 { font-weight: 300; letter-spacing: -.025em; }
.spirit-home h1 em { letter-spacing: -.03em; }
.chapter-nav { font-size: 15px; font-weight: 400; letter-spacing: .02em; }
.top-tools { font-size: 13px; font-weight: 400; letter-spacing: .04em; }
.hero-signup .lede { font-family: var(--read); font-size: clamp(17px, 1.32vw, 20px); font-weight: 300; line-height: 1.6; text-wrap: balance; }
.stay input { font-size: 18px; font-weight: 300; }
.stay button { font-size: 15px; font-weight: 400; letter-spacing: .02em; }
.stay-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stay-note { font-size: 15px; }
.stay-privacy { font-size: 12px; }
.foot { font-size: 12px; letter-spacing: .03em; }
.eyebrow { font-size: 11px; letter-spacing: .14em; }
.direction-text p, .method-steps p { font-size: 16px; line-height: 1.75; }
.direction-text p:first-child { font-size: 20px; line-height: 1.6; }
.invite-body { font-size: 18px; line-height: 1.7; }
.detail-footer .text-link { font-size: 13px; }
.chapter-next { font-size: 15px; }
.chapter-next .next-label { font-size: 10px; letter-spacing: .12em; }
.research-note { font-size: 13px; }
.method-lead { max-width: 600px; margin-top: 20px; color: #eaebe6; font-size: 20px; font-weight: 300; line-height: 1.6; }
.method .method-steps { margin-top: 30px; }
.detail-footer > .chapter-next:only-child { margin-left: auto; }
.method-steps li::before { font-size: 11px; }
@media (min-width: 761px) {
  /* one quiet line at the foot instead of two corners */
  .foot { justify-content: flex-end; gap: 28px; }
  .foot .copyright { order: 2; color: inherit; opacity: .7; }
}
@media (max-width: 760px) {
  .chapter-nav { font-size: 14px; }
  .hero-signup .lede { font-size: 15px; }
  .stay input { font-size: 17px; }
  .stay button { font-size: 14px; }
  .foot { font-size: 11px; }
  .detail-content > .eyebrow { font-size: 10px; }
  .direction-text p, .method-steps p { font-size: 15px; }
  .direction-text p:first-child { font-size: 18px; }
  .invite-body { font-size: 17px; }
  .detail-footer .text-link { font-size: 12px; }
  .chapter-next { font-size: 14px; }
  .research-note { font-size: 12px; }
  .method-lead { font-size: 18px; margin-top: 16px; }
  .method .method-steps { margin-top: 22px; }
}
@media (max-width: 760px) and (max-height: 730px) {
  .hero-signup .lede { font-size: 14px; }
}

/* Chapters keep the front page's composition: the title on the grey half, the text on the black
   half, the Iskra between them and nothing laid over it. Text over the veiled sculpture, in a thin
   weight, was hard to read. */
.spirit-chapter .world-layout::before { display: none; }
.chapter { display: grid; grid-template-columns: minmax(0, 1fr) 36% minmax(0, 1fr); column-gap: 16px; align-items: center; min-height: calc(100svh - var(--header) - var(--footer)); padding-block: clamp(20px, 4vh, 48px); }
.chapter-title { grid-column: 1; position: relative; top: -3vh; color: var(--ink); }
.chapter-title .eyebrow { margin-bottom: 20px; color: #151515; font-size: 13px; font-weight: 500; letter-spacing: .14em; }
.chapter-title .eyebrow span { color: inherit; }
.chapter-title .method-lead { max-width: 400px; margin: 22px 0 0; color: #0c0c0d; font-family: var(--read); font-size: clamp(16px, 1.18vw, 17.5px); font-weight: 400; line-height: 1.6; }
.spirit .chapter-title h1 { margin: 0; color: var(--ink); font-size: clamp(34px, 3.3vw, 52px); line-height: 1.14; }
.chapter-body { grid-column: 3; min-width: 0; padding-left: clamp(18px, 3.4vw, 56px); color: #d9dcd8; }
.chapter-body .invite-body { max-width: none; margin: 0; color: #f2f2ee; font-size: clamp(18px, 1.4vw, 21px); font-weight: 400; line-height: 1.55; }
.chapter-body .method-steps { margin-top: 0; }
.chapter-body .method-steps li:first-child { border-top: 0; padding-top: 0; }
.chapter-body .method-steps li { gap: 16px; padding-block: 16px; border-top: 1px solid #ffffff2e; }
.chapter-body .method-steps li::before { min-width: 20px; color: #a9aeaa; font-size: 12px; line-height: 2.3; }
.chapter-body .method-steps li > div { display: block; }
.spirit .chapter-body .method-steps h3 { margin: 0 0 6px; color: #f4f4f0; font-size: 20px; font-weight: 400; line-height: 1.3; letter-spacing: 0; }
.chapter-body .method-steps p { color: #d9dcd8; font-size: 17px; font-weight: 400; line-height: 1.6; }
.chapter-body .detail-footer { flex-wrap: wrap; gap: 8px 24px; margin-top: 0; padding-top: 16px; }
.chapter-body .detail-footer .text-link { font-size: 15px; }
.chapter-body .stay { max-width: 400px; margin-top: 28px; }
@media (min-width: 761px) and (max-width: 1100px) {
  .chapter { grid-template-columns: minmax(0, 1fr) 30% minmax(0, 1fr); }
  .spirit .chapter-title h1 { font-size: 32px; }
  .chapter-body .method-steps p { font-size: 16px; }
}
@media (max-width: 760px) {
  /* one column on a calm, nearly solid ground */
  .spirit-chapter .world-layout::before { display: block; inset: 0; background: #0e0f10f2; mask-image: linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 24px), transparent); }
  .chapter { display: block; min-height: 0; padding-block: 26px 30px; }
  .chapter-title { top: 0; }
  .chapter-title .eyebrow { margin-bottom: 14px; color: #b4b9b5; font-size: 12px; font-weight: 400; }
  .chapter-title .method-lead { max-width: none; margin-top: 16px; color: #f2f2ee; font-size: 17px; }
  .spirit .chapter-title h1 { color: #f2f2ee; font-size: clamp(30px, 8.6vw, 38px); }
  .chapter-body { margin-top: 20px; padding-left: 0; }
  .chapter-body .invite-body { font-size: 18px; }
  .chapter-body .method-steps p { font-size: 16px; }
  .chapter-body .stay { max-width: none; }
}
/* Long documents (manifesto, About, legal) stay in their column; the veil behind it is nearly solid. */
.spirit-manifest .world-layout::before { background: linear-gradient(90deg, transparent 24%, #0e0f1040 32%, #0e0f10f0 42%, #0e0f10f5 70%, #0e0f10f2); }
@media (max-width: 760px) {
  .spirit-manifest .world-layout::before { background: #0e0f10f2; }
}

/* Chapters carry several groups of points. The title stays in place on the grey half while the
   column on the black half scrolls past the Iskra; numbers run through the whole page. */
.chapter-body { counter-reset: steps; }
.chapter-body .method-steps { counter-reset: none; }
.chapter-body .method-steps li::before { content: counter(steps, decimal-leading-zero); }
.chapter-body .group { margin: 44px 0 12px; padding-bottom: 12px; border-bottom: 1px solid #ffffff4d; color: #b4b9b5; font: 500 12px/1.6 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.chapter-body > .group:first-child { margin-top: 0; }
.chapter-body .stay + .group, .chapter-body noscript + .group { margin-top: 56px; }
.chapter-body .group + .method-steps li:first-child { border-top: 0; padding-top: 8px; }
.chapter-body .detail-footer { margin-top: 28px; border-top: 1px solid #ffffff2e; }
@media (min-width: 761px) {
  .chapter { align-items: start; padding-block: clamp(28px, 6vh, 64px) clamp(40px, 9vh, 96px); }
  .chapter-title { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100svh; margin-top: calc(-1 * var(--header) - clamp(28px, 6vh, 64px)); pointer-events: none; }
  .chapter-title > * { pointer-events: auto; }
}

/* A chapter told as a short story: a few paragraphs on the black half, set large enough to read
   like a page, with the first one a step brighter. */
.chapter-body .story p { margin: 0 0 22px; color: #e6e8e3; font-family: var(--read); font-size: clamp(17px, 1.29vw, 19px); font-weight: 300; line-height: 1.7; }
.chapter-body .story p:first-child { color: #f6f6f2; }
.chapter-body .story p:last-child { margin-bottom: 0; }
.chapter-body .story + .stay { margin-top: 30px; }
.chapter-body .story + .detail-footer { margin-top: 30px; }
@media (min-width: 761px) {
  .chapter-body:has(.story) { align-self: center; }
}
@media (max-width: 760px) {
  .chapter-body .story p { font-size: 16.5px; margin-bottom: 18px; }
}