/*
  EARLY LIFE ON MARS (05-14): the field guide's own look, shared by the overview and the eight lifeform pages.
  The website kit (shared/wum.css) sets everything shared: fonts, colours, cards, chips and the menu.

  Part 1. Shared pieces: the page frame, buttons, the dark shade over pictures.
  Part 2. The overview: the opening screen, the map of the eight (the cutaway), the three ages, why everything is tiny,
          the search, the epilogue.
  Part 3. One lifeform's page: the opening screen, the drawn panel (where, when, scale, how it lives), the story, how they shape Mars, the photos and clues.
  Part 4. The things to try: torch, slider, lens, rust snow, dry the pool, crack the stone, the depth gauge.
  Part 5. "What's real here?", the share card mode (?share) and the phone and reduced-motion rules.
*/

/* Part 1. Shared pieces */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { min-height: 100vh; overflow-x: hidden; }
img { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.top { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding-top: max(16px, env(safe-area-inset-top)); }
.btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 999px; font: 600 15px/1 var(--wum-body); text-decoration: none; cursor: pointer; border: 1px solid var(--wum-stage-glass-line); color: var(--wum-stage-ink); background: var(--wum-stage-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn.main { background: var(--wum-stage-accent); border-color: transparent; color: #1A0E08; }
.btn svg { width: 16px; height: 16px; flex: none; }
.kick { margin: 0 0 12px; font: 500 12px/1.2 var(--wum-mono); letter-spacing: 0.2em; text-transform: uppercase; color: #FFD9BF; }
.shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,6,10,0.35) 0%, rgba(7,6,10,0) 30%, rgba(7,6,10,0.15) 55%, rgba(7,6,10,0.92) 100%); pointer-events: none; }
.row { display: flex; flex-wrap: wrap; gap: 10px; }
.sec-h2 { margin: 0 0 10px; font: 700 clamp(32px, 4.4vw, 54px)/0.95 var(--wum-display); text-transform: uppercase; text-wrap: balance; }
.sec-lede { margin: 0 0 24px; max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--wum-stage-muted); }
.link { display: inline-flex; align-items: center; gap: 8px; color: #FFD9BF; font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }
.link svg { width: 16px; height: 16px; }

/* Part 2. The overview */
/* The opening screen (guide.js Step 6b): a frame one screen tall holding the picture on its stage with the rising
   smoke, the microscope lens and its tag, and the words; then the eight in their three ages along the bottom.
   --p runs from 0 to 1 as the screen scrolls away (the dive). On wide screens the words sit on the dark water to the
   right of the chimneys; on phones they sit under them and the eight follow below the picture. */
@keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.12) translateX(-1.5%); } }
.hero { position: relative; --p: 0; }
.h-frame { position: relative; min-height: 100svh; overflow: hidden; display: flex; align-items: center; }
.h-stage { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.h-pic { position: absolute; max-width: none; width: 100%; height: 100%; object-fit: cover; }
.h-smoke { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .shade { background: linear-gradient(180deg, rgba(7,6,10,.5) 0%, rgba(7,6,10,0) 22%, rgba(7,6,10,0) 58%, rgba(7,6,10,.88) 100%); }
.h-side { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7,6,10,0) 38%, rgba(7,6,10,.55) 72%, rgba(7,6,10,.7) 100%); }
.h-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: #07060A; opacity: calc(var(--p) * .85); z-index: 4; }

.h-copy-wrap { position: relative; z-index: 3; width: 100%; max-width: 1340px; margin: 0 auto; padding: 120px 48px 210px; display: flex; justify-content: flex-end; }
.h-copy { width: min(560px, 46%); transform: translateY(calc(var(--p) * -90px)); opacity: calc(1 - var(--p) * 1.6); }
.hero h1 { margin: 0; font: 700 clamp(60px, 8.6vw, 136px)/0.84 var(--wum-display); text-transform: uppercase; letter-spacing: 0.005em; text-shadow: 0 6px 50px rgba(0,0,0,.6); }
.h-w { display: inline-block; opacity: 0; transform: translateY(.35em); filter: blur(10px); animation: h-rise 1.1s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.25s + var(--i) * .14s); }
.h-w:nth-of-type(2) { color: #FFE7D6; text-shadow: 0 0 34px rgba(240,138,93,.55), 0 6px 50px rgba(0,0,0,.6); }
@keyframes h-rise { to { opacity: 1; transform: none; filter: none; } }
.hero .kick, .hero .lede, .hero .row { opacity: 0; animation: h-fadeup .9s ease forwards; }
.hero .kick { animation-delay: .1s; }
.hero .lede { animation-delay: .85s; margin: 22px 0 28px; font: 400 clamp(18px, 1.7vw, 23px)/1.42 var(--wum-body); color: #F6EEE6; text-shadow: 0 2px 20px rgba(0,0,0,.7); }
.hero .row { animation-delay: 1.05s; }
@keyframes h-fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* The lens and its tag. The lens is a link to the first lifeform; its size (--d) is set by the script. */
.h-lens { position: absolute; left: 0; top: 0; z-index: 2; width: var(--d, 208px); height: var(--d, 208px); border-radius: 50%; overflow: hidden; display: block; opacity: 0; transition: opacity 1s ease 1.4s;
  background: radial-gradient(circle at 50% 50%, #0E1A22 0%, #050608 100%);
  box-shadow: 0 0 0 1px rgba(255,236,220,.35), 0 0 0 7px rgba(10,8,8,.55), 0 0 0 8px rgba(255,236,220,.18), 0 0 60px color-mix(in srgb, var(--c) 45%, transparent), 0 24px 60px rgba(0,0,0,.7); }
.hero.alive .h-lens, html.share .h-lens { opacity: calc(1 - var(--p) * 1.4); }
.h-mag { position: absolute; inset: 0; background-repeat: no-repeat; filter: blur(3px) brightness(.34) saturate(.8) contrast(1.15); }
.h-lens canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.16), rgba(255,255,255,0) 32%), radial-gradient(circle, rgba(0,0,0,0) 58%, rgba(0,0,0,.65) 100%); }
.h-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: h-spin 90s linear infinite; pointer-events: none; }
.h-ring circle { fill: none; stroke: rgba(255,240,228,.35); stroke-width: .5; }
.h-ring line { stroke: rgba(255,240,228,.55); stroke-width: .45; }
@keyframes h-spin { to { transform: rotate(360deg); } }
.h-bar { position: absolute; left: 50%; bottom: 15%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; }
.h-bar i { display: block; height: 3px; border: solid rgba(255,248,238,.9); border-width: 0 1px; background: linear-gradient(rgba(255,248,238,0) 1px, rgba(255,248,238,.9) 1px, rgba(255,248,238,.9) 2px, rgba(255,248,238,0) 2px); }
.h-bar b { padding: 3px 6px; border-radius: 6px; background: rgba(5,6,8,.6); font: 500 10px/1 var(--wum-mono); letter-spacing: .08em; color: rgba(255,248,238,.92); }
.h-tag { position: absolute; left: 0; top: 0; z-index: 2; width: 236px; padding: 14px 16px 15px; border-radius: 14px; pointer-events: none; opacity: 0; transition: opacity 1s ease 1.8s;
  background: rgba(14,11,10,.62); border: 1px solid var(--wum-stage-glass-line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hero.alive .h-tag, html.share .h-tag { opacity: calc(1 - var(--p) * 1.8); }
.h-tag::before { content: ""; position: absolute; top: 34px; left: -22px; width: 22px; height: 1px; background: linear-gradient(90deg, rgba(255,240,228,0), rgba(255,240,228,.6)); }
.h-tag.left::before { left: auto; right: -22px; transform: scaleX(-1); }
.h-k { display: flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--wum-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--c); }
.h-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); animation: h-beat 2s ease-in-out infinite; }
@keyframes h-beat { 50% { opacity: .35; } }
.h-tag b { display: block; margin: 8px 0 5px; font: 700 21px/1 var(--wum-display); text-transform: uppercase; letter-spacing: .02em; color: #FFF3E6; }
.h-tag p { margin: 0; font: 400 13.5px/1.42 var(--wum-body); color: rgba(255,240,228,.78); }
.h-hint { display: block; margin-top: 9px; font: 500 10.5px/1.3 var(--wum-mono); letter-spacing: .06em; color: rgba(255,240,228,.5); transition: opacity .6s; }
.hero.looked .h-hint { display: none; }
@media (hover: none) { .h-hint { display: none; } }

/* The eight, in their three ages, along the bottom of the opening screen */
.h-cast { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 0 26px; opacity: calc(1 - var(--p) * 2); }
.h-cast .wrap { max-width: 1340px; padding: 0 48px; }
.h-ct { margin: 0 0 12px; font: 500 11px/1 var(--wum-mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,240,228,.55); display: flex; align-items: center; gap: 14px; }
.h-ct::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,240,228,.22), rgba(255,240,228,0)); }
.h-cgs { display: grid; grid-template-columns: 2fr 3fr 3fr; gap: 12px; opacity: 0; animation: h-fadeup 1s ease 1.3s forwards; }
.h-cg { position: relative; padding: 11px 8px 6px 12px; border-radius: 16px; background: rgba(12,10,10,.5); border: 1px solid rgba(255,236,220,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.h-cg::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.h-ca { display: block; margin: 0 0 6px 4px; font: 500 10px/1.2 var(--wum-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-cmr { display: flex; gap: 4px; }
.h-cm { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 6px 4px 7px; border-radius: 12px; text-align: center; text-decoration: none; color: #FFF3E6; transition: background .25s; }
.h-cm img { width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(255,240,228,.25); transition: box-shadow .25s, transform .25s; }
.h-cm span { font: 600 12.5px/1.15 var(--wum-body); }
.h-cm:hover, .h-cm:focus-visible { background: rgba(255,240,228,.08); }
.h-cm:hover img, .h-cm:focus-visible img { box-shadow: 0 0 0 2px var(--c), 0 0 18px var(--c); transform: scale(1.06); }

.cut { padding: 80px 0 0; }
.cut-wrap { border-radius: 22px; border: 1px solid var(--wum-stage-glass-line); background: #0D0B0F; overflow: hidden; }
.cut-wrap svg { display: block; width: 100%; height: auto; }
.cut-wrap.tall { display: none; }
.cut-wrap .tk { stroke: rgba(255,240,228,.35); stroke-width: 1; }
.cut-wrap .dec { stroke: rgba(255,240,228,.10); stroke-dasharray: 3 5; }
.cut-wrap .dl { font: 500 10px var(--wum-mono); fill: rgba(255,240,228,.45); }
.cut-wrap .rv { font: 600 12.5px var(--wum-mono); fill: #FFF3E6; text-anchor: end; }
.cut-wrap .rl { font: 400 11px var(--wum-body); fill: rgba(255,240,228,.6); text-anchor: end; }
.cut-wrap .surf { stroke: #FFF3E6; stroke-width: 1.4; opacity: .7; }
.cut-wrap .crack { fill: none; stroke: #E9C9A0; stroke-width: 2; opacity: .55; }
.cut-wrap .crack.thin { stroke-width: 1.2; opacity: .35; }
.cut-wrap .flow { fill: none; stroke: #FFF3E6; stroke-width: 1.8; stroke-dasharray: 6 6; animation: flow 1.6s linear infinite; }
.cut-wrap .fl { font: italic 500 12px var(--wum-body); fill: #FFF3E6; paint-order: stroke; stroke: rgba(10,7,6,.75); stroke-width: 4px; }
.cut-wrap .fl.end { text-anchor: end; }
.cut-wrap .pill { cursor: pointer; }
.cut-wrap .pill rect { transition: fill .25s; }
.cut-wrap .pill:hover rect, .cut-wrap .pill:focus rect { fill: rgba(40,28,24,.95); }
.cut-wrap .pn { font: 700 15px var(--wum-display); fill: #FFF3E6; text-transform: uppercase; letter-spacing: .02em; }
.cut-wrap .ps { font: 400 10.5px var(--wum-body); fill: rgba(255,240,228,.7); }
.cut-wrap .lead { stroke-width: 1.4; fill: none; }
.cut-wrap .steam, .cut-wrap .plume { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-linecap: round; animation: rise 4s ease-in-out infinite; }
.cut-wrap .snow { animation: fall 5.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -24; } }
@keyframes rise { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: .8; } 100% { opacity: 0; transform: translateY(-16px); } }
@keyframes fall { 0% { transform: translateY(-20px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(150px); opacity: 0; } }
.cut-foot { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 30px; align-items: start; }
.cut-foot p { margin: 0 0 10px; font: 500 11px/1.2 var(--wum-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--wum-stage-accent); }
.cut-key { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
.cut-key li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.45; color: #EDE3D9; }
.cut-key li::before { content: ""; position: absolute; left: 0; top: 10px; width: 18px; border-top: 2px dashed #FFF3E6; }

.ages { padding: 96px 0 0; }
.ages-head { margin-bottom: 4px; }
.act { padding: 56px 0 0; }
.act-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: end; margin-bottom: 22px; }
.act-head .num { display: block; margin-bottom: 8px; font: 500 12px/1 var(--wum-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--c); }
.act-head h2 { margin: 0; font: 700 clamp(40px, 6.4vw, 80px)/0.9 var(--wum-display); text-transform: uppercase; color: var(--c); }
.act-head p { margin: 10px 0 0; color: #EDE3D9; font-size: 18px; line-height: 1.5; max-width: 52ch; }
.act-head .when { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--wum-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wum-stage-muted); }
.act-head .when i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.cards { display: grid; gap: 18px; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.two .lc { aspect-ratio: 16 / 11; }
.lc { position: relative; display: block; border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--wum-stage-ink); aspect-ratio: 4 / 5; background: #120E0C; border: 1px solid var(--wum-stage-glass-line); transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s; }
.lc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.lc:hover, .lc:focus-visible { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(0,0,0,0.55), 0 0 50px -18px var(--c); }
.lc:hover img { transform: scale(1.06); }
.lc .txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; display: grid; gap: 8px; }
.lc h3 { margin: 0; font: 700 32px/0.95 var(--wum-display); text-transform: uppercase; }
.lc p { margin: 0; font-size: 15px; line-height: 1.45; color: #EDE3D9; }
.lc .go { font-weight: 600; font-size: 14.5px; display: inline-flex; gap: 8px; align-items: center; color: #FFE3CC; }

.why { padding: 96px 0 0; }
.why h2 { max-width: 18ch; }
.whygrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.whyc { position: relative; padding: 22px 22px 24px; display: grid; gap: 12px; align-content: start; }
.whyn { position: absolute; top: 16px; right: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--wum-mono); color: #fff; background: #C4553A; }
.whypic { min-height: 150px; display: grid; align-items: center; }
.whypic svg { display: block; width: 100%; height: auto; overflow: visible; }
.whypic .wl { font: 600 12px var(--wum-body); fill: var(--wum-card-ink); }
.whypic .wv { font: 600 12.5px var(--wum-mono); fill: var(--wum-card-ink); }
.whypic .wv.end, .whypic .wm.end, .whypic .ws.end { text-anchor: end; }
.whypic .wm { font: 600 11px var(--wum-body); fill: var(--wum-card-ink); text-anchor: middle; }
.whypic .ws { font: 400 9.5px var(--wum-mono); fill: var(--wum-card-muted); text-anchor: middle; }
.whypic .wm.start, .whypic .ws.start { text-anchor: start; }
.whypic .wr { font: 700 11px var(--wum-mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--wum-card-muted); }
.whyc h3 { margin: 4px 0 0; font: 700 25px/1 var(--wum-display); text-transform: uppercase; color: var(--wum-card-ink); }
.whyc p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--wum-card-muted); }
.whyplaces { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.whyplaces li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.whyplaces svg { width: 40px; height: 40px; }
.whyplaces b { display: block; font: 700 16px/1.1 var(--wum-display); text-transform: uppercase; color: var(--wum-card-ink); }
.whyplaces small { display: block; margin-top: 3px; font-size: 13px; color: var(--wum-card-muted); }
.whyearth { margin-top: 16px; padding: 26px 28px; border-radius: 20px; border: 1px solid var(--wum-stage-glass-line); background: linear-gradient(120deg, rgba(47,143,134,.16), rgba(196,85,58,.12)); display: grid; gap: 10px; }
.whyearth p { margin: 0; max-width: 46ch; font: 700 clamp(22px, 2.6vw, 30px)/1.15 var(--wum-display); text-transform: uppercase; text-wrap: balance; }
.whyearth small { max-width: 70ch; font-size: 15.5px; line-height: 1.55; color: #EDE3D9; }

.search { padding: 96px 0 0; }
.searchgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sc { padding: 22px 22px 24px; display: grid; gap: 12px; align-content: start; }
.sc svg { width: 64px; height: 64px; }
.sc h3 { margin: 0; font: 700 24px/1.02 var(--wum-display); text-transform: uppercase; color: var(--wum-card-ink); text-wrap: balance; }
.sc p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--wum-card-muted); }
.search .more { margin-top: 18px; }

.epi { position: relative; margin-top: 110px; min-height: 80svh; display: flex; align-items: flex-end; overflow: hidden; }
.epi > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.epi .wrap { position: relative; width: 100%; padding-bottom: 64px; }
.epi h2 { margin: 0 0 14px; font: 700 clamp(44px, 7vw, 92px)/0.9 var(--wum-display); text-transform: uppercase; }
.epi p { margin: 0 0 24px; max-width: 38ch; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.4; color: #F6EEE6; }

/* Part 3. One lifeform's page */
.lf-hero { position: relative; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; }
.lf-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: drift 34s ease-in-out infinite alternate; }
.lf-hero .wrap { position: relative; width: 100%; padding-bottom: 70px; }
.lf-hero h1 { margin: 0; font: 700 clamp(50px, 9vw, 128px)/0.86 var(--wum-display); text-transform: uppercase; text-wrap: balance; text-shadow: 0 4px 40px rgba(0,0,0,0.5); }
.lf-hero .lede { margin: 16px 0 0; max-width: 34ch; font-size: clamp(19px, 2.3vw, 26px); line-height: 1.35; color: #F6EEE6; text-shadow: 0 2px 20px rgba(0,0,0,0.6); }
.back { position: absolute; z-index: 21; left: 24px; top: calc(max(16px, env(safe-area-inset-top)) + 58px); }
.glance { position: relative; z-index: 2; margin-top: -44px; padding: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1.45fr); }
.gt { padding: 18px 20px 20px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.gt + .gt { border-left: 1px solid var(--wum-card-rule); }
.gt .lab { font: 500 10.5px/1.2 var(--wum-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wum-card-muted); }
.gt .gv { font: 700 21px/1.05 var(--wum-display); text-transform: uppercase; color: var(--wum-card-ink); }
.gt small { font-size: 13px; line-height: 1.4; color: var(--wum-card-muted); display: flex; align-items: center; gap: 7px; }
.gt .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.tline { display: block; width: 100%; height: auto; }
.tline .trk { stroke: var(--wum-card-rule); stroke-width: 4; stroke-linecap: round; }
.tline .tick { stroke: var(--wum-card-muted); stroke-width: 1; opacity: .5; }
.tline .tl { font: 500 8.5px var(--wum-mono); fill: var(--wum-card-muted); text-anchor: middle; }
.bignum { display: flex; align-items: center; gap: 12px; }
.bignum b { font: 700 clamp(28px, 3vw, 38px)/0.95 var(--wum-display); text-transform: uppercase; color: var(--wum-card-ink); }
.ic { width: 46px; height: 46px; flex: none; display: block; }
.ic.big { width: 58px; height: 58px; }
.ic .ict { font: 700 14px var(--wum-mono); }
.ic .icl { font: 600 8.5px var(--wum-mono); fill: #2B1F1A; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr); align-items: start; gap: 6px; }
.flow figure { margin: 0; display: grid; justify-items: center; gap: 6px; text-align: center; }
.flow .icons { display: flex; gap: 2px; justify-content: center; }
.flow figure.me { padding-top: 2px; }
.flow figure.me .ic { width: 52px; height: 52px; }
.flow figcaption { font-size: 12.5px; line-height: 1.35; color: var(--wum-card-ink); }
.flow figcaption em { display: block; margin-bottom: 2px; font: 500 9.5px/1.2 var(--wum-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--wum-card-muted); }
.flow .arr { padding-top: 15px; color: var(--c); }
.flow .arr svg { width: 18px; height: 18px; }
.map { position: relative; margin-top: 4px; border-radius: 8px; overflow: hidden; aspect-ratio: 2 / 1; background: #E9DCC4; }
.map img { width: 100%; height: 100%; display: block; }
.map .band { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, var(--c) 0 5px, transparent 5px 10px); opacity: .55; border-top: 2px solid var(--c); border-bottom: 2px solid var(--c); }
.map .pin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--wum-stage-accent); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(224,130,94,0.35); }
.story { padding: 80px 0 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.story.solo { grid-template-columns: minmax(0, 760px); }
.story .body { display: grid; gap: 18px; }
.story .body p { margin: 0; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.6; color: #EDE3D9; }
.story .body p.ask { font: 700 clamp(26px, 3vw, 36px)/1.1 var(--wum-display); text-transform: uppercase; color: var(--wum-stage-ink); }
.story figure { margin: 0; position: sticky; top: 90px; border-radius: 18px; overflow: hidden; border: 1px solid var(--wum-stage-glass-line); }
.story figure img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.shapes { padding: 72px 0 0; }
.shapes h2, .try h2 { margin: 0 0 6px; font: 700 clamp(30px, 3.8vw, 44px)/0.95 var(--wum-display); text-transform: uppercase; }
.shapes h2 { margin-bottom: 18px; }
.shapes ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.shapes li { position: relative; counter-increment: s; padding: 20px 20px 22px; display: grid; gap: 8px; align-content: start; }
.shapes .shp { width: 64px; height: 64px; }
.shapes li::before { position: absolute; top: 16px; right: 16px; content: counter(s); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--wum-mono); color: #120E0C; background: var(--act, #E0825E); }
.shapes li b { font: 700 21px/1.05 var(--wum-display); text-transform: uppercase; color: var(--wum-card-ink); }
.shapes li p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--wum-card-muted); }
.clues { margin-top: 72px; padding: 26px 28px; display: grid; gap: 16px; }
.clues + .clues { margin-top: 18px; }
.clues h2 { margin: 0; font: 700 clamp(26px, 3vw, 34px)/1 var(--wum-display); text-transform: uppercase; color: var(--wum-card-ink); }
.photo { margin: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.photo img { display: block; width: 100%; border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; background: #222; }
.photo figcaption { display: grid; gap: 8px; }
.photo b { font: 700 22px/1.05 var(--wum-display); text-transform: uppercase; color: var(--wum-card-ink); }
.photo p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--wum-card-ink); }
.photo small, .credit { font-size: 12.5px; color: var(--wum-card-muted); }
.photo small a, .credit a { color: var(--wum-card-accent); }
.cluegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.clue { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 14px; background: rgba(0,0,0,.035); border: 1px solid var(--wum-card-rule); }
.clue .cmp { font: 700 16px/1.25 var(--wum-display); text-transform: uppercase; color: var(--wum-card-accent); }
.clue details summary { cursor: pointer; font-size: 12px; color: var(--wum-card-muted); }
.clue p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--wum-card-ink); }
.clue small { font-size: 13.5px; color: var(--wum-card-muted); }
.clue .src { font-size: 12.5px; line-height: 1.5; }
.clue .src a { color: var(--wum-card-accent); }
.nextprev { margin: 72px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.np { position: relative; display: block; min-height: 180px; border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--wum-stage-ink); border: 1px solid var(--wum-stage-glass-line); }
.np img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.75; transition: opacity 0.3s, transform 1s; }
.np:hover img { opacity: 0.95; transform: scale(1.04); }
.np span { position: absolute; left: 18px; right: 18px; bottom: 16px; display: grid; gap: 4px; }
.np small { font: 500 11px/1 var(--wum-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #FFD9BF; }
.np b { font: 700 28px/0.95 var(--wum-display); text-transform: uppercase; }
.np.next span { text-align: right; }

/* Part 4. The things to try */
.try { margin-top: 72px; }
.try > p { margin: 0 0 18px; color: var(--wum-stage-muted); font-size: 17px; max-width: 70ch; }
.stage { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--wum-stage-glass-line); background: #120E0C; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.stage > img { display: block; width: 100%; }
.stage .hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); pointer-events: none; white-space: nowrap; }
.lens { position: absolute; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; border: 3px solid rgba(255,240,228,0.9); box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 0 30px rgba(0,0,0,0.35); background-repeat: no-repeat; pointer-events: none; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide .then { clip-path: inset(0 calc(100% - var(--x, 50%)) 0 0); }
.slide .bar { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,0.6); pointer-events: none; }
.slide .bar::after { content: ""; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
.tagl, .tagr { position: absolute; top: 14px; padding: 7px 11px; border-radius: 999px; font: 500 11px/1 var(--wum-mono); letter-spacing: 0.1em; text-transform: uppercase; background: rgba(7,6,10,0.7); color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.tagl { left: 14px; } .tagr { right: 14px; }
.tagr .wum-chip { border: 0; padding: 0; }
.slide input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.crack { cursor: pointer; aspect-ratio: 1920 / 1086; }
.crack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s ease; }
.crack .split { opacity: 0; }
.crack.open .split { opacity: 1; }
.crack.open .whole { opacity: 0; }
.crack.shake .whole { animation: shake 0.35s ease; }
@keyframes shake { 25% { transform: translateX(-6px) rotate(-0.6deg); } 50% { transform: translateX(5px) rotate(0.5deg); } 75% { transform: translateX(-3px); } }
/* Torch: the sea floor in the dark, lit only where the light points */
.torch { background: #020305; cursor: none; aspect-ratio: 16 / 9; }
.torch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.torch .dim { filter: brightness(.16) saturate(.5); }
.torch .lit { -webkit-mask-image: radial-gradient(circle var(--r, 170px) at var(--tx, 50%) var(--ty, 50%), #000 30%, rgba(0,0,0,.6) 55%, transparent 100%); mask-image: radial-gradient(circle var(--r, 170px) at var(--tx, 50%) var(--ty, 50%), #000 30%, rgba(0,0,0,.6) 55%, transparent 100%); filter: brightness(1.45) saturate(1.2); }
.torch .spot { position: absolute; left: var(--tx, 50%); top: var(--ty, 50%); width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(255,255,255,0)); pointer-events: none; }
/* Rust snow: a picture with falling flakes drawn over it, and the bands they lay down */
.snowst { cursor: pointer; aspect-ratio: 16 / 9; }
.snowst img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.snowst canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.snowst .tagl { top: auto; bottom: 14px; }
/* Dry the pool: three pictures of the same view, faded by the slider */
.dry { aspect-ratio: 1920 / 1086; }
.dry img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dry .say { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(7,6,10,0.72); color: #fff; font-size: 15.5px; line-height: 1.45; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.range { margin-top: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; font: 500 12px/1 var(--wum-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--wum-stage-muted); }
.range input { width: 100%; accent-color: var(--act, #E0825E); height: 28px; }
/* The depth gauge: down through the crust, with Earth's yardsticks */
.gauge { height: 560px; cursor: ns-resize; touch-action: none; background: linear-gradient(180deg, #8A5A40 0%, #5A3526 6%, #3A2219 30%, #231410 60%, #120A08 100%); }
.gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gauge .gl { font: 500 12.5px var(--wum-body); fill: #F6EEE6; }
.gauge .gk { font: 600 12px var(--wum-mono); fill: #FFD9BF; text-anchor: end; }
.gauge .probe { position: absolute; left: 0; right: 0; top: var(--y, 0%); height: 0; border-top: 2px solid #fff; box-shadow: 0 0 14px rgba(255,255,255,.6); pointer-events: none; }
.gauge .probe b { position: absolute; right: 12px; top: -38px; padding: 8px 12px; border-radius: 999px; background: #fff; color: #120E0C; font: 700 18px/1 var(--wum-display); text-transform: uppercase; white-space: nowrap; }
.gauge .gm { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(255,240,228,.35); pointer-events: none; }
.gauge .gm span { position: absolute; left: 12px; top: -9px; padding: 0 6px; font: 600 12px/18px var(--wum-mono); color: #FFD9BF; background: rgba(13,9,8,.55); border-radius: 4px; }
.gauge .gm em { position: absolute; left: 86px; right: 12px; top: -9px; font: 500 13px/18px var(--wum-body); font-style: normal; color: #F6EEE6; text-shadow: 0 1px 6px rgba(0,0,0,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gauge .life { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; pointer-events: none; }
.gauge .life i { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--act); box-shadow: 0 0 10px 3px var(--act); animation: glow 2.4s ease-in-out infinite alternate; }
.gauge .life i:nth-child(3n) { animation-delay: .8s; } .gauge .life i:nth-child(3n+1) { animation-delay: 1.6s; }
@keyframes glow { from { opacity: .45; } to { opacity: 1; } }
.gauge.found .life { opacity: 1; }
.try .found { min-height: 1.5em; margin: 12px 0 0; font: 600 17px/1.45 var(--wum-body); color: var(--act, #FFD9BF); }

/* Part 5. What's real here?, the share card and small screens */
.realbtn { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 30; transition: opacity .4s, transform .4s; }
body.hero-on .realbtn { opacity: 0; transform: translateY(12px); pointer-events: none; }
dialog.real { width: min(720px, calc(100vw - 32px)); max-height: 86vh; padding: 0; border: 0; overflow: auto; }
dialog.real::backdrop { background: rgba(7,6,10,0.7); backdrop-filter: blur(4px); }
.real .in { padding: 26px 26px 30px; display: grid; gap: 16px; }
.real h2 { margin: 0; font: 700 34px/1 var(--wum-display); text-transform: uppercase; }
.real .lead { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--wum-card-muted); }
.real section { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--wum-card-rule); }
.real h3 { margin: 0; display: flex; gap: 10px; align-items: center; font: 700 22px/1.1 var(--wum-display); text-transform: uppercase; }
.real ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.real li { font-size: 15px; line-height: 1.5; }
.real li b { display: block; }
.real .srcs { font-size: 13px; color: var(--wum-card-muted); }
.real .srcs summary { cursor: pointer; font-weight: 600; color: var(--wum-card-ink); }
.real .srcs p { margin: 8px 0 0; line-height: 1.6; }
.real .srcs a { color: var(--wum-card-accent); }
.real .close { justify-self: end; }
.footnote { padding: 70px 0 110px; color: var(--wum-stage-muted); font-size: 13.5px; }
.footnote a { color: #FFD9BF; }
.msg { padding: 160px 24px; text-align: center; color: var(--wum-stage-muted); }

/* The share card (?share): the opening screen alone, sized 1200 by 630 by npm run stills */
html.share .top, html.share .realbtn, html.share .back, html.share .row, html.share #rest, html.share .h-cast, html.share .h-hint { display: none !important; }
html.share .hero, html.share .lf-hero, html.share .h-frame { min-height: 100vh; height: 100vh; }
html.share .h-copy-wrap { padding: 0 64px; max-width: none; }
html.share .h-w, html.share .hero .kick, html.share .hero .lede { opacity: 1; animation: none; transform: none; filter: none; }
html.share .lf-hero > img { animation: none; transform: none; }
html.share .lf-hero .wrap { padding: 0 64px 56px; max-width: none; }
html.share h1 { font-size: 112px; }
html.share .lede { font-size: 25px; max-width: 40ch; }
html.share .kick { font-size: 15px; text-shadow: 0 1px 12px rgba(0,0,0,.9); }
.brand { display: none; }
html.share .brand { display: flex; align-items: center; gap: 10px; position: absolute; top: 40px; left: 64px; z-index: 3; font: 700 22px/1 var(--wum-display); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
html.share .brand svg { width: 34px; height: 34px; }

@media (max-width: 960px) {
  .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gt:nth-child(3) { border-left: 0; }
  .gt:nth-child(n+3) { border-top: 1px solid var(--wum-card-rule); }
}
@media (max-width: 860px) {
  .h-frame { min-height: 100svh; align-items: flex-end; }
  .h-side { display: none; }
  .hero .shade { background: linear-gradient(180deg, rgba(7,6,10,.45) 0%, rgba(7,6,10,0) 18%, rgba(7,6,10,0) 40%, rgba(7,6,10,.82) 66%, rgba(7,6,10,.96) 100%); }
  .h-copy-wrap { padding: 0 20px 36px; justify-content: flex-start; }
  .h-copy { width: 100%; }
  .hero h1 { font-size: clamp(54px, 15vw, 88px); }
  .h-tag { width: 150px; padding: 10px 12px 11px; }
  .h-tag p { display: none; }
  .h-tag b { font-size: 17px; margin-bottom: 0; }
  .h-cast { position: relative; padding: 4px 0 8px; background: #07060A; opacity: 1; }
  .h-cast .wrap { padding: 0; }
  .h-ct { padding: 0 20px; }
  .h-cgs { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; padding: 0 20px 6px; scrollbar-width: none; }
  .h-cgs::-webkit-scrollbar { display: none; }
  .h-cg { flex: none; scroll-snap-align: start; }
  .h-cm { flex: none; width: 82px; }
  .shapes ol, .whygrid, .searchgrid, .story, .photo, .cluegrid { grid-template-columns: minmax(0, 1fr); }
  .cut-key { grid-template-columns: minmax(0, 1fr); }
  .cut-foot { grid-template-columns: minmax(0, 1fr); }
  .story figure { position: static; }
  .act-head { grid-template-columns: minmax(0, 1fr); }
  .cards.two, .cards.three { grid-template-columns: minmax(0, 1fr); }
  .cards.two .lc, .cards.three .lc { aspect-ratio: 4 / 3; }
}
@media (max-width: 700px) {
  .cut-wrap.wide { display: none; }
  .cut-wrap.tall { display: block; }
}
@media (max-width: 520px) {
  .wrap { padding: 0 16px; }
  .back { left: 16px; }
  .nextprev { grid-template-columns: minmax(0, 1fr); }
  .lens { width: 140px; height: 140px; margin: -70px 0 0 -70px; }
  .realbtn { padding: 12px; }
  .realbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .realbtn svg { width: 20px; height: 20px; }
  .glance { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gt { padding: 14px 14px 16px; }
  .gt.where, .gt.life { grid-column: 1 / -1; border-left: 0; }
  .gt.when { border-left: 0; }
  .gt.size { border-left: 1px solid var(--wum-card-rule); }
  .gt + .gt { border-top: 1px solid var(--wum-card-rule); }
  .gt.where { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
  .gt.where .lab, .gt.where .gv, .gt.where small { grid-column: 1; }
  .gt.where .map { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .ic.big { width: 44px; height: 44px; }
  .bignum { gap: 8px; }
  .clues { padding: 22px 18px; }
  .gauge { height: 500px; }
  .torch, .snowst { aspect-ratio: 4 / 5; }
  .tagl, .tagr { font-size: 10px; padding: 6px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-hero > img { animation: none; }
  .h-w, .hero .kick, .hero .lede, .hero .row, .h-cgs { opacity: 1; animation: none; transform: none; filter: none; }
  .h-ring, .h-k::before { animation: none; }
  .crack.shake .whole { animation: none; }
  .cut-wrap .flow, .cut-wrap .steam, .cut-wrap .plume, .cut-wrap .snow { animation: none; }
  * { transition-duration: 0.01s !important; }
}