/* Version I: H cleaned up after Christian's notes. Every card has the shape of a two-row deck's card (a one-row run
   is half a screen), wide pictures show whole over a blurred copy of themselves, media and text sit side by side,
   the poems are shown in full, the Sicily photos join the Pope Francis section, and the mind-follows-the-heart
   story is laid out as veilable subsections of cards that keep their own shapes. */
@import url("styles-h.css");

/* ---------- one card shape everywhere ---------- */
.deck { height: auto; grid-template-rows: repeat(var(--rows), calc((100vh - 3 * var(--pad)) / 2)); }

/* wide pictures: whole, on a blurred and darkened copy of themselves */
.card .t.fit { background: #0b0f14; }
.card .t.fit > img.blur {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(26px) brightness(.55) saturate(1.2); transform: scale(1.25);
}
.card .t.fit > img:not(.blur) { position: relative; object-fit: contain; }
.card:hover .t.fit > img.blur { transform: scale(1.25); }
.card:hover .t.fit > img:not(.blur) { transform: scale(1.03); }

/* ---------- media and text cards: the film fills the card, its words sit on it ---------- */
.card .t.navy-v, .card .t.glitch { display: block; padding: 0 !important; background: #0b0f14 !important; }
.card .t.navy-v > video.portrait, .card .t.glitch > video.v {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0; border: 0;
  aspect-ratio: auto; object-fit: cover;
}
.card .t.navy-v .cap2, .card .t.glitch .hdr, .card .t.glitch .cap3 {
  position: absolute; z-index: 2; left: 0; right: 0; margin: 0; text-align: left; pointer-events: none;
}
.card .t.navy-v .cap2, .card .t.glitch .hdr {
  top: 0; bottom: auto; padding: 22px 24px 60px; background: linear-gradient(rgba(5, 8, 12, .78), rgba(5, 8, 12, 0));
}
.card .t.glitch .cap3 { top: 52px; padding: 0 24px; color: #ddd; }
.card .t.glitch .hdr { padding-bottom: 84px; }
.card:has(.t.navy-v.on)::after, .card:has(.t.glitch.on)::after { display: none; }

/* July 4th: the film as a large card with its line set beside it */
.sage {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center;
  gap: clamp(28px, 4vw, 72px); min-height: 100vh; box-sizing: border-box; padding: 8vh clamp(16px, 6vw, 96px);
  place-content: normal;
}
.sage .vid {
  width: 100%; margin: 0; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 30px 60px rgba(20, 35, 40, .28), 0 0 0 1px rgba(0, 0, 0, .06);
}
.sage .tw {
  width: auto; margin: 0; padding-left: clamp(18px, 2vw, 28px); border-left: 1px solid rgba(0, 0, 0, .22);
  font-size: clamp(15px, 1.5vw, 22px); line-height: 1.7;
}

/* ---------- poems in full ---------- */
.veiled { max-height: none; }
.veiled::after, .veil-btn { display: none; }

/* ---------- pope francis: v1's layout upgraded. The motorcade top left, the moments running down the right
   edge beside it and the poem, the Sicily photos as a row under the poem; all rounded, shadowed, rising in ---------- */
.pope.pope-v {
  --gap: clamp(10px, 1.2vw, 18px);
  display: grid; grid-template-columns: minmax(0, 74fr) minmax(0, 26fr); column-gap: var(--gap);
  padding: var(--gap) var(--gap) clamp(40px, 6vw, 90px); background: #fff;
}
.pope-v .pope-hero { grid-column: 1; grid-row: 1; margin: 0; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .18); }
.pope-v .pope-hero img { width: 100%; height: auto; aspect-ratio: 1035 / 563; object-fit: cover; display: block; }
.pope-v .pope-hero figcaption { left: 4%; bottom: 4%; transform: none; white-space: normal; }
.deck.pope-stack, .deck.pope-row { height: auto; padding: 0; background: none; grid-template-rows: none; }
.deck.pope-stack { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: 1fr; gap: var(--gap); margin-top: 0; align-content: start; }
.pope-stack .card { aspect-ratio: 4 / 3; }
.pope-stack .card:first-child { aspect-ratio: 4 / 5; }
.pope-left { grid-column: 1; grid-row: 2; padding: clamp(40px, 5vw, 80px) 0 0 18%; }
.pope-v .poem { padding: 0; }
.pope-v .poem img { width: min(29vw, 420px); }
.deck.pope-row { grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin: clamp(40px, 5vw, 80px) 0 0 -21.95%; }
.pope-row .card { aspect-ratio: 1; }
.pope-v .card { box-shadow: 0 14px 34px rgba(0, 0, 0, .16); border: 0; background: #e9e9e9; }
.pope-v .card::after { display: none; }

/* ---------- the mind follows the heart: veilable subsections of rounded cards in columns. Photos keep their own
   shape (nothing cropped); a veiled subsection shows a glimpse and opens on click ---------- */
.bento { --gap: clamp(10px, 1.2vw, 18px); background: #f1efea; padding: var(--gap); display: grid; gap: var(--gap); }
.sub {
  position: relative; overflow: hidden; border-radius: calc(var(--radius) + 6px); background: rgba(255, 255, 255, .45);
  padding: var(--gap); max-height: 46vh; transition: max-height 1s cubic-bezier(.6, 0, .2, 1);
}
.sub::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; pointer-events: none;
  background: linear-gradient(rgba(241, 239, 234, 0), #f1efea 90%); transition: opacity .6s;
}
.sub:not(.open) { cursor: pointer; }
.sub.open::after { opacity: 0; }
.mason { display: flex; gap: var(--gap); max-width: 1500px; margin: 0 auto; align-items: stretch; }
.mcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.mcol.low { justify-content: flex-end; }
.m-card {
  margin: 0; border-radius: var(--radius); overflow: hidden; background: #fff;
  box-shadow: 0 14px 34px rgba(40, 30, 10, .14); border: 1px solid rgba(0, 0, 0, .05);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s;
}
.m-card img { display: block; width: 100%; height: auto; transition: transform 1.8s cubic-bezier(.2, .7, .2, 1); }
.sub.open .m-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(40, 30, 10, .2); }
.sub.open .m-card:hover img { transform: scale(1.03); }
.sub.open .m-card img { cursor: zoom-in; }
.m-card.note { padding: clamp(18px, 2.2vw, 36px); }
.m-card.note.accent { background: var(--sage); }
.m-card .bhn { font-size: clamp(13px, 1.15vw, 18px); line-height: 1.6; }
.m-card .bhn-poem { margin: 0; font-size: clamp(12px, 1vw, 15px); line-height: 1.75; color: #9a9a9a; }
.m-card .ig, .m-card .fb { font-size: clamp(13px, 1.1vw, 17px); }
.m-card .grave { margin: 0; max-width: none; font-size: clamp(15px, 1.35vw, 21px); }
.m-card .mfh { aspect-ratio: auto; background: none; border: 0; padding: 2.4em 0; text-align: center; font-size: clamp(14px, 1.35vw, 21px); letter-spacing: .04em; }
.sub-btn {
  position: absolute; right: 18px; bottom: 16px; z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .08); background: #fff; cursor: pointer; box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
  transition: transform .5s;
}
.sub-btn::before, .sub-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: #222; transition: transform .5s; }
.sub-btn::after { transform: rotate(90deg); }
.sub.open .sub-btn { transform: rotate(180deg); }
.sub.open .sub-btn::after { transform: rotate(0deg); }

@media (max-width: 760px) {
  .deck { height: 76vh; grid-template-rows: none; }
  .sage { grid-template-columns: 1fr; min-height: 0; padding: 48px 16px; }
  .pope.pope-v { grid-template-columns: 1fr; padding: 10px; }
  .deck.pope-stack, .deck.pope-row { display: grid; grid-column: 1; grid-row: auto; margin: 10px 0 0; height: auto; overflow: visible; padding: 0; }
  .deck.pope-stack { grid-template-columns: 1fr 1fr; }
  .pope-stack .card:first-child { aspect-ratio: 4 / 3; }
  .pope-v .card { flex: none; }
  .pope-left { grid-column: 1; grid-row: auto; padding: 40px 6px 0; }
  .pope-v .poem img { width: min(420px, 100%); }
  .deck.pope-row { margin-left: 0; }
  .mason { flex-direction: column; }
  .sub { max-height: 60vh; }
}

/* ---------- themes: the earth-rise film behind the whole section, text straight on it (as on tempo.earth) ---------- */
.themes { min-height: 100vh; background: #c9d0d8; }
.themes > video.bg { opacity: .8; mix-blend-mode: screen; filter: saturate(.6); }
.themes .panel { background: none; min-height: 0; }

/* bio-technosphere diagram: tinted navy like the live site, filling its card */
.card .t.navy { background: #212b45; }
.card .t.navy.contain > img:not(.inset):not(.mid) { object-fit: cover; mix-blend-mode: screen; }

/* the notebook-pages slideshow fills its card */
.card .t .slides.mini, .card .t .slides.mini ul, .card .t .slides.mini li, .card .t .slides.mini .ph { height: 100%; }
.card .t .slides.mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Planet Align: the photo with its two lines set live, centred in the tunnel's light */
.card .t.pa .pa-txt {
  position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; text-align: center; gap: .5em;
  color: #fff; pointer-events: none; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); padding-top: 6%;
}
.pa-txt p { margin: 0; }
.pa-txt .pa-name { font: 400 clamp(22px, 2.4vw, 38px) var(--tw); letter-spacing: .02em; }
.pa-txt .pa-sub { font: 400 clamp(11px, 1vw, 15px) var(--tw); letter-spacing: .04em; }

/* Anthem: the slides fill the screen's width, rounded, with little black around them */
.anthem { min-height: 0; padding: clamp(10px, 1.2vw, 18px); background: var(--deck-bg); place-content: normal; display: block; }
.anthem .slides { width: min(100%, (100vh - 2 * clamp(10px, 1.2vw, 18px)) * 16 / 9); margin: 0 auto; }
.anthem .slides ul { width: 100%; aspect-ratio: 16 / 9; }
.anthem .slides li { border-radius: var(--radius); overflow: hidden; }
.anthem .slides img { width: 100%; height: 100%; object-fit: cover; }
.anthem .slides button { top: auto; bottom: 22px; margin: 0; }
.anthem .prev { left: auto; right: 82px; } .anthem .next { right: 22px; }

/* manifesto: the narrower centred column of tempo.earth */
.manifesto .txt { max-width: 480px; }

/* first principle (Christian): every picture fills its card, cropping in where it has to */
.card .t.contain:not(.white):not(.navy) > img:not(.inset):not(.mid) { object-fit: cover; }

/* the renaissance line (Kuhn, Mitchell, Sheldrake) now sits under "a storyworld book" */
.themes .story { margin-bottom: 36px; }
.themes .para { margin: 0 auto 150px; max-width: 34em; font: 400 clamp(11px, .95vw, 14px)/1.7 var(--mono); letter-spacing: .06em; color: #4d5d78; }
.themes .para b { color: #2b3f6e; }

/* themes: click to read. A frosted veil rises over the film so the words stand out; click again to let it play */
.themes { cursor: pointer; }
.themes::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: rgba(236, 240, 245, .72); -webkit-backdrop-filter: blur(14px) saturate(.8); backdrop-filter: blur(14px) saturate(.8);
  transition: opacity .9s ease;
}
.themes.read::before { opacity: 1; }
.themes > :not(.bg) { position: relative; z-index: 1; }
.themes .th, .themes h3, .themes .story, .themes .para, .frankl { transition: filter .9s, opacity .9s; }
.themes.read .th { filter: contrast(1.25) saturate(1.15); }

/* ---------- the three poems as live text: each line keeps the original's face, colour and break; sizes are the
   source image's pixels scaled to the poem's width, so at rest it sits like the image ---------- */
.poem-live {
  --w: min(23vw, 330px); width: var(--w); margin: 0 auto; container-type: inline-size; cursor: zoom-in;
  color: #222; text-align: left; transition: width .6s cubic-bezier(.2, .7, .2, 1); outline: none;
}
.poem-live .pl {
  margin: 0; font-size: calc(var(--s) / var(--base) * 100cqw); line-height: 1.32; white-space: nowrap;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), color .3s, opacity .9s, filter .3s;
}
.poem-live .gap { height: calc(26 / var(--base) * 100cqw); margin: 0; }
.poem-live.big { cursor: zoom-out; }
/* scroll: lines rise in one after another; hover: a line leans forward and the faint words come up */
[data-anim] .poem-live .pl { opacity: 0; transform: translateY(.5em); transition-delay: calc(var(--i) * 28ms); }
[data-anim] .poem-live.in .pl { opacity: 1; transform: none; }
.poem-live.in .pl:hover { transform: translateX(.35em); transition-delay: 0s; }
.poem-live .pl:hover .g, .poem-live .pl:hover .l, .poem-live .pl:hover .l2, .poem-live .pl:hover .xl,
.poem-live .pl.g:hover, .poem-live .pl.l:hover, .poem-live .pl.l2:hover, .poem-live .pl.xl:hover { color: #222; }
@media (prefers-reduced-motion: reduce) { [data-anim] .poem-live .pl { opacity: 1; transform: none; transition: none; } }

.poem-live .c { text-align: center; } .poem-live .r { text-align: right; }
.poem-live .bd { font-weight: 700; } .poem-live .it { font-style: italic; } .poem-live .ul { text-decoration: underline; text-underline-offset: .18em; }
.poem-live .g { color: #8f8f8f; } .poem-live .g2 { color: #a0a0a0; } .poem-live .g3 { color: #5f5f5f; }
.poem-live .l { color: #c6c6c6; } .poem-live .l2 { color: #b4b4b4; } .poem-live .xl { color: #dadada; } .poem-live .xxl { color: #e8e8e8; }
.poem-live .bl { color: #2f4f8f; } .poem-live .bl2 { color: #6f8fcf; } .poem-live .te { color: #2a9d9a; } .poem-live .te2 { color: #3c8f8a; }
.poem-live .gr { color: #4f8a3a; } .poem-live .coral { color: #d0705a; } .poem-live .hl { background: #f3e7a6; padding: 0 .15em; }
.poem-live .sm { font-size: .8em; } .poem-live .tiny { font-size: .55em; } .poem-live .big { font-size: 1.15em; }
.poem-live .co { font-family: "Comfortaa", sans-serif; } .poem-live .cr { font-family: "Crimson Text", serif; }
.poem-live .ya { font-family: "Yanone Kaffeesatz", sans-serif; } .poem-live .cu { font-family: "Courier Prime", monospace; }
.poem-live .ka { font-family: "Kalam", cursive; } .poem-live .js { font-family: "Josefin Slab", serif; }
.poem-live .ub { font-family: "Ubuntu", sans-serif; font-style: italic; } .poem-live .lb { font-family: "Libre Baskerville", serif; }
.poem-live .ci { font-family: "Cinzel", serif; } .poem-live .ge { font-family: "Gelasio", serif; }
.poem-live .va { font-family: "Varela Round", sans-serif; } .poem-live .ox { font-family: "Oxygen", sans-serif; }
.poem-live .ar { font-family: "Arimo", sans-serif; } .poem-live .se { font-family: "Special Elite", monospace; }
.poem-live .de { font-family: "Delius", cursive; } .poem-live .thin { font-weight: 300; }
.poem-live .sp { letter-spacing: .3em; }
.poem-live .sun { background: #1f2430; color: #d9b25a; font-family: "Cinzel", serif; padding: 0 .3em; border-radius: 3px; }
.poem-live .tri svg { display: block; margin: .4em 0 0 .3em; }

/* every day is earth day: one full screen, the poem zoomed in */
.poem-img.earthday { height: 100vh; min-height: 0; box-sizing: border-box; display: grid; place-items: center; padding: 0 16px; overflow: hidden; }
.poem-live.ed { font-family: "Oxygen", sans-serif; font-weight: 300; --w: min(64vh, 56vw, 840px); }
.poem-live.ed .pl { line-height: 1.42; }
.poem-live.ed.big { --w: min(70vw, 980px); }
/* Pope Francis */
.poem-live.pf { font-family: "Barlow", sans-serif; --w: min(29vw, 420px); margin: 0; }
.poem-live.pf .pl { line-height: 1.38; }
.poem-live.pf .title { color: #222; margin-bottom: .2em; } .poem-live.pf .sym { color: #9a9a9a; letter-spacing: .02em; }
.poem-live.pf.big { --w: min(52vw, 760px); }
/* visions and brushes, for Aunt Kit: kept as designed; only the motion is new */
.poem-live.kt { font-family: "Mukta", sans-serif; --w: min(24vw, 340px); margin: 0; }
.poem-live.kt .pl { line-height: 1.42; }
.poem-live.kt.big { --w: min(40vw, 560px); }
@media (max-width: 760px) {
  .poem-live.ed, .poem-live.pf, .poem-live.kt { --w: min(92vw, 460px); margin: 0 auto; }
  .poem-img.earthday { min-height: 0; }
}

/* Aunt Kit's poem stays the original image; it unrolls top to bottom as it comes into view, lifts a touch on hover,
   and a click opens it large */
[data-anim] .kit .poem img { clip-path: inset(0 0 100% 0); transition: clip-path 2.6s cubic-bezier(.3, .6, .2, 1), transform .5s; }
[data-anim] .kit .poem.in img { clip-path: inset(0 0 0 0); }
.kit .poem img:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { [data-anim] .kit .poem img { clip-path: none; transition: none; } }

/* ---------- the mind follows the heart, as one packed mass of round cells (laid out by main.js). The front
   cluster is large and in full colour; the others wait small, grey and soft around it. A click on any of them brings
   that cluster forward and its cells push their neighbours aside ---------- */
.cells { background: #f1efea; padding: clamp(10px, 1.2vw, 18px); overflow: hidden; }
.mass { position: relative; min-height: 60vh; }
.cell {
  position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 50%; overflow: hidden; container-type: inline-size;
  background: #fff; box-shadow: 0 14px 34px rgba(40, 30, 10, .14), inset 0 0 0 1px rgba(0, 0, 0, .04);
  filter: saturate(.35) brightness(1.04); opacity: .55; cursor: pointer; outline: none;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s, filter 1s, opacity 1s;
}
.mass.ready .cell {
  transition: left 1.1s cubic-bezier(.5, 0, .2, 1), top 1.1s cubic-bezier(.5, 0, .2, 1), width 1.1s cubic-bezier(.5, 0, .2, 1),
    height 1.1s cubic-bezier(.5, 0, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s, filter 1s, opacity 1s;
}
.cell:not(.fwd):hover, .cell:not(.fwd):focus-visible { filter: saturate(.8); opacity: .85; }
.cell.fwd { filter: none; opacity: 1; cursor: default; z-index: 1; }
.cell:hover { transform: scale(1.04); z-index: 2; box-shadow: 0 26px 56px rgba(40, 30, 10, .24); }
.cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cell.whole img { object-fit: contain; padding: 14%; box-sizing: border-box; }
.cell.fwd img { cursor: zoom-in; }
@media (prefers-reduced-motion: no-preference) {
  .cell { animation: drift 9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -2.3s); }
  @keyframes drift { from { translate: 0 0; } to { translate: 0 -1.2%; } }
}
.cell.note { display: grid; place-items: center; text-align: center; }
.cell-txt { width: 70%; font-size: calc(var(--fs) * 100cqw); line-height: 1.55; }
.cell-txt p, .cell-txt blockquote { margin: 0; }
.cell-txt.accent { width: 100%; height: 100%; display: grid; place-items: center; background: var(--sage); }
.cell-txt .mfh { font-family: var(--mono); letter-spacing: .04em; width: 70%; background: none; padding: 0; margin: 0; aspect-ratio: auto; border: 0; }
.cell-txt .bhn { font-family: var(--mono); } .cell-txt .bhn cite { display: block; margin-top: 1em; font-style: normal; }
.cell-txt.faint, .cell-txt .bhn-poem { color: #8e8e8e; font-family: var(--mono); }
.cell-txt .grave { max-width: none; font-size: 1em; }
.cell-txt .ig, .cell-txt .fb { font-size: 1em; text-align: left; }

/* ---------- one type system, taken from the opening: DM Mono is the voice (the what-if line, themes, captions),
   Questrial the wordmark (tempo), Libre Baskerville the small headings (themes), Nunito Sans for interface labels.
   The typewriter, Courier, Crimson and Roboto stand-ins fold into these. The poems and the manifesto keep their
   own mixed faces, since the mix is the artwork. ---------- */
.sheet[data-full] { --tw: var(--mono); --roboto: var(--avenir); }
.sheet[data-full] .grave { font-family: var(--serif); }
.themes .story { letter-spacing: .02em; }
.pa-txt .pa-name { font-family: var(--round); letter-spacing: .04em; }
.pa-txt .pa-sub { font-family: var(--mono); letter-spacing: .08em; }

/* ---------- film moments: the film is the section. Nearly full width, on a deep ground, its line set into its
   foot over a soft shade; the same caption treatment as the media cards ---------- */
.sage.film-moment {
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 100vh; padding: 5vh clamp(10px, 2vw, 28px); box-sizing: border-box;
  background: radial-gradient(120% 90% at 50% 40%, #1b262b, #0b1114 70%);
}
.film {
  position: relative; margin: 0; width: min(100%, 158vh); justify-self: center; aspect-ratio: 16 / 9; border-radius: calc(var(--radius) + 4px);
  overflow: hidden; box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}
.film img, .film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 2.4s cubic-bezier(.2, .7, .2, 1); }
.film:hover img { transform: scale(1.03); }
.film .play {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); transition: transform .5s, background .5s;
}
.film .play::after { content: ""; position: absolute; left: 31px; top: 25px; border-left: 20px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.film:hover .play { transform: scale(1.08); background: rgba(255, 255, 255, .24); }
.film-cap, .card .t.navy-v .cap2, .card .t.glitch .hdr {
  font-family: var(--mono) !important; letter-spacing: .03em; color: #eef2f2;
}
.film-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14% 5% 4.5%; margin: 0;
  background: linear-gradient(rgba(5, 9, 11, 0), rgba(5, 9, 11, .82)); font-size: clamp(14px, 1.55vw, 24px); line-height: 1.6;
  transform: translateY(12px); opacity: .92; transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .8s;
}
.film:hover .film-cap { transform: none; opacity: 1; }
.film-cap .g { color: #9fb0b2; } .film-cap .nv { color: #9fbcff; } .film-cap .r { color: #ff9c8a; } .film-cap .gr { color: #a9d79a; }
/* the media cards take the same foot caption */
.card .t.navy-v .cap2, .card .t.glitch .hdr {
  top: auto !important; bottom: 0 !important; padding: 70px 24px 22px !important;
  background: linear-gradient(rgba(5, 8, 12, 0), rgba(5, 8, 12, .82)) !important;
}
.card .t.glitch .cap3 { top: 22px; }
.card .t.navy-v .cap2 { padding-bottom: 52px !important; }
@media (max-width: 760px) {
  .sage.film-moment { min-height: 0; padding: 40px 10px; }
  .film { aspect-ratio: 4 / 5; }
}

/* ---------- "a spoken word with a circle": set as a small title page. A faint hand-drawn circle turns slowly behind
   the words; the date sits above as a quiet label, the title in the serif, the line under it in the mono ---------- */
.card .t.spoken { display: grid !important; place-items: center; background: radial-gradient(90% 70% at 50% 45%, #1a2430, #0d1218) !important; }
.card .t.spoken::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 72%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  border: 1px dashed rgba(160, 190, 230, .28); box-shadow: 0 0 0 14px rgba(160, 190, 230, .03), inset 0 0 60px rgba(120, 160, 220, .08);
  animation: spin 60s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .card .t.spoken::before { animation: none; } }
.card .t.spoken > div { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; width: 64%; }
.card .t.spoken p:first-child { order: 2; margin: 0; font: 400 clamp(11px, .95vw, 14px)/1.75 var(--mono); color: rgba(235, 240, 245, .78); letter-spacing: .04em; }
.card .t.spoken p:first-child .lb {
  display: block; margin-bottom: .9em; font: italic 400 clamp(17px, 1.7vw, 26px)/1.3 var(--serif); color: #b9cdf0; letter-spacing: 0;
}
.card .t.spoken p:first-child br { display: none; }
.card .t.spoken .dates {
  order: 1; margin: 0 0 1.6em; padding: 0; display: flex; gap: .9em; align-items: baseline; font: 400 clamp(10px, .8vw, 12px) var(--mono);
  letter-spacing: .22em; text-transform: uppercase; color: rgba(185, 205, 240, .7);
}
.card .t.spoken .dates small { margin: 0; font-size: 1em; letter-spacing: .14em; text-transform: none; color: rgba(235, 240, 245, .5); }
.card .t.spoken .dates span::after { content: "·"; margin-left: .9em; }
.card:hover .t.spoken::before { border-color: rgba(160, 190, 230, .45); }

/* ---------- early march and the manifesto: one screen each, words centred, on near-white with a faint pattern of
   its own drawn from earth systems (terrain contours for the land bridge, a torsion lattice for the manifesto) ---------- */
.march, .manifesto { position: relative; height: 100vh; min-height: 0; box-sizing: border-box; padding: 0 16px; display: grid; place-items: center; overflow: hidden; background: #f7f8f7; }
.march > img.bg, .manifesto > img.bg { display: none; }
.march::before, .manifesto::before { content: ""; position: absolute; inset: -4%; background: center / cover no-repeat; opacity: .13; pointer-events: none; }
.march::before { background-image: url(assets/img/pattern-topo.svg); animation: breathe 40s ease-in-out infinite alternate; }
.manifesto::before { background-image: url(assets/img/pattern-lattice.svg); opacity: .11; animation: breathe 50s ease-in-out infinite alternate-reverse; }
@keyframes breathe { from { transform: scale(1) rotate(0); } to { transform: scale(1.06) rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) { .march::before, .manifesto::before { animation: none; } }
.march .txt, .manifesto .txt { position: relative; z-index: 1; margin: 0; }
.manifesto .sig { margin-top: 5vh; }
.manifesto .newer { margin-top: 3vh; }
.manifesto .txt { max-width: 540px; font-size: max(11px, min(17px, 1.25vw, 1.8vh)); }
.manifesto .sig { font-size: max(15px, min(21px, 2.3vh)); }
.card .t.pa .pa-txt { inset: auto 0 0 0; padding: 22% 8% 9%; place-content: end center; background: linear-gradient(rgba(6, 8, 30, 0), rgba(6, 8, 30, .78)); }
.card .t.spoken .dates { white-space: nowrap; letter-spacing: .16em; }

/* ---------- Christian's notes, round three ---------- */
/* hover: the whole card grows a little and comes forward; the picture inside no longer zooms in its crop */
.card { will-change: transform; }
.card:hover .t > img:not(.inset):not(.mid), .card:hover .t > video:not(.portrait):not(.v),
.card:hover .t.fit > img:not(.blur) { transform: none; }
.card:hover, [data-anim] .deck.in .card:hover { transform: scale(1.035); z-index: 5; transition-delay: 0s; }
.pope-v .pope-hero { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.pope-v .pope-hero:hover { transform: scale(1.015); }

/* Planet Align: the astronaut's garden station, linked to the studio */
.card a.t.pa { color: inherit; text-decoration: none; cursor: pointer; }
.card .t.pa > img { object-position: 62% 50%; }

/* the quantum run: each card takes its picture's width, rows share one height, so nothing is cropped */
.deck.just { display: flex; flex-direction: column; height: auto; }
.deck.just .jrow { display: flex; gap: var(--pad); }
.deck.just .card { flex: var(--a) 1 0; min-width: 0; aspect-ratio: var(--a); }
@media (max-width: 760px) {
  .deck.just { overflow: visible; }
  .deck.just .jrow { flex-direction: column; }
  .deck.just .card { flex: none; width: 100%; }
}

/* every day is earth day: centred on the screen, each line surfacing out of a soft blur, slowly, one after another */
.poem-img.earthday .poem-live.ed { margin: 0 auto; translate: calc(var(--w) * .065) 0; }   /* the lines are flush left and mostly short, so the block sits a touch right of centre to look centred */
[data-anim] .poem-live.ed .pl {
  filter: blur(7px); transform: translateY(.9em); transition-duration: 1.6s, .3s, 1.6s, 1.6s;
  transition-property: transform, color, opacity, filter; transition-delay: calc(var(--i) * 85ms);
  transition-timing-function: cubic-bezier(.2, .7, .2, 1);
}
[data-anim] .poem-live.ed.in .pl { filter: none; transform: none; }

/* July 4th: the film sits in the run like the decks around it, one screen tall with no ground above or below,
   and a small play mark at its foot like the native control on "circa 2021" */
.sage.film-moment { min-height: 0; padding: var(--pad, clamp(10px, 1.2vw, 18px)); background: var(--deck-bg); }
.sage.film-moment .film { width: min(100%, (100vh - 2 * clamp(10px, 1.2vw, 18px)) * 16 / 9); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); border-radius: var(--radius); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.sage.film-moment .film:hover { transform: scale(1.012); }
.film:hover img { transform: none; }
.film .play {
  left: 22px; top: auto; bottom: 22px; width: 38px; height: 38px; margin: 0; z-index: 2; border-radius: 50%;
  background: rgba(20, 24, 28, .55); box-shadow: none;
}
.film .play::after { left: 14px; top: 11px; border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; }
.film:hover .play { transform: none; background: rgba(20, 24, 28, .75); }
.film-cap { padding-left: 76px; padding-bottom: 26px; }
@media (max-width: 760px) { .sage.film-moment { padding: 10px; } .sage.film-moment .film { width: 100%; } }

/* "a spoken word with a circle", quieter: a faint ring, the title smaller, the date down in the corner */
.card .t.spoken::before { width: 64%; border: 1px solid rgba(170, 195, 230, .12); box-shadow: none; animation-duration: 120s; }
.card:hover .t.spoken::before { border-color: rgba(170, 195, 230, .22); }
.card .t.spoken p:first-child { color: rgba(235, 240, 245, .62); }
.card .t.spoken p:first-child .lb { font-size: clamp(15px, 1.35vw, 21px); color: rgba(200, 215, 240, .9); margin-bottom: .7em; }
.card .t.spoken .dates {
  position: absolute; right: 22px; bottom: 18px; margin: 0; gap: .7em; font-size: clamp(9px, .7vw, 11px);
  color: rgba(185, 205, 240, .5); letter-spacing: .14em;
}
.card .t.spoken .dates small { color: rgba(235, 240, 245, .32); }
.card .t.spoken > div { position: static; }

/* planetary mystics: the words gather in phrase by phrase, the lattice drifts on two layers, and a soft light
   follows the pointer */
.manifesto::after {
  content: ""; position: absolute; inset: -10%; pointer-events: none; opacity: .06;
  background: url(assets/img/pattern-lattice.svg) center / 70% repeat; animation: drift2 90s linear infinite;
}
@keyframes drift2 { to { transform: rotate(360deg); } }
.manifesto .txt::before {
  content: ""; position: fixed; left: var(--mx, 50%); top: var(--my, 50%); width: 46vmin; height: 46vmin; translate: -50% -50%;
  border-radius: 50%; pointer-events: none; z-index: -1; opacity: 0; transition: opacity 1s;
  background: radial-gradient(closest-side, rgba(170, 215, 205, .35), rgba(170, 215, 205, 0));
}
.manifesto:hover .txt::before { opacity: 1; }
.manifesto .txt { isolation: isolate; }
[data-anim] .manifesto .rv { opacity: 0; filter: blur(5px); transition: opacity 1.2s ease, filter 1.2s ease, color .4s; transition-delay: calc(var(--i) * 22ms); }
[data-anim] .manifesto.in .rv { opacity: 1; filter: none; }
.manifesto.in .rv:hover { color: #2a9d9a; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .manifesto::after { animation: none; }
  [data-anim] .manifesto .rv { opacity: 1; filter: none; }
}

/* Pope Francis: the caption flush along the photo's foot, and the column of moments stretching to the full height
   of the left side so nothing is left open at the bottom right */
.pope-v .pope-hero { position: relative; }
.pope-v .pope-hero figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; top: auto; margin: 0; padding: 70px 28px 20px; transform: none;
  background: linear-gradient(rgba(5, 8, 12, 0), rgba(5, 8, 12, .7)); color: #eef2f2; text-align: left;
  font: 400 clamp(11px, .95vw, 14px)/1.5 var(--mono); letter-spacing: .05em; white-space: normal;
}
.deck.pope-stack { display: flex; flex-direction: column; align-self: stretch; }
.pope-stack .card, .pope-stack .card:first-child { aspect-ratio: auto; flex: 1 1 0; min-height: 0; }
.pope-stack .card:first-child { flex-grow: 1.6; }
@media (max-width: 760px) {
  .deck.pope-stack { display: grid; }
  .pope-stack .card, .pope-stack .card:first-child { aspect-ratio: 4 / 3; flex: none; }
}
.cell-txt :is(p, blockquote, .bhn, .bhn-poem, .mfh, .grave, .ig, .fb) { font-size: 1em; }

/* =================== round four: tempo as the publication, this page its first edition =================== */
/* the cover: the earth-rise film in fuller colour, the tempo masthead floating over it as a rounded banner, and
   "a storyworld book" hanging from it like a tab */
.cover {
  --pad: clamp(10px, 1.2vw, 18px);
  position: relative; min-height: 100vh; box-sizing: border-box; padding: var(--pad); overflow: hidden;
  display: grid; grid-template-rows: auto auto 1fr; justify-items: center; background: #213247;
}
.cover > video.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.25) contrast(1.14) brightness(.95); }
.cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(8, 16, 34, .25), rgba(8, 16, 34, 0) 40%, rgba(8, 16, 34, .35)); }
.masthead {
  position: relative; z-index: 2; width: 100%; height: clamp(170px, 26vh, 260px); border-radius: calc(var(--radius) + 8px);
  overflow: hidden; display: grid; place-items: center; background: #1f2f6a;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.masthead > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; mix-blend-mode: screen; }
.logo { position: relative; margin: 0; display: flex; align-items: baseline; color: #fff; font: 400 clamp(64px, 8.4vw, 132px)/1 var(--round); letter-spacing: .005em; }
.logo .o {
  display: inline-block; width: .58em; height: .58em; margin-left: .04em; box-sizing: border-box; border-radius: 50%;
  border: .125em solid #fff; filter: drop-shadow(.07em .02em 0 rgba(160, 166, 176, .95));
}
.cover-in {
  position: relative; z-index: 1; margin-top: -2px; padding: 26px clamp(24px, 4vw, 56px) 30px; text-align: center; max-width: min(720px, 92%);
  border-radius: 0 0 calc(var(--radius) + 6px) calc(var(--radius) + 6px); background: rgba(246, 248, 251, .86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 24px 50px rgba(0, 0, 0, .28);
}
.cover-in .story { margin: 0 0 14px; font: 400 clamp(22px, 2.3vw, 32px) var(--mono); color: #6f7f99; letter-spacing: .02em; }
.cover-in .story .lg { color: #a8b3c4; }
.cover-in .para { margin: 0; font: 400 clamp(11px, .95vw, 14px)/1.7 var(--mono); letter-spacing: .06em; color: #4d5d78; }
.cover-in .para b { color: #2b3f6e; }

/* the editions, newest first, as banners on the deep ground of the decks; the martian one opens its edition */
.editions { --pad: clamp(10px, 1.2vw, 18px); background: var(--deck-bg); padding: var(--pad) var(--pad) 0; display: grid; gap: var(--pad); }
.edition {
  position: relative; min-height: 78vh; border-radius: calc(var(--radius) + 8px); overflow: hidden; color: #fff;
  display: grid; place-items: center; box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
}
.bleed.whatif.edition { position: relative; top: auto; min-height: 86vh; cursor: pointer; margin-bottom: var(--pad); }
.edition .ed-no { margin: 0 0 28px; font: 400 clamp(10px, .8vw, 12px) var(--mono); letter-spacing: .28em; text-transform: uppercase; opacity: .78; }
.edition.gl .q { font: 400 clamp(18px, 2vw, 28px)/1.3 var(--mono); max-width: 24em; margin: 0 auto; letter-spacing: .02em; }
.edition .in { position: relative; z-index: 1; text-align: center; padding: 0 16px; }
/* greenland: no picture yet, so an arctic light: ice blues, terrain contours and a slow aurora */
.gl-art { position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 110%, #d9eef0 0%, #7fb6c2 26%, #24586f 58%, #0c2234 100%); }
.gl-art::before { content: ""; position: absolute; inset: -6%; background: url(assets/img/pattern-topo.svg) center / cover; opacity: .2; filter: invert(1); animation: breathe 50s ease-in-out infinite alternate; }
.gl-art::after {
  content: ""; position: absolute; left: -20%; right: -20%; top: 4%; height: 46%; filter: blur(40px); opacity: .55;
  background: linear-gradient(100deg, rgba(90, 255, 200, 0), rgba(90, 255, 200, .55) 30%, rgba(120, 170, 255, .45) 55%, rgba(200, 120, 255, 0) 80%);
  animation: aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora { from { transform: translateX(-8%) skewY(-4deg); } to { transform: translateX(8%) skewY(3deg); } }
@media (prefers-reduced-motion: reduce) { .gl-art::before, .gl-art::after { animation: none; } }
/* the edition below its banner, closed until opened */
.ed-body { display: grid; grid-template-rows: 1fr; margin: 0 calc(-1 * var(--pad)); transition: grid-template-rows 1.4s cubic-bezier(.6, 0, .2, 1); }
.issue:not(.open) .ed-body { grid-template-rows: 0fr; }
.ed-body > div { min-height: 0; overflow: hidden; }
.issue.shown .ed-body > div { overflow: visible; }
.whatif.edition .chev { transition: transform .6s, opacity .3s; }
.issue.open .whatif.edition .chev { transform: rotate(225deg) scaleY(.7); }
.whatif.edition:hover .bg { transform: scale(1.02); }
.whatif.edition .bg { transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }

/* the themes, now their own section at the head of the edition: ROCK STARCHITECTURE & BLISS MYSTICISM leads, and the
   themes come in under it line by line, larger so every one can be read, each in its own face */
.themes2 { position: relative; padding: 16vh 16px 10vh; background: #f4f6f8; text-align: center; overflow: hidden; }
.themes2::before { content: ""; position: absolute; inset: -4%; background: url(assets/img/pattern-lattice.svg) center / cover; opacity: .08; pointer-events: none; animation: breathe 60s ease-in-out infinite alternate; }
.themes2 > * { position: relative; }
.th-label { margin: 0; font: 400 clamp(16px, 1.4vw, 20px) var(--serif); color: #555; text-decoration: underline; text-underline-offset: 5px; }
.th-main { margin: .5em auto .9em; max-width: 15em; font: 500 clamp(28px, 4.2vw, 66px)/1.18 var(--mono); letter-spacing: .05em; color: #141821; }
.th-main .bl { color: #3e7be0; font-weight: 400; }
.th-list { max-width: 1100px; margin: 0 auto; }
.themes2 .th-list p { margin: .5em 0; line-height: 1.45; }
.themes2 .th-list .th-xs { font-size: clamp(13px, 1.15vw, 17px); }
.themes2 .th-list .th-s { font-size: clamp(15px, 1.45vw, 22px); }
.themes2 .th-list .th-m { font-size: clamp(17px, 1.75vw, 26px); }
.themes2 .th-list .th-l { font-size: clamp(22px, 2.5vw, 38px); }
.themes2 .lg { color: #9aa6b4; } .themes2 .g { color: #77818d; }
[data-anim] .themes2 .th-list p { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 1.2s, transform 1.2s cubic-bezier(.2, .7, .2, 1), filter 1.2s; transition-delay: calc(var(--i) * 130ms); }
[data-anim] .themes2.in .th-list p { opacity: 1; transform: none; filter: none; }
.themes2.in .th-list p:hover { transform: scale(1.04); transition-delay: 0s; }
.themes2 .frankl { padding-top: 12vh; }
@media (prefers-reduced-motion: reduce) { [data-anim] .themes2 .th-list p { opacity: 1; transform: none; filter: none; } }

/* every day is earth day: smaller, with plenty of air around it; the white is what fills the screen */
.poem-live.ed { --w: min(42vh, 38vw, 560px); }
.poem-live.ed.big { --w: min(62vh, 60vw, 820px); }

/* Planet Align: the space station plate, its name in Special Elite and the line in Space Grotesk */
.card .t.pa > img { object-position: 50% 50%; }
.sheet[data-full] .pa-txt .pa-name { font-family: "Special Elite", var(--mono); letter-spacing: .02em; }
.sheet[data-full] .pa-txt .pa-sub { font-family: "Space Grotesk", sans-serif; letter-spacing: .14em; text-transform: lowercase; }

/* a spoken word with a circle: a wider ring, the title on one line, faint tints in the line beneath */
.card .t.spoken::before { width: 90%; }
.card .t.spoken > div { width: 82%; }
.card .t.spoken p:first-child .lb { white-space: nowrap; }
.card .t.spoken .h1 { color: #e9c6d2; } .card .t.spoken .h2 { color: #c8d6ee; } .card .t.spoken .h3 { color: #cfe4d4; } .card .t.spoken .h4 { color: #e9dcbf; }

/* the signed book: the inscription set on the teal tunnel like a page held up to the light */
.card .t.book > img.inset { left: 50%; top: 50%; width: auto; height: 76%; translate: -50% -50%; aspect-ratio: 438 / 580; object-fit: cover; border-radius: 12px; box-shadow: 0 24px 50px rgba(0, 0, 0, .5); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.card:hover .t.book > img.inset { transform: rotate(-1.5deg); }

/* the mind follows the heart, as blocks: one band per cluster, tiled edge to edge (a treemap from build_mag.py).
   Each cluster's lead sits up front, raised on a deep shadow; the rest sit back, a little recessed, their pictures
   drifting inside their frames as the page scrolls */
.mosaic { --g: clamp(4px, .5vw, 8px); background: #f1efea; padding: var(--g); display: grid; gap: 0; overflow: hidden; }
.band { position: relative; aspect-ratio: var(--ar); container-type: inline-size; --m: 1; }
.blk {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); box-sizing: border-box; padding: var(--g);
  transition: scale .6s cubic-bezier(.2, .7, .2, 1);
}
.blk > * , .blk > img { border-radius: var(--radius); }
.blk > img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.blk.back > img { object-position: 50% calc(50% + var(--py, 0) * 1%); }
.blk { --sh: 0 6px 18px rgba(40, 30, 10, .1), inset 0 0 0 1px rgba(0, 0, 0, .04); }
.blk > img, .blk > .cell-txt { box-shadow: var(--sh); background: #fff; }
.blk.back { --sh: 0 2px 6px rgba(40, 30, 10, .08), inset 0 10px 24px rgba(40, 30, 10, .08); }
.blk.front { z-index: 2; --sh: 0 34px 80px rgba(40, 30, 10, .34), 0 8px 18px rgba(40, 30, 10, .14); }
.blk:hover { scale: 1.025; z-index: 3; }
.blk.whole > img { object-fit: contain; padding: 8%; box-sizing: border-box; }
.blk .cell-txt { width: 100%; height: 100%; box-sizing: border-box; display: grid; place-items: center; padding: 8% 10%; overflow: hidden;
  font-size: max(11px, calc(var(--fs) * var(--m) * 1cqw)); line-height: 1.6; text-align: left; }
.blk .cell-txt.accent { text-align: center; }
@media (max-width: 760px) { .band { aspect-ratio: calc(var(--ar) / 2.2); --m: 1.48; } }
.blk > .cell-txt.accent { background: var(--sage); }
@media (max-width: 760px) { .band { --m: 1.2; } }

/* hover, everywhere: the card grows and its shadow lifts and lightens; nothing goes darker */
.card:hover::after { opacity: .3; }
.card:has(.over):hover::after { opacity: .5; }
.card:hover, [data-anim] .deck.in .card:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 70px rgba(150, 180, 220, .2);
}
.pope-v .card:hover { box-shadow: 0 22px 50px rgba(0, 0, 0, .1), 0 0 0 1px rgba(255, 255, 255, .6); }
.blk:hover > img, .blk:hover > .cell-txt { box-shadow: 0 30px 70px rgba(255, 250, 240, .9), 0 16px 40px rgba(40, 30, 10, .14); }

/* the ship on a moon: one row of wide cards, the words always on */
.deck.just .card .over { opacity: 1; transform: none; }
.deck.just .card::after { opacity: .45; }

/* the run screenshot shown whole, on a soft blurred copy of itself; the legend card close in */
.card .t.whole > img.soft { position: absolute; inset: 0; filter: blur(24px) brightness(.7) saturate(1.2); transform: scale(1.2); }
.card .t.whole > img:not(.soft) { position: relative; object-fit: contain; }
.card .t.flank > .mid { left: 50%; width: auto; max-width: 100%; translate: -50% 0; object-fit: contain; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }

/* Pope Francis: squarer corners, tighter, and a white breath on the sides of the pictures that face the poem;
   the caption sits in the hero's white fade */
.pope.pope-v { --radius: 7px; --gap: clamp(5px, .55vw, 9px); }
.pope-v .pope-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .78)); }
.pope-v .pope-hero figcaption {
  z-index: 1; background: none; color: #4a4f57; padding: 0 22px 14px; font-size: clamp(10px, .82vw, 13px); letter-spacing: .08em;
}
.pope-stack .card::after { display: block; content: ""; inset: 0; opacity: 1; border-radius: 0; background: linear-gradient(to right, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 24%); }
.pope-row .card::after { display: block; content: ""; inset: 0; opacity: 1; border-radius: 0; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 22%); }
.pope-stack .card:hover::after, .pope-row .card:hover::after { opacity: 1; }
.pope-left { padding-top: clamp(26px, 3.4vw, 54px); }
.deck.pope-row { margin-top: clamp(26px, 3.4vw, 54px); }

/* Aunt Kit: her picture smaller, the poem a little larger; a lens follows the pointer over the poem and magnifies
   just the words under it */
.kit { grid-template-columns: 30% 1fr; gap: 0 9%; }
.kit .poem { position: relative; top: auto; right: auto; }
.kit .poem img { width: min(31vw, 450px); }
.kit .poem img:hover { transform: none; }
.kit .lens {
  position: absolute; z-index: 3; width: 190px; height: 190px; border-radius: 50%; pointer-events: none; translate: -50% -50%;
  background-repeat: no-repeat; background-color: #fff; opacity: 0; scale: .7; transition: opacity .3s, scale .3s;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .06);
}
.kit .poem:hover .lens { opacity: 1; scale: 1; }
@media (hover: none) { .kit .lens { display: none; } }

/* early march: the contours drift on two layers and a slow light passes across them */
.march::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none; opacity: .09;
  background: url(assets/img/pattern-topo.svg) center / 60% repeat; animation: contour 70s linear infinite;
}
@keyframes contour { from { transform: translate(0, 0) rotate(0); } to { transform: translate(-8%, 6%) rotate(8deg); } }
.march .txt::before {
  content: ""; position: absolute; inset: -30vh -40vw; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 30% 50%, rgba(160, 210, 190, .22), rgba(160, 210, 190, 0)); animation: sweep 26s ease-in-out infinite alternate;
}
@keyframes sweep { from { transform: translateX(-12%); } to { transform: translateX(22%); } }
.march .txt { isolation: isolate; }
@media (prefers-reduced-motion: reduce) { .march::after, .march .txt::before { animation: none; } }
/* the grid captions (the ship on a moon, ivy leaves) are not the bento subsections that share their class name */
.card .over .sub { all: unset; display: block; max-width: 34em; margin: 0 auto; color: #fff; text-align: center; font: 400 clamp(12px, 1.05vw, 16px)/1.5 var(--mono); letter-spacing: .03em; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.card .over .sub::after { display: none; }
.card .t .slides.mini li { overflow: hidden; }
.card .t .slides.mini ul { grid-template-rows: 100%; }
.deck.just .card .over { display: flex; align-items: flex-end; justify-content: center; padding: 0 6% 7%; box-sizing: border-box; }
.pope-v .pope-hero::after { background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .88)); }
.pope-v .pope-hero figcaption { color: #2f343b; font-size: clamp(11px, .9vw, 14px); }

/* ---------- round five: films with words play only when asked; outbound links carry an arrow ---------- */
.card .t.watch { display: block; padding: 0 !important; background: #0b0f14 !important; cursor: pointer; }
.card .t.watch > video { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; object-fit: cover; }
.card .t.watch .play {
  position: absolute; z-index: 3; left: 20px; bottom: 20px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(20, 24, 28, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .4s, opacity .5s;
}
.card .t.watch .play::after { content: ""; position: absolute; left: 14px; top: 11px; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.card .t.watch:hover .play { background: rgba(20, 24, 28, .8); }
.card .t.watch .film-cap {
  z-index: 2; padding: 70px 20px 20px 72px; font-size: clamp(12px, 1.05vw, 16px); line-height: 1.55; pointer-events: none;
  transform: none; opacity: 1; transition: opacity .5s;
}
.card .t.watch.playing .play, .card .t.watch.playing .film-cap { opacity: 0; pointer-events: none; }
.card .t.watch.playing { cursor: auto; }
.film-cap .glitch-tag { float: right; margin-left: 12px; font: 700 1.3em var(--mono); color: #9ca7ff; letter-spacing: .02em; }
.card:has(.t.watch.on)::after { display: none; }

.card a.t.go-link, .card a.t.pa { position: relative; }
.card .t .go {
  position: absolute; z-index: 4; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font: 500 19px/1 system-ui, sans-serif; color: #fff;
  background: rgba(18, 22, 28, .42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); transition: transform .5s cubic-bezier(.2, .7, .2, 1), background .4s;
}
.card .t:hover .go { transform: translate(2px, -2px); background: rgba(18, 22, 28, .62); }
.card .t.sam { background: #e9e6e2 !important; }
.card .t.sam > img { object-fit: cover; object-position: 17% 100%; transform: scale(1.12); transform-origin: 28% 82%; }
.card .t.sam .over { opacity: 1; transform: none; position: absolute; inset: auto 0 0 0; padding: 60px 22px 20px; background: linear-gradient(rgba(10, 12, 16, 0), rgba(10, 12, 16, .62)); }
.card .t.sam .samlink { position: static; font: 400 clamp(14px, 1.3vw, 19px) var(--mono); color: #fff; letter-spacing: .04em; }

/* his reel by the circuit band, and "off the beaten path": covers with the same play mark, nothing autoplays */
.sage.reel-moment { grid-template-columns: minmax(0, 1fr); }
.film.watch { cursor: pointer; }
.film.watch.playing { cursor: auto; }
.film.watch.playing .play { opacity: 0; pointer-events: none; }
.cards figure.watch { cursor: pointer; }
.cards figure.watch > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cards figure.watch .play {
  position: absolute; z-index: 3; left: 20px; bottom: 20px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(20, 24, 28, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .5s, background .4s;
}
.cards figure.watch .play::after { content: ""; position: absolute; left: 14px; top: 11px; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.cards figure.watch:hover .play { background: rgba(20, 24, 28, .8); }
.cards figure.watch.playing .play { opacity: 0; pointer-events: none; }

/* live-36 as one screen of rounded cards (Christian's reference: three across, then two at 2:3) */
.cards { gap: var(--pad, clamp(10px, 1.2vw, 18px)); padding: var(--pad, clamp(10px, 1.2vw, 18px)); background: var(--deck-bg);
  grid-auto-rows: calc((100vh - 3 * clamp(10px, 1.2vw, 18px)) / 2); box-sizing: border-box; }
.cards figure { border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s; }
.cards figure:hover { transform: scale(1.02); box-shadow: 0 26px 60px rgba(0, 0, 0, .28); }
.cards figure > img, .cards figure > video { width: 100%; height: 100%; object-fit: cover; }
.cards .c3 > img { object-position: 50% 70%; }
/* "the now": his face at the top of the frame, as on the live site */
.bleed.now > img.bg { object-position: 50% 4%; }
@media (max-width: 760px) { .cards { grid-auto-rows: 62vw; } }
.cards .c0 > img { object-position: 50% 62%; }

/* hover, round six (Christian): a white highlight round the card and the picture zooms in inside it; the card stays put */
.card:hover, [data-anim] .deck.in .card:hover, .cards figure:hover, .sage.film-moment .film:hover, .blk:hover { transform: none; scale: none; }
.card:hover, [data-anim] .deck.in .card:hover, .cards figure:hover, .sage.film-moment .film:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 38px rgba(255, 255, 255, .32), 0 20px 50px rgba(0, 0, 0, .3);
}
.pope-v .card:hover { box-shadow: 0 0 0 2px #fff, 0 0 30px rgba(255, 255, 255, .9), 0 18px 40px rgba(0, 0, 0, .12); }
.card .t > img, .card .t > video, .cards figure > img, .cards figure > video, .film > img, .film > video, .blk > img {
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.card:hover .t > img:not(.inset):not(.soft), .card:hover .t > video, .card:hover .t.fit > img:not(.blur),
.cards figure:hover > img, .cards figure:hover > video, .film:hover > img, .film:hover > video { transform: scale(1.07); }
.card:hover .t.sam > img { transform: scale(1.22); }
.blk:hover > img, .blk:hover > .cell-txt { box-shadow: 0 0 0 2px #fff, 0 0 34px rgba(255, 255, 255, .85); }
.blk:hover > img { transform: scale(1.06); }
.card:hover .t.sam > img:not(.inset):not(.soft) { transform: scale(1.22); }
/* the glitch caption: place, date and tag on three short lines, close together */
.card .t.watch .film-cap { line-height: 1.38; white-space: nowrap; }
.film-cap .glitch-tag { float: none; display: block; margin: 3px 0 0; font-size: 1.15em; line-height: 1.2; }
@media (max-width: 760px) { .card .t.watch .film-cap { font-size: 10.5px; padding: 60px 10px 18px 62px; } .card .t.watch .play { left: 14px; bottom: 18px; } }

/* the run screenshots: close in under the congrats line, drag to reveal their tops */
.card .t.pan { cursor: grab; touch-action: pan-x; user-select: none; -webkit-user-select: none; }
.card .t.pan.dragging { cursor: grabbing; }
.card .t.pan > img { object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); -webkit-user-drag: none; pointer-events: none; }
.card:hover .t.pan > img:not(.inset):not(.soft) { transform: none; }
.card .t.pan .grip {
  position: absolute; z-index: 3; left: 50%; top: 12px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px;
  background: rgba(255, 255, 255, .75); box-shadow: 0 1px 6px rgba(0, 0, 0, .4); transition: opacity .5s, transform .5s;
}
.card .t.pan .grip::after {
  content: ""; position: absolute; left: 50%; top: 11px; width: 9px; height: 9px; margin-left: -6px;
  border-right: 2px solid rgba(255, 255, 255, .8); border-bottom: 2px solid rgba(255, 255, 255, .8); transform: rotate(45deg);
  animation: pan-nudge 2.4s ease-in-out infinite;
}
@keyframes pan-nudge { 0%, 100% { translate: 0 0; opacity: .5; } 50% { translate: 0 5px; opacity: 1; } }
.card .t.pan.at-top .grip { opacity: 0; }

/* Planet Align: the name up top, "a myth design lab" at the foot */
.card .t.pa .pa-txt {
  inset: 0 !important; padding: 7% 8% 7% !important; display: flex !important; flex-direction: column; justify-content: space-between; align-items: center;
  background: linear-gradient(rgba(6, 8, 30, .62), rgba(6, 8, 30, 0) 28%, rgba(6, 8, 30, 0) 72%, rgba(6, 8, 30, .62)) !important;
}

/* every day is earth day: the same blur reveal, quicker (Christian, round six) */
[data-anim] .poem-live.ed .pl { transition-duration: .85s, .3s, .85s, .85s; transition-delay: calc(var(--i) * 30ms); filter: blur(6px); }
.card .t.pan > img { position: absolute; max-width: none; object-fit: fill; inset: auto; }

/* the signed page: cropped to the page itself, filling the card and let into the tunnel behind it */
.card .t.book > img.inset {
  left: 0; top: 0; translate: none; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
  border-radius: 0; box-shadow: none; opacity: .66; mix-blend-mode: luminosity;
}
.card:hover .t.book > img.inset { transform: scale(1.07); opacity: .74; }

/* the mind follows the heart, round six: every picture whole, rows of shared height, notes with room to breathe */
.mosaic.whole-m { display: grid; gap: clamp(18px, 2.4vw, 40px); padding: clamp(18px, 2.4vw, 40px) clamp(12px, 2vw, 32px); }
.mband { display: grid; gap: clamp(8px, 1vw, 14px); }
.mrow { display: flex; gap: clamp(8px, 1vw, 14px); align-items: stretch; }
.mb { flex: var(--a) 1 0; min-width: 0; aspect-ratio: var(--a); position: relative; container-type: inline-size;
  border-radius: var(--radius); overflow: hidden; background: #fff;
  box-shadow: 0 6px 18px rgba(40, 30, 10, .1), inset 0 0 0 1px rgba(0, 0, 0, .04);
  transition: box-shadow .6s cubic-bezier(.2, .7, .2, 1); }
.mb.front { z-index: 2; box-shadow: 0 30px 70px rgba(40, 30, 10, .26), 0 8px 18px rgba(40, 30, 10, .12); }
.mb > img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.mb:hover { box-shadow: 0 0 0 2px #fff, 0 0 34px rgba(255, 255, 255, .9), 0 16px 40px rgba(40, 30, 10, .14); }
.mb:hover > img { transform: scale(1.05); }
.mb > .cell-txt { position: absolute; inset: 0; box-sizing: border-box; display: grid; place-items: center; padding: 12%;
  font-size: calc(var(--fb) * 1cqi); line-height: 1.45; overflow: hidden; background: #fff; }
.mb > .cell-txt * { font-size: inherit; }
.mb > .cell-txt cite, .mb > .cell-txt .fb-date, .mb > .cell-txt .ig-tag { font-size: .8em; }
.mb > .cell-txt .mfh { font-size: 1.15em; }
.mb > .cell-txt.accent { background: var(--sage); text-align: center; }
@media (max-width: 760px) { .mrow { flex-wrap: wrap; } .mb { flex: 1 1 100%; } }
.mosaic.whole-m, .mband { grid-template-columns: minmax(0, 1fr); }
.mrow { min-width: 0; }
@media (max-width: 760px) { .mrow { flex-wrap: wrap; align-items: flex-start; } .mb { flex: var(--a) 1 calc(var(--a) * 30%); } }

/* Pope, round seven: no white veils laid over the photos; each photo itself fades cleanly into the white page on
   the side that faces the poem, and the Sicily row runs to the very foot of the section, flush with what follows */
.pope-v .pope-hero::after, .pope-stack .card::after, .pope-row .card::after { display: none !important; }
.pope-v .pope-hero, .pope-v .card { box-shadow: none !important; background: transparent !important; }
.pope-v .pope-hero img { -webkit-mask-image: linear-gradient(#000 62%, transparent 99%); mask-image: linear-gradient(#000 62%, transparent 99%); }
.pope-stack .card .t > img, .pope-stack .card .t > video { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%); mask-image: linear-gradient(to right, transparent 0, #000 30%); }
.pope-row .card .t > img, .pope-row .card .t > video { -webkit-mask-image: linear-gradient(transparent 0, #000 30%); mask-image: linear-gradient(transparent 0, #000 30%); }
.pope-v .card:hover { box-shadow: none !important; }
.pope.pope-v { padding-bottom: 0; }
.pope-v .pope-row .card, .pope-stack .card:last-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pope-v .pope-row .card .t, .pope-stack .card:last-child .t { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
@media (max-width: 760px) {
  .pope-stack .card .t > img, .pope-stack .card .t > video { -webkit-mask-image: none; mask-image: none; }
  .pope.pope-v { padding-bottom: 0; }
}

/* early march, round seven: a background that visibly lives: contour lines flowing on two layers at different
   speeds, and soft sea-green and sky light drifting through them like weather over the land bridge */
.march { background:
  radial-gradient(38% 46% at var(--ax, 25%) var(--ay, 40%), rgba(150, 205, 185, .38), transparent 70%),
  radial-gradient(34% 40% at var(--bx, 75%) var(--by, 65%), rgba(160, 190, 225, .34), transparent 70%), #f6f8f7;
  animation: weather 18s ease-in-out infinite alternate; }
@property --ax { syntax: "<percentage>"; inherits: false; initial-value: 25%; }
@property --ay { syntax: "<percentage>"; inherits: false; initial-value: 40%; }
@property --bx { syntax: "<percentage>"; inherits: false; initial-value: 75%; }
@property --by { syntax: "<percentage>"; inherits: false; initial-value: 65%; }
@keyframes weather { 0% { --ax: 18%; --ay: 30%; --bx: 82%; --by: 70%; } 50% { --ax: 48%; --ay: 62%; --bx: 58%; --by: 28%; } 100% { --ax: 72%; --ay: 36%; --bx: 26%; --by: 66%; } }
.march::before { opacity: .2; animation: contour-a 22s ease-in-out infinite alternate; }
.march::after { opacity: .14; animation: contour-b 30s ease-in-out infinite alternate; }
@keyframes contour-a { from { transform: scale(1.04) translate(-2%, -1%) rotate(-1deg); } to { transform: scale(1.14) translate(3%, 2%) rotate(2deg); } }
@keyframes contour-b { from { transform: translate(0, 0) rotate(0); } to { transform: translate(-7%, 5%) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .march { animation: none; } }

/* ivy leaves: the words low on the picture, a touch smaller, on a soft dark fade so they read cleanly */
.card .t:has(img[src*="Tempo_Earthship_red-planet-earthrise"]) .over { opacity: 1; transform: none; inset: auto 0 0 0; display: block; padding: 70px 7% 22px;
  background: linear-gradient(rgba(6, 10, 18, 0), rgba(6, 10, 18, .72)); }
.card .t:has(img[src*="Tempo_Earthship_red-planet-earthrise"]) .over .sub { font-size: clamp(11px, .88vw, 14px); line-height: 1.55; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

/* World as Orchestra: a typed reading of the handwritten page, laid over it like tracing paper */
.slides.mini li { position: relative; }
.scribe { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 9% 10%; box-sizing: border-box;
  background: rgba(251, 250, 246, .86); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .7s cubic-bezier(.2, .7, .2, 1); container-type: inline-size; }
li.typed .scribe { opacity: 1; pointer-events: auto; }
.scribe-in { max-width: 34em; color: #20304a; font: 400 clamp(11px, 3.3cqi, 17px)/1.6 var(--mono); letter-spacing: .01em;
  transform: translateY(8px); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
li.typed .scribe-in { transform: none; }
.scribe-in p { margin: 0 0 .8em; }
.scribe .sc-h { font: 600 1.5em/1.1 var(--mono); color: #2a4fa8; text-transform: lowercase; letter-spacing: .02em; display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.scribe .sc-d { font-size: .55em; font-weight: 400; color: #555; }
.scribe mark { color: inherit; padding: 0 .1em; border-radius: 2px; }
.scribe mark.y { background: rgba(244, 238, 120, .55); }
.scribe mark.tl { background: rgba(140, 220, 205, .45); }
.scribe u { text-decoration-color: #e88a7a; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.scribe-btn { position: absolute; z-index: 3; left: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(20, 24, 28, .62); color: #fff; font: 600 14px/1 var(--mono); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); transition: background .4s, transform .4s; }
.scribe-btn:hover { background: rgba(20, 24, 28, .85); transform: scale(1.06); }
li.typed .scribe-btn { background: #2a4fa8; }
.slides .scribe-btn { top: auto !important; bottom: 14px !important; left: 14px !important; right: auto !important; margin: 0 !important; translate: none; }
.slides .scribe-btn::before, .slides .scribe-btn::after { content: none !important; display: none !important; }
.slides .scribe-btn { background: rgba(20, 24, 28, .66) !important; color: #fff !important; opacity: 1 !important; display: grid !important; place-items: center; }
.slides li.typed .scribe-btn { background: #2a4fa8 !important; }

/* =================== round eight: the storyworld book over the earth-rise film again =================== */
.themes2.sw { background: #c9d0d8; padding: 7vh 16px 6vh; min-height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; }
.themes2.sw::before { display: none; }
.themes2.sw > video.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; mix-blend-mode: screen; filter: saturate(.6); }
/* the lens: a soft pane of frosted glass behind the words, fading out at its edges so the film stays clear around it */
.sw-lens {
  position: absolute; left: 50%; top: 50%; width: min(1080px, 96%); height: 92%; transform: translate(-50%, -50%);
  background: rgba(236, 240, 246, .5); -webkit-backdrop-filter: blur(14px) saturate(.8); backdrop-filter: blur(14px) saturate(.8);
  -webkit-mask: radial-gradient(closest-side, #000 62%, transparent); mask: radial-gradient(closest-side, #000 62%, transparent);
  pointer-events: none;
}
.sw-in { position: relative; text-align: center; max-width: 1000px; }
.themes2.sw .story { margin: 0 0 18px; font: 400 clamp(26px, 2.8vw, 42px) var(--mono); color: #5d6f8c; letter-spacing: .02em; }
.themes2.sw .story .lg { color: #9aa8bc; }
.themes2.sw .para { margin: 0 auto 9vh; max-width: 40em; font: 400 clamp(11px, .9vw, 13px)/1.7 var(--mono); letter-spacing: .06em; color: #45556f; }
.themes2.sw .para b { color: #23376a; }
.themes2.sw .th-label { margin: 0 0 22px; color: #3f4650; }
.themes2.sw .th-list p { margin: .28em 0; line-height: 1.5; color: #141821; text-shadow: 0 0 14px rgba(240, 244, 250, .9); }
.themes2.sw .th-list .th1 { font: 600 clamp(17px, 1.6vw, 24px) var(--mono); letter-spacing: .1em; margin-bottom: 0; }
.themes2.sw .th-list .th1 .bl { color: #3e6fc4; }
.themes2.sw .th-list .th-rule { margin-top: 0; font-size: clamp(12px, 1vw, 14px); letter-spacing: .1em; color: #2b3240; }
.themes2.sw .th-list .th-xs { font-size: clamp(12px, .95vw, 14px); }
.themes2.sw .th-list .th-s { font-size: clamp(13px, 1.1vw, 16px); }
.themes2.sw .th-list .th-m { font-size: clamp(14px, 1.25vw, 18px); }
.themes2.sw .th-list .th-l { font-size: clamp(16px, 1.5vw, 22px); }
.themes2.sw .lg { color: #6f7d90; } .themes2.sw .g { color: #56606d; }
.themes2.sw .frankl { position: relative; margin-top: auto; padding: 8vh 16px 0; }
.themes2.sw .frankl .serif { color: #5f7396; }
.themes2.sw .frankl .mono { color: #3e64a8; text-shadow: 0 0 14px rgba(240, 244, 250, .9); }
.themes2.sw .frankl sub { color: #7d8ca6; }
@media (max-width: 760px) { .sw-lens { width: 100%; } .themes2.sw .para { margin-bottom: 6vh; } }
.themes2.sw .th-list .th-rule { max-width: 100%; overflow: hidden; white-space: nowrap; margin-left: auto; margin-right: auto; }
.sw-lens { background: rgba(236, 240, 246, .4); }
/* round eight: the masthead sits flush with the top of the page, rounded only at its foot; Christian's subheader hangs under it */
.cover { padding-top: 0; }
.masthead { border-radius: 0 0 calc(var(--radius) + 8px) calc(var(--radius) + 8px); }
.cover-in.mag-sub { margin: -2px 0 0; padding: 16px clamp(24px, 4vw, 56px) 18px; font: 400 clamp(13px, 1.15vw, 17px) var(--mono); letter-spacing: .14em; color: #44536e; }
/* round eight, take two (Christian): the film dark, deep and saturated with no white veil, the words in white */
.themes2.sw { background: #050a16; }
.themes2.sw > video.bg { opacity: 1; mix-blend-mode: normal; filter: saturate(1.45) contrast(1.2) brightness(.62); }
.sw-lens { background: rgba(4, 10, 26, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.themes2.sw :is(.story, .para, .th-label, .th-list p, .th-rule, .frankl .serif, .frankl .mono) { color: #fff; text-shadow: 0 1px 14px rgba(0, 6, 20, .85); }
.themes2.sw .story .lg { color: rgba(255, 255, 255, .55); }
.themes2.sw .para, .themes2.sw .frankl .serif { color: rgba(255, 255, 255, .82); }
.themes2.sw .para b { color: #fff; }
.themes2.sw .frankl sub { color: rgba(255, 255, 255, .6); }
.themes2.sw .lg { color: rgba(255, 255, 255, .5); } .themes2.sw .g { color: rgba(255, 255, 255, .68); }
.themes2.sw :is(.bl, .th1 .bl) { color: #8fb6ff; } .themes2.sw .lb { color: #a9c6f2; } .themes2.sw .nv { color: #b8c8ff; }
.themes2.sw .gr { color: #9fd98a; } .themes2.sw .tan { color: #e2c98f; } .themes2.sw .or { color: #ffb066; } .themes2.sw .r { color: #ff7a6a; } .themes2.sw .y { color: #ffe066; }
.cover > .masthead { width: calc(100% + 2 * var(--pad)); margin: 0 calc(-1 * var(--pad)); }
.cover-in.mag-sub { color: #22324f; font-weight: 500; }

/* round eight: the mind follows the heart sits closer together, with gentler corners */
.mosaic.whole-m { gap: clamp(6px, .7vw, 10px); padding: clamp(10px, 1.2vw, 18px); }
.mband, .mrow { gap: clamp(4px, .45vw, 7px); }
.mb { border-radius: 7px; }
/* the crystal story, now a card in the carousel by the planet still */
.card .t.crystal-c { display: grid; place-items: center; padding: 14%; box-sizing: border-box; background: #fff; }
.card .t.crystal-c .bhn-poem { margin: 0; font: 400 clamp(11px, .9vw, 14px)/1.75 var(--mono); color: #666; }
/* hover, round eight (Christian): a quieter white outline, and the whole card grows again rather than zooming inside */
.card:hover, [data-anim] .deck.in .card:hover, .cards figure:hover, .sage.film-moment .film:hover, .mb:hover { transform: scale(1.025); z-index: 3; }
.card, .cards figure, .sage.film-moment .film, .mb { transition: transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .6s; }
.card:hover, [data-anim] .deck.in .card:hover, .cards figure:hover, .sage.film-moment .film:hover, .mb:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 22px rgba(255, 255, 255, .14), 0 22px 50px rgba(0, 0, 0, .28);
}
.card:hover .t > img:not(.inset):not(.soft), .card:hover .t > video, .card:hover .t.fit > img:not(.blur),
.cards figure:hover > img, .cards figure:hover > video, .film:hover > img, .film:hover > video, .mb:hover > img { transform: none; }
.card:hover .t.sam > img:not(.inset):not(.soft), .card:hover .t.sam > img { transform: scale(1.12); }
.blk:hover > img, .blk:hover > .cell-txt { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 22px rgba(255, 255, 255, .14); }
/* round eight, take three: a black veil over the film, and the renaissance line on its own card at the foot */
.themes2.sw::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .42); pointer-events: none; }
.themes2.sw > video.bg { z-index: 0; }
.themes2.sw::after { z-index: 0; }
.themes2.sw > :not(video) { z-index: 1; }
.themes2.sw .story { margin-bottom: 7vh; }
.para-card {
  position: relative; margin: 6vh auto 0; max-width: 560px; padding: 24px clamp(20px, 3vw, 40px); border-radius: var(--radius);
  background: rgba(10, 14, 26, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 50px rgba(0, 0, 0, .4); text-align: center;
}
.themes2.sw .para-card .para { margin: 0; color: rgba(255, 255, 255, .88); }
/* round eight (Christian): no green in the planetary mystics text. Hovering only shifts the words as they are:
   the rest of the passage softens a little and the phrase under the pointer stays sharp */
.manifesto .txt::before { display: none; }
.manifesto.in .rv:hover { color: inherit; }
[data-anim] .manifesto.in .txt:hover .rv { opacity: .5; transition-delay: 0s; transition-duration: .5s; }
[data-anim] .manifesto.in .txt:hover .rv:hover { opacity: 1; }
.themes2.sw::after { background: rgba(0, 0, 0, .62); }
/* round eight, take four (Christian): the storyworld book as distinct boxes over the darkened film, with the film
   showing between them: full-width banners for the title, the Frankl message and the renaissance line, and the themes
   in a box of their own */
.themes2.sw { padding: clamp(14px, 2.4vh, 26px) 0; gap: clamp(14px, 2.4vh, 26px); justify-content: center; }
.sw-box {
  position: relative; box-sizing: border-box; background: rgba(6, 10, 22, .58);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .16), 0 20px 50px rgba(0, 0, 0, .35);
}
.sw-wide { width: 100%; text-align: center; padding: clamp(22px, 4vh, 40px) 16px; }
.sw-themes { width: min(1000px, calc(100% - 32px)); border-radius: var(--radius); padding: clamp(26px, 4.5vh, 48px) clamp(16px, 3vw, 44px);
  text-align: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 60px rgba(0, 0, 0, .4); }
.themes2.sw .sw-wide .story { margin: 0; }
.themes2.sw .story .sw-ed { color: #fff; }
.themes2.sw .sw-frankl .frankl { margin: 0; padding: 0; }
.themes2.sw .sw-para .para { margin: 0 auto; max-width: 46em; color: rgba(255, 255, 255, .88); }
/* Christian: more air between the theme lines so each reads on its own */
.themes2.sw .th-list p { margin: .85em 0; line-height: 1.6; }
.themes2.sw .th-list .th1 { margin-bottom: .2em; }
.themes2.sw .th-list .th-rule { margin: 0 auto 1.1em; }
/* the orchestra page as a flat scan: the whole page on white paper, no notebook edges */
.slides li.scan { background: #fff; }
.slides li.scan > img { object-fit: contain !important; background: #fff; transform: none !important; }
.card:has(li.scan.on)::after { opacity: 0; }
/* round eight, take five (Christian): white title and Frankl boxes with dark text, no box round the themes, and every
   box flush with its neighbours: the title against the edition banner above, the renaissance line against the next section */
.issue.open .bleed.whatif.edition { margin-bottom: 0; }
.themes2.sw { padding: 0; gap: 0; justify-content: flex-start; }
.sw-box { box-shadow: none; }
.sw-wide.sw-title, .sw-wide.sw-frankl { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.themes2.sw .sw-title .story { color: #2a3448; text-shadow: none; }
.themes2.sw .sw-title .story .lg { color: #9aa6b8; }
.themes2.sw .sw-title .story .sw-ed { color: #141a26; }
.sw-themes { flex: 1; display: flex; flex-direction: column; justify-content: center; width: min(1000px, calc(100% - 32px));
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; padding: 9vh 0; }
.themes2.sw .sw-frankl :is(.serif, .mono) { text-shadow: none; }
.themes2.sw .sw-frankl .serif { color: #5a6780; }
.themes2.sw .sw-frankl .mono { color: #23407e; }
.themes2.sw .sw-frankl sub { color: #8a96ab; }
.sw-para { box-shadow: none; }
.issue.open .bleed.whatif.edition { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* round eight, take six (Christian): the white boxes over the earth-rise let a little of the film through; the
   renaissance line moves to a card in the row below, with two empty cards waiting for what comes next */
.sw-wide.sw-title, .sw-wide.sw-frankl { background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.card .t.para-c { display: grid; place-items: center; padding: 12%; box-sizing: border-box; background: #fff; text-align: center; }
.card .t.para-c .para { margin: 0; font: 400 clamp(12px, 1.05vw, 16px)/1.75 var(--mono); letter-spacing: .06em; color: #45556f; }
.card .t.para-c .para b { color: #23376a; }
.card .t.slot { background: rgba(255, 255, 255, .04); }
.card .t.slot::before { content: ""; position: absolute; inset: 14px; border: 1.5px dashed rgba(255, 255, 255, .22); border-radius: calc(var(--radius) - 6px); }
.card:has(.t.slot)::after, .card:has(.t.para-c)::after { display: none; }
.card:has(.t.slot):hover { transform: none; box-shadow: none; }
.sw-wide.sw-title, .sw-wide.sw-frankl { background: rgba(255, 255, 255, .9); }
/* round eight, take seven (Christian): the themes made easier to read. The lead pair gets its own white box; every
   theme below sits on a small strip of glass, alternating darker and lighter, so each line holds together on its own */
.th-head { display: inline-block; margin: 0 auto 3.2vh; padding: 18px clamp(18px, 3vw, 40px) 10px; border-radius: 12px;
  background: rgba(255, 255, 255, .9); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.themes2.sw .th-head p { color: #141a26; text-shadow: none; }
.themes2.sw .th-head .th1 { margin: 0; }
.themes2.sw .th-head .th1 .bl { color: #2f63c4; }
.themes2.sw .th-head .th-rule { margin: 2px auto 0; color: #6a7486; }
.th-list .ln { margin: 0; }
.themes2.sw .th-list .ln p { display: inline-block; margin: 5px 0; padding: .32em 1.05em; border-radius: 9px;
  background: rgba(8, 12, 24, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); text-shadow: none;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.themes2.sw .th-list .ln:nth-child(odd) p { background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.themes2.sw .th-list .ln:last-child p { background: none; box-shadow: none; }
.themes2.sw .th-list .th-head p, .themes2.sw .th-list .th-head .th1 { color: #141a26; text-shadow: none; }
.themes2.sw .th-list .th-head .th-rule { color: #7a8496; }
.th-head, .themes2.sw .th-list .ln p { max-width: 100%; box-sizing: border-box; }
.sw-themes { width: min(1000px, calc(100% - 24px)); }
@media (max-width: 760px) { .themes2.sw .th-list .ln p { padding: .32em .7em; } .th-head { padding: 14px 14px 8px; } }
.themes2.sw .th-list { width: auto; max-width: 100%; }
/* Christian: every themes box runs the full width of the screen */
.sw-themes { width: 100%; }
.themes2.sw .th-list { max-width: none; width: 100%; }
.th-head { display: block; width: 100%; border-radius: 0; margin-bottom: 3px; }
.themes2.sw .th-list .ln p { display: block; width: 100%; max-width: none; margin: 3px 0; border-radius: 0; }
/* round eight (Christian): the themes as a triangle pointing down. Each strip is a little narrower than the one above
   and its ends are cut on the slant, so the stack narrows from the full-width lead box to a point; the white boxes in
   the section let the film through */
.th-head { clip-path: polygon(0 0, 100% 0, calc(100% - 2vw) 100%, 2vw 100%); background: rgba(255, 255, 255, .74); }
.themes2.sw .th-list .ln p {
  --w: max(42%, calc(100% - var(--k) * 6.4%)); width: var(--w); margin: 3px auto; padding-left: 4vw; padding-right: 4vw;
  clip-path: polygon(0 0, 100% 0, calc(100% - 2vw) 100%, 2vw 100%); box-shadow: none;
}
.sw-wide.sw-title, .sw-wide.sw-frankl { background: rgba(255, 255, 255, .76); }
@media (max-width: 760px) {
  .themes2.sw .th-list .ln p { --w: max(66%, calc(100% - var(--k) * 3.6%)); padding-left: 7vw; padding-right: 7vw; }
  .th-head, .themes2.sw .th-list .ln p { clip-path: polygon(0 0, 100% 0, calc(100% - 4vw) 100%, 4vw 100%); }
}
@media (min-width: 761px) {
  .th-head, .themes2.sw .th-list .ln p { clip-path: polygon(0 0, 100% 0, calc(100% - 3.2vw) 100%, 3.2vw 100%); }
  .themes2.sw .th-list .ln p { margin: 0 auto; border-top: 3px solid transparent; background-clip: padding-box; }
}

/* round eight (Christian): no boxes round the themes after all, only shadows under the words; the earthship and
   Frankl boxes more see-through */
.th-head, .themes2.sw .th-list .ln p { background: none !important; box-shadow: none !important; clip-path: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; }
.th-head { padding: 0; margin: 0 auto 2.4vh; }
.themes2.sw .th-list .ln p { width: auto !important; padding: 0 12px !important; margin: .7em auto !important; }
.themes2.sw .th-list .th-head p, .themes2.sw .th-list .th-head .th1 { color: #fff; }
.themes2.sw .th-list .th-head .th-rule { color: rgba(255, 255, 255, .6); }
.themes2.sw .th-list .th-head .th1 .bl { color: #8fb6ff; }
.themes2.sw .th-list p { text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 3px 10px rgba(0, 0, 0, .85), 0 0 26px rgba(0, 0, 0, .7) !important; }
.sw-wide.sw-title, .sw-wide.sw-frankl { background: rgba(255, 255, 255, .62); }

/* the renaissance card: its words set as a small title page, centred, over a slow "quantum ecology": interference
   rings from two sources, drifting green and blue fields, and a faint lattice */
.card .t.qe-card { display: grid; place-items: center; padding: 10%; background: #06121a; overflow: hidden; }
.qe-bg { position: absolute; inset: 0; pointer-events: none; }
.qe-bg i { position: absolute; inset: -30%; }
.qe-bg i:nth-child(1) { background:
    repeating-radial-gradient(circle at 30% 35%, rgba(120, 230, 200, .16) 0 1px, transparent 1px 26px),
    repeating-radial-gradient(circle at 70% 68%, rgba(140, 180, 255, .14) 0 1px, transparent 1px 26px);
  animation: qe-a 26s ease-in-out infinite alternate; }
.qe-bg i:nth-child(2) { background:
    radial-gradient(40% 35% at 30% 30%, rgba(40, 170, 130, .45), transparent 70%),
    radial-gradient(35% 40% at 72% 70%, rgba(50, 90, 210, .45), transparent 70%),
    radial-gradient(30% 30% at 60% 25%, rgba(150, 90, 220, .25), transparent 70%);
  filter: blur(10px); animation: qe-b 18s ease-in-out infinite alternate; }
.qe-bg i:nth-child(3) { inset: 0; background: url(assets/img/pattern-lattice.svg) center / 60% repeat; opacity: .1; filter: invert(1);
  animation: qe-c 60s linear infinite; }
@keyframes qe-a { to { transform: translate(6%, -5%) rotate(8deg); } }
@keyframes qe-b { to { transform: translate(-8%, 6%) scale(1.12); } }
@keyframes qe-c { to { background-position: 240px 120px; } }
@media (prefers-reduced-motion: reduce) { .qe-bg i { animation: none; } }
.qe { position: relative; text-align: center; color: #eaf6f2; max-width: 22em; }
.qe p { margin: 0; }
.qe-h { font: 400 clamp(15px, 1.5vw, 22px)/1.45 var(--serif); letter-spacing: .14em; color: #fff; text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.qe-k { color: #7fe0c4; letter-spacing: 0; }
.qe-t { margin: 1.4em 0 .5em !important; font: italic 400 clamp(12px, 1vw, 15px) var(--serif); color: rgba(234, 246, 242, .7); letter-spacing: .08em; }
.qe-n { font: 400 clamp(12px, 1vw, 15px)/1.9 var(--mono); letter-spacing: .1em; color: rgba(234, 246, 242, .88); }
.qe-r { margin-top: .4em !important; }
.qe-r b { font-weight: 500; color: #9ff0d6; padding: .15em .6em; border-bottom: 1px solid rgba(159, 240, 214, .5); }
.card:has(.t.qe-card.on)::after { display: none; }
.themes2.sw .sw-title .story .lg { color: #5f6c84; }
.card:has(img[src*="tensegrity-scan"])::after { display: none; }
/* Christian: the earth-rise leaves the cover; the masthead and its tab sit on the deep ground above the editions */
.cover { min-height: 0; background: var(--deck-bg); padding-bottom: var(--pad); }
.cover::after { display: none; }
.cover-in.mag-sub { background: #eef1f6; }

/* round nine (Christian): the Pope photos lose their fades into white */
.pope-v .pope-hero img, .pope-stack .card .t > img, .pope-stack .card .t > video, .pope-row .card .t > img, .pope-row .card .t > video {
  -webkit-mask-image: none !important; mask-image: none !important; }
/* Aunt Kit: no zoom glass on the poem */
.kit .poem img, .kit figure img { cursor: default; }
/* the crystal story: a deep sunset ground with a faceted crystal lattice, the words in warm light */
.card .t.crystal-c { background:
    radial-gradient(70% 55% at 75% 18%, rgba(255, 170, 90, .55), transparent 70%),
    radial-gradient(60% 50% at 20% 85%, rgba(120, 70, 210, .6), transparent 70%),
    linear-gradient(160deg, #2a1240, #4a1d4f 45%, #1b1036); overflow: hidden; }
.card .t.crystal-c::before { content: ""; position: absolute; inset: -20%; pointer-events: none; opacity: .32;
  background:
    repeating-linear-gradient(60deg, rgba(255, 230, 200, .5) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-60deg, rgba(255, 230, 200, .5) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(255, 230, 200, .35) 0 1px, transparent 1px 40px);
  animation: facet 40s linear infinite; }
.card .t.crystal-c::after { content: ""; position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; translate: -50% -50%;
  pointer-events: none; background: conic-gradient(from 20deg, rgba(255, 210, 150, .0), rgba(255, 210, 150, .22), rgba(190, 150, 255, .18), rgba(255, 210, 150, 0) 60%);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); animation: facet-spin 30s linear infinite; }
@keyframes facet { to { transform: translate(46px, 0); } }
@keyframes facet-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .card .t.crystal-c::before, .card .t.crystal-c::after { animation: none; } }
.card .t.crystal-c .bhn-poem { position: relative; z-index: 1; color: #fbe9d6; text-shadow: 0 1px 10px rgba(30, 10, 40, .8); }
/* the film captions shrink to fit their card so "garden of the royal library" is never cut off */
.card .t.watch { container-type: inline-size; }
.card .t.watch .film-cap { font-size: clamp(8.5px, calc((100cqi - 96px) / 21), 13px); padding-right: 12px; }
@media (max-width: 760px) { .card .t.watch .film-cap { font-size: clamp(8.5px, calc((100cqi - 78px) / 21), 12px); } }
/* round 9: with the white fade gone, the hero caption sits on the photo in white */
.pope-v .pope-hero figcaption { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.75), 0 0 14px rgba(0,0,0,.55); }
/* round 10: bigger mind-follows-the-heart cards; paired pictures click through */
.mosaic.whole-m { padding: clamp(10px, 1.4vw, 22px) clamp(8px, 1vw, 16px); }
.mb.mc { overflow: hidden; }
.mc-s { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.mc-s li { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.mc-s li.on { opacity: 1; z-index: 1; }
.mc-s img { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.mc-next { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .82); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); cursor: pointer; display: grid; place-items: center; }
.mc-next::before { content: ""; width: 8px; height: 8px; border: solid #2a2f37; border-width: 2px 2px 0 0; transform: translateX(-2px) rotate(45deg); }
.mc-next:hover { background: #fff; }
.mc-dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; display: flex; gap: 6px; pointer-events: none; }
.mc-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 3px rgba(0, 0, 0, .4); }
.mc-dots i.on { background: #fff; }
/* round 10: the tensegrity scan shows whole, centred on its own paper white */
.card .t:has(> img[src*="tensegrity-scan"]) { background: #fff; display: grid; place-items: center; }
.card .t > img[src*="tensegrity-scan"] { object-fit: contain !important; object-position: center !important; padding: 4%; box-sizing: border-box; }
/* round 10: the renaissance card, quieter: a plain deep background with a faint vignette, the play is in the type */
.card .t.qe-card { background: radial-gradient(120% 90% at 50% 40%, #1b1f26 0%, #111317 70%, #0c0d10 100%); }
.qe-bg { display: none; }
.qe-h { font: 400 clamp(13px, 1.25vw, 19px)/1.5 var(--serif) !important; letter-spacing: .22em !important; color: #ece6da !important; }
.qe-k { color: rgba(236, 230, 218, .45) !important; letter-spacing: .1em !important; }
.qe-t { font: italic 400 clamp(13px, 1.1vw, 17px) var(--serif) !important; color: rgba(236, 230, 218, .55) !important; letter-spacing: .02em !important; }
.qe-n { font: 300 clamp(12px, .95vw, 14px)/1.9 var(--mono) !important; letter-spacing: .06em !important; color: rgba(236, 230, 218, .8) !important; }
.qe-r b { font: italic 400 1.2em var(--serif); letter-spacing: .02em; color: #f4efe6 !important; border-bottom: 0 !important; padding: 0 !important; }
/* round 10: themes over the earth-rise film, darker still */
.themes2.sw::after { background: rgba(0, 0, 0, .8); }
/* round 11: the cover's dark band comes alive: faint twinkling stars, and an earth limb rising under the
   "digital magazine for earth 2.0" tab with a satellite light crossing it */
.cover { position: relative; isolation: isolate; padding-bottom: clamp(40px, 7vw, 96px); }
.cover-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.cover-sky circle { fill: #cfe3ff; opacity: .15; animation: twinkle 5.5s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes twinkle { to { opacity: .75; } }
.cover-limb { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(40px, 7vw, 96px); z-index: 0; pointer-events: none; overflow: visible; }
.cover-limb .arc { fill: none; stroke: url(#lg); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.cover-limb .arc-glow { fill: none; stroke: url(#lg); stroke-width: 14; opacity: .16; filter: blur(6px); vector-effect: non-scaling-stroke; }
.cover-limb .sat { fill: #fff; filter: drop-shadow(0 0 4px #9fdcff); }
.cover > .masthead, .cover > .cover-in { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .cover-sky circle { animation: none; } .cover-limb .sat { display: none; } }

/* round 11: the two editions side by side, earthship then planet north; earthship opens full width under both */
.editions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: var(--pad); }
.editions > .issue { display: contents; }
.editions .bleed.whatif.edition { order: 1; grid-column: 1; min-height: 72vh; margin-bottom: 0; }
.editions > .edition.gl { order: 2; grid-column: 2; min-height: 72vh; }
.editions .ed-body { order: 3; grid-column: 1 / -1; margin: 0 calc(-1 * var(--pad)); }
.issue.open .bleed.whatif.edition { border-radius: calc(var(--radius) + 8px) !important; }
.editions .edition .q { font-size: clamp(15px, 1.5vw, 22px) !important; }
/* the open pill: a frosted round button at the banner's foot, breathing gently until it is opened */
.whatif.edition .foot-in .chev {
  position: relative; width: auto; height: auto; transform: none !important; border: 0; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px 11px 18px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; text-decoration: none;
  font: 500 12px var(--mono); letter-spacing: .24em; text-transform: lowercase;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 8px 24px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: pill 2.8s ease-in-out infinite;
  transition: background .4s, box-shadow .4s;
}
.whatif.edition .foot-in .chev::before {
  content: ""; width: 7px; height: 7px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); transition: transform .5s;
}
.whatif.edition .foot-in .chev::after { display: none; }
.whatif.edition:hover .foot-in .chev { background: rgba(255, 255, 255, .3); box-shadow: inset 0 0 0 1px #fff, 0 10px 30px rgba(0, 0, 0, .35); }
.whatif.edition .chev .o2, .issue.open .whatif.edition .chev .o1 { display: none; }
.issue.open .whatif.edition .chev .o2 { display: inline; }
.issue.open .whatif.edition .foot-in .chev { animation: none; }
.issue.open .whatif.edition .foot-in .chev::before { transform: translateY(2px) rotate(225deg); }
@keyframes pill { 50% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 7px rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .3); } }
.whatif.edition:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 36px 80px rgba(0, 0, 0, .55); }
.edition.gl { cursor: default; }
@media (max-width: 760px) {
  .editions { grid-template-columns: minmax(0, 1fr); }
  .editions .bleed.whatif.edition, .editions > .edition.gl { grid-column: 1; min-height: 70vh; }
  .editions > .edition.gl { order: 2; }
  .editions .ed-body { order: 1; }
  .editions .bleed.whatif.edition { order: 0; }
}
.whatif.edition .foot-in .chev { background: rgba(255, 255, 255, .92); color: #14213a; font-size: 13px; padding: 13px 26px 13px 22px; margin-bottom: 14px; }
.whatif.edition .foot-in .chev::before { border-color: #14213a; }
.whatif.edition:hover .foot-in .chev { background: #fff; }
.editions .whatif.edition .in { text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 22px rgba(0, 0, 0, .45); }
/* round 12: the edition nameplate: a frosted band across the top of each card, a big numeral, then "edition" over the
   name in the masthead's rounded face */
.edition { place-items: center; }
.ed-plate {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px);
  padding: clamp(14px, 1.6vw, 24px) clamp(18px, 2vw, 32px); color: #fff; text-shadow: none;
  background: linear-gradient(rgba(6, 14, 30, .62), rgba(6, 14, 30, .38)); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.ed-n { font: 400 clamp(40px, 4.6vw, 72px)/.85 var(--round); letter-spacing: -.02em; padding-right: clamp(12px, 1.4vw, 22px);
  border-right: 1px solid rgba(255, 255, 255, .35); font-variant-numeric: tabular-nums; }
.ed-t { display: grid; gap: 6px; text-align: left; }
.ed-k { font: 400 clamp(9px, .75vw, 11px) var(--mono); letter-spacing: .34em; text-transform: uppercase; opacity: .75; }
.ed-name { font: 400 clamp(22px, 2.5vw, 40px)/1 var(--round); letter-spacing: .01em; text-transform: lowercase; }
.edition.gl .ed-plate { background: linear-gradient(rgba(8, 30, 44, .5), rgba(8, 30, 44, .26)); }
.editions .edition .in { padding-top: clamp(80px, 9vw, 130px); }
@media (max-width: 760px) { .ed-n { font-size: 44px; } .ed-name { font-size: 26px; } }
/* round 13 */
.cover-in.mag-sub .cin-s { color: #6a7896; font-style: italic; }
.qe-a { margin: 0 0 1.4em !important; font: 400 clamp(10px, .8vw, 12px) var(--mono); letter-spacing: .32em; text-transform: uppercase; color: rgba(236, 230, 218, .55); }
.qe-a::after { content: ""; display: block; width: 28px; height: 1px; margin: 1em auto 0; background: rgba(236, 230, 218, .35); }
.cover-in.mag-sub { max-width: min(980px, 94%); }
@media (min-width: 761px) { .cover-in.mag-sub { white-space: nowrap; } }
/* round 13 (Christian, experimenting with colour): the storyworld title and the Frankl message as blue banners, the
   masthead's blue, a little translucent over the earth-rise */
.sw-wide.sw-title, .sw-wide.sw-frankl {
  background: linear-gradient(100deg, rgba(31, 47, 106, .9), rgba(38, 64, 140, .82) 55%, rgba(31, 47, 106, .9)) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(255, 255, 255, .08);
}
.themes2.sw .sw-title .story, .themes2.sw .sw-title .story .sw-ed { color: #fff; }
.themes2.sw .sw-title .story .lg { color: #9fb6ff; }
.themes2.sw .sw-frankl .serif { color: #c4cff0; }
.themes2.sw .sw-frankl .mono { color: #fff; }
.themes2.sw .sw-frankl sub { color: #9fb0dc; }
.themes2.sw .sw-frankl sub { color: #c9d6ff; opacity: 1; }
/* round 13: the storyworld as two full screens */
.themes2.sw.sw-a, .themes2.sw.sw-b { min-height: 100vh; min-height: 100svh; }
.themes2.sw.sw-a .sw-themes, .themes2.sw.sw-b .sw-themes { margin-block: auto; }
.themes2.sw.sw-b { justify-content: flex-end; }
.themes2.sw.sw-b .sw-frankl { margin-top: 0; }
@media (min-width: 761px) { .themes2.sw.sw-a .sw-themes, .themes2.sw.sw-b .sw-themes { zoom: 1.3; } }
/* round 13: the earthship edition photo a little darker so its words read */
.editions .whatif.edition > img.bg { filter: brightness(.6) saturate(1.05) !important; }
.editions .whatif.edition::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 55%, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 75%); }
/* round 14: "earthship : a storyworld book" on a dark green banner that reads like terrain seen from orbit: mossy and
   ochre patches, a river-like vein, and topographic contours drifting slowly */
.sw-wide.sw-title { position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(38% 120% at 12% 30%, rgba(92, 120, 64, .75), transparent 70%),
    radial-gradient(30% 140% at 46% 90%, rgba(126, 104, 62, .55), transparent 70%),
    radial-gradient(26% 110% at 78% 20%, rgba(58, 96, 70, .8), transparent 70%),
    radial-gradient(22% 90% at 93% 85%, rgba(140, 122, 78, .45), transparent 70%),
    linear-gradient(100deg, #12301f, #1b3d27 40%, #163423 70%, #0f2a1b) !important; }
.sw-title .geo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sw-title .geo i { position: absolute; inset: -40% -10%; }
.sw-title .geo i:nth-child(1) { background: url(assets/img/pattern-topo.svg) center / 520px auto repeat; opacity: .32; filter: invert(1) sepia(.6) hue-rotate(40deg);
  animation: geo-drift 90s linear infinite; }
.sw-title .geo i:nth-child(2) { background:
    linear-gradient(172deg, transparent 47%, rgba(120, 170, 160, .35) 48.5%, rgba(170, 210, 200, .5) 49%, rgba(120, 170, 160, .35) 49.5%, transparent 51%),
    repeating-linear-gradient(35deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px);
  mix-blend-mode: screen; }
@keyframes geo-drift { to { background-position: 520px 260px; } }
@media (prefers-reduced-motion: reduce) { .sw-title .geo i { animation: none; } }
.themes2.sw .sw-title .story { position: relative; color: #f3f1e6; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.themes2.sw .sw-title .story .lg { color: #b9d39a; }
.themes2.sw .sw-title .story .sw-ed { color: #fff; }

/* round 14: the second storyworld screen at the light end: "off the beaten path" washed pale, the words in deep ink */
.themes2.sw.sw-b { background: #eef1ea; }
.themes2.sw.sw-b > video.bg { opacity: 1; mix-blend-mode: normal; filter: saturate(.85) contrast(.9); }
.themes2.sw.sw-b::after { background: linear-gradient(rgba(246, 247, 241, .8), rgba(240, 244, 236, .72)) !important; }
.themes2.sw.sw-b .th-list, .themes2.sw.sw-b .th-list * { text-shadow: none !important; }
.themes2.sw.sw-b .th-list p { color: #18223a; }
.themes2.sw.sw-b .th-list .lb { color: #3b5bb5; }
.themes2.sw.sw-b .th-list .bl { color: #2a46a8; }
.themes2.sw.sw-b .th-list .lg { color: #7a8597; }
.themes2.sw.sw-b .th-list .gr { color: #3f7d3a; }
.themes2.sw.sw-b .th-list .g { color: #6b8f2f; }
.themes2.sw.sw-b .th-list .y { color: #b07a10; }
.themes2.sw.sw-b .th-list .sans { color: #18223a; }
/* round 14b: the terrain itself, field parcels and a meandering river, under the contours */
.sw-title .geo i:nth-child(2) { background: url(assets/img/pattern-terrain.svg) center / cover no-repeat; inset: 0; mix-blend-mode: normal; opacity: .85; }
.sw-title .geo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% 50%, rgba(10, 26, 16, .55), rgba(10, 26, 16, .1) 80%); }
/* round 15: the signed page comes first, the tunnel only a faint glow behind it, so the page and "the Start" showing
   through from its other side read clearly */
.card .t.book > img.inset { opacity: .9 !important; mix-blend-mode: normal !important; }
.card:hover .t.book > img.inset { opacity: .94 !important; }
.card .t.book > img.inset { object-position: 50% 0; }
.card .t.book > img.inset { object-fit: contain !important; object-position: 50% 50%; opacity: .93 !important; } .card .t.book > img.bgimg { opacity: .35; filter: saturate(.7); }
/* round 15: the tensegrity scan two cards wide in its row */
@media (min-width: 761px) {
  .deck.trio { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .deck.trio .card:nth-child(2) { grid-column: span 2; }
}

/* round 15: the title seen through a spaceship window: darker terrain behind tinted, glossy glass, a bezel round it */
.sw-wide.sw-title { margin: clamp(10px, 1.4vw, 20px) clamp(10px, 1.4vw, 20px) 0; width: auto !important; border-radius: 26px / 40px;
  box-shadow: 0 0 0 5px rgba(20, 26, 34, .9), 0 0 0 6px rgba(160, 180, 200, .35), 0 18px 50px rgba(0, 0, 0, .6), inset 0 0 40px rgba(0, 0, 0, .7) !important; }
.sw-title .geo { filter: brightness(.5) saturate(.9); }
.sw-title .glass { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, .16) 24%, rgba(255, 255, 255, .03) 31%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(115deg, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .07) 63%, rgba(255, 255, 255, 0) 68%),
    radial-gradient(120% 140% at 50% -20%, rgba(150, 200, 255, .12), rgba(0, 0, 0, 0) 55%),
    linear-gradient(rgba(6, 14, 24, .35), rgba(6, 14, 24, .55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(255, 255, 255, .08); }
.themes2.sw .sw-title .story { z-index: 1; }
.sw-wide.sw-title { background-color: transparent; }

/* round 15: ROCK STARCHITECTURE and MISSION:2 as banners of their own, full width */
.sw-band { position: relative; z-index: 1; width: 100%; box-sizing: border-box; text-align: center; padding: clamp(14px, 2.2vh, 24px) 16px; margin: clamp(18px, 3vh, 34px) 0 0; }
.sw-band p { margin: 0 !important; }
.sw-band.band-rock { background: linear-gradient(90deg, rgba(30, 40, 90, .55), rgba(40, 56, 130, .72) 50%, rgba(30, 40, 90, .55));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .12); }
.sw-band.band-rock p { font-size: clamp(18px, 2vw, 30px) !important; color: #fff !important; }
.themes2.sw.sw-b .sw-band.band-mission { background: rgba(20, 30, 54, .88); margin: clamp(12px, 2vh, 24px) 0; box-shadow: 0 12px 30px rgba(20, 30, 54, .25); }
.themes2.sw.sw-b .sw-band.band-mission p { font-size: clamp(18px, 2vw, 30px) !important; color: #fff !important; }
.themes2.sw.sw-b .sw-band.band-mission .bl { color: #9fb8ff !important; }
.themes2.sw.sw-b .sw-band.band-mission .gr { color: #b8e08a !important; }
.themes2.sw.sw-b .sw-band.band-mission .g { color: #d6e6a8 !important; }
.themes2.sw.sw-b .sw-band.band-mission .y { color: #ffd479 !important; }
.themes2.sw.sw-a .sw-themes { margin-top: clamp(8px, 2vh, 20px); }

/* round 15: "themes" on the seam between the dark screen and the light one, light above the line, ink below */
.th-seam { position: relative; z-index: 5; height: 0; display: flex; justify-content: center; }
.th-seam .th-label { position: absolute; top: 0; translate: 0 -50%; margin: 0 !important; display: flex; align-items: center; gap: 18px;
  text-decoration: none !important; font: 400 clamp(26px, 3vw, 46px)/1 var(--serif) !important; font-style: italic !important; letter-spacing: .04em; text-shadow: none !important; }
.th-seam .th-label span { color: transparent !important; background: linear-gradient(#f6f2e8 50%, #18223a 50%); -webkit-background-clip: text; background-clip: text; padding: 0 .1em; }
.th-seam .th-label::before, .th-seam .th-label::after { content: ""; width: clamp(40px, 10vw, 160px); height: 1px; background: linear-gradient(90deg, transparent, rgba(160, 175, 200, .9)); }
.th-seam .th-label::after { transform: scaleX(-1); }

/* round 15: every line plays: click to cycle its type and colour; a faint glitch runs on its own */
.themes2.sw [data-cyc] { cursor: pointer; transition: color .3s, letter-spacing .4s, font-size .3s; }
.themes2.sw [data-cyc]:hover { outline: 1px dashed rgba(160, 180, 220, .35); outline-offset: 4px; }
.themes2.sw .cyc-1 { font-family: var(--serif) !important; font-style: italic !important; letter-spacing: .01em !important; }
.themes2.sw .cyc-2 { font-family: var(--round) !important; text-transform: lowercase !important; letter-spacing: .02em !important; }
.themes2.sw .cyc-3 { font-family: var(--mono) !important; text-transform: uppercase !important; letter-spacing: .22em !important; font-weight: 600 !important; }
.themes2.sw .cyc-4 { font-family: var(--sans, system-ui) !important; font-weight: 300 !important; letter-spacing: .4em !important; }
.themes2.sw .cyc-5 { font-family: "Krona One", var(--round) !important; letter-spacing: -.01em !important; }
.themes2.sw .cyc-1, .themes2.sw .cyc-1 * { color: var(--cc, #ffd479) !important; }
.themes2.sw .cyc-2, .themes2.sw .cyc-2 * { color: var(--cc, #9fe0c4) !important; }
.themes2.sw .cyc-3, .themes2.sw .cyc-3 * { color: var(--cc, #ff9a8a) !important; }
.themes2.sw .cyc-4, .themes2.sw .cyc-4 * { color: var(--cc, #b8a4ff) !important; }
.themes2.sw .cyc-5, .themes2.sw .cyc-5 * { color: var(--cc, #8fd3ff) !important; }
.themes2.sw.sw-b :is(.cyc-1, .cyc-2, .cyc-3, .cyc-4, .cyc-5) { --cc: var(--ink-c); }
.themes2.sw.sw-b .cyc-1 { --ink-c: #9a5b00; } .themes2.sw.sw-b .cyc-2 { --ink-c: #1d6b4f; } .themes2.sw.sw-b .cyc-3 { --ink-c: #a23a2a; }
.themes2.sw.sw-b .cyc-4 { --ink-c: #4b33a8; } .themes2.sw.sw-b .cyc-5 { --ink-c: #1f4f8f; }
.themes2.sw.sw-b .band-mission :is(.cyc-1, .cyc-2, .cyc-3, .cyc-4, .cyc-5) { --cc: #fff; }
.themes2.sw .glitch { animation: tglitch .42s steps(2, end) 1; }
@keyframes tglitch {
  0% { transform: translate(0, 0); text-shadow: 2px 0 rgba(255, 60, 90, .55), -2px 0 rgba(60, 220, 255, .55); clip-path: inset(0 0 55% 0); }
  25% { transform: translate(-2px, 1px); clip-path: inset(40% 0 20% 0); }
  50% { transform: translate(2px, -1px); text-shadow: -1px 0 rgba(255, 60, 90, .5), 1px 0 rgba(60, 220, 255, .5); clip-path: inset(10% 0 60% 0); }
  75% { transform: translate(-1px, 0); clip-path: inset(70% 0 0 0); }
  100% { transform: none; text-shadow: inherit; clip-path: none; }
}
@media (prefers-reduced-motion: reduce) { .themes2.sw .glitch { animation: none; } }
/* round 15: the signed page inverted, fully opaque, the tunnel gone */
.card .t.book > img.bgimg { display: none; }
.card .t.book { background: #2a2c35; }
.card .t.book > img.inset, .card:hover .t.book > img.inset { opacity: 1 !important; filter: invert(1) !important; mix-blend-mode: normal !important; }
.card .t.book { background: rgb(63, 73, 89) !important; }
/* round 15: the reel playing on its own hides its play mark */
#hangar .watch.auto .play { opacity: 0; }
/* round 15 fixes: the window full width; the two banners keep their mono capitals */
.sw-wide.sw-title { align-self: stretch; }
.sw-band p { font: 600 clamp(18px, 2vw, 30px) var(--mono) !important; letter-spacing: .1em !important; }

/* round 15: circuit band is only a slim transition into the reel */
.circuit { min-height: 0 !important; height: clamp(84px, 16vh, 170px); padding: 0 16px; align-content: center; border-radius: 0; }
.circuit > .bg { opacity: .4; }
.circuit .chev { transform: scale(.8); }

/* ---------------------------------------------------------------- round 16 */
/* the window title a flush rectangle, no bezel; ROCK sits right under it */
.sw-wide.sw-title { margin: 0 !important; width: 100% !important; border-radius: 0 !important; box-shadow: inset 0 0 40px rgba(0, 0, 0, .55) !important; }
.sw-title .glass { border-radius: 0; }
.themes2.sw.sw-a .sw-band.band-rock { margin-top: 0; }

/* words, not lines, play: a click cycles one word; the idle glitch is fainter and touches one word at a time */
.themes2.sw [data-cyc] { outline: none !important; }
.themes2.sw .w { cursor: pointer; display: inline-block; transition: color .3s, letter-spacing .4s; }
.themes2.sw .w:hover { text-decoration: underline dotted rgba(160, 180, 220, .45); text-underline-offset: .25em; }
.themes2.sw .glitch { animation: tglitch2 .32s steps(2, end) 1 !important; }
@keyframes tglitch2 {
  0% { transform: translate(0, 0); text-shadow: 1px 0 rgba(255, 60, 90, .3), -1px 0 rgba(60, 220, 255, .3); }
  50% { transform: translate(1px, 0); text-shadow: -1px 0 rgba(255, 60, 90, .25), 1px 0 rgba(60, 220, 255, .25); }
  100% { transform: none; text-shadow: inherit; }
}

/* tensegrity: the sketch cropped to its drawing, its card exactly its shape, the three cards one height */
@media (min-width: 761px) {
  .deck.trio { grid-template-columns: .755fr 1.248fr 1.792fr !important; align-items: start; }
  .deck.trio .card:nth-child(2) { grid-column: auto !important; }
  .deck.trio .card:nth-child(1) { aspect-ratio: 1057 / 1400; }
  .deck.trio .card:nth-child(2) { aspect-ratio: 1390 / 1114; }
  .deck.trio .card:nth-child(3) { aspect-ratio: 1376 / 768; }
  .deck.trio .card { height: auto !important; min-height: 0 !important; }
}
.deck.trio .card:has(img[src*="Tempo_Earthship_tensegrity-sketch"]) { aspect-ratio: 1390 / 1114; }
.card .t > img[src*="Tempo_Earthship_tensegrity-sketch"] { object-fit: cover !important; padding: 0; background: #fff; }
.card:has(img[src*="Tempo_Earthship_tensegrity-sketch"])::after { display: none; }

/* the renaissance card, tidied: one measure, one centre line, even steps between its parts */
.qe-card .qe { max-width: 30ch; margin: 0 auto; display: grid; justify-items: center; gap: .55em; text-align: center; text-wrap: balance; }
.qe-card .qe p { margin: 0 !important; }
.qe-card .qe-a { padding-bottom: .9em; margin-bottom: .35em !important; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.qe-card .qe-a::after { display: none !important; }
.qe-card .qe-h { line-height: 1.45; margin-bottom: .6em !important; }
.qe-card .qe-h .qe-k { display: none; }
.qe-card .qe-t { margin-top: .2em !important; }

/* hover, everywhere: nothing grows, a white outline comes up */
.card:hover, [data-anim] .deck.in .card:hover, .cards figure:hover, .sage.film-moment .film:hover, .mb:hover, .blk:hover,
.pope-v .pope-hero:hover, .fx-stage:hover { transform: none !important; scale: none !important; }
.card:hover, [data-anim] .deck.in .card:hover, .pope-v .card:hover, .cards figure:hover, .sage.film-moment .film:hover,
.mb:hover, .pope-v .pope-hero:hover, .fx-stage:hover { box-shadow: 0 0 0 2px #fff !important; }
.card:hover .t > img, .card:hover .t > video, .mb:hover > img, .film:hover > img, .cards figure:hover > img { transform: none !important; }
.card:hover::after { opacity: 0 !important; }
.card img, .mb img, .fx-stage img, .pope-hero img { cursor: zoom-in; }
.card a img, .card .watch img { cursor: pointer; }

/* the viewer: any picture opens full screen, and the whole site's pictures run through it as one carousel */
.lbx { position: fixed; inset: 0; z-index: 1000; display: none; grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(6, 8, 12, .95);
  backdrop-filter: blur(8px); color: #e9edf2; font: 13px/1.3 var(--mono, monospace); }
.lbx.open { display: grid; animation: lbxin .25s ease; }
@keyframes lbxin { from { opacity: 0; } }
.lbx-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.lbx-n { opacity: .7; letter-spacing: .08em; }
.lbx-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .55; }
.lbx-top a, .lbx-top button { color: inherit; background: rgba(255, 255, 255, .08); border: 0; border-radius: 999px; height: 34px; min-width: 34px;
  padding: 0 12px; display: inline-grid; place-items: center; cursor: pointer; font: inherit; text-decoration: none; }
.lbx-top a:hover, .lbx-top button:hover { background: rgba(255, 255, 255, .18); }
.lbx-close { font-size: 20px !important; }
.lbx-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 64px; }
.lbx-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lbx-prev, .lbx-next { position: absolute; top: 50%; translate: 0 -50%; width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .1); cursor: pointer; display: grid; place-items: center; }
.lbx-prev { left: 12px; } .lbx-next { right: 12px; }
.lbx-prev:hover, .lbx-next:hover { background: rgba(255, 255, 255, .22); }
.lbx-prev::before, .lbx-next::before { content: ""; width: 10px; height: 10px; border: solid #fff; border-width: 2px 2px 0 0; }
.lbx-prev::before { transform: translateX(2px) rotate(-135deg); } .lbx-next::before { transform: translateX(-2px) rotate(45deg); }
.lbx-rail { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px 14px; scrollbar-width: none; }
.lbx-rail::-webkit-scrollbar { display: none; }
.lbx-rail button { flex: none; height: 52px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; opacity: .4; cursor: pointer; background: #111; outline: 2px solid transparent; outline-offset: 1px; }
.lbx-rail button:hover { opacity: .8; }
.lbx-rail button.on { opacity: 1; outline-color: #fff; }
.lbx-rail img { height: 100%; width: auto; display: block; }
@media (max-width: 760px) { .lbx-stage { padding: 0 8px; } .lbx-prev, .lbx-next { display: none; } .lbx-name { display: none; } .lbx-rail button { height: 42px; } }
html.lbx-lock { overflow: hidden; }

/* the photo runs, four ways: a full-width picture up front, the rest waiting small beside it, clicked through */
.mband.fx { position: relative; display: grid; gap: clamp(8px, 1vw, 14px); margin-block: clamp(8px, 1.2vw, 16px); }
.fx-stage { position: relative; overflow: hidden; border-radius: 12px; background: #111; transition: box-shadow .4s; }
.fx-s { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.fx-s li { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.fx-s li.on { opacity: 1; z-index: 1; }
.fx-s img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx-next { position: absolute; right: 14px; top: 50%; translate: 0 -50%; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .9); cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.fx-next::before { content: ""; width: 9px; height: 9px; border: solid #2a2f37; border-width: 2px 2px 0 0; transform: translateX(-2px) rotate(45deg); }
.fx-count { position: absolute; left: 14px; top: 12px; z-index: 3; font: 500 11px var(--mono, monospace); letter-spacing: .14em; color: #fff;
  background: rgba(0, 0, 0, .35); padding: 5px 9px; border-radius: 999px; backdrop-filter: blur(6px); }
.fx-mini { padding: 0; border: 0; cursor: pointer; overflow: hidden; background: #222; transition: transform .35s, opacity .35s, outline-color .3s;
  outline: 2px solid transparent; outline-offset: 2px; }
.fx-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx-mini:hover { outline-color: rgba(255, 255, 255, .9); }
.fx-mini.on { outline-color: #fff; }
.fx-note { position: relative; border-radius: 12px; overflow: hidden; background: #fff; container-type: inline-size; min-height: 0; }
.fx-note > .cell-txt { position: static; height: 100%; display: grid; place-items: center; padding: 10%; box-sizing: border-box; font-size: clamp(14px, 1.15vw, 18px); }

/* 1 · filmstrip: the minis in a row along the foot, half over the picture */
.fx-strip .fx-stage { aspect-ratio: 21 / 9; }
.fx-strip .fx-minis { display: flex; justify-content: center; gap: 8px; margin-top: -58px; position: relative; z-index: 4; }
.fx-strip .fx-mini { width: 92px; height: 66px; border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.fx-strip .fx-mini:not(.on) { opacity: .75; }

/* 2 · pile: the next pictures fanned in a little stack at the corner, a click deals the top one */
.fx-pile .fx-stage { aspect-ratio: 2 / 1; }
.fx-pile .fx-minis { position: absolute; right: clamp(16px, 3vw, 44px); bottom: clamp(16px, 3vw, 40px); width: 120px; height: 90px; z-index: 4; }
.fx-pile .fx-mini { position: absolute; inset: 0; border-radius: 8px; border: 3px solid #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
  transform: rotate(calc((var(--p) - 1) * -7deg)) translate(calc((var(--p) - 1) * -10px), calc((var(--p) - 1) * -4px)); z-index: calc(10 - var(--p)); }
.fx-pile .fx-mini.on, .fx-pile .fx-mini.far { opacity: 0; pointer-events: none; }
.fx-pile .fx-mini { outline: none !important; }
.fx-pile .fx-minis::after { content: attr(data-left); position: absolute; right: -8px; top: -10px; z-index: 20; background: #fff; color: #222;
  font: 600 11px var(--mono, monospace); border-radius: 999px; padding: 4px 7px; }
.fx-pile .fx-next { display: none; }

/* 3 · aside: the picture two thirds wide; the words and a small grid of the others beside it */
.fx-side { grid-template-columns: 2fr 1fr; grid-template-rows: auto 1fr; }
.fx-side .fx-stage { grid-row: 1 / 3; aspect-ratio: 4 / 3; }
.fx-side .fx-note { min-height: 0; }
.fx-side .fx-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: end; }
.fx-side .fx-mini { aspect-ratio: 1; border-radius: 10px; }
.fx-side .fx-mini:not(.on) { opacity: .7; }

/* 4 · bubbles: round minis down the picture's left edge, the post beside the picture */
.fx-orbit { grid-template-columns: 3fr 1.15fr; }
.fx-orbit .fx-stage { aspect-ratio: 16 / 10; }
.fx-orbit .fx-minis { position: absolute; left: clamp(14px, 2vw, 28px); top: 50%; translate: 0 -50%; display: grid; gap: 10px; z-index: 4; }
.fx-orbit .fx-mini { width: 62px; height: 62px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); outline-offset: 3px; }
.fx-orbit .fx-mini.on { transform: scale(1.12); }
.fx-orbit .fx-count { left: auto; right: 14px; }

@media (max-width: 760px) {
  .fx-side, .fx-orbit { grid-template-columns: 1fr; grid-template-rows: none; }
  .fx-side .fx-stage { grid-row: auto; }
  .fx-strip .fx-stage, .fx-pile .fx-stage, .fx-orbit .fx-stage { aspect-ratio: 4 / 3; }
  .fx-strip .fx-minis { margin-top: -36px; gap: 6px; } .fx-strip .fx-mini { width: 56px; height: 42px; }
  .fx-pile .fx-minis { width: 76px; height: 58px; }
  .fx-orbit .fx-mini { width: 42px; height: 42px; }
  .fx-note > .cell-txt { padding: 8% 10%; }
}
.lbx-stage img { max-width: calc(100vw - 150px); max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); width: auto; height: auto; }
@media (max-width: 760px) { .lbx-stage img { max-width: calc(100vw - 16px); max-height: calc(100dvh - 140px); } }

/* ---------------------------------------------------------------- round 17 */
/* the trio row only as tall as its cards; the next row follows straight on */
.deck.trio { grid-auto-rows: auto !important; grid-template-rows: auto !important; min-height: 0 !important; height: auto !important; }
/* a faint topographic web over the dark space between the cards */
body::before { content: ""; position: fixed; inset: -6%; z-index: -1; pointer-events: none; opacity: .07;
  background: url(assets/img/pattern-phase.svg) center / cover no-repeat; animation: phase-drift 120s ease-in-out infinite alternate; }
@keyframes phase-drift { to { transform: translate(2%, -1.5%) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* hover: no hard rim, an even white glow that spills out into the dark round the card */
.card:hover, [data-anim] .deck.in .card:hover, .pope-v .card:hover, .cards figure:hover, .sage.film-moment .film:hover,
.mb:hover, .pope-v .pope-hero:hover, .fx-stage:hover {
  box-shadow: 0 0 28px 4px rgba(255, 255, 255, .28), 0 0 70px 12px rgba(255, 255, 255, .12) !important; }

/* the signed page fills its whole card */
.card .t.book > img.inset, .card:hover .t.book > img.inset { left: 0 !important; top: 0 !important; translate: none !important;
  width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover !important;
  object-position: 50% 45% !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; }

/* the planetary mystics words come in quicker and settle darker, so they read sooner */
[data-anim] .manifesto .rv { transition: opacity .7s ease, filter .7s ease, color .4s !important; transition-delay: calc(var(--i) * 6ms) !important; }
.manifesto .txt, .manifesto .txt * { color: #1b2027; }
.manifesto .txt .g, .manifesto .txt .lg { color: #3a434d; }

/* a jump in time space: a click pauses and plays it again; its words step aside while it plays */
.watch.tap .film-cap { transition: opacity .5s ease; }
.watch.tap.playing:not(.paused) .film-cap { opacity: 0 !important; pointer-events: none; }
.watch.tap.playing .play { opacity: 0; }
.watch.tap.playing.paused .play { opacity: 1; }

/* the crystal story and its companion line, a row of their own */
.deck.crystal-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.deck.crystal-row .card { aspect-ratio: 16 / 10; height: auto !important; min-height: 0 !important; }
.deck.crystal-row .t.crystal-c { padding: 10% 14%; }
.deck.crystal-row .t.crystal-c .bhn-poem { font-size: clamp(13px, 1.15vw, 18px); }
.card .t.crystal-c.olive { background:
    radial-gradient(70% 55% at 25% 20%, rgba(214, 196, 120, .5), transparent 70%),
    radial-gradient(60% 50% at 80% 85%, rgba(70, 120, 90, .55), transparent 70%),
    linear-gradient(200deg, #1d2a1c, #3b4426 45%, #141c16); }
.card .t.crystal-c.olive .bhn-poem { font-size: clamp(16px, 1.6vw, 26px); line-height: 1.6; color: #f1ead0; }
@media (max-width: 760px) { .deck.crystal-row { grid-template-columns: 1fr !important; } .deck.crystal-row .card { aspect-ratio: 4 / 5; } }

/* norse:inuit futurism, the record shop and their companions: eight cards of their own */
@media (min-width: 761px) { .deck.eight { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
/* (the web sits on the dark grounds themselves, fixed to the screen so it runs on unbroken from row to row) */
body::before { display: none; }
.sheet .deck, .anthem, .sage.film-moment, .editions, .cards, .mosaic { --phase: url(assets/img/pattern-phase.svg); }
.sheet section.deck, .anthem, .sage.film-moment, .editions, .cards {
  background-image: var(--phase) !important; background-attachment: fixed !important; background-size: cover !important; background-position: center !important; }

/* ---------------------------------------------------------------- round 18 */
/* an open edition takes the full screen width, square to the edges, and runs straight into the storyworld title */
.editions:has(.issue.open) { padding: 0 !important; gap: 0 !important; }
.editions:has(.issue.open) > .edition.gl { display: none; }
.editions .issue.open .bleed.whatif.edition { grid-column: 1 / -1 !important; border-radius: 0 !important; min-height: 78vh; box-shadow: none !important; }
.editions:has(.issue.open) .ed-body { margin: 0 !important; }
/* the floating edition menu, shown while an edition is open */
.ed-float { position: fixed; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 900; display: flex; gap: 6px; padding: 6px;
  border-radius: 999px; background: rgba(12, 16, 22, .62); backdrop-filter: blur(12px) saturate(1.3); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .14);
  font: 500 11px/1 var(--mono, monospace); letter-spacing: .14em; text-transform: lowercase; opacity: 0; translate: 0 16px; pointer-events: none; transition: opacity .4s, translate .4s; }
.ed-float.on { opacity: 1; translate: 0 0; pointer-events: auto; }
.ed-float button { border: 0; cursor: pointer; color: #e9edf2; background: transparent; border-radius: 999px; padding: 10px 14px; font: inherit; letter-spacing: inherit; display: flex; gap: 8px; align-items: center; }
.ed-float button b { font: 700 13px var(--round, inherit); opacity: .7; }
.ed-float button:hover { background: rgba(255, 255, 255, .12); }
.ed-float button.cur { background: rgba(255, 255, 255, .9); color: #14213a; }
.lbx.open ~ .ed-float, html.lbx-lock .ed-float { opacity: 0; pointer-events: none; }

/* the trio and the row under it sit close; the glitch drawing larger, the interior cropped in and narrower */
.deck.trio, .deck:has(.qe-card) { gap: 6px !important; padding: 6px !important; }
.deck.trio + .deck:has(.qe-card) { padding-top: 0 !important; }
@media (min-width: 761px) {
  .deck.trio { grid-template-columns: .755fr 1.248fr 1.25fr !important; }
  .deck.trio .card:nth-child(3) { aspect-ratio: 1.25 !important; }
  .deck.trio .card:nth-child(3) img { object-fit: cover !important; object-position: 46% 55%; }
}

/* "the mind follows the heart": its title card set as a small emblem */
.mb > .cell-txt.accent { background:
    radial-gradient(120% 90% at 50% 120%, rgba(255, 255, 255, .5), transparent 60%),
    linear-gradient(160deg, #9fb8ae, #c9d6cf 60%, #e4ebe6) !important; position: absolute; overflow: hidden; }
.mb > .cell-txt.accent::before { content: ""; position: absolute; left: 50%; top: 50%; width: 78%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; border: 1px solid rgba(30, 50, 44, .25); box-shadow: 0 0 0 14px rgba(255, 255, 255, .14), 0 0 0 15px rgba(30, 50, 44, .12); }
.mb > .cell-txt.accent::after { content: "\2661"; position: absolute; left: 50%; bottom: 12%; translate: -50% 0; font-size: 1.1em; color: rgba(30, 50, 44, .55); }
.mb > .cell-txt .mfh { position: relative; font: italic 400 1.35em/1.15 var(--serif, Georgia) !important; letter-spacing: .01em !important; color: #1e322c; text-transform: none; }

/* the carousels never crop: each picture shows whole, only its corners rounded, centred on the dark */
.fx-stage { background: transparent !important; overflow: visible; border-radius: 0; aspect-ratio: auto !important; height: clamp(360px, 74vh, 820px); }
.fx-stage:hover { box-shadow: none !important; }
.fx-s li { display: grid; place-items: center; }
.fx-s img { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; object-fit: contain !important; border-radius: 12px; }
.fx-s li.on img:hover { box-shadow: 0 0 28px 4px rgba(255, 255, 255, .28), 0 0 70px 12px rgba(255, 255, 255, .12); }
.fx-strip .fx-minis { margin-top: 10px !important; }
.fx-side .fx-stage { height: clamp(360px, 68vh, 760px); }
.fx-next { right: 6px; }
.fx-count { left: 6px; top: 6px; }
.fx-mini-txt { display: grid; place-items: center; width: 100%; height: 100%; background: #10141c; color: #f2c94c; font: 600 12px var(--mono, monospace); }
@media (max-width: 760px) { .fx-stage { height: 58vh; } }

/* Bucky's page, restyled */
.bucky-card { position: relative; height: 100%; aspect-ratio: 907 / 1025; max-width: 100%; box-sizing: border-box; border-radius: 12px; overflow: hidden;
  background: radial-gradient(90% 60% at 20% 0%, rgba(80, 200, 120, .16), transparent 60%), linear-gradient(170deg, #12161d, #0b0d12);
  color: #eef1f4; padding: 9% 9% 8%; display: flex; flex-direction: column; container-type: inline-size; }
.bucky-card .bk-grid { position: absolute; left: 0; right: 30%; top: 0; height: 12%;
  background: repeating-linear-gradient(90deg, transparent 0 13%, rgba(110, 210, 90, .5) 13% 13.6%), linear-gradient(transparent 46%, rgba(110, 210, 90, .7) 46% 52%, transparent 52%); }
.bucky-card .bk-rail { position: absolute; right: 7%; top: 42%; bottom: 10%; width: 2px; background: #e23b4e; box-shadow: -14px 0 0 -0px transparent; }
.bucky-card .bk-rail::before { content: ""; position: absolute; right: 0; top: 0; width: 9cqi; height: 2px; background: #e23b4e; }
.bucky-card .bk-arrow { position: absolute; left: 4%; top: 39%; width: 70%; height: 2px; background: linear-gradient(90deg, #f2c94c, rgba(242, 201, 76, .3)); transform: rotate(-1.5deg); }
.bucky-card .bk-arrow::before, .bucky-card .bk-arrow::after { content: ""; position: absolute; left: 0; top: 0; width: 34%; height: 2px; background: #f2c94c; transform-origin: 0 50%; }
.bucky-card .bk-arrow::before { transform: rotate(9deg); } .bucky-card .bk-arrow::after { transform: rotate(-6deg); background: #fff; width: 80%; }
.bucky-card p, .bucky-card blockquote { position: relative; margin: 0; font-family: var(--mono, monospace); }
.bucky-card .bk-z { margin-top: 6%; font-size: 3.3cqi; letter-spacing: .08em; color: #8f9aa6; }
.bucky-card .bk-z span { color: #5aa0ff; }
.bucky-card .bk-h { margin-top: 3%; font-size: 5.8cqi; line-height: 1.35; letter-spacing: .02em; }
.bucky-card .bk-h b { color: #5aa0ff; font-weight: 500; }
.bucky-card .bk-q { margin-top: auto; padding: 0 6% 6% 2%; border-left: 2px solid rgba(255, 255, 255, .7); padding-left: 6%; font-size: 4.3cqi; line-height: 1.55; letter-spacing: .02em; }
.bucky-card .bk-q cite { display: block; margin-top: .6em; font-style: normal; color: #f2c94c; }

/* the last run: the post lies over the pictures as frosted glass */
.fx-orbit { grid-template-columns: minmax(0, 3fr) minmax(0, 1.15fr); }
.fx-orbit .fx-note { margin-left: -22%; align-self: center; z-index: 5; background: rgba(255, 255, 255, .72) !important; backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .6); min-height: 60%; }
@media (max-width: 760px) { .fx-orbit .fx-note { margin: -18% 6% 0; } }

/* Pope Francis: flush pictures, square corners */
.pope.pope-v { --gap: 0px; padding-top: 0; }
.pope-v .pope-hero, .pope-v .card, .pope-v .card .t, .pope-v .card img { border-radius: 0 !important; }
.pope-v .pope-hero, .pope-v .card { box-shadow: none !important; }
.pope-v .card:hover, .pope-v .pope-hero:hover { box-shadow: 0 0 28px 4px rgba(255, 255, 255, .5) !important; z-index: 3; }

/* the crystal story, the planet still and the olive line: a taller row, the planet keeping its shape between */
@media (min-width: 761px) {
  .deck.crystal-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; height: clamp(460px, 66vh, 760px) !important; grid-template-rows: 100% !important; }
  .deck.crystal-row .card { aspect-ratio: auto !important; height: 100% !important; }
  .deck.crystal-row .card.planet { aspect-ratio: 992 / 1280 !important; width: auto; }
}
.deck.crystal-row .card.planet img { object-fit: cover; }
@media (max-width: 760px) { .deck.crystal-row .card.planet { aspect-ratio: 992 / 1280 !important; } }
.fx-s li { display: flex !important; align-items: center; justify-content: center; }
.fx-stage { overflow: hidden; }
.fx-orbit .fx-s li { justify-content: flex-end; }
.fx-orbit .fx-minis { left: auto; right: calc(100% / 4.15 * 1.15 + 18%); }
/* the renaissance card: "talk to" and the names smaller under the heading */
.qe-card .qe-t { font-size: .78em !important; }
.qe-card .qe-n { font-size: .72em !important; line-height: 1.5; }
.qe-card .qe-r, .qe-card .qe-r b { font-size: .8em !important; }
.qe-card .qe { gap: .35em; }
.fx-orbit { grid-template-rows: 1fr auto auto 1fr; }
.fx-orbit .fx-stage { grid-column: 1; grid-row: 1 / -1; }
.fx-orbit .fx-note { grid-column: 2; grid-row: 2; min-height: 0; }
.fx-orbit .fx-minis { position: static !important; translate: none !important; grid-column: 2; grid-row: 3; display: flex !important; gap: 12px; margin: 16px 0 0 -14%; z-index: 6; }
@media (max-width: 760px) { .fx-orbit .fx-stage, .fx-orbit .fx-note, .fx-orbit .fx-minis { grid-column: 1; grid-row: auto; } .fx-orbit { grid-template-rows: none; } .fx-orbit .fx-minis { margin: 12px 0 0; justify-content: center; } }
@media (max-width: 760px) {
  .fx-orbit { grid-template-columns: minmax(0, 1fr) !important; }
  .fx-orbit .fx-s li { justify-content: center; }
  .fx-orbit .fx-note { margin: -14% 5% 0 !important; }
}
/* the reel on tempo's main page, under the editions, Planet Align beside it */
.home-reel { --pad: clamp(10px, 1.2vw, 18px); display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: var(--pad);
  padding: var(--pad); background: var(--deck-bg); background-image: url(assets/img/pattern-phase.svg); background-attachment: fixed; background-size: cover; }
.home-reel .hr-film .film { margin: 0; height: 100%; border-radius: var(--radius, 18px); overflow: hidden; }
.home-reel .hr-film video { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16 / 9; }
.home-reel .hr-pa { position: relative; border-radius: var(--radius, 18px); overflow: hidden; min-height: 100%; }
.home-reel .hr-pa .t { position: absolute; inset: 0; display: block; }
.home-reel .hr-pa .t > img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .home-reel { grid-template-columns: 1fr; } .home-reel .hr-pa { aspect-ratio: 4 / 5; } }

/* ---------------------------------------------------------------- round 19 */
/* themes: a modern open chevron above (pointing up) and one below (pointing down), toward the words each side */
.th-seam .th-label { position: relative; }
.th-seam .th-label::before, .th-seam .th-label::after { content: ""; position: absolute; left: 50%; width: 16px; height: 16px;
  border: solid currentColor; border-width: 1.5px 0 0 1.5px; translate: -50% 0; opacity: .75; color: #e9eef5; }
.th-seam .th-label::before { bottom: calc(100% + 10px); transform: rotate(45deg); }
.th-seam .th-label::after { top: calc(100% + 10px); transform: rotate(225deg); color: #2a3442; }
/* no hairline between the storyworld title and ROCK */
.sw-band.band-rock { border-top: 0 !important; box-shadow: none !important; }
.sw-wide.sw-title { box-shadow: none !important; border-bottom: 0 !important; }

/* the renaissance card: the "talk to" names sit low, toward the foot of the card */
.qe-card { place-items: stretch !important; }
.qe-card .qe { display: flex !important; flex-direction: column; align-items: center; height: 100%; box-sizing: border-box; padding-block: 14% 11%; max-width: none; }
.qe-card .qe-t { margin-top: auto !important; }

/* the spoken word card: its date set small, in line */
.spoken .sp-d { opacity: .6; font-size: .85em; white-space: nowrap; }

/* "the mind follows the heart": back in its mono, kept in the ring, no heart */
.mb > .cell-txt.accent::after { content: none !important; }
.mb > .cell-txt .mfh { font: 400 1.15em/1.3 var(--mono) !important; letter-spacing: .04em !important; font-style: normal !important; width: 62%; }

/* World as Orchestra: the typed page always fits the whole card; the second page reads typed too */
.scribe { container-type: size; padding: 7% 8%; overflow: hidden; }
.scribe-in { font-size: min(3.1cqi, 2.05cqh) !important; line-height: 1.55; max-width: none; }
.scribe .sc-h { font-size: 1.45em; }
.scribe .sc-g { color: #2c8a6e; display: block; }
.scribe .sc-b { color: #2a4fa8; }
.scribe mark.r { background: rgba(232, 138, 122, .35); }
.scribe .sc-gt { color: #2c7a62; }

/* the crystal row: smaller words for the story; the olive card plays with type line by line */
.deck.crystal-row .t.crystal-c .bhn-poem { font-size: clamp(11px, .95vw, 15px) !important; line-height: 1.7; }
.card .t.crystal-c.olive { padding: 9% 11% !important; }
.olive .ol { position: relative; z-index: 1; display: grid; gap: 1.1em; color: #f1ead0; text-shadow: 0 1px 10px rgba(10, 20, 10, .6); }
.olive .ol p { margin: 0; }
.olive .ol-1 { font: italic 400 clamp(20px, 2.2vw, 34px)/1.15 var(--serif, Georgia); letter-spacing: -.005em; }
.olive .ol-2 { font: 400 clamp(11px, .95vw, 15px)/1.7 var(--mono); letter-spacing: .06em; text-transform: lowercase; color: #dfe6c4; padding-left: 1.4em; border-left: 1px solid rgba(241, 234, 208, .45); }
.olive .ol-3 { font: 600 clamp(12px, 1.05vw, 16px)/1.5 var(--round, var(--mono)); letter-spacing: .14em; text-transform: uppercase; color: #d8c98a; text-align: right; }
.olive .ol-3 i { display: block; font: italic 400 1.15em var(--serif, Georgia); letter-spacing: 0; text-transform: none; color: #f1ead0; margin-top: .35em; }

/* the eight cards: closer to square */
.deck.eight { height: auto !important; grid-template-rows: none !important; grid-auto-rows: auto !important; }
.deck.eight .card { aspect-ratio: 1 / 1.08; height: auto !important; min-height: 0 !important; }

/* the photo runs reveal sideways as the page scrolls: one row of whole pictures and notes, the rest off the page */
.mband.lat { position: relative; margin: 0; display: block; }
.lat-pin { position: sticky; top: calc(50vh - var(--ph, 70vh) / 2); height: var(--ph, 70vh); overflow: hidden; }
.lat-track { display: flex; gap: clamp(10px, 1.2vw, 18px); height: 100%; align-items: center; width: max-content; will-change: transform; }
.lat-it { flex: none; height: clamp(300px, 62vh, 680px); margin: 0; position: relative; }
.lat-it > img { height: 100%; width: auto; display: block; border-radius: 12px; }
.lat-it.lat-card .bucky-card { height: 100%; }
.lat-it.lat-note { width: clamp(240px, 26vw, 400px); background: #fff; border-radius: 12px; overflow: hidden; }
.lat-it.lat-note > .cell-txt { height: 100%; display: grid; place-items: center; padding: 12%; box-sizing: border-box; font-size: clamp(13px, 1.05vw, 17px); }
.lat-it:hover > img, .lat-it.lat-note:hover, .lat-it.lat-card:hover .bucky-card { box-shadow: 0 0 28px 4px rgba(255, 255, 255, .5), 0 0 70px 12px rgba(255, 255, 255, .25); }
@media (max-width: 760px) { .lat-it { height: 50vh; } .lat-it.lat-note { width: 72vw; } }
/* r19: sticky lateral needs non-scrolling ancestors */
main.sheet,.mosaic.whole-m{overflow:clip}
.th-seam .th-label::before,.th-seam .th-label::after{border-color:currentColor!important;opacity:.85!important;width:20px!important;height:20px!important;border-width:2px 0 0 2px!important;background:none!important}
.spoken br{display:inline!important}
/* r19b: the bio-technosphere terraforming card wider, the noetic art & science card a little thinner */
@media (min-width: 761px) {
  .deck:has(.qe-card) { grid-template-columns: repeat(24, 1fr) !important; }
  .deck:has(.qe-card) > .card { grid-column: span 8; }
  .deck:has(.qe-card) > .card:has(.t.contain) { grid-column: span 10; }
  .deck:has(.qe-card) > .card:has(.qe-card), .deck:has(.qe-card) > .card:has(.qe-card) + .card { grid-column: span 7; }
}
/* round 20: the reel runs the full width of the screen, square and flush; Planet Align follows as a wide card */
.home-reel { display: block; padding: 0; }
.home-reel .hr-film { width: 100%; }
.home-reel .hr-film .film { border-radius: 0 !important; width: 100%; position: relative; }
.home-reel .hr-film video { aspect-ratio: 16 / 9; width: 100%; height: auto; }
.home-reel .hr-pa { margin: var(--pad); min-height: 0; aspect-ratio: 21 / 8; }
.home-reel .hr-pa .t > img:first-child { object-position: 50% 40%; }
.home-reel .hr-pa .pa-txt { display: grid; justify-items: center; gap: .5em; }
.home-reel .hr-pa .pa-logo { width: clamp(54px, 6vw, 92px); height: auto; margin-bottom: .4em; filter: drop-shadow(0 0 14px rgba(127, 210, 255, .35)); }
.hr-fs { position: absolute; right: 16px; bottom: 16px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5);
  background: rgba(10, 14, 20, .45); backdrop-filter: blur(6px); display: grid; place-items: center; cursor: pointer; padding: 0; }
.hr-fs svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; }
.home-reel .watch.playing .hr-fs { bottom: 64px; }
@media (max-width: 760px) { .home-reel .hr-pa { aspect-ratio: 4 / 5; } .hr-fs { width: 38px; height: 38px; right: 10px; bottom: 10px; } }
@media (min-width: 761px) {
  .home-reel .hr-pa .t.pa .pa-txt { inset: 0 auto 0 0; width: 42%; padding: 0 0 0 6%; place-content: center start; justify-items: start; text-align: left;
    background: linear-gradient(90deg, rgba(6, 8, 18, .72), rgba(6, 8, 18, 0)); }
  .home-reel .hr-pa .t > img:first-child { object-position: 50% 35%; }
}
@media (max-width: 760px) { .home-reel .hr-pa .t > img:first-child { object-position: 62% 50%; } }
.home-reel .hr-pa .t.pa .pa-txt { align-content: end; }
@media (min-width: 761px) { .home-reel .hr-pa .t.pa .pa-txt { width: 60%; align-content: center; background: linear-gradient(90deg, rgba(6, 8, 18, .7), rgba(6, 8, 18, .35) 55%, rgba(6, 8, 18, 0)); } }
.home-reel .hr-pa .t.pa .pa-txt { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .4em; text-shadow: 0 1px 14px rgba(0, 0, 0, .6); }
@media (min-width: 761px) { .home-reel .hr-pa .t.pa .pa-txt { justify-content: center; background: none; } }
/* round 21: the reel and Planet Align as two bubbles; the reel unveils full width beneath them */
.home-reel .hr-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad); padding: var(--pad); }
.home-reel .hr-bub { position: relative; aspect-ratio: 16 / 10; border-radius: 28px; overflow: hidden; margin: 0; min-height: 0;
  border: 0; padding: 0; background: #0a0d12; cursor: pointer; display: block; width: 100%;
  transition: box-shadow .35s ease; }
.home-reel .hr-bub:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 0 28px rgba(255, 255, 255, .18); }
.home-reel .hr-open > img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.62) saturate(.9);
  transition: filter .5s ease, scale .8s ease; }
.home-reel .hr-open:hover > img { filter: brightness(.8); }
.home-reel .hr-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: clamp(64px, 7vw, 96px); aspect-ratio: 1;
  border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .85); background: rgba(10, 14, 20, .3); backdrop-filter: blur(6px); }
.home-reel .hr-play::after { content: ""; position: absolute; left: 54%; top: 50%; translate: -50% -50%; border-style: solid;
  border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; transition: all .3s ease; }
.home-reel .hr-open.on .hr-play::after { left: 50%; width: 22px; height: 22px; border: 0; border-top: 2px solid #fff; rotate: 45deg;
  translate: -50% -20%; background: none; }
.home-reel .hr-pa.hr-bub { aspect-ratio: 16 / 10; }
.home-reel .hr-pa .pa-logo { width: clamp(96px, 10vw, 150px) !important; }
.home-reel .hr-film { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s cubic-bezier(.2, .7, .2, 1); }
.home-reel .hr-film.open { grid-template-rows: 1fr; }
.home-reel .hr-film > .hr-in { overflow: hidden; min-height: 0; }
@media (min-width: 761px) { .home-reel .hr-pa .t.pa .pa-txt { width: 100%; justify-content: center; } }
@media (max-width: 760px) { .home-reel .hr-row { grid-template-columns: 1fr; } .home-reel .hr-bub, .home-reel .hr-pa.hr-bub { aspect-ratio: 4 / 3.4; border-radius: 22px; } }
.home-reel .hr-pa.hr-bub { margin: 0; } .home-reel .hr-pa .t.pa .pa-txt { padding: 0 6%; }
/* round 21: "earth 2.0 in a new age of cinema" in its own colour beside "a digital magazine" */
.cover-in.mag-sub .mg-a { color: #22324f; }
.cover-in.mag-sub .cin-s { color: #2b8a8f; font-style: italic; margin-left: .9em; }
@media (max-width: 760px) { .cover-in.mag-sub .mg-a, .cover-in.mag-sub .cin-s { display: block; margin-left: 0; } }
.home-reel .hr-pa .t > img:first-child { scale: 1.35; transform-origin: 58% 38%; }
@media (min-width: 761px) { .home-reel .hr-pa .t.pa .pa-txt { padding: 0 50% 0 2% !important; justify-content: center; } .home-reel .hr-pa .t > img:first-child { transform-origin: 70% 38%; } }
/* round 21: "a myth design lab" easier to read */
.card .t.pa .pa-txt .pa-sub { font-size: clamp(13px, 1.25vw, 18px) !important; font-weight: 500; color: #fff; letter-spacing: .12em; opacity: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 0 18px rgba(0, 0, 0, .7); padding: .3em .9em; border-radius: 99px; background: rgba(6, 10, 18, .42); backdrop-filter: blur(4px); }

/* ===== round 22 ===== */
/* themes: quieter colour, still varied; the drift is barely there */
.themes2.sw .th-list .ln p { filter: saturate(.5) brightness(.97); }
.themes2.sw-a .th-list .ln p { opacity: .9; }
.themes2.sw .w.drift { animation: tdrift 3.2s ease-in-out 1; }
@keyframes tdrift { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@media (prefers-reduced-motion: reduce) { .themes2.sw .w.drift { animation: none; } }

/* noetic card: the names sit low, the heading in lower case, "noetic art & science" in greens */
.card .t.qe-card { display: flex !important; flex-direction: column; align-items: stretch; justify-content: stretch; }
.qe-card .qe { flex: 1; width: 100%; max-width: 34ch; height: 100%; display: flex !important; flex-direction: column; align-items: center; padding: 2% 0 1%; }
.qe-card .qe-t { margin-top: auto !important; }
.qe-card .qe-h { text-transform: none !important; letter-spacing: .06em !important; font-size: clamp(15px, 1.45vw, 22px) !important; }
.qe-card .qe-a { text-transform: none !important; letter-spacing: .2em; font-size: clamp(11px, .9vw, 14px) !important; border-bottom-color: rgba(143, 207, 159, .28) !important; }
.qe-card .qe-a .g1 { color: #94d3a2; } .qe-card .qe-a .g2 { color: #7fbf8f; } .qe-card .qe-a .g3 { color: #b5dfba; } .qe-card .qe-a .g4 { color: #6aa87a; }

/* the crystal story, a look per phrase */
.crys .bhn-poem { font: 400 clamp(12px, 1vw, 15px)/1.65 var(--serif); text-align: left; color: #e9edf3; }
.crys .bhn-poem i { font-style: normal; color: rgba(200, 214, 235, .38); }
.crys .c1 { font: italic 400 1.5em/1.2 "Libre Baskerville", serif; color: #fff; display: block; margin-bottom: .25em; }
.crys .c2 { font-family: var(--mono); font-size: .86em; letter-spacing: .04em; color: #f4c98a; }
.crys .c3 { font-family: "Kalam", cursive; font-size: 1.12em; color: #cfe3ff; }
.crys .c4 { font-size: .82em; letter-spacing: .14em; text-transform: uppercase; color: #9fb3cc; }
.crys .c5 { font: 700 1.05em "Cinzel", serif; letter-spacing: .06em; color: #ffd9a6; }
.crys .cs { color: #7fa6d8 !important; font-family: var(--mono); }
.crys .c6 { font: italic 1.1em "Crimson Text", serif; color: #d6c6ff; }
.crys .c7 { font-family: "Comfortaa", sans-serif; font-size: .9em; color: #bfe9e0; }
.crys .c8 { font-family: var(--mono); font-weight: 500; color: #fff; letter-spacing: .08em; }
.crys .c9 { font-family: "Josefin Slab", serif; font-size: 1.05em; color: #e7d3b8; }
.crys .c10 { display: block; margin-top: .45em; font: italic 400 1.35em/1.2 "Libre Baskerville", serif; color: #fff; text-align: right; }

/* the olive card, its new line in many voices */
.olive .ol-2 { line-height: 1.6; }
.olive .o-a { font: italic 1.08em "Crimson Text", serif; color: #e3edd2; }
.olive .o-b { font-size: .78em; letter-spacing: .14em; color: #a9b79a; }
.olive .o-atm { font: 700 1.1em var(--mono); letter-spacing: .18em; color: #fff; padding: 0 .18em; border: 1px solid rgba(220, 235, 200, .45); border-radius: 4px; }
.olive .o-c { font-family: "Kalam", cursive; color: #d8c8a8; }
.olive .o-d { font-family: var(--mono); font-size: .86em; color: #c9dbc0; }
.olive .o-e { font: 600 .95em "Cinzel", serif; letter-spacing: .05em; color: #f1e4c8; }
.olive .o-f { font: italic 1.1em "Libre Baskerville", serif; color: #b9d79a; }
.olive .ol-3 { font-size: 1.05em; }
.olive .o-g { font-family: var(--mono); letter-spacing: .3em; text-transform: uppercase; font-size: .75em; color: #a9b79a; }
.olive .o-h { font: italic 1.15em "Crimson Text", serif; color: #f3ead6; }
.olive .o-i { font: 1.3em "Libre Baskerville", serif; color: #b9d79a; }
.olive .o-j { font-family: "Kalam", cursive; font-size: 1.12em; color: #e6c79a; }
.olive .ol-4 { margin-top: .6em; font-size: .85em; opacity: .75; }

/* norse:inuit futurism, larger and joined to the page with the cup and pens */
.deck.norse-pair { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr) !important;
  grid-template-rows: none !important; height: auto !important; gap: var(--pad); }
.deck.norse-pair .card { height: min(82vh, 760px) !important; aspect-ratio: auto; }
.deck.norse-pair .np-link { position: absolute; z-index: 5; top: 50%; left: calc((100% - var(--pad) * 3) / 2.9 + var(--pad) * 1.5);
  width: calc(var(--pad) + 44px); height: 2px; translate: -50% -50%; background: linear-gradient(90deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .85));
  border-radius: 2px; box-shadow: 0 0 12px rgba(255, 255, 255, .45); pointer-events: none; }
.deck.norse-pair .np-link::before, .deck.norse-pair .np-link::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px;
  border-radius: 50%; background: #fff; translate: 0 -50%; box-shadow: 0 0 10px rgba(255, 255, 255, .6); }
.deck.norse-pair .np-link::before { left: -4px; } .deck.norse-pair .np-link::after { right: -4px; }
.deck.norse-pair .norse { display: flex !important; flex-direction: column; }
.deck.norse-pair .norse h3 { font-size: clamp(20px, 2.4vw, 36px) !important; padding: 4% 0 3% !important; }
.deck.norse-pair .norse img { flex: 1; min-height: 0; aspect-ratio: auto !important; height: auto; }
.deck.norse-pair .norse p, .deck.norse-pair .norse .over, .deck.norse-pair .norse .sub { font-size: clamp(12px, 1.05vw, 16px) !important; line-height: 1.6 !important; }
@media (min-width: 761px) {
  .deck.five { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .deck.five > .card { grid-column: span 2; } .deck.five > .card:nth-child(n + 4) { grid-column: span 3; }
  .deck.eight.seven { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .deck.eight.seven > .card { grid-column: span 3; } .deck.eight.seven > .card:nth-child(n + 5) { grid-column: span 4; aspect-ratio: 1.4 / 1; }
}
@media (max-width: 760px) {
  .deck.norse-pair { grid-template-columns: 1fr !important; }
  .deck.norse-pair .card { height: auto !important; aspect-ratio: 4 / 5; }
  .deck.norse-pair .card:last-child { aspect-ratio: 3 / 4.4; }
  .deck.norse-pair .np-link { left: 50%; top: calc(50% - 6vw); width: 2px; height: calc(var(--pad) + 40px); }
  .deck.norse-pair .np-link::before { left: 50%; top: -4px; translate: -50% 0; } .deck.norse-pair .np-link::after { right: auto; left: 50%; top: auto; bottom: -4px; translate: -50% 0; }
}

/* the runs: a card stack on a flywheel */
.mband.fly { position: relative; padding: clamp(18px, 3vh, 36px) 0 clamp(14px, 2.4vh, 28px); overflow: hidden; height: auto !important; }
.fly-stage { position: relative; height: clamp(300px, 62vh, 620px); perspective: 1600px; outline: none; touch-action: pan-y; user-select: none; }
.fly-it { position: absolute; left: 50%; top: 50%; height: 88%; aspect-ratio: var(--a); max-width: 74vw; border-radius: 16px; overflow: hidden;
  translate: -50% -50%; transition: transform .7s cubic-bezier(.2, .75, .2, 1), opacity .5s ease, filter .5s ease; will-change: transform;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45); background: #0c0f15; cursor: pointer; }
.fly-it.on { cursor: zoom-in; box-shadow: 0 26px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .14); }
.fly-it.on:hover { box-shadow: 0 26px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .7), 0 0 26px rgba(255, 255, 255, .2); }
.fly-it > figure { margin: 0; width: 100%; height: 100%; }
.fly-it > figure > img, .fly-it > figure > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fly-it.fly-note { background: #f4f1ea; color: #1d2330; display: grid; place-items: center; padding: 6%; overflow: auto; }
.fly-it.fly-note > * { font-size: clamp(12px, 1.1vw, 16px); }
.fly-it.fly-card > .bucky-card { width: 100%; height: 100%; }
.fly-it.fly-film .watch { position: relative; width: 100%; height: 100%; }
.fly-it.fly-book .t.book { position: absolute; inset: 0; margin: 0; }
.fly-it.fly-book .t.book > img.bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fly-it.fly-book .t.book > img.inset { position: absolute; left: 50%; top: 50%; height: 76%; width: auto; translate: -50% -50%; border-radius: 12px; box-shadow: 0 24px 50px rgba(0, 0, 0, .5); }
.fly-it.fly-batt { background: #f6f5f1; cursor: pointer; }
.fly-it:not(.on) > * { pointer-events: none; }
.fly-ui { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(12px, 2vh, 22px); }
.fly-ui button { border: 0; cursor: pointer; }
.fly-prev, .fly-next { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  position: relative; transition: background .25s; }
.fly-prev:hover, .fly-next:hover { background: rgba(255, 255, 255, .22); }
.fly-prev::after, .fly-next::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border: solid #fff; border-width: 0 0 1.6px 1.6px; }
.fly-prev::after { translate: -30% -50%; rotate: 45deg; } .fly-next::after { translate: -70% -50%; rotate: -135deg; }
.fly-dots { display: flex; gap: 6px; }
.fly-dots button { width: 7px; height: 7px; padding: 0; border-radius: 99px; background: rgba(255, 255, 255, .3); transition: width .35s, background .35s; }
.fly-dots button.on { width: 22px; background: rgba(255, 255, 255, .9); }
@media (max-width: 760px) { .fly-stage { height: clamp(260px, 50vh, 460px); } .fly-it { max-width: 82vw; } }

/* the 1st Earth Battalion page, redrawn */
.batt { width: 100%; height: 100%; display: block; }
.batt .bt-frame { fill: #fbfaf6; stroke: #2a2a2a; stroke-width: 3; }
.batt line, .batt polygon, .batt circle { fill: none; stroke: #1d1d1d; stroke-linecap: round; }
.batt .bt-r { stroke-width: 1.4; } .batt .bt-f { stroke-width: .7; stroke: #333; }
.batt .bt-a { stroke-width: 1.4; } .batt .bt-hd { fill: #1d1d1d; stroke: none; }
.batt .bt-zone { stroke-width: 2; stroke-dasharray: 10 8; }
.batt .bt-rim { stroke-width: 1.3; stroke-dasharray: 2 5; }
.batt .bt-h { stroke-width: 1.2; }
.batt .bt-t { stroke-width: 2.2; }
.batt .bt-dot { fill: #1d1d1d; }
.batt .bt-logo circle { stroke-width: 2.4; fill: #fff; } .batt .bt-logo rect { fill: #1d1d1d; stroke: none; }
.batt .bt-one { font: 700 64px "Krona One", sans-serif; fill: #e6e6e6; text-anchor: middle; }
.batt .bt-earth { font: 700 17px "Krona One", sans-serif; fill: #fff; text-anchor: middle; letter-spacing: .04em; }
.batt .bt-bat { font: 700 9px var(--mono); fill: #1d1d1d; text-anchor: middle; letter-spacing: .12em; }
.batt .bt-l { font: 700 15px "Kalam", cursive; fill: #1d1d1d; letter-spacing: .06em; }
.batt .bt-s { font-size: 12px; }
.batt .bt-n { font: 400 21px "Kalam", cursive; fill: #151515; }
/* a playing film shows its pause button only under the pointer */
.watch .vp { position: absolute; left: 50%; top: 50%; z-index: 6; width: 64px; height: 64px; translate: -50% -50%; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .85); background: rgba(8, 12, 18, .4); backdrop-filter: blur(6px); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.watch .vp::before, .watch .vp::after { content: ""; position: absolute; top: 50%; width: 5px; height: 22px; background: #fff; border-radius: 2px; translate: 0 -50%; }
.watch .vp::before { left: calc(50% - 8px); } .watch .vp::after { left: calc(50% + 3px); }
.watch .vp.paused::before { left: calc(50% - 6px); width: 0; height: 0; background: none; border-radius: 0; border-style: solid;
  border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.watch .vp.paused::after { display: none; }
.watch.playing:hover .vp { opacity: 1; pointer-events: auto; }
@media (hover: none) { .watch.playing.touched .vp { opacity: 1; pointer-events: auto; } }
.qe-card .qe p.qe-t { margin-top: auto !important; margin-bottom: .5em !important; }
.olive .o-atm { text-transform: uppercase; }
.crys .bhn-poem { font-size: clamp(13px, 1.12vw, 17px); }
.ed-body { grid-template-columns: minmax(0, 1fr) !important; } .ed-body > div, .mosaic.whole-m, .mband.fly { min-width: 0; max-width: 100%; }
.fly-prev, .fly-next { background: rgba(20, 26, 38, .08); box-shadow: inset 0 0 0 1px rgba(20, 26, 38, .4); }
.fly-prev:hover, .fly-next:hover { background: rgba(20, 26, 38, .16); }
.fly-prev::after, .fly-next::after { border-color: #1b2230; }
.fly-dots button { background: rgba(20, 26, 38, .25); } .fly-dots button.on { background: rgba(20, 26, 38, .8); }
/* round 23: "earthship" bold and larger; "a storyworld book" plain */
.themes2.sw .sw-title .story { font-weight: 400 !important; }
.themes2.sw .sw-title .story .sw-ed { font-weight: 700 !important; font-size: 1.22em; letter-spacing: .01em; }
.themes2.sw .sw-title .story .lg { font-weight: 400 !important; }
@media (max-width: 760px) { .themes2.sw .sw-title .story .sw-ed { display: block; margin-bottom: .1em; } }
/* round 23: themes text tuned to its ground: brighter over the dark earth-rise, darker over the pale trees */
.themes2.sw-a .th-list .ln p { opacity: 1 !important; filter: saturate(.6) brightness(1.25) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .8) !important; }
.themes2.sw-b .th-list .ln p { filter: saturate(.75) brightness(.5) contrast(1.2) !important;
  text-shadow: 0 0 12px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, .9) !important; }
/* round 23: the longevity line keeps its own bright colours (the emojis) */
.themes2.sw .th-list .ln p:has(b.y) { filter: none !important; }
/* round 23: his new pictures as a grid under the storm-lit ships; portraits run two rows tall */
.deck.more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: none !important;
  grid-auto-rows: clamp(150px, 15.5vw, 250px); grid-auto-flow: dense; height: auto !important; }
.deck.more > .card { height: auto !important; min-height: 0 !important; }
.deck.more > .card.tall2 { grid-row: span 2; }
@media (max-width: 760px) { .deck.more { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 34vw; } }
/* round 24: the themes take no clicks; a word only shifts its colour faintly under the pointer */
.themes2.sw .w, .themes2.sw [data-cyc] { cursor: default; transition: color .6s ease; }
.themes2.sw .w:hover { text-decoration: none; color: color-mix(in srgb, currentColor 78%, #9fd8cf); }
.themes2.sw [data-cyc]:hover { outline: none; }
.themes2.in .th-list p:hover { transform: none; }
/* round 24: longevity in red */
.themes2.sw .th-list p:has(> b.y) > b.y, .themes2.sw .th-list p:has(> b.y) > b.y .w { color: rgba(196, 72, 68, .62); }
.themes2.sw .th-list p:has(> b.y) > b.y .w:hover { color: rgba(196, 72, 68, .8); }
/* round 25 */
/* the spoken word: one quiet tone, and "through time" set apart as its own idea */
.card .t.spoken .h1, .card .t.spoken .h2, .card .t.spoken .h3, .card .t.spoken .h4 { color: rgba(225, 232, 242, .88); }
.card .t.spoken .tt { font: italic 400 1.5em/1.2 "Libre Baskerville", Georgia, serif; letter-spacing: .02em; color: #d9c79c;
  display: inline-block; margin: 0 .15em; text-shadow: 0 0 18px rgba(217, 199, 156, .25); }
/* Biosphere 3 whole: its card keeps the drawing's shape, the others share what is left */
.deck.wide.b3 { display: flex; height: calc((100vh - 3 * var(--pad)) / 2); }
.deck.wide.b3 > .card { flex: 1 1 0; min-width: 0; height: 100%; }
.deck.wide.b3 > .card:first-child { flex: 0 0 auto; aspect-ratio: 1025 / 679; }
@media (max-width: 760px) { .deck.wide.b3 { flex-direction: column; height: auto; } .deck.wide.b3 > .card { height: 62vw; flex: none; }
  .deck.wide.b3 > .card:first-child { height: auto; width: 100%; } }
/* the meridian caption laid on the king's-foot photo */
.mb .ig.ig-on { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 3.2em 1.1em 1em; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 10, 14, .78), rgba(8, 10, 14, .45) 60%, transparent); color: #f2f2ee;
  font: 400 clamp(11px, .9vw, 14px)/1.55 var(--mono); text-align: left; border-radius: inherit; }
.mb .ig.ig-on p { margin: 0; } .mb .ig.ig-on b { font-weight: 700; } .mb .ig.ig-on .ig-tag { color: #9fc4ff; }
.mb .ig.ig-on .ig-date { margin-top: .5em; opacity: .65; font-size: .9em; }
/* "Christian, change the world" back to its inverted page, filling the whole card */

.fly-it.fly-book .t.book { background: #0e1013 !important; border-radius: inherit; overflow: hidden; }
.fly-it.fly-book .t.book > img.bgimg { display: none !important; }
.fly-it.fly-book .t.book > img.inset { left: 0 !important; top: 0 !important; translate: none !important; width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 0 !important; box-shadow: none !important; filter: invert(1) !important; opacity: 1 !important; transform: none !important; }
/* the emblem set fades from one to the next */
.t.emb { position: relative; }
.t.emb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: emb 16s infinite; }
.t.emb > img:nth-child(2) { animation-delay: 4s; } .t.emb > img:nth-child(3) { animation-delay: 8s; } .t.emb > img:nth-child(4) { animation-delay: 12s; }
@keyframes emb { 0% { opacity: 0; } 5%, 25% { opacity: 1; } 31%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .t.emb > img { animation: none; } .t.emb > img:first-child { opacity: 1; } }
.t.emb > img { object-fit: contain; }
.t.emb > img:nth-child(1) { background: #2f3190; } .t.emb > img:nth-child(2) { background: #233d7f; }
.t.emb > img:nth-child(3) { background: #283985; } .t.emb > img:nth-child(4) { background: #115557; }
/* round 26 */
.deck.wide.b3 > .card:first-child { aspect-ratio: 1432 / 958; }
.t.b3s .slides, .t.b3s .slides ul, .t.b3s .slides li { height: 100%; }
.t.b3s .slides li > img { width: 100%; height: 100%; object-fit: cover; }
.t.b3s li.b3v { position: relative; overflow: hidden; background: #111; }
.t.b3s li.b3v video { position: absolute; inset: 0; width: 100%; height: 100%; }
.t.b3s li.b3v video.bk { object-fit: cover; filter: blur(28px) brightness(.7) saturate(1.1); transform: scale(1.15); }
.t.b3s li.b3v video.fg { object-fit: contain; }
/* the Nyhavn photo: both boats in view */
.deck.wide.b3 img[src*="Tempo_Earthship_nyhavn-ships"] { object-position: 0% 50%; }
/* "Christian, change the world": his inverted page laid over the Start's artwork */
.fly-it.fly-book .t.book > img.bgimg { display: block !important; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1 !important; filter: none !important; }
.fly-it.fly-book .t.book > img.inset { mix-blend-mode: screen !important; opacity: .95 !important; }
/* the Dec 2018 note in the grid */
.t.fbn { display: grid !important; place-items: center; background: #1c2129 !important; padding: 8%; }
.t.fbn .fb { font: 400 clamp(12px, 1vw, 15px)/1.6 var(--mono); color: #e6e9ee; text-align: left; }
.t.fbn .fb-name { font-weight: 700; margin: 0; } .t.fbn .fb-date { margin: .1em 0 .9em; opacity: .55; font-size: .85em; } .t.fbn .fb p { margin-bottom: 0; }
/* round 26: ATM just in capitals, in white, no box */
.olive .o-atm { font: inherit; font-weight: inherit; letter-spacing: .04em; color: #fff; padding: 0; border: 0; border-radius: 0; text-transform: uppercase; }
.t.b3s li.b3v img.bk { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(26px) brightness(.72); }
.t.b3s li.b3v video.fg { background: transparent !important; z-index: 1; }
/* round 27: links and wiring between pictures that belong together */
svg.lnk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
svg.lnk-link { z-index: 6; }
svg.lnk-link .lk-line { stroke: #fff; stroke-width: 3; fill: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }
svg.lnk-link .lk-dot { fill: #fff; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .4)); }
[data-lstyle="wire"] { position: relative; z-index: 1; }
svg.lnk-wire { z-index: 0; }
svg.lnk-wire .lk-line { stroke: rgba(140, 200, 230, .4); stroke-width: 2; fill: none; stroke-linejoin: round; }
svg.lnk-wire .lk-pulse { stroke: #9fe3ff; stroke-width: 2.4; fill: none; stroke-dasharray: 24 1400; stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(140, 220, 255, .9)); animation: lkpulse 4.8s linear infinite; }
svg.lnk-wire .lk-node { fill: #0c1118; stroke: rgba(140, 200, 230, .6); stroke-width: 1.5; }
@keyframes lkpulse { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1424; } }
@media (prefers-reduced-motion: reduce) { svg.lnk-wire .lk-pulse { animation: none; opacity: 0; } }
/* round 27: the tablet-in-blossoms film framed higher, on the iPad's screen */
video[src*="tablet-blossoms"] { object-position: 50% 18% !important; }
/* round 27: the crystal story on a new ground: deep storm-sea teal with a low sun ember, and the eye of its storm
   as slow rings instead of the triangle lattice */
.card .t.crystal-c:not(.olive) { background:
    radial-gradient(55% 40% at 78% 14%, rgba(255, 176, 96, .38), transparent 70%),
    radial-gradient(70% 55% at 22% 78%, rgba(40, 170, 175, .42), transparent 72%),
    linear-gradient(165deg, #0b2a33, #0f3a45 45%, #071a24) !important; }
.card .t.crystal-c:not(.olive)::before { inset: -30%; opacity: .26; background:
    repeating-radial-gradient(circle at 34% 62%, rgba(190, 240, 235, .55) 0 1px, transparent 1.5px 34px) !important;
  animation: crys-eye 26s ease-in-out infinite alternate; }
.card .t.crystal-c:not(.olive)::after { width: 120%; left: 34%; top: 62%; clip-path: none; border-radius: 50%; opacity: .7;
  background: conic-gradient(from 0deg, rgba(120, 230, 220, 0), rgba(120, 230, 220, .16), rgba(255, 190, 120, .1), rgba(120, 230, 220, 0) 55%) !important;
  animation: facet-spin 46s linear infinite; }
@keyframes crys-eye { to { transform: scale(1.12) rotate(6deg); } }
.card .t.crystal-c:not(.olive) .bhn-poem { text-shadow: 0 1px 10px rgba(4, 20, 26, .85); }
svg.lnk-wire .lk-line { stroke: rgba(150, 215, 240, .62); stroke-width: 3; }
svg.lnk-wire .lk-pulse { stroke-width: 3.4; stroke-dasharray: 40 1400; }
@media (max-width: 760px) { .deck.more > .card:has(.fbn) { grid-column: span 2; grid-row: span 2; } .t.fbn { padding: 7%; } }
@media (max-width: 760px) { .deck.more > .card:has(.fbn) { grid-row: span 1; } .t.fbn { padding: 4% 6%; } .t.fbn .fb { font-size: 11.5px; line-height: 1.5; } .t.fbn .fb-date { margin: 0 0 .4em; } }
/* round 28: "through time" only subtly apart: same type as its line, a soft yellow */
.card .t.spoken .tt { font: inherit; font-style: normal; letter-spacing: inherit; color: #e6d49a;
  display: inline; white-space: nowrap; margin: 0; text-shadow: none; }
/* round 29: the planetary mystics manifesto keeps its colours and never greys */
[data-anim] .manifesto.in .txt:hover .rv, [data-anim] .manifesto.in .txt .rv { opacity: 1; }
.manifesto .txt .g { color: #7d8590; } .manifesto .txt .lg { color: #a9b2bc; }
.manifesto .txt .bl { color: #2f6fe0; } .manifesto .txt .lb { color: #5f93d8; }
.manifesto .txt .nv { color: #1f3a8a; } .manifesto .txt .t { color: #22918b; }
.manifesto .txt .r { color: #d6331f; } .manifesto .txt .gr { color: #4f9a3a; }
.manifesto .txt .pu { color: #6a4fc1; } .manifesto .txt .y { color: #c9a800; }
.manifesto .txt .newer, .manifesto .txt .newer * { color: #12405a; } .manifesto .txt .newer .bl { color: #2f6fe0; }
.manifesto .txt .sig > span:first-child { color: #3f6f9a; } .manifesto .txt .sig .lg { color: #8fb3d6; }
.manifesto .txt .sig small { color: #8a939c; }
/* round 30: the orca and nyhavn trade places; nyhavn keeps both boats in view */
img[src*="Tempo_Earthship_nyhavn-ships"] { object-position: 0% 50%; }
img[src*="img-5361"] { object-position: 0% 50%; }
img[src*="Tempo_Earthship_orca-painting"], img[src*="img-4934"] { object-position: 50% 12%; }
/* round 31: biosphere 3 cropped closer (its right edge trimmed), the card takes the new shape */
.deck.wide.b3 > .card:first-child { aspect-ratio: 1185 / 1008; }
/* round 32: longevity in a bright yellow, with a little more air from the emojis either side */
.themes2.sw .th-list p:has(> b.y) > b.y, .themes2.sw .th-list p:has(> b.y) > b.y .w { color: #ffd60a; }
.themes2.sw .th-list p:has(> b.y) > b.y .w:hover { color: #ffe55c; }
.themes2.sw .th-list p:has(> b.y) > b.y { margin: 0 .45em; }
.themes2.sw .th-list p:has(> b.y) > b.y { text-shadow: 0 1px 3px rgba(40, 32, 0, .45); }
/* round 33: the signed page alone again, inverted (white writing on black); the light tunnel is set aside */
.fly-it.fly-book .t.book > img.bgimg { display: none !important; }
.fly-it.fly-book .t.book > img.inset { mix-blend-mode: normal !important; opacity: 1 !important; }
.fly-it.fly-book .t.book > img.inset { filter: invert(1) grayscale(1) contrast(2.1) brightness(.95) !important; }
.fly-it.fly-book .t.book { background: #000 !important; }
/* round 34: the pause button leaves when the pointer leaves, or rests still for a moment; it stays while paused */
.watch.playing:not(:hover) .vp, .watch.playing.idle .vp:not(.paused) { opacity: 0 !important; pointer-events: none !important; }
.watch.playing.idle:not(:has(.vp.paused)) { cursor: none; }
.watch .vp { transition: opacity .35s ease; }
/* round 35: the signed page lets the faint "the Start" printing behind the writing show through */
.fly-it.fly-book .t.book > img.inset { filter: invert(1) grayscale(1) contrast(1.45) brightness(.88) !important; }
/* round 40: the emblem, the hangar silhouette, the coast portrait and the 2018 note ride in the carousel before Pope Francis */
.fly-it.fly-emb > figure.t.emb, .fly-it.fly-fbn > figure.t.fbn { position: absolute; inset: 0; margin: 0; border-radius: inherit; overflow: hidden; }
.fly-it.fly-fbn .t.fbn .fb { font-size: clamp(12px, 1.05vw, 16px); }
/* round 41: longevity sits on a dark blue highlight */
.themes2.sw .th-list p:has(> b.y) > b.y { background: #14286b; padding: .08em .4em .14em; border-radius: 4px; text-shadow: none; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* round 42: disconnect sits a shade darker, reconnect onward bolder and larger */
.t.fbn .fb .fb-dis { color: #8b929b; }
.t.fbn .fb .fb-re { font-weight: 700; font-size: 1.1em; color: #fff; }
/* round 42: portrait and note combined into one carousel slide */
.fly-it.fly-pair > figure.t.fbn { display: grid; grid-template-columns: 1fr 1fr; padding: 0; align-items: center; }
.fly-it.fly-pair .pair-img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.fly-it.fly-pair .fb { padding: 0 9% 0 8%; }
/* round 42: emblems shown whole, scattered through the page */
.deck.more > .card.emb-fill { grid-column: span 2; }
.card.emb-fill figure, .emblem-drop figure { background: var(--eb); }
.card.emb-fill img, .emblem-drop img { object-fit: contain !important; }
.emblem-drop { padding: clamp(16px, 3vh, 40px) 16px; }
.emblem-drop figure { width: clamp(150px, 22vw, 320px); aspect-ratio: 1; margin: 0 0 0 var(--x); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.28); }
.emblem-drop img { width: 100%; height: 100%; display: block; }
@media (max-width: 760px) { .emblem-drop figure { margin-left: calc(var(--x) * .6); width: 46vw; } .fly-it.fly-pair .fb { padding: 0 6%; } }
/* round 43: each step of the note grows bolder and lighter */
.t.fbn .fb .fb-dis { color: #7d848d; font-weight: 400; }
.t.fbn .fb .fb-s1 { color: #b3b9c1; font-weight: 500; font-size: 1.04em; }
.t.fbn .fb .fb-s2 { color: #d9dde2; font-weight: 700; font-size: 1.08em; }
.t.fbn .fb .fb-s3 { color: #fff; font-weight: 800; font-size: 1.12em; }
/* round 43: portrait cropped from the right and centred on him, sitting closer to the note */
.fly-it.fly-pair > figure.t.fbn { grid-template-columns: .78fr 1.22fr; }
.fly-it.fly-pair .pair-img { object-position: 12% 30%; }
.fly-it.fly-pair .fb { padding: 0 8% 0 7%; }
/* round 43: emblems sit in the grids as ordinary cards */
.deck.more > .card.emb-fill { grid-column: auto; }
/* round 43: noetic sketch wider, norse card a touch smaller at the same shape */
@media (min-width: 761px) {
  .deck.norse-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.52fr) !important; }
  .deck.norse-pair .card { height: min(75.4vh, 700px) !important; }
  .deck.norse-pair .np-link { left: calc((100% - var(--pad) * 3) / 2.52 + var(--pad) * 1.5); }
}
@media (min-width: 761px) { .deck.tall:has(> .emb-fill) { grid-template-columns: repeat(3, minmax(0, 1fr)) calc((100vh - 3 * var(--pad)) / 2) !important; grid-auto-flow: row; } }
/* round 44: the notebook / map / laughter / infinite row, shorter and wider, notebook shown whole */
@media (min-width: 761px) {
  .deck.tall:has(> .emb-fill) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-rows: none !important; height: auto !important; }
  .deck.tall:has(> .emb-fill) > .card { height: auto !important; aspect-ratio: 3 / 4; }
}
/* round 44: hangar grid sits nearly flush with tighter corners */
.deck.more { gap: 4px !important; }
.deck.more > .card, .deck.more > .card .t, .deck.more > .card figure, .deck.more > .card img, .deck.more > .card video { border-radius: 6px !important; }
img[src*="Tempo_Earthship_sunset-balcony"] { object-position: 85% 45% !important; }
/* round 45: on phones the grids stack full width and every photo or film keeps its own shape, as on tempo.earth */
@media (max-width: 760px) {
  #biosphere3-issue .deck:not(.pope-stack):not(.pope-row) { display: flex !important; flex-direction: column !important; height: auto !important; max-height: none !important;
    overflow: visible !important; gap: 12px !important; scroll-snap-type: none !important; grid-template-columns: none !important; grid-template-rows: none !important; transform: none !important; }
  #biosphere3-issue .deck:not(.pope-stack):not(.pope-row) > .card { width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; flex: none !important;
    grid-row: auto !important; grid-column: auto !important; translate: none; }
  #biosphere3-issue .deck > .card.nat { aspect-ratio: var(--nat, 4 / 3) !important; }
  #biosphere3-issue .deck > .card.nat .t > img, .deck > .card.nat .t > video { object-fit: cover !important; }
}
/* round 46: the hangar photos as a veil. Every picture sits whole in one screen-sized contact sheet, veiled by
   dark slats; scrolling lifts each one in turn, in a scattered order, up to full size and sets it back unveiled. */
.veil { position: relative; height: calc(100vh + var(--n) * 55vh); margin: 0; }
.veil-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.veil-stage { position: relative; width: calc(100% - 32px); height: calc(100% - 48px); max-width: 1500px; }
.vl-it { position: absolute; margin: 0; border-radius: 10px; overflow: hidden; background: #0d0f14; will-change: transform;
  transform-origin: 0 0; box-shadow: 0 6px 18px rgba(0,0,0,.25); --o: 0; }
.vl-it > img, .vl-it > video { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(calc(1 - var(--o))) brightness(calc(.72 + .28 * var(--o))); }
.vl-veil { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(9, 11, 15, .74) 0 calc((1 - var(--o)) * 26px), transparent calc((1 - var(--o)) * 26px) 26px); }
.vl-it.lift { z-index: 5; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.vl-it.done:hover { --o: 1; }
.vl-it:not(.done):not(.lift):hover { --o: .35; }
@media (prefers-reduced-motion: reduce) { .veil { height: auto; } .veil-pin { position: static; height: auto; min-height: 100vh; } .vl-it { --o: 1 !important; } }

/* round 47: the hangar photos as a pile of prints dealt out into the sheet, all in full colour throughout */
.veil { height: calc(100vh + var(--n) * 38vh); }
.vl-it { transform-origin: 50% 50%; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.vl-it > img, .vl-it > video { filter: none; }
.vl-veil { display: none; }
.vl-it.lift { box-shadow: 0 30px 80px rgba(0,0,0,.55); }

/* round 48: the hangar photos as an accordion grid, all in full colour: in each row one picture stands open at its
   own shape and the others are narrow slices beside it, opening on hover or tap and drifting on by themselves */
.acc { display: flex; flex-direction: column; gap: 6px; padding: 24px 16px; max-width: 1500px; margin: 0 auto; }
.acc-row { display: flex; gap: 6px; width: 100%; }
.ac-it { margin: 0; flex: none; height: 100%; border-radius: 10px; overflow: hidden; cursor: pointer; background: #0d0f14;
  transition: width .9s cubic-bezier(.65,0,.25,1); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.ac-it > img, .ac-it > video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* round 49: the hangar photos as overlapping playing cards on a few levels; hover or click brings one to the top */
.acc-row.cards { position: relative; display: block; }
.acc-row.cards .ac-it { position: absolute; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
  transform: rotate(var(--tilt, 0deg)); box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); }
.acc-row.cards .ac-it:hover { transform: rotate(0deg) translateY(-10px) scale(1.04); box-shadow: 0 28px 70px rgba(0,0,0,.6); }

/* round 50 (Christian): the crystal poem card on white, its ring pattern as faint black lines, the words in darker
   tones of the same colours so they read on white */
.card .t.crystal-c.crys:not(.olive) { background: #fff !important; }
.card .t.crystal-c.crys:not(.olive)::before { opacity: .09; background:
    repeating-radial-gradient(circle at 34% 62%, #000 0 1px, transparent 1.5px 34px) !important; }
.card .t.crystal-c.crys:not(.olive)::after { display: none; }
.card .t.crystal-c.crys:not(.olive) .bhn-poem { text-shadow: none; color: #333; }
.crys .bhn-poem i { color: rgba(0, 0, 0, .28); }
.crys .c1, .crys .c10, .crys .c8 { color: #111; }
.crys .c2 { color: #b0701c; }
.crys .c3 { color: #2f5f9e; }
.crys .c4 { color: #5d6e84; }
.crys .c5 { color: #a5652a; }
.crys .cs { color: #4a76b0 !important; }
.crys .c6 { color: #6a52b8; }
.crys .c7 { color: #2f8a78; }
.crys .c9 { color: #8a6a44; }

/* round 51 (Christian): the playing cards as overlapping circles, on a background colour of their own */
.acc.round { background: #e6ddcf; box-shadow: 0 0 0 100vmax #e6ddcf; clip-path: inset(0 -100vmax); padding: 56px 16px; }
.acc.round .acc-row.cards .ac-it { border-radius: 50%; box-shadow: 0 12px 30px rgba(60, 40, 20, .28), 0 0 0 3px #f6f1e8; }
.acc.round .acc-row.cards .ac-it:hover { box-shadow: 0 26px 60px rgba(60, 40, 20, .38), 0 0 0 3px #fff; }
.acc.round .acc-row { background: none !important; }

/* round 52 (Christian): the circles on white with the page's line pattern in faint black, woven between the rows;
   early march in earth tones */
.acc.round { background: #fff; box-shadow: 0 0 0 100vmax #fff; position: relative; isolation: isolate; padding: 70px 16px; }
.acc.round::before { content: ""; position: absolute; inset: 0 -100vmax; z-index: -1; pointer-events: none; opacity: .1;
  background: url(assets/img/pattern-phase.svg) center / cover no-repeat; filter: invert(1) grayscale(1) contrast(1.4); }
.acc.round .acc-row + .acc-row { margin-top: -6%; }
.acc.round .acc-row.cards .ac-it { box-shadow: 0 14px 34px rgba(0, 0, 0, .2), 0 0 0 3px #fff; }
.acc.round .acc-row.cards .ac-it:hover { box-shadow: 0 26px 60px rgba(0, 0, 0, .3), 0 0 0 3px #fff; }
.march { background:
  radial-gradient(38% 46% at var(--ax, 25%) var(--ay, 40%), rgba(184, 112, 70, .34), transparent 70%),
  radial-gradient(34% 40% at var(--bx, 75%) var(--by, 65%), rgba(120, 128, 72, .32), transparent 70%),
  radial-gradient(50% 60% at 50% 110%, rgba(140, 96, 60, .28), transparent 70%), #ece2cf; }
.march::before, .march::after { filter: sepia(1) saturate(1.6) hue-rotate(-10deg) brightness(.7); }
.march .txt::before { background: radial-gradient(40% 50% at 30% 50%, rgba(200, 150, 90, .22), rgba(200, 150, 90, 0)); }
.acc.round .acc-row + .acc-row { margin-top: -2%; }
.acc.round::before { opacity: .16; }

/* round 53 (Christian): the solship banner runs from Martian red on the left into its own dark glass on the right,
   a planet turning earthlike */
#whatif .ed-plate { background: linear-gradient(90deg, rgba(168, 52, 26, .86), rgba(140, 58, 34, .66) 30%, rgba(60, 34, 34, .5) 62%, rgba(6, 14, 30, .5)); }

/* round 54 (Christian): noetic and science share one colour, art its own; that line slightly bigger, the renaissance
   line slightly smaller */
.qe-card .qe-a { font-size: clamp(13px, 1.1vw, 17px) !important; }
.qe-card .qe-a .g1, .qe-card .qe-a .g4 { color: #94d3a2; }
.qe-card .qe-a .g2 { color: #f0b46e; }
.qe-card .qe-h { font-size: clamp(13px, 1.25vw, 19px) !important; }

/* round 55: the olive arc card and the spoken-word card swap places; on phones the olive card keeps a tall shape so
   all its words show */
@media (max-width: 760px) { #biosphere3-issue .deck > .card:has(> .t.olive) { aspect-ratio: 3 / 4; height: auto; } }

/* round 56: the living contour map behind the circles replaces the still line pattern */
.acc.round::before { display: none; }
.acc-topo { position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; z-index: -1; pointer-events: none; display: block; }

/* round 57 (Christian): the fellow imperfectionist drawing less contrasty, more saturated and radiant */
img[src$="Tempo_Earthship_fellow-imperfectionist.webp"] { filter: brightness(1.08) contrast(.86) saturate(1.45); }

/* round 59 (Christian): the "solship : a storyworld book" banner keeps its original terrain look on the right (the
   Earth side) while a cratered Mars desert, rust dunes and dust, takes over from the left and fades into it */
#biosphere3-issue .sw-wide.sw-title::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 9% 30%, rgba(60, 18, 8, .55) 0 2.2%, rgba(240, 160, 110, .35) 2.6%, transparent 3.4%),
    radial-gradient(circle at 22% 74%, rgba(60, 18, 8, .5) 0 3.4%, rgba(240, 160, 110, .3) 3.9%, transparent 4.8%),
    radial-gradient(circle at 33% 22%, rgba(60, 18, 8, .45) 0 1.3%, rgba(240, 160, 110, .3) 1.6%, transparent 2.1%),
    radial-gradient(circle at 4% 82%, rgba(60, 18, 8, .45) 0 1.1%, rgba(240, 160, 110, .28) 1.4%, transparent 1.9%),
    radial-gradient(circle at 41% 64%, rgba(60, 18, 8, .35) 0 1.6%, rgba(240, 160, 110, .22) 1.9%, transparent 2.5%),
    radial-gradient(circle at 15% 50%, rgba(60, 18, 8, .35) 0 .7%, transparent 1.1%),
    radial-gradient(circle at 28% 45%, rgba(60, 18, 8, .35) 0 .6%, transparent 1%),
    repeating-linear-gradient(168deg, rgba(255, 190, 140, .08) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(172deg, rgba(70, 20, 6, .14) 0 6px, transparent 6px 31px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .12 0 0 0 0 .05 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(80% 160% at 18% 40%, #b8552c, #8f3a1c 55%, #5e2412);
  -webkit-mask-image: linear-gradient(90deg, #000 28%, rgba(0, 0, 0, .55) 46%, transparent 66%);
  mask-image: linear-gradient(90deg, #000 28%, rgba(0, 0, 0, .55) 46%, transparent 66%); }
#biosphere3-issue .sw-title .glass { z-index: 0; }

/* round 60 (Christian): "a digital book series" above, and "rock starchitecture & bliss mysticism" beneath it as its
   own sub-header band in a different colour; the two sit flush and the lower band carries the rounded corners */
.cover-in.mag-sub { display: flex !important; flex-direction: column; align-items: stretch; padding: 0 !important; background: none !important;
  overflow: hidden; white-space: normal !important; width: min(720px, 94%); }
.cover-in.mag-sub .mg-a { display: block; padding: 14px clamp(20px, 3vw, 44px) 12px; background: #eef1f6; color: #22324f; text-align: center; }
.cover-in.mag-sub .cin-s { display: block; margin: 0 !important; padding: 11px clamp(20px, 3vw, 44px) 13px; background: #2b8a8f; color: #fff;
  text-align: center; font-size: .9em; letter-spacing: .16em; }

/* round 61: the HC letter transcribed in full from the journal page */
.fly-note .grave.hc-letter { font-size: clamp(11px, .92vw, 14px); line-height: 1.55; text-align: left; }
@media (max-width: 760px) { .fly-note .grave.hc-letter { font-size: 11px; } }

/* round 62: the contour rings hug each circle; a line of Christian's at the head of the section */
.acc.round .acc-head { position: relative; z-index: 1; margin: 0 auto clamp(18px, 3vw, 40px); max-width: 760px; text-align: center;
  font: italic 400 clamp(17px, 1.7vw, 26px)/1.45 "Libre Baskerville", serif; color: #1d2430; text-wrap: balance; }

/* round 64: secretmap cycling circles */
.ac-it.cyc { position: relative; }
.ac-it.cyc > img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.ac-it.cyc > img.on { opacity: 1; }

/* round 65 (Christian): the two sub-header bands run the full viewport width with bigger type; the tempo masthead
   loses its rounded ends and only the lower (teal) band keeps the curve */
.cover > .masthead { border-radius: 0 !important; }
.cover-in.mag-sub { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 0 26px 26px !important; }
.cover-in.mag-sub .mg-a { font-size: clamp(17px, 1.7vw, 26px); padding-top: clamp(12px, 1.3vw, 20px); padding-bottom: clamp(10px, 1.1vw, 17px); }
.cover-in.mag-sub .cin-s { font-size: clamp(15px, 1.45vw, 22px); padding-top: clamp(10px, 1.1vw, 16px); padding-bottom: clamp(12px, 1.3vw, 19px); }

/* round 65 (Christian): the plates name the books only, no edition numbers. Each plate carries data-book / data-vol so a
   later volume of the same book (a solship 2, say) can show its volume: give that plate data-vol="2" and the number returns. */
.ed-plate .ed-n, .ed-plate .ed-k { display: none; }
.ed-plate[data-vol]:not([data-vol="1"]) .ed-n { display: block; }
.ed-plate .ed-name { font-size: clamp(28px, 3.2vw, 52px); }
@media (max-width: 760px) { .ed-plate .ed-name { font-size: 30px; } }

/* round 66: veil / unveil by chapter */
.vl-bar { position: relative; z-index: 5; display: flex; justify-content: center; padding: 10px 16px; background: #0b0d12; }
.vl-tog { display: inline-flex; align-items: center; gap: 12px; border: 0; cursor: pointer; padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); color: rgba(233, 237, 242, .82); font: 500 11px/1 var(--mono, monospace); letter-spacing: .16em;
  text-transform: lowercase; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: background .3s, color .3s; }
.vl-tog:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.vl-ic { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 225deg; translate: 0 2px; transition: rotate .35s; }
.vl-bar.is-veiled .vl-ic { rotate: 45deg; translate: 0 -2px; }
.vl-bar.is-veiled .vl-tog { background: rgba(255, 255, 255, .9); color: #14213a; }
.vl-mode { position: fixed; left: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 900; display: flex; gap: 4px; padding: 6px;
  border-radius: 999px; background: rgba(12, 16, 22, .62); backdrop-filter: blur(12px) saturate(1.3); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .14);
  font: 500 11px/1 var(--mono, monospace); letter-spacing: .14em; opacity: 0; translate: 0 16px; pointer-events: none; transition: opacity .4s, translate .4s; }
.vl-mode.on { opacity: 1; translate: 0 0; pointer-events: auto; }
.vl-mode button { border: 0; cursor: pointer; color: #e9edf2; background: transparent; border-radius: 999px; padding: 10px 13px; font: inherit; letter-spacing: inherit; }
.vl-mode button:hover { background: rgba(255, 255, 255, .12); }
.vl-mode button.cur { background: rgba(255, 255, 255, .9); color: #14213a; }
.lbx.open ~ .vl-mode, html.lbx-lock .vl-mode { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .vl-mode { left: auto; right: 12px; bottom: 66px; font-size: 10px; } .vl-mode button { padding: 9px 10px; } }

/* round 67 (Christian): a clean revamp of the whole top banner. One full-bleed block: a calmer navy masthead (the circuit
   texture faded right back and dissolving downward), then the white and teal bands edge to edge, flush, with only the
   teal band's lower corners rounded. */
.cover > .masthead { height: clamp(150px, 22vh, 230px); box-shadow: none !important;
  background: radial-gradient(120% 140% at 50% 0%, #26377a 0%, #1b2858 55%, #141d42 100%) !important; }
.cover > .masthead > img { opacity: .16; mix-blend-mode: screen; filter: grayscale(.4) blur(.3px);
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0,0,0,.55) 60%, transparent 100%); mask-image: linear-gradient(#000 0%, rgba(0,0,0,.55) 60%, transparent 100%); }
.cover > .masthead .logo { font-size: clamp(60px, 7.4vw, 118px); text-shadow: 0 6px 30px rgba(0, 0, 0, .25); }
.cover > .cover-in.mag-sub { width: 100vw !important; margin: 0 calc(50% - 50vw) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.cover-in.mag-sub .mg-a { background: #f2f4f8; color: #1b2858; font-weight: 500; letter-spacing: .3em;
  border-top: 1px solid rgba(255, 255, 255, .5); border-bottom: 1px solid rgba(27, 40, 88, .12); }
.cover-in.mag-sub .cin-s { background: #2a8a8e; letter-spacing: .2em; }
@media (max-width: 760px) { .cover-in.mag-sub .mg-a { letter-spacing: .22em; font-size: 15px; } .cover-in.mag-sub .cin-s { letter-spacing: .08em; font-size: 13px; } }

/* round 68 (Christian): a veiled section recedes instead of blurring: it shrinks back (further back in phase space), dims,
   and slips behind a front layer that covers most of it; a tap brings it forward to full size */
#biosphere3 > div > section { transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .6s, filter .6s, max-height .75s cubic-bezier(.2,.7,.2,1), border-radius .6s; }
#biosphere3 > div > section.vl-open { overflow: hidden !important; }
#biosphere3 > div > section.vl-back { max-height: clamp(150px, 30vh, 280px) !important; min-height: 0 !important; overflow: hidden !important;
  position: relative; cursor: pointer; transform: scale(.8); transform-origin: 50% 0; border-radius: 28px;
  margin-bottom: calc(-1 * clamp(26px, 5vh, 52px)); opacity: .62; filter: saturate(.7) brightness(.82);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
#biosphere3 > div > section.vl-back:hover { transform: scale(.83); opacity: .82; filter: saturate(.9) brightness(.95); }
#biosphere3 > div > section.vl-back::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 0; height: 56%; z-index: 60;
  pointer-events: auto; background: #0b0d12; border-radius: 34px 34px 0 0; box-shadow: 0 -22px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12); }
.vl-bar { position: relative; z-index: 6; }
.vl-bar.vl-bare { padding: 6px 16px; }
.vl-bar.vl-bare .vl-tog { padding: 6px 10px; gap: 0; }
.vl-bar.vl-bare .vl-lab { display: none; }
.vl-bar + section.vl-back { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { #biosphere3 > div > section { transition: none; } }
/* round 68b: the front layer is opaque and sits clear of the receded section's edges */
#biosphere3 > div > section.vl-back { opacity: 1; filter: saturate(.72) brightness(.78); }
#biosphere3 > div > section.vl-back:hover { opacity: 1; filter: saturate(.95) brightness(.95); }
#biosphere3 > div > section.vl-back::after { left: 0; right: 0; height: 40%; background: #0b0d12; border-radius: 30px 30px 0 0;
  box-shadow: 0 -26px 50px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .14); }

/* round 69 (Christian): no shrinking and no black bar. A veiled section keeps the full width and folds back behind the page,
   hinged at its top edge as if the background flipped over it, its lower part sinking into the background */
#biosphere3 > div > section.vl-back, #biosphere3 > div > section.vl-back:hover { transform: perspective(1100px) rotateX(34deg); transform-origin: 50% 0;
  border-radius: 0; box-shadow: none; margin-bottom: calc(-1 * clamp(40px, 9vh, 90px)); max-height: clamp(170px, 34vh, 320px) !important; }
#biosphere3 > div > section.vl-back { filter: saturate(.8) brightness(.8); }
#biosphere3 > div > section.vl-back:hover { transform: perspective(1100px) rotateX(26deg); filter: saturate(.95) brightness(.95); }
#biosphere3 > div > section.vl-back::after { left: 0; right: 0; top: 0; bottom: 0; height: auto; border-radius: 0; box-shadow: none;
  background: linear-gradient(rgba(11, 13, 18, 0) 0%, rgba(11, 13, 18, .08) 30%, rgba(11, 13, 18, .7) 68%, #0b0d12 94%); }
.vl-bar + section.vl-back { margin-top: 0; }
#biosphere3 > div > section.vl-back::after { z-index: 400; }
#biosphere3 > div > section.vl-back { transform: perspective(800px) rotateX(40deg); }
#biosphere3 > div > section.vl-back:hover { transform: perspective(800px) rotateX(32deg); }
#biosphere3 > div > section.vl-back { transform: perspective(900px) rotateX(-46deg); margin-bottom: calc(-1 * clamp(30px, 7vh, 70px)); }
#biosphere3 > div > section.vl-back:hover { transform: perspective(900px) rotateX(-36deg); }
#biosphere3 > div > section.vl-back { margin-bottom: calc(-1 * clamp(60px, 13vh, 125px)); }

/* round 71 (Christian): sections fold away into a colour-abstraction banner of their own images, titled; all open by default.
   Open: a slim colour strip above each section that opens on hover into the collapse handle. Shut: a full banner. */
#biosphere3 > div > section { transition: max-height .7s cubic-bezier(.2,.7,.2,1), opacity .5s; }
#biosphere3 > div > section.vl-moving { overflow: hidden !important; }
#biosphere3 > div > section.vl-shut { max-height: 0; min-height: 0 !important; overflow: hidden !important; opacity: 0; padding-top: 0 !important; padding-bottom: 0 !important; }
#biosphere3 > div > section.vl-shut:not(.vl-moving) { display: none !important; }
.vl-ban { position: relative; z-index: 6; height: 7px; overflow: hidden; background: var(--g); transition: height .55s cubic-bezier(.2,.7,.2,1); }
.vl-ban::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 180% at 20% 0%, rgba(255,255,255,.18), transparent 60%),
  linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.28)); pointer-events: none; }
.vl-ban:hover, .vl-ban:focus-within { height: 40px; }
.vl-ban.is-shut { height: clamp(78px, 11vh, 120px); }
.vl-b { position: absolute; inset: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(18px, 3vw, 44px); border: 0; background: none; cursor: pointer; color: #fff; text-align: left;
  font: 500 clamp(11px, .9vw, 13px)/1.2 var(--mono, monospace); letter-spacing: .16em; text-transform: lowercase; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
/* round 80: shut banners keep the same mono title as open ones (Christian) */
.vl-t { opacity: 0; transition: opacity .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-ban:hover .vl-t, .vl-ban:focus-within .vl-t, .vl-ban.is-shut .vl-t { opacity: 1; }
.vl-b .vl-ic { flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 225deg; translate: 0 3px; transition: rotate .35s; opacity: 0; }
.vl-ban:hover .vl-ic, .vl-ban.is-shut .vl-ic { opacity: .9; }
.vl-ban.is-shut .vl-ic { rotate: 45deg; translate: 0 -3px; }
@media (hover: none) { .vl-ban { height: 26px; } .vl-ban .vl-t, .vl-ban .vl-ic { opacity: .85; } }
/* round 72: the fold switch sits above the edit-mode button instead of under it */
/* round 73: the edit button moves up instead; the fold switch returns to the corner */
/* round 74: the themes list and seam fold with the themes banner */
#biosphere3 .vl-moving { overflow: hidden !important; }
#biosphere3 .vl-shut { max-height: 0; min-height: 0 !important; overflow: hidden !important; opacity: 0; transition: max-height .7s cubic-bezier(.2,.7,.2,1), opacity .5s; }
#biosphere3 .sw-themes, #biosphere3 .th-seam { transition: max-height .7s cubic-bezier(.2,.7,.2,1), opacity .5s; }
.vl-b { text-transform: none !important; }
/* round 75 (Christian): "a jump in time space" sits tighter: destiny manifest, july 4th and Anthem closer together vertically */
#biosphere3 .deck.wide:not(.b3) { padding-bottom: 4px !important; }
#biosphere3 .sage.film-moment { padding-top: 4px !important; padding-bottom: 4px !important; }
#biosphere3 .anthem { padding-top: 4px !important; }

/* round 77 (Christian): cover top line in the caps band look, larger than "a digital book series" */
.cover-in.mag-sub .cin-s { background: #d3dce6 !important; color: #1b2858 !important; font: 500 clamp(17px, 1.85vw, 27px)/1.2 var(--mono) !important; font-style: normal !important; text-transform: uppercase; letter-spacing: .12em !important; padding-top: clamp(14px, 1.5vw, 22px) !important; padding-bottom: clamp(14px, 1.5vw, 22px) !important; }
.cover-in.mag-sub .cin-s b { font-weight: 500; }
.cover-in.mag-sub .cin-s .cs-a { font-weight: 700; }
.cover-in.mag-sub .cin-s .cs-sl { color: #4f78c4; }
.cover-in.mag-sub .cin-s .cs-amp { color: #2a8a8e; font-weight: 700; }
@media (max-width: 760px) { .cover-in.mag-sub .cin-s { font-size: 16px !important; letter-spacing: .04em !important; } }
/* round 78: "a digital book series" a bit smaller */
.cover-in.mag-sub .mg-a { font-size: clamp(14px, 1.45vw, 21px) !important; }
@media (max-width: 760px) { .cover-in.mag-sub .mg-a { font-size: 13px !important; } }
/* round 81 (Christian): spoken word text nested inside its circle */
.card .t.spoken::before { width: min(88%, 88cqh, 520px); border-color: rgba(170, 195, 230, .2); }
.card .t.spoken { container-type: size; }
.card .t.spoken > div { width: min(60%, 60cqh); }
.card .t.spoken p:first-child { font-size: clamp(11.5px, 1.02vw, 15px) !important; line-height: 1.7 !important; text-wrap: balance; }
.card .t.spoken p:first-child .lb { display: block; white-space: normal; font-size: clamp(15px, 1.4vw, 21px); margin-bottom: .55em; }
.card .t.spoken .sp-d { display: block; margin-top: .7em; }
.card .t.spoken .h2, .card .t.spoken .h4, .card .t.spoken .tt { white-space: nowrap; }
/* round 82: pale banners carry dark titles */
.vl-ban.vl-light .vl-b { color: #1d3c48; text-shadow: none; }
/* round 83: zoom in on the seasons greetings street circle */
.ac-it img[src*="seasons-greetings-street"] { transform: translateY(-23%) scale(2); transform-origin: 51% 74%; }
/* round 84 (Christian): "tones with scones & americanos" at the size of the lines above */
.olive .ol-3 { font-size: .83em !important; }
/* round 85: spoken word text smaller so it sits well inside the ring */
.card .t.spoken p:first-child { font-size: clamp(10px, .82vw, 12.5px) !important; }
.card .t.spoken p:first-child .lb { font-size: clamp(13px, 1.12vw, 17px); }
.card .t.spoken > div { width: min(56%, 56cqh); }
/* round 86: earth view gets a third row of four (Christian's new photos) */
@media (min-width: 761px) { .deck.eight.seven > .card:nth-child(n + 8) { grid-column: span 3; aspect-ratio: 1 / 1.08; } }
/* round 87: centre Christian's face in the walkway selfie bubble */
.ac-it img[src*="aros-rainbow-selfie"]{object-position:37% 30%!important;transform:scale(1.25);transform-origin:37% 34%}
/* round 88: CopenHill text section goes near white with soft green/blue light (Christian) */
.march { background:
  radial-gradient(38% 46% at var(--ax, 25%) var(--ay, 40%), rgba(150, 210, 190, .3), transparent 70%),
  radial-gradient(34% 40% at var(--bx, 75%) var(--by, 65%), rgba(160, 195, 230, .3), transparent 70%),
  radial-gradient(50% 60% at 50% 110%, rgba(170, 215, 210, .16), transparent 70%), #f8fbfa; }
.march::before, .march::after { filter: hue-rotate(150deg) saturate(.5) brightness(1.1); }
.march .txt::before { background: radial-gradient(40% 50% at 30% 50%, rgba(160, 210, 200, .16), rgba(160, 210, 200, 0)); }
/* round 89: open banners keep the 40px hover band with title + arrow showing; arrow flipped (open points down, shut points up) */
.vl-ban, .vl-ban:hover, .vl-ban:focus-within { height: 40px; }
.vl-ban.is-shut { height: clamp(78px, 11vh, 120px); }
.vl-ban .vl-t { opacity: 1; }
.vl-b .vl-ic { opacity: .9; rotate: 45deg; translate: 0 -3px; }
.vl-ban.is-shut .vl-ic { rotate: 225deg; translate: 0 3px; }
@media (hover: none) { .vl-ban:not(.is-shut) { height: 40px; } }
/* round 90 (Christian): banners read like the book title, terrain from orbit: crisp colour fields from each section's
   photos with faceted ground, craters, a river line and drifting contours; less blur */
.vl-ban { background: var(--pat) center / cover no-repeat, var(--g); }
.vl-ban::before { background: radial-gradient(120% 180% at 20% 0%, rgba(255,255,255,.1), transparent 55%), linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.3)); }
.vl-ban::after { content: ""; position: absolute; inset: -60% 0; pointer-events: none; background: url(assets/img/pattern-topo.svg) 0 0 / 520px auto repeat;
  opacity: .22; filter: invert(1); mix-blend-mode: soft-light; animation: geo-drift 90s linear infinite; }
.vl-ban.vl-light::before { background: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,0)); }
.vl-ban.vl-light::after { filter: none; opacity: .3; mix-blend-mode: multiply; }
.vl-ban .vl-b { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .vl-ban::after { animation: none; } }
/* the book title is the themes banner: click it to fold the rest of its screen; shut, it stands alone */
.sw-title.vl-tban { cursor: pointer; }
.sw-title.vl-tban .vl-ic { position: absolute; right: clamp(20px, 3vw, 44px); top: 50%; z-index: 2; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid #f3f1e6; border-bottom: 2px solid #f3f1e6; rotate: 45deg; opacity: .85; transition: rotate .35s; }
.sw-title.vl-tban.is-shut .vl-ic { rotate: 225deg; margin-top: -3px; }
.themes2.sw.sw-a.vl-tonly { min-height: 0 !important; padding-bottom: clamp(10px, 1.4vw, 20px) !important; }
/* round 91 (Christian): bigger banner titles, same band height */
.vl-b { font-size: clamp(15px, 1.35vw, 20px) !important; font-weight: 600; letter-spacing: .12em; }
.vl-ban.is-shut .vl-b { font-size: clamp(16px, 1.5vw, 22px) !important; }
.vl-ban::after { opacity: .14; }
/* round 92 (Christian): glossier banners, like satellite overview prints under glass: a specular top half, a soft
   diagonal sheen, bevelled edges */
.vl-ban { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.35); }
.vl-ban::before { background:
  linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.16) 27%, rgba(255,255,255,.03) 34%, rgba(255,255,255,0) 40%),
  linear-gradient(115deg, rgba(255,255,255,0) 62%, rgba(255,255,255,.08) 65%, rgba(255,255,255,0) 70%),
  linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.05) 49%, rgba(0,0,0,.04) 51%, rgba(0,0,0,.22)); }
.vl-ban.vl-light::before { background: linear-gradient(115deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.5) 27%, rgba(255,255,255,0) 40%), linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.1) 49%, rgba(0,0,0,0) 51%, rgba(0,0,0,.06)); }
/* round 93: pointillist / micro-macro banners: drop the topo overlay so the dots read cleanly */
.vl-ban::after { display: none; }
/* round 94 (Christian): banners more realistic and darker, matching the solship title band: fine film grain, mottled
   ground, a smoked-glass tint over everything with a single sheen, and a dark bezel */
.vl-ban { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  var(--pat) center / cover no-repeat,
  radial-gradient(30% 140% at 18% 30%, rgba(0,0,0,.35), transparent 70%),
  radial-gradient(26% 120% at 62% 80%, rgba(255,255,255,.06), transparent 70%),
  radial-gradient(24% 120% at 86% 20%, rgba(0,0,0,.3), transparent 70%),
  var(--g);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.5), inset 0 0 40px rgba(0,0,0,.45); }
.vl-ban::before { background:
  linear-gradient(115deg, rgba(255,255,255,0) 18%, rgba(255,255,255,.1) 24%, rgba(255,255,255,.02) 31%, rgba(255,255,255,0) 38%),
  radial-gradient(120% 140% at 50% -20%, rgba(150,200,255,.08), rgba(0,0,0,0) 55%),
  linear-gradient(rgba(6,14,24,.12), rgba(6,14,24,.34)); }
.vl-b { color: #f3f1e6; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
/* round 95 (Christian): banners as real landscape photographs from each section, monochrome under a deep colour
   wash, like the Planet North mountain backdrop; colour varies banner to banner */
.vl-ban { background: var(--tint, #26324a) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.45); }
.vl-ban .vl-ph { position: absolute; inset: 0; z-index: 0; background: center / cover no-repeat; filter: grayscale(1) contrast(1.15) brightness(.85); }
.vl-ban .vl-tn { position: absolute; inset: 0; z-index: 0; background: var(--tint, #26324a); mix-blend-mode: color; }
.vl-ban .vl-tn::after { content: ""; position: absolute; inset: 0; background: var(--tint, #26324a); mix-blend-mode: multiply; opacity: .55; }
.vl-ban::before { z-index: 1; background: linear-gradient(90deg, rgba(8,12,20,.35), rgba(8,12,20,.05) 45%, rgba(8,12,20,.2)),
  url(assets/img/pattern-topo.svg) 0 0 / 640px auto repeat; opacity: 1; mix-blend-mode: normal; }
.vl-ban::after { display: none !important; }
.vl-ban .vl-b { z-index: 2; }
.vl-ban.vl-light .vl-ph { filter: grayscale(1) brightness(1.25) contrast(.85); }
.vl-ban.vl-light .vl-tn::after { opacity: .25; }
.vl-ban.vl-light::before { background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.08) 45%, rgba(255,255,255,.2)); }
/* round 95b: softer and darker, closer to the misty mountain backdrop */
.vl-ban .vl-ph { filter: grayscale(1) brightness(.62) contrast(.9) blur(.4px); }
.vl-ban .vl-tn::after { opacity: .72; }
.vl-ban::before { background: linear-gradient(90deg, rgba(8,12,20,.3), rgba(8,12,20,0) 45%, rgba(8,12,20,.15)), url(assets/img/pattern-topo.svg) 0 0 / 640px auto repeat; opacity: .55; }
.vl-ban.vl-light .vl-ph { filter: grayscale(1) brightness(1.15) contrast(.8); }
.vl-ban:not(.vl-light) .vl-ph { filter: grayscale(1) brightness(.52) contrast(.88) blur(.4px); }
/* round 96 (Christian): the same photo banners without the colour wash: natural colour, just darkened for the title */
.vl-ban .vl-tn { display: none; }
.vl-ban:not(.vl-light) .vl-ph { filter: brightness(.6) contrast(.95) saturate(.9) blur(.3px); }
.vl-ban.vl-light .vl-ph { filter: brightness(1.05) contrast(.85); opacity: .75; }
.vl-ban.vl-light { background: #eef4f2 !important; }
/* round 97 (Christian): the solship title banner runs flush, edge to edge, like the other banners */
#biosphere3-issue .themes2.sw.sw-a .sw-wide.sw-title { margin: 0 !important; width: 100% !important; border-radius: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.45), inset 0 0 40px rgba(0,0,0,.6) !important; }
#biosphere3-issue .sw-title .glass, #biosphere3-issue .sw-wide.sw-title::before { border-radius: 0 !important; }
#biosphere3-issue .themes2.sw.sw-a { padding-top: 0 !important; }
#biosphere3-issue .themes2.sw.sw-a.vl-tonly { padding: 0 !important; }
/* round 98 (Christian): "space dance > space race" always shown on the cosmic burst */
.card .t:has(img[src*="cosmic-neuron-burst"]) .over { opacity: 1 !important; transform: none !important; }
/* round 99 (Christian): CopenHill text screen: an even pale green wash instead of drifting patches; the colour stays
   still and only the contour patterns move */
.march { background: linear-gradient(160deg, #eaf4ef, #e6f2ee 45%, #e9f2f1) !important; animation: none !important; }
.march .txt::before { display: none !important; }
.march::before { animation: contour-a 22s ease-in-out infinite alternate !important; opacity: .24; }
.march::after { animation: contour-b 30s ease-in-out infinite alternate !important; opacity: .16; }
/* round 100 (Christian): visions and brushes banner frames her face, just right of the title */
.vl-ban .vl-ph[style*="deck-at-sea"] { background-size: 190% auto !important; background-position: 0% 25% !important; }
/* round 101 (Christian): the crystal row (poem, glitch planet, third card) is less tall */
@media (min-width: 761px) { .deck.crystal-row { height: clamp(340px, 46vh, 520px) !important; } }
.vl-ban .vl-ph[style*="sm-blue-tower"] { background-position: 50% 42% !important; }
/* round 102 (Christian): "talk to thomas kuhn, edgar mitchell, and >> rupert sheldrake" as one consistent block, left aligned */
.qe .qe-t, .qe .qe-n, .qe .qe-n b { font: 400 clamp(12px, 1vw, 15px)/1.7 var(--mono, monospace) !important; font-style: normal !important; letter-spacing: .06em !important;
  color: #e9e6dc !important; text-align: left !important; text-transform: none !important; opacity: 1 !important; }
.qe .qe-t, .qe .qe-n { margin: 0 !important; padding: 0 !important; align-self: flex-start !important; width: 100%; }
.qe .qe-t { margin-top: auto !important; }
.qe .qe-t, .qe .qe-n { padding-left: 11% !important; box-sizing: border-box; line-height: 1.75 !important; }
.qe .qe-t + .qe-n, .qe .qe-r { margin-top: 0 !important; }
/* round 102b: the talk-to lines sit closer together (tighter leading) */
.qe .qe-t, .qe .qe-n, .qe .qe-n b { line-height: 1.3 !important; }
.qe .qe-t, .qe .qe-n { margin-block: 0 !important; }
.qe .qe-t { margin-top: auto !important; }
.qe .qe-t { margin-bottom: -.35em !important; }
.qe-card .qe p.qe-t.qe-t { margin-bottom: 0 !important; }
/* round 103 (Christian): the & in "noetic art & science" in white */
.qe .qe-a .g3 { color: #fff !important; }
/* round 104: the book-title banner sits at the top of the opened edition in place of the "solship" plate */
#biosphere3-issue .themes2.sw.sw-top { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: none; min-height: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: none !important; overflow: visible; }
#biosphere3-issue.open .themes2.sw.sw-top { display: block; }
#biosphere3-issue.open #whatif .ed-plate { display: none; }
#biosphere3-issue .themes2.sw.sw-top .sw-wide.sw-title { margin: 0; width: 100%; border-radius: 0; }
#biosphere3-issue .themes2.sw.sw-top::before, #biosphere3-issue .themes2.sw.sw-top::after { display: none !important; }
/* round 105: "a new planet model <> cinematic reality" is the themes banner; the solship banner folds the "what if" card */
#biosphere3-issue .sw-band.band-rock.vl-tban { position: relative; cursor: pointer; }
#biosphere3-issue .sw-band.band-rock.vl-tban .vl-ic { position: absolute; right: clamp(20px, 3vw, 44px); top: 50%; z-index: 2; width: 12px; height: 12px; margin-top: -8px; }
#biosphere3-issue.open #whatif.vl-tonly { min-height: 0 !important; display: block !important; padding: 0 !important; }
#biosphere3-issue.open #whatif.vl-tonly .themes2.sw.sw-top { position: relative; }
#biosphere3-issue .sw-band.band-rock.vl-tban .vl-ic { border-right: 2px solid #f3f1e6; border-bottom: 2px solid #f3f1e6; rotate: 45deg; opacity: .85; transition: rotate .35s; }
#biosphere3-issue .sw-band.band-rock.vl-tban.is-shut .vl-ic { rotate: 225deg; margin-top: -3px; }
#biosphere3-issue .themes2.sw.sw-top { width: 100% !important; max-width: none !important; }
/* round 106 (Christian): every collapsed banner at the planet model band's height */
.vl-ban.is-shut { height: 78px; }
#biosphere3-issue .sw-band.band-rock.vl-tban { height: 78px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding-top: 0 !important; padding-bottom: 0 !important; }
.vl-ban .vl-ph[style*="pope-francis-crowd"] { background-size: 150% auto !important; background-position: 95% 31% !important; } /* round 107: his face on the big screen */
/* round 110 (Christian): no banner animation; a "click to reveal" hint on the top banner fades once a banner is opened */
.vl-hint { position: absolute; z-index: 2; right: calc(clamp(20px, 3vw, 44px) + 28px); top: 50%; translate: 0 -50%; font: 400 11px var(--mono); letter-spacing: .22em;
  text-transform: lowercase; color: #f3f1e6; opacity: .75; padding: 6px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(0,0,0,.25);
  pointer-events: none; transition: opacity .6s; }
.vl-hint.gone, .vl-tban:not(.is-shut) .vl-hint { opacity: 0; }
@media (max-width: 760px) { .vl-hint { top: auto; bottom: 8px; right: 50%; translate: 50% 0; font-size: 9px; padding: 3px 9px; } }
/* round 111 (Christian): the "talk to" lines centred again, evenly spaced */
.qe .qe-t, .qe .qe-n { padding-left: 0 !important; text-align: center !important; align-self: center !important; margin-block: 0 !important; line-height: 1.5 !important; }
.qe .qe-n b { line-height: 1.5 !important; }
.qe .qe-t { margin-top: auto !important; }
.qe-card .qe p.qe-t.qe-t { margin-bottom: 0 !important; }
/* round 112 (Christian): on phones the earth day poem fills its white screen; the screen itself keeps its size */
@media (max-width: 760px) {
  .poem-live.ed, .poem-live.ed.big { --w: min(68vw, 60vh); }
  .poem-img.earthday .poem-live.ed { translate: calc(var(--w) * .05) 0; } /* round 113: centred like the live site's poem */
}
#biosphere3-issue .sw-band.band-rock:not(.is-shut) .vl-hint { opacity: 0; }
.vl-hint { display: none !important; }
/* round 116 (Christian): the olive arc card is still, on an even lighter green; its scones line in lowercase */
.card .t.crystal-c.olive:has(> .ol) { background: #5f7d52 !important; }
.card .t.crystal-c.olive:has(> .ol)::after { display: none !important; }
.card .t.crystal-c.olive:has(> .ol)::before { animation: none !important; }
.olive .ol-3, .olive .ol-3 * { text-transform: lowercase !important; }
.vl-ban .vl-ph[style*="moses-atrium"] { background-size: cover !important; background-position: 47% 36% !important; } /* round 117 */
/* round 118: Aunt Kit's poem zooms on click like the other poems; no lens */
.kit .lens { display: none !important; }
.kit .poem, .kit .poem img { cursor: zoom-in !important; outline: none; }
.kit .poem.big, .kit .poem.big img { cursor: zoom-out !important; }
.kit .poem img { transition: clip-path 2.6s cubic-bezier(.3, .6, .2, 1), width .6s cubic-bezier(.2, .7, .2, 1) !important; }
.kit .poem.big img { width: min(60vw, 880px) !important; }
@media (max-width: 760px) { .kit .poem.big img { width: 100% !important; } }
.kit .poem img { transition: clip-path 2.6s cubic-bezier(.3, .6, .2, 1), width .6s cubic-bezier(.2, .7, .2, 1), translate .6s cubic-bezier(.2, .7, .2, 1) !important; } .kit .poem.big { z-index: 7; }

/* round 119 (Christian): olive arc card on a pale sage radial wash, no triangle lattice, darker ink */
#biosphere3 .card .t.crystal-c.olive:has(> .ol) { background: radial-gradient(120% 95% at 50% 42%, #eef3e4 0%, #dfe8d0 55%, #ccdab8 100%) !important; }
#biosphere3 .card .t.crystal-c.olive:has(> .ol)::before, #biosphere3 .card .t.crystal-c.olive:has(> .ol)::after { display: none !important; }
#biosphere3 .olive .ol { color: #2b3822 !important; text-shadow: none !important; }
#biosphere3 .olive .ol-2 { color: #34442a !important; border-left-color: rgba(43, 56, 34, .35) !important; }
#biosphere3 .olive .o-a { color: #2e3f24 !important; }
#biosphere3 .olive .o-b, #biosphere3 .olive .o-g { color: #5a6b4b !important; }
#biosphere3 .olive .o-atm { color: #1f2a18 !important; }
#biosphere3 .olive .o-c { color: #5b4a2c !important; }
#biosphere3 .olive .o-d { color: #3b5032 !important; }
#biosphere3 .olive .o-e { color: #3d3420 !important; }
#biosphere3 .olive .o-f, #biosphere3 .olive .o-i { color: #4a6a2e !important; }
#biosphere3 .olive .ol-3 { color: #6a5a24 !important; }
#biosphere3 .olive .o-h, #biosphere3 .olive .ol-3 i, #biosphere3 .olive .ol-4 { color: #2b3822 !important; }
#biosphere3 .olive .o-j { color: #7a5a2a !important; }
/* round 120 (Christian): the sage wash a shade darker, with a faint dotted pattern */
#biosphere3 .card .t.crystal-c.olive:has(> .ol) { background:
  radial-gradient(rgba(43, 56, 34, .11) 1px, transparent 1.6px) 0 0 / 14px 14px,
  radial-gradient(120% 95% at 50% 42%, #e1ead3 0%, #cfdcbc 55%, #bccda4 100%) !important; }

/* round 121 (Christian): HC gravesite note, "despite what didn't remain" in one even light grey */
.fly-note .grave .dr { color: #9a9a9a !important; }
.fly-note .grave .dr * { color: inherit !important; }

/* round 122 (Christian): the HC letter's signature reads almost as ACE: a faint A set a little apart, and an E whose bottom bar fades */
.hc-letter .ace { white-space: nowrap; }
.hc-letter .ace-a { opacity: .42; margin-right: .26em; }
.hc-letter .ace-e { display: inline-block; line-height: 1; color: transparent !important; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(to bottom, #1d2330 0 80%, rgba(29, 35, 48, .3) 80% 100%); }

/* round 123 (Christian): E as strong as C, only its bottom bar as faint as the A, so it almost reads F */
.hc-letter .ace-e { background-image: linear-gradient(to bottom, #1d2330 0 76.5%, rgba(29, 35, 48, .42) 76.5% 100%) !important; }

/* round 124 (Christian): the USC arches selfie leads the compass circle, then the road photo, then six more photos */
.ac-it.cyc > img { object-fit: cover; }
.ac-it img[src*="usc-arches-selfie"] { object-position: 18% 40%; }
.ac-it img[src*="beached-sailboat-sunset"] { object-position: 30% 60%; }
.ac-it img[src*="hat-jungle-selfie"] { object-position: 50% 30%; }
.ac-it img[src*="boardwalk-runners"] { object-position: 50% 40%; }
.ac-it img[src*="headset-demo"] { object-position: 60% 40%; }

/* round 125 (Christian): the sunset couple card fades through two more photos (heart-eyes smiley on her face in each) */
figure.fcyc { position: relative; }
figure.fcyc > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; }
figure.fcyc > img:first-child { position: relative; }
figure.fcyc > img.on { opacity: 1; }
figure.fcyc > img[data-n="pines-stone-house"] { object-position: 50% 52%; }
figure.fcyc > img[data-n="hills-cheek-kiss"] { object-position: 50% 40%; }

/* round 126 (Christian): in the talk-to card, thomas kuhn and edgar mitchell fainter; talk to and >> rupert sheldrake unchanged */
#biosphere3 .qe .qe-n:not(.qe-r) { color: rgba(233, 230, 220, .5) !important; }

/* round 128 (Christian): the E no longer looks bold. It takes the C's own colour and weight, and a mask fades only its bottom bar to the A's faintness */
.hc-letter .ace-e { display: inline !important; line-height: inherit !important; color: inherit !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  display: inline-block !important; line-height: 1 !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 76.5%, rgba(0, 0, 0, .42) 76.5% 100%); mask-image: linear-gradient(to bottom, #000 0 76.5%, rgba(0, 0, 0, .42) 76.5% 100%); }

/* round 130 (Christian): the A slightly closer to CE */
.hc-letter .ace-a { margin-right: .14em !important; }

/* round 131 (Christian): compass circles can be dragged around */
.acc.round .acc-row.cards .ac-it { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.acc.round .acc-row.cards .ac-it img, .acc.round .acc-row.cards .ac-it video { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.acc.round .acc-row.cards .ac-it.drag { cursor: grabbing; transition: none !important; box-shadow: 0 30px 70px rgba(0, 0, 0, .32), 0 0 0 3px #fff !important; }
.acc.round.dragging, .acc.round.dragging * { cursor: grabbing !important; }

/* round 133 (Christian): the running screenshots (all pan cards) with more contrast and colour; on touch screens it no longer blocks scrolling */
.t.pan > img { filter: contrast(1.14) saturate(1.3); }
@media (pointer: coarse) { .card .t.pan { touch-action: auto !important; cursor: default; } .card .t.pan > img { transition: none !important; } }
/* round 132 (Christian): the USC arches selfie shows all three of them; the whole photo fits the circle */
.ac-it img[src*="usc-arches-selfie"] { object-fit: contain !important; object-position: 50% 50% !important; background: #14110f; }

/* round 134 (Christian): "americanos" and the "somber lightning tones" line in a clean modern sans */
#biosphere3 .olive .o-j, #biosphere3 .olive .ol-4, #biosphere3 .olive .ol-4 i { font-family: "Space Grotesk", "Questrial", system-ui, sans-serif !important; font-style: normal !important; font-weight: 400 !important; letter-spacing: .02em !important; }
#biosphere3 .olive .o-j { font-size: 1em !important; }

/* round 135 (Christian): in the compass, the pines and stone house circle and the wave mural selfie circle sit lower */
.acc.round .ac-it:has(> img[src*="pines-stone-house"]), .acc.round .ac-it:has(> img[src*="wave-mural-selfie"]) { margin-top: clamp(28px, 4vw, 64px); }

/* round 139 (Christian): the card spread gets its own lighter ground, so the page changes tone right after the
   "ivy leaves" images above it */
#biosphere3 .acc.lw-more { position: relative; isolation: isolate; background: none !important; padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
#biosphere3 .acc.lw-more::before { content: ""; position: absolute; inset: 0 auto 0 calc(50% - 50vw); width: 100vw; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 70% at 20% 0%, rgba(214, 232, 236, .9), transparent 60%),
    radial-gradient(110% 70% at 85% 100%, rgba(240, 226, 214, .9), transparent 62%),
    linear-gradient(180deg, #f5f3ee 0%, #eef0ec 100%);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .06); }

/* round 141 (Christian): the night city overlook card sits smaller in the card spread */
#biosphere3 .acc.lw-more .ac-it:has(> img[src*="night-city-overlook"]) { scale: .76; transform-origin: 50% 50%; }
#biosphere3 .acc.lw-more .ac-it:has(> img[src*="hurricane-from-iss"]) { scale: .76; transform-origin: 50% 50%; }
/* round 142 (Christian): the spiral notebook video shifts over slightly */
#biosphere3 .acc.lw-more .ac-it:has(> video[src*="spiral-notebook"]) { translate: clamp(28px, 4vw, 68px) 0; }
#biosphere3 .acc.lw-more .ac-it:has(> img[src*="aloha-sand"]) { scale: .76; transform-origin: 50% 50%; translate: clamp(-130px, -7.5vw, -48px) 0; }
/* round 144 (Christian): the smiley cookie sits higher in its circle */
#biosphere3 .acc.round .ac-it img[src*="streamys-smiley-cookie"] { object-position: 50% 82% !important; }

/* r140: mobile proportions for visions and brushes + pope francis, matching the old tempo.earth phone layout */
@media (max-width: 760px) {
  #biosphere3 .kit { display: grid !important; grid-template-columns: 34% 1fr !important; gap: 0 6% !important; align-items: start !important; padding: 48px 5% 48px 0 !important; }
  #biosphere3 .kit > figure { margin: 0 !important; width: 100% !important; max-width: none !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
  #biosphere3 .kit > figure img { width: 100% !important; height: auto !important; }
  #biosphere3 .kit .poem { margin: 7vw 0 0 !important; width: 100% !important; }
  #biosphere3 .kit .poem img { width: 100% !important; max-width: none !important; }
  #biosphere3 .pope.pope-v { display: grid !important; grid-template-columns: 1fr !important; }
  #biosphere3 .pope-v .pope-left { display: contents !important; }
  #biosphere3 .pope-v .pope-hero, #biosphere3 .pope-v .poem, #biosphere3 .pope-v .deck.pope-stack, #biosphere3 .pope-v .deck.pope-row { grid-row: auto !important; grid-column: 1 !important; }
  #biosphere3 .pope-v .pope-hero { order: 1; }
  #biosphere3 .poem-live.pf { --w: 46vw; }
  #biosphere3 .pope-v .poem { order: 2; width: auto !important; margin: 44px auto 40px !important; padding: 0 !important; }
  #biosphere3 .pope-v .deck.pope-stack { order: 3; margin-top: 0 !important; }
  #biosphere3 .pope-v .deck.pope-row { order: 4; }
  #biosphere3 .pope-stack .card:first-child { grid-column: 1 / -1 !important; aspect-ratio: 3 / 4 !important; }
  #biosphere3 .pope-stack .card:last-child { grid-column: 1 / -1 !important; aspect-ratio: 4 / 3 !important; }
}

/* round 145 (Christian): the card spread's patterned ground turns inside out from the section above: white, with the
   same phase pattern drawn in faint grey lines */
#biosphere3 .acc.lw-more .acc-row.cards { background: transparent !important; background-image: none !important; }
#biosphere3 .acc.lw-more::before { background: #fff !important; box-shadow: none !important; }
#biosphere3 .acc.lw-more::after { content: ""; position: absolute; inset: 0 auto 0 calc(50% - 50vw); width: 100vw; z-index: -1; pointer-events: none;
  background: url(assets/img/pattern-phase.svg) center / cover no-repeat; filter: invert(1) grayscale(1) contrast(1.3); opacity: .14; }

/* round 146 (Christian): the "more" card spread is laid out edge to edge by the page itself, so the per-card size and
   shift tweaks from rounds 141-143 give way to it (moves made later in edit mode still apply on top) */
#biosphere3 .acc.lw-more .ac-it { scale: none !important; translate: none !important; }

/* round 147 (Christian): the card spread reads as a clean justified grid like the section above: even gaps between
   cards and rows, square edges, nothing overlapping */
#biosphere3 .acc.lw-more { gap: 0 !important; }
#biosphere3 .acc.lw-more .acc-row.cards { margin: 0 !important; padding: 0 !important; overflow: visible; }
#biosphere3 .acc.lw-more .acc-row.cards + .acc-row.cards { margin-top: var(--jgap, 12px) !important; }
#biosphere3 .acc.lw-more .acc-row.cards .ac-it { transform: none; border-radius: var(--radius, 14px); }
#biosphere3 .acc.lw-more .acc-row.cards .ac-it:hover { transform: translateY(-4px); }

/* round 148 (Christian): the card spread gets its own title, set like the compass heading */
#biosphere3 .acc.lw-more .lw-head { position: relative; z-index: 1; margin: 0 auto clamp(20px, 3vw, 44px); max-width: 760px; text-align: center;
  font: italic 400 clamp(17px, 1.7vw, 26px)/1.45 "Libre Baskerville", serif; color: #1d2430; text-wrap: balance; }

/* round 148 (Christian): on phones the Aeolian photo grid in the pope section closes up with no white between photos.
   The portrait video stands beside the three landscape photos stacked on its right; in the lower row the two landscape
   photos stack beside the portrait harbour photo. Column widths follow the photos' own proportions so nothing is cut */
@media (max-width: 760px) {
  #biosphere3 .pope-v .deck.pope-stack { grid-template-columns: 56.25fr 44.44fr !important; grid-auto-rows: auto !important; gap: 0 !important; }
  #biosphere3 .pope-v .pope-stack .card:nth-child(2) { grid-column: 1 !important; grid-row: span 3 !important; aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; }
  #biosphere3 .pope-v .pope-stack .card:nth-child(n+3):not(:last-child) { grid-column: 2 !important; aspect-ratio: 4 / 3 !important; }
  #biosphere3 .pope-v .pope-stack .card:nth-child(2) .t, #biosphere3 .pope-v .pope-stack .card:nth-child(2) video { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  #biosphere3 .pope-v .deck.pope-row { display: grid !important; grid-template-columns: 66.67fr 75fr !important; gap: 0 !important; margin-top: 0 !important; }
  #biosphere3 .pope-v .pope-row .card { grid-column: 1 !important; aspect-ratio: 4 / 3 !important; height: auto !important; }
  #biosphere3 .pope-v .pope-row .card:nth-child(3) { grid-column: 2 !important; grid-row: 1 / span 2 !important; aspect-ratio: auto !important; }
  #biosphere3 .pope-v .pope-row .card:nth-child(3) .t, #biosphere3 .pope-v .pope-row .card:nth-child(3) img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
}
/* round 149 (Christian): on the phone the 50K run collage sits in a card a little taller than square */
@media (max-width: 760px) {
  #biosphere3 .deck.tall > .card:has(img[src*="morning-run-collage"]) { aspect-ratio: 4 / 5 !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
}
/* round 152 (Christian): on the phone the Biosphere 2 SAM card stands taller, closer to square */
@media (max-width: 760px) {
  #biosphere3 .card:has(> .t.sam) { aspect-ratio: 4 / 3 !important; height: auto !important; min-height: 0 !important; }
  #biosphere3 .card > .t.sam > img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
}
/* round 153 (Christian): on the phone the green lattice tower card is a little shorter */
@media (max-width: 760px) {
  #biosphere3-issue .deck > .card.nat:has(img[src*="green-lattice-tower"]), #biosphere3 .card:has(img[src*="green-lattice-tower"]) { aspect-ratio: 2 / 3 !important; height: auto !important; min-height: 0 !important; }
  #biosphere3 .card img[src*="green-lattice-tower"] { width: 100% !important; height: 100% !important; object-fit: cover !important; }
}
/* round 154 (Christian): the Pope Francis symbol line is unicode glyphs, never colour emoji */
#biosphere3 .poem-live.pf .pl.sym { font-variant-emoji: text; }
/* round 156 (Christian): the home reel plays inside its own bubble */
.home-reel .hr-live { background: #000; }
.home-reel .hr-live > .film { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; border-radius: 0 !important; }
.home-reel .hr-live > .film video { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; display: block; }
.home-reel .hr-live > .film .play { display: none; }
/* round 158 (Christian): "world books" sits above the rock starchitecture band and reads larger */
.cover-in.mag-sub .mg-a { order: -1; font-size: clamp(23px, 2.5vw, 37px) !important; }
.cover-in.mag-sub .cin-s { order: 0; }
@media (max-width: 760px) { .cover-in.mag-sub .mg-a { font-size: 21px !important; } }
/* round 159 (Christian): the second edition card becomes a "more worlds incoming" signifier: world pictures from
   both books fade through in sequence under an orbit of dots and the kinds of worlds still in the works */
#pn-banner.more-worlds { cursor: default; }
#pn-banner.more-worlds > .pn-bg, #pn-banner.more-worlds > .gl-art, #pn-banner.more-worlds > .ed-plate, #pn-banner.more-worlds > .in, #pn-banner.more-worlds > .foot-in { display: none !important; }
#pn-banner.more-worlds .mw { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: inherit; background: #10161c; }
#pn-banner .mw-seq img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  filter: grayscale(.85) brightness(.42) contrast(1.05); animation: mw-seq 48s linear infinite; animation-delay: calc(var(--k) * 6s); }
@keyframes mw-seq { 0% { opacity: 0; transform: scale(1.06); } 3% { opacity: 1; } 12.5% { opacity: 1; } 15.5% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
#pn-banner .mw-orbit { position: absolute; left: 50%; top: 46%; width: min(78%, 420px); aspect-ratio: 1; translate: -50% -50%; animation: mw-spin 90s linear infinite; }
#pn-banner .mw-orbit > b { position: absolute; inset: 0; border: 1px dashed rgba(122, 196, 186, .45); border-radius: 50%; }
#pn-banner .mw-orbit > i { position: absolute; inset: 0; transform: rotate(var(--a)); }
#pn-banner .mw-orbit > i::after { content: ""; position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #4fb3a5; box-shadow: 0 0 12px rgba(79, 179, 165, .7); }
@keyframes mw-spin { to { rotate: 360deg; } }
#pn-banner .mw-pills { position: absolute; left: 50%; top: 46%; translate: -50% -50%; width: min(86%, 470px); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 10px; }
#pn-banner .mw-pills span { font: 500 clamp(11px, 1vw, 14px) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #eef3f2; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px; background: rgba(14, 20, 24, .72); border: 1px solid rgba(122, 196, 186, .35);
  animation: mw-pill 6s ease-in-out infinite; animation-delay: calc(var(--k) * -.75s); }
#pn-banner .mw-pills span:nth-child(3n+2) { border-color: rgba(122, 196, 186, .75); }
@keyframes mw-pill { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
#pn-banner .mw-cap { position: absolute; left: clamp(18px, 3vw, 34px); bottom: clamp(18px, 3vw, 34px); margin: 0; font: 500 clamp(12px, 1.1vw, 15px) var(--mono);
  letter-spacing: .2em; text-transform: uppercase; color: #eef3f2; padding: 10px 18px; border-radius: 999px; background: rgba(14, 20, 24, .78); }
.ed-float button[data-ed="02"] { display: none !important; }
@media (prefers-reduced-motion: reduce) { #pn-banner .mw-seq img, #pn-banner .mw-orbit, #pn-banner .mw-pills span { animation: none; } #pn-banner .mw-seq img:first-child { opacity: 1; } }
/* round 160 (Christian): the band between the editions and the reel is its own animated circuit, a transition space
   with light running along its traces in a rust-to-teal-to-blue gradient, instead of the GIF */
.circuit.cx { position: relative; overflow: hidden; background: linear-gradient(90deg, #3a1a10 0%, #0f2a2c 50%, #13204a 100%); }
.circuit.cx .cx-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.circuit.cx .cx-tr path { fill: none; stroke-width: 1.4; opacity: .6; }
.circuit.cx .cx-nd circle { opacity: .85; }
.circuit.cx .cx-pu path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 26 var(--l); stroke-dashoffset: calc(var(--l) + 26);
  filter: drop-shadow(0 0 4px rgba(120, 220, 210, .8)); animation: cx-run var(--t) linear infinite; animation-delay: var(--dl); }
@keyframes cx-run { to { stroke-dashoffset: 0; } }
.circuit.cx::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 14, 18, .75), transparent 25%, transparent 75%, rgba(11, 14, 18, .75)); }
.circuit.cx .chev { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .circuit.cx .cx-pu path { animation: none; opacity: 0; } }
/* round 162: more worlds — three worlds, poetic pills; smaller cover lines */
#pn-banner .mw-seq img { filter: brightness(.5) saturate(.8); animation: mw-seq3 18s linear infinite; animation-delay: calc(var(--k) * 6s - 18s); }
@keyframes mw-seq3 { 0% { opacity: 0; transform: scale(1.06); } 6% { opacity: 1; } 30% { opacity: 1; } 36% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
#pn-banner .mw-pills span { text-transform: none; letter-spacing: .06em; font-style: italic; }
#pn-banner .mw-w { position: absolute; right: clamp(18px, 3vw, 34px); bottom: clamp(18px, 3vw, 34px); margin: 0; height: 1.4em; min-width: 9em; text-align: right;
  font: 600 clamp(12px, 1.1vw, 15px)/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #9fded4; }
#pn-banner .mw-w span { position: absolute; right: 0; top: 0; white-space: nowrap; opacity: 0; animation: mw-seq3 18s linear infinite; animation-delay: calc(var(--k) * 6s - 18s); }
@media (max-width: 760px) { #pn-banner .mw-w { left: clamp(18px, 3vw, 34px); right: auto; bottom: calc(clamp(18px, 3vw, 34px) + 44px); text-align: left; } #pn-banner .mw-w span { left: 0; right: auto; } }
@media (prefers-reduced-motion: reduce) { #pn-banner .mw-w span { animation: none; } #pn-banner .mw-w span:first-child { opacity: 1; } }
.cover-in.mag-sub .mg-a { font-size: clamp(20px, 2.15vw, 32px) !important; }
.cover-in.mag-sub .cin-s { font-size: clamp(15px, 1.6vw, 23px) !important; }
@media (max-width: 760px) { .cover-in.mag-sub .mg-a { font-size: 18px !important; } .cover-in.mag-sub .cin-s { font-size: 14px !important; } }
#pn-banner .mw-w, #pn-banner .mw-w span { top: clamp(18px, 3vw, 34px); left: clamp(18px, 3vw, 34px); right: auto !important; bottom: auto !important; text-align: left; }
#pn-banner .mw-w span { top: 0; left: 0; }
/* round 163: open-ended — orbit only, subtle cycle, line below */
#pn-banner .mw-seq img { filter: brightness(.38) saturate(.55); animation-duration: 30s; animation-delay: calc(var(--k) * 10s - 30s); }
#pn-banner .mw-orbit { top: 45%; }
#pn-banner .mw-cap { left: 50% !important; right: auto !important; translate: -50% 0; white-space: nowrap; }
/* round 164: worlds incoming — systems-diagram orbit (ecopedia spirit) */
#pn-banner .mw-grid { position: absolute; inset: 0; background:
  radial-gradient(circle, rgba(140, 170, 210, .16) 1px, transparent 1.4px) 0 0 / 22px 22px,
  linear-gradient(rgba(91, 143, 216, .07) 1px, transparent 1px) 0 0 / 88px 88px,
  linear-gradient(90deg, rgba(91, 143, 216, .07) 1px, transparent 1px) 0 0 / 88px 88px,
  linear-gradient(180deg, rgba(13, 22, 38, .86), rgba(10, 17, 30, .9)); }
#pn-banner .mw-seq img { filter: grayscale(.6) brightness(.5); }
#pn-banner .mw-orbit.mw-o2 { animation: none; width: min(88%, 470px); top: 47%; }
#pn-banner .mw-dia { display: block; width: 100%; height: auto; overflow: visible; }
#pn-banner .mw-dia .rg { fill: none; stroke: rgba(160, 190, 225, .3); stroke-width: .8; }
#pn-banner .mw-dia .r2 { stroke-dasharray: 3 4; }
#pn-banner .mw-dia .r3 { stroke-dasharray: 1 5; stroke: rgba(160, 190, 225, .38); }
#pn-banner .mw-dia .tk { stroke: rgba(160, 190, 225, .35); stroke-width: .7; }
#pn-banner .mw-dia .ax { stroke: rgba(160, 190, 225, .1); stroke-width: .6; stroke-dasharray: 2 6; }
#pn-banner .mw-dia .sw { transform-origin: 200px 200px; animation: mw-spin 14s linear infinite; }
#pn-banner .mw-dia .swp { fill: none; stroke: #9fded4; stroke-width: 1.6; stroke-linecap: round; opacity: .7; }
#pn-banner .mw-dia .ln { fill: none; stroke-width: 1.1; stroke-dasharray: 3 4; animation: mw-flow 2.4s linear infinite; }
#pn-banner .mw-dia .ln.l0 { stroke-dasharray: none; opacity: .8; }
#pn-banner .mw-dia .ln.l1 { opacity: .75; }
#pn-banner .mw-dia .ln.l2 { opacity: .32; stroke-dasharray: 1.5 5; }
#pn-banner .mw-dia .pk.l2 { opacity: .45; }
@keyframes mw-flow { to { stroke-dashoffset: -14; } }
#pn-banner .mw-dia .core { fill: rgba(79, 179, 165, .12); stroke: #9fded4; stroke-width: 1; }
#pn-banner .mw-dia .core-i { fill: #eef3f2; }
#pn-banner .mw-dia .halo { opacity: .22; }
#pn-banner .mw-dia .nd-o { fill: #0f1828; stroke-width: 1.4; }
#pn-banner .mw-dia .pl { fill: none; stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: mw-pulse 3.9s ease-out infinite; animation-delay: var(--d); }
@keyframes mw-pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.2); opacity: 0; } }
#pn-banner .mw-dia .nd-x { fill: rgba(238, 243, 242, .55); animation: mw-blink 5.5s ease-in-out infinite; animation-delay: var(--d); }
#pn-banner .mw-dia .nd-g { fill: none; stroke: rgba(238, 243, 242, .35); stroke-width: .8; stroke-dasharray: 2 3; animation: mw-blink 5.5s ease-in-out infinite; animation-delay: var(--d); }
@keyframes mw-blink { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
#pn-banner .mw-dia .tg { font: 500 8px var(--mono); letter-spacing: .12em; fill: rgba(220, 230, 240, .7); }
#pn-banner .mw-dia .tq { fill: rgba(159, 222, 212, .85); }
#pn-banner .mw-leg { position: absolute; top: clamp(18px, 3vw, 30px); left: clamp(18px, 3vw, 30px); margin: 0; display: flex; gap: 14px; flex-wrap: wrap;
  font: 500 clamp(9px, .8vw, 11px) var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(220, 230, 240, .7); }
#pn-banner .mw-leg span { display: inline-flex; align-items: center; gap: 6px; }
#pn-banner .mw-leg i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
#pn-banner .mw-leg i.a { background: #e0a94a; } #pn-banner .mw-leg i.b { border: 1.4px solid #5b8fd8; } #pn-banner .mw-leg i.c { border: 1px dashed rgba(238, 243, 242, .6); width: 7px; height: 7px; }
@media (prefers-reduced-motion: reduce) { #pn-banner .mw-dia * { animation: none !important; } }
#pn-banner .mw-orbit.mw-o2 { width: min(92%, 520px); }
#pn-banner .mw-dia .ln.l2 { opacity: .45; }
/* round 165: circuit band flows on as the background below — black above fades into it */
.circuit.cx::after { background: linear-gradient(180deg, #0b0e12 0%, rgba(11, 14, 18, .55) 45%, transparent 100%) !important; }
.home-reel { position: relative; isolation: isolate; background: linear-gradient(90deg, #3a1a10 0%, #0f2a2c 50%, #13204a 100%); }
.home-reel > .hr-bgx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.home-reel > .hr-bgx .cx-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-reel > .hr-bgx .cx-tr path { fill: none; stroke-width: 1.4; opacity: .45; }
.home-reel > .hr-bgx .cx-nd circle { opacity: .7; }
.home-reel > .hr-bgx .cx-pu path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 26 var(--l); stroke-dashoffset: calc(var(--l) + 26); }
.home-reel > .hr-bgx .cx-pu path { animation: cx-run var(--t) linear infinite; animation-delay: var(--dl); filter: drop-shadow(0 0 4px rgba(120, 220, 210, .7)); }
@media (prefers-reduced-motion: reduce) { .home-reel > .hr-bgx .cx-pu path { animation: none; opacity: 0; } }
/* round 166: no legend; solship card wider, worlds-incoming card narrower */
#pn-banner .mw-leg { display: none !important; }
@media (min-width: 761px) { .editions { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
@media (max-width: 760px) { .editions .pn-issue > .edition.gl.more-worlds { min-height: 52vh; } .editions .bleed.whatif.edition { min-height: 76vh; } }
/* round 167: the circuit pattern shows on the black and melts into the colour below */
.circuit.cx { height: clamp(150px, 26vh, 280px) !important; background: linear-gradient(180deg, #0b0e12 0%, rgba(11, 14, 18, .85) 30%, rgba(11, 14, 18, .35) 70%, rgba(11, 14, 18, 0) 100%), linear-gradient(90deg, #3a1a10 0%, #0f2a2c 50%, #13204a 100%) !important; }
.circuit.cx::after { display: none !important; }
.circuit.cx .cx-tr path { opacity: .75; }
.home-reel { background: linear-gradient(90deg, #3a1a10 0%, #0f2a2c 50%, #13204a 100%); }
/* round 168: the black contour map carries on into the band and turns into the circuit; black holds longer */
.circuit.cx { height: clamp(220px, 38vh, 400px) !important; background: linear-gradient(180deg, #0b0e12 0%, #0b0e12 50%, rgba(11, 14, 18, .6) 78%, rgba(11, 14, 18, 0) 100%), linear-gradient(90deg, #3a1a10 0%, #0f2a2c 50%, #13204a 100%) !important; }
.circuit.cx::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url(assets/img/pattern-phase.svg) center / cover fixed;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 25%, transparent 70%); mask-image: linear-gradient(180deg, #000 0%, #000 25%, transparent 70%); }
.circuit.cx .cx-art { z-index: 1; -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 18%, rgba(0, 0, 0, .35) 45%, #000 80%); mask-image: linear-gradient(180deg, transparent 0%, transparent 18%, rgba(0, 0, 0, .35) 45%, #000 80%); }
.home-reel > .hr-bgx { -webkit-mask-image: none; }
/* round 169: no circuits — the contour map carries on, fainter, turning progressively blue with subtle hues */
.circuit.cx .cx-art, .home-reel > .hr-bgx .cx-art { display: none !important; }
.circuit.cx { height: clamp(90px, 14vh, 170px) !important; background:
  linear-gradient(180deg, #0b0e12 0%, rgba(11, 14, 18, .55) 55%, rgba(11, 14, 18, 0) 100%),
  radial-gradient(60% 140% at 18% 110%, rgba(64, 150, 150, .35), transparent 70%),
  radial-gradient(50% 140% at 82% 110%, rgba(110, 90, 190, .28), transparent 70%),
  linear-gradient(180deg, #0d1420, #10224a) !important; }
.circuit.cx::before { background: url(assets/img/pattern-phase.svg) center / cover fixed; opacity: .55; -webkit-mask-image: none; mask-image: none; }
.home-reel { background:
  radial-gradient(45% 35% at 12% 20%, rgba(64, 150, 150, .22), transparent 70%),
  radial-gradient(40% 30% at 88% 30%, rgba(110, 90, 190, .2), transparent 70%),
  radial-gradient(50% 30% at 50% 95%, rgba(208, 120, 80, .1), transparent 70%),
  linear-gradient(180deg, #10224a 0%, #142c62 55%, #183673 100%) !important; }
.home-reel > .hr-bgx { background: url(assets/img/pattern-phase.svg) center / cover fixed; opacity: .4; }
.circuit.cx { background: linear-gradient(180deg, #0b0e12 0%, #0d1524 45%, #10224a 100%) !important; }
.home-reel { background:
  radial-gradient(45% 35% at 12% 30%, rgba(64, 150, 150, .2), transparent 70%),
  radial-gradient(40% 30% at 88% 40%, rgba(110, 90, 190, .18), transparent 70%),
  radial-gradient(50% 30% at 50% 95%, rgba(208, 120, 80, .1), transparent 70%),
  linear-gradient(180deg, #10224a 0%, #142c62 55%, #183673 100%) !important; }
/* round 170: solship banner spans (almost) the whole viewport, rounded; worlds incoming sits beneath it */
@media (min-width: 761px) {
  .editions { grid-template-columns: minmax(0, 1fr) !important; }
  .editions .bleed.whatif.edition { grid-column: 1 !important; min-height: 78vh; border-radius: 28px !important; overflow: hidden; }
  .editions .pn-issue > .edition.gl.more-worlds { grid-column: 1 !important; min-height: 52vh; border-radius: 28px !important; }
}
@media (min-width: 761px) { #pn-banner .mw-orbit.mw-o2 { width: min(92%, 42vh) !important; top: 45%; } }

/* round 165 (Christian): "worlds incoming" is no longer a card. The orbit animation floats on its own over the page
   ground behind it (no photos, no panel), and it isn't clickable yet: it works as a transition into the bubbles below */
.editions #pn-banner.more-worlds { background: transparent !important; box-shadow: none !important; border: 0 !important; pointer-events: none !important; cursor: default !important; overflow: visible !important; }
.editions #pn-banner.more-worlds::before, .editions #pn-banner.more-worlds::after { display: none !important; }
#pn-banner.more-worlds .mw { background: transparent !important; overflow: visible !important; }
#pn-banner.more-worlds .mw-seq, #pn-banner.more-worlds .mw-grid { display: none !important; }
#pn-banner.more-worlds .mw-cap { color: rgba(29, 36, 48, .7); text-shadow: none; }
/* the diagram was drawn for a dark panel; on the light page ground its pale lines and labels take darker inks */
#pn-banner.more-worlds .mw-dia .rg { stroke: rgba(40, 70, 120, .38); }
#pn-banner.more-worlds .mw-dia .r3 { stroke: rgba(40, 70, 120, .45); }
#pn-banner.more-worlds .mw-dia .tk { stroke: rgba(40, 70, 120, .42); }
#pn-banner.more-worlds .mw-dia .ax { stroke: rgba(40, 70, 120, .16); }
#pn-banner.more-worlds .mw-dia .swp { stroke: #2f8f83; opacity: .8; }
#pn-banner.more-worlds .mw-dia .core { fill: rgba(47, 143, 131, .12); stroke: #2f8f83; }
#pn-banner.more-worlds .mw-dia .core-i { fill: #1d2430; }
#pn-banner.more-worlds .mw-dia .nd-o { fill: #f4f6f8; }
#pn-banner.more-worlds .mw-dia .nd-x { fill: rgba(29, 36, 48, .55); }
#pn-banner.more-worlds .mw-dia .nd-g { stroke: rgba(29, 36, 48, .4); }
#pn-banner.more-worlds .mw-dia .tg { fill: rgba(29, 36, 48, .72); }
#pn-banner.more-worlds .mw-dia .tq { fill: #2f8f83; }
/* round 166 (Christian): more orbits around the worlds diagram, and "worlds incoming" set larger and clearer */
#pn-banner.more-worlds .mw-dia .rx { fill: none; stroke: rgba(40, 70, 120, .3); stroke-width: .7; }
#pn-banner.more-worlds .mw-dia .r0 { stroke-dasharray: 1 3; }
#pn-banner.more-worlds .mw-dia .r15 { stroke-dasharray: 2 5; stroke: rgba(40, 70, 120, .22); }
#pn-banner.more-worlds .mw-dia .r25 { stroke-dasharray: 1 6; }
#pn-banner.more-worlds .mw-dia .r4 { stroke-dasharray: 4 6; stroke: rgba(40, 70, 120, .24); }
#pn-banner.more-worlds .mw-dia .r5 { stroke-dasharray: 1 8; stroke: rgba(40, 70, 120, .3); }
#pn-banner.more-worlds .mw-dia .el { stroke: rgba(40, 70, 120, .26); stroke-dasharray: 3 5; }
#pn-banner.more-worlds .mw-dia .eo { transform-origin: 200px 200px; }
#pn-banner.more-worlds .mw-dia .eo1 { transform: rotate(-22deg); }
#pn-banner.more-worlds .mw-dia .eo2 { transform: rotate(31deg); }
#pn-banner.more-worlds .mw-dia .eo3 { transform: rotate(68deg); }
#pn-banner.more-worlds .mw-dia .eo-p { opacity: .85; }
#pn-banner.more-worlds .mw-cap { font: 600 clamp(18px, 2.2vw, 30px) var(--mono) !important; letter-spacing: .22em !important; text-transform: none !important;
  color: #1d2430 !important; opacity: 1 !important; bottom: clamp(10px, 2vw, 24px) !important; }
/* round 171: mute + volume on every video */
.vctl { position: absolute; left: 12px; bottom: 12px; z-index: 30; display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 5px; border-radius: 999px;
  background: rgba(10, 14, 20, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; opacity: .75; transition: opacity .2s; }
.vctl:hover, .vctl:focus-within { opacity: 1; }
.vctl button { all: unset; cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.vctl button svg { width: 18px; height: 18px; }
.vctl input { width: 0; opacity: 0; accent-color: #9fded4; transition: width .2s, opacity .2s; cursor: pointer; margin: 0; }
.vctl:hover input, .vctl:focus-within input { width: 80px; opacity: 1; }
@media (pointer: coarse) { .vctl input { display: none; } .vctl { padding: 4px; } }
/* round 172 (Christian): diagram and "worlds incoming" centred as one group, and the label clearly legible on the dark ground */
.editions #pn-banner.more-worlds .mw { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 2vh, 26px); }
#pn-banner.more-worlds .mw-orbit.mw-o2 { position: relative !important; left: auto !important; top: auto !important; translate: none !important; width: min(80%, 44vh) !important; flex: none; }
#pn-banner.more-worlds .mw-cap { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; translate: none !important;
  color: #f4f7fa !important; background: rgba(12, 18, 28, .72) !important; padding: .55em 1.3em !important; border-radius: 999px; border: 1px solid rgba(159, 222, 212, .35);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5) !important; font-size: clamp(16px, 1.8vw, 26px) !important; white-space: nowrap; }
/* the page ground here is dark, so the diagram goes back to its pale inks */
#pn-banner.more-worlds .mw-dia .rg, #pn-banner.more-worlds .mw-dia .rx { stroke: rgba(170, 200, 235, .32); }
#pn-banner.more-worlds .mw-dia .r3 { stroke: rgba(170, 200, 235, .4); }
#pn-banner.more-worlds .mw-dia .el { stroke: rgba(170, 200, 235, .24); }
#pn-banner.more-worlds .mw-dia .tk { stroke: rgba(170, 200, 235, .38); }
#pn-banner.more-worlds .mw-dia .ax { stroke: rgba(170, 200, 235, .1); }
#pn-banner.more-worlds .mw-dia .swp { stroke: #9fded4; }
#pn-banner.more-worlds .mw-dia .core { fill: rgba(79, 179, 165, .14); stroke: #9fded4; }
#pn-banner.more-worlds .mw-dia .core-i { fill: #eef3f2; }
#pn-banner.more-worlds .mw-dia .nd-o { fill: #0f1828; }
#pn-banner.more-worlds .mw-dia .nd-x { fill: rgba(238, 243, 242, .6); }
#pn-banner.more-worlds .mw-dia .nd-g { stroke: rgba(238, 243, 242, .4); }
#pn-banner.more-worlds .mw-dia .tg { fill: rgba(220, 230, 240, .75); }
#pn-banner.more-worlds .mw-dia .tq { fill: #9fded4; }
/* round 173 (Christian): the masthead uses his own tempo logo file */
.logo.logo-img { display: block; line-height: 0; text-shadow: none; }
.logo.logo-img img { display: block; width: clamp(180px, 23vw, 310px); height: auto; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .25)); }
.logo.logo-img::before, .logo.logo-img::after { display: none !important; }
/* video controls sit top-left so the fixed open/collapse pill never covers them */
.vctl { top: 12px; bottom: auto; }
/* round 174 (Christian): centre the diagram + label across the whole dark-to-blue zone, not just the card */
.editions #pn-banner.more-worlds .mw { transform: translateY(calc(clamp(90px, 14vh, 170px) / 2 + 24px)); z-index: 5; }
#pn-banner.more-worlds .mw-orbit.mw-o2 { width: min(80%, 40vh) !important; }
@media (max-width: 760px) { .editions #pn-banner.more-worlds .mw { transform: translateY(calc(clamp(90px, 14vh, 170px) / 2 + 10px)); } }
.editions:has(#pn-banner.more-worlds) { position: relative; z-index: 3; overflow: visible !important; }
.circuit.cx { z-index: 1; }

/* round 167 (Christian): once solship is open, its close button moves to the left side of the banner */
.issue.open #whatif .foot-in .chev { position: absolute; left: clamp(18px, 3vw, 40px); bottom: clamp(18px, 3vw, 40px); margin: 0 !important; z-index: 4; }
/* round 168: it sits at the top left instead, so it stays in reach even when the open banner is collapsed */
.issue.open #whatif .foot-in .chev { top: clamp(18px, 3vw, 40px); bottom: auto; }
.issue.open #whatif .foot-in { position: static !important; }
/* round 175: compass as themed clusters, three circle sizes, room to breathe */
.acc.round.clustered .ac-cl { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(10px, 1.6vw, 22px) clamp(14px, 2.2vw, 30px); max-width: 1180px; margin: 0 auto; padding: 0 clamp(4px, 2vw, 30px); }
.acc.round.clustered .ac-cl + .ac-cl { margin-top: clamp(56px, 9vw, 120px); }
.acc.round.clustered .ac-cl .ac-it { position: relative !important; left: auto !important; top: auto !important; flex: none;
  width: var(--d) !important; height: var(--d) !important; border-radius: 50%; overflow: hidden; --tilt: 0deg !important; transform: none; }
.acc.round.clustered .ac-it[data-sz="l"] { --d: clamp(118px, 15vw, 200px); }
.acc.round.clustered .ac-it[data-sz="m"] { --d: clamp(92px, 11.5vw, 150px); }
.acc.round.clustered .ac-it[data-sz="s"] { --d: clamp(72px, 8.6vw, 112px); }
.acc.round.clustered .ac-cl .ac-it:nth-child(3n+2) { margin-top: clamp(18px, 3vw, 44px); }
.acc.round.clustered .ac-cl .ac-it:nth-child(4n+3) { margin-bottom: clamp(14px, 2.4vw, 36px); }
.acc.round.clustered .ac-cl .ac-it:hover { transform: translateY(-6px) scale(1.04); }
.acc.round.clustered .ac-it > img, .acc.round.clustered .ac-it > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc.round .vctl { display: none !important; }
.acc.round.clustered .ac-br { flex-basis: 100%; height: 0; }
.acc.round.clustered .ac-cl .ac-it:nth-child(3n+2), .acc.round.clustered .ac-cl .ac-it:nth-child(4n+3) { margin: 0; }
.acc.round.clustered .ac-cl .ac-it:nth-of-type(odd) { margin-top: clamp(16px, 2.6vw, 40px); }
/* round 176 (Christian): open solship banner: the "what if" question centred in the picture, "invention as experience" back beneath it */
#biosphere3-issue.open #whatif > .in:not(.themes2) { position: absolute !important; inset: 0 !important; z-index: 3; display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--ban-h, clamp(84px, 9.4vw, 120px)) clamp(16px, 4vw, 60px) 0 !important; margin: 0 !important; pointer-events: none; }
#biosphere3-issue.open #whatif .foot-in .inv { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(26px, 7vh, 70px); margin: 0; text-align: center; }
/* round 177: X close on the left of the open edition's title banner, in both folded and unfolded states */
.issue.open #whatif .foot-in .chev { display: none !important; }
#whatif .vl-tban .ed-x { display: none; }
#biosphere3-issue.open #whatif .vl-tban .ed-x { display: grid; place-items: center; position: absolute; z-index: 6; left: clamp(14px, 2.6vw, 36px); top: 50%; translate: 0 -50%;
  width: clamp(40px, 3.4vw, 48px); height: clamp(40px, 3.4vw, 48px); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(10, 14, 20, .38);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; padding: 0; transition: background .2s; }
#biosphere3-issue.open #whatif .vl-tban .ed-x:hover { background: rgba(10, 14, 20, .6); }
#biosphere3-issue.open #whatif .vl-tban .ed-x::before, #biosphere3-issue.open #whatif .vl-tban .ed-x::after { content: ""; position: absolute; width: 44%; height: 2px; border-radius: 2px; background: #fff; rotate: 45deg; }
#biosphere3-issue.open #whatif .vl-tban .ed-x::after { rotate: -45deg; }

/* ===== round 179: worlds tabs + shop ===== */
.wtabs{--tl:#f4f7fa;--tm:rgba(244,247,250,.55);--tb:rgba(95,214,196,.55);--tg:rgba(16,24,40,.72);
  position:relative;z-index:4;display:flex;justify-content:center;align-items:center;gap:clamp(6px,1vw,12px);flex-wrap:wrap;
  padding:clamp(14px,2.2vw,26px) max(16px,env(safe-area-inset-right,0px)) clamp(12px,1.8vw,20px) max(16px,env(safe-area-inset-left,0px));background:#0b0e12}
.wtab{appearance:none;border:1px solid rgba(244,247,250,.18);background:var(--tg);color:var(--tm);border-radius:999px;cursor:pointer;
  font:400 clamp(11px,1vw,13px)/1 var(--mono);letter-spacing:.16em;text-transform:lowercase;padding:12px clamp(14px,1.8vw,24px);
  transition:color .25s,border-color .25s,background .25s,box-shadow .25s}
.wtab:hover{color:var(--tl);border-color:rgba(244,247,250,.4)}
.wtab.on{color:var(--tl);border-color:var(--tb);background:rgba(20,40,60,.85);box-shadow:0 0 0 3px rgba(95,214,196,.12),0 0 24px rgba(95,214,196,.18) inset}
.wtab:focus-visible,.sh-chip:focus-visible,.sh-card:focus-visible,.ps-add:focus-visible,.wt-cart:focus-visible{outline:2px solid #5fd6c4;outline-offset:3px}
.wt-cart{appearance:none;position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);display:none;align-items:center;gap:6px;
  background:transparent;border:1px solid rgba(244,247,250,.18);color:var(--tl);border-radius:999px;padding:8px 12px;cursor:pointer}
html.in-shop .wt-cart{display:inline-flex}
.wt-cart svg,.sh-fab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.wt-n{font:500 11px/1 var(--mono);min-width:18px;height:18px;border-radius:9px;display:inline-grid;place-items:center;background:rgba(244,247,250,.12)}
.has .wt-n{background:#5fd6c4;color:#06231f}
.wt-n.bump{animation:wtb .5s}
@keyframes wtb{40%{transform:scale(1.35)}}
.editions.wp-off{display:none!important}
.wpanel[hidden]{display:none!important}

/* sounds & artifacts */
.wp-sa{background:#0b0e12;padding:0 clamp(10px,1.4vw,18px) clamp(18px,3vw,36px)}
.sa-bub{position:relative;min-height:52vh;border-radius:28px;overflow:hidden;display:grid;place-items:center;align-content:center;gap:22px;
  background:radial-gradient(60% 70% at 50% 45%,#16305e 0,#0f1a30 55%,#0b0e12 100%);border:1px solid rgba(244,247,250,.08)}
.sa-ring{position:relative;width:min(44vw,240px);aspect-ratio:1}
.sa-ring i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(95,214,196,.5);animation:sar 9s linear infinite}
.sa-ring i:nth-child(2){inset:18%;border-style:dashed;border-color:rgba(224,169,74,.55);animation-duration:14s;animation-direction:reverse}
.sa-ring i:nth-child(3){inset:36%;border-style:dotted;border-color:rgba(217,122,166,.6);animation-duration:6s}
.sa-ring i::after{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;background:currentColor;color:#5fd6c4}
.sa-ring i:nth-child(2)::after{color:#e0a94a}.sa-ring i:nth-child(3)::after{color:#d97aa6}
@keyframes sar{to{transform:rotate(360deg)}}
.sa-cap{margin:0;font:400 13px/1 var(--mono);letter-spacing:.2em;color:#f4f7fa;padding:10px 18px;border-radius:999px;background:rgba(11,14,18,.6);border:1px solid rgba(95,214,196,.45)}

/* shop panel */
.wp-shop{background:linear-gradient(180deg,#0b0e12,#0e1626 40%,#10224a);padding:0 clamp(10px,1.4vw,18px) clamp(28px,4vw,56px);color:#f4f7fa}
.sh-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;padding:6px 0 clamp(16px,2vw,24px)}
.sh-f{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.sh-chip{appearance:none;border:1px solid rgba(244,247,250,.16);background:transparent;color:rgba(244,247,250,.6);border-radius:999px;cursor:pointer;
  font:400 11.5px/1 var(--mono);letter-spacing:.08em;padding:8px 13px;transition:color .2s,border-color .2s,background .2s}
.sh-chip:hover{color:#f4f7fa}
.sh-chip.on{color:#06231f;background:#5fd6c4;border-color:#5fd6c4}
.sh-k .sh-chip.on{background:#e0a94a;border-color:#e0a94a;color:#2a1a02}
.sh-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense;gap:clamp(8px,1vw,14px)}
@media (min-width:1100px){.sh-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1700px){.sh-grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
.sh-card{appearance:none;border:0;padding:0;text-align:left;color:inherit;cursor:pointer;background:rgba(16,24,40,.78);border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;min-width:0;box-shadow:0 0 0 1px rgba(244,247,250,.07) inset;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
  animation:shin .6s both;animation-delay:calc(var(--i)*30ms)}
@keyframes shin{from{opacity:.001;transform:translateY(10px)}}
.sh-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(95,214,196,.45) inset,0 14px 30px rgba(0,0,0,.35)}
.sh-im{position:relative;display:block;aspect-ratio:1;max-width:100%;background:radial-gradient(70% 70% at 50% 40%,#18284a,#0d1424)}
.sh-im img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;border-radius:12px;transition:transform .5s}
.sh-card:hover .sh-im img{transform:scale(1.03)}
.sh-tx{display:grid;gap:5px;padding:11px 14px 15px}
.sh-kw{font:400 10.5px/1.3 var(--mono);letter-spacing:.1em;color:#5fd6c4;margin:0}
.sh-nm{font:400 15px/1.25 var(--round);color:#f4f7fa}
.sh-pr{font:400 12.5px/1 var(--mono);color:rgba(244,247,250,.7)}

/* product sheet */
html.sh-lock{overflow:hidden}
.sh-ov{position:fixed;inset:0;z-index:2000;background:rgba(5,8,14,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));opacity:0;transition:opacity .22s}
.sh-ov.in{opacity:1}
.sh-sheet{position:relative;width:min(980px,100%);max-height:100%;overflow:auto;background:#0f1729;color:#f4f7fa;border-radius:28px;border:1px solid rgba(244,247,250,.1);
  display:grid;grid-template-columns:1.15fr 1fr;transform:translateY(14px) scale(.985);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.sh-ov.in .sh-sheet{transform:none}
.ps-im{position:relative;min-height:min(70vh,560px);background:radial-gradient(70% 70% at 50% 40%,#1b2d52,#0b1120)}
.ps-im img{position:absolute;inset:clamp(14px,2vw,28px);width:calc(100% - 2*clamp(14px,2vw,28px));height:calc(100% - 2*clamp(14px,2vw,28px));object-fit:contain;border-radius:16px}
.ps-tx{padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:16px;min-width:0}
.ps-nm{margin:0;font:400 clamp(24px,2.6vw,34px)/1.1 var(--round);text-wrap:balance}
.ps-pr{margin:0;font:400 16px/1 var(--mono)}
.ps-row{display:grid;gap:8px}
.ps-l{font:400 10.5px/1 var(--mono);letter-spacing:.14em;color:rgba(244,247,250,.5)}
.ps-opts{display:flex;flex-wrap:wrap;gap:6px}
.qty{display:inline-flex;align-items:center;border:1px solid rgba(244,247,250,.18);border-radius:999px;width:max-content}
.qty button{appearance:none;background:none;border:0;color:#f4f7fa;width:38px;height:36px;font:400 16px/1 var(--mono);cursor:pointer}
.qty .q-n{min-width:22px;text-align:center;font:500 13px/1 var(--mono)}
.qty.sm button{width:28px;height:26px;font-size:13px}
.ps-add{appearance:none;border:0;cursor:pointer;border-radius:999px;background:#5fd6c4;color:#06231f;font:500 13px/1 var(--mono);letter-spacing:.12em;padding:15px 22px;margin-top:auto;transition:filter .2s,transform .2s}
.ps-add:hover{filter:brightness(1.08);transform:translateY(-1px)}
.ps-x{appearance:none;position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid rgba(244,247,250,.2);background:rgba(11,14,18,.6);cursor:pointer}
.ps-x::before,.ps-x::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:#f4f7fa;transform:translate(-50%,-50%) rotate(45deg)}
.ps-x::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* cart drawer */
.sh-scrim{position:fixed;inset:0;z-index:2001;background:rgba(5,8,14,.55)}
.sh-drawer{position:fixed;top:0;right:0;bottom:0;z-index:2002;width:min(440px,100%);background:#0f1729;color:#f4f7fa;border-left:1px solid rgba(244,247,250,.1);
  border-radius:28px 0 0 28px;transform:translateX(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);display:flex;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) 0}
.sh-drawer.open{transform:none}
.dr-in{flex:1;overflow:auto;padding:22px clamp(16px,2.4vw,26px) 26px;display:flex;flex-direction:column;gap:16px}
.dr-h{position:relative;display:flex;align-items:center;min-height:40px}
.dr-h .ps-x{top:0;right:0}
.dr-t{margin:0;font:400 12px/1 var(--mono);letter-spacing:.2em}
.dr-steps{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.dr-steps li{flex:1;font:400 10px/1 var(--mono);letter-spacing:.12em;color:rgba(244,247,250,.4);padding-top:8px;border-top:2px solid rgba(244,247,250,.12)}
.dr-steps li.on{color:#5fd6c4;border-color:#5fd6c4}
.dr-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dr-li{position:relative;display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;background:rgba(244,247,250,.04);border-radius:18px;padding:8px 12px 8px 8px}
.dr-im{position:relative;width:64px;aspect-ratio:1;border-radius:12px;background:#0b1120}
.dr-im img{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);object-fit:contain}
.dr-tx{display:grid;gap:4px;min-width:0}
.dr-nm{font:400 14px/1.2 var(--round)}
.dr-pr{font:400 13px/1 var(--mono)}
.dr-rm{appearance:none;position:absolute;top:6px;right:6px;width:20px;height:20px;border:0;background:none;cursor:pointer;opacity:.45}
.dr-rm:hover{opacity:1}
.dr-rm::before,.dr-rm::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.2px;background:#f4f7fa;transform:translate(-50%,-50%) rotate(45deg)}
.dr-rm::after{transform:translate(-50%,-50%) rotate(-45deg)}
.dr-li .dr-pr{padding-right:14px}
.dr-tot{display:grid;gap:8px;border-top:1px solid rgba(244,247,250,.1);padding-top:14px}
.dr-tot p{margin:0;display:flex;justify-content:space-between;font:400 13px/1 var(--mono)}
.dr-tot .dr-g{font-size:15px;padding-top:6px}
.dr-note{color:rgba(244,247,250,.5);font:400 11.5px/1.4 var(--mono)!important;margin:0}
.dr-form{display:grid;gap:12px}
.dr-fld{display:grid;gap:6px}
.dr-fld span{font:400 10.5px/1 var(--mono);letter-spacing:.14em;color:rgba(244,247,250,.55)}
.dr-fld input{appearance:none;width:100%;min-width:0;background:rgba(244,247,250,.05);border:1px solid rgba(244,247,250,.16);border-radius:14px;color:#f4f7fa;
  font:400 15px/1.2 var(--round);padding:12px 14px;color-scheme:dark}
.dr-fld input:focus{outline:none;border-color:#5fd6c4;box-shadow:0 0 0 3px rgba(95,214,196,.18)}
.dr-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dr-err{margin:0;color:#ffb08a;font:400 12px/1.3 var(--mono)}
.dr-btns{display:flex;gap:10px;align-items:center}
.dr-btns .ps-add{flex:1;margin:0}
.dr-back{appearance:none;background:none;border:1px solid rgba(244,247,250,.2);color:#f4f7fa;border-radius:999px;padding:14px 18px;font:400 12px/1 var(--mono);letter-spacing:.1em;cursor:pointer}
.dr-ship,.dr-pay{display:grid;gap:6px;background:rgba(244,247,250,.04);border-radius:18px;padding:14px 16px}
.dr-ship p{margin:0;font:400 14px/1.45 var(--round)}
.dr-empty,.dr-done{flex:1;display:grid;place-items:center;align-content:center;gap:18px;text-align:center}
.dr-empty p{margin:0;font:400 12px/1 var(--mono);letter-spacing:.2em;color:rgba(244,247,250,.5)}
.dr-done .sa-ring{width:140px}
.dr-on{margin:0;font:500 15px/1 var(--mono);letter-spacing:.14em}
.dr-next{margin-top:4px}
.sh-fab{appearance:none;position:fixed;z-index:1500;right:max(18px,calc(env(safe-area-inset-right,0px) + 18px));bottom:max(18px,calc(env(safe-area-inset-bottom,0px) + 18px));
  display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:1px solid rgba(95,214,196,.55);background:rgba(15,23,41,.92);color:#f4f7fa;padding:11px 15px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4)}
@media (max-width:760px){
  .wtabs{justify-content:flex-start;padding-right:64px}
  .wtab{padding:10px 13px;letter-spacing:.1em}
  .sh-sheet{grid-template-columns:1fr}
  .ps-im{min-height:46vh}
  .sh-drawer{border-radius:0;width:100%}
  .sh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sh-bar{justify-content:flex-start}.sh-f{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){.sa-ring i,.sh-card{animation:none}.sh-drawer,.sh-sheet{transition:none}}
/* round 180: sign up tab */
.wp-su{background:#0b0e12;padding:0 clamp(10px,1.4vw,18px) clamp(18px,3vw,36px)}
.su-bub{gap:26px;padding:clamp(28px,4vw,48px) 16px}
.su-bub .sa-ring{width:min(36vw,170px)}
.su-form{display:grid;gap:12px;justify-items:center;width:min(460px,100%)}
.su-form[hidden],.su-ok[hidden]{display:none!important}
.su-l{font:400 12px/1 var(--mono);letter-spacing:.22em;color:#f4f7fa}
.su-row{display:flex;gap:8px;width:100%;padding:6px;border-radius:999px;background:rgba(11,14,18,.6);border:1px solid rgba(95,214,196,.4)}
.su-row input{flex:1;min-width:0;appearance:none;background:transparent;border:0;color:#f4f7fa;font:400 15px/1.2 var(--round);padding:10px 14px;color-scheme:dark}
.su-row input::placeholder{color:rgba(244,247,250,.4)}
.su-row input:focus{outline:none}
.su-row:focus-within{box-shadow:0 0 0 3px rgba(95,214,196,.18)}
.su-row .ps-add{margin:0;padding:12px 20px}
@media (max-width:760px){
  .wtabs{padding-right:max(16px,env(safe-area-inset-right,0px));gap:5px;justify-content:center}
  html.in-shop .wt-cart{display:none}
  .wtab{padding:9px 10px;letter-spacing:.05em;font-size:10.5px}
}
/* round 181: watch tab */
.wp-watch{background:linear-gradient(180deg,#0b0e12,#0e1626 50%,#10224a);padding:0 clamp(10px,1.4vw,18px) clamp(24px,4vw,48px)}
.wa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:clamp(10px,1.2vw,16px)}
.wa-card{appearance:none;border:0;padding:0;text-align:left;color:inherit;font:inherit;background:rgba(16,24,40,.78);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;min-width:0;
  box-shadow:0 0 0 1px rgba(244,247,250,.07) inset;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
button.wa-card{cursor:pointer}
button.wa-card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(95,214,196,.45) inset,0 14px 30px rgba(0,0,0,.35)}
button.wa-card:focus-visible{outline:2px solid #5fd6c4;outline-offset:3px}
.wa-im{position:relative;display:grid;place-items:center;aspect-ratio:16/9;max-width:100%;background:radial-gradient(70% 80% at 50% 40%,#18284a,#0b1120)}
.wa-im img{width:100%;height:100%;object-fit:contain;display:block}
.wa-in .sa-ring{width:min(36%,150px)}
.wa-play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(11,14,18,.55);border:1px solid rgba(244,247,250,.5);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:transform .3s,background .3s}
.wa-play::after{content:"";position:absolute;left:25px;top:20px;border-left:16px solid #f4f7fa;border-top:11px solid transparent;border-bottom:11px solid transparent}
button.wa-card:hover .wa-play{transform:scale(1.08);background:rgba(95,214,196,.35)}
.sh-sheet.wa-sheet{display:block;width:min(1200px,100%);background:#000;padding:0;overflow:hidden}
.wa-v{display:block;width:100%;max-height:calc(100vh - 48px);background:#000;border-radius:28px}
.wa-sheet .vctl{display:none!important}
@media (max-width:760px){.wtab{padding:8px 8px;letter-spacing:.03em;font-size:10px}.wtabs{gap:4px}}
@media (max-width:380px){.wtab{padding:8px 6px;letter-spacing:0;font-size:9.5px}.wtabs{gap:3px;padding-left:10px;padding-right:10px}}

/* round 169 (Christian): the reel lives in "watch" now, so the home bubble row keeps only Planet Align, wider and centered */
.home-reel .hr-row { grid-template-columns: 1fr !important; justify-items: center; }
.home-reel .hr-pa.hr-bub { width: min(100%, 860px); aspect-ratio: 16 / 8 !important; }
@media (max-width: 760px) { .home-reel .hr-pa.hr-bub { aspect-ratio: 4 / 3.4 !important; } }

/* round 182: watch = vertical film scroll */
.wa-grid{grid-template-columns:1fr;max-width:1180px;margin:0 auto;gap:clamp(22px,4vw,56px);padding-top:4px}
.wa-card{border-radius:28px}
.wa-im{aspect-ratio:16/9}
.wa-iv{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.wa-im .vctl{display:none!important}
.wa-card .sh-tx{padding:14px 20px 18px}
.wa-card .sh-nm{font-size:clamp(16px,1.6vw,20px)}
.wa-in .wa-im{aspect-ratio:16/6}
/* round 183 (Christian): "worlds incoming" as a game-style loading bar, 3/4 loaded */
#pn-banner.more-worlds .mw-load{position:relative;z-index:3;width:min(86%,46vh,520px);display:grid;gap:10px}
#pn-banner.more-worlds .ml-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
#pn-banner.more-worlds .mw-load .mw-cap{background:none!important;border:0!important;padding:0!important;border-radius:0;
  font-size:clamp(13px,1.35vw,19px)!important;letter-spacing:.2em!important;color:#f4f7fa!important}
#pn-banner.more-worlds .mw-load .mw-cap::after{content:"_";margin-left:.15em;color:#9fded4;animation:mlblink 1s steps(1) infinite}
#pn-banner.more-worlds .ml-pct{font:500 clamp(12px,1.2vw,17px)/1 var(--mono);color:#9fded4;letter-spacing:.08em;font-variant-numeric:tabular-nums}
#pn-banner.more-worlds .ml-bar{position:relative;height:clamp(14px,1.6vw,20px);padding:3px;border-radius:999px;background:rgba(10,14,22,.78);
  border:1px solid rgba(159,222,212,.45);box-shadow:0 0 18px rgba(79,179,165,.18),inset 0 0 10px rgba(0,0,0,.6);overflow:hidden}
#pn-banner.more-worlds .ml-fill{position:relative;display:block;height:100%;width:75%;border-radius:999px;overflow:hidden;
  background:linear-gradient(90deg,#4fb3a5,#5b8fd8 55%,#e0a94a);box-shadow:0 0 12px rgba(95,214,196,.55);animation:mlfill 2.4s cubic-bezier(.3,.7,.2,1) both}
#pn-banner.more-worlds .ml-fill::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(10,14,22,.55) 9px 12px)}
#pn-banner.more-worlds .ml-fill::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:mlshine 2.6s ease-in-out 2.4s infinite}
@keyframes mlfill{from{width:0}to{width:75%}}
@keyframes mlshine{to{left:110%}}
@keyframes mlblink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){#pn-banner.more-worlds .ml-fill,#pn-banner.more-worlds .ml-fill::after,#pn-banner.more-worlds .mw-load .mw-cap::after{animation:none}}
#pn-banner.more-worlds .ml-top{justify-content:center}
/* round 184 (Christian): fewer compass circles, each one fading through 3 or more pictures */
.acc.round.clustered .ac-it.mx{position:relative!important;overflow:hidden}
.acc.round.clustered .ac-it.mx > img,.acc.round.clustered .ac-it.mx > video{position:absolute!important;inset:0;width:100%;height:100%;object-fit:cover;opacity:0!important;transition:opacity 1.2s ease}
.acc.round.clustered .ac-it.mx > [data-on]{opacity:1!important}
/* round 185 (Christian): the menu tabs and the solship X float, so leaving an edition is always one tap */
.wtabs{position:sticky;top:0;z-index:1400;padding-top:calc(env(safe-area-inset-top,0px) + clamp(10px,1.4vw,16px));padding-bottom:clamp(10px,1.4vw,16px);
  background:rgba(11,14,18,.82);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);border-bottom:1px solid rgba(244,247,250,.06)}
#biosphere3-issue.open #whatif .vl-tban .ed-x{display:none!important}
.ed-x.ed-xf{position:fixed;z-index:1401;left:max(16px,calc(env(safe-area-inset-left,0px) + 16px));top:calc(var(--wt-h,56px) + 12px);
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(244,247,250,.35);background:rgba(11,14,18,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:pointer;display:grid;place-items:center;opacity:0;pointer-events:none;scale:.85;transition:opacity .25s,scale .25s,background .2s}
.ed-x.ed-xf.on{opacity:1;pointer-events:auto;scale:1}
.ed-x.ed-xf:hover{background:rgba(95,214,196,.3)}
.ed-x.ed-xf:focus-visible{outline:2px solid #5fd6c4;outline-offset:3px}
.ed-x.ed-xf::before,.ed-x.ed-xf::after{content:"";position:absolute;width:44%;height:2px;border-radius:2px;background:#fff;rotate:45deg}
.ed-x.ed-xf::after{rotate:-45deg}
@media (max-width:760px){.ed-x.ed-xf{width:42px;height:42px}}
.sheet > .wtabs{position:sticky;z-index:1400}

/* round 186 (Christian): watch = grid; a film opens as the player with the others in a lateral row above it */
.wa-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))!important;max-width:1380px!important;gap:clamp(12px,1.4vw,20px)!important}
.wa-card{border-radius:24px}
.wa-im img{object-fit:contain}
.wp-watch.playing{padding-top:0}
.wa-top{display:flex;align-items:stretch;gap:12px;max-width:1380px;margin:0 auto 16px}
.wa-back{appearance:none;flex:none;display:grid;place-items:center;align-content:center;gap:6px;width:76px;border-radius:18px;border:1px solid rgba(95,214,196,.45);
  background:rgba(16,24,40,.78);color:#f4f7fa;cursor:pointer;font:400 10.5px/1 var(--mono);letter-spacing:.14em;transition:background .2s}
.wa-back:hover{background:rgba(95,214,196,.22)}
.wa-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5}
.wa-row{flex:1;min-width:0;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:rgba(159,222,212,.35) transparent}
.wa-card.sm{flex:none;width:clamp(170px,19vw,240px);scroll-snap-align:start;border-radius:18px}
.wa-card.sm .sh-tx{padding:8px 12px 10px}
.wa-card.sm .sh-nm{font-size:13px}
.wa-card.sm .wa-play{width:40px;height:40px;margin:-20px 0 0 -20px}
.wa-card.sm .wa-play::after{left:16px;top:12px;border-left-width:11px;border-top-width:8px;border-bottom-width:8px}
.wa-card.sm .sa-ring{width:min(40%,70px)}
.wa-main{max-width:1380px;margin:0 auto}
.wa-stage{border-radius:28px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(244,247,250,.08) inset}
.wa-stage .wa-v{border-radius:0;max-height:calc(100vh - var(--wt-h,56px) - 230px);min-height:200px}
.wa-stage .vctl{display:none!important}
.wa-title{margin:14px 6px 0;font-size:clamp(18px,1.8vw,24px)!important}
@media (max-width:760px){.wa-back{width:58px}.wa-card.sm{width:150px}}
/* newsletter: more to fill in (only email required) */
.su-form{width:min(620px,100%)!important;justify-items:stretch!important;gap:16px!important}
.su-l{justify-self:center}
.su-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.su-grid .su-w{grid-column:1/-1}
.su-grid .dr-fld input,.su-grid textarea{appearance:none;width:100%;min-width:0;background:rgba(11,14,18,.55);border:1px solid rgba(244,247,250,.16);border-radius:14px;color:#f4f7fa;font:400 15px/1.3 var(--round);padding:11px 14px;color-scheme:dark;resize:vertical}
.su-grid .dr-fld input:focus,.su-grid textarea:focus{outline:none;border-color:#5fd6c4;box-shadow:0 0 0 3px rgba(95,214,196,.18)}
.su-int{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.su-int legend{font:400 10.5px/1 var(--mono);letter-spacing:.14em;color:rgba(244,247,250,.55);margin-bottom:8px;padding:0}
.su-c{position:relative;cursor:pointer}
.su-c input{position:absolute;opacity:0;pointer-events:none}
.su-c span{display:inline-block;border:1px solid rgba(244,247,250,.18);border-radius:999px;padding:8px 13px;font:400 11.5px/1 var(--mono);letter-spacing:.06em;color:rgba(244,247,250,.7);transition:all .2s}
.su-c input:checked + span{background:#5fd6c4;border-color:#5fd6c4;color:#06231f}
.su-c input:focus-visible + span{outline:2px solid #5fd6c4;outline-offset:2px}
.su-go{justify-self:center;min-width:200px;margin:0!important}
.su-bub{min-height:auto!important}
@media (max-width:520px){.su-grid{grid-template-columns:1fr}}
/* round 187 (Christian): banner titles step right while solship is open, so the floating X never sits on them */
#biosphere3-issue.open .vl-ban .vl-t{margin-left:46px;transition:opacity .3s,margin .3s}
@media (max-width:760px){#biosphere3-issue.open .vl-ban .vl-t{margin-left:58px}}
/* round 188 (Christian): past the tempo cover, the floating menu carries the tempo logo on its left */
.wtabs .wt-logo{appearance:none;position:absolute;left:max(16px,env(safe-area-inset-left,0px));top:50%;translate:0 calc(-50% + env(safe-area-inset-top,0px)/2);
  border:0;background:none;padding:4px;cursor:pointer;opacity:0;pointer-events:none;transform:translateX(-8px);transition:opacity .35s,transform .35s}
.wtabs .wt-logo img{display:block;width:clamp(84px,8vw,118px);height:auto}
.wtabs.stuck .wt-logo{opacity:1;pointer-events:auto;transform:none}
.wtabs .wt-logo:focus-visible{outline:2px solid #5fd6c4;outline-offset:3px;border-radius:6px}
@media (max-width:760px){
  .wtabs{transition:padding-left .35s}
  .wtabs.stuck{padding-left:calc(max(10px,env(safe-area-inset-left,0px)) + 58px);justify-content:flex-start}
  .wtabs .wt-logo{left:max(8px,env(safe-area-inset-left,0px))}
  .wtabs .wt-logo img{width:44px}
}
/* round 189 (Christian): the solship X lives in the floating menu, on the left (after the logo once it shows) */
.wtabs{--lgw:clamp(84px,8vw,118px)}
.wtabs .ed-x.ed-xf{position:absolute;top:50%;translate:0 calc(-50% + env(safe-area-inset-top,0px)/2);left:max(16px,env(safe-area-inset-left,0px));
  width:38px;height:38px;box-shadow:none;transition:opacity .25s,scale .25s,left .35s,background .2s}
.wtabs.stuck .ed-x.ed-xf{left:calc(max(16px,env(safe-area-inset-left,0px)) + var(--lgw) + 22px)}
@media (max-width:760px){
  .wtabs{--lgw:44px}
  .wtabs .ed-x.ed-xf{width:32px;height:32px;left:max(10px,env(safe-area-inset-left,0px))}
  .wtabs.stuck .ed-x.ed-xf{left:calc(max(8px,env(safe-area-inset-left,0px)) + 52px)}
  .wtabs.has-x{padding-left:calc(max(10px,env(safe-area-inset-left,0px)) + 40px);justify-content:flex-start}
  .wtabs.stuck.has-x{padding-left:calc(max(10px,env(safe-area-inset-left,0px)) + 96px)}
}
@media (max-width:760px){.wtabs.has-x{flex-wrap:nowrap;gap:4px}.wtabs.has-x .wtab{padding-left:7px;padding-right:7px;font-size:9.5px;white-space:nowrap}}
#biosphere3-issue.open .vl-ban .vl-t{margin-left:0}
/* round 190 (Christian): the X in the floating menu wears the solship banner colour */
.wtabs .ed-x.ed-xf{background:linear-gradient(135deg,rgb(98,26,12),rgb(76,26,16));border-color:rgba(150,64,40,.5);color:#fff}
.wtabs .ed-x.ed-xf:hover{background:linear-gradient(135deg,rgb(118,32,15),rgb(92,32,20))}

/* round 170 (Christian): the Planet Align astronaut rides like a launch: the picture drifts in slow parallax as the
   page scrolls, and every few seconds a shuttle-style shudder comes in (a jittery, blurred shake with a touch of colour
   fringing, after the rattling cockpit scenes in Oppenheimer) before it settles again */
.home-reel .hr-pa .t > img:first-child { translate: 0 var(--py, 0px); filter: url(#pa-ab); animation: pa-shudder 7s linear infinite; will-change: transform, filter; }
@keyframes pa-shudder {
  0%, 57% { transform: none; filter: url(#pa-ab) blur(0); }
  60% { transform: translate(.5px, -.4px); filter: url(#pa-ab) blur(.2px); }
  63% { transform: translate(-.8px, .4px) rotate(-.05deg); filter: url(#pa-ab) blur(.45px); }
  66% { transform: translate(.9px, .6px) rotate(.06deg); filter: url(#pa-ab) blur(.25px); }
  69% { transform: translate(-.5px, -.7px); filter: url(#pa-ab) blur(.5px); }
  72% { transform: translate(.7px, .3px) rotate(-.04deg); filter: url(#pa-ab) blur(.3px); }
  75% { transform: translate(-.4px, .2px); filter: url(#pa-ab) blur(.2px); }
  79% { transform: translate(.2px, 0); filter: url(#pa-ab) blur(.1px); }
  83%, 100% { transform: none; filter: url(#pa-ab) blur(0); }
}
/* round 171 (Christian): the same launch feel, kept subtle */
@media (prefers-reduced-motion: reduce) { .home-reel .hr-pa .t > img:first-child { animation: none; translate: none; } }

/* round 191 (Christian): the Planet Align card's picture and its dark top/bottom gradient fill the card exactly.
   The link layer had grown taller than the card, so the gradient's bottom shade was cut off and a bright strip showed */
.home-reel .hr-pa > .t { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; }
.home-reel .hr-pa > .t > .pa-txt { inset: 0 !important; width: auto !important; height: auto !important; box-sizing: border-box; }
/* round 191 (Christian): listen — first priority, Bandcamp-style release with name-your-price */
.wp-sa .lp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,2.6vw,36px);align-items:start;max-width:1180px;margin:0 auto;padding-top:clamp(14px,2vw,26px)}
.lp-art{position:sticky;top:calc(var(--wt-h,64px) + 16px);aspect-ratio:1;border-radius:22px;overflow:hidden;background:radial-gradient(70% 70% at 50% 45%,#1a1430,#08090f);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.lp-art img{width:100%;height:100%;object-fit:contain;display:block}
.lp-main{min-width:0;color:#e9eef5}
.lp-t{font:500 clamp(30px,4.2vw,54px)/1 "Space Grotesk",system-ui,sans-serif;letter-spacing:-.01em;margin:6px 0 clamp(16px,2vw,24px);text-transform:lowercase}
.lp-pl{display:flex;gap:14px;align-items:center;padding:14px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.lp-play{flex:0 0 auto;width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;background:linear-gradient(135deg,#3fe0c2,#2a9fd6);display:grid;place-items:center;box-shadow:0 6px 18px rgba(42,159,214,.35);transition:transform .2s}
.lp-play:hover{transform:scale(1.05)}
.lp-play i,.lp-tp i{display:block;width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #07131a;margin-left:4px}
.lp-play.on i,.lp-tr.on .lp-tp i{width:14px;height:18px;border:0;margin:0;background:linear-gradient(90deg,#07131a 0 5px,transparent 5px 9px,#07131a 9px)}
.lp-np{flex:1;min-width:0}
.lp-row{display:flex;justify-content:space-between;gap:10px;font:13px/1.3 "Space Mono",ui-monospace,monospace;color:#cfd8e3}
.lp-cur{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-tm b{font-weight:400}.lp-tm{flex:0 0 auto;color:#8b98a9}
.lp-bar{position:relative;height:8px;margin:10px 0 8px;border-radius:99px;background:rgba(255,255,255,.12);cursor:pointer;overflow:hidden}
.lp-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:linear-gradient(90deg,#3fe0c2,#2a9fd6)}
.lp-sk{display:flex;gap:6px}
.lp-sk button{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:none;cursor:pointer;display:grid;place-items:center}
.lp-sk svg{width:14px;height:14px;fill:#cfd8e3;stroke:#cfd8e3;stroke-width:2;stroke-linejoin:round}
.lp-buy{margin:16px 0;padding:16px;border-radius:20px;background:linear-gradient(135deg,rgba(63,224,194,.08),rgba(42,159,214,.06));border:1px solid rgba(63,224,194,.22)}
.lp-bh{font:600 15px/1.2 "Space Grotesk",system-ui,sans-serif;margin:0 0 10px;letter-spacing:.02em}
.lp-form{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.lp-amt{display:flex;align-items:center;gap:4px;padding:0 14px;height:44px;border-radius:99px;background:#0d131b;border:1px solid rgba(255,255,255,.18)}
.lp-amt span{color:#8b98a9;font:15px "Space Mono",monospace}
.lp-amt input{width:72px;background:none;border:0;color:#fff;font:16px "Space Mono",monospace;outline:none}
.lp-hint{font:12px "Space Mono",monospace;color:#8b98a9}
.lp-go{margin:0 0 0 auto;width:auto;padding:0 22px;height:44px}
.lp-note{margin:10px 0 0;font:11px/1.4 "Space Mono",monospace;color:#7d8a9b}
.lp-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.08)}
.lp-tr{display:flex;align-items:center;gap:10px;padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.06);border-radius:12px;cursor:pointer;font:14px/1.3 "Space Grotesk",system-ui,sans-serif;color:#d6dee8;transition:background .2s}
.lp-tr:hover{background:rgba(255,255,255,.04)}
.lp-tr.cur{background:rgba(63,224,194,.08);color:#fff}
.lp-tp{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:none;display:grid;place-items:center;cursor:pointer}
.lp-tp i{border-width:5px 0 5px 8px;border-color:transparent transparent transparent #cfd8e3;margin-left:2px}
.lp-tr.on .lp-tp i{width:9px;height:10px;background:linear-gradient(90deg,#cfd8e3 0 3px,transparent 3px 6px,#cfd8e3 6px)}
.lp-tr.cur .lp-tp{border-color:#3fe0c2}
.lp-n{width:24px;color:#7d8a9b;font:12px "Space Mono",monospace}
.lp-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-d{color:#8b98a9;font:12px "Space Mono",monospace}
.lp-dl{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(63,224,194,.12)}
.lp-dl svg{width:15px;height:15px;fill:none;stroke:#3fe0c2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.wp-sa .lp{grid-template-columns:1fr}.lp-art{position:relative;top:0;max-width:420px;width:100%;margin:0 auto}.lp-go{margin-left:0}}
.lp-art{aspect-ratio:auto}.lp-art img{height:auto}

/* tensegrity scans: featured first, two columns wide, uncropped */
.sh-card.sh-feat{grid-column:span 2}
.sh-card.sh-feat .sh-im{aspect-ratio:4/3}

/* listen visualizer replaces the cover image */
.lp-art.lp-viz{aspect-ratio:4/5;background:#06060b}
.lp-viz canvas{display:block;width:100%;height:100%}

/* animated collectibles: looping video in place of the still */
.sh-im video{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;border-radius:12px}
.ps-im video{position:absolute;inset:clamp(14px,2vw,28px);width:calc(100% - 2*clamp(14px,2vw,28px));height:calc(100% - 2*clamp(14px,2vw,28px));object-fit:contain;border-radius:16px}
.sh-im video,.ps-im video{background:transparent}
video.sh-anim::-webkit-media-controls,video.sh-anim::-webkit-media-controls-enclosure,video.sh-anim::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none}

.sh-im img.sh-cy,.ps-im img.sh-cy{opacity:0;transition:opacity .9s ease,transform .5s}.sh-im img.sh-cy.on,.ps-im img.sh-cy.on{opacity:1}
.cy-ds{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:8px;z-index:2}.cy-d{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:background .25s,transform .25s}.cy-d.on{background:#fff;transform:scale(1.2)}.cy-d:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sh-im img.sh-cy,.ps-im img.sh-cy{transition:none}}
.sh-del{position:absolute;top:10px;right:10px;z-index:3;font:600 11px/1 "DM Mono",monospace;letter-spacing:.06em;padding:7px 11px;border-radius:999px;background:#c8463ee6;color:#fff;cursor:pointer;box-shadow:0 4px 14px #0006}.sh-del:hover{background:#e0544a}.sh-card.sh-gone{opacity:.35}.sh-card.sh-gone .sh-del{background:#e6d49a;color:#111;opacity:1}.sh-card{position:relative}
html.cm-on body *{cursor:crosshair !important}
.ps-c{display:inline-flex;align-items:center;gap:6px}.cw-sw{display:inline-block;width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 1px #ffffff55}
.sh-soon{cursor:default}.sh-soon .sh-im{display:grid;place-items:center;background:repeating-linear-gradient(135deg,#141b2e 0 14px,#18213a 14px 28px)}.soon-st{display:grid;gap:6px;text-align:center;font:600 12px/1.2 "DM Mono",monospace;letter-spacing:.12em;color:#e6d49a}.soon-st i{font-style:normal;color:#cfd6e6;opacity:.75;letter-spacing:.08em}
.pv-tg{position:absolute;top:12px;left:12px;z-index:4;display:flex;gap:4px;padding:3px;border-radius:999px;background:#0b1120cc;backdrop-filter:blur(6px)}.pv-b{font:600 11px/1 "DM Mono",monospace;letter-spacing:.05em;color:#cfd6e6;background:none;border:0;border-radius:999px;padding:7px 11px;cursor:pointer}.pv-b.on{background:#e6d49a;color:#111}
.ps-im .wall{display:none}.ps-im.wall-on .wall{display:block;position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:linear-gradient(180deg,#e9e4da,#ddd6c9);z-index:2}.ps-im.wall-on>img,.ps-im.wall-on>video,.ps-im.wall-on>.cy-ds{visibility:hidden}
.wl-fl{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#b79f80,#9c8467);box-shadow:0 -1px 0 #0002}.wl-bench{position:absolute}.wl-bench:before{content:"";position:absolute;left:0;right:0;top:0;height:22%;background:#6b5340;border-radius:3px}.wl-bench i{position:absolute;bottom:0;width:6%;height:80%;background:#5a4434}.wl-bench i:first-child{left:6%}.wl-bench i:last-child{right:6%}
.wl-fr{position:absolute;box-sizing:border-box;border:solid #1b1b1b;box-shadow:0 10px 24px #0003,0 2px 4px #0002;background:#fbfaf7}.wl-mat{position:absolute;inset:0;box-sizing:border-box;display:flex}.wl-mat img{position:static !important;inset:auto !important;width:100% !important;height:100% !important;object-fit:contain;border-radius:0 !important}
.wl-dim{position:absolute;left:0;right:0;bottom:10px;margin:0;text-align:center;font:600 12px/1.3 "DM Mono",monospace;letter-spacing:.06em;color:#2a2117}
.ps-np .np-in{display:inline-flex;align-items:center;gap:4px;border:1px solid #ffffff33;border-radius:999px;padding:4px 12px}.ps-np input{width:72px;background:none;border:0;color:inherit;font:inherit;font-size:16px}.ps-np input.bad{color:#ff8a80}.np-note{font-size:11px;opacity:.65;flex-basis:100%}.ps-np{flex-wrap:wrap}
.ps-np .np-in{flex:0 0 auto;width:auto;max-width:150px}.ps-np input:focus{outline:none}.ps-np .np-in:focus-within{border-color:#e6d49a}
/* watch: every film at its own aspect ratio, never cropped. The stage takes the film's shape (--ar, read from the file) */
.wa-main{--ar:16/9;--wa-h:calc(100vh - var(--wt-h,56px) - 230px)}
.wa-stage{width:min(100%,max(200px,var(--wa-h)) * (var(--ar)));aspect-ratio:var(--ar);margin:0 auto}
.wa-stage .wa-v{width:100%;height:100%;max-height:none;min-height:0;object-fit:contain!important}
.wa-im img{object-fit:contain!important}