/* GENERATED by scripts/build.mjs from components/base/base.css and each components/<Name>/<name>.css. Do not edit by hand. */


/* Base — page ground, links, the shelf grid, icons, motion. Every value comes from tokens.css. */
body { margin: 0; font: var(--type-body); background: var(--paper); color: var(--ink); }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--prussian-strong); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* A shelf of ExhibitCards: auto-fill grid, layout-card minimum, space-6 gaps. */
.az-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--layout-card), 1fr)); gap: var(--space-6); }

/* Lucide icons, inlined as SVG: 20px, 2px stroke, currentColor. */
.az-icon { display: inline-block; flex: none; width: 20px; height: 20px; vertical-align: -4px; }

/* Optional newsprint grain behind the page. Paths are relative to this stylesheet's
   final location: point them at wherever assets/textures is served. */
body.az-newsprint { background-image: url("assets/textures/newsprint.svg?v=921e64ecbb"); background-size: 256px; }
:root[data-theme="dark"] body.az-newsprint { background-image: url("assets/textures/newsprint-night.svg?v=80c53df5db"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) body.az-newsprint { background-image: url("assets/textures/newsprint-night.svg?v=80c53df5db"); }
}

/* Motion is small and mechanical; remove it when asked. */
@media (prefers-reduced-motion: reduce) {
  .az-btn, .az-card { transition: none !important; }
  .az-btn:active, a.az-card:hover { transform: none !important; }
}

/* Button — an inked block on a press */
.az-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; height: 44px; padding: 0 var(--space-4); font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 700; text-decoration: none; border: var(--stroke-ink) solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-press); cursor: pointer; transition: transform .08s ease-out, box-shadow .08s ease-out, background-color .12s; }
.az-btn-sm { height: 36px; padding: 0 var(--space-3); font-size: 14px; }
.az-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.az-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.az-btn-primary { background: var(--vermilion); color: var(--on-vermilion); }
.az-btn-primary:hover { background: var(--vermilion-strong); color: var(--on-vermilion); }
.az-btn-secondary { background: var(--paper-raised); color: var(--ink); }
.az-btn-secondary:hover { background: var(--marigold-wash); color: var(--ink); }
.az-btn-quiet { background: transparent; color: var(--link); border-color: transparent; box-shadow: none; padding: 0 var(--space-2); text-decoration: underline; text-underline-offset: 3px; }
.az-btn-quiet:hover { color: var(--link); text-decoration-thickness: 2px; }
.az-btn-quiet:active { transform: none; }
.az-btn-icon { width: 44px; padding: 0; }
.az-btn-icon.az-btn-sm { width: 36px; }
.az-btn[disabled], .az-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
/* Toggle: a button that stays pressed. aria-pressed carries the state; the look never relies on colour alone.
   Off shows an empty ink box before the label; on fills the box, sets the block down into the paper (no shadow)
   and lays a marigold highlighter behind it, so it never reads as the page's one primary action. */
.az-btn[aria-pressed]::before { content: ""; flex: none; box-sizing: border-box; width: 12px; height: 12px; border: var(--stroke-ink) solid currentColor; border-radius: var(--radius-0); }
.az-btn[aria-pressed="true"] { background: var(--marigold-wash); color: var(--ink); transform: translate(3px, 3px); box-shadow: none; }
.az-btn[aria-pressed="true"]::before { background: currentColor; }
.az-btn[aria-pressed="true"]:hover { background: var(--marigold); color: var(--on-marigold); }
.az-btn[aria-pressed="true"]:focus-visible { box-shadow: var(--focus-ring); }
.az-btn[aria-pressed="true"][disabled], .az-btn[aria-pressed="true"][aria-disabled="true"] { background: var(--marigold-wash); color: var(--ink); }

/* Tabs — index tabs cut into a ledger: the selected tab joins its panel */
.az-tabs { display: flex; gap: var(--space-1); margin: 0; padding: 0 var(--space-2); overflow-x: auto; border-bottom: var(--stroke-ink) solid var(--border); scrollbar-width: thin; }
.az-tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; height: 44px; margin-bottom: calc(var(--stroke-ink) * -1); padding: 0 var(--space-4); font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 400; color: var(--ink-muted); background: var(--paper-sunk); border: var(--stroke-ink) solid var(--border); border-radius: var(--radius-md) var(--radius-md) 0 0; cursor: pointer; transition: background-color .12s; }
.az-tab:hover { color: var(--ink); background: var(--marigold-wash); }
.az-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); z-index: 1; }
.az-tab[aria-selected="true"] { color: var(--ink); font-weight: 700; background: var(--paper-raised); border-bottom-color: var(--paper-raised); }
.az-tab[aria-selected="true"]::before { content: ""; position: absolute; left: calc(var(--stroke-ink) * -1); right: calc(var(--stroke-ink) * -1); top: calc(var(--stroke-ink) * -1); height: var(--space-1); background: var(--ink); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.az-tab[aria-selected="true"]:hover { background: var(--paper-raised); }
.az-tab[disabled], .az-tab[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.az-tabpanel { box-sizing: border-box; padding: var(--space-6); background: var(--paper-raised); color: var(--ink); border: var(--stroke-ink) solid var(--border); border-top: 0; }
.az-tabpanel[hidden] { display: none; }
.az-tabpanel:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Tag — a taxonomy rank and name */
.az-tag { display: inline-flex; align-items: baseline; gap: var(--space-1); box-sizing: border-box; padding: 3px var(--space-2); font-family: var(--font-mono); font-size: 13px; line-height: 16px; color: var(--ink); background: var(--paper-sunk); border: var(--stroke-hair) solid var(--rule); border-radius: var(--radius-sm); white-space: nowrap; }
.az-tag-rank { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }

/* Stamp — an inked status mark */
.az-stamp { display: inline-block; box-sizing: border-box; padding: 2px var(--space-2); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; border: var(--stroke-ink) solid currentColor; border-radius: var(--radius-sm); white-space: nowrap; }
.az-stamp-new { color: var(--vermilion); background: var(--vermilion-wash); }
.az-stamp-display { color: var(--prussian); background: var(--prussian-wash); }
.az-stamp-workshop { color: var(--marigold-ink); background: var(--marigold-wash); }
.az-stamp-archived { color: var(--ink-muted); background: var(--paper-sunk); }
.az-stamp-tilt { transform: rotate(-4deg); }

/* Niche — the menagerie-wagon arch */
.az-niche { position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 4 / 5; border: var(--stroke-block) solid var(--border); border-radius: var(--radius-arch) var(--radius-arch) 0 0; color: var(--ink); }
.az-niche > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.az-niche-instruments { background: var(--prussian-wash); }
.az-niche-toys { background: var(--vermilion-wash); }
.az-niche-oracles { background: var(--marigold-wash); }
.az-niche-curios { background: var(--paper-sunk); }
.az-niche-numeral { font-family: var(--font-poster); font-size: 48px; line-height: 1; color: var(--ink); }
.az-niche-empty { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); text-align: center; padding: var(--space-4); }
.az-niche > .az-icon { width: 40px; height: 40px; }

/* Billboard — headline band in paper, the illustration printed beneath it */
.az-billboard { background: var(--paper); color: var(--ink); }
.az-billboard-band { box-sizing: border-box; max-width: var(--layout-max); margin: 0 auto; padding: var(--space-12) var(--space-6) var(--space-8); }
/* The page's H1, in plain words; the poster line below it is decoration (decisions/049 in natnlabs/appzoo). */
.az-billboard-heading { margin: 0 0 var(--space-3); max-width: var(--layout-measure); font: var(--type-title); color: var(--ink); }
.az-billboard-headline { margin: 0; max-width: 16ch; font-family: var(--font-poster); font-weight: 400; font-size: clamp(40px, 7vw, 72px); line-height: 1; color: var(--ink); }
.az-billboard-lead { margin: var(--space-4) 0 0; max-width: var(--layout-measure); font-size: 19px; line-height: 28px; }
.az-billboard-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.az-billboard-art { position: relative; overflow: hidden; width: 100%; aspect-ratio: 3808 / 1280; min-height: 200px; border-top: var(--stroke-block) solid var(--border); border-bottom: var(--stroke-block) solid var(--border); }
.az-billboard-art > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--az-focus, 45%) 100%; }

/* SpecimenLabel — the curator's placard */
.az-specimen { box-sizing: border-box; max-width: 360px; margin: 0; padding: var(--space-4); background: var(--paper-raised); color: var(--ink); border: var(--stroke-ink) solid var(--border); border-radius: var(--radius-0); box-shadow: inset 0 0 0 4px var(--paper-raised), inset 0 0 0 5px var(--rule); }
.az-specimen-cat { font-family: var(--font-mono); font-size: 13px; line-height: 16px; letter-spacing: .02em; color: var(--ink-muted); margin: var(--space-1) var(--space-1) var(--space-2); }
.az-specimen-name { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 26px; margin: 0 var(--space-1); }
.az-specimen-bin { font-family: var(--font-sans); font-style: italic; font-size: 15px; line-height: 20px; color: var(--ink-muted); margin: 2px var(--space-1) 0; }
.az-specimen-fields { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); margin: var(--space-3) var(--space-1) var(--space-1); padding-top: var(--space-3); border-top: var(--stroke-hair) solid var(--rule); }
.az-specimen-fields dt { font-family: var(--font-mono); font-size: 12px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.az-specimen-fields dd { margin: 0; font-size: 14px; line-height: 20px; }
.az-specimen-note { margin: var(--space-3) var(--space-1) var(--space-1); font-size: 14px; line-height: 20px; }

/* ExhibitCard — one exhibit on a shelf */
.az-card { display: flex; flex-direction: column; gap: var(--space-3); box-sizing: border-box; padding: var(--space-4); background: var(--paper-raised); color: var(--ink); text-decoration: none; border: var(--stroke-block) solid var(--border); border-radius: var(--radius-0); box-shadow: var(--shadow-print); transition: transform .12s ease-out, box-shadow .12s ease-out; }
a.az-card:hover { color: var(--ink); transform: translate(-3px, -3px); box-shadow: var(--shadow-lift); }
a.az-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.az-card .az-niche { aspect-ratio: 5 / 4; }
.az-card-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.az-card-cat { font-family: var(--font-mono); font-size: 13px; line-height: 16px; letter-spacing: .02em; color: var(--ink-muted); }
.az-card-name { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 26px; margin: 0; }
.az-card-summary { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.az-card-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* FieldNotes — the mailing-list broadside */
.az-fieldnotes { box-sizing: border-box; max-width: 640px; padding: var(--space-6); background: var(--paper-raised); color: var(--ink); border: var(--stroke-block) solid var(--border); border-radius: var(--radius-0); box-shadow: var(--shadow-print); }
.az-fieldnotes-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--on-marigold); background: var(--marigold); padding: 2px var(--space-2); margin: 0 0 var(--space-3); }
.az-fieldnotes-title { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 34px; margin: 0 0 var(--space-2); }
.az-fieldnotes-desc { margin: 0 0 var(--space-4); max-width: var(--layout-measure); }
.az-fieldnotes-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.az-field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 240px; }
.az-field-label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.az-input { box-sizing: border-box; height: 44px; padding: 0 var(--space-3); font-family: var(--font-sans); font-size: 16px; color: var(--ink); background: var(--paper); border: var(--stroke-ink) solid var(--border); border-radius: var(--radius-sm); }
.az-input::placeholder { color: var(--ink-muted); }
.az-input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.az-input[aria-invalid="true"] { border-color: var(--danger); }
.az-fieldnotes-done { margin: 0; font-weight: 700; color: var(--success); }
.az-fieldnotes-error { margin: var(--space-2) 0 0; font-size: 14px; line-height: 20px; color: var(--danger); }
.az-fieldnotes-fine { margin: var(--space-3) 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* FileInput — a drop zone on the press bed: a dashed ink frame around a native file input */
.az-file { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.az-file-zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; min-height: 160px; padding: var(--space-6) var(--space-4); text-align: center; color: var(--ink); background: var(--paper); border: var(--stroke-ink) dashed var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: background-color .12s; }
/* The native input stays in the page (keyboard, screen readers, drop target) but is drawn by the zone. */
.az-file-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.az-file-input:disabled { cursor: not-allowed; }
.az-file-icon { display: block; width: 32px; height: 32px; }
.az-file-cta { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 36px; padding: 0 var(--space-3); font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink); background: var(--paper-raised); border: var(--stroke-ink) solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-press); }
.az-file-hint { font: var(--type-body-s); color: var(--ink-muted); }
.az-file-name { margin: 0; font: var(--type-catalog); letter-spacing: .02em; color: var(--ink-muted); overflow-wrap: anywhere; }
.az-file-zone:hover { background: var(--marigold-wash); }
.az-file-zone:hover .az-file-cta { background: var(--marigold-wash); }
.az-file-zone:has(.az-file-input:focus-visible) { box-shadow: var(--focus-ring); }
/* Drag-over: the app sets .is-dragover on .az-file. The frame goes solid and prints its shadow, and the hint says what will happen. */
.az-file.is-dragover .az-file-zone { border-style: solid; background: var(--prussian-wash); box-shadow: var(--shadow-press); }
.az-file.is-dragover .az-file-hint { color: var(--ink); font-weight: 700; }
/* Chosen: the app sets .is-chosen on .az-file and writes the file name into .az-file-name. */
.az-file.is-chosen .az-file-zone { border-style: solid; }
.az-file.is-chosen .az-file-name { color: var(--ink); }
.az-file.is-chosen .az-file-name::before { content: "✓ "; }
.az-file-zone:has(.az-file-input:disabled) { opacity: .45; cursor: not-allowed; }
.az-file-zone:has(.az-file-input:disabled):hover { background: var(--paper); }
.az-file-zone:has(.az-file-input:disabled):hover .az-file-cta { background: var(--paper-raised); }

/* ToolPanel — an exhibit's working instrument: a form and its readout, set like a specimen drawer */
.az-tool { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: var(--space-6); background: var(--paper-raised); color: var(--ink); border: var(--stroke-block) solid var(--border); border-radius: var(--radius-0); box-shadow: var(--shadow-print); }
.az-tool-head { display: flex; flex-direction: column; gap: var(--space-1); }
.az-tool-eyebrow { margin: 0; font: var(--type-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.az-tool-title { margin: 0; font: var(--type-heading); }
.az-tool-desc { margin: 0; max-width: var(--layout-measure); }
.az-tool-form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.az-tool-form .az-field { flex: 1 1 150px; }
select.az-input { padding-right: var(--space-2); cursor: pointer; }
.az-readout { display: grid; gap: var(--space-1); margin: 0; padding: var(--space-4); background: var(--paper); border: var(--stroke-ink) solid var(--border); border-radius: var(--radius-sm); }
.az-readout-label { margin: 0; font: var(--type-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.az-readout-value { margin: 0; font: var(--type-display); color: var(--ink); }
.az-readout-level { font: var(--type-label); letter-spacing: .08em; text-transform: uppercase; color: var(--danger); }
.az-readout-text { margin: 0; font: var(--type-body-s); max-width: var(--layout-measure); }
.az-tool-note { margin: 0; font: var(--type-body-s); color: var(--ink-muted); }

/* Figure — one number worth remembering, set large, with a sentence saying what it is and where it comes from */
.az-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); margin: var(--space-4) 0; }
.az-figure { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding-top: var(--space-3); border-top: var(--stroke-ink) solid var(--border); }
.az-figure-value { margin: 0; font: var(--type-display); color: var(--ink); }
.az-figure-unit { font: var(--type-heading); }
.az-figure-caption { margin: 0; font: var(--type-body-s); color: var(--ink-muted); max-width: 40ch; }

/* Rule — a printer's rule between sections: a hairline, an ink line, or an exhibit's own ornament */
.az-rule { display: block; box-sizing: border-box; width: 100%; height: 0; margin: var(--space-8) 0; border: 0; border-top: var(--stroke-hair) solid var(--rule); background: none; }
.az-rule-ink { border-top-width: var(--stroke-ink); border-top-color: var(--border); }
/* Ornamental: the exhibit's own rule motif (ExhibitTheme's .az-motif-rule), printed in its motif ink. */
.az-rule.az-motif.az-motif-rule { height: var(--motif-size, 24px); border-top: 0; }

/* ExhibitTheme — the per-app layer. An exhibit page puts data-exhibit="<slug>" on <main>
   and links exhibits/<slug>/theme.css, which sets the --exhibit-* slots and the motif files.
   Everything here falls back to the AppZoo defaults, so a missing slot is never broken. */

/* Inside an exhibit, its accent takes the primary button. Field notes stays AppZoo. */
[data-exhibit] .az-btn-primary { background: var(--exhibit-accent, var(--vermilion)); color: var(--exhibit-on-accent, var(--on-vermilion)); }
[data-exhibit] .az-btn-primary:hover { background: var(--exhibit-accent-strong, var(--vermilion-strong)); color: var(--exhibit-on-accent, var(--on-vermilion)); }
[data-exhibit] .az-btn-secondary:hover { background: var(--exhibit-wash, var(--marigold-wash)); }
[data-exhibit] .az-fieldnotes .az-btn-primary { background: var(--vermilion); color: var(--on-vermilion); }
[data-exhibit] .az-fieldnotes .az-btn-primary:hover { background: var(--vermilion-strong); }

/* Inside an exhibit, a tool's readout sits on the exhibit's wash. */
[data-exhibit] .az-readout { background: var(--exhibit-wash, var(--paper)); }

/* The exhibit's own niche wears its wash instead of the kingdom's. */
.az-niche-exhibit { background: var(--exhibit-wash, var(--paper-sunk)); }
.az-niche-exhibit > .az-motif { --motif-size: 55%; }

/* Exhibit hero: the band an exhibit page opens with, straight under the site header (whose rule is its top edge). */
.az-exhibit-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--exhibit-wash, var(--paper-sunk)); color: var(--ink); border-bottom: var(--stroke-block) solid var(--border); }
.az-exhibit-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background-color: var(--exhibit-texture-ink, transparent); -webkit-mask-repeat: repeat; mask-repeat: repeat; -webkit-mask-size: var(--exhibit-texture-size, 256px); mask-size: var(--exhibit-texture-size, 256px); }
.az-exhibit-hero-band { position: relative; box-sizing: border-box; max-width: var(--layout-max); margin: 0 auto; padding: var(--space-12) var(--space-6); }
.az-exhibit-eyebrow { display: inline-block; margin: 0 0 var(--space-4); padding: 2px var(--space-2); font: var(--type-label); letter-spacing: .08em; text-transform: uppercase; color: var(--exhibit-on-accent, var(--on-marigold)); background: var(--exhibit-accent, var(--marigold)); }
.az-exhibit-title { margin: 0; max-width: 18ch; font: var(--type-display); color: var(--ink); }
.az-exhibit-binomial { margin: var(--space-1) 0 0; font: var(--type-binomial); color: var(--ink-muted); }
.az-exhibit-lead { margin: var(--space-4) 0 0; max-width: 56ch; font: var(--type-lead); }
.az-exhibit-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.az-exhibit-hero > .az-motif-rule { position: absolute; left: 0; right: 0; bottom: var(--space-2); }
.az-exhibit-corner { position: absolute; z-index: -1; right: var(--space-6); top: 50%; transform: translateY(-50%); }
/* The corner motif never sits behind the words: below 1080px there is no room beside them, so it goes. */
@media (max-width: 1080px) { .az-motif.az-exhibit-corner { display: none; } }

/* Motifs: single-ink SVGs drawn through a mask, so the theme colours them. */
.az-motif { display: inline-block; flex: none; width: var(--motif-size, 48px); aspect-ratio: 1; background-color: var(--exhibit-motif-ink, var(--ink)); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.az-motif-rule { display: block; width: 100%; height: var(--motif-size, 24px); aspect-ratio: auto; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: auto 100%; mask-size: auto 100%; -webkit-mask-position: left center; mask-position: left center; }

/* Ambient motion: decorative, behind the words, never in the way. Still unless the visitor allows motion. */
.az-exhibit-ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .3) 0, rgb(0 0 0 / .3) 50%, #000 80%); mask-image: linear-gradient(90deg, rgb(0 0 0 / .3) 0, rgb(0 0 0 / .3) 50%, #000 80%); }
@media (max-width: 720px) { .az-exhibit-ambient { -webkit-mask-image: none; mask-image: none; opacity: .3; } }
.az-exhibit-ambient::before, .az-exhibit-ambient::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--az-tile, 400px) * -1); bottom: 0; background-color: var(--exhibit-motion-ink, transparent); -webkit-mask-repeat: repeat; mask-repeat: repeat; }
.az-exhibit-ambient::after { opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .az-exhibit-ambient::before { animation: az-drift var(--az-far-duration, 38s) linear infinite; }
  .az-exhibit-ambient::after { animation: az-drift var(--az-near-duration, 22s) linear infinite; }
}
@media (prefers-reduced-motion: reduce) { .az-exhibit-ambient::after { display: none; } }
@keyframes az-drift { from { transform: translateY(0); } to { transform: translateY(var(--az-tile, 400px)); } }