/* Earthlings: the body fills the window behind everything, with no box round it, and the chapters' few words sit
   small beside the part they're about, one side then the other. on a phone the words sit in a strip along the
   bottom and the body is framed in the space above it */
.earthlings {
  --ring: color-mix(in srgb, var(--ink) 42%, transparent);
  --faint: color-mix(in srgb, var(--ink) 22%, var(--bg));
  /* the text column: its gutter, its width and the gap to the open space the body is framed in */
  --gut: max(24px, 4vw);
  --col: min(300px, 30vw);
  --gap: 32px;
  /* a phone's strip of words along the bottom */
  --strip: 36svh;
  /* the open space, set by the script as the side changes: the drawing without webgl sits in it */
  --open-l: calc(var(--gut) + var(--col) + var(--gap));
  --open-r: var(--gut);
}
.earthlings * { box-sizing: border-box }

.el-main { padding: 0 }
/* the title row, small, over the top of the body */
.intro { position: relative; z-index: 4; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; padding: 16px var(--gut) 0; pointer-events: none }
.intro h1 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em }
.intro .sub { margin: 0; font-size: 12px; line-height: 1.4; color: var(--soft) }

/* the stage: fixed behind the whole journey, edge to edge */
.stage { position: fixed; inset: 0; z-index: 0; margin: 0; pointer-events: none }
.stage .view { position: absolute; inset: 0 }
.stage .gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0 }
.has3d .stage .gl { opacity: 1; animation: gl-in .9s var(--ease-smooth-out, ease-out) both }
@keyframes gl-in { from { opacity: 0 } }
/* the light theme: the same drawing turned to charcoal lines on chalk paper by the site's chalk filter, as the
   pyramids are, so the canvas's charcoal comes out as the page's chalk exactly */
:root[data-theme="light"] .has3d .stage :is(.gl, .was) { filter: url(#chalk) }
/* reduced motion's crossfade: the last still, laid over the canvas and faded off */
.has3d .stage .was { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .6s ease }
.stage .tags { position: absolute; inset: 0; pointer-events: none }
.tag { width: 0; height: 0 }
.tag::before { content: ''; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink) }
/* a part's name: small, in capitals. a note says what's happening there, so it keeps its own case */
.tag span { position: absolute; left: 9px; top: -8px; white-space: nowrap; font: 500 10px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-shadow: 0 0 6px var(--bg), 0 0 2px var(--bg), 0 0 1px var(--bg) }
.tag.note span { text-transform: none; letter-spacing: .03em }
.tag.flip span { left: auto; right: 9px }
/* a slow connection gets a quiet word that something's coming, after a moment so a quick one never sees it */
.wait3d .stage .view::after { content: 'Drawing the body'; position: absolute; left: var(--open-l); right: var(--open-r); top: 50%; text-align: center; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); animation: wait-in .6s 1.2s var(--ease-smooth-out, ease-out) both }
@keyframes wait-in { from { opacity: 0 } }

/* without webgl the flat drawings sit in the open space; with it they only come out in a close-up */
.stage .flat { position: absolute; left: var(--open-l); right: var(--open-r); top: 72px; bottom: 96px; display: grid; place-items: center }
.stage .flat #stage { width: 100%; height: 100%; max-height: 100%; overflow: visible }
:is(.has3d, .wait3d) .stage .flat { display: none }

/* the chapters: tall, empty stretches of page that the scroll runs through; their words are pinned beside the body
   and the script fades each beat in and out as it's read */
.steps { list-style: none; margin: 0; padding: 0 }
.ready .steps { padding-top: 34vh }
.ready .step { height: calc(var(--beats, 1) * 90vh + 20vh) }
.beat { max-width: var(--col) }
.ready .beat { position: fixed; z-index: 3; top: 50%; left: var(--gut); width: var(--col); transform: translateY(-50%); opacity: 0; visibility: hidden; pointer-events: none }
.ready .step:nth-child(even) .beat { left: auto; right: var(--gut) }
.ready .beat.on { visibility: visible; pointer-events: auto }
.beat h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance }
.beat p { margin: 0; font-size: 13.5px; line-height: 1.55; text-wrap: pretty }
.beat :is(h2, p) { text-shadow: 0 0 10px var(--bg), 0 0 3px var(--bg) }
.beat b { font-weight: 700 }
.beat.soft p { color: var(--soft) }
/* the chapter's number: a small pill in the inverse, chalk on charcoal and charcoal on chalk */
.beat .no { flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 500 11px/1 var(--mono); letter-spacing: 0; text-shadow: none }

/* the clock: small, under the words' column */
.clock { display: none }
.ready .clock { position: fixed; z-index: 3; bottom: 22px; left: var(--gut); width: min(240px, var(--col)); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 2px 12px; pointer-events: none }
.ready[data-side="right"] .clock { left: auto; right: var(--gut) }
.clock .when { grid-row: span 2; font: 500 10px/1.3 var(--mono); color: var(--soft) }
.clock .when b { display: block; font: 800 15px/1.1 var(--sans); letter-spacing: -.01em; color: var(--ink) }
.clock svg { width: 100%; height: 26px; overflow: visible }
.clock .lvl { font: 500 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft) }
#curve .ax { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke }
#curve .c { fill: color-mix(in srgb, var(--ink) 8%, transparent); stroke: var(--ring); stroke-width: 1; vector-effect: non-scaling-stroke }
#curve .past { fill: color-mix(in srgb, var(--ink) 26%, transparent); stroke: none }
#curve .now { stroke: var(--ink); stroke-width: 1.4; vector-effect: non-scaling-stroke }
#curve text { font: 500 8px var(--mono); fill: var(--soft) }

/* the key to the dots, tiny, at the foot of the picture: a ring is psilocybin, a disc psilocin */
.key { display: none }
.has3d .key { display: flex; position: fixed; z-index: 3; left: calc(var(--open-l) + 4px); bottom: 22px; gap: 14px; font: 500 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); text-shadow: 0 0 6px var(--bg), 0 0 2px var(--bg); pointer-events: none }
.key span { display: inline-flex; align-items: center; gap: 6px }
.key i { width: 6px; height: 6px; border-radius: 50%; box-sizing: border-box; border: 1px solid var(--ink) }
.key .disc { background: var(--ink) }

/* past the journey the words, the clock, the key and the hotspots step aside for the end of the page */
.past :is(.beat, .clock, .key, .hot) { visibility: hidden !important }

/* the hotspots: a small pill beside the part, its dot on the spot, that opens the close-up */
:where(.hot) { font: inherit }
.hot { display: none }
.has3d .hot { position: fixed; z-index: 3; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 9px; border: 1px solid var(--ink); border-radius: 999px; background: var(--bg); color: var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .04em; cursor: pointer; visibility: hidden; opacity: 0; transition: background var(--duration-quick), color var(--duration-quick) }
.has3d .hot.on { visibility: visible }
.hot:hover { background: var(--ink); color: var(--bg) }
.hot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
.hot .pip { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor }
.hot .pip::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor; animation: pip 1.8s var(--ease-smooth-out) infinite }
@keyframes pip { from { transform: scale(.6); opacity: .9 } to { transform: scale(2.1); opacity: 0 } }

/* the close-up: the chapter's flat drawing, played through once */
.closeup { width: min(540px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); color: var(--ink); overflow: auto }
.closeup::backdrop { background: color-mix(in srgb, var(--charcoal) 55%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px) }
.closeup[open] { animation: closeup-in var(--duration-fast) var(--ease-smooth-out) both }
@keyframes closeup-in { from { opacity: 0; transform: translateY(8px) scale(.98) } }
.closeup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.closeup h2 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em }
:where(.closeup-x) { font: inherit }
.closeup-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer }
.closeup-x:hover { background: var(--wash2) }
.closeup-x:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
.closeup-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round }
.closeup-art { aspect-ratio: 600 / 640; max-height: 62svh; margin: 8px auto 6px }
.closeup-art #stage { display: block; width: 100%; height: 100%; overflow: visible }
.closeup p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--soft) }

/* the flat drawing: lines in the ink, labels in mono */
#stage text { font-family: var(--mono); font-size: 13px; fill: var(--soft) }
#stage .t-on { fill: var(--ink); font-weight: 500 }
#stage .t-big { font: 800 15px var(--sans); fill: var(--ink); letter-spacing: -.01em }
#stage .ln { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round }
#stage .lt { fill: none; stroke: var(--ring); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round }
#stage .ft { fill: none; stroke: var(--faint); stroke-width: .8 }
#stage .dash { stroke-dasharray: 2 4 }
#stage .ink { fill: var(--ink); stroke: none }
#stage .bg { fill: var(--bg) }
#stage .wash { fill: color-mix(in srgb, var(--ink) 7%, transparent) }
#stage .hollow { fill: var(--bg); stroke: var(--ink); stroke-width: 1.2 }
#stage .scene { transition: opacity var(--duration-very-slow) var(--ease-smooth-out) }
#stage .lead { stroke: var(--ring); stroke-width: .7 }
/* the lab's molecule drawing, in currentColor */
#stage .mol { overflow: visible; color: var(--ink) }
#stage .mol .b line { stroke: currentColor; stroke-width: .07; stroke-linecap: round }
#stage .mol .t text { fill: currentColor; font: 600 .52px var(--sans); dominant-baseline: central }
#stage .mol .t text:not(.h) { text-anchor: middle }
#stage .mol .t text.h { font-size: .44px }
#stage .mol .t text.ch { font-size: .34px }
#stage .mol.with-hl .hl, #stage .mol.with-hl line.hl { stroke-width: .12 }
#stage .mol.with-hl .hl text { font-weight: 800 }

/* the end of the page: related pages, the sources drawer and the notes, together on the page's ground over the body */
.end { position: relative; z-index: 6; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; background: var(--bg); border-top: 1px dotted var(--ring) }
.end .sources { margin: 32px var(--gut) 40px }
.end .sources .by { max-width: 1100px }
.end .notes { margin-top: auto }
.notes { padding: 28px var(--gut) 56px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--soft); border-top: 1px dotted var(--ring) }
.notes p { margin: 0; max-width: 720px }
.notes b { color: var(--ink) }
.notes a { text-underline-offset: 3px }

/* no script: the chapters read on their own, top to bottom */
.earthlings:not(.ready) .stage { display: none }
.earthlings:not(.ready) .steps { max-width: 720px; margin: 0 auto; padding: 24px var(--gut) }
.earthlings:not(.ready) .beat { max-width: none; margin: 0 0 28px }

@media (max-width: 860px) {
  .earthlings { --gut: 16px; --col: calc(100vw - 32px) }
  /* the strip: the page's own colour along the bottom, the words and the clock in it */
  /* at the top of the page the body has the whole window: the strip, the clock and the key come in as it scrolls */
  .ready .journey::after { content: ''; position: fixed; z-index: 2; left: 0; right: 0; bottom: 0; height: var(--strip); background: var(--bg); border-top: 1px dotted var(--ring); pointer-events: none; opacity: var(--lead, 1) }
  .ready .beat, .ready .step:nth-child(even) .beat { top: auto; left: var(--gut); right: var(--gut); bottom: 0; width: auto; height: calc(var(--strip) - 52px); padding-bottom: max(12px, env(safe-area-inset-bottom)); transform: none; overflow: hidden }
  .beat h2 { font-size: 18px; margin-bottom: 6px }
  .beat p { font-size: 14px }
  .beat :is(h2, p) { text-shadow: none }
  .ready .clock, .ready[data-side="right"] .clock { left: var(--gut); right: var(--gut); width: auto; bottom: calc(var(--strip) - 44px); grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; gap: 0 10px; opacity: var(--lead, 1) }
  .has3d .key { left: var(--gut); bottom: calc(var(--strip) + 10px); opacity: var(--lead, 1) }
  .clock .when { grid-row: auto; white-space: nowrap }
  .clock .when b { display: inline; font-size: 13px; margin-right: 4px }
  .clock svg { height: 20px }
  .stage .flat { top: 64px; bottom: var(--strip) }
  .wait3d .stage .view::after { top: 33% }
}
@media (prefers-reduced-motion: reduce) {
  #stage .scene, .hot { transition: none }
  .has3d .stage .gl, .wait3d .stage .view::after, .closeup[open] { animation: none }
  .hot .pip::after { animation: none; opacity: 0 }
}
/* related pages open the end of the page */
.el-main .related { margin: 0; padding: 56px var(--gut) 0; border-top: 0 }