/* ═══════════════════════════════════════════════════════════════════════════
   Rotaract Club of Hong Kong Island East · bright.css
   THE BRIGHT SITE (DIRECTION-BRIGHT.md). Loaded on every page after wheel.css and before the page's
   own stylesheet. Every rule is scoped to html[data-theme="bright"], so the story page (the film,
   data-theme="film") keeps the dark look of base.css and components.css untouched.

   How it works: the engine's components read tokens. This file re-points those tokens to the
   bright family (the palette is "Sand and wine" since 9 Oct 2026: large fields in white, sand, paper,
   wine and aubergine, cranberry as the accent; see the PALETTE NOTE in the token block. The token and
   class names are kept from the first version, so --blush is the sand and --cream the paper: never
   read a hue into a name), dresses the shell (the
   light header with its scroll-progress cog, the wine footer, the overlays, the preloader), re-skins
   the few engine components that tokens alone cannot turn bright, and adds the bright vocabulary
   every page builds with:
     grounds      .b-ground--white | --blush | --cream | --wine | --aubergine | --cranberry   (+ --seam | --arc: its top edge)
     tones        .b-deep (white type on a deep colour) · .b-warm (ink type on a warm, lighter colour)
                  .b-pale (the page's own ink and cranberry again, for a pale thing inside a tone)
     area colour  [data-area="elders|children|students|animals|neighbours|world"] → --area, --area-tint, --on-area
     panels       .b-panel (+ --blush --cream --white --wine --aubergine --plum --cranberry --apricot --coral --rose --tint --flush)
     cards        .b-card (+ --white --blush --tint) · .b-card__title   (a plain card takes a colour that shows on its ground)
     medallions   .b-medallion (+ --white --area --soft --sm --lg --xl)
     small parts  .b-eyebrow · .b-number + .b-number__label · .b-chip · .b-doors > .b-door (+ .b-door__go)
                  .b-photo (+ --toothed)
     the ticker   .b-ticker[data-ticker] > .b-ticker__row > li   (+ --sm --lg --pair --fade --wine --aubergine --blush --cream --cranberry)
     states       .b-float (a soft shadow) · .b-tilt--left | --right (a few degrees) · .b-bob (a slow float)
   Owner: the shell builder. Page builders use these names and never restyle them globally.
   Every piece is shown on every ground at /styleguide/#bright.

   Mind the cascade: this file is not in a layer, so a rule here beats every rule of components.css,
   its :hover, :checked and [open] variants included. Whenever a property is set here on a component,
   its states are stated here again.

   Rules of the house (the build lints them): colours only as tokens (declared in the block below),
   no gradients, no glass, no glow, no black, nothing under 16px, transforms and opacity for motion.
   The logo and every wheel stay the original cranberry, or white on a colour panel. Never recoloured.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────── tokens ── */
html[data-theme="bright"] {
  color-scheme: light;

  /* PALETTE NOTE, 9 Oct 2026: Michael found the first bright version "too girlish" and chose "Sand and wine"
     (tools/shots/lead/lesspink-chromium-1680-full.jpg, option 1). The token NAMES are kept so nothing breaks:
     --blush is now sand, --cream is paper, --rose is clay, --coral is terracotta, --apricot is amber, --magenta is aubergine.
     No pink grounds, no pink panels. Cranberry is the accent, not a wash. */
  /* The family (DIRECTION-BRIGHT 1). --cranberry (#D41367, base.css) is the logo and is never changed. */
  --wine: #6E0F3B;             /* deep bands, text on pale tints. White 11.7 */
  --plum: #6F2B74;             /* white 9.2 */
  --magenta: #3D1232;             /* aubergine since 9 Oct (was a hot magenta). White 15.8 */
  --rose: #B9805E;             /* clay since 9 Oct (was a pink rose). Ink 5.5 (white fails: 3.3) */
  --coral: #D4654A;             /* terracotta since 9 Oct (was a candy coral). Ink 4.8 (white fails: 3.7) */
  --apricot: #E3A04F;             /* amber. Ink 8.1 (never white) */
  --blush: #F3EBDF;             /* warm SAND since 9 Oct (was a pale pink: "too girlish"). Ink 15.4, ink-soft 7.4 */
  --cream: #FAF6F0;             /* pale warm paper. Ink 16.9, ink-soft 8.2 */
  --ink: #2A0A18;              /* text: a very dark wine, not black. 18.2 on white */
  --ink-soft: #5E4350;             /* secondary text: 8.8 on white, 7.4 on sand, 8.2 on paper */
  --apricot-tint: #F8E7CC;
  --coral-tint: #F3E2D6;
  --plum-tint: #E8E0EA;
  --rose-tint: #F0E2D6;
  --wine-tint: #EAE0DC;
  --magenta-tint: #E6DEE0;
  --white-a10: rgb(255 255 255 / .1);
  --white-a16: rgb(255 255 255 / .16);
  --white-a24: rgb(255 255 255 / .24);
  --white-a40: rgb(255 255 255 / .4);
  --white-a60: rgb(255 255 255 / .6);
  --ink-a06: rgb(42 10 24 / .06);
  --ink-a12: rgb(42 10 24 / .12);
  --ink-a20: rgb(42 10 24 / .2);
  --ink-a50: rgb(42 10 24 / .5);
  --wine-a14: rgb(110 15 59 / .14);
  --cranberry-a32: rgb(212 19 103 / .32);

  /* The engine's own names, re-pointed. Its components need nothing else to turn bright. */
  --black: var(--white);               /* page ground */
  --night: var(--cream);               /* raised panels, cards, fields */
  --night-2: var(--blush);             /* hover, second level */
  --bone: var(--ink);                  /* text and titles */
  --ash: var(--ink-soft);              /* secondary text */
  --cranberry-text: #B50D56;           /* cranberry for small text, links, focus: 6.7 on white, 5.6 on sand, 6.2 on paper. Never re-pointed */
  --cranberry-lit: var(--cranberry-text);   /* the engine's name for it; a tone re-points this one (white inside deep, ink inside warm) */
  --line: var(--ink-a12);
  --line-strong: var(--ink-a50);       /* field borders: 3.6 on white */
  --bone-a06: var(--ink-a06);
  --bone-a10: var(--ink-a12);
  --black-a60: var(--white-a60);
  --black-a85: rgb(255 255 255 / .9);
  --light: rgb(212 19 103 / 0);        /* no pools of light on the bright site */
  --light-0: rgb(212 19 103 / 0);
  --btn-line: var(--cranberry);        /* outlined buttons and round buttons: a cranberry outline (5.0 on white) */

  /* Every wheel is the logo's cranberry on a pale ground and white on a colour panel (the tones below). */
  --wheel-colour: var(--cranberry);
  --wheel-accent: var(--wine);         /* pointers, the escapement's anchor, focus rings round a wheel */
  --window-lit: transparent;           /* a "lit" window of the wheel: nothing. No window is ever filled on the bright site */

  /* A medal: cranberry disc, white engraving, wine ribbon (white disc inside a tone). */
  --medal-disc: var(--cranberry);
  --medal-on: var(--white);
  --medal-ribbon: var(--wine);

  /* Shape: generous. Panels about 28px (20px on phones), cards 20px, fields 14px. */
  --r-panel: clamp(1.25rem, .9rem + 1.5vw, 1.75rem);
  --r-card: 1.25rem;
  --r-field: .875rem;
  --shadow-float: 0 1rem 2.5rem var(--wine-a14);   /* only for things that float */

  /* No bottom bar on the bright site. */
  --hud-h: 0rem;

  scrollbar-color: var(--cranberry) var(--cream);
}

/* The slate line is a confident label on the bright site: 16px, semibold, sentence case, untracked.
   Declared wherever a language is declared, because lang.css sets these per language. */
html[data-theme="bright"],
html[data-theme="bright"] [lang] {
  --fs-slate: 1rem;
  --fw-slate: var(--fw-strong);
  --tracking-slate: 0em;
  --case-slate: none;
}

/* The shell's own tints, named once, so the palette can change under them: nothing in the shell assumes a hue.
   Its grounds are white; its quiet fills are a veil of the ink or cream; its lines are the soft rule. */
html[data-theme="bright"] {
  --shell-ground: var(--white);        /* the header, the overlays, the suggestion bar */
  --shell-tint: var(--ink-a06);        /* the header's pill buttons; the large wheel behind an overlay */
  --shell-tint-2: var(--ink-a12);      /* the same under the pointer or the finger */
  --shell-card: var(--cream);          /* a language row; the preloader's ground */
  --shell-line: var(--line);           /* the progress track; the foot of an overlay's bar */
  --shell-ink: var(--wine);            /* the words and icons on a pill */
}

/* ──────────────────────────────────────────────────── the shell, bright ── */
/* The film's furniture is not on the bright site: no bars, no HUD, no grain, no vignette. layout.html does
   not even write them; this is the guard for a page that includes one by hand. */
[data-theme="bright"] .film,
[data-theme="bright"] .hud,
[data-theme="bright"] .letterbox { display: none; }
[data-theme="bright"] .pool,
[data-theme="bright"] .tilt-shine { display: none; }   /* no pools of light, no glow */

/* The header: a plain light header. The logo in its own cranberry on white (brand.html chooses the file),
   ink links, the language and menu buttons as soft pills, Join in cranberry. */
[data-theme="bright"] .site-header { background: var(--shell-ground); color: var(--ink); }
[data-theme="bright"] .site-header .brand__standin,
[data-theme="bright"] .overlay .brand__standin { color: var(--cranberry); }
[data-theme="bright"] .site-nav__link { color: var(--ink); }
[data-theme="bright"] .site-nav__link[aria-current="page"],
[data-theme="bright"] .site-nav__link.is-pressed { color: var(--cranberry-lit); }
[data-theme="bright"] .tool-btn { color: var(--fg); }
[data-theme="bright"] .tool-btn:active,
[data-theme="bright"] .tool-btn.is-pressed { color: var(--link); }
[data-theme="bright"] .site-header .tool-btn,
[data-theme="bright"] .site-menu__tools .lang-btn {
  padding-inline: .75rem;
  background: var(--shell-tint);
  color: var(--shell-ink);
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}
[data-theme="bright"] .site-header .tool-btn:active,
[data-theme="bright"] .site-header .tool-btn.is-pressed,
[data-theme="bright"] .site-menu__tools .lang-btn:active,
[data-theme="bright"] .site-menu__tools .lang-btn.is-pressed { background: var(--shell-tint-2); color: var(--shell-ink); }
[data-theme="bright"] .site-menu__tools .lang-btn { min-block-size: 3rem; padding-inline: 1.125rem; }
@media (hover: hover) and (pointer: fine) {
  [data-theme="bright"] .site-nav__link:hover { color: var(--cranberry-lit); }
  [data-theme="bright"] .tool-btn:hover { color: var(--link); }
  [data-theme="bright"] .site-header .tool-btn:hover,
  [data-theme="bright"] .site-menu__tools .lang-btn:hover { background: var(--shell-tint-2); color: var(--shell-ink); }
}

/* The scroll-progress line (header.html; core.js moves it): along the foot of the header a line fills in
   cranberry as the page is read, and a small cranberry cog truly rolls along under it on a white hub. A page's
   RAC.playhead.ticks([…]) stands a tooth on the line for each of its parts. Decoration only. Without scripts
   and under reduced motion it is the still line alone. */
/* The cog travels the box of .site-progress (core.js: travel = that box's width less the cog's own). The box
   stands in from both ends of the header by --progress-inset, so the cog, its hub and the corners of its turning
   box never pass the edge of the window; the line itself reaches back out to both edges. */
[data-theme="bright"] .site-progress { --progress-inset: .375rem; position: absolute; inset-inline: var(--progress-inset); inset-block-end: 0; block-size: 0; pointer-events: none; }
[data-theme="bright"] .site-progress__line { position: absolute; inset-inline: calc(var(--progress-inset) * -1); inset-block-end: 0; block-size: .1875rem; overflow: hidden; background: var(--shell-line); }
[data-theme="bright"] .site-progress__done { position: absolute; inset: 0; background: var(--cranberry); transform-origin: 0 50%; transform: scaleX(0); }
[data-theme="bright"] .site-progress__ticks { position: absolute; inset-inline: 0; inset-block-end: .1875rem; block-size: 0; }
[data-theme="bright"] .site-progress__ticks > span {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: calc(var(--at) * 100%);
  inline-size: calc(.375rem * var(--tooth-ratio, 1.2));
  block-size: .375rem;
  translate: -50% 0;
  background: var(--cranberry);
  opacity: .5;
  -webkit-mask: var(--tooth-mask) center / 100% 100% no-repeat;
  mask: var(--tooth-mask) center / 100% 100% no-repeat;
}
[data-theme="bright"] .site-progress__cog {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--cranberry);
}
[data-theme="bright"] .site-progress__cog::before { content: ""; position: absolute; inset: -.1875rem; z-index: -1; border-radius: 50%; background: var(--shell-ground); }
[data-theme="bright"] .site-progress__cog .wheel { inline-size: 100%; block-size: 100%; }
@media (max-width: 40rem) { [data-theme="bright"] .site-progress__ticks { display: none; } }
html:not(.js)[data-theme="bright"] .site-progress__cog,
html:not(.js)[data-theme="bright"] .site-progress__done,
html:not(.js)[data-theme="bright"] .site-progress__ticks { display: none; }
@media (prefers-reduced-motion: reduce) {
  [data-theme="bright"] .site-progress__cog,
  [data-theme="bright"] .site-progress__done,
  [data-theme="bright"] .site-progress__ticks { display: none; }
}

/* The skip link: the cranberry pill, with a wine ring while it has the focus. */
[data-theme="bright"] .skip-link:focus { outline-color: var(--wine); }

/* The cog cursor: the logo's cranberry (wine while it meshes on a control), with a thin white edge so that
   it reads on white, blush and cream and just as well on wine and on cranberry itself. */
[data-theme="bright"] .cog-cursor { color: var(--cranberry); }
[data-theme="bright"] .cog-cursor.is-on { opacity: 1; }
[data-theme="bright"] .cog-cursor.is-away { opacity: 0; }
[data-theme="bright"] .cog-cursor.is-meshed { color: var(--wine); }
[data-theme="bright"] .cog-cursor svg { stroke: var(--white); stroke-width: 14; stroke-linejoin: round; paint-order: stroke fill; }

/* The preloader: on a pale ground the cranberry wheel draws itself tooth by tooth (the first tooth starts in
   wine: the one tooth that leads), then flies onto the wheel of the header logo, or into [data-intro-target]. */
html[data-theme="bright"].rac-intro .preloader::before { background: var(--shell-card); }
[data-theme="bright"] .preloader .wheel__tooth:first-child { animation-name: rac-tooth-first-bright; }
@keyframes rac-tooth-first-bright {
  0% { opacity: 0; fill: var(--wine); }
  16% { opacity: 1; fill: var(--wine); }
  78% { fill: var(--wine); }
  100% { opacity: 1; fill: var(--cranberry); }
}

/* Overlays (the menu, the languages): white, with a large quiet wheel turning slowly behind. */
[data-theme="bright"] .overlay { background: var(--shell-ground); color: var(--ink); }
[data-theme="bright"] .overlay__wheel { color: var(--shell-tint); }
[data-theme="bright"] .overlay__bar { border-block-end: .1875rem solid var(--shell-line); }
[data-theme="bright"] .site-menu__link { color: var(--ink); }
/* Every link is led by a tooth: quiet until it is the current page or under the hand, then cranberry. */
[data-theme="bright"] .site-menu__link::before { opacity: 1; background: var(--shell-tint-2); transition: background-color var(--dur-2) ease; }
[data-theme="bright"] .site-menu__link[aria-current="page"] { color: var(--cranberry-lit); }
[data-theme="bright"] .site-menu__link[aria-current="page"]::before,
[data-theme="bright"] .site-menu__link.is-pressed::before,
[data-theme="bright"] .site-menu__link:focus-visible::before { background: var(--cranberry); }
@media (hover: hover) and (pointer: fine) {
  [data-theme="bright"] .site-menu__link:hover { color: var(--cranberry-lit); }
  [data-theme="bright"] .site-menu__link:hover::before { background: var(--cranberry); }
}

/* The languages: three soft cards; the current one is a cranberry panel with a white medallion. */
[data-theme="bright"] .lang-list { gap: .625rem; border: 0; }
[data-theme="bright"] .lang-row {
  padding: 1rem 1.25rem;
  border: 0;
  border-radius: var(--r-card);
  background: var(--shell-card);
  color: var(--ink);
  transition: background-color var(--dur-2) ease;
}
[data-theme="bright"] .lang-row__english { color: var(--ink-soft); }
[data-theme="bright"] .lang-row[aria-current="true"] { background: var(--cranberry); color: var(--white); }
[data-theme="bright"] .lang-row[aria-current="true"] :is(.lang-row__native, .lang-row__english) { color: var(--white); }
[data-theme="bright"] .lang-row[aria-current="true"]:focus-visible { outline-color: var(--wine); }
[data-theme="bright"] .lang-row__current { inline-size: 2.5rem; block-size: 2.5rem; background: var(--white); color: var(--cranberry-press); }
[data-theme="bright"] .lang-row:not([aria-current="true"]):active,
[data-theme="bright"] .lang-row:not([aria-current="true"]).is-pressed { background: var(--shell-tint-2); }
@media (hover: hover) and (pointer: fine) {
  [data-theme="bright"] .lang-row:not([aria-current="true"]):hover { background: var(--shell-tint-2); }
  [data-theme="bright"] .lang-row:not([aria-current="true"]):hover .lang-row__native { color: var(--cranberry-lit); }
}

/* The language suggestion: a white capsule that floats at the foot of the window (there is no bottom bar). */
[data-theme="bright"] .suggest { border: 0; background: var(--shell-ground); color: var(--ink); box-shadow: var(--shadow-float); }
[data-theme="bright"] .suggest__icon { color: var(--cranberry); }

/* Titles: the lockup's wheel is the logo's wheel, so it is cranberry (white on a colour panel). */
[data-theme="bright"] .lockup__wheel { color: var(--lockup-colour, var(--wheel-colour)); }
[data-theme="bright"] .lockup--mark .lockup__wheel { background: var(--lockup-mark, var(--accent)); }
[data-theme="bright"] .lockup__rule { block-size: .1875rem; border-radius: var(--r-full); background: var(--accent); }
/* A wheel is plain: no window of it is ever filled. (The lockup's lit parameter was the film's way of counting
   its parts; it has no meaning here, and a filled window would be a coloured window, which the logo never has.) */
[data-theme="bright"] .wheel__window.is-lit { fill: transparent; }

/* The set pieces: cranberry wheels, wine pointers, no glow behind them. */
[data-theme="bright"] :where(.wheel-prop, .wheel-family, .wheel-dial, .wheel-countdown, .wheel-quiz, .wheel-card, .wheel-field) {
  --w-cran: var(--wheel-colour);
  --w-white: var(--wheel-accent);
  --w-unlit: var(--rose-tint);
}
[data-theme="bright"] .wheel-prop__light { display: none; }

/* ─────────────────────────────────────────────────────────────── tones ──
   A tone re-points the tokens for everything inside it, the engine's components included.
   Three of them: pale (the page itself, and every pale panel and card wherever it stands), deep and warm. */

/* Pale: ink type, cranberry links and buttons, cranberry wheels. This is what the page has anyway; it is
   stated again on every pale panel and every card, so that one of them standing inside a deep or a warm
   tone is itself again (a cream card on a wine band has ink words, not white ones). */
[data-theme="bright"] :is(.b-pale, .b-ground--white, .b-ground--blush, .b-ground--cream, .b-card,
    .b-panel--blush, .b-panel--cream, .b-panel--white, .b-panel--tint) {
  --bone: var(--ink);
  --ash: var(--ink-soft);
  --fg: var(--ink);
  --fg-muted: var(--ink-soft);
  --heading: var(--ink);
  --link: var(--cranberry-text);
  --accent: var(--cranberry);
  --focus: var(--cranberry-text);
  --error: var(--ink);
  --rule: var(--ink-a12);
  --line: var(--ink-a12);
  --line-strong: var(--ink-a50);
  --bone-a06: var(--ink-a06);
  --bone-a10: var(--ink-a12);
  --row: var(--white);
  --row-hover: var(--cream);
  --field: var(--white);
  --field-line: var(--ink-a50);
  --cranberry-lit: var(--cranberry-text);
  --btn-bg: var(--cranberry);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--cranberry-press);
  --btn-line: var(--cranberry);
  --wheel-colour: var(--cranberry);
  --wheel-accent: var(--wine);
  --window-lit: transparent;
  --medal-disc: var(--cranberry);
  --medal-on: var(--white);
  --medal-ribbon: var(--wine);
  color: var(--fg);
}
/* Rows, chips and fields inside a pale thing: white on sand (--blush), paper (--cream) and the tints; paper on white. */
[data-theme="bright"] :is(.b-card, .b-panel--cream) { --row-hover: var(--blush); }
[data-theme="bright"] :is(.b-card--blush, .b-card--tint) { --row-hover: var(--cream); }
[data-theme="bright"] :is(.b-card--white, .b-panel--white) { --row: var(--cream); --row-hover: var(--blush); --field: var(--cream); }

/* A PLAIN CARD SHOWS ON WHAT IT STANDS ON. Paper on white can hardly be told apart, so a .b-card with no colour
   of its own takes one from its place: sand on white, white on sand, on paper and on a tint, paper inside a deep
   or a warm tone (said in those two blocks below). --card-auto is that colour; the other three are the rows,
   chips and fields inside such a card. A card that names its colour (--white, --blush, --tint, or --card) keeps
   it; a card inside a plain card should name its own. */
html[data-theme="bright"],
[data-theme="bright"] :is(.b-ground--white, .b-panel--white, .b-card--white) { --card-auto: var(--blush); --card-row: var(--white); --card-row-hover: var(--cream); --card-field: var(--white); }
[data-theme="bright"] :is(.b-ground--blush, .b-ground--cream, .b-panel--blush, .b-panel--cream, .b-panel--tint, .b-card--blush, .b-card--tint) { --card-auto: var(--white); --card-row: var(--cream); --card-row-hover: var(--blush); --card-field: var(--cream); }

/* Deep: white type on a deep colour. Buttons turn white with cranberry words.
   (A panel that carries data-area takes its area's tone, unless it is one of the pale panels. Each area is named
   in exactly one place, here or in Warm below: to move an area from one tone to the other, move its [data-area].) */
[data-theme="bright"] :is(.b-deep, .b-ground--wine, .b-ground--aubergine, .b-ground--magenta, .b-ground--cranberry,
    .b-panel--wine, .b-panel--cranberry, .b-panel--plum, .b-panel--aubergine, .b-panel--magenta,
    .b-panel:is([data-area="students"], [data-area="neighbours"], [data-area="world"]):not(.b-panel--tint, .b-panel--blush, .b-panel--cream, .b-panel--white),
    .b-ticker--wine, .b-ticker--aubergine, .b-ticker--cranberry,
    .site-footer, .section--lit, .tone-lit, .panel--lit) {
  --bone: var(--white);
  --ash: var(--blush);
  --fg: var(--white);
  --fg-muted: var(--blush);
  --heading: var(--white);
  --link: var(--white);
  --accent: var(--white);
  --focus: var(--white);
  --error: var(--white);
  --rule: var(--white-a24);
  --line: var(--white-a24);
  --line-strong: var(--white-a60);
  --bone-a06: var(--white-a10);
  --bone-a10: var(--white-a16);
  --row: var(--white-a10);
  --row-hover: var(--white-a16);
  --field: var(--white-a10);
  --field-line: var(--white-a60);
  --cranberry-lit: var(--white);
  --btn-bg: var(--white);
  --btn-fg: var(--cranberry-press);
  --btn-bg-hover: var(--blush);
  --btn-line: var(--white-a60);
  --wheel-colour: var(--white);
  --wheel-accent: var(--white);
  --window-lit: transparent;
  --medal-disc: var(--white);
  --medal-on: var(--cranberry-press);
  --medal-ribbon: var(--blush);
  --card-auto: var(--cream);
  --card-row: var(--white);
  --card-row-hover: var(--blush);
  --card-field: var(--white);
  color: var(--fg);
}
/* The pale secondary colour is too weak on cranberry (sand is 4.4 there): secondary text on cranberry is white (5.1).
   (This corrects the Deep block above, so it must weigh as much, (0,4,0), and follow it: hence :root and :not().
   Written lighter, it was not applied.) */
:root[data-theme="bright"] :is(.b-ground--cranberry, .b-panel--cranberry, .b-ticker--cranberry, .section--lit, .tone-lit, .panel--lit):not(.b-pale) { --fg-muted: var(--white); --ash: var(--white); }
/* A primary button under the finger takes its tone's own hover colour (so no second list of deep things is needed). */
[data-theme="bright"] .btn--primary:is(:active, .is-pressed) { background: var(--btn-bg-hover); }

/* Warm: ink type on a warm, lighter colour (where white type would fail). Buttons turn wine. */
[data-theme="bright"] :is(.b-warm, .b-panel--apricot, .b-panel--coral, .b-panel--rose,
    .b-panel:is([data-area="elders"], [data-area="children"], [data-area="animals"]):not(.b-panel--tint, .b-panel--blush, .b-panel--cream, .b-panel--white)) {
  --bone: var(--ink);
  --ash: var(--ink);
  --fg: var(--ink);
  --fg-muted: var(--ink);
  --heading: var(--ink);
  --link: var(--ink);
  --accent: var(--ink);
  --focus: var(--ink);
  --error: var(--ink);
  --rule: var(--ink-a20);
  --line: var(--ink-a20);
  --line-strong: var(--ink-a50);
  --bone-a06: var(--ink-a06);
  --bone-a10: var(--ink-a12);
  --row: var(--white-a24);
  --row-hover: var(--white-a40);
  --field: var(--white-a40);
  --field-line: var(--ink-a50);
  --cranberry-lit: var(--ink);
  --btn-bg: var(--wine);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--ink);
  --btn-line: var(--ink-a50);
  --wheel-colour: var(--white);
  --wheel-accent: var(--ink);
  --window-lit: transparent;
  --medal-disc: var(--white);
  --medal-on: var(--wine);
  --medal-ribbon: var(--wine);
  --card-auto: var(--cream);
  --card-row: var(--white);
  --card-row-hover: var(--blush);
  --card-field: var(--white);
  color: var(--fg);
}

/* The ring of a focused control is drawn outside it, on the ground it stands on. So a control that carries a
   tone of its own (a wine door on a white section, an area tile, a paper card that is a link on a wine band)
   takes the focus colour of that ground, not its own: cranberry on pale, white on deep, ink on warm. A white
   ring round a wine door on a white page was no ring at all. For a control with no tone this changes nothing.
   (It weighs (0,5,0): it must stay heavier than the tone blocks above, which are (0,4,0).) */
:root[data-theme="bright"] :is(a[href], button, summary, [tabindex]:not([tabindex="-1"])):focus-visible { --focus: inherit; }

/* Selected text: white on cranberry on a pale ground (base.css); wine on white inside a tone; and on a pale
   panel or a card inside a tone, white on cranberry again. */
[data-theme="bright"] :is(.b-deep, .b-warm, .b-ground--wine, .b-ground--aubergine, .b-ground--magenta, .b-ground--cranberry,
    .b-panel--wine, .b-panel--cranberry, .b-panel--plum, .b-panel--aubergine, .b-panel--magenta,
    .b-panel--apricot, .b-panel--coral, .b-panel--rose, .b-panel[data-area], .b-ticker--wine, .b-ticker--aubergine, .b-ticker--cranberry,
    .site-footer, .section--lit, .tone-lit, .panel--lit) ::selection { background: var(--white); color: var(--wine); }
[data-theme="bright"] :is(.b-pale, .b-card, .b-panel--blush, .b-panel--cream, .b-panel--white, .b-panel--tint) ::selection { background: var(--cranberry); color: var(--white); }

/* Grounds: what a whole section stands on. Put the class on the <section>. */
[data-theme="bright"] .b-ground { position: relative; background: var(--bg); color: var(--fg); }
[data-theme="bright"] .b-ground--white { --bg: var(--white); --row: var(--cream); --row-hover: var(--blush); --field: var(--cream); }
[data-theme="bright"] .b-ground--blush { --bg: var(--blush); --row: var(--white); --row-hover: var(--cream); --field: var(--white); }
[data-theme="bright"] .b-ground--cream { --bg: var(--cream); --row: var(--white); --row-hover: var(--blush); --field: var(--white); }
[data-theme="bright"] .b-ground--wine { --bg: var(--wine); }
[data-theme="bright"] :is(.b-ground--aubergine, .b-ground--magenta) { --bg: var(--magenta); }   /* the aubergine: the palette's deepest field (its token kept the name --magenta) */
[data-theme="bright"] .b-ground--cranberry { --bg: var(--cranberry); }   /* cranberry is the accent, not a wash: a whole ground of it is rare */
/* The edge between two grounds, with no markup: this ground's own colour stands up into the section above
   as a row of teeth (--seam) or as an arc of the rim (--arc). Never a wave. (.seam, the engine's own row of
   teeth, does the same as an element and can travel with the scroll.) */
[data-theme="bright"] :is(.b-ground--seam, .b-ground--arc)::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(100% - 1px);
  background: var(--bg);
  pointer-events: none;
}
[data-theme="bright"] .b-ground--seam::before {
  block-size: var(--seam-h);
  -webkit-mask: var(--teeth-mask) 50% 0 / calc(var(--seam-h) * var(--teeth-ratio)) 100% repeat-x;
  mask: var(--teeth-mask) 50% 0 / calc(var(--seam-h) * var(--teeth-ratio)) 100% repeat-x;
}
[data-theme="bright"] .b-ground--arc::before { block-size: clamp(1.5rem, .5rem + 4.5vw, 4.5rem); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }

/* The engine's own tones on the bright site. */
[data-theme="bright"] :is(.section--lit, .tone-lit, .panel--lit) { --bg: var(--cranberry); }

/* ─────────────────────────────────────────────────────────── the footer ──
   On wine behind its toothed seam: the white logo, the white footer wheel, tidy columns at every width,
   the legal lines as soft inner rows, and the two tools at its foot as medallions. */
[data-theme="bright"] .site-footer { --bg: var(--wine); --footer-accent: var(--apricot); }   /* the accent marks the current page and leads each label and row */
[data-theme="bright"] .site-footer__grid { padding-block-start: 0; border-block-start: 0; gap: 2.25rem clamp(2rem, 6vw, 5rem); }
[data-theme="bright"] .site-footer .slate { color: var(--white); }
[data-theme="bright"] .site-footer .slate::before { background: var(--footer-accent); }
[data-theme="bright"] .site-footer__links a { color: var(--white); }
[data-theme="bright"] .site-footer__links a[aria-current] { color: var(--footer-accent); }
[data-theme="bright"] .site-footer__links a.is-pressed { color: var(--footer-accent); }
[data-theme="bright"] #site-pages .site-footer__links { display: block; columns: 2; column-gap: clamp(1.5rem, 4vw, 3rem); }
[data-theme="bright"] #site-pages .site-footer__links > li { break-inside: avoid; }
[data-theme="bright"] .site-footer__legal { gap: .625rem; align-content: start; }
[data-theme="bright"] .site-footer__legal p {
  position: relative;
  max-inline-size: none;
  padding: .875rem 1.125rem .875rem 2.75rem;
  border-radius: var(--r-field);
  background: var(--row);
  color: var(--fg-muted);
}
[data-theme="bright"] .site-footer__legal p::before {
  content: "";
  position: absolute;
  inset-inline-start: 1.125rem;
  inset-block-start: 1.3rem;
  inline-size: calc(.75rem * var(--tooth-ratio, 1.2));
  block-size: .75rem;
  background: var(--footer-accent);
  -webkit-mask: var(--tooth-mask) center / 100% 100% no-repeat;
  mask: var(--tooth-mask) center / 100% 100% no-repeat;
}
[data-theme="bright"] .site-footer__base { border-block-start: 2px solid var(--rule); padding-block-start: 1.5rem; }
[data-theme="bright"] .site-footer__tools { gap: .75rem 1.5rem; }
[data-theme="bright"] .site-footer__tools .tool-btn { inline-size: 3rem; block-size: 3rem; padding: 0; border-radius: 50%; background: var(--white-a16); color: var(--white); transition: background-color var(--dur-2) ease; }
[data-theme="bright"] .site-footer__tools .tool-btn:active,
[data-theme="bright"] .site-footer__tools .tool-btn.is-pressed { background: var(--white-a40); color: var(--white); }
[data-theme="bright"] .backtotop { gap: .75rem; color: var(--white); text-decoration: none; }
[data-theme="bright"] .backtotop .icon {
  box-sizing: border-box;
  inline-size: 3rem;
  block-size: 3rem;
  padding: .8125rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--cranberry-press);
  transition: transform var(--dur-3) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  [data-theme="bright"] .site-footer__links a:hover { text-decoration: underline; text-decoration-color: var(--footer-accent); text-decoration-thickness: 2px; text-underline-offset: .35em; }
  [data-theme="bright"] .site-footer__tools .tool-btn:hover { background: var(--white-a24); color: var(--white); }
  [data-theme="bright"] .backtotop:hover { text-decoration: none; }
  [data-theme="bright"] .backtotop:hover .icon { transform: translate3d(.25rem, 0, 0); }   /* the chevron is turned a quarter to point up, so its own "forward" is up: this lifts it */
}
@media (min-width: 62rem) {
  [data-theme="bright"] .site-footer__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(2rem, 5vw, 5rem); }
  [data-theme="bright"] .site-footer__lead,
  [data-theme="bright"] .site-footer__base { grid-column: 1 / -1; }
}

/* ─────────────────────────────────────────────────── the six area colours ──
   Each area of service owns one colour and keeps it everywhere. Put data-area on any element:
   --area is its colour, --area-tint its pale tint, --on-area the text that passes on it. */
[data-theme="bright"] [data-area="elders"] { --area: var(--apricot); --area-tint: var(--apricot-tint); --on-area: var(--ink); }
[data-theme="bright"] [data-area="children"] { --area: var(--coral); --area-tint: var(--coral-tint); --on-area: var(--ink); }
[data-theme="bright"] [data-area="students"] { --area: var(--plum); --area-tint: var(--plum-tint); --on-area: var(--white); }
[data-theme="bright"] [data-area="animals"] { --area: var(--rose); --area-tint: var(--rose-tint); --on-area: var(--ink); }
[data-theme="bright"] [data-area="neighbours"] { --area: var(--wine); --area-tint: var(--wine-tint); --on-area: var(--white); }
[data-theme="bright"] [data-area="world"] { --area: var(--magenta); --area-tint: var(--magenta-tint); --on-area: var(--white); }

/* ───────────────────────────────────────────────────────────── panels ──
   Large flat colour fields with a generous radius. With data-area a panel takes that area's colour
   and the right tone by itself. Vary panels by role: never chop a section into identical boxes. */
[data-theme="bright"] .b-panel {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  border-radius: var(--r-panel);
  background: var(--panel, var(--area, var(--blush)));
  color: var(--fg);
}
[data-theme="bright"] .b-panel--blush { --panel: var(--blush); }
[data-theme="bright"] .b-panel--cream { --panel: var(--cream); }
[data-theme="bright"] .b-panel--white { --panel: var(--white); }
[data-theme="bright"] .b-panel--wine { --panel: var(--wine); }
[data-theme="bright"] .b-panel--cranberry { --panel: var(--cranberry); }
[data-theme="bright"] .b-panel--plum { --panel: var(--plum); }
[data-theme="bright"] :is(.b-panel--aubergine, .b-panel--magenta) { --panel: var(--magenta); }
[data-theme="bright"] .b-panel--apricot { --panel: var(--apricot); }
[data-theme="bright"] .b-panel--coral { --panel: var(--coral); }
[data-theme="bright"] .b-panel--rose { --panel: var(--rose); }
[data-theme="bright"] .b-panel--tint { --panel: var(--area-tint, var(--blush)); }
[data-theme="bright"] .b-panel--flush { padding: 0; overflow: clip; }

/* ────────────────────────────────────────────────────────────── cards ── */
[data-theme="bright"] .b-card {
  position: relative;
  display: grid;
  gap: .75rem;
  align-content: start;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--r-card);
  background: var(--card, var(--card-auto, var(--cream)));   /* its own colour, or the one its place gives it (tones, above) */
  color: var(--fg);
}
[data-theme="bright"] .b-card:not(.b-card--white, .b-card--blush, .b-card--tint) { --row: var(--card-row, var(--white)); --row-hover: var(--card-row-hover, var(--cream)); --field: var(--card-field, var(--white)); }
[data-theme="bright"] .b-card--white { --card: var(--white); }
[data-theme="bright"] .b-card--blush { --card: var(--blush); }
[data-theme="bright"] .b-card--tint { --card: var(--area-tint, var(--blush)); }
[data-theme="bright"] .b-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  font-weight: var(--fw-title);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
  color: var(--heading);
}
/* A card that is a link answers the hand. */
[data-theme="bright"] a.b-card { text-decoration: none; }
[data-theme="bright"] a.b-card:focus-visible { outline-offset: 4px; }

/* ────────────────────────────────────────────────────────── medallions ──
   An icon in a filled circle (the hub). Every list item, card and step has one. */
[data-theme="bright"] .b-medallion {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: var(--m, 3.5rem);
  block-size: var(--m, 3.5rem);
  border-radius: 50%;
  background: var(--m-bg, var(--btn-bg));       /* cranberry with a white icon; white with a cranberry one inside a deep tone; wine inside a warm one */
  color: var(--m-fg, var(--btn-fg));
}
[data-theme="bright"] .b-medallion .icon { inline-size: 48%; block-size: 48%; }
[data-theme="bright"] .b-medallion .wheel { inline-size: 62%; block-size: 62%; }
[data-theme="bright"] .b-medallion--white { --m-bg: var(--white); --m-fg: var(--cranberry-press); }      /* on a colour panel */
[data-theme="bright"] .b-medallion--area { --m-bg: var(--area); --m-fg: var(--on-area); }
[data-theme="bright"] .b-medallion--soft { --m-bg: var(--blush); --m-fg: var(--cranberry-press); }
[data-theme="bright"] .b-medallion--sm { --m: 2.75rem; }
[data-theme="bright"] .b-medallion--lg { --m: 4.5rem; }
[data-theme="bright"] .b-medallion--xl { --m: clamp(4.5rem, 3.5rem + 4vw, 6.5rem); }
/* Inside a link, a door or a chip the medallion answers: it grows a little, and a wheel in it turns one window. */
[data-theme="bright"] :is(a, button, .b-door, .b-chip) .b-medallion { transition: transform var(--dur-3) var(--ease-out); }
[data-theme="bright"] :is(a, button, .b-door, .b-chip) .b-medallion .wheel { transition: transform var(--dur-5) var(--ease-out); }
[data-theme="bright"] :is(a, button, .b-door):is(:focus-visible, .is-pressed) .b-medallion,
[data-theme="bright"] .b-door:focus-within .b-medallion { transform: scale(1.08); }
[data-theme="bright"] :is(a, button, .b-door):is(:focus-visible, .is-pressed) .b-medallion .wheel,
[data-theme="bright"] .b-door:focus-within .b-medallion .wheel { transform: rotate(60deg); }
@media (hover: hover) and (pointer: fine) {
  [data-theme="bright"] :is(a, button, .b-door):hover .b-medallion { transform: scale(1.08); }
  [data-theme="bright"] :is(a, button, .b-door):hover .b-medallion .wheel { transform: rotate(60deg); }
}

/* ───────────────────────────────────────────────────────── small parts ── */
/* A label above a title: one tooth, then the words, semibold in cranberry. (.slate is the same label.) */
[data-theme="bright"] .b-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  color: var(--cranberry-lit);
  font-size: 1rem;
  font-weight: var(--fw-strong);
  line-height: var(--lh-ui);
}
[data-theme="bright"] .b-eyebrow::before {
  content: "";
  flex: none;
  inline-size: calc(.8em * var(--tooth-ratio, 1.2));
  block-size: .8em;
  background: currentColor;
  -webkit-mask: var(--tooth-mask) center / 100% 100% no-repeat;
  mask: var(--tooth-mask) center / 100% 100% no-repeat;
}

/* A big true number (only the numbers of site.numbers) and the words that follow it. */
[data-theme="bright"] .b-number {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: var(--fw-display);
  line-height: .95;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--heading);
}
[data-theme="bright"] .b-number__label { max-inline-size: 16em; font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: 1.35; }

/* A chip: a small pill that names something, with a medallion or an icon at its start. Its ground is the
   row colour of where it stands (white on the two pale grounds, the paper on white, a veil of white inside a
   tone); --chip and --chip-fg set another. */
[data-theme="bright"] .b-chip {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-block-size: 2.75rem;
  padding: .3rem 1.1rem .3rem .35rem;
  border-radius: var(--r-full);
  background: var(--chip, var(--row));
  color: var(--chip-fg, var(--fg));
  font-weight: var(--fw-strong);
  line-height: var(--lh-ui);
  text-decoration: none;
}
[data-theme="bright"] .b-chip > .b-medallion { --m: 2.125rem; }
[data-theme="bright"] .b-chip > .icon:first-child { margin-inline-start: .55rem; inline-size: 1.25rem; block-size: 1.25rem; color: var(--accent); }
[data-theme="bright"] .b-chip:not(:has(> .b-medallion, > .icon:first-child)) { padding-inline-start: 1.1rem; }
/* A chip that is a link or a button answers the hand, and the chosen one (aria-current, aria-pressed) takes the
   button's colours: cranberry with white words on a pale ground, white with cranberry words inside a tone. */
[data-theme="bright"] :is(a, button).b-chip { cursor: pointer; transition: background-color var(--dur-2) ease, color var(--dur-2) ease; }
[data-theme="bright"] :is(a, button).b-chip:is(:active, .is-pressed) { background: var(--chip-hover, var(--row-hover)); }
[data-theme="bright"] .b-chip:is([aria-current], [aria-pressed="true"]) { background: var(--chip-on, var(--btn-bg)); color: var(--chip-on-fg, var(--btn-fg)); }
[data-theme="bright"] .b-chip:is([aria-current], [aria-pressed="true"]) > .b-medallion { --m-bg: var(--chip-on-fg, var(--btn-fg)); --m-fg: var(--chip-on, var(--btn-bg)); }
[data-theme="bright"] .b-chip:is([aria-current], [aria-pressed="true"]) > .icon:first-child { color: inherit; }
@media (hover: hover) and (pointer: fine) {
  [data-theme="bright"] :is(a, button).b-chip:not([aria-current], [aria-pressed="true"]):hover { background: var(--chip-hover, var(--row-hover)); }
}

/* Doors: two or three panels side by side; the one under the pointer or holding the focus widens. */
[data-theme="bright"] .b-doors { display: grid; gap: clamp(.75rem, .5rem + 1vw, 1.25rem); }
[data-theme="bright"] .b-door { min-inline-size: 0; text-decoration: none; }
[data-theme="bright"] .b-door:focus-visible { outline-offset: 4px; }
/* .b-door__go: the small round arrow at a door's foot. It steps forward when the door opens. */
[data-theme="bright"] .b-door__go {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: transform var(--dur-3) var(--ease-out);
}
[data-theme="bright"] .b-door__go .icon { inline-size: 1.375rem; block-size: 1.375rem; }
[data-theme="bright"] .b-door:is(:focus-visible, :focus-within, .is-pressed) .b-door__go { transform: translate3d(.375rem, 0, 0); }
@media (hover: hover) and (pointer: fine) {
  [data-theme="bright"] .b-door:hover .b-door__go { transform: translate3d(.375rem, 0, 0); }
}
@media (min-width: 56rem) {
  [data-theme="bright"] .b-doors { display: flex; align-items: stretch; }
  [data-theme="bright"] .b-door { flex: 1 1 0; transition: flex-grow var(--dur-4) var(--ease-out); }
  [data-theme="bright"] .b-door:is(:hover, :focus-within) { flex-grow: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="bright"] .b-door,
  [data-theme="bright"] .b-door__go,
  [data-theme="bright"] .b-medallion,
  [data-theme="bright"] .b-medallion .wheel { transition: none; }
}

/* A photograph in a rounded field (natural colour: picture() already gives the right file).
   --toothed: a wide picture whose top edge is a row of the wheel's teeth (for groups). */
[data-theme="bright"] .b-photo { border-radius: var(--r-panel); overflow: clip; background: var(--blush); }
[data-theme="bright"] .b-photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
[data-theme="bright"] .b-photo--toothed {
  --photo-tooth: clamp(.75rem, .5rem + 1vw, 1.25rem);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  -webkit-mask: var(--teeth-mask) 50% 0 / calc(var(--photo-tooth) * var(--teeth-ratio)) var(--photo-tooth) repeat-x, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - var(--photo-tooth) + 1px) no-repeat;
  mask: var(--teeth-mask) 50% 0 / calc(var(--photo-tooth) * var(--teeth-ratio)) var(--photo-tooth) repeat-x, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - var(--photo-tooth) + 1px) no-repeat;
}

/* ────────────────────────────────────────────────────────── the ticker ──
   <div class="b-ticker" data-ticker><ul class="b-ticker__row" role="list"><li>…</li></ul></div>
   A line of items that runs sideways, faster with the scroll and in its direction (bright.js). Each item
   is led by a small cog in the text's own colour. Without scripts and under reduced motion it is a row the
   visitor scrolls sideways by hand. It takes the tone it stands in (white type on wine or cranberry, ink
   on a pale ground); --cranberry, --wine, --blush and --cream make it a band of its own.
   data-ticker="reverse" runs it the other way; data-ticker-speed="60" sets the pace in px a second. */
[data-theme="bright"] .b-ticker {
  --ticker-gap: clamp(1.125rem, .9rem + 1.2vw, 2.25rem);
  position: relative;
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-block: clamp(.875rem, .7rem + .8vw, 1.5rem);
  background: var(--ticker-bg, transparent);
  color: var(--heading);
  font-family: var(--font-display);
  font-size: var(--ticker-fs, calc(clamp(1.375rem, 1.1rem + 1.3vw, 2.25rem) * var(--display-scale)));
  font-weight: var(--fw-display);
  line-height: 1.25;
  letter-spacing: var(--tracking-display);
  white-space: nowrap;
}
[data-theme="bright"] .b-ticker__track { display: flex; flex: none; gap: var(--ticker-gap); }
[data-theme="bright"] .b-ticker__row { display: flex; flex: none; align-items: center; gap: var(--ticker-gap); margin: 0; padding: 0; list-style: none; }
[data-theme="bright"] .b-ticker > .b-ticker__row { padding-inline: var(--gutter); }   /* by hand: room at both ends */
[data-theme="bright"] .b-ticker__row > li { display: inline-flex; flex: none; align-items: center; gap: var(--ticker-gap); max-inline-size: none; }
[data-theme="bright"] .b-ticker__row > li::before {
  content: "";
  flex: none;
  inline-size: .62em;
  block-size: .62em;
  background: currentColor;
  -webkit-mask: var(--wheel-full-mask) center / contain no-repeat;
  mask: var(--wheel-full-mask) center / contain no-repeat;
}
[data-theme="bright"] .b-ticker a { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--target); min-block-size: var(--target); color: inherit; font-weight: inherit; text-decoration: none; }
[data-theme="bright"] .b-ticker a:focus-visible { outline-offset: .2em; }
@media (hover: hover) and (pointer: fine) {
  [data-theme="bright"] .b-ticker a:hover { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em; }
}
[data-theme="bright"] .b-ticker.is-live { overflow: hidden; }
[data-theme="bright"] .b-ticker.is-live .b-ticker__track { will-change: transform; }
[data-theme="bright"] .b-ticker--sm { --ticker-fs: 1.125rem; --ticker-gap: 1.125rem; padding-block: .75rem; font-family: var(--font-text); font-weight: var(--fw-strong); letter-spacing: 0; }
[data-theme="bright"] .b-ticker--sm:has(a) { padding-block: .125rem; }   /* its links are 44px targets: they bring the height */
[data-theme="bright"] .b-ticker--lg { --ticker-fs: calc(clamp(2rem, 1.4rem + 3vw, 4rem) * var(--display-scale)); }
[data-theme="bright"] .b-ticker--pair .b-ticker__row > li:nth-child(even) { font-weight: var(--fw-light); letter-spacing: var(--tracking-light); }   /* heavy, light, heavy: the logo's own pair */
[data-theme="bright"] .b-ticker--cranberry { --ticker-bg: var(--cranberry); }
[data-theme="bright"] .b-ticker--wine { --ticker-bg: var(--wine); }
[data-theme="bright"] .b-ticker--aubergine { --ticker-bg: var(--magenta); }
[data-theme="bright"] .b-ticker--blush { --ticker-bg: var(--blush); }
[data-theme="bright"] .b-ticker--cream { --ticker-bg: var(--cream); }
[data-theme="bright"] .b-ticker--fade {
  -webkit-mask: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* ───────────────────────────────────────────────────────────── states ──
   .b-float     a thing that floats: the one soft, wine-tinted shadow of the site
   .b-tilt--left / --right   set a card or a photograph a few degrees off true
   .b-bob       a slow float up and down (stops with the footer's pause button and under reduced motion)
   These use the rotate and translate properties. On an element that also carries data-reveal, data-tilt,
   data-magnetic, data-parallax or data-spin, put them on a wrapper instead (tools/README.md 20). */
[data-theme="bright"] .b-float { box-shadow: var(--shadow-float); }
[data-theme="bright"] .b-tilt--left { rotate: -3deg; }
[data-theme="bright"] .b-tilt--right { rotate: 3deg; }
@media (prefers-reduced-motion: no-preference) {
  html.js[data-theme="bright"] .b-bob { animation: b-bob 5.5s var(--ease-in-out) infinite alternate; }
}
html.is-motion-paused[data-theme="bright"] .b-bob { animation-play-state: paused; }
@keyframes b-bob {
  from { translate: 0 -.375rem; }
  to { translate: 0 .375rem; }
}

/* ══════════════════════════════════════════ the engine's components, bright ══
   What tokens alone cannot do: no hairline borders, generous corners, soft rows, colour heads. */

/* The slate line is the same confident label as .b-eyebrow: one tooth, then the words, semibold in
   cranberry (white inside a deep tone, ink inside a warm one). Several items are parted by a hub. */
[data-theme="bright"] .slate { gap: .4em .7em; color: var(--cranberry-lit); }
[data-theme="bright"] .slate::before { inline-size: calc(.8em * var(--tooth-ratio, 1.2)); block-size: .8em; background: currentColor; }
/* (Only between the slate's own items: the build also writes spans straight into a label, .nb round a name and
   .w round a Chinese word, and those are words of ONE item. They get no separator and no box of their own.) */
[data-theme="bright"] .slate > span:not(.nb, .w) + span:not(.nb, .w) { display: inline-flex; align-items: center; gap: .7em; padding-inline-start: 0; border-inline-start: 0; }
[data-theme="bright"] .slate > span:not(.nb, .w) + span:not(.nb, .w)::before { content: ""; flex: none; inline-size: .3em; block-size: .3em; border-radius: 50%; background: currentColor; opacity: .55; }
[data-theme="bright"] .slate--white { color: var(--white); }
[data-theme="bright"] .slate--bone { color: var(--fg); }

/* Buttons: the outlined one is a cranberry outline that fills when it is used; the round one the same. */
[data-theme="bright"] .btn--secondary { border-width: 2px; border-color: var(--btn-line); color: var(--link); }
[data-theme="bright"] .btn--secondary:active,
[data-theme="bright"] .btn--secondary.is-pressed { border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); }
[data-theme="bright"] .round-btn { border-width: 2px; color: var(--link); }
[data-theme="bright"] .round-btn:active,
[data-theme="bright"] .round-btn.is-pressed { border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); }
[data-theme="bright"] .link { color: var(--link); text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) {
  [data-theme="bright"] .btn--secondary:hover { border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); }
  [data-theme="bright"] .round-btn:hover { border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); }
  [data-theme="bright"] .link:hover { text-decoration-thickness: 3px; }
  [data-theme="bright"] a:not([class]):hover { color: var(--heading); }
}
/* A button that cannot be used (scripts off, a form being sent, the first step of a dial) is a quiet neutral
   pill: a veil of ink with soft ink words; a veil of white with pale words inside a deep tone. Never the same
   button faded: cranberry at part strength is pink. It does not answer the pointer, and its cog stays still. */
[data-theme="bright"] .btn:is([disabled], [aria-disabled="true"]),
[data-theme="bright"] .btn:is([disabled], [aria-disabled="true"]):is(:hover, :active, .is-pressed) {
  border-color: transparent;
  background: var(--bone-a10);
  color: var(--fg-muted);
  opacity: 1;
}
[data-theme="bright"] .btn:is([disabled], [aria-disabled="true"])::before { rotate: none; }

/* Frames: rounded, no hairline over the picture. The cog frame and the window keep the wheel's own shape. */
[data-theme="bright"] .frame:not(.frame--cog, .frame--window) { border-radius: var(--r-card); }
[data-theme="bright"] .frame--film::after,
[data-theme="bright"] .frame--line::after { content: none; }
/* A line over a picture stands on a white label, not on a shadow. */
[data-theme="bright"] .subtitle { text-shadow: none; }
[data-theme="bright"] .frame > .subtitle {
  inset-inline: 4%;
  inset-block-end: 5%;
  inline-size: fit-content;
  max-inline-size: 92%;
  margin-inline: auto;
  padding: .5rem 1rem;
  border-radius: var(--r-field);
  background: var(--white);
  color: var(--ink);
}
/* The placeholder frame: the second pale of the page, with a white wheel. */
[data-theme="bright"] .ph { background: var(--night-2); color: var(--ink-soft); }
[data-theme="bright"] .ph__wheel { fill: var(--white); }

/* A poster is a bright event card: a rounded panel with a colour head (the area's colour when the card
   carries data-area, cranberry otherwise) that holds the label and the picture; the facts stand below on
   the pale panel. A day that is still to be confirmed has a pale head and an unlit wheel. */
[data-theme="bright"] .poster {
  --poster-head: var(--area, var(--cranberry));
  --on-head: var(--on-area, var(--white));
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-panel);
  background: var(--row);
  overflow: clip;
}
[data-theme="bright"] .poster--tbc { --poster-head: var(--area-tint, var(--night-2)); --on-head: var(--ink); }
[data-theme="bright"] .poster > .slate { padding: 1.25rem clamp(1.25rem, 1rem + 1vw, 1.75rem) 0; background: var(--poster-head); color: var(--on-head); }
[data-theme="bright"] .poster__art { padding: 1rem clamp(1.25rem, 1rem + 1vw, 1.75rem) 1.5rem; background: var(--poster-head); color: var(--on-head); }
[data-theme="bright"] .poster__art > :is(.wheel, img) { color: var(--white); }   /* a wheel is cranberry or white, never ink: white on every head */
[data-theme="bright"] .poster__body { padding: 1.5rem clamp(1.25rem, 1rem + 1vw, 1.75rem) 1rem; }
[data-theme="bright"] .poster__foot { padding: .5rem clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 1.75rem); }

/* A medal: a cranberry disc with a cog edge and white engraving on a wine ribbon (a white disc inside a tone). */
[data-theme="bright"] .medal__ribbon { background: var(--medal-ribbon); }
[data-theme="bright"] .medal__disc { background: var(--medal-disc); color: var(--medal-on); }
[data-theme="bright"] .medal__disc::before { border-color: currentColor; }
[data-theme="bright"] .medal__disc::after { border-color: currentColor; opacity: .4; }
[data-theme="bright"] .medal__years { font-size: .875rem; }   /* lint-ok: engraving on a medal, white on cranberry 5.1, semibold */
[data-theme="bright"] .stat--lit .stat__num { color: var(--accent); }

/* Panels: flat tinted fields, no hairline. --line is the outlined one (two pixels, soft). */
[data-theme="bright"] .panel { border-color: transparent; }
[data-theme="bright"] .panel--raised { background: var(--row-hover); }
[data-theme="bright"] .panel--line { border: 2px solid var(--rule); }
[data-theme="bright"] .panel.is-pressed,
[data-theme="bright"] .poster.is-pressed { border-color: transparent; }
[data-theme="bright"] .tick-scale { border-block-start-width: 2px; }
[data-theme="bright"] .ring__track { stroke: var(--rule); }

/* Dated entries and calendar lines are soft inner rows, not ruled lines. */
[data-theme="bright"] .entry,
[data-theme="bright"] .calendar-line { padding: 1.125rem clamp(1rem, .8rem + 1vw, 1.5rem); border: 0; border-radius: var(--r-card); background: var(--row); }
[data-theme="bright"] :is(.entry, .calendar-line) + :is(.entry, .calendar-line) { margin-block-start: .625rem; }

/* Questions: each a soft row; the cog sits in a filled hub and turns one window as the row opens. */
[data-theme="bright"] .faq { display: grid; gap: .625rem; border: 0; }
[data-theme="bright"] .faq__item { border: 0; border-radius: var(--r-card); background: var(--row); transition: background-color var(--dur-2) ease; }
[data-theme="bright"] .faq__item[open]:not(.is-closing) { background: var(--row-hover); }
[data-theme="bright"] .faq__q { padding: .875rem 1rem .875rem clamp(1rem, .8rem + 1vw, 1.5rem); border-radius: var(--r-card); }
[data-theme="bright"] .faq__a { padding-inline: clamp(1rem, .8rem + 1vw, 1.5rem); }
[data-theme="bright"] .faq__mark { box-sizing: border-box; inline-size: 2.75rem; block-size: 2.75rem; padding: .5625rem; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); }
[data-theme="bright"] .faq__q:active,
[data-theme="bright"] .faq__q.is-pressed { color: var(--link); }

/* The turn-over card: two flat faces, the row colour in front and its second step behind. */
[data-theme="bright"] .turn-card__face { border: 0; border-radius: var(--r-panel); background: var(--row); }
[data-theme="bright"] .turn-card__face--back { background: var(--row-hover); }
[data-theme="bright"] .turn-card__btn { border-radius: var(--r-panel); }
[data-theme="bright"] .turn-card.is-turned .turn-card__btn .icon { color: var(--link); }
[data-theme="bright"] .turn-card--seat .turn-card__face { border: 2px dashed var(--line-strong); background: transparent; }
[data-theme="bright"] .turn-card--seat .turn-card__mono { color: var(--fg-muted); }
@media (hover: hover) and (pointer: fine) {
  [data-theme="bright"] .turn-card__btn:hover .icon { color: var(--link); }
}

/* The countdown shell: four soft tiles, heavy figures. */
[data-theme="bright"] .countdown__units { gap: .625rem; }
[data-theme="bright"] .countdown__unit { justify-items: center; min-inline-size: calc(2ch + 2rem); padding: .875rem 1rem .75rem; border-radius: var(--r-card); background: var(--row); text-align: center; }
[data-theme="bright"] .countdown__num { font-weight: var(--fw-display); }
[data-theme="bright"] .countdown__escapement { color: var(--wheel-colour); }

/* ─────────────────────────────────────────────────────── forms on light ──
   Soft fields with a firm two-pixel edge (3.6 on white: the edge is what says "a field"), large labels
   above, errors said in words. A chosen chip and a ticked box take the button's colours, so they pass on
   every pale ground, and turn white inside a deep panel. */
[data-theme="bright"] .field__input { border-width: 2px; }
[data-theme="bright"] .field__input:focus-visible { border-color: var(--focus); }
[data-theme="bright"] .field__input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 100vmax var(--cream) inset; caret-color: var(--ink); }
[data-theme="bright"] .field.is-invalid .field__input,
[data-theme="bright"] .field.is-invalid .check__box { border-color: var(--cranberry-lit); box-shadow: 0 0 0 1px var(--cranberry-lit); }
[data-theme="bright"] .chip > span { border-width: 2px; transition: background-color var(--dur-2) ease, border-color var(--dur-2) ease, color var(--dur-2) ease; }
[data-theme="bright"] .chip > input:checked + span { border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); }
[data-theme="bright"] .chip.is-pressed > span { background: var(--row-hover); }
[data-theme="bright"] .check__box { border-width: 2px; color: var(--btn-fg); }
[data-theme="bright"] .check__input:checked + .check__box { border-color: var(--btn-bg); background: var(--btn-bg); }
@media (hover: hover) and (pointer: fine) {
  [data-theme="bright"] .field__input:hover { border-color: var(--fg); }
  [data-theme="bright"] .chip > input:not(:checked):hover + span { border-color: var(--fg); background: var(--row-hover); }
}
/* What the form says back (nothing was sent · sent · could not be sent) is a soft row led by a hub that holds
   the keyway, the same mark that ticks a box. The same for the line that stands in when scripts are off. */
[data-theme="bright"] .form__status {
  position: relative;
  align-content: center;
  min-block-size: 4.25rem;
  padding: 1rem 1.25rem 1rem 4.25rem;
  border: 0;
  border-radius: var(--r-card);
  background: var(--row-hover);
}
[data-theme="bright"] .form__status::before { content: ""; position: absolute; inset-inline-start: 1rem; inset-block-start: 1rem; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--btn-bg); }
[data-theme="bright"] .form__status::after {
  content: "";
  position: absolute;
  inset-inline-start: 1.5625rem;
  inset-block-start: 1.5625rem;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  background: var(--btn-fg);
  -webkit-mask: var(--keyway-mask) center / contain no-repeat;
  mask: var(--keyway-mask) center / contain no-repeat;
}
[data-theme="bright"] .form__noscript,
[data-theme="bright"] .form__preview { padding: .875rem 1.125rem; border: 0; border-radius: var(--r-field); background: var(--row-hover); }