/* A museum's drawer of cards, laid out on a dark or pale bench: one row you swipe, and a key below that says what goes on which card. */
.fg {
  --bench: #eceee6; --ink: #1c211b; --quiet: #5c6558; --line: #c9cdbf; --chip: #dfe2d6; --chip-on: #24402f; --chip-on-ink: #f2f4ea;
  --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
.fg { background: var(--bench); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: normal; }
.page { padding-block: 28px 56px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); max-width: 1180px; margin: 0 auto; display: grid; gap: 22px; }
.fg h1 { font: 500 clamp(34px, 7vw, 52px)/1.04 'Bodoni Moda', Georgia, serif; margin: 0; text-wrap: balance; }
.lede { margin: 8px 0 0; color: var(--quiet); font-size: 16px; line-height: 1.5; max-width: 62ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { font: 500 14px var(--sans); border: 0; padding: 9px 14px; border-radius: 99px; background: var(--chip); color: var(--ink); cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); }
.chips button:focus-visible, .deck:focus-visible, .arrows button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.deckrow { position: relative; min-width: 0; }
.deck { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
.item { flex: none; width: min(320px, 82vw); scroll-snap-align: start; display: grid; gap: 10px; align-content: start; }
.flip { position: relative; perspective: 1400px; cursor: pointer; }
.flip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 20px; }
.flipin { position: relative; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, .1, .2, 1); }
.flip[data-on="1"] .flipin { transform: rotateY(180deg); }
.flipin .fgc { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flipin .back { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; transform: rotateY(180deg); }
.turn { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font: 500 16px var(--sans); color: #fff; background: rgba(0, 0, 0, .55); }
@media (prefers-reduced-motion: reduce) { .flipin { transition: none; } }
.cap b { display: block; font: 600 15px var(--sans); }
.cap span { display: block; color: var(--quiet); font-size: 13.5px; line-height: 1.4; margin-top: 2px; }
.arrows { display: flex; gap: 8px; justify-content: flex-end; }
.arrows button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; }
.fg h2 { font: 500 26px/1.15 'Bodoni Moda', Georgia, serif; margin: 0 0 10px; }
.key { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 28px; }
.key > div { min-width: 0; }
.fg table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.fg th, .fg td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.fg th { font: 500 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--quiet); }
.note { color: var(--quiet); font-size: 14.5px; line-height: 1.55; margin: 0 0 10px; max-width: 62ch; }
.feed { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 12px; }
.feed i { font: 500 12px var(--mono); font-style: normal; padding: 5px 8px; border-radius: 6px; background: var(--chip); }

/* The data side: the same colours and display face as its front, and the numbers set in one mono grid so they can be compared. */
.fgc.back { background: var(--b); color: var(--t); padding: 16px 18px 0; display: flex; flex-direction: column; gap: 7px; font-family: var(--sans); overflow: hidden auto; scrollbar-width: none; }
.fgc.back::-webkit-scrollbar { display: none; }
.back h4 { margin: 0; font: var(--h); line-height: 1; }
.back .sci { font: italic 400 13px Georgia, serif; opacity: .85; margin-top: 3px; }
.back dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.back dl > div { padding: 3px 0; border-top: 1px solid var(--r); min-width: 0; }
.back dt { font: 500 9.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; opacity: .72; }
.back dd { margin: 0; font: 500 12px/1.2 var(--mono); }
.back .notes { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.fgc.back canvas.ill, .fgc.back canvas.sil { position: static; z-index: auto; flex: none; display: block; }
.fgc.back canvas.ill { inset: auto; }
.fgc.back canvas.ill { width: 100%; height: 72px; margin: 4px 0 2px; }
.fgc.back canvas.sil { width: calc(100% + 36px); height: auto; aspect-ratio: 320 / var(--sh); margin: 2px -18px 3px; }
.fgm { position: sticky; bottom: 0; flex: none; height: 50px; margin: 0 -18px; background: linear-gradient(transparent, var(--b) 58%); pointer-events: none; }
.fgm::after { content: "More \2193"; position: absolute; left: 18px; bottom: 6px; font: 500 9.5px var(--mono); letter-spacing: .05em; opacity: .75; transition: opacity .15s; }
.fgc.back.end .fgm::after { opacity: 0; }
.back .src { margin: 4px 0 0; font: 400 10px/1.35 var(--sans); opacity: .62; }
.back .notes li { font: 400 12px/1.3 var(--sans); padding-left: 12px; position: relative; }
.back .notes li::before { content: ""; position: absolute; left: 0; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--a); }

/* The cards. Each is its own printed object with its own colours, the same in light and dark. */
.fgc { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 20px; color: #fff; isolation: isolate; }
.fgc canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; }
.slotmark { position: absolute; top: 14px; right: 14px; font: 500 10.5px var(--mono); letter-spacing: .03em; padding: 4px 7px; border-radius: 5px; background: rgba(0, 0, 0, .42); color: #fff; }
.tax { font: 500 10.5px/1.45 var(--mono); letter-spacing: .02em; }

.portrait { background: #2c3a48; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; gap: 6px; }
.portrait::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(8, 13, 20, .9)); z-index: -1; }
.portrait h3 { font: 500 58px/.94 'Bodoni Moda', Georgia, serif; margin: 0; }
.portrait em { font: italic 400 18px 'Bodoni Moda', Georgia, serif; }
.portrait p { font: 400 14.5px/1.42 var(--sans); margin: 6px 0 8px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid rgba(255, 255, 255, .35); padding-top: 9px; }
.stats b { display: block; font: 500 16px var(--mono); }
.stats span { font-size: 11px; opacity: .8; }

.journey { background: #0d3350; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; }
.journey h3 { font: 900 56px/.9 'Big Shoulders Display', Impact, sans-serif; text-transform: uppercase; margin: 0; color: #ffe08a; }
.journey .big { font: 700 40px/1 'Big Shoulders Display', Impact, sans-serif; margin-top: 10px; }
.journey p { font: 400 14px/1.42 var(--sans); margin: 8px 0 0; }

.specimen { background: #f3efe2; color: #2a2620; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.specimen h3 { font: 500 38px/1 'Cormorant Garamond', Georgia, serif; margin: 0; }
.specimen em { font: italic 500 18px 'Cormorant Garamond', Georgia, serif; }
.tag { background: #fffdf4; border: 1px solid #b9ae93; padding: 10px 12px; font: 400 12px/1.45 var(--mono); }
.leader { position: absolute; font: 500 10.5px var(--mono); color: #4a4234; max-width: 104px; line-height: 1.3; }

.deep { background: #020a18; padding: 20px 20px 20px 64px; display: flex; flex-direction: column; justify-content: flex-end; }
.deep h3 { font: 600 44px/.96 'Archivo Narrow', sans-serif; margin: 0; }
.deep em { font: italic 400 15px Georgia, serif; color: #a9c5e0; }
.deep p { font: 400 14px/1.42 var(--sans); margin: 8px 0 0; color: #dce8f4; }
.gauge { position: absolute; left: 16px; top: 18px; bottom: 18px; width: 40px; border-left: 2px solid rgba(160, 200, 240, .55); }
.gauge span { position: absolute; left: 6px; font: 500 9.5px var(--mono); color: #a9c5e0; transform: translateY(-50%); white-space: nowrap; }
.gauge i { position: absolute; left: -7px; width: 12px; height: 12px; border-radius: 50%; background: #ffcf6b; transform: translateY(-50%); box-shadow: 0 0 12px #ffcf6b; }

.scale { background: #e9c98a; color: #231b0f; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.scale h3 { font: 400 52px/.98 Anton, Impact, sans-serif; text-transform: uppercase; margin: 0; }
.scale p { font: 400 14px/1.42 var(--sans); margin: 8px 0 0; }

.botanical { background: #f6f1dc; color: #2d3a22; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.botanical h3 { font: 400 40px/1 'IM Fell English', Georgia, serif; margin: 0; }
.botanical em { font: italic 400 18px 'IM Fell English', Georgia, serif; }
.botanical p { font: 400 17px/1.32 'IM Fell English', Georgia, serif; margin: 0; }
.fig { position: absolute; font: italic 400 13.5px 'IM Fell English', Georgia, serif; color: #3f4f30; max-width: 110px; line-height: 1.15; }

.rings { background: #2b1b10; color: #f4e6cf; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; }
.rings h3 { font: 700 34px/1.06 'Libre Baskerville', Georgia, serif; margin: 0; }
.rings em { font: italic 400 14px 'Libre Baskerville', Georgia, serif; opacity: .85; }
.rings ol { list-style: none; margin: 10px 0 0; padding: 0; font: 400 12px/1.6 var(--mono); }
.rings ol b { color: #ffc978; font-weight: 500; }

.bloom { background: #7a0f2e; color: #ffe9d6; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.bloom h3 { font: 400 62px/.9 'Abril Fatface', Georgia, serif; margin: 0; }
.bloom p { font: 400 14.5px/1.42 var(--sans); margin: 0 0 12px; }
.years { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.years i { aspect-ratio: 1; border-radius: 50%; border: 1px solid #ffd2b3; }
.years i.on { background: #ffd24a; border-color: #ffd24a; }

.cutaway { background: #dff3f4; color: #09333b; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.cutaway h3 { font: 600 44px/.96 'Barlow Condensed', sans-serif; text-transform: uppercase; margin: 0; }
.cutaway p { font: 400 14px/1.42 var(--sans); margin: 0; }
.part { position: absolute; font: 600 14px/1.1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .03em; }

.element { background: #111; color: #f7e9b0; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.element .sym { font: 400 128px/.9 'Archivo Black', sans-serif; letter-spacing: -.03em; }
.element .num { font: 500 18px var(--mono); }
.element h3 { font: 400 28px/1 'Archivo Black', sans-serif; margin: 2px 0 0; color: #fff; }
.element dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font: 400 12.5px var(--mono); margin: 0; }
.element dt { opacity: .7; }
.element dd { margin: 0; text-align: right; color: #fff; }

.equation { background: #1e1b6b; color: #fff; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.equation .eq { font: italic 500 60px/1 'STIX Two Text', Georgia, serif; text-align: center; margin-top: 34px; white-space: nowrap; }
.equation h3 { font: 500 25px/1.15 'STIX Two Text', Georgia, serif; margin: 0; }
.equation p { font: 400 14px/1.42 var(--sans); margin: 8px 0 0; }
.eyebrow { font: 500 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) { .deck { scroll-behavior: smooth; } }
/* Finished cards: the real photograph on the front, and everything you can touch on the back. */
.deck { padding-inline: calc(50% - min(170px, 43vw)); gap: 20px; }
.item { width: min(340px, 86vw); scroll-snap-align: center; }
.fgc .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: -2; background: #222; }
.fgc canvas.front { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; z-index: -1; }
.scrim { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none; }

/* Look closer: the words step aside and numbered marks appear on the photograph. */
.lk { position: absolute; top: 12px; right: 12px; z-index: 3; font: 500 11px var(--mono); letter-spacing: .02em; color: #fff; background: rgba(0, 0, 0, .55); border: 0; border-radius: 99px; padding: 7px 11px; cursor: pointer; }
.lk:focus-visible, .spot:focus-visible, .gobtn:focus-visible, .flap:focus-visible, .vid:focus-visible, .fgl a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.words { display: contents; }
.fgc > .fade { transition: opacity .25s; }
.fgc.closer > .fade { opacity: 0; pointer-events: none; }
.spot { position: absolute; z-index: 2; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .5); color: #fff; font: 500 12px var(--mono); padding: 0; cursor: pointer; display: none; box-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.fgc.closer .spot { display: block; }
.spot[aria-pressed="true"] { background: #ffd24a; color: #111; border-color: #ffd24a; }
.say { position: absolute; left: 12px; right: 48px; bottom: 12px; z-index: 2; display: none; color: #fff; background: rgba(0, 0, 0, .74); border-radius: 12px; padding: 10px 12px; font: 400 13.5px/1.35 var(--sans); }
.fgc.closer .say { display: block; }

/* The back, section by section. */
.back h5 { margin: 6px 0 0; font: 500 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .72; }
.fgc.back canvas.gl { position: static; z-index: auto; display: block; flex: none; width: 150px; height: 150px; touch-action: pan-y; cursor: grab; }
.fgc.back canvas.gl:active { cursor: grabbing; }
.where { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; }
.where p { margin: 3px 0 0; font: 400 12px/1.32 var(--sans); }
.where small { display: block; font: 400 10px/1.3 var(--mono); opacity: .72; margin-top: 5px; }
.year { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.4em; gap: 8px; align-items: center; font: 500 11px var(--mono); }
.year input { width: 100%; accent-color: var(--a); touch-action: pan-y; margin: 0; }
.gobtn { font: 500 11px var(--mono); background: var(--a); color: var(--b); border: 0; border-radius: 99px; padding: 5px 10px; cursor: pointer; }
.ladder { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ladder i { font: 500 10px/1 var(--mono); font-style: normal; text-align: center; padding: 6px 0; border: 1px solid var(--r); opacity: .55; }
.ladder i.on { background: var(--a); color: var(--b); border-color: var(--a); opacity: 1; }
.ltxt { font: 400 11px/1.3 var(--sans); margin: 3px 0 0; }

/* A routed park sign, the one thing every card has in common. */
.plaque { --w: #43301f; --c: #f3e7c9; position: relative; background: var(--w); color: var(--c); border-radius: 6px; padding: 13px 15px 12px; box-shadow: inset 0 0 0 1.5px rgba(243, 231, 201, .55), inset 0 0 0 4px var(--w), inset 0 0 0 5px rgba(243, 231, 201, .22); }
.plaque::before, .plaque::after { content: ""; position: absolute; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: rgba(243, 231, 201, .7); }
.plaque::before { left: 8px; } .plaque::after { right: 8px; }
.plaque b { display: block; font: 700 15.5px/1.2 'Libre Baskerville', Georgia, serif; letter-spacing: .005em; }
.plaque p { margin: 7px 0 0; font: 400 12.5px/1.42 Georgia, serif; }
.flap { display: block; width: 100%; text-align: left; margin-top: 9px; padding: 8px 10px; background: rgba(243, 231, 201, .14); color: inherit; border: 1px dashed rgba(243, 231, 201, .55); border-radius: 4px; font: 500 11px var(--mono); cursor: pointer; }
.flap[aria-expanded="true"] { display: none; }
.plaque .ans[hidden] { display: none; }
.plaque .here { font: 500 10px/1.35 var(--mono); opacity: .85; border-top: 1px solid rgba(243, 231, 201, .3); padding-top: 7px; margin-top: 9px; }

.vid { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; flex: none; border: 0; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: #000 center / cover no-repeat; color: #fff; text-decoration: none; text-align: left; }
.vid::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0, 0, 0, .82)); }
.vid .tri { position: absolute; left: 50%; top: 42%; width: 50px; height: 50px; margin: -25px; border-radius: 50%; background: rgba(0, 0, 0, .62); border: 1.5px solid #fff; }
.vid .tri::after { content: ""; position: absolute; left: 19px; top: 14px; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.vid .vt { position: absolute; left: 10px; right: 10px; bottom: 8px; font: 500 12.5px/1.25 var(--sans); }
.vid .vt span { display: block; font: 400 10.5px var(--mono); opacity: .85; margin-top: 2px; }

/* Playing happens on a layer above the card, so a video never sits inside the turning card. */
.vlayer { position: absolute; inset: 0; z-index: 8; background: #000; border-radius: 20px; overflow: hidden; display: grid; align-content: center; }
.vlayer iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.vlayer button { position: absolute; top: 10px; right: 10px; font: 500 12px var(--mono); color: #fff; background: rgba(255, 255, 255, .16); border: 0; border-radius: 99px; padding: 8px 12px; cursor: pointer; }
.vlayer p { position: absolute; left: 14px; right: 14px; bottom: 12px; margin: 0; color: #cfcfcf; font: 400 11.5px/1.35 var(--sans); }
.vlayer a { color: #fff; }

.tree { margin: 2px 0 0; padding: 0; list-style: none; font: 400 11.5px/1.25 var(--mono); }
.tree li { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); padding: 2.5px 0; border-top: 1px solid var(--r); }
.tree li span { opacity: .68; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; padding-top: 1px; }
.tree li:last-child { font-style: italic; font-weight: 500; }
.names { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin: 2px 0 0; }
.names div { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); padding: 3px 0; border-top: 1px solid var(--r); font: 400 12px/1.25 var(--sans); }
.names dt { font: 500 10px var(--mono); opacity: .68; padding-top: 1px; }
.names dd { margin: 0; overflow-wrap: break-word; font-size: 11.5px; min-width: 0; }
.fgl { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.fgl a { font: 500 11px var(--mono); color: var(--t); text-decoration: none; border: 1px solid var(--r); border-radius: 99px; padding: 6px 9px; }
.fgc.back .src a { color: inherit; }

/* Where each part comes from. */
.lineage { max-width: 760px; }

/* Only one side of a card exists at a time, swapped at the moment the card is edge-on. Some browsers let a turned side show through otherwise. */
.flipin .fgc { transition: visibility 0s .27s; }
.flipin .fgc.back { visibility: hidden; }
.flip[data-on="1"] .flipin .fgc.back { visibility: visible; }
.flip[data-on="1"] .flipin .fgc:not(.back) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .flipin .fgc { transition: none; } }

/* Each template with a real photograph in it. */
.pw { position: absolute; inset: 0; overflow: hidden; }
.pw .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.turn { pointer-events: auto; border: 0; padding: 0; cursor: pointer; z-index: 4; }
.turn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fgc h3, .fgc em, .fgc p, .fgc .tax, .fgc .stats, .fgc .big, .fgc .tag, .fgc ol, .fgc .years, .fgc .gauge { position: relative; }
.fgc.portrait::after { z-index: 0; pointer-events: none; }
.fgc.portrait > :not(.pw):not(.lk):not(.say) { z-index: 1; }

.journey::after { content: ""; position: absolute; inset: 46% 0 0; background: linear-gradient(transparent, rgba(6, 24, 40, .94)); pointer-events: none; }
.journey > :not(.pw):not(.lk):not(.say) { z-index: 1; }
.journey .tax { color: #ffe08a; }

.deep .pw { inset: 0 0 auto 0; height: 46%; }
.deep .pw::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, #020a18); pointer-events: none; }
.deep .gauge { position: absolute; z-index: 1; }
.deep .gauge span { text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }

.scale { justify-content: flex-start; padding-top: calc(64% + 12px); }
.scale .pw { inset: 0 0 auto 0; height: 36%; }
.scale h3 { font-size: 39px; line-height: 1; margin-top: 2px; }
.scale .ruled { flex: 1 1 auto; min-height: 0; }
.scale p { margin: 0; font-size: 13.5px; }

.fgc.specimen > canvas { z-index: -3; }
.specimen h3, .botanical h3 { padding-right: 88px; }
.bloom .tax { padding-right: 92px; }
.fgc.closer::after, .fgc.closer::before { opacity: 0; }
.fgc::after, .fgc::before { transition: opacity .25s; }
.specimen .pw { inset: 21% 0 auto 0; height: auto; aspect-ratio: 800 / 518; overflow: visible; }
.specimen .pw .ph { position: absolute; mix-blend-mode: multiply; }
.fgc.botanical.round .pw, .fgc.round .pw { inset: 25% 10% auto; aspect-ratio: 1; border-radius: 50%; overflow: visible; }
.fgc.round .pw .ph { border-radius: 50%; mix-blend-mode: normal; box-shadow: 0 0 0 5px #fffdf4, 0 0 0 6.5px rgba(70, 55, 25, .55), 0 10px 24px rgba(40, 30, 10, .28); }
.specimen .tag { position: relative; }
.fgc.specimen.round .x { position: absolute; top: 15.5%; right: 18px; font: 500 12px var(--mono); color: #4a4234; }

.botanical .pw { inset: 25% 7% auto; aspect-ratio: 4 / 3; border-radius: 140px 140px 8px 8px; overflow: hidden; box-shadow: 0 0 0 1px rgba(63, 79, 48, .5), 0 0 0 6px #f6f1dc, 0 0 0 7px rgba(63, 79, 48, .4); }
.botanical.round .pw { overflow: visible; box-shadow: none; }
.botanical p { font-size: 16px; line-height: 1.3; }

.rings { justify-content: flex-end; }
.rings .pw { inset: 0 0 auto 0; height: 54%; }
.rings .pw::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, var(--rb, #2b1b10)); pointer-events: none; }
.fgc canvas.disc { inset: auto; right: 14px; top: calc(54% - 66px); width: 118px; height: 118px; z-index: 1; border-radius: 50%; box-shadow: 0 4px 16px rgba(0, 0, 0, .45); }
.rings h3 { font-size: 30px; }

.bloom::before { content: ""; position: absolute; inset: 0 0 58%; z-index: 0; pointer-events: none; background: linear-gradient(#7a0f2e, rgba(122, 15, 46, .7) 55%, transparent); }
.bloom::after { content: ""; position: absolute; inset: 58% 0 0; z-index: 0; pointer-events: none; background: linear-gradient(transparent, rgba(88, 9, 31, .94) 42%); }
.bloom > :not(.pw):not(.lk):not(.say) { z-index: 1; }
.bloom .years { margin-top: 2px; }
.bloom .yr { display: block; font: 500 10.5px var(--mono); margin-top: 6px; opacity: .9; }

.back .pic { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; flex: none; }
.back .piccap { font: 400 11px/1.3 var(--sans); opacity: .8; margin: 3px 0 0; }
.back .vnote { font: 400 10.5px/1.3 var(--sans); opacity: .72; margin: 4px 0 0; }
.count { font: 500 13px var(--mono); color: var(--quiet); align-self: center; margin-right: auto; }
.arrows { align-items: center; }
.key h2 { margin-top: 0; }
.key td:first-child { width: 42%; }

.fgc.rings .sn { display: block; font: 400 10.5px/1.35 var(--sans); opacity: .78; margin-top: 4px; }


.fg-real { max-width: 62ch; }
.fg-real h2 { font: 500 24px/1.2 'Bodoni Moda', Georgia, serif; margin: 0 0 8px; }
.fg-real .note { margin: 0 0 10px; color: var(--quiet); font-size: 15px; line-height: 1.5; }
.fg a { color: inherit; }
.fg { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }


/* The group pages: the groups' colours, and the row that links them. */
.fg-groups { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.fg-groups a { padding: 7px 12px; border-radius: 16px; border: 1px solid var(--quiet); color: inherit; text-decoration: none; font: 500 13px/1.2 var(--sans); }
.fg-groups a[aria-current] { background: var(--ink); color: var(--bench); border-color: var(--ink); }
.fg-groups span { opacity: .65; }
@media (max-width: 900px) { .fg-groups { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; padding-bottom: 4px; } .fg-groups::-webkit-scrollbar { display: none; } .fg-groups a { flex: none; white-space: nowrap; } }
.fg-list { margin: 26px 0 0; }
.fg-list h2 { font: 500 24px/1.2 'Bodoni Moda', Georgia, serif; margin: 0 0 8px; }
.fg-list ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.fg-list a { font: 400 14.5px/1.5 var(--sans); }
.botb { display: grid; gap: 3px; }
.bb { font: 700 20px/1.1 var(--sans); }
.botanical .tax { font-size: 10px; }
.g-mammals { background: #2a1c12; color: #fff7e8; }
.g-mammals h3, .g-mammals .tax { color: #f2c14e; }
.g-mammals::after { background: linear-gradient(transparent, rgba(30, 18, 10, .95)); }
.g-birds { background: #12324a; color: #f1f7fb; }
.g-birds h3 { font: 400 46px/.98 'Abril Fatface', Georgia, serif; text-transform: none; color: #ffd9a0; }
.g-birds .tax { color: #ffd9a0; }
.g-birds::after { background: linear-gradient(transparent, rgba(10, 34, 52, .95)); }
.g-reptiles-amphibians { background: #1c3320; color: #f2f7e6; }
.g-reptiles-amphibians h3 { font: 400 48px/1 'Anton', Impact, sans-serif; text-transform: uppercase; color: #c8e26a; }
.g-reptiles-amphibians .tax { color: #c8e26a; }
.g-reptiles-amphibians::after { background: linear-gradient(transparent, rgba(16, 38, 20, .95)); }
.g-fish-sea-life { background: #06243f; color: #e9f6fb; }
.g-fish-sea-life h3 { font: 600 50px/.96 'Archivo Narrow', sans-serif; text-transform: none; color: #7fe0e6; }
.g-fish-sea-life .tax { color: #7fe0e6; }
.g-fish-sea-life::after { background: linear-gradient(transparent, rgba(4, 26, 46, .96)); }
.g-insects-spiders { background: #241a2e; color: #f7f0ff; }
.g-insects-spiders h3 { font: 500 46px/1 'Bodoni Moda', Georgia, serif; text-transform: none; color: #ffb454; }
.g-insects-spiders .tax { color: #ffb454; }
.g-insects-spiders::after { background: linear-gradient(transparent, rgba(30, 20, 40, .95)); }
.g-food-plants { background: #fbf3e0; color: #4a2f16; }
.g-food-plants h3 { font: 700 34px/1.04 'Libre Baskerville', Georgia, serif; }
.g-food-plants em, .g-food-plants p { font-family: 'Libre Baskerville', Georgia, serif; }
.g-food-plants .pw { box-shadow: 0 0 0 1px rgba(90, 60, 20, .5), 0 0 0 6px #fbf3e0, 0 0 0 7px rgba(90, 60, 20, .4); }
.g-food-plants p { font-size: 14px; line-height: 1.34; font-style: normal; }
.g-fungi-lichens { background: #efe9dd; color: #43302a; }
.g-fungi-lichens h3 { font: 500 38px/1 'Cormorant Garamond', Georgia, serif; }
.g-fungi-lichens em, .g-fungi-lichens p { font-family: 'Cormorant Garamond', Georgia, serif; }
.g-fungi-lichens .pw { box-shadow: 0 0 0 1px rgba(70, 50, 40, .5), 0 0 0 6px #efe9dd, 0 0 0 7px rgba(70, 50, 40, .4); }

/* Animal cards: the whole crop on top, so a numbered mark sits on what it names, and the words directly under it. */
.fgc.journey .pw { inset: 0 0 auto 0; height: auto; aspect-ratio: 800 / 654; overflow: hidden; }
.fgc.journey { justify-content: flex-start; padding-top: calc(81.75% + 14px); }
.fgc.journey::after { display: none; }
.fgc.journey p { font-size: 16px; line-height: 1.4; }
.fgc.journey .big { font-size: 34px; margin-top: 6px; }

/* Translations: German's long words break instead of pushing out of the card; Japanese runs a little smaller to fit the same space. */
.fgc.back dd, .fgc.back dt, .fgc.back p, .fgc.back li, .fgc.back h4, .fgc.back .plaque, .fgc h3, .fgc .big, .fgc p { overflow-wrap: anywhere; hyphens: auto; }
html[lang="ja"] .fgc.journey p { font-size: 14.5px; line-height: 1.42; }
html[lang="ja"] .fgc.journey .big { font-size: 28px; }
html[lang="ja"] .fgc.journey h3 { font-size: 40px; }