/* *PIE — tokens first; type roles come from js/type.js (CSS variables --f-*, --w-*, --v-*, --s-*) */
:root {
  --yellow: #ffd21a;
  --yellow-deep: #f2b705;
  --ink: #0e0d0b;
  --paper: #efe7d6;
  --red: #f2471c;
  --blue: #2633c9;
  --moss: #2e5b3a;
  --chalk: #f6f1e4;
  --f-display: 'Archivo', system-ui, sans-serif; --w-display: 900; --v-display: 'wdth' 125; --s-display: normal;
  --f-pie: 'Archivo', system-ui, sans-serif; --w-pie: 800; --v-pie: normal; --s-pie: normal;
  --f-serif: 'Instrument Serif', Georgia, serif; --w-serif: 400; --v-serif: normal; --s-serif: italic;
  --f-book: 'Newsreader', Georgia, serif; --w-book: 500; --v-book: normal; --s-book: normal;
  --f-data: 'JetBrains Mono', ui-monospace, monospace; --w-data: 500; --v-data: normal; --s-data: normal;
  --f-accent: 'Basteleur', Georgia, serif; --w-accent: 700; --v-accent: normal; --s-accent: normal;
  --gut: clamp(16px, 3.2vw, 48px);
}
/* the site is its own palette in both modes; dark mode only deepens the paper */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #e6dcc6; } }
:root[data-theme="dark"] { --paper: #e6dcc6; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--yellow); color: var(--ink); overflow-x: hidden;
  font-family: var(--f-serif); font-size: clamp(17px, 1.25vw, 21px); line-height: 1.35; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--yellow); }

.display { font-family: var(--f-display); font-weight: var(--w-display); font-variation-settings: var(--v-display); font-style: var(--s-display); letter-spacing: -.02em; }
.pie { font-family: var(--f-pie); font-weight: var(--w-pie); font-variation-settings: var(--v-pie); font-style: var(--s-pie); }
.book { font-family: var(--f-book); font-weight: var(--w-book); font-variation-settings: var(--v-book); font-style: var(--s-book); }
.serif { font-family: var(--f-serif); font-weight: var(--w-serif); font-variation-settings: var(--v-serif); font-style: var(--s-serif); }
.data { font-family: var(--f-data); font-weight: var(--w-data); font-variation-settings: var(--v-data); letter-spacing: .02em; }
.accent { font-family: var(--f-accent); font-weight: var(--w-accent); font-variation-settings: var(--v-accent); }
.small { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.center { text-align: center; }
.w { white-space: nowrap; }
.lar { font-size: .52em; vertical-align: -.14em; line-height: 0; margin: 0 .02em; }
.mod { font-size: .58em; vertical-align: .7em; line-height: 0; margin: 0 .01em; }

.s { position: relative; padding: clamp(64px, 10vw, 160px) var(--gut); }
.yellow { background: var(--yellow); color: var(--ink); }
.ink { background: var(--ink); color: var(--chalk); }
.paper { background: var(--paper); color: var(--ink); }
.h2 { font-size: clamp(40px, 7.4vw, 132px); line-height: .88; margin: 0 0 .35em; text-wrap: balance; }
.h2 em { font-weight: 400; font-size: 1.05em; }


/* 0 · overture: an illuminated page */
#s-open { min-height: 100svh; position: relative; overflow: hidden; padding: 0; display: block; }
.hero-field { display: none; }
.hero-title { position: absolute; left: var(--gut); top: clamp(40px, 7vh, 90px); display: flex; align-items: stretch; gap: .8vw; z-index: 2; }
.hero-cap { flex: none; aspect-ratio: 1; }
.hero-cap initialis-cap, .hero-cap canvas { display: block; width: 100%; height: 100%; }
.open-h { margin: 0; font-family: var(--f-display); font-weight: var(--w-display); font-variation-settings: var(--v-display); font-size: clamp(42px, 7.6vw, 150px); line-height: .86; letter-spacing: -.035em; }
.open-h .line { display: block; width: fit-content; padding: .02em .32em .08em .22em; margin-bottom: 0; background-size: 100% 100%; background-repeat: no-repeat; }
.open-h .line:first-child { padding-left: .1em; }
.open-p { position: absolute; left: calc(var(--gut) + 1vw); z-index: 2; max-width: 58ch; margin: 0; padding: 1.2em 1.7em 1.3em 1.5em;
  font-size: clamp(16px, 1.3vw, 21px); line-height: 1.3; background-size: 100% 100%; background-repeat: no-repeat; }
.hero-herd { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(110px, 17vh, 190px); z-index: 1; pointer-events: none; }
@media (max-width: 820px) {
  .hero-title { flex-direction: column; } .hero-cap { width: 42vw; }
  .open-p { left: var(--gut); right: var(--gut); bottom: 120px; }
}

/* 1 · migration: an engraved plate */
#s-mig { padding: 0; }
.mig-pin { position: relative; height: 100svh; overflow: hidden; background: var(--paper); }
.plate { position: absolute; inset: 0; overflow: hidden; }
.plate-inner { position: absolute; left: 0; top: 0; width: calc(var(--pw) * 1px); height: calc(var(--ph) * 1px); transform-origin: 0 0; will-change: transform; }
.relief { position: absolute; inset: 0; background: #2a2219; -webkit-mask: url(../map/relief-l.webp) 0 0 / 100% 100% no-repeat luminance; mask: url(../map/relief-l.webp) 0 0 / 100% 100% no-repeat luminance; mask-mode: luminance; }
.plate svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plate .rg { font-family: var(--f-book); font-weight: 500; letter-spacing: .5em; fill: #2a2219; }
.plate .wt { font-family: var(--f-book); font-style: italic; letter-spacing: .12em; fill: #3c4a5e; }
.plate .home path { fill: url(#engr); stroke: #4a1309; stroke-width: 2; }
.plate .arw { display: none; }
.plate canvas.paint { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; }
.plate .end { opacity: 0; }
.plate .end circle { fill: #8e2a17; stroke: none; }
.plate .end .dot { fill: #2a2219; }
.plate .br { font-family: var(--f-book); font-weight: 600; letter-spacing: .3em; fill: #8e2a17; }
.plate .wit { font-family: var(--f-book); font-style: italic; fill: #2a2219; }
.mig-year { position: absolute; left: var(--gut); top: 54px; font-size: clamp(40px, 7vw, 120px); line-height: .85; color: #8e2a17; letter-spacing: -.03em; mix-blend-mode: multiply; }
.mig-copy { position: absolute; left: var(--gut); bottom: 6svh; width: min(38ch, 80vw); font-size: clamp(18px, 1.5vw, 24px); line-height: 1.25; }
.mig-p { position: absolute; bottom: 0; margin: 0; padding: .7em .9em; background: color-mix(in srgb, var(--paper) 88%, transparent); opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; }
.mig-p.on { opacity: 1; transform: none; }

/* 2 · wheel */
#s-wheel { padding: 0; }
.wheel-pin { height: 100svh; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: var(--gut); padding: 60px var(--gut) 24px; }
.wheel-copy .h2 { font-size: clamp(34px, 4.1vw, 76px); }
.wheel-copy p { max-width: 32ch; font-size: clamp(19px, 1.6vw, 26px); line-height: 1.2; }
.wheel { width: 100%; height: min(86svh, 100%); overflow: visible; }
.wheel text { fill: var(--ink); }
.wheel .w-center { font-family: var(--f-pie); font-weight: var(--w-pie); font-variation-settings: var(--v-pie); }
.wheel .w-mean { font-family: var(--f-serif); font-style: italic; }
.wheel .w-form { font-family: var(--f-pie); font-weight: var(--w-pie); font-variation-settings: var(--v-pie); }
.wheel .w-br { font-family: var(--f-data); text-transform: uppercase; letter-spacing: .14em; }

/* 3 · machine */
#s-machine { padding: clamp(28px, 4vw, 64px); }
.frame-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame-inset { position: relative; padding: clamp(36px, 6vw, 100px) clamp(20px, 5vw, 90px); }
.cascade { display: grid; gap: 0; margin: 2em auto; max-width: 1100px; }
.tier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: baseline; gap: var(--gut); border: 0; padding: .5em 0 .6em; }
.tier:last-child { border: 0; }
.tier .num { font-family: var(--f-display); font-weight: var(--w-display); font-variation-settings: var(--v-display); font-size: clamp(44px, 7vw, 120px); line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tier .lab { font-size: clamp(18px, 1.6vw, 26px); line-height: 1.15; }
.tier .lab b { display: block; font-family: var(--f-data); font-weight: 700; font-style: normal; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .4em; }
.note { max-width: 46ch; margin: 1em auto 0; font-size: clamp(18px, 1.5vw, 24px); }

/* 4 · results */
.res-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gut); align-items: end; }
.res-head p { margin: 0 0 1em; max-width: 36ch; font-size: clamp(18px, 1.5vw, 24px); }
.bars { margin-top: clamp(30px, 5vw, 70px); display: grid; gap: clamp(14px, 1.8vw, 26px); }
.bar { display: grid; grid-template-columns: minmax(140px, 18%) minmax(0, 1fr); gap: 16px; align-items: center; }
.bar .who { font-family: var(--f-data); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; line-height: 1.3; }
.bar.ours .who { color: var(--yellow); font-weight: 700; }
.bar .track { position: relative; height: clamp(34px, 4vw, 58px); }
.bar canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bar .nums { display: flex; align-items: baseline; gap: .5em; margin-top: 4px; }
.bar .nums .sv { font-family: var(--f-display); font-weight: var(--w-display); font-variation-settings: var(--v-display); font-size: clamp(22px, 2.4vw, 40px); text-transform: none; letter-spacing: -.02em; color: var(--chalk); }
.bar.ours .nums .sv { color: var(--yellow); }
.bar .nums .lv { font-size: 13px; opacity: .8; }
.bar .vals { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--f-display); font-weight: var(--w-display);
  font-variation-settings: var(--v-display); font-size: clamp(18px, 2.4vw, 40px); white-space: nowrap; color: var(--chalk); padding-left: 12px; }
.bar .vals small { font-family: var(--f-data); font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin: 0 .6em 0 .25em; }
.legend { display: flex; gap: 22px; margin-top: 18px; }
.legend i { display: inline-block; width: 26px; height: 12px; vertical-align: -1px; margin-right: 8px; }
.res-foot { margin-top: 30px; max-width: 90ch; opacity: .75; text-transform: none; letter-spacing: .02em; }

/* 5 · voice */
#s-voice { min-height: 100svh; }
.voice-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gut); align-items: end; }
.voice-top p { margin: 0 0 1em; font-size: clamp(18px, 1.5vw, 24px); max-width: 38ch; }
.voice-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 70px); align-items: center; margin-top: clamp(24px, 4vw, 60px); }
.disc { position: relative; width: clamp(200px, 26vw, 420px); aspect-ratio: 1; border-radius: 50%; border: 0; background: var(--ink); color: var(--yellow); cursor: pointer; padding: 0; }
.disc canvas { position: absolute; inset: -14%; width: 128%; height: 128%; pointer-events: none; }
.disc-label { position: relative; font-size: clamp(24px, 3vw, 48px); }
.hymn { font-family: var(--f-pie); font-weight: var(--w-pie); font-variation-settings: var(--v-pie); font-size: clamp(22px, 2.6vw, 46px); line-height: 1.12; }
.hymn .hl { display: block; }
.hymn .w { transition: color .15s, background .15s; padding: 0 .05em; }
.hymn .w.done { color: var(--ink); }
.hymn.playing .w { color: rgba(14, 13, 11, .28); }
.hymn.playing .w.done { color: var(--ink); }
.hymn .w.now { background: var(--ink); color: var(--yellow) !important; }
.voice-bar { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: center; margin-top: 30px; }
.voices { display: flex; border: 0; }
.voices button { background: none; border: 0; padding: 8px 14px; cursor: pointer; font-family: var(--f-data); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.voices button.on { background: var(--ink); color: var(--yellow); }
.ipa { font-size: clamp(16px, 1.6vw, 24px); }
.hymn-en { max-width: 60ch; font-size: clamp(19px, 1.6vw, 26px); margin-top: 18px; min-height: 2.6em; }

/* 6 · specimens: manuscript leaves */
#s-spec { padding: 0; }
.spec-pin { height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; gap: 2vh; }
.spec-h { padding: 0 var(--gut); margin: 0; }
.spec-track { display: flex; gap: clamp(18px, 2.4vw, 36px); padding: 0 var(--gut); width: max-content; }
.leaf { position: relative; flex: 0 0 auto; height: min(76svh, 820px); aspect-ratio: 1 / 1.3; color: var(--lf-ink); background: var(--lf-paper);
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 24px 40px -28px rgba(30,20,10,.45); }
.leaf .leaf-garden { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.leaf .rh { position: absolute; left: 31.25%; right: 7.5%; top: 6.4%; padding-bottom: 6px; border: 0; display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--f-data); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--lf-ink); }
.leaf .txt { position: absolute; left: 31.25%; right: 7.5%; top: 11.5%; bottom: 10.6%; display: flex; flex-direction: column; }
.leaf .ini { --lines: 3; display: block; }
/* every illuminated initial is placed by its coloured square, which sits --cap-pad inside the image on every side
   (js/initials.js CAP); the horse band round it hangs outside. A drop cap (.leaf .ini, .v-cap) is --lines deep: the
   square's top on the first line's capitals, its foot on the last line's baseline. */
:root { --cap-pad: .14; }
.leaf .ini, .v-cap { --capH: .66em; --h: calc((var(--lines) - 1) * 1lh + var(--capH)); --s: calc(var(--h) / (1 - 2 * var(--cap-pad)));
  float: left; width: var(--s); height: var(--s);
  margin: calc((1lh - 1em) / 2 + .25em - var(--s) * var(--cap-pad)) .45em calc(var(--s) * var(--cap-pad) * -1) calc(var(--s) * var(--cap-pad) * -1); }
/* the header's P: its square spans the title (js/main.js sets --hs, the image size, and --hm, the negative margin) */
html .hero-title .hero-cap { width: var(--hs) !important; height: var(--hs) !important; margin: var(--hm) !important; }
.leaf .ini initialis-cap { display: block; width: 100%; height: 100%; }
.leaf .p { font-family: var(--f-book); font-weight: var(--w-book); font-variation-settings: var(--v-book); font-size: clamp(17px, 2.9svh, 28px); line-height: 1.28;
  margin: 0; text-align: left; text-wrap: pretty; color: var(--lf-ink); }
.leaf .e { font-family: var(--f-serif); font-style: italic; font-size: clamp(13px, 1.75svh, 18px); line-height: 1.3; margin: .8em 0 0;
  border: 0; color: color-mix(in srgb, var(--lf-ink) 85%, #000); }
.leaf .fo { font-family: var(--f-data); }

/* 7 · apps */
.apps-p { max-width: 52ch; font-size: clamp(18px, 1.5vw, 24px); margin: 0 0 2em; }
.tr { max-width: 1200px; }
.tr textarea { width: 100%; background: transparent; color: var(--chalk); border: 0; border: 0; font-size: clamp(24px, 3vw, 48px); line-height: 1.1; padding: 8px 0; resize: none; outline: none; }
.tr-out { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 26px; min-height: 130px; }
.tr-out .tw { display: flex; flex-direction: column; gap: 4px; }
.tr-out .tw .f { font-family: var(--f-pie); font-weight: var(--w-pie); font-variation-settings: var(--v-pie); font-size: clamp(28px, 3.6vw, 60px); color: var(--yellow); line-height: 1; }
.tr-out .tw .gl { font-family: var(--f-data); font-size: 11px; letter-spacing: .06em; opacity: .8; }
.tr-out .ipa { width: 100%; font-family: var(--f-data); font-size: 15px; opacity: .8; }
.tr-out .err { font-family: var(--f-data); font-size: 13px; color: var(--red); }
.apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(50px, 7vw, 110px); border: 0; }
.app { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 26px 0; color: inherit; text-decoration: none; border: 0; }
.app + .app { padding-left: 22px; }
.app:last-child { border-right: 0; }
.app .display { font-size: clamp(30px, 3.6vw, 64px); line-height: .9; color: var(--yellow); }
.app .serif { font-size: clamp(17px, 1.3vw, 22px); }
.app .small { margin-top: auto; opacity: .7; }

/* footer */
.foot { padding-bottom: 40px; }
.foot-pie { font-size: clamp(50px, 11vw, 210px); line-height: .9; letter-spacing: -.02em; }
.foot p { max-width: 60ch; }

#typeflash { position: fixed; z-index: 60; right: 16px; bottom: 16px; padding: 8px 12px; background: var(--ink); color: var(--yellow);
  font: 600 12px/1 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; opacity: 0; pointer-events: none; }
#typeflash.on { animation: flash 1.6s ease forwards; }
@keyframes flash { 10%, 70% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 820px) {
  #s-open { grid-template-columns: 1fr; }
  .open-p, .open-pie { grid-column: 1; grid-row: auto; }
  .star { right: -30vw; top: 12vh; width: 120vw; height: 120vw; opacity: .9; }
  .wheel-pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding-top: 48px; }
  .wheel-copy .h2 { font-size: clamp(34px, 4.1vw, 76px); }
.wheel-copy p { font-size: 17px; }
  .res-head, .voice-top { grid-template-columns: 1fr; }
  .voice-stage { grid-template-columns: 1fr; justify-items: center; }
  .bar { grid-template-columns: 1fr; gap: 6px; }
  .apps { grid-template-columns: 1fr; }
  .app { border-right: 0; border: 0; padding-left: 0 !important; }
  .frame-inset { margin: 18px; }
  .tier { grid-template-columns: 1fr; gap: 4px; }
  .mig-copy { bottom: 4svh; }
}
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* one paper tooth over everything: fine noise and a faint weave, multiplied */
/* the paper texture lives on the map plate only, and moves with it */
.plate-inner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--tooth); background-size: 96px 96px; mix-blend-mode: multiply; opacity: .5; }
.cap { font-size: clamp(14px, 1.05vw, 17px); font-style: italic; text-transform: none; letter-spacing: 0; opacity: .85; max-width: 60ch; }
.voices { border: 0; display: inline-flex; gap: .4em; align-items: baseline; font-size: clamp(17px, 1.3vw, 21px); }
.voices button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-style: italic; text-transform: none; letter-spacing: 0; color: inherit; }
.voices button.on { background: none; color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.leaf .p { color: #1d1a16 !important; }
.leaf .ps { display: inline; }
.leaf .pe { display: block; font-family: var(--f-serif); font-style: italic; font-size: .62em; line-height: 1.25; color: color-mix(in srgb, var(--lf-ink) 80%, #000); margin: .15em 0 .55em; }

/* labels over imagery sit on solid yellow */
.mig-p { background-color: transparent !important; padding: 1.1em 1.6em 1.2em 1.4em !important; }
.mig-year { left: auto !important; right: var(--gut); padding: .12em .5em .16em .4em; mix-blend-mode: normal; }
.brushed { padding: .1em .45em .14em .35em; }

/* no rules or outlines anywhere */
.tier, .tier:last-child, .apps, .app, .leaf .rh, .leaf .e, .voices, .tr textarea { border: 0 !important; }
.tr textarea { background: color-mix(in srgb, var(--chalk) 8%, transparent); padding: 10px 14px; }
/* the title as a staircase */
.open-h .line:nth-child(2) { margin-left: .55em; }
.open-h .line:nth-child(3) { margin-left: 1.1em; }

/* steppe gardens behind sections (tools/build_section_gardens.mjs) */
.garden { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: 0 0 / 100% 100% no-repeat; opacity: 0; transition: opacity 1.2s ease; }
.garden.on { opacity: 1; }
#s-open > *:not(.garden), #s-wheel .wheel-pin > *:not(.garden), #s-machine > *:not(.garden), #s-voice > *:not(.garden), #s-apps > *:not(.garden), footer > *:not(.garden) { position: relative; z-index: 1; }
#s-open > .hero-title, #s-open > .open-p, #s-open > .hero-herd { position: absolute; }
.wheel-pin, #s-machine, #s-voice, #s-apps, footer { position: relative; }

/* wheel: centred in its screen, the copy brought in from the edge */
.wheel-pin { padding: 40px 6vw 40px 9vw !important; align-items: center; }
.wheel { height: min(82svh, 100%) !important; }
.wheel-copy p { max-width: 34ch; }
.wheel .w-br { fill: #8e2a17 !important; }

/* method: numbers and their words on one line, the numbers set right against them */
.tier { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) !important; align-items: center !important; padding: 1.1em 0 !important; }
.tier .num { text-align: right; padding-right: .3em; font-variant-numeric: tabular-nums lining-nums; }
.tier .lab b { display: block; font-size: clamp(22px, 2vw, 32px); letter-spacing: -.01em; text-transform: none; margin-bottom: .2em; }
.tier .lab span { display: block; font-size: clamp(17px, 1.35vw, 22px); line-height: 1.3; max-width: 40ch; }
.cascade { gap: .4em !important; }

/* hymn: one centred column */
#s-voice > .voice-top, #s-voice > .voice-stage, #s-voice > .voice-bar, #s-voice > .hymn-en { max-width: 1240px; margin-left: auto; margin-right: auto; }

/* translator */
.tr { max-width: 1100px; }
.tr-dir { font-size: clamp(17px, 1.3vw, 21px); margin-bottom: .6em; }
.tr-dir button, .tr-ex button { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-style: italic; cursor: pointer; opacity: .65; }
.tr-dir button.on { opacity: 1; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.tr-ex { margin: .7em 0 0; font-size: clamp(15px, 1.1vw, 18px); opacity: .85; }
.tr-ex button { opacity: 1; text-decoration: underline; text-decoration-color: rgba(246,241,228,.35); text-underline-offset: .2em; }
.tr-ex button:hover { color: var(--yellow); }
.tr-out { display: block !important; margin-top: 2em; min-height: 220px; transition: opacity .3s; }
.tr-out.busy { opacity: .55; }
.tr-line { font-size: clamp(30px, 3.8vw, 64px); line-height: 1.08; color: var(--yellow); }
.tr-line.serif { font-style: italic; color: var(--chalk); }
.tr-words { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 1.1em; }
.tr-words .tw .f { font-size: clamp(20px, 1.8vw, 30px) !important; color: var(--chalk) !important; }
.tr-ipa { font-family: var(--f-data); font-size: 15px; opacity: .75; margin-top: 1.2em; }

/* footer */
footer.foot { padding: 14vh var(--gut) 0; min-height: 92svh; overflow: hidden; }
.foot-pie { font-size: clamp(64px, 12vw, 240px); line-height: .9; letter-spacing: -.03em; width: fit-content; padding: .05em .25em .12em .15em; }
.foot-en { font-size: clamp(20px, 1.9vw, 30px); line-height: 1.25; max-width: 38ch; margin: .8em 0 0; padding: .7em 1.1em; }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 36ch)); gap: 3vw; margin-top: 8vh; font-size: 15px; line-height: 1.4; opacity: .85; }
.foot-herd { display: block; width: 100%; height: clamp(110px, 16vh, 180px); margin-top: 6vh; }
.tier .lab b { font-family: var(--f-display) !important; font-weight: var(--w-display); font-variation-settings: var(--v-display); }

.tw.sub .f { text-decoration: underline wavy color-mix(in srgb, var(--yellow) 70%, transparent); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.tw .was { font-family: var(--f-serif); font-style: italic; font-size: 14px; color: var(--yellow); }
.tw.st-inferred .gl::after { content: " · inferred"; opacity: .6; }
.tw.st-coined .gl::after { content: " · coined"; opacity: .6; }
.tr-notes { margin-top: 1.1em; max-width: 60ch; font-size: clamp(16px, 1.2vw, 19px); font-style: italic; color: color-mix(in srgb, var(--chalk) 80%, transparent); }

/* manuscript sections: a garden margin of 27% on one side, the content in the rest */
:root { --col: 27vw; }
.ms-left { padding-left: calc(var(--col) + 2vw) !important; padding-right: var(--gut) !important; }
.ms-right { padding-right: calc(var(--col) + 2vw) !important; padding-left: var(--gut) !important; }
.garden { background-size: 100% 100% !important; }
#s-wheel .wheel-pin.ms-left { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding-top: 6vh !important; padding-bottom: 6vh !important; }
#s-machine.ms-right .frame-inset { padding: 0; margin: 0; }
#s-machine .h2.center, #s-machine .note.center { text-align: left; margin-left: 0; }
#s-machine .cascade { margin: 1.5em 0; max-width: none; }
#s-voice.ms-left > * { max-width: none !important; margin-left: 0 !important; }
footer.ms-left .foot-herd { display: none; }

.foot-by { font-size: clamp(20px, 1.7vw, 28px); margin: 6vh 0 0; }
.foot-by a, .foot-cols a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.foot-cols { margin-top: 3vh !important; }
footer.foot { min-height: 80svh; padding-bottom: 10vh; }

.plate .end circle { transform-box: fill-box; transform-origin: center; }
/* captions and the year brush in from the left */
.mig-p { clip-path: inset(0 100% 0 0); opacity: 1 !important; transform: none !important; transition: clip-path .7s cubic-bezier(.6, 0, .2, 1) !important; }
.mig-p.on { clip-path: inset(0 0 0 0); }

/* the watercolour variant (?map=wc): a wash under the engraving */
.wash { position: absolute; inset: 0; background: url(../map/wash.webp) 0 0 / 100% 100% no-repeat; display: none; }
.map-wc .wash { display: block; }
.map-wc .relief { background: #241c14; opacity: .85; }

/* gardens grow in when discovered, from their roots up, and reach a little past their section */
.garden { inset: -4% -1% -2% -1% !important; opacity: 1 !important;
  -webkit-mask: linear-gradient(to top, #000 0%, #000 55%, transparent 75%) bottom / 100% 0% no-repeat; mask: linear-gradient(to top, #000 0%, #000 55%, transparent 75%) bottom / 100% 0% no-repeat;
  transition: -webkit-mask-size 3.2s cubic-bezier(.3, .1, .2, 1), mask-size 3.2s cubic-bezier(.3, .1, .2, 1); }
.garden.on { -webkit-mask-size: 100% 190%; mask-size: 100% 190%; }
.g-left { left: -1.5% !important; right: auto !important; width: calc(100% + 3%); }
#s-open, #s-wheel, #s-machine, #s-voice, #s-apps, footer { overflow: visible; }
#s-open { overflow: hidden; }
section, footer { isolation: isolate; }

/* the translator, more present */
.tr-box { display: flex; gap: 14px; align-items: stretch; }
.tr-box textarea { flex: 1; background: rgba(246,241,228,.08) !important; border-radius: 2px; padding: 16px 18px !important; caret-color: var(--yellow); }
.tr-box textarea:focus { background: rgba(246,241,228,.13) !important; }
.tr-go { flex: none; background: var(--yellow); color: var(--ink); border: 0; padding: 0 1.2em; font-size: clamp(18px, 1.6vw, 26px); cursor: pointer; }
.tr-go:hover { background: #ffe066; }
.tr-line { font-size: clamp(36px, 5vw, 84px) !important; }
#s-apps .h2 { font-size: clamp(40px, 6vw, 110px); }

/* first paint: the header waits for its art, then arrives in order */
html.arriving #s-open > * { opacity: 0; }
html.arrived .hero-cap { animation: arrive 1.4s cubic-bezier(.2, .7, .2, 1) both; }
html.arrived .open-h .line { animation: arrive 1.1s cubic-bezier(.2, .7, .2, 1) both; }
html.arrived .open-h .line:nth-child(2) { animation-delay: .12s; } html.arrived .open-h .line:nth-child(3) { animation-delay: .24s; }
html.arrived .open-p { animation: arrive 1.2s .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
/* the leaves' gardens grow in as each leaf comes into view */
.leaf .leaf-garden { background: var(--lf-paper); }
.leaf { background: var(--lf-paper); }

footer.foot { padding-left: 26vw !important; padding-right: 26vw !important; text-align: center; }
footer .foot-pie { margin: 0 auto; }
footer .foot-en, footer .foot-by { margin-left: auto; margin-right: auto; }
footer .foot-cols { justify-content: center; text-align: left; }

.leaf .txt { overflow-x: visible; overflow-y: clip; z-index: 2; }   /* the initial's horses may hang over the left edge */
footer .foot-pie { font-size: clamp(56px, 8.5vw, 170px); }

/* growth: the frames stack; each fades in over the one before */
.garden { -webkit-mask: none !important; mask: none !important; background: none !important; }
.garden .gf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; transition: opacity .9s ease; }
.garden .gf.on { opacity: 1; }
.g-right .gf { }
/* first paint: yellow, then the P and the title together */
html.arriving body { background: var(--yellow); }

.garden .gv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }

.leaf .lis { margin: .7em 0 0; font-size: clamp(13px, 1.6svh, 16px); font-style: italic; }
.leaf .lis button { background: none; border: 0; padding: 0; font: inherit; color: var(--lf-ink); cursor: pointer; opacity: .6; }
.leaf .lis button.on, .leaf .lis .play { opacity: 1; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.leaf.reading .pt .w { transition: color .15s; }
.leaf .pt .w.now { color: var(--lf-accent); }
/* selection visible on every ground */
#s-apps ::selection, #s-results ::selection { background: var(--yellow); color: var(--ink); }

/* the garden layers stay on their own compositing layer: no wobble while the page scrolls */
.garden, .garden .gv, .leaf .leaf-garden { will-change: transform; transform: translateZ(0); backface-visibility: hidden; }

/* hymn: an interlinear text, the line being sung lit, its English beneath */
.hymn .hline { margin: 0 0 .55em; opacity: .5; transition: opacity .4s; }
.hymn .hline.now, .hymn:not(.playing) .hline { opacity: 1; }
.hymn .hen { display: block; font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: .52em; line-height: 1.25; margin-top: .15em; color: #3a2e18; }
.hymn .hline.now .hen { color: var(--ink); }
.hymn.playing .w { color: inherit; } .hymn .w.now { background: var(--ink); color: var(--yellow) !important; }
.hymn { font-size: clamp(22px, 2.3vw, 40px) !important; }
/* wheel navigation */
.wheel-nav { display: flex; flex-wrap: wrap; gap: .35em .9em; align-items: baseline; margin-top: 1.4em; font-size: clamp(16px, 1.3vw, 21px); }
.wheel-nav button { background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; font: inherit; opacity: .55; }
.wheel-nav .wn-w { font-family: var(--f-book); }
.wheel-nav .on { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; }
.wheel-nav .wn-prev, .wheel-nav .wn-next { opacity: 1; font-size: 1.8em; line-height: .6; padding: 0 .1em; }
#s-wheel .wheel-pin { height: auto; min-height: 100svh; }

/* ===================================================================================================== phones */
html, body { overflow-x: clip; }
@media (max-width: 700px) {
  :root { --gut: 18px; }
  .garden { inset: 0 !important; }
  .ms-left, .ms-right { padding-left: var(--gut) !important; padding-right: var(--gut) !important; }
  .s { padding-top: 72px; padding-bottom: 72px; }
  .h2 { font-size: clamp(38px, 12vw, 64px); }

  /* header: the initial and the staircase title, the paragraph beneath, the garden round them */
  #s-open { min-height: 100svh; }
  .hero-title { left: var(--gut); right: var(--gut); top: 56px; flex-direction: row; align-items: stretch; gap: 8px; }
  .open-h { font-size: clamp(34px, 12.4vw, 60px); }
  .open-h .line:nth-child(2) { margin-left: .35em; } .open-h .line:nth-child(3) { margin-left: .7em; }
  .open-p { left: var(--gut) !important; right: var(--gut); max-width: none; padding: 0; font-size: 16px; line-height: 1.38; }

  /* map */
  .mig-year { font-size: 40px; top: 46px; right: 12px !important; }
  .mig-copy { left: 12px; right: 12px; width: auto; bottom: 22px; }
  .mig-p { font-size: 15px; padding: .9em 1.2em 1em 1.1em !important; }

  /* wheel: the words first, the wheel full width beneath */
  .wheel-pin, #s-wheel .wheel-pin.ms-left { grid-template-columns: 1fr !important; grid-template-rows: auto auto; padding: 64px var(--gut) 40px !important; gap: 10px; }
  .wheel-copy p { max-width: none; font-size: 16px; }
  .wheel { width: 100%; height: auto !important; aspect-ratio: 1; }
  .wheel-nav { font-size: 16px; gap: .3em .8em; }

  /* method */
  .tier { grid-template-columns: 1fr !important; gap: 4px !important; padding: .8em 0 !important; }
  .tier .num { text-align: left; font-size: 54px; padding: 0; }
  .tier .lab span { font-size: 16px; }

  /* results */
  .res-head { grid-template-columns: 1fr; }
  .bar { grid-template-columns: 1fr; gap: 6px; }
  .bar .track { height: 30px; }

  /* hymn */
  .voice-top { grid-template-columns: 1fr; }
  .voice-top p { font-size: 16px; }
  .voice-stage { grid-template-columns: 1fr; justify-items: center; gap: 28px; }
  .disc { width: 58vw; }
  .hymn { font-size: 22px !important; justify-self: stretch; }
  .voice-bar { gap: 12px 24px; }

  /* leaves: one to a screen, sliding sideways */
  .spec-pin { gap: 12px; }
  .spec-h { font-size: 40px; }
  .spec-track { gap: 14px; padding: 0 var(--gut); }
  .leaf { height: auto; width: 84vw; aspect-ratio: 1 / 1.3; }
  .leaf .rh { font-size: 9px; }
  .leaf .lis { font-size: 13px; }

  /* translator */
  .apps-p { font-size: 16px; }
  .tr-box { flex-direction: column; gap: 10px; }
  .tr-box textarea { font-size: 22px !important; min-height: 96px; }
  .tr-go { height: 52px; font-size: 20px; }
  .tr-line { font-size: 32px !important; }
  .tr-ex { font-size: 14px; line-height: 1.6; }

  /* room at the foot of each section for its garden to grow */
  #s-wheel .wheel-pin.ms-left { padding-bottom: 34vh !important; }
  #s-machine, #s-voice, #s-apps { padding-bottom: 36vh !important; }
  #s-open .open-p { }

  /* footer */
  footer.foot { padding: 80px var(--gut) 40vh !important; }
  footer .foot-pie { font-size: 15vw; }
  .foot-cols { grid-template-columns: 1fr !important; gap: 12px; }
}
@media (max-width: 700px) {
  /* the P above the title, so "European" has the full width */
  .hero-title { flex-direction: column; gap: 14px; top: 46px; }
  .hero-cap { width: 34vw !important; height: 34vw !important; }
  .open-h { font-size: clamp(40px, 14.5vw, 64px); }
  /* leaves: full width, the text larger, the margin narrower */
  .leaf { width: calc(100vw - 2 * var(--gut)); aspect-ratio: auto; height: auto; min-height: 76svh; }
  .leaf .rh { left: 26%; right: 6%; }
  .leaf .txt { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 0 6% 0 26%; padding: 15% 0 18%; }
  .leaf .p { font-size: 17px !important; line-height: 1.3; }
  .leaf .e { font-size: 14px; }
  .leaf .leaf-garden { object-fit: cover; object-position: left top; }
  .spec-pin { height: auto; min-height: 100svh; }
}
@media (max-width: 700px) {
  .open-h { font-size: clamp(36px, 12.6vw, 56px); }
  .open-h .line:nth-child(3) { margin-left: .5em; }
  /* a leaf: its garden as a band across the top, the text on clean paper beneath */
  .leaf { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .leaf .leaf-garden { position: relative; inset: auto; width: 100%; height: 46vw; object-fit: cover; object-position: 0% 18%; }
  .leaf .rh { position: relative; left: auto; right: auto; top: auto; margin: 12px 6% 0; }
  .leaf .txt { margin: 0 6%; padding: 8px 0 22px; }
}
@media (max-width: 700px) {
  /* leaves stack down the page, each a full page with its garden at its side, the text beside it */
  .spec-pin { height: auto !important; min-height: 0; overflow: visible; display: block; padding: 72px 0 40px; }
  .spec-track { display: flex; flex-direction: column; width: auto; gap: 22px; transform: none !important; }
  .leaf { width: auto; display: block; min-height: 0; aspect-ratio: auto; }
  .leaf .leaf-garden { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
  .leaf .rh { position: relative; margin: 0; padding: 16px 6% 6px 30%; }
  .leaf .txt { position: relative; margin: 0; padding: 4px 6% 26px 30%; }
}

@media (max-width: 700px) {
  /* the header: the P beside "roto-" and "Indo-", "European" below across the width */
  .hero-title { display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; }
  .hero-cap { grid-row: 1; grid-column: 1; width: 30vw !important; height: 30vw !important; }
  .open-h { display: contents; }
  .open-h .line:nth-child(1), .open-h .line:nth-child(2) { grid-column: 2; align-self: start; font-family: var(--f-display); font-weight: var(--w-display); font-variation-settings: var(--v-display); font-size: clamp(40px, 13.5vw, 60px); line-height: .9; letter-spacing: -.035em; margin: 0; }
  .open-h .line:nth-child(1) { grid-row: 1; align-self: start; } .open-h .line:nth-child(2) { grid-row: 1; align-self: end; margin-left: .3em; }
  .open-h .line:nth-child(3) { grid-row: 2; grid-column: 1 / -1; font-family: var(--f-display); font-weight: var(--w-display); font-variation-settings: var(--v-display); font-size: clamp(44px, 15vw, 66px); line-height: .9; letter-spacing: -.035em; margin: 0 0 0 .2em; }
  .mig-pin, .plate { background: var(--paper); }
}

@media (max-width: 700px) {
  .plate .br { font-size: 64px; } .plate .wit { font-size: 40px; }
  .plate .rg { font-size: 1.6em; }
}

.g-sentinel { position: absolute; left: 0; right: 0; bottom: 18vh; height: 1px; pointer-events: none; }
/* leaf listen bar on a brush stroke */
.leaf .lis { display: inline-block; padding: .35em 1.2em .45em .8em; background-size: 100% 100%; background-repeat: no-repeat; color: var(--ink); }
.leaf .lis button { color: var(--ink) !important; }
/* translator words: a tidy grid */
.tr-words { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, max-content)); gap: 10px 26px !important; justify-content: start; }
.tr-words .tw { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 700px) {
  .tr-words { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px !important; }
  .tr-words .tw .f { font-size: 20px !important; }
  /* hymn: voice and pronunciation right under the play disc */
  #s-voice .voice-stage { display: flex; flex-direction: column; align-items: center; }
  #s-voice .voice-bar { order: 0; justify-content: center; margin-top: 14px; }
  #s-voice .disc { order: -2; } #s-voice .voice-bar { order: -1; } #s-voice .hymn { order: 1; margin-top: 18px; }
  /* leaf: text clear of the plants (a paper wash under it) */
}

@media (max-width: 700px) { #s-voice { padding-bottom: 50vh !important; } .garden { z-index: 0; } #s-voice .hymn { position: relative; z-index: 2; } }

/* the credit line on a red paint stroke, like the yellow ones */
.foot-by { display: inline-block; padding: .45em 1.4em .55em 1.1em; background: var(--streak) 0 0 / 100% 100% no-repeat; color: #fff4dc; }
.foot-by a { color: #fff4dc !important; text-decoration-color: rgba(255, 244, 220, .6); }

/* phones: the header starts below the navigation stroke */
@media (max-width: 700px) { .hero-title { top: 84px !important; } }

/* phones: the map as few, small layers. The wash and the relief come baked into one flat image (map/plate-m.webp,
   tools/build_map_phone.mjs) instead of a background under a luminance-masked layer; no paper-tooth or multiply blends
   (each forces another plate-sized surface); the plate is not pinned to its own layer. js/map.js paints it smaller. */
@media (max-width: 899px) {
  html.map-wc .wash { display: block; background-image: url(../map/plate-m.webp); }
  .relief { display: none; }
  .plate-inner { will-change: auto; }
  .plate-inner::after { display: none; }
  .plate canvas.paint { mix-blend-mode: normal; }
}

/* phones: gardens are not each pinned to a GPU layer (each is a section-sized surface at the screen's pixel density),
   and the arrival has no blur filter (a full-screen blur is the costliest first frame) */
@media (max-width: 899px) {
  .garden, .garden .gv, .leaf .leaf-garden { will-change: auto; transform: none; backface-visibility: visible; }
  @keyframes arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* the wheel can be grabbed and spun */
#wheel.grabbable { cursor: grab; user-select: none; -webkit-user-select: none; }
#wheel.grabbable.grabbing { cursor: grabbing; }