/* The site's look, taken from the home page: a plum black night, cream type, marigold for the one action
   that matters, Linden Hill italic for names and headings, Atkinson Hyperlegible Next for everything else.
   Surfaces step up from the night (panel, raised) so a page reads in layers, never one flat wash.
   It keeps the accessibility basics: contrast, a marigold focus ring, 44px targets. */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --ground: #140a10;
  --panel: #21121b;
  --raised: #2c1824;
  --cream: #f5ede0;
  --cream-dim: rgb(245 237 224 / .74);
  --cream-faint: rgb(245 237 224 / .5);
  --marigold: #f2c14e;
  --marigold-deep: #e08a1e;
  --rose: #e4537f;
  --line: rgb(245 237 224 / .16);
  --line-strong: rgb(245 237 224 / .34);
  --danger: #ff8f7d;
  --display: 'Linden Hill', Georgia, serif;
  /* the older names, kept so nothing that reads them breaks */
  --text: var(--cream);
  --muted: var(--cream-dim);
  --bg: var(--ground);
  --accent: var(--marigold);
  --soft: var(--panel);
  color-scheme: dark;
  line-height: 1.55;
  color: var(--cream);
  background: var(--ground);
}
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
}
/* candlelight from above and a little rosa mexicano from below, held still while long pages scroll.
   It sits on its own fixed layer (not background-attachment: fixed, which repaints every scroll frame on phones).
   The solid ground colour is on :root above; the body itself stays transparent so this layer shows through. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; contain: strict;
  background:
    radial-gradient(60rem 32rem at 50% -8rem, rgb(242 193 78 / .11), transparent 70%),
    radial-gradient(48rem 30rem at 85% 110%, rgb(228 83 127 / .08), transparent 70%),
    var(--ground);
}
main { flex: 1; width: 100%; }
img { max-width: 100%; height: auto; }
a { color: var(--marigold); text-underline-offset: .2em; }
a:hover { color: #ffd77a; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; }
::selection { background: rgb(242 193 78 / .35); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--ground); color: var(--cream); padding: .75rem 1rem; z-index: 30; border-radius: .75rem; }
.container { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 40rem) { .container { padding: 0 1.5rem; } }

h1, h2 { font-family: var(--display); font-style: italic; font-weight: 400; letter-spacing: 0; line-height: 1.1; }
h1 { font-size: clamp(2.5rem, 7vw, 4.25rem); margin: 0 0 .5rem; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 4vw, 2.35rem); margin: 0 0 .5rem; }
h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; }
p { margin: 0 0 .75rem; }
.lede { font-size: 1.15rem; color: var(--cream-dim); max-width: 38rem; }
.eyebrow { font-size: .85rem; font-weight: 700; letter-spacing: .06em; color: var(--marigold); margin: 0 0 .5rem; }

/* Header: the base layout; the Vela pill look is in nav.css. */
.site-header .container { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-top: .5rem; padding-bottom: .5rem; }
.site-name { font-weight: 700; margin-right: auto; }
.site-header { position: relative; z-index: 3; }
.site-menu { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.menu-toggle { display: none; }
.menu-toggle .when-open, .site-header.menu-open .menu-toggle .when-closed { display: none; }
.site-header.menu-open .menu-toggle .when-open { display: inline; }
.site-header [aria-current="page"] { font-weight: 700; text-decoration: none; }
/* Phones: the brand and a menu button share one row; the links, music and language open in a panel that
   overlays the page below the header, so the header's height never changes. */
@media (max-width: 80rem) {
  .site-header.has-menu .menu-toggle { display: inline-flex; padding: .5rem .75rem; }
  .site-header.has-menu .site-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .5rem;
    padding: .5rem 1rem 1rem; background: var(--ground); border-bottom: 1px solid var(--line);
    box-shadow: 0 .75rem 1.5rem rgb(0 0 0 / .45);
  }
  .site-header.has-menu.menu-open .site-menu { display: flex; }
  .site-header.has-menu .site-menu .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-header.has-menu .site-menu .nav-list a { width: 100%; }
  .site-header.has-menu .site-menu .lang-switch { border-top: 1px solid var(--line); padding-top: .5rem; }
}

/* Footer (home-2 02 A, "the footnote"): quiet and somber, never an homage to its maker. Under the marigold garland
   and its hanging heads, one small veladora burning on its own, the site's name, two links, and who made it as a
   single small footnote line (small and low contrast, but AA on the ground). */
.site-footer {
  --foot: rgb(245 237 224 / .54);
  margin-top: 4rem; padding: 0 0 max(2.25rem, env(safe-area-inset-bottom)); color: var(--cream-dim); font-size: .95rem;
  position: relative; text-align: center; overflow-x: clip;
}
/* the garland, repeat-x (the art tiles without a seam); its lower edge is cut in scallops, so the painting's straight
   bottom never shows between the heads hanging over it (Footer.astro lays those) */
.site-footer .garland { position: relative; height: clamp(5.5rem, 11vw, 8rem); }
.site-footer .garland::before {
  content: ''; position: absolute; inset: 0; background: url('/ui/garland-1200.webp') center bottom / auto 100% repeat-x;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 1.4rem) no-repeat, radial-gradient(circle at 50% 0, #000 69%, transparent 71%) left bottom / 2.6rem 1.45rem repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 1.4rem) no-repeat, radial-gradient(circle at 50% 0, #000 69%, transparent 71%) left bottom / 2.6rem 1.45rem repeat-x;
}
@media (min-width: 60rem) { .site-footer .garland::before { background-image: url('/ui/garland-2400.webp'); } }
/* the home page holds these back until its hero picture is in (HeroScene.astro sets and clears the attribute) */
html[data-defer-img] img[loading='lazy']:not(.cd) { display: none !important; }
/* on a phone the hero's candles (laid on the picture, unseen until the loader ends) wait for it too; the curtain on a wide screen adopts them at once */
@media (max-width: 767.98px) { html[data-defer-img] img.cd { display: none !important; } }
html[data-defer-img] .site-footer .garland::before { background-image: none; }
.site-footer .garland-edge { position: absolute; inset: 0; overflow-x: clip; overflow-y: visible; pointer-events: none; }
.site-footer .garland-edge img { position: absolute; max-width: none; translate: -50% 0; filter: drop-shadow(0 .35rem .4rem rgb(0 0 0 / .5)); }
.site-footer .pie-in { display: flex; flex-direction: column; align-items: center; padding-top: clamp(3.75rem, 8vw, 5rem); }

/* one small veladora, burning on its own; tap it and it goes out, then catches again */
.site-footer .pie-vela {
  position: relative; display: block; width: clamp(2.75rem, 2.25rem + 1.5vw, 3.25rem); min-height: 0; margin: 0 0 1.1rem; padding: 0;
  border: 0; border-radius: .5rem; background: none; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: opacity 1s ease .2s;
}
.site-footer .pie-vela:hover, .site-footer .pie-vela:active { background: none; transform: none; }
.site-footer .pie-vela > img { display: block; width: 100%; max-width: none; height: auto; }
.site-footer .pie-vela .fw { position: absolute; inset: 0; transform-origin: 50% 27%; transition: opacity .3s ease, transform .6s cubic-bezier(.3, 1.2, .5, 1); }
.site-footer .pie-vela .flame { position: absolute; inset: 0; width: 100%; max-width: none; height: auto; transform-origin: 50% 27%; will-change: transform; }
.site-footer .pie-vela.out .fw { opacity: 0; transform: scale(.15); transition: opacity .18s ease, transform .2s ease; }
/* it comes up once, quietly, when the footer is reached */
.site-footer.pie-wait:not(.pie-in-view) .pie-vela { opacity: 0; }
.site-footer.pie-wait:not(.pie-in-view) .pie-vela .fw { opacity: 0; transform: scale(.15); }
.site-footer.pie-in-view .pie-vela:not(.out) .fw { transition-delay: .9s; }
.site-footer.pie-in-view .pie-vela.relit .fw { transition-delay: 0s; }

.site-footer .pie-name { margin: 0; font: italic 400 1.375rem/1.2 var(--display); color: var(--cream-dim); }
.site-footer .pie-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.75rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.site-footer .pie-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: .25rem; color: var(--cream);
  font-size: .9375rem; text-decoration: underline; text-decoration-color: rgb(245 237 224 / .3); text-underline-offset: .25em;
  transition: text-decoration-color .2s ease, color .2s ease;
}
.site-footer .pie-nav a:hover { color: var(--cream); text-decoration-color: currentColor; }
/* the footnote: who made it, and nothing more */
.site-footer .nota {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding-top: 1rem; border-top: 1px solid var(--line); width: min(100%, 26rem);
  font-size: .8125rem; line-height: 1.5; color: var(--foot);
}
.site-footer .nota a {
  display: inline-flex; align-items: center; min-height: 44px; margin-block: -.75rem; padding-inline: .2rem; color: inherit;
  text-decoration: underline; text-decoration-color: rgb(245 237 224 / .25); text-underline-offset: .2em;
}
.site-footer .nota a:hover { color: var(--cream-dim); text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .site-footer .pie-vela, .site-footer .pie-vela .fw { transition: none !important; }
}

.nav-list, .inline-list { display: flex; flex-wrap: wrap; gap: .5rem 1rem; list-style: none; margin: 0; padding: 0; align-items: center; }
.btn, button, .site-header a, .lang-switch a, .text-link, .skip-link, input, select, textarea { min-height: 44px; }
.site-header a, .lang-switch a, .text-link, .skip-link { display: inline-flex; align-items: center; min-width: 44px; }

/* Buttons: marigold for the main action, quiet glass for the rest. */
.btn, button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-width: 44px; min-height: 2.875rem; padding: .55rem 1.25rem; font: inherit; font-weight: 600; line-height: 1.2;
  border-radius: 999px; border: 1px solid var(--line-strong); background: rgb(245 237 224 / .06); color: var(--cream);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.btn:hover, button:hover { background: rgb(245 237 224 / .12); border-color: rgb(245 237 224 / .5); color: var(--cream); }
.btn:active, button:active { transform: translateY(1px); }
.btn-primary, button.btn-primary {
  background: var(--marigold); border-color: var(--marigold); color: var(--ground);
  box-shadow: 0 .5rem 1.5rem rgb(242 193 78 / .22);
}
.btn-primary:hover, button.btn-primary:hover { background: #ffd36b; border-color: #ffd36b; color: var(--ground); }
.btn-danger, button.btn-danger { border-color: rgb(255 143 125 / .6); color: var(--danger); background: transparent; }
.btn-danger:hover, button.btn-danger:hover { background: rgb(255 143 125 / .12); border-color: var(--danger); color: var(--danger); }
button:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
button:disabled:hover { background: rgb(245 237 224 / .06); border-color: var(--line-strong); }
button.btn-primary:disabled:hover { background: var(--marigold); border-color: var(--marigold); }

/* Fields: dark wells with a cream edge; the marigold ring shows where you are. */
label { display: block; font-weight: 600; margin-top: 1rem; }
input, select, textarea {
  width: 100%; font: inherit; padding: .65rem .9rem; border: 1px solid var(--line-strong); border-radius: .875rem;
  background: rgb(10 4 8 / .55); color: var(--cream); transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--cream-faint); }
input:hover, textarea:hover, select:hover { border-color: rgb(245 237 224 / .5); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--marigold); box-shadow: 0 0 0 3px rgb(242 193 78 / .3); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
input[type='file'] { padding: .5rem; cursor: pointer; }
input[type='file']::file-selector-button {
  font: inherit; font-weight: 600; color: var(--ground); background: var(--cream); border: 0; border-radius: 999px;
  padding: .45rem 1rem; margin-right: .75rem; cursor: pointer;
}
input[type='radio'], input[type='checkbox'] { width: 1.25rem; min-height: 0; height: 1.25rem; accent-color: var(--marigold); flex: none; }
.help, .muted { color: var(--cream-dim); font-size: .9375rem; }
.error { color: var(--danger); font-weight: 600; }
.status { min-height: 1.5rem; }
.placeholder {
  display: grid; place-items: center; text-align: center; padding: 2rem 1rem; min-height: 12rem;
  border: 1px dashed var(--line-strong); border-radius: 1.25rem; background: var(--panel); color: var(--cream-dim);
}
.grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.stack > * + * { margin-top: 1rem; }
section { padding: 1.5rem 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Panels: the layered surfaces pages are built from. */
.panel {
  background: linear-gradient(180deg, rgb(245 237 224 / .045), transparent 40%), var(--panel);
  border: 1px solid var(--line); border-radius: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .35), inset 0 1px 0 rgb(245 237 224 / .06);
}

/* Dialogs: a raised sheet over a dimmed night. */
dialog {
  max-width: min(34rem, calc(100vw - 2rem)); width: 100%; max-height: calc(100dvh - 2rem);
  color: var(--cream); background: var(--raised); border: 1px solid var(--line-strong); border-radius: 1.5rem;
  padding: 1.5rem; box-shadow: 0 2rem 4rem rgb(0 0 0 / .6);
}
dialog::backdrop { background: rgb(10 4 8 / .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* phones: a 4px blur under a 72% dark wash is barely visible; a slightly deeper wash costs nothing to draw */
@media (max-width: 48rem) {
  dialog::backdrop { background: rgb(10 4 8 / .78); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.dialog-head h2 { font-size: 1.9rem; margin: 0; }

/* Forms */
.field { display: grid; gap: .35rem; }
.field label { margin-top: 0; }
.field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); align-items: end; }
[aria-invalid='true'] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.help { margin: 0; font-size: .9rem; }
.field-error, .form-error { margin: 0; color: var(--danger); font-weight: 600; }
.form-error { padding: .75rem 1rem; border-radius: .875rem; background: rgb(255 143 125 / .1); border: 1px solid rgb(255 143 125 / .4); }
.choice { display: flex; gap: .65rem; align-items: center; min-height: 44px; margin: 0; font-weight: 500; cursor: pointer; }
.choice-grid { display: grid; gap: .25rem .75rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

/* Notices */
.notice {
  border: 1px solid rgb(242 193 78 / .45); background: rgb(242 193 78 / .08); color: var(--cream);
  padding: .9rem 1.15rem; border-radius: 1rem;
}

/* Home: the tradition list (the hero and How it works style themselves) */
.steps { padding-left: 0; list-style: none; }
.terms div { margin-bottom: .75rem; }
.terms dt { font-weight: 700; color: var(--marigold); }
.terms dd { margin: 0; color: var(--cream-dim); }
/* The top nav: a floating pill of smoked glass with the Linden Hill wordmark, set in
   Atkinson Hyperlegible Next, which is also the body face. The pill stays on screen as the page scrolls; its
   height is fixed, because the hero measures the header's bottom on load. Selectors start with :root body so
   they outrank the hero's own header rules. (Kavinda picked this direction, Vela, on 27 Oct; the other two,
   Libro and Imprenta, are in commit 925dca0.) Round 2 (27 Oct): the current page is a painted marigold on the
   rim (chrome-2 01 B), the language control is two plain labels and music is one small note (03 A). */
@font-face {
  font-family: 'Linden Hill'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/hero/fonts/LindenHill-400i.woff2') format('woff2');
}
/* On phones Atkinson itself is added by a script in Base.astro once the first picture is in, so its 21 KB does not compete
   with that picture (wider screens declare it here, as before: swapping it in later costs them a second page layout). Until then the text sits in Arial (Liberation Sans, Arimo, Helvetica) set to Atkinson's width and line box, so
   nothing moves when the real face arrives. The weight axis is 400 to 700, the only weights the site uses. */
@media (min-width: 768px) {
  @font-face {
    font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('/fonts/AtkinsonHyperlegibleNext-400-700.woff2') format('woff2');
  }
}
@font-face {
  font-family: 'Atkinson Fallback'; font-style: normal; font-weight: 400 500;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo'), local('Helvetica');
  size-adjust: 100%; ascent-override: 98.4%; descent-override: 31.6%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Atkinson Fallback'; font-style: normal; font-weight: 600 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold'), local('Helvetica Bold');
  size-adjust: 99.5%; ascent-override: 98.9%; descent-override: 31.8%; line-gap-override: 0%;
}
/* the italic is added by a script in Base.astro, once the first picture is in (a few lines of italic sit far down the page) */

:root { --ground: #140a10; --cream: #f5ede0; --cream-dim: rgb(245 237 224 / .72); --marigold: #f2c14e; }
:root { font-family: 'Atkinson Hyperlegible Next', 'Atkinson Fallback', system-ui, sans-serif; scroll-padding-top: 5.5rem; }

/* Shared: dark chrome, cream type, marigold for the current page and focus, the wordmark in Linden Hill. */
:root body .site-header { color: var(--cream); border-bottom: 0; }
:root body .site-header a,
:root body .site-header [aria-current] { color: var(--cream); text-decoration: none; font-weight: inherit; }
:root body .site-header a:hover { color: var(--marigold); }
:root body .site-header :focus-visible { outline: 2px solid var(--marigold); outline-offset: 3px; }
:root body .site-header button {
  background: transparent; color: var(--cream); border: 0; border-radius: 0; font: inherit; padding: 0 .25rem;
}
:root body .site-header .site-name {
  font-family: 'Linden Hill', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0; white-space: nowrap;
  /* the face's ascender space sits above its letters, so the box is centred but the ink rides high: nudge it to the links' line */
  position: relative; top: .17em;
}
:root body .site-header .container { flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; }
:root body .site-header .nav-list,
:root body .site-header .velas { flex-wrap: nowrap; }
:root body .site-header .nav-list a,
:root body .site-header .nav-list button { white-space: nowrap; }

/* Over the hero the header is fixed, so it stays when the marigold border leaves; elsewhere it sticks to the top. */
:root body .site-header { position: sticky; top: 0; z-index: 20; }
:root body[data-hero] .site-header { position: fixed; }
.skip-link:focus { z-index: 30; }

/* No night veil behind the pill: it would stay as a dark bar over the light page once the hero scrolls away. */
:root body .site-header,
:root body[data-hero] .site-header { background: transparent; padding: .75rem clamp(.5rem, 2vw, 1.5rem) 0; }
:root body:not([data-hero]) .site-header .container { background: var(--ground); }
:root body .site-header .container {
  height: 3.5rem; max-width: 66rem; padding: 0 .5rem 0 1.25rem; gap: 1rem; border-radius: 999px;
  background: rgb(20 10 16 / .72); border: 1px solid rgb(245 237 224 / .16);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 .75rem 2rem rgb(20 10 16 / .35), inset 0 1px 0 rgb(245 237 224 / .08);
}
:root body .site-header .site-name { font-size: 1.45rem; }
:root body .site-header .site-menu { gap: .75rem; flex-wrap: nowrap; }
:root body .site-header .nav-list { gap: .25rem; }
:root body .site-header .nav-list a,
:root body .site-header .menu-toggle {
  font-size: .95rem; font-weight: 500; padding: .2rem .9rem 0; border-radius: 999px; min-height: 2.75rem; height: 2.75rem;
}
:root body .site-header .nav-list a:hover { background: rgb(245 237 224 / .08); color: var(--cream); }

/* The current page (chrome-2 01 B): no pill. Its words turn marigold and one painted marigold, the find page's own
   flower, is pinned on the nav's bottom rim under them; follow a link and it rolls along the rim to the new one
   (Header.astro). The page's marigold button stays the only filled shape; the flower is the site's own, not a button. */
:root body .site-header .nav-list { position: relative; }
:root body .site-header .nav-list [aria-current="page"],
:root body .site-header .nav-list [aria-current="page"]:hover { background: transparent; box-shadow: none; color: var(--marigold); font-weight: 700; }
.site-header .nav-mark {
  position: absolute; left: 0; top: 0; z-index: 2; width: 1.6rem; height: auto; max-width: none; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 .2rem .3rem rgb(0 0 0 / .5));
  transition: transform .85s cubic-bezier(.3, 1.25, .45, 1), opacity .3s ease;
}
.site-header .nav-mark.ready { opacity: 1; }
.site-header .nav-mark.still { transition: opacity .3s ease; }
@media (max-width: 80rem) { .site-header .site-menu .nav-mark { width: 1.75rem; } }
@media (prefers-reduced-motion: reduce) { .site-header .nav-mark { transition: opacity .2s ease; } }

/* The language: both languages stay in view as plain labels; the reader's is lit (brighter, bold, on a soft fill). */
:root body .site-header .lang-switch .velas {
  display: flex; gap: 0; list-style: none; margin: 0; padding: .15rem; border-radius: 999px; background: rgb(245 237 224 / .06);
}
:root body .site-header .lang-switch .vela {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; min-width: 44px; padding: 0 .9rem; border-radius: 999px;
  font-size: .875rem; font-weight: 500; color: rgb(245 237 224 / .66); text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: color .4s ease, background-color .2s;
}
:root body .site-header .lang-switch a.vela:hover { color: var(--cream); background: rgb(245 237 224 / .06); }
:root body .site-header .lang-switch .vela[aria-current] { background: rgb(245 237 224 / .14); color: var(--cream); font-weight: 700; cursor: default; }
/* Music (chrome-2 03 A): one small icon button in the bar, nothing more. A quiet cream eighth note, struck through
   while off; tap it and the stroke lifts, the note's head fills marigold and two small sound arcs draw in once and
   stay. It starts off and never autoplays. Marigold here is the brand's current page and focus colour. */
:root body .site-header .music-icon {
  position: relative; flex: none; display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: rgb(245 237 224 / .7); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .3s ease, background-color .2s;
}
:root body .site-header .music-icon:hover { color: var(--cream); background: rgb(245 237 224 / .08); }
:root body .site-header .music-icon:active { transform: none; }
:root body .site-header .music-icon[aria-pressed='true'],
:root body .site-header .music-icon[aria-pressed='true']:hover { color: var(--marigold); }
.music-icon svg { display: block; overflow: visible; transform-origin: 40% 80%; }
.music-icon .mi-head { fill: transparent; transition: fill .3s ease .1s; }
.music-icon[aria-pressed='true'] .mi-head { fill: currentColor; }
.music-icon .mi-arc { stroke-dasharray: 12; stroke-dashoffset: 12; opacity: 0; transition: stroke-dashoffset .45s cubic-bezier(.2, .75, .25, 1), opacity .2s ease; }
.music-icon .mi-arc.a2 { stroke-dasharray: 16; stroke-dashoffset: 16; }
.music-icon[aria-pressed='true'] .mi-arc { stroke-dashoffset: 0; opacity: 1; transition-delay: .15s, .15s; }
.music-icon[aria-pressed='true'] .mi-arc.a2 { transition-delay: .27s, .27s; }
.music-icon .mi-off { stroke-dasharray: 22; stroke-dashoffset: 0; opacity: .85; transition: stroke-dashoffset .3s ease, opacity .3s ease; }
.music-icon[aria-pressed='true'] .mi-off { stroke-dashoffset: 22; opacity: 0; }
/* the note gives one small nod as it turns on, then rests */
.music-icon.just-on svg { animation: music-nod .7s cubic-bezier(.2, .75, .25, 1); }
@keyframes music-nod { 0% { transform: rotate(0); } 35% { transform: rotate(-9deg); } 70% { transform: rotate(4deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) {
  .music-icon.just-on svg { animation: none; }
  .music-icon .mi-head, .music-icon .mi-arc, .music-icon .mi-off { transition: none; }
}
/* wide screens: wordmark, links, language, then the note */
:root body .site-header .site-menu { order: 2; }
:root body .site-header .music-icon { order: 3; margin-left: -.5rem; }

/* Phones, tablets and small laptops (the Spanish labels need about 1250px for one row): one row, and the menu opens below it without changing the header's height. */
/* until the header's script has added has-menu (a frame can be painted before it runs) the desktop links stay out of a narrow bar, where they would sit over the name */
@media (max-width: 80rem) and (scripting: enabled) {
  :root body .site-header:not(.has-menu) .site-menu { display: none; }
}
@media (max-width: 80rem) {
  :root body .site-header.has-menu .menu-toggle { display: inline-flex; gap: .55rem; min-height: 44px; order: 2; }
  :root body .site-header.has-menu .site-menu .nav-list { flex-direction: column; align-items: stretch; }
  :root body .site-header.has-menu .site-menu .lang-switch .velas { flex-direction: row; }
  :root body .site-header .container { height: 3.25rem; padding: 0 .3rem 0 1rem; }
  :root body .site-header .site-name { font-size: 1.3rem; }
  :root body .site-header.has-menu .menu-toggle { background: rgb(245 237 224 / .1); }
  /* the note sits in the bar beside Menu, so it is reachable with the menu closed */
  :root body .site-header .music-icon { order: 1; margin-left: 0; margin-right: -.6rem; }
  :root body .site-header.has-menu .site-menu {
    /* the pill's backdrop filter makes it the containing block, so the sheet lines up with the pill's edges */
    top: calc(100% + .5rem); left: 0; right: 0;
    padding: .75rem; gap: .75rem; border-radius: 1.5rem; border: 1px solid rgb(245 237 224 / .16);
    background: rgb(26 14 20); box-shadow: 0 1rem 2.5rem rgb(20 10 16 / .45);
  }
  :root body .site-header.has-menu .site-menu .nav-list { gap: .25rem; }
  :root body .site-header.has-menu .site-menu .nav-list a {
    font-size: 1.15rem; height: 3rem; min-height: 3rem; width: 100%; justify-content: flex-start; padding: 0 1rem; border-radius: 1rem;
  }
  :root body .site-header.has-menu .site-menu .lang-switch { border: 0; padding: 0; align-self: flex-start; }
}
@media (max-width: 22rem) {
  :root body .site-header .site-name { font-size: 1.15rem; }
  :root body .site-header .container { gap: .75rem; }
  :root body .site-header .music-icon { margin-right: -.45rem; }
}
/* What the pages still share after the round 2 rebuild: the share block's own surface (when Share is not driven by
   a dock), the altar's small notes and the dialog sheet. Each page's look lives in its own files under components;
   tokens and the base pieces (buttons, fields, panels, dialogs) are in base.css. */

/* The share block's surface, when Share draws its own open button. */
.share {
  background: linear-gradient(180deg, rgb(245 237 224 / .045), transparent 40%), var(--panel);
  border: 1px solid var(--line); border-radius: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .35), inset 0 1px 0 rgb(245 237 224 / .06);
}

/* The altar: a quiet note under the offering tray (when the altar is full). */
.altar-note { max-width: 40rem; margin: .25rem auto; font-size: .9rem; color: var(--cream-dim); }

.share h2 { font-size: clamp(1.75rem, 3vw, 2.1rem); }
.share .inline-list .btn { flex: 1 1 auto; }
.share #share-link { font-size: .9rem; color: var(--cream-dim); }
.share p { color: var(--cream-dim); font-size: .95rem; margin: 0; }
.share [data-testid='share-status']:empty { display: none; }

/* Dialogs: a sheet from the bottom on a phone, a card in the middle on a wider screen. */
@media (max-width: 40rem) {
  dialog { margin: auto auto 0; max-width: 100vw; border-radius: 1.5rem 1.5rem 0 0; max-height: 88dvh; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}
dialog fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
dialog legend { padding: 0; margin-bottom: .5rem; font-size: .9rem; font-weight: 700; letter-spacing: .04em; color: var(--marigold); }
/* garland.ts: the hero's painted papel picado on a gold cord. Size it with --gh (flag height). */
.garland { --gh: 2.4rem; --sag: .5; position: relative; pointer-events: none; }
.garland .g-cord { position: absolute; left: -1%; top: 0; width: 102%; height: calc(var(--gh) * var(--sag) + 4px); overflow: visible; }
.garland .g-cord path { fill: none; stroke: #e4a83a; stroke-width: 2.4; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .45)); }
.garland .g-row { position: relative; display: flex; justify-content: space-between; gap: .25rem; }
.garland .g-probe { position: absolute; visibility: hidden; width: 0; height: var(--gh); }
.garland .g-flag { flex: 0 1 auto; min-width: 0; height: var(--gh); width: auto; max-width: none; object-fit: contain; transform-origin: 50% 0; rotate: var(--r, 0deg);
  margin-top: calc(var(--gh) * var(--sag) * 4 * var(--t) * (1 - var(--t)) - 1px); filter: drop-shadow(0 .2rem .25rem rgb(0 0 0 / .45)); }
.pp { position: fixed; z-index: 60; left: 0; right: 0; top: 0; translate: 0 calc(-100% - 5rem); visibility: hidden;
    transition: translate .7s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .7s; pointer-events: none; overflow-x: clip; }
  .pp.show { translate: 0 0; visibility: visible; transition: translate .7s cubic-bezier(.22, .61, .36, 1), visibility 0s; }
  .pp-in { position: relative; padding-top: env(safe-area-inset-top, 0px); background: rgb(24 12 19); color: var(--cream);
    box-shadow: 0 .6rem 1.4rem -.6rem rgb(0 0 0 / .7); border-bottom: 1px solid rgb(242 193 78 / .35); }
  .pp.show .pp-in { animation: pp-sway 1.6s cubic-bezier(.3, .7, .35, 1) both; transform-origin: 50% 0; }
  @keyframes pp-sway { 0% { rotate: -1.2deg; } 35% { rotate: .8deg; } 65% { rotate: -.35deg; } 100% { rotate: 0deg; } }
  .pp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem 1rem; max-width: 64rem; margin: 0 auto;
    padding: .55rem 1rem .9rem; text-align: center; }
  .pp-bar p { margin: 0; min-width: 0; font-weight: 700; font-size: .95rem; line-height: 1.3; text-wrap: balance; }
  .pp-bar button { min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 1.5px solid rgb(245 237 224 / .5); background: rgb(245 237 224 / .08);
    color: inherit; font-weight: 700; font-size: .875rem; pointer-events: auto; }
  .pp.back .pp-bar button { visibility: hidden; }
  .pp-flags { position: absolute; left: .5rem; right: .5rem; top: calc(100% - 1px); --gh: clamp(2rem, 6vw, 2.6rem); }
  /* offline the flags lose their colour; it comes back with the connection */
  .pp-flags .g-flag { transition: filter .9s ease; filter: grayscale(.85) brightness(.62) drop-shadow(0 .2rem .25rem rgb(0 0 0 / .45)); }
  .pp.back .pp-flags .g-flag { filter: drop-shadow(0 .2rem .25rem rgb(0 0 0 / .45)); animation: pp-flutter 1.1s cubic-bezier(.3, .7, .4, 1) both;
    animation-delay: calc(var(--t) * .35s); }
  @keyframes pp-flutter { 0% { rotate: var(--r); } 30% { rotate: calc(var(--r) + 8deg); } 60% { rotate: calc(var(--r) - 4deg); } 100% { rotate: var(--r); } }
  @media (prefers-reduced-motion: reduce) {
    .pp { transition: none; }
    .pp.show { transition: none; }
    .pp.show .pp-in, .pp.back .pp-flags .g-flag { animation: none; }
  }