/* Pontil & Pistil */

@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-latin-wght-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../fonts/instrument-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Spline Sans Mono'; src: url('../fonts/spline-sans-mono-latin-wght-normal.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }

/* Three worlds, one specimen. Each is a full palette, not a tint. */
:root,
:root[data-world="living"] {
  --bg: #0a0807;
  --bg-raise: #120e0b;
  --ink: #f2e7d7;
  --mute: #ad9c89;
  --line: rgba(255, 170, 84, .34);
  --line-soft: rgba(255, 170, 84, .16);
  --accent: #ff9b3d;
  --accent-ink: #1a0d02;
  --scan: #ffb25e;
  color-scheme: dark;
}
:root[data-world="scan"] {
  --bg: #071a3d;
  --bg-raise: #0b2250;
  --ink: #e8f1ff;
  --mute: #a3b8da;
  --line: rgba(166, 208, 255, .38);
  --line-soft: rgba(166, 208, 255, .17);
  --accent: #6ff2d0;
  --accent-ink: #032019;
  --scan: #7cf5da;
}
:root[data-world="glass"] {
  --bg: #07191c;
  --bg-raise: #0b2226;
  --ink: #e4f4f2;
  --mute: #9bbab7;
  --line: rgba(142, 232, 242, .36);
  --line-soft: rgba(142, 232, 242, .16);
  --accent: #8ee8f2;
  --accent-ink: #02161a;
  --scan: #8ee8f2;
}

:root {
  --display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --gut: clamp(1.1rem, 4.2vw, 3.2rem);
  --head: 3.6rem;
  --cut: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.62 var(--sans); text-rendering: optimizeLegibility;
  transition: background-color .7s ease, color .7s ease;
}
html { transition: background-color .7s ease; }
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--line); text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.skip { position: absolute; left: var(--gut); top: -4rem; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: .7rem 1rem; font: 600 .85rem var(--mono); }
.skip:focus { top: .8rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 360; letter-spacing: -.018em; line-height: 1.04; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.45rem, 1.1rem + 6.4vw, 6rem); }
h2 { font-size: clamp(1.85rem, 1rem + 3.3vw, 3.5rem); }
h3 { font-size: clamp(1.25rem, 1rem + .9vw, 1.65rem); line-height: 1.2; letter-spacing: -.01em; font-weight: 420; }
em, .latin { font-style: italic; font-family: var(--display); }
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }

.mono, .eyebrow {
  font: 500 .72rem/1.35 var(--mono); letter-spacing: .13em; text-transform: uppercase;
}
.eyebrow { color: var(--accent); margin: 0 0 1.1rem; max-width: none; }
.mute { color: var(--mute); }

/* ---------------- header ---------------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--head);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--gut);
  background: linear-gradient(to bottom, var(--bg) 70%, color-mix(in srgb, var(--bg) 0%, transparent));
  border-bottom: 1px solid transparent;
}
.brand { font: 440 1.18rem/1 var(--display); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.brand i { font-style: italic; color: var(--accent); padding: 0 .08em; }
.nav { display: none; gap: 1.8rem; }
.nav a { font: 500 .72rem var(--mono); letter-spacing: .13em; text-transform: uppercase; text-decoration: none; color: var(--mute); padding: .5rem 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { box-shadow: 0 1px 0 var(--accent); }
.top .enquire { font: 600 .72rem var(--mono); letter-spacing: .13em; text-transform: uppercase; text-decoration: none; color: var(--accent); padding: .8rem 0; }

.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; font: 500 .72rem var(--mono); letter-spacing: .13em; text-transform: uppercase; padding: .85rem 0; color: var(--mute); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { color: var(--ink); }
.menu nav { position: absolute; right: 0; top: 100%; min-width: 14rem; background: var(--bg-raise); border: 1px solid var(--line); padding: .6rem 1.1rem; display: grid; }
.menu nav a { font: 500 .78rem var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: .85rem 0; border-bottom: 1px solid var(--line-soft); }
.menu nav a:last-child { border: 0; }
@media (min-width: 860px) { .nav { display: flex; } .menu { display: none; } }

/* ---------------- cut-corner HUD frame ---------------- */
.frame {
  position: relative;
  background: color-mix(in srgb, var(--bg-raise) 72%, transparent);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: inset 0 0 0 1px var(--line);
}
.frame::before, .frame::after { content: ''; position: absolute; width: var(--cut); height: var(--cut); pointer-events: none; }
.frame::before { left: 0; top: 0; background: linear-gradient(to bottom right, var(--bg) calc(50% - .5px), var(--line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); }
.frame::after { right: 0; bottom: 0; background: linear-gradient(to bottom right, transparent calc(50% - .5px), var(--line) calc(50% - .5px) calc(50% + .5px), var(--bg) calc(50% + .5px)); }

/* ---------------- hero ---------------- */
.hero { position: relative; height: 330svh; }
.hero--still { height: auto; }
.pin { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; }
.hero--still .pin { position: relative; height: auto; min-height: 0; overflow: visible; padding: calc(var(--head) + 1.5rem) 0 2rem; }

.specimen {
  position: absolute; margin: 0; aspect-ratio: 4 / 3;
  width: 108vw; left: -4vw; top: calc(var(--head) + 1.2rem);
}
.specimen__poster, .specimen__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.specimen__poster { object-fit: cover; }
.specimen__canvas { opacity: 0; transition: opacity .5s ease; pointer-events: none; touch-action: pan-y; }
.is-live .specimen__canvas { opacity: 1; }
.is-live .specimen__poster { opacity: 0; transition: opacity .5s .2s ease; }

.leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.leaders line, .leaders polyline { fill: none; stroke: var(--ink); stroke-opacity: .62; stroke-width: 1; vector-effect: non-scaling-stroke; }
.leaders circle { fill: var(--accent); }
.leaders .ring { fill: none; stroke: var(--accent); stroke-opacity: .75; stroke-width: 1; vector-effect: non-scaling-stroke; }

.callouts { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.callout { position: absolute; left: calc(var(--lx) * 1%); top: calc(var(--ly) * 1%); transform: translate(var(--tx, 0), -50%); font: 500 .64rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); white-space: nowrap; text-shadow: 0 0 3px var(--bg), 0 0 7px var(--bg), 0 0 12px var(--bg); }
.callout .n { color: var(--accent); margin-right: .45em; }
.callout .sub { display: none; color: color-mix(in srgb, var(--ink) 80%, var(--bg)); text-transform: none; letter-spacing: .02em; font-weight: 400; font-size: .72rem; margin-top: .2em; }
.callout[data-side="r"] { --tx: -100%; text-align: right; }

.hero__copy { position: absolute; left: var(--gut); right: var(--gut); top: calc(var(--head) + 1.2rem + 84vw); }
.hero__copy h1 { max-width: 14ch; }
.eyebrow .more-eyebrow { display: none; }
@media (min-width: 560px) { .eyebrow .more-eyebrow { display: inline; } }
.hero__copy h1 em { color: var(--accent); }
.lede { margin: 1.1rem 0 0; color: var(--mute); font-size: 1rem; max-width: 40ch; }
.lede b { color: var(--ink); font-weight: 500; }
.state-line { margin: 1.1rem 0 0; color: var(--accent); max-width: none; min-height: 2.7em; }
.state-line span { display: block; }

.tag { position: absolute; display: none; padding: .8rem 1.1rem .9rem 1.2rem; }
.tag { grid-template-columns: auto auto; gap: .35rem 1.4rem; margin: 0; }
.tag div { display: contents; }
.tag dt { color: var(--mute); }
.tag dd { margin: 0; color: var(--ink); }
.scale-rule { position: absolute; display: none; align-items: center; gap: .7rem; color: var(--mute); }
.scale-rule i { display: block; width: calc(var(--spec, 40rem) * .0638); height: 7px; border: 1px solid var(--ink); border-top: 0; opacity: .7; }

.switch { position: absolute; z-index: 5; left: var(--gut); right: var(--gut); bottom: max(1rem, env(safe-area-inset-bottom)); margin: 0; border: 0; padding: 0; min-width: 0; }
.switch legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.switch__row { display: grid; grid-template-columns: repeat(3, 1fr); padding: 1px; }
.switch label:first-child { clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--cut) - 1px)); }
.switch label:last-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%); }
.switch label { position: relative; display: grid; place-items: center; min-height: 48px; font: 600 .74rem var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--mute); cursor: pointer; transition: color .3s; }
.switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.switch label:has(input:checked) { color: var(--accent-ink); background: var(--accent); }
.switch label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: -4px; }
.switch label span::before { content: attr(data-n); margin-right: .55em; opacity: .55; }
.no-gl .switch { display: none; }

.tilt-btn { position: absolute; z-index: 5; right: var(--gut); bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 54px); display: none; font: 600 .68rem var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--line); padding: .85rem 1rem; min-height: 44px; cursor: pointer; }
.tilt-btn[data-show] { display: block; }

.cue { position: absolute; left: var(--gut); bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 62px); color: var(--mute); display: flex; align-items: center; gap: .7rem; }
.cue::before { content: ''; width: 1px; height: 1.6rem; background: var(--line); }

/* short portrait phones (iPhone SE class): tighter stack so the copy clears the switch */
@media (max-width: 899px) and (max-height: 720px) and (orientation: portrait) {
  .specimen { width: 88vw; left: 6vw; top: calc(var(--head) + .6rem); }
  .hero__copy { top: calc(var(--head) + .6rem + 66vw + .5rem); }
  .hero__copy .eyebrow { margin-bottom: .5rem; }
  .hero__copy h1 { font-size: clamp(1.85rem, .9rem + 4.4vw, 2.2rem); }
  .hero__copy .lede { font-size: .88rem; line-height: 1.42; margin-top: .55rem; }
  .hero__copy .state-line { margin-top: .55rem; min-height: 0; }
  .cue { display: none; }
}

@media (min-width: 900px) {
  :root { --spec: min(63vw, 114svh); }
  .specimen { width: min(63vw, 114svh); left: auto; right: -3vw; top: 50%; translate: 0 -47%; }
  .callout { font-size: .72rem; }
  .callout .sub { display: block; }
  .hero__copy { left: var(--gut); right: auto; top: auto; bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 6.2rem); width: min(31vw, 30rem); }
  .hero__copy h1 { font-size: clamp(2.6rem, 3.3vw + 1rem, 4.6rem); max-width: 11ch; }
  .switch { left: auto; right: var(--gut); width: 25rem; bottom: max(1.4rem, env(safe-area-inset-bottom)); }
  .tag { display: grid; left: var(--gut); top: calc(var(--head) + 1.2rem); }
  .scale-rule { display: flex; right: var(--gut); top: calc(var(--head) + 1.4rem); }
  .cue { display: flex; left: auto; right: calc(var(--gut) + 26.5rem); bottom: 2.1rem; }
  .tilt-btn { display: none !important; }
}

/* callout slots: percentages of the specimen box. Phone and desktop differ because
   the box itself is cropped differently. */
.callout:nth-child(1) { --lx: 9; --ly: 8; }       /* tepal */
.callout:nth-child(2) { --lx: 52; --ly: 3; }       /* stigma */
.callout:nth-child(3) { --lx: 71; --ly: 12; }      /* anther */
.callout:nth-child(4) { --lx: 6; --ly: 90; }       /* filament */
.callout:nth-child(5) { --lx: 64; --ly: 79; }      /* style */
.callout:nth-child(6) { --lx: 64; --ly: 93; }      /* ovary */
@media (min-width: 900px) {
  .callout:nth-child(1) { --lx: 3; --ly: 11; }
  .callout:nth-child(2) { --lx: 63; --ly: 5; }
  .callout:nth-child(3) { --lx: 80; --ly: 14; }
  .callout:nth-child(4) { --lx: 3; --ly: 86; }
  .callout:nth-child(5) { --lx: 63; --ly: 79; }
  .callout:nth-child(6) { --lx: 64; --ly: 94; }
}

/* ---------------- sections ---------------- */
main { display: block; }
.wrap { padding: 0 var(--gut); max-width: 88rem; margin: 0 auto; }
.sec { position: relative; overflow: hidden; padding: clamp(4.5rem, 10vw, 9rem) 0; border-top: 1px solid var(--line-soft); }
.sec > .wrap { position: relative; z-index: 1; }
.sec__head { display: grid; gap: 1.2rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
.sec__head .eyebrow { margin: 0; }
.sec__head p { color: var(--mute); }
@media (min-width: 900px) {
  .sec__head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; gap: 4rem; }
  .sec__head--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .sec__head--flip > div { order: 2; }
  .sec__head--flip > p { order: 1; max-width: 46ch; }
}

/* the legend */
.legend { list-style: none; margin: 0; padding: 0; display: grid; }
.legend li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .2rem 1rem; padding: 1.4rem 0; border-top: 1px solid var(--line-soft); }
.legend li:last-child { border-bottom: 1px solid var(--line-soft); }
.legend .n { color: var(--accent); padding-top: .35rem; }
.legend h3 { grid-column: 2; }
.legend p { grid-column: 2; margin: .3rem 0 0; color: var(--mute); }
.legend p b { color: var(--ink); font-weight: 500; }
@media (min-width: 900px) {
  .legend li { grid-template-columns: 3rem minmax(0, 4fr) minmax(0, 7fr); align-items: baseline; padding: 1.7rem 0; }
  .legend h3, .legend p { grid-column: auto; }
  .legend p { margin: 0; }
}

/* the bench: a real timeline */
.bench { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
.bench li { position: relative; padding: 0 0 2.4rem 2.2rem; border-left: 1px solid var(--line); margin-left: .4rem; }
.bench li::before { content: ''; position: absolute; left: -5px; top: .5rem; width: 9px; height: 9px; background: var(--bg); border: 1px solid var(--accent); transform: rotate(45deg); }
.bench li:last-child { padding-bottom: 0; border-left-color: transparent; }
.bench time { display: block; color: var(--accent); margin-bottom: .55rem; }
.bench h3 { margin-bottom: .5rem; }
.bench p { color: var(--mute); margin: 0; }
@media (min-width: 900px) {
  .bench { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.6rem; }
  .bench li { border-left: 0; margin: 0; padding: 2.4rem 0 0; border-top: 1px solid var(--line); }
  .bench li::before { left: 0; top: -5px; }
  .bench li:last-child { border-top-color: var(--line); }
}

/* the cabinet */
.table-frame { padding: 1.2rem 1.2rem .6rem; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 38rem; }
caption { text-align: left; color: var(--mute); padding: 0 0 1rem; caption-side: top; }
th, td { text-align: left; padding: .9rem 1rem .9rem 0; border-top: 1px solid var(--line-soft); vertical-align: baseline; }
thead th { font: 500 .68rem var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--mute); border-top: 0; padding-top: 0; }
tbody th { font-weight: 500; font-family: var(--mono); font-size: .8rem; color: var(--accent); letter-spacing: .08em; }
td.latin { font-size: 1.12rem; }
td small { display: block; color: var(--mute); font-size: .82rem; }
.num { font-variant-numeric: tabular-nums; }

/* questions */
.qa { display: grid; gap: 0; }
.qa article { padding: 1.9rem 0; border-top: 1px solid var(--line-soft); display: grid; gap: .8rem; }
.qa article:last-child { border-bottom: 1px solid var(--line-soft); }
.qa p { margin: 0; color: var(--mute); }
.qa p b { color: var(--ink); font-weight: 500; }
@media (min-width: 900px) { .qa article { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; padding: 2.4rem 0; } }

/* prose pages */
.page { padding-top: calc(var(--head) + clamp(2.5rem, 7vw, 6rem)); }
.page__head { padding-bottom: clamp(2.5rem, 6vw, 5rem); display: grid; gap: 1.4rem; }
.page__head h1 { font-size: clamp(2.3rem, 1rem + 5vw, 5rem); max-width: 17ch; }
.page__head .lede { max-width: 52ch; font-size: 1.12rem; }
.crumbs { color: var(--mute); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.prose { display: grid; gap: 0; }
.prose > section { padding: 2.4rem 0 2.6rem; border-top: 1px solid var(--line-soft); display: grid; gap: 1rem; }
.prose h2 { font-size: clamp(1.55rem, 1rem + 1.8vw, 2.45rem); max-width: 24ch; }
.prose p { color: color-mix(in srgb, var(--ink) 82%, var(--bg)); }
.prose p.answer { color: var(--ink); font-size: 1.14rem; }
.prose .cols { display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .prose > section { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-auto-rows: min-content; gap: 0 4rem; padding: 3.2rem 0 3.4rem; }
  .prose > section > :not(h2) { margin-bottom: 1.1rem; }
  .prose > section > h2 { grid-column: 1; grid-row: 1 / span 8; position: sticky; top: 6rem; align-self: start; }
  .prose > section > :not(h2) { grid-column: 2; }
}
.sources { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.sources li { padding-left: 1rem; border-left: 1px solid var(--line); color: var(--mute); }
.sources a { color: var(--ink); }
.stamp { color: var(--mute); }

.fig { margin: 0; }
.fig-stage { position: relative; aspect-ratio: 4 / 3; }
.fig-stage .specimen { position: absolute; inset: 0; width: 100%; left: 0; top: 0; translate: none; aspect-ratio: 4 / 3; }
.fig-switch { position: relative; margin-top: 1rem; left: auto; right: auto; bottom: auto; width: 100%; }
.page .fig { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 900px) { .fig-switch { width: 25rem; } }

/* enquiry */
.enq { display: grid; gap: 2rem; align-items: end; }
.enq h2 { max-width: 16ch; }
.enq .frame { padding: 1.6rem 1.5rem 1.8rem; }
.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 1.5rem; background: var(--accent); color: var(--accent-ink); font: 600 .78rem var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.btn:hover { filter: brightness(1.1); }
@media (min-width: 900px) { .enq { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4rem; } }

.foot { border-top: 1px solid var(--line-soft); padding: 3rem 0 4.2rem; color: var(--mute); }
.foot .wrap { display: grid; gap: 2rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.foot nav a { text-decoration: none; padding: .55rem 0; }
.foot nav a:hover { color: var(--ink); }
@media (min-width: 900px) { .foot .wrap { grid-template-columns: 1fr auto; align-items: end; } .foot { padding-bottom: 3rem; } }

.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero { height: 100svh; min-height: 560px; }
  .cue { display: none; }
}

.tight { margin: 0; }
.stamp { color: var(--mute); max-width: none; margin: 0; }
.figcap { margin: 1rem 0 0; max-width: none; }
.fig-stage { width: min(100%, calc(78svh * 1.3333)); margin-inline: auto; }
.legend.plain li { grid-template-columns: 3.4rem 1fr; }
@media (min-width: 900px) { .legend.plain li { grid-template-columns: 4rem minmax(0, 4fr) minmax(0, 7fr); } }
.prose .legend { margin-top: .5rem; }
.fig .switch.fig-switch { max-width: 25rem; margin-inline: auto; }
@media (min-width: 900px) { .fig .switch.fig-switch { margin: 1.2rem 0 0; margin-left: calc(50% - min(50%, 78svh * .6667)); } }

.more { margin-top: .9em; }
.after-table { margin-top: 1.6rem; }

/* 44px floor for everything tappable that is not already larger */
.top .enquire, .menu summary, .nav a { display: inline-flex; align-items: center; min-height: 44px; }
.menu nav a { min-height: 44px; display: flex; align-items: center; }
.foot nav a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a { display: inline-block; padding: .5rem 0; }
.sources a, .prose p a, .legend a, .sec__head a, .after-table a, .qa a { padding: .2rem 0; }

/* the stage itself changes with the world, not just the palette */
.specimen::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .7s ease; }
:root[data-world="scan"] .specimen::before {
  opacity: 1;
  background:
    linear-gradient(to right, transparent calc(50% - .5px), var(--line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), var(--line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    repeating-linear-gradient(to right, var(--line-soft) 0 1px, transparent 1px 8.333%),
    repeating-linear-gradient(to bottom, var(--line-soft) 0 1px, transparent 1px 11.111%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 78%); mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 78%);
}
:root[data-world="glass"] .specimen::before {
  opacity: 1;
  background:
    radial-gradient(ellipse 60% 54% at 50% 50%, rgba(170, 238, 248, .62), rgba(110, 200, 214, .24) 46%, rgba(142, 232, 242, .06) 70%, transparent 82%),
    repeating-linear-gradient(to bottom, rgba(210, 250, 255, .16) 0 1px, transparent 1px 5.5%);
}

/* The same photograph, cropped differently behind each section. It follows the world:
   orange when living, mint when scanned, amber against the glass-world ground. */
.bg-lily, .page-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('../img/lily-1600.webp') no-repeat; opacity: .34;
  transition: filter .7s ease, opacity .7s ease;
}
:root[data-world="scan"] .bg-lily, :root[data-world="scan"] .page-bg { filter: grayscale(1) sepia(1) hue-rotate(125deg) saturate(2.4) brightness(1.05); opacity: .4; }
:root[data-world="glass"] .bg-lily, :root[data-world="glass"] .page-bg { filter: saturate(.85) brightness(1) contrast(1.05); opacity: .4; }
.bg-lily--a { background-size: 135% auto; background-position: 100% 36%; -webkit-mask-image: linear-gradient(to left, #000 8%, rgba(0,0,0,.55) 38%, transparent 78%); mask-image: linear-gradient(to left, #000 8%, rgba(0,0,0,.55) 38%, transparent 78%); }
.bg-lily--b { background-size: 130% auto; background-position: 0% 62%; -webkit-mask-image: linear-gradient(to right, #000 6%, rgba(0,0,0,.5) 40%, transparent 80%); mask-image: linear-gradient(to right, #000 6%, rgba(0,0,0,.5) 40%, transparent 80%); }
.bg-lily--c { background-size: 125% auto; background-position: 50% 100%; -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 45%, transparent 85%); mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.5) 45%, transparent 85%); }
.bg-lily--d { background-size: 130% auto; background-position: 100% 0%; -webkit-mask-image: linear-gradient(to left, #000 4%, rgba(0,0,0,.45) 36%, transparent 74%); mask-image: linear-gradient(to left, #000 4%, rgba(0,0,0,.45) 36%, transparent 74%); }
.bg-lily--e { background-size: 115% auto; background-position: 100% 55%; -webkit-mask-image: linear-gradient(to left, #000 6%, rgba(0,0,0,.5) 40%, transparent 78%); mask-image: linear-gradient(to left, #000 6%, rgba(0,0,0,.5) 40%, transparent 78%); }
.page { position: relative; }
.page > .wrap { position: relative; z-index: 1; }
.page-bg { inset: 0 0 auto 0; height: min(84vh, 56rem); background-size: 100% auto; background-position: 100% 18%; opacity: .5;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%), linear-gradient(to left, #000 10%, transparent 80%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 30%, transparent 100%), linear-gradient(to left, #000 10%, transparent 80%); mask-composite: intersect; }
.page-bg--history { background-position: 100% 30%; background-size: 96% auto; }
.page-bg--cabinet { background-position: 100% 60%; background-size: 108% auto; }
@media (max-width: 899px) {
  .bg-lily { opacity: .3; background-size: 230% auto; }
  .page-bg { background-size: 190% auto; background-position: 70% 0%; opacity: .36; height: 52vh; }
  .bg-lily--a { background-position: 62% 40%; } .bg-lily--c { background-position: 50% 100%; }
}
@media (prefers-reduced-motion: reduce) { .bg-lily, .page-bg { transition: none; } }

.states { margin: clamp(2.5rem, 6vw, 5rem) 0 0; }
.states__row { display: grid; gap: 1rem; }
.states img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-raise); }
.states p { margin: .6rem 0 0; color: var(--mute); max-width: none; }
.states figcaption { margin-top: 1.1rem; max-width: 60ch; }
@media (min-width: 760px) { .states__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; } }