/* ==========================================================================
   CDRA — style.css
   Fluid, device-independent layout. NO fixed-pixel layout widths.
   Rules (see AGENTS.md): rem/clamp()/dvh only, 44px tap targets, safe areas,
   prefers-reduced-motion respected, one viewport meta, zoom never disabled.
   Motion (v1.5.0): CSS only, small, interruptible. Ambient/scroll motion uses the
   individual `translate` / `scale` / `opacity` properties so it never fights the
   `transform` that the press feedback (:active) uses.
   ========================================================================== */

:root {
  color-scheme: light;

  --ink: #260041;
  --ink-soft: #5b4470;          /* secondary text, 8.6:1 on white */
  --bg: #ffffff;
  --bar-bg: #f8f8f8;
  --dot-rgb: 38 0 65;           /* screen-dots fill (v1.13.15: was hard-coded in @keyframes dot-fill) */

  /* v1.9.0: ONE typeface for everything: Outfit, Regular 400 + Bold 700 for numbers (see fonts/fonts/fonts-site.css).
     The two variables stay so the roles are still easy to tell apart in the rules below. */
  --f-body:  'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-title: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --bar: clamp(2.75rem, 6.4vw, 3.75rem);
  --bar-full: calc(var(--bar) + var(--safe-top));
  --pad: clamp(1.5rem, 4vw, 2.75rem); /* >= 1.5rem keeps text clear of the screen dots */

  /* type scale: limited by BOTH width and height so it fits any screen */
  /* v1.7.0: ~20% smaller than v1.5.0. Floors: body 1rem (16px), label 0.9375rem, hint 0.875rem, small 0.8125rem (13px) */
  --fs-display: clamp(1.25rem, min(5.6vw, 3.7dvh), 2.625rem);
  --fs-title:   clamp(1rem,    min(3.8vw, 2.5dvh), 1.8125rem);
  --fs-label:   clamp(0.9375rem, min(3vw, 1.9dvh), 1.1875rem);
  --fs-body:    clamp(1rem, 0.94rem + 0.3vw, 1.0625rem);
  --fs-hint:    0.875rem;
  --fs-small:   0.8125rem;

  --cover-max: clamp(14rem, 27vw, 32rem);
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* press: fast and critically damped; release: a small overshoot (a "hop") */
  --press: 90ms ease-out;
  --spring: 420ms cubic-bezier(.34, 1.45, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-synthesis: none; /* Outfit ships Regular and Bold only: never fake italic or other weights */
  line-height: 1.25;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; height: auto; }
picture { display: contents; } /* <picture> только для WebP; раскладку задаёт <img> */

a {
  color: inherit;
  text-decoration: none;
  -webkit-touch-callout: none;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
  border-radius: 6px;
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--bar-full);
  padding: var(--safe-top) var(--safe-right) 0 var(--safe-left);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to bottom, var(--bar-bg), var(--bg));
}
/* v1.9.4 (task 12.7): the bar is the floating functional layer, so it becomes a translucent material
   (blur + light fill) and content passes softly beneath it while scrolling. Only where backdrop-filter works;
   everywhere else (and under reduced transparency / more contrast, see the preferences block at the end)
   the solid gradient above stays. Fill 78% white keeps the ink logo >= 10:1 even over the darkest content
   (the ink bar #260041). The bar takes no extra space: --bar-full is unchanged. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
  }
}
.topbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.logo {
  width: auto;
  height: clamp(0.9375rem, 1.8vw, 1.3125rem);
  aspect-ratio: 246 / 46;
}

/* ---------- Screens (sections) ---------- */
.screen, .page-404 {
  min-height: 100vh;
  min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always; /* один свайп = один экран */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:
    var(--bar-full)
    calc(var(--pad) + var(--safe-right))
    max(12px, var(--safe-bottom))
    calc(var(--pad) + var(--safe-left));
}

.stack {
  flex: 1 0 auto;
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.375rem, 1.4dvh, 1rem);
  padding-block: clamp(0.5rem, 1.6dvh, 1.25rem);
}

/* ---------- Typography ---------- */
h1, h2, h3, p, dl, dd, dt, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }

.t-display, .t-title, .t-num, .t-label, .t-light, .section-title {
  text-align: center;
  font-weight: normal;
  text-wrap: balance;
}
.t-display { font-family: var(--f-title); font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.01em; }
.t-title   { font-family: var(--f-title); font-size: var(--fs-title);   line-height: 1.1;  letter-spacing: -0.005em; }
.t-num     { font-family: var(--f-title); font-size: var(--fs-display); line-height: 1;    letter-spacing: -0.01em; font-weight: 700; }
.t-label   { font-family: var(--f-body);  font-size: var(--fs-label);   line-height: 1.2; }
.t-light   { font-family: var(--f-body); font-size: var(--fs-body);   line-height: 1.3; }

.section-title {
  font-family: var(--f-title);
  font-size: var(--fs-label);
  padding-top: clamp(0.5rem, 3dvh, 2rem);
}

/* ---------- Hero ---------- */
.hero-media { display: flex; justify-content: center; width: 100%; }

.cover {
  height: auto;
  width: min(80vw, var(--cover-max), max(9rem, 36dvh));
}
.cover--wide   { aspect-ratio: 900 / 668; }
.cover--square {
  aspect-ratio: 1 / 1;
  width: min(72vw, calc(var(--cover-max) * 0.8), max(9rem, 29dvh));
  border-radius: 4px;
}

/* ---------- "Swipe / next" hint ---------- */
.next {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  margin-top: auto;
}
.next-text { font-family: var(--f-body); font-size: var(--fs-hint); text-align: center; }
.hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hint-touch { display: none; }
  .hint-mouse { display: inline; }
}
.arrow { width: clamp(1.125rem, 2.8vw, 1.5rem); height: auto; aspect-ratio: 66 / 74; }

/* ---------- Information screen ---------- */
.thumb {
  width: clamp(6rem, min(40vw, 23dvh), 12.5rem);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 4px;
}
.info { width: min(100%, 18rem); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.5rem, 2dvh, 1.25rem); }
.facts { display: flex; flex-direction: column; gap: clamp(0.5rem, 1.8dvh, 1.25rem); width: 100%; }
.facts dt { font-family: var(--f-body); font-size: var(--fs-label); line-height: 1.2; }
.facts dd { font-family: var(--f-title); font-size: var(--fs-title); line-height: 1.1; margin-top: 0.15em; }
.facts dd.is-light { font-family: var(--f-body); font-size: var(--fs-display); line-height: 1.05; }

/* ---------- Awards screen ---------- */
.award-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; width: 100%; }
.award-head .t-label, .award-head .t-display, .award-head .t-title { text-align: left; }
.awards { display: flex; flex-direction: column; gap: clamp(0.25rem, 1.2dvh, 0.75rem); width: 100%; }
.award-date { font-family: var(--f-body); font-size: var(--fs-label); line-height: 1.2; margin-top: clamp(0.25rem, 1dvh, 0.75rem); }
.award-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding-block: 0.125rem;
}
.award-num  { font-family: var(--f-title);  font-weight: 700; font-size: clamp(1.125rem, min(4.8vw, 3.4dvh), 1.9rem); line-height: 1; }
.award-unit { font-family: var(--f-body); font-size: clamp(0.9375rem, min(3.8vw, 2.6dvh), 1.4rem); line-height: 1; }
.award-link[aria-current="page"] .award-num { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.icon { width: 1rem; height: 1rem; flex: none; }

.award-intro { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.5rem, 2dvh, 1.25rem); }

@media (min-width: 600px) {
  .s3 .info { flex-direction: row; align-items: center; justify-content: center; width: min(100%, 34rem); gap: clamp(1.25rem, 4vw, 3rem); }
  .s3 .awards { width: auto; min-width: 0; }
  .s3 .award-intro { flex: 0 0 auto; }
  .s3 .award-head .t-display { white-space: nowrap; font-size: clamp(1rem, 2.5vw, 1.4rem); }
  .s3 .award-head .t-title   { font-size: clamp(0.9375rem, 1.8vw, 1.0625rem); }
  .s3 .thumb { width: clamp(5.5rem, min(18vw, 23dvh), 10.5rem); }
  .s3 .award-num  { font-size: clamp(1.0625rem, 2.5vw, 1.4rem); }
  .s3 .award-unit { font-size: clamp(0.9375rem, 1.8vw, 1.0625rem); }
}

/* ---------- Bio screen ---------- */
.bio { width: 100%; max-width: 30rem; display: flex; flex-direction: column; gap: clamp(0.75rem, 2.4dvh, 2rem); padding-block: clamp(0.25rem, 1.2dvh, 1.5rem); }
.bio p { font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.35; text-wrap: pretty; hyphens: auto; }
.bio p:nth-child(odd)  { text-align: left; }
.bio p:nth-child(even) { text-align: right; }

.full-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  margin-top: clamp(0.375rem, 2dvh, 1.25rem);
  font-family: var(--f-body);
  font-size: var(--fs-label);
}

.site-foot { width: 100%; padding-top: 0; text-align: center; }
.foot-note { max-width: 30rem; margin-inline: auto; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-soft); text-wrap: balance; }
.foot-link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.5rem; font-size: var(--fs-small); color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
.ver { font-family: var(--f-body); font-size: var(--fs-small); letter-spacing: 0.04em; color: var(--ink-soft); }

/* ---------- 404 ---------- */
.page-404 .t-light { max-width: 28rem; }
.page-404 .full-info { margin-top: clamp(0.5rem, 2dvh, 1.5rem); }

/* ---------- Screen dots (индикатор экранов сбоку; только CSS) ----------
   Текущий экран подсвечивает scroll-driven animation (animation-timeline: view()).
   Где этого нет — точки скрыты целиком: неактивный индикатор вводил бы в заблуждение. */
.dots { display: none; }
@supports (animation-timeline: view()) {
  body { timeline-scope: --s1, --s2, --s3, --s4; }
  .s1 { view-timeline: --s1 block; }
  .s2 { view-timeline: --s2 block; }
  .s3 { view-timeline: --s3 block; }
  .s4 { view-timeline: --s4 block; }

  .dots {
    position: fixed;
    z-index: 900;
    top: 50%;
    right: var(--safe-right);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
  }
  .dots a {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 44px;
    height: 44px;
    padding-right: 0.5rem;
  }
  .dots a:focus-visible { outline-offset: -3px; }
  .dots a::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    border: 2px solid var(--ink-soft);
    background-color: transparent;
    animation: dot-fill linear both;
  }
  .dots a:nth-child(1)::before { animation-timeline: --s1; }
  .dots a:nth-child(2)::before { animation-timeline: --s2; }
  .dots a:nth-child(3)::before { animation-timeline: --s3; }
  .dots a:nth-child(4)::before { animation-timeline: --s4; }
}
/* 0% — экран только входит, 50% — стоит на месте, 100% — ушёл: соседние точки перетекают друг в друга */
@keyframes dot-fill {
  0%   { background-color: rgb(var(--dot-rgb) / 0); }
  50%  { background-color: rgb(var(--dot-rgb) / 1); }
  100% { background-color: rgb(var(--dot-rgb) / 0); }
}

/* ---------- Short landscape screens (phones turned sideways) ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --bar: 3rem; }
  /* v1.9.6 (task 12.2, first part): the plaque is wider here, so the table does not wrap and the screen fits */
  .s1 .plaque { flex-direction: row; width: min(calc(100% - 1rem), 40rem); max-width: 52rem; gap: clamp(1rem, 4vw, 3rem); }
  .s1 .hero-media { width: auto; flex: 0 1 40%; }
  .s1 .ledger { flex: 1 1 60%; }
  .s1 .dedication { display: none; }
  .s1 .ledger-top  { padding-block: 0.1875rem; letter-spacing: 0.05em; }
  .s1 .ledger-top span { white-space: nowrap; }
  .s1 .ledger-unit { letter-spacing: 0.04em; white-space: nowrap; }
  .s1 .ledger-rank { gap: 0.5rem; }
  .s1 .tier-row    { padding-block: 0.25rem; }
  .s1 .ledger-rank { padding-block: 0.25rem; }
  .s1 .plaque .cover        { width: min(100%, max(8rem, calc((100dvh - var(--bar-full) - 8rem) * 1.348))); }
  .s1 .plaque .cover--square{ width: min(100%, max(7rem, calc(100dvh - var(--bar-full) - 10.5rem))); }
  .home-lead { display: none; }
  .home-plaque .home-name { font-size: 1.75rem; }
  .logo { height: 0.9375rem; }
  .next { padding-block: 0.25rem; gap: 0.25rem; }
  .arrow { width: 1rem; }
}

/* ---------- Wide screens ---------- */
@media (min-width: 1400px) and (min-height: 900px) {
  .stack { max-width: 40rem; }
}

/* ---------- Motion (v1.5.0) ----------
   Small and purposeful: a quiet entrance, content that settles in as a screen arrives,
   a hop on release, a slow "breath" on the cover and the arrow. CSS only.
   Everything is inside no-preference; reduced motion gets opacity feedback only. */
@keyframes rise   { from { opacity: 0; translate: 0 0.75rem; } to { opacity: 1; translate: 0 0; } }
@keyframes settle { from { opacity: 0; translate: 0 1rem; }    to { opacity: 1; translate: 0 0; } }
@keyframes fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.014; } }
@keyframes bob     { 0%, 100% { translate: 0 0; } 50% { translate: 0 0.3rem; } }

@media (prefers-reduced-motion: no-preference) {
  /* 1. Entrance of the first screen (fill: backwards, so nothing is left holding a value) */
  .topbar        { animation: fade 400ms ease-out backwards; }
  .s1 .hero-media           { animation: rise 560ms var(--ease) 60ms  backwards; }
  .s1 .ledger               { animation: rise 560ms var(--ease) 160ms backwards; }
  .s1 .dedication           { animation: rise 560ms var(--ease) 240ms backwards; }
  .s1 .next                 { animation: fade 500ms ease-out 480ms backwards; }
  .page-404 .stack > *      { animation: rise 520ms var(--ease) backwards; }
  .page-404 .stack > :nth-child(2) { animation-delay: 70ms; }
  .page-404 .stack > :nth-child(3) { animation-delay: 140ms; }
  .page-404 .stack > :nth-child(4) { animation-delay: 210ms; }

  /* 2. Slow ambient "breath" (tiny; individual properties, so :active still works) */
  /* v1.13.4: the cover no longer "breathes" (a permanent 1.4% scale kept the picture slightly soft); it zooms on hover/press instead */
  .arrow { animation: bob 2.8s ease-in-out infinite; }

  /* 3. Press = instant, release = a small hop. Transitions retarget from the current value, so they can be interrupted. */
  .topbar a, .next, .award-link, .full-info, .foot-link, .dots a::before {
    transition: transform var(--spring);
  }
  .topbar a:active, .next:active, .award-link:active, .full-info:active, .foot-link:active {
    transform: scale(0.96);
    transition: transform var(--press);
  }
  .dots a:active::before { transform: scale(0.75); transition: transform var(--press); }
  .full-info .icon { transition: translate var(--spring); }

  /* 4. Pointer devices: a light lift on hover */
  @media (hover: hover) and (pointer: fine) {
    .topbar a:hover { transform: scale(1.05); }
    .award-link:hover { transform: translateX(0.25rem); }
    .full-info:hover { transform: translateY(-0.125rem); }
    .full-info:hover .icon { translate: 0.15rem -0.15rem; }
    .dots a:hover::before { transform: scale(1.3); }
    .topbar a:active, .award-link:active, .full-info:active { transform: scale(0.96); }
    .dots a:active::before { transform: scale(0.75); }
  }
}

/* 5. Content settles in as each screen arrives (scroll-driven; where unsupported it is simply there) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .screen:not(.s1) .section-title,
    .screen:not(.s1) .stack > * {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}

/* ---------- Award finish (v1.6.0) ----------
   The look of a presentation plaque: a fine ink frame and ink rules (v1.10.1: no medal seal, no coloured metal outlines).
   Brand stays: text is always --ink (#260041) on white; the metal colours are DECORATION only
   (no text uses them) and every line colour is >= 3:1 on white (--gilt-line is 5-6:1).
   Each award level gets its own metal through body[data-tier]. No logos or marks of any
   third party are used; this is CDRA's own design. */
:root {
  --g-hi: #fbeeb0;  --g-mid: #e0b64a;  --g-lo: #a67a17;  --g-rgb: 224 182 74;
  /* v1.10.1: outlines, rules and tints are CDRA ink for every level (no coloured metal borders);
     the level metal is used only inside the disc artwork. */
  --gilt-line: var(--ink);  --line-rgb: 38 0 65;
}
[data-tier="bronze"]   { --g-hi: #f3d3b4; --g-mid: #c98a52; --g-lo: #8a5226; --g-rgb: 201 138 82; }
[data-tier="silver"]   { --g-hi: #f6f8fb; --g-mid: #c3c9d2; --g-lo: #7b8594; --g-rgb: 195 201 210; }
[data-tier="gold"]     { --g-hi: #fbeeb0; --g-mid: #e0b64a; --g-lo: #a67a17; --g-rgb: 224 182 74; }
[data-tier="platinum"] { --g-hi: #ffffff; --g-mid: #d9dfea; --g-lo: #8592ab; --g-rgb: 190 200 220; }

/* hairline under the top bar */
.topbar::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gilt-line) 50%, transparent);
  opacity: 0.55;
}

/* a soft metallic glow behind the award (static) */
.s1 { background: radial-gradient(ellipse 70% 46% at 50% 40%, rgb(var(--line-rgb) / 0.05), transparent 70%); }

/* the plaque */
.plaque {
  position: relative;
  width: min(calc(100% - 1rem), 25rem);
  padding: clamp(0.875rem, 2.6dvh, 1.375rem) clamp(0.75rem, 4vw, 1.5rem) clamp(0.75rem, 2dvh, 1.125rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.375rem, 1.3dvh, 0.75rem);
  background: linear-gradient(180deg, #fff, #fffdf8);
  border: 1px solid var(--gilt-line);
  border-radius: 0.25rem;
  /* v1.10.1: one fine inner ink line (certificate style), a white gap, a soft shadow. No colour. */
  box-shadow:
    inset 0 0 0 0.3125rem #fff,
    inset 0 0 0 calc(0.3125rem + 1px) rgb(var(--line-rgb) / 0.3),
    0 0.25rem 0.625rem -0.25rem rgb(38 0 65 / 0.22),
    0 1.5rem 2.5rem -1.25rem rgb(38 0 65 / 0.4);
}
.cover { filter: drop-shadow(0 0.5rem 0.75rem rgb(38 0 65 / 0.3)); }
/* the plaque takes some height, so the cover is a little smaller than before */
.plaque .cover { width: min(66vw, var(--cover-max), max(7rem, 25dvh)); }
.plaque .cover--square { width: min(54vw, calc(var(--cover-max) * 0.8), max(7rem, 21dvh)); }
.cover--square { border-radius: 0.25rem; }

/* ---- CSS disc (v1.9.9, task 12.4 part 1; award pages only) ----
   The cover is a plain sleeve; the disc behind it is drawn here, in the metal of the tier (body[data-tier]).
   Proportions equal the old baked image (900:668: sleeve 74.2% of the width, disc 82% of its height, right edge flush),
   so the screen heights do not change. Decoration only: the colours are --g-* / --ink, no text sits on it (§5 item 13a). */
.has-disc { position: relative; display: block; }
.has-disc .sleeve {
  position: absolute; z-index: 1; left: 0; top: 0;
  width: 74.22%; height: 100%;
}
.has-disc .disc {
  position: absolute; z-index: 0; right: 0; top: 9%;
  height: 82%; aspect-ratio: 1 / 1; border-radius: 50%;
  background:
    conic-gradient(from 18deg, transparent 0 7%, rgb(255 255 255 / 0.5) 11%, transparent 17% 56%, rgb(255 255 255 / 0.32) 62%, transparent 68%),
    conic-gradient(from -30deg, var(--g-lo), var(--g-hi) 12%, var(--g-mid) 26%, var(--g-lo) 46%, var(--g-hi) 63%, var(--g-mid) 79%, var(--g-lo));
  box-shadow: inset 0 0 0 1px var(--gilt-line), inset 0 0 0 0.1875rem rgb(var(--g-rgb) / 0.35);
}
/* fine grooves in a ring (smooth band inside, thin rim outside) */
.has-disc .disc::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle closest-side, transparent 0 0.9%, rgb(38 0 65 / 0.1) 0.9% 1.35%);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 36%, #000 38%, #000 94%, transparent 96%);
  mask-image: radial-gradient(circle closest-side, transparent 36%, #000 38%, #000 94%, transparent 96%);
}
/* the shadow the sleeve casts on the disc, and the edge of the smooth inner band */
.has-disc .disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 50%, rgb(38 0 65 / 0.34) 57.6%, transparent 71%),
    radial-gradient(circle closest-side, transparent 35%, rgb(38 0 65 / 0.16) 37%, transparent 39.5%);
}
@media (prefers-reduced-motion: no-preference) {
  /* the disc rolls out from under the sleeve once, on load (translate + opacity only; no JS) */
  .has-disc .disc { animation: disc-out 900ms var(--ease) 260ms backwards; }
  @keyframes disc-out { from { opacity: 0; translate: -38% 0; } 35% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
}
/* v1.9.8 (task 12.2, rest): where the screen has room (>= 600x700) the award is bigger:
   plaque 30rem instead of 25, cover ~45% larger (capped by the plaque width and by dvh, so the first screen still fits),
   ledger figures a little larger. Short landscape phones are excluded by min-height and keep their own rules above. */
@media (min-width: 600px) and (min-height: 700px) {
  .s1 .plaque { width: min(calc(100% - 1rem), 30rem); }
  .s1 .plaque .cover        { width: min(100%, 66vw, calc(var(--cover-max) * 1.45), max(7rem, 36.5dvh)); }
  .s1 .plaque .cover--square{ width: min(100%, 54vw, calc(var(--cover-max) * 1.16), max(7rem, 30.5dvh)); }
  .s1 .tier-row .t-display { font-size: clamp(1.375rem, min(5vw, 3.8dvh), 2.125rem); }
  .s1 .tier-row .t-title   { font-size: 1.0625rem; }
  .s1 .ledger-rank .t-num  { font-size: clamp(1.5rem, min(5.6vw, 4.4dvh), 2.5rem); }
  .s1 .ledger-top, .s1 .tier-row .t-label, .s1 .ledger-unit { font-size: 0.875rem; }
}
/* ---- the ledger (v1.7.0): a compact award table (header, tinted row, rank box) and a dedication ---- */
.hero-group { display: flex; flex-direction: column; align-items: center; gap: clamp(0.125rem, 0.8dvh, 0.5rem); }
.ledger {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--ink);
}
.ledger-top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.625rem;
  border-bottom: 1px solid var(--ink);
  font-size: var(--fs-small);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tier-row {                       /* ink text on a light tint of the tier metal (decoration only, contrast > 13:1) */
  align-items: flex-start;
  gap: 0.125rem;
  padding: 0.5rem 0.625rem;
  background: linear-gradient(100deg, rgb(var(--line-rgb) / 0.07), rgb(var(--line-rgb) / 0.05));
}
.tier-row .t-label, .tier-row .t-display, .tier-row .t-title { text-align: left; }
.tier-row .t-label { font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; }
.tier-row .t-display { font-size: clamp(1.25rem, min(6vw, 3.6dvh), 1.875rem); }
.tier-row .t-title { font-size: var(--fs-label); }
.ledger-rank {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.625rem;
  background: var(--ink);
  color: #fff;
}
.ledger-rank .t-num { font-size: clamp(1.375rem, min(6.4vw, 3.8dvh), 2rem); white-space: nowrap; text-align: left; }
.ledger-unit { font-size: var(--fs-small); line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; text-align: right; }
/* v1.9.13 (task 12.10 finding): on the narrowest phones (320 px) the header «CDRA Award | date» wrapped into 2+2 lines;
   tighter tracking (apple-design 15: small text, tracking near 0) keeps each on one line. Text size is not reduced (floor 13 px kept). */
@media (max-width: 359px) {
  .ledger-top { letter-spacing: 0.03em; padding-inline: 0.5rem; }
  .ledger-top span { white-space: nowrap; }
}
.dedication {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgb(var(--line-rgb) / 0.3);
  font-size: var(--fs-small);
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}
.dedication strong { font-weight: 700; }
.dedication .nb { white-space: nowrap; }   /* v1.9.1: «all-time» never breaks at the hyphen */
@media (max-height: 640px) { .dedication { display: none; } }   /* the table already says it */

/* section titles with gilt rules on both sides */
.section-title { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.section-title::before, .section-title::after {
  content: "";
  flex: 0 0 clamp(1.5rem, 9vw, 3.5rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gilt-line));
}
.section-title::after { background: linear-gradient(270deg, transparent, var(--gilt-line)); }

/* facts: an engraved list */
/* rules sit in the gap between rows and take no space of their own */
.facts { --rule-gap: clamp(0.5rem, 1.8dvh, 1.25rem); }
.facts > div { position: relative; }
.facts > div + div::before, .awards li + li::before {
  content: "";
  position: absolute;
  inset: calc(var(--rule-gap) * -0.5) 0 auto 0;
  height: 1px;
  background: rgb(var(--line-rgb) / 0.3);
}
.facts dt { font-size: var(--fs-hint); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }

/* awards list: gilt rules, and a star on the page you are on (shape, not only colour) */
.awards { --rule-gap: clamp(0.25rem, 1.2dvh, 0.75rem); }
.awards li { position: relative; }
/* v1.9.11 (task 12.4 part 3): a small CSS disc with a visible hub hole before each number, metal by the row's data-tier.
   Decoration (aria-hidden); the number and «streams» stay the text; it sits inside the 44px row, so heights do not change. */
.mini-disc {
  flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background:
    radial-gradient(circle closest-side, var(--bg) 0 13%, rgb(38 0 65 / 0.3) 14% 19%, transparent 21%),
    radial-gradient(circle closest-side, transparent 58%, rgb(38 0 65 / 0.14) 60%, transparent 63%),
    conic-gradient(from -30deg, var(--g-lo), var(--g-hi) 12%, var(--g-mid) 26%, var(--g-lo) 46%, var(--g-hi) 63%, var(--g-mid) 79%, var(--g-lo));
  box-shadow: inset 0 0 0 1px var(--gilt-line);
}
.award-link[aria-current="page"]::before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
  background: var(--ink);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* "Full information" as a framed button */
.full-info {
  border: 1px solid var(--gilt-line);
  border-radius: 999px;
  padding-inline: 1.5rem;
  background: linear-gradient(180deg, #fff, #fffdf8);
  box-shadow: inset 0 0 0 0.1875rem #fff, inset 0 0 0 calc(0.1875rem + 1px) rgb(var(--line-rgb) / 0.3);
}
.site-foot { position: relative; }
.site-foot::before {
  content: "";
  position: absolute;
  top: -0.125rem;
  left: calc(50% - min(7rem, 30vw));
  width: min(14rem, 60vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gilt-line), transparent);
  opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes pop   { from { opacity: 0; scale: 0.8; } to { opacity: 1; scale: 1; } }
  @keyframes shine { from { translate: 0 0; } to { translate: 230px 0; } }
  .shine { animation: shine 1100ms ease-out 900ms backwards; }
  .plaque { animation: rise 560ms var(--ease) 40ms backwards; }
}

/* ---------- Home page (v1.8.0): all awards as cards ----------
   Each card carries its own data-tier, so it takes its own metal. The tier is also written as text. */
.home-plaque { text-align: center; padding-top: clamp(1rem, 3dvh, 1.5rem); }
.home-name { font-size: clamp(2rem, min(11vw, 6.5dvh), 3.5rem); letter-spacing: 0.04em; }
.home-lead { font-size: var(--fs-body); line-height: 1.35; text-wrap: balance; max-width: 20rem; }
.award-groups { width: min(100%, 24rem); display: flex; flex-direction: column; gap: clamp(0.375rem, 1.2dvh, 0.75rem); }
.group-title { font-family: var(--f-title); font-weight: 400; font-size: var(--fs-label); line-height: 1.2; color: var(--ink-soft); letter-spacing: 0.04em; padding-top: clamp(0.125rem, 0.8dvh, 0.5rem); }
.cards { display: flex; flex-direction: column; gap: clamp(0.375rem, 1.2dvh, 0.75rem); width: 100%; }
.award-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border: 1px solid var(--gilt-line);
  border-radius: 0.25rem;
  background: linear-gradient(100deg, rgb(var(--line-rgb) / 0.07), rgb(var(--line-rgb) / 0.05));
  position: relative;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 0.125rem 0.5rem -0.125rem rgb(38 0 65 / 0.2);
}
.card-cover { width: clamp(2.75rem, min(13vw, 7dvh), 3.5rem); height: auto; aspect-ratio: 1 / 1; border-radius: 0.2rem; flex: none; object-fit: cover; }
/* v1.9.10 (task 12.4 part 2): the same CSS disc peeks 0.5rem out of the cover into the existing 0.75rem gap, so card sizes do not change */
.card-art { flex: none; z-index: 0; }
.card-art .card-cover { display: block; position: relative; z-index: 1; }
.card-art .disc { right: -0.5rem; animation: none; }
.card-text { display: flex; flex-direction: column; gap: 0.125rem; flex: 1 1 auto; min-width: 0; }
.card-kind { font-size: var(--fs-small); line-height: 1.1; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.card-num { font-family: var(--f-title); font-weight: 700; font-size: clamp(1.125rem, min(5vw, 3.2dvh), 1.5rem); line-height: 1.05; }
.card-sub { font-size: var(--fs-small); line-height: 1.2; letter-spacing: 0.04em; }
.card-date { font-size: var(--fs-small); line-height: 1.2; color: var(--ink-soft); }
@media (prefers-reduced-motion: no-preference) {
  .award-card { transition: transform var(--spring); }
  .award-card:active { transform: scale(0.97); transition: transform var(--press); }
  @media (hover: hover) and (pointer: fine) { .award-card:hover { transform: translateY(-0.125rem); } .award-card:active { transform: scale(0.97); } }
}
@media (prefers-reduced-motion: reduce) { .award-card:active { opacity: 0.6; } }
@media (prefers-contrast: more) { .award-card { background: none; border-color: var(--ink); box-shadow: none; } }

/* ---------- Accessibility preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* feedback stays, without any movement: a quick dim on press */
  .topbar a:active, .next:active, .award-link:active, .full-info:active, .foot-link:active { opacity: 0.6; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  /* solid bar, no blur (apple-design 14; liquid-glass.md checklist 5) */
  .topbar {
    background-image: none;
    background-color: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .topbar { box-shadow: 0 1px 0 var(--ink); }
  :root { --ink-soft: var(--ink); }
  [data-tier] { --gilt-line: var(--ink); }
  .s1 { background: none; }
  .plaque, .full-info { border-color: var(--ink); box-shadow: none; }
  .ledger-rank { box-shadow: none; }
  .mini-disc { background: radial-gradient(circle closest-side, var(--bg) 0 18%, transparent 20%), var(--bg); box-shadow: inset 0 0 0 2px var(--ink); }
  .has-disc .disc { background: var(--bg); box-shadow: inset 0 0 0 2px var(--ink); }
  .has-disc .disc::before { display: none; }
  .facts > div + div::before, .awards li + li::before { background: var(--ink); }
}
@media print {
  /* v1.11.12 (task 13.5): the browser's own Print / Save as PDF gives ONE clean landscape sheet:
     logo, the plaque (name, streams, date, «Presented to SETTWOR»), the address. Screens 2-4 and all controls are not printed. */
  @page { size: A4 portrait; margin: 6mm; }
  html, body { background: #fff; height: auto; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .topbar { position: static; height: auto; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .screen { min-height: 0; break-inside: avoid; }
  .screen:not(.s1), .next, .dots, .zoom-box, .zoom-toggle { display: none !important; }
  .s1 { height: auto; padding-block: 0; background: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .zoom-cover { cursor: default; }
  /* v1.13.13: the plaque keeps EXACTLY the proportions it has on a desktop screen (30rem wide, cover 24.64rem, same paddings and type sizes),
     and the whole sheet is scaled to the A4 width by the root font size (everything here is in rem). Values that normally depend on vw/dvh are pinned. */
  html { font-size: 6.6mm; }   /* 30rem plaque = 198 mm = A4 width minus 2 x 6 mm margins */
  .s1 .stack { width: 100%; max-width: none; padding: 0; gap: 0; }
  .s1 .plaque { width: 30rem !important; max-width: none !important; margin: 0 auto; flex-direction: column !important; box-shadow: none; padding: 1.375rem 1.5rem 1.125rem !important; gap: 0.75rem !important; }
  .s1 .plaque .cover { width: 24.64rem !important; }
  .s1 .plaque .cover--square { width: 20.59rem !important; }
  .s1 .hero-media, .s1 .ledger { width: 100% !important; flex: none !important; }
  .s1 .tier-row .t-display { font-size: 2.125rem !important; }
  .s1 .ledger-rank .t-num { font-size: 2.5rem !important; }
  .topbar .logo { width: 7.02rem !important; height: auto; }
  main::after { content: "cdras.github.io"; display: block; margin-top: 4mm; text-align: center; font-size: 0.75rem; letter-spacing: 0.14em; color: var(--ink); }
}

/* ---------- Status finish (v1.10.2) ----------
   «Make the site more prestigious»: restraint, not ornament. Ink only (no metal outlines), no new elements in the markup.
   Corner brackets on the plaque, a diamond between the section-title rules, wider tracking on small caps labels,
   even figures. All decoration sits in existing gaps / pseudo-elements, so no text or screen height changes. */
.plaque::before {
  content: "";
  position: absolute;
  inset: 0.3125rem;
  pointer-events: none;
  --b: 1.5px; --l: 0.875rem;
  background:
    linear-gradient(var(--ink), var(--ink)) top left / var(--l) var(--b),
    linear-gradient(var(--ink), var(--ink)) top left / var(--b) var(--l),
    linear-gradient(var(--ink), var(--ink)) top right / var(--l) var(--b),
    linear-gradient(var(--ink), var(--ink)) top right / var(--b) var(--l),
    linear-gradient(var(--ink), var(--ink)) bottom left / var(--l) var(--b),
    linear-gradient(var(--ink), var(--ink)) bottom left / var(--b) var(--l),
    linear-gradient(var(--ink), var(--ink)) bottom right / var(--l) var(--b),
    linear-gradient(var(--ink), var(--ink)) bottom right / var(--b) var(--l);
  background-repeat: no-repeat;
}
.section-title { letter-spacing: 0.06em; }
.section-title::before, .section-title::after { height: 1px; background: rgb(var(--line-rgb) / 0.5); }
.section-title::before { margin-right: 0; }
.ledger-top { letter-spacing: 0.16em; }
.ledger-unit { letter-spacing: 0.14em; }
.ledger-rank .t-num, .card-num, .awards .t-num { font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.01em; }
.tier-row .t-label { letter-spacing: 0.14em; }
.plaque { box-shadow:
    inset 0 0 0 0.3125rem #fff,
    inset 0 0 0 calc(0.3125rem + 1px) rgb(var(--line-rgb) / 0.3),
    0 0.125rem 0.25rem rgb(38 0 65 / 0.12),
    0 1.75rem 2.75rem -1.25rem rgb(38 0 65 / 0.45); }
@media (max-width: 359px) { .ledger-top { letter-spacing: 0.03em; } }
@media (prefers-contrast: more) { .plaque::before { display: none; } }

/* v1.10.3: a link inside the facts list (Listen on Spotify): ink, underlined, 44px target */
.fact-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
@media (prefers-reduced-motion: no-preference) { .fact-link { transition: opacity 100ms; } .fact-link:active { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .fact-link:active { opacity: 0.6; } }

/* v1.10.5: FAQ on the home page: native <details>, no JavaScript; ink hairlines; 44px rows */
.faq { width: min(100%, 26rem); }
.faq details { border-bottom: 1px solid rgb(var(--line-rgb) / 0.3); }
.faq details:first-child { border-top: 1px solid rgb(var(--line-rgb) / 0.3); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 44px; padding-block: 0.25rem; cursor: pointer; list-style: none; font-family: var(--f-title); font-weight: 700; font-size: var(--fs-body); line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-weight: 400; font-size: 1.25rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.faq p { padding: 0 0 0.75rem; font-size: var(--fs-body); line-height: 1.35; text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) { .faq summary:active { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .faq summary:active { opacity: 0.6; } }

/* ---------- v1.10.7: screens 2-4 re-balanced (owner: «More information» too tight and big, the next two too empty) ----------
   s2: label left / value right, smaller value type, wider column, calmer rows.
   s3, s4: larger art and type, bounded by dvh so short landscape phones still fit. */
.s2 .info { width: min(100%, 34rem); }
.facts { --rule-gap: clamp(0.625rem, 2.4dvh, 1.375rem); gap: var(--rule-gap); }
.facts > div { display: grid; grid-template-columns: minmax(6.5rem, 38%) 1fr; column-gap: clamp(0.75rem, 3vw, 1.5rem); align-items: baseline; }
.facts dt { font-size: var(--fs-small); letter-spacing: 0.1em; line-height: 1.3; }
.facts dd, .facts dd.is-light {
  margin-top: 0; font-family: var(--f-title); line-height: 1.25;
  font-size: clamp(1rem, min(0.85rem + 0.9vw, 3.2dvh), 1.375rem);
}
.facts dd a { display: inline-flex; align-items: center; min-height: 44px; }

.s3 .thumb { width: clamp(7rem, min(56vw, 30dvh), 15rem); }
.s3 .award-head .t-display { font-size: clamp(1.375rem, min(6vw, 3.6dvh), 2rem); }
.s3 .award-head .t-title   { font-size: clamp(1.0625rem, min(4vw, 2.6dvh), 1.375rem); }
.s3 .awards { --rule-gap: clamp(0.5rem, 2.2dvh, 1.5rem); gap: var(--rule-gap); }
.s3 .award-date { font-size: clamp(1rem, min(3.8vw, 2.4dvh), 1.25rem); }
.s3 .award-num  { font-size: clamp(1.375rem, min(6.4vw, 4dvh), 2.25rem); }
.s3 .award-unit { font-size: clamp(1.0625rem, min(4.4vw, 2.8dvh), 1.5rem); }
.s3 .mini-disc  { width: 1.5rem; height: 1.5rem; }

@media (min-width: 600px) {
  .s3 .info { width: min(100%, 52rem); gap: clamp(2rem, 6vw, 5rem); }
  .s3 .awards { flex: 0 0 auto; width: max-content; max-width: 100%; }
  .s3 .thumb { width: clamp(8rem, min(26vw, 38dvh), 19rem); }
  .s3 .award-head .t-display { font-size: clamp(1.25rem, min(2.6vw, 3.6dvh), 2rem); }
  .s3 .award-head .t-title   { font-size: clamp(1rem, min(1.9vw, 2.6dvh), 1.375rem); }
  .s3 .award-num  { font-size: clamp(1.375rem, min(3.2vw, 4.4dvh), 2.375rem); }
  .s3 .award-unit { font-size: clamp(1.0625rem, min(2.2vw, 3dvh), 1.5rem); }
  .s3 .award-date { font-size: clamp(1rem, min(1.8vw, 2.4dvh), 1.25rem); }
}

.bio { gap: clamp(0.875rem, 2.8dvh, 2.25rem); }
@media (min-width: 600px) {
  .bio { max-width: 40rem; }
  .bio p { font-size: clamp(1rem, min(0.9rem + 0.55vw, 3dvh), 1.3125rem); line-height: 1.45; }
}

/* ---------- v1.10.8: a living interface, still minimal (owner: «every text reacts to touch, click and hover») ----------
   apple-design 1 (feedback on press, instant), 3 (interruptible: transitions retarget from the live value), 4 (critically damped, no
   bounce on text), 14 (reduced motion = no movement, only a colour/opacity answer); motion.md (brief, purposeful, cancellable).
   Text blocks use the individual `translate` / `scale` properties: the entrance animations of the screens use `translate` + `opacity`
   on the CONTAINERS (.stack > *, .section-title), so the targets below that are animated parents' children never fight with them,
   and .section-title gets `scale` only (its scroll entrance holds `translate`). No JavaScript. */
:root { interpolate-size: allow-keywords; --soft: 320ms cubic-bezier(.2, .8, .2, 1); }
::selection { background: rgb(38 0 65 / 0.14); }

/* left-aligned text: nudges toward the reading direction; right-aligned: toward its edge; centred: a tiny swell */
/* hover = colour only here (works with reduced motion too) */
@media (hover: hover) and (pointer: fine) {
  .facts > div:hover dt { color: var(--ink); }
}
/* iOS Safari fires :active on plain text only for elements it treats as clickable; on touch screens the cursor is invisible, so this is free */
@media (hover: none) {
  :is(.facts > div, .award-head, .award-date, .bio p, .group-title, .faq p, .section-title, .dedication, .ledger-top > span, .ledger-rank > p, .home-lead, .foot-note, .ver) { cursor: pointer; }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.facts > div, .award-head, .award-date, .bio p, .group-title, .faq p, .section-title, .dedication, .ledger-top > span, .ledger-rank > p, .home-lead, .foot-note, .ver),
  .facts dt { transition: translate var(--soft), scale var(--soft), color var(--soft); }
  :is(.facts > div, .award-head, .award-date, .group-title, .faq p, .bio p:nth-child(odd)) { transform-origin: left center; }
  .bio p:nth-child(even) { transform-origin: right center; }
  .ledger-top > span:first-child { transform-origin: left center; }
  .ledger-top > span:last-child { transform-origin: right center; }
  /* v1.13.3 (owner): the covers zoom the same way (the slow breathing is dropped while the pointer is on the cover) */
  .cover, .thumb, .card-art { transition: scale var(--soft); }
  @media (hover: hover) and (pointer: fine) { .cover:hover, .thumb:hover, .card-art:hover { animation: none; scale: 1.03; } }

  @media (hover: hover) and (pointer: fine) {
    :is(.facts > div, .award-head, .award-date, .group-title, .faq p, .bio p:nth-child(odd)):hover { translate: 0.1875rem 0; }
    .bio p:nth-child(even):hover { translate: -0.1875rem 0; }
    :is(.section-title, .dedication, .ledger-top > span, .ledger-rank > p, .home-lead, .foot-note, .ver):hover { scale: 1.015; }
    .next:hover .arrow { scale: 1.12; }
    .award-link:hover .mini-disc { rotate: 60deg; }
    .faq summary:hover { translate: 0.1875rem 0; }
    .fact-link:hover, .foot-link:hover { text-underline-offset: 0.32em; }
  }
  /* press: instant (90 ms), release: the same soft settle as the hover transition */
  :is(.facts > div, .award-head, .award-date, .bio p, .group-title, .faq p, .section-title, .dedication, .ledger-top > span, .ledger-rank > p, .home-lead, .foot-note, .ver):active {
    scale: 0.985; transition-duration: 90ms;
  }
  .faq summary { transition: translate var(--soft), opacity 100ms; }
  .next .arrow { transition: scale var(--soft); }
  .mini-disc { transition: rotate 500ms cubic-bezier(.2, .8, .2, 1); }
  .fact-link, .foot-link { transition: text-underline-offset var(--soft), opacity 100ms; }

  /* FAQ: the answer opens and closes smoothly (progressive: where ::details-content is unsupported it simply toggles); the plus turns */
  .faq summary::after { transition: rotate var(--soft); }
  @supports selector(::details-content) {
    .faq details::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size 320ms cubic-bezier(.2, .8, .2, 1), opacity 220ms ease, content-visibility 320ms allow-discrete; }
    .faq details[open]::details-content { block-size: auto; opacity: 1; }
  }

  /* a page change cross-fades instead of cutting (CSS-only cross-document view transition; the bar stays put) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  @supports (view-transition-name: none) {
    .topbar { view-transition-name: topbar; animation: none; }
  }
}
.faq details[open] summary::after { content: "+"; rotate: 45deg; }

/* reduced motion: no movement, a short dim answers the press */
@media (prefers-reduced-motion: reduce) {
  :is(.facts > div, .award-head, .award-date, .bio p, .group-title, .faq p, .section-title, .dedication, .ledger-top > span, .ledger-rank > p, .home-lead, .foot-note, .ver):active { opacity: 0.6; }
}

/* ---------- v1.11.0: award standards page (owner: «for an artist, an album and a track the award standards differ; make a separate beautiful page») ----------
   apple-hig-review: layout.md › Visual hierarchy (most important first, grouping by space and hairlines), typography.md › Ensuring legibility
   (>= 1rem for the numbers, regular + bold only, no light weights), color.md › Inclusive color (every level is ALSO written as text; the metal is
   only the disc), accessibility.md › Mobility (rows 44px). apple-design 15 (tabular figures, size-specific tracking), 16 (restraint: one signature
   element = the row of five discs; no medal, no coloured outlines, ink only, rule 13h). */
[data-tier="diamond"] { --g-hi: #f4fcff; --g-mid: #b7e2f2; --g-lo: #4f9fc2; --g-rgb: 183 226 242; }

/* first screen: the five metals in a row (decoration, aria-hidden; the level names are in the table) */
.std-eyebrow { letter-spacing: 0.3em; text-indent: 0.3em; }
.std-name { font-size: clamp(1.75rem, min(9vw, 5.2dvh), 2.75rem); letter-spacing: 0.03em; }
.disc-row { display: flex; justify-content: center; gap: clamp(0.5rem, 3vw, 0.875rem); padding-top: clamp(0.25rem, 1.2dvh, 0.75rem); }
.disc-row .mini-disc { width: clamp(1.5rem, 7vw, 2rem); height: clamp(1.5rem, 7vw, 2rem); }

/* the table: level (disc + name) and three number columns; ink hairlines between rows */
.s2 .std { width: min(100%, 24rem); }
.std-table { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.std-table thead th {
  padding: 0.25rem 0 0.5rem 0.25rem;
  font-size: var(--fs-small); font-weight: 400; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); text-align: right; border-bottom: 1px solid var(--ink);
}
.std-table tbody th, .std-table tbody td { border-bottom: 1px solid rgb(var(--line-rgb) / 0.3); vertical-align: middle; }
.std-table tbody tr:last-child th, .std-table tbody tr:last-child td { border-bottom: 0; }
.std-table tbody tr { height: clamp(2.75rem, 7.6dvh, 3.5rem); }
.std-table tbody th { padding: 0.25rem 0.5rem 0.25rem 0; text-align: left; font-weight: 400; font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.15; }
.std-table tbody td { padding: 0.25rem 0 0.25rem 0.25rem; text-align: right; white-space: nowrap; font-family: var(--f-title); font-weight: 700; font-size: var(--fs-body); line-height: 1.1; }
.lvl { display: flex; align-items: center; gap: 0.625rem; }
.lvl .mini-disc { width: 1.375rem; height: 1.375rem; }
.std-note { padding-top: 0.5rem; font-size: var(--fs-small); line-height: 1.4; color: var(--ink-soft); }
/* numbers: short form (250K, 2.5M) on narrow screens, the full number from 46rem; the full number is always what a screen reader reads */
.n-short { display: inline; }
.n-full { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 46rem) {
  .stack.std-screen-stack { max-width: 44rem; }
  .s2 .std { width: min(100%, 44rem); }
  .n-short, .std-short { display: none; }
  .n-full { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .std-table tbody td { font-size: clamp(1.0625rem, 0.6rem + 1.1vw, 1.375rem); }
  .std-table tbody th { font-size: clamp(1.0625rem, 0.7rem + 0.9vw, 1.25rem); }
  .std-table thead th { padding-left: 1.5rem; }
  .std-table tbody td { padding-left: 1.5rem; }
}
@media (hover: hover) and (pointer: fine) { .std-table tbody tr:hover { background: rgb(var(--line-rgb) / 0.05); } }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { .std-table tbody tr:hover .mini-disc { rotate: 60deg; } }
@media (prefers-contrast: more) {
  .std-table tbody th, .std-table tbody td { border-bottom-color: var(--ink); }
  .std-table tbody tr:hover { background: none; }
}

/* footer: two links side by side, wrapping on narrow screens (v1.11.0) */
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0.5rem; }
.foot-link[aria-current="page"] { text-decoration-thickness: 2px; }
.faq-link { margin-bottom: 0.5rem; }
.std-short { white-space: nowrap; }
@media (max-width: 359px) { .std-table thead th { letter-spacing: 0.04em; } }

/* phones turned sideways: the shared rule makes every .s1 plaque a row (cover | table); the standards plaque is text + discs, so it stays a column */
@media (orientation: landscape) and (max-height: 520px) {
  .s1 .std-plaque { flex-direction: column; width: min(calc(100% - 1rem), 30rem); gap: 0.25rem; }
  .std-plaque .std-eyebrow { display: none; }
}


/* ---------- v1.11.5 «register» finish of the home page (owner: very beautiful, strict, status) ----------
   Idea: the home page is a formal register of awards. Ink and hairlines only (rule 13h), Outfit 400/700 only, no new colours.
   One signature: the wide-set CDRA wordmark on a charter plaque. Everything else is quieter. Scale grows with the screen
   (>= 900x700) so a desktop is not a small card in white space. Decoration sits in pseudo-elements; text floors are kept. */
.home-eyebrow { font-size: var(--fs-small); line-height: 1.2; letter-spacing: 0.32em; text-indent: 0.32em; text-transform: uppercase; color: var(--ink-soft); }
.home-plaque { gap: clamp(0.375rem, 1.6dvh, 0.875rem); padding-inline: clamp(1rem, 5vw, 2rem); }
.home-plaque .home-name { font-size: clamp(2.25rem, min(15vw, 9dvh), 4.25rem); letter-spacing: 0.16em; text-indent: 0.16em; line-height: 1; }
.home-rule { display: block; width: 3rem; height: 1px; background: var(--ink); position: relative; }
.home-rule::before, .home-rule::after { content: ""; position: absolute; top: 50%; width: 0.3125rem; height: 0.3125rem; background: var(--ink); transform: translateY(-50%) rotate(45deg); }
.home-rule::before { left: -0.75rem; } .home-rule::after { right: -0.75rem; }
.home-plaque .home-lead { max-width: 21rem; font-size: var(--fs-body); line-height: 1.45; }
.home-link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.25rem; font-size: var(--fs-small); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 0.4em; text-decoration-thickness: 1px; }
.home-link:hover { text-decoration-thickness: 2px; }
.home-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* register: group headings are small spaced caps with a hairline, cards are plain ruled rows */
.award-groups { width: min(100%, 26rem); gap: clamp(0.5rem, 1.6dvh, 1rem); }
.group-title { display: flex; align-items: center; gap: 0.75rem; font-size: var(--fs-small); letter-spacing: 0.16em; text-transform: uppercase; }
.group-title::after { content: ""; flex: 1 1 auto; height: 1px; background: rgb(var(--line-rgb) / 0.35); }
.award-card { background: #fff; border-color: rgb(var(--line-rgb) / 0.55); box-shadow: 0 0.0625rem 0 rgb(var(--line-rgb) / 0.1); }
.award-card:hover, .award-card:focus-visible { border-color: var(--ink); }
.award-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.card-kind { letter-spacing: 0.2em; }
.card-sub { letter-spacing: 0.06em; }
.section-title { letter-spacing: 0.14em; text-transform: uppercase; font-size: var(--fs-label); }

/* FAQ: strict ruled list */
.faq summary { letter-spacing: 0.01em; }

/* large screens: the same design, bigger */
@media (min-width: 900px) and (min-height: 700px) {
  .home-plaque { width: min(calc(100% - 2rem), 38rem); padding-block: clamp(2rem, 6dvh, 3.5rem); gap: clamp(0.75rem, 2dvh, 1.25rem); }
  .home-plaque .home-name { font-size: clamp(3.5rem, 11dvh, 6rem); }
  .home-plaque .home-lead { max-width: 28rem; font-size: 1.25rem; }
  .s1 .home-plaque { width: min(calc(100% - 2rem), 34rem); }
  .home-eyebrow { font-size: var(--fs-label); }
  .home-rule { width: 4.5rem; }
  .award-groups { width: min(100%, 38rem); gap: 1rem; }
  .group-title { font-size: var(--fs-label); }
  .award-card { gap: 1.25rem; padding: 0.875rem 1.25rem 0.875rem 0.875rem; }
  .card-cover { width: 4.75rem; }
  .card-art .disc { right: -0.75rem; }
  .card-num { font-size: 2rem; }
  .card-kind, .card-sub, .card-date { font-size: var(--fs-label); }
  .faq { width: min(100%, 38rem); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .home-eyebrow, .home-rule, .home-link { display: none; }
  .home-plaque .home-name { font-size: 1.75rem; letter-spacing: 0.12em; }
}
@media (prefers-contrast: more) { .award-card { border-color: var(--ink); } .group-title::after { background: var(--ink); } }

/* ---------- v1.11.6 (owner): bigger covers and discs in «All awards»; FAQ opens one answer at a time and looks finer ----------
   Ink and hairlines only, Outfit 400/700 only (AGENTS.md §5 13h). No JS: the FAQ exclusivity is <details name="faq">. */
.award-card { --cs: clamp(3.5rem, min(21vw, 9.5dvh), 4.375rem); }
.card-cover { width: var(--cs); }
/* the disc is 82% of the cover height, so it grows with the cover; it also peeks out further (38% of the cover) */
.card-art .disc { right: calc(var(--cs) * -0.38); }
.card-art, .award-card > .card-cover { margin-right: calc(var(--cs) * 0.38); }
.cover--square { object-fit: cover; }
@media (min-width: 900px) and (min-height: 700px) {
  .award-card { --cs: clamp(5.5rem, 12dvh, 7rem); }
  .card-cover { width: var(--cs); }
  .card-art .disc { right: calc(var(--cs) * -0.38); }
}

/* FAQ: numbered ruled cards; the open one gets an ink edge and a faint ink tint */
.faq { display: flex; flex-direction: column; gap: clamp(0.375rem, 1.2dvh, 0.75rem); counter-reset: q; }
.faq details, .faq details:first-child {
  counter-increment: q;
  border: 1px solid rgb(var(--line-rgb) / 0.3);
  border-radius: 0.375rem;
  background: #fff;
  position: relative;
  overflow: clip;
}
.faq details[open] { border-color: var(--ink); background: rgb(var(--line-rgb) / 0.04); box-shadow: inset 0.1875rem 0 0 var(--ink); }
.faq summary { justify-content: flex-start; gap: 0.875rem; padding: 0.375rem 0.875rem; min-height: 3.25rem; }
.faq summary::before {
  content: counter(q, decimal-leading-zero);
  flex: none; min-width: 1.5rem;
  font-weight: 700; font-size: var(--fs-small); letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--ink-soft);
}
.faq summary::after, .faq details[open] summary::after {
  content: "+"; margin-left: auto;
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: none;
  border: 1px solid rgb(var(--line-rgb) / 0.45); border-radius: 50%;
  font-weight: 400; font-size: 1.125rem; line-height: 1;
}
.faq details[open] summary::after { rotate: 45deg; border-color: var(--ink); background: var(--ink); color: #fff; }
.faq details[open] summary::before { color: var(--ink); }
/* the answer lines up with the question text, under the number */
.faq p, .faq .faq-link { margin-left: calc(0.875rem + 1.5rem + 0.875rem); margin-right: 0.875rem; padding: 0 0 0.875rem; }
.faq .faq-link { display: inline-flex; margin-bottom: 0.25rem; padding-bottom: 0; }
@media (prefers-contrast: more) { .faq details, .faq details[open] { border-color: var(--ink); } .faq details[open] { background: none; } }

/* v1.11.7: «N days after release» on the track cards; on the very narrowest phones (<= 340px) it is left out so «All awards» still fits the screen */
@media (max-width: 21.25rem) { .card-days { display: none; } }

/* ---------- v1.11.9 (task 13.2): tap the cover to enlarge it (no JS) ----------
   <input type="checkbox" id="zoom"> sits first in <body>; the cover is inside <label for="zoom">; the full-screen <label class="zoom-box">
   closes it (tap anywhere or the «Close» button; with a keyboard: Space on the focused checkbox). Opacity-only fade (reduced motion: no fade),
   interruptible (a transition, not a keyframe animation). The picture is the same file as the cover, so nothing extra is downloaded. */
.zoom-toggle { position: fixed; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.zoom-cover { display: contents; }
.zoom-cover .cover { cursor: zoom-in; }
.zoom-cover:active .cover { opacity: 0.8; }
.zoom-toggle:focus-visible ~ main .zoom-cover .cover { outline: 3px solid var(--ink); outline-offset: 4px; }
.zoom-box {
  position: fixed; inset: 0; z-index: 1100;
  display: grid; place-items: center; align-content: center; gap: 1rem;
  padding: max(1.5rem, var(--safe-top)) max(1.5rem, var(--safe-right)) max(1.5rem, var(--safe-bottom)) max(1.5rem, var(--safe-left));
  background: rgb(255 255 255 / 0.985);
  cursor: zoom-out;
  opacity: 0; visibility: hidden;
}
.zoom-toggle:checked ~ .zoom-box { opacity: 1; visibility: visible; }
html:has(.zoom-toggle:checked) { overflow: hidden; }
.zoom-img {
  width: min(92vw, 78dvh, 41.75rem); height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: clamp(1rem, 5vw, 1.75rem); box-shadow: 0 1rem 2.5rem -0.75rem rgb(38 0 65 / 0.45);
}
.zoom-close {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: 1.5rem;
  border: 1px solid var(--ink); border-radius: 999px; background: #fff;
  font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.zoom-box:active .zoom-close { opacity: 0.6; }
.zoom-toggle:checked:focus-visible ~ .zoom-box .zoom-close { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .zoom-box { transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .zoom-toggle:checked ~ .zoom-box { transition: opacity 200ms ease, visibility 0s; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .zoom-box { background: #fff; } }
@media (orientation: landscape) and (max-height: 520px) { .zoom-img { width: min(60vw, 64dvh, 41.75rem); } .zoom-box { gap: 0.5rem; } }

/* ---------- v1.11.10 (task 13.3): share links in the facts list ----------
   «Share» is one more fact row (Telegram · X · Email), same links as «Listen». A one-letter link («X») must still be a 44px target (AGENTS.md §5 item 5). */
.fact-link { min-inline-size: 44px; justify-content: center; }
.facts dd.is-share { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; margin-inline-end: -0.25rem; }   /* 3 targets (44px min) must stay on one line at 320px: the 0.25rem sits in the page padding; larger text still wraps */
.facts dd.is-share > span[aria-hidden] { display: none; }
/* the extra row must not push «More information» past the window on short phones (320×568 was exactly full before): tighter rows under 600px of height */
@media (max-height: 600px) { .facts { --rule-gap: 0.5rem; } }

/* ---------- v1.11.15 (owner: «more info in the main block, no filler, more status»): the register strip on the first screen ----------
   The plaque states what the award is (one line) and shows three figures from pages.json: awards presented, top award, latest award.
   Ink + hairlines only (AGENTS.md §5 13h), Outfit 700 for the figures, 400 for labels, no new colours.
   apple-hig-review: layout.md › Visual hierarchy (most important first; grouping by hairlines and space), typography.md › Conveying hierarchy
   (weight + size + colour carry rank), accessibility.md › Vision (labels stay >= 0.8125rem, contrast 8.6:1+; the short forms 1M / Oct 2025
   have the full text for screen readers). */
.home-plaque .home-lead { max-width: 19rem; font-size: var(--fs-hint); line-height: 1.4; color: var(--ink-soft); text-wrap: balance; }
.home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 21rem; margin: 0.125rem 0 0; padding-block: 0.625rem 0.5rem; border-block: 1px solid rgb(var(--line-rgb) / 0.3); }
.home-stats > div { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-end; gap: 0.25rem; min-width: 0; padding-inline: 0.25rem; text-align: center; }
.home-stats > div + div { border-inline-start: 1px solid rgb(var(--line-rgb) / 0.25); }
.home-stats dd { margin: 0; font-family: var(--f-title); font-weight: 700; font-size: clamp(1.125rem, 5.2vw, 1.5rem); line-height: 1.1; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.home-stats dt { font-size: var(--fs-small); line-height: 1.25; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
@media (hover: none) { .home-stats > div { cursor: pointer; } }
@media (prefers-reduced-motion: no-preference) {
  .home-stats > div { transition: scale var(--soft), color var(--soft); }
  @media (hover: hover) and (pointer: fine) { .home-stats > div:hover { scale: 1.04; } }
  .home-stats > div:active { scale: 0.96; transition-duration: 90ms; }
}
@media (prefers-reduced-motion: reduce) { .home-stats > div:active { opacity: 0.6; } }
@media (prefers-contrast: more) { .home-stats, .home-stats > div + div { border-color: var(--ink); } .home-plaque .home-lead, .home-stats dt { color: var(--ink); } }
@media (min-width: 900px) and (min-height: 700px) {
  .home-plaque .home-lead { max-width: 26rem; font-size: var(--fs-body); }
  .home-stats { max-width: 28rem; padding-block: 0.875rem 0.75rem; }
  .home-stats dd { font-size: 1.75rem; }
  .home-stats dt { font-size: var(--fs-label); }
}
@media (max-width: 359px) { .home-stats dt { white-space: normal; letter-spacing: 0.04em; text-wrap: balance; } .home-stats > div { padding-inline: 0.125rem; } }
/* short screens: the first screen must still fit (AGENTS.md §5 13c) */
@media (max-height: 640px) { .home-plaque .home-lead { display: none; } }
@media (orientation: landscape) and (max-height: 520px) { .home-stats, .home-plaque .home-lead { display: none; } }

/* ---------- v1.11.16 (owner: the whole award block, the home «CDRA» block and the enlarged cover move with the mouse / the gyroscope) ----------
   The movement itself is js/tilt.js (the one script of the site, owner exception to AGENTS.md rule 8): it writes an inline `transform`
   (perspective + rotateX/rotateY, at most 6° for the block and 8° for the enlarged cover) on .s1 .plaque and .zoom-img only while they move,
   and removes it when they rest, so at rest the text is drawn flat and sharp. `transform` is free on these two elements (their entrance and
   breathing use translate/scale/opacity, the text inside uses translate/scale), so nothing collides.
   apple-design › 3 Interruptibility, 4 Behavior over animation (smoothed approach from the current value, no overshoot), 14 Reduced motion
   (the script does nothing under `reduce`; the rule below is the second lock), accessibility.md › Motion. No layout space is used. */
@media (prefers-reduced-motion: reduce), print { .s1 .plaque, .zoom-img { transform: none !important; will-change: auto !important; } }

/* ---------- v1.11.17 (owner: «fix the text "Award standards"»): the title on the standards page ----------
   It inherited the big home-page name size and 0.16em tracking (`.home-plaque .home-name`, which beats `.std-name`), so «standards» ran
   into the plaque frame. Own size and tracking for this long two-word title; balanced lines; the landscape-phone rule keeps it small.
   apple-design › 15 Typography (tracking is size-specific: large text gets tighter tracking, not wider). */
.home-plaque .std-name { font-size: clamp(1.75rem, min(9.5vw, 5.5dvh), 3rem); letter-spacing: 0.05em; text-indent: 0.05em; text-wrap: balance; }
@media (orientation: landscape) and (max-height: 520px) { .home-plaque .std-name { font-size: 1.75rem; letter-spacing: 0.08em; text-indent: 0.08em; } }

/* ---------- v1.13.4 (owner: «the three lines under the header react separately too», «on a phone it must react to a press as well», «sometimes it is blurry on a PC») ----------
   1) The label / title / artist lines of the tinted row zoom each on its own (the row, its tint and its borders stay still).
   2) Touch: there is no hover on a phone, so a press does the same zoom-in while the finger is down (text 1.5%, covers 3%) and settles back softly.
   3) Sharpness: the cover no longer breathes (see the Motion block), the tilt script uses smaller angles and lets the card rest flat (js/tilt.js).
   apple-design 1 (instant feedback on press), 3 (interruptible), 14 (reduced motion = no movement, a dim answers the press). */
@media (prefers-reduced-motion: no-preference) {
  .tier-row > :is(.t-label, .t-display, .t-title) { transform-origin: left center; transition: scale var(--soft); }
  @media (hover: hover) and (pointer: fine) { .tier-row > :is(.t-label, .t-display, .t-title):hover { scale: 1.015; } }
  @media (hover: none) {
    :is(.facts > div, .award-head, .award-date, .bio p, .group-title, .faq p, .section-title, .dedication, .ledger-top > span, .ledger-rank > p, .home-lead, .foot-note, .ver, .tier-row > :is(.t-label, .t-display, .t-title)):active { scale: 1.015; transition-duration: 90ms; }
    :is(.cover, .thumb, .card-art):active { scale: 1.03; transition-duration: 90ms; }
  }
}
@media (hover: none) { .tier-row > :is(.t-label, .t-display, .t-title), .cover, .thumb, .card-art { cursor: pointer; } }
@media (prefers-reduced-motion: reduce) { .tier-row > :is(.t-label, .t-display, .t-title):active, .cover:active, .thumb:active, .card-art:active { opacity: 0.6; } }

/* ---------- v1.13.5 (owner: «rounder corners for the picture in the big view; when I point at a picture it should grow softly and less») ----------
   The enlarged cover has much rounder corners (clamp 1rem to 1.75rem). Every cover (plaque, thumbnail, card, enlarged) now grows only 1.5% on hover or press,
   over a longer, calmer curve (520 ms, no overshoot), instead of 3% in 320 ms. `scale` only, so it composes with the tilt (inline `transform`). */
:root { --gentle: 520ms cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: no-preference) {
  .cover, .thumb, .card-art, .zoom-img { transition: scale var(--gentle); }
  @media (hover: hover) and (pointer: fine) { .cover:hover, .thumb:hover, .card-art:hover, .zoom-img:hover { scale: 1.015; } }
  @media (hover: none) { :is(.cover, .thumb, .card-art, .zoom-img):active { scale: 1.015; transition-duration: 120ms; } }
}
@media (hover: none) { .zoom-img { cursor: pointer; } }

/* ---------- Bio block (v1.13.6): key facts + short timeline, from the official biography. Ink only, no new scripts. ---------- */
.bio > p:first-child { text-align: left; }
.bio-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgb(var(--line-rgb) / 0.35); border-radius: 0.25rem; background: #fff; }
.bio-facts > div { padding: 0.5rem 0.75rem; border-top: 1px solid rgb(var(--line-rgb) / 0.2); }
.bio-facts > div:nth-child(-n+2) { border-top: 0; }
.bio-facts > div:nth-child(odd) { border-right: 1px solid rgb(var(--line-rgb) / 0.2); }
.bio-facts dt { font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.bio-facts dd { margin: 0.125rem 0 0; font-size: var(--fs-body); line-height: 1.25; color: var(--ink); }
.bio-line { list-style: none; margin: 0; padding: 0 0 0 1.25rem; position: relative; display: flex; flex-direction: column; gap: 0.5rem; }
.bio-line::before { content: ""; position: absolute; left: 0.3125rem; top: 0.5rem; bottom: 0.5rem; width: 1px; background: rgb(var(--line-rgb) / 0.5); }
.bio-line li { position: relative; display: flex; gap: 0.75rem; align-items: baseline; line-height: 1.3; text-align: left; }
.bio-line li::before { content: ""; position: absolute; left: -1.125rem; top: 0.5em; width: 0.4375rem; height: 0.4375rem; background: var(--ink); transform: rotate(45deg); }
.bio-line b { flex: none; min-width: 2.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.bio-line span { font-size: var(--fs-body); color: var(--ink-soft); }
@media (max-width: 26rem) { .bio-facts { grid-template-columns: 1fr; } .bio-facts > div { border-right: 0 !important; border-top: 1px solid rgb(var(--line-rgb) / 0.2) !important; } .bio-facts > div:first-child { border-top: 0 !important; } }
@media print { .bio-facts, .bio-line { break-inside: avoid; } }

/* >>> theme-css: generated from src/dark.css by scripts/build_pages.py (python scripts/build_pages.py). Do not edit between the markers. */
/* AUTO: the system is dark and the footer switch is not on Light */
@media screen and (prefers-color-scheme: dark) {
  html:not(:has(input[name="theme"][value="light"]:checked)) {
    color-scheme: dark;
    --ink: #f1eafc;
    --ink-soft: #b9a9d3;
    --bg: #0f0818;
    --bar-bg: #150c21;
    --surface: #1a1029;
    --surface-2: #150d22;
    --line-rgb: 203 186 238;
    --brand: #3a1270;
    --brand-2: #2a0c52;
    --dot-rgb: 241 234 252;
  }
  html:not(:has(input[name="theme"][value="light"]:checked)) { background: var(--bg); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) body { background: radial-gradient(ellipse 120% 60% at 50% 0%, #1a0f2c, var(--bg) 62%) fixed, var(--bg); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) ::selection { background: rgb(160 120 235 / 0.35); }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    :where(html:not(:has(input[name="theme"][value="light"]:checked))) .topbar { background-color: rgba(15, 8, 24, 0.72); }
  }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .logo,
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .arrow,
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .icon { filter: brightness(0) invert(1); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .logo { opacity: 0.94; }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .s1 { background: radial-gradient(ellipse 70% 46% at 50% 40%, rgb(122 72 214 / 0.2), transparent 70%); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .cover { filter: drop-shadow(0 0.5rem 0.9rem rgb(0 0 0 / 0.6)); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .zoom-img { box-shadow: 0 1rem 2.5rem -0.75rem rgb(0 0 0 / 0.7); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .plaque {
    background: linear-gradient(180deg, #1e1432, #150d23);
    box-shadow:
      inset 0 0 0 0.3125rem #190f28,
      inset 0 0 0 calc(0.3125rem + 1px) rgb(var(--line-rgb) / 0.32),
      0 0.125rem 0.25rem rgb(0 0 0 / 0.5),
      0 0 3.5rem -1rem rgb(138 92 230 / 0.3),
      0 1.75rem 2.75rem -1.25rem rgb(0 0 0 / 0.8);
  }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .tier-row { background: linear-gradient(100deg, rgb(var(--line-rgb) / 0.1), rgb(var(--line-rgb) / 0.05)); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .ledger-rank { background: linear-gradient(100deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: inset 0 0 0 1px rgb(var(--line-rgb) / 0.25); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .award-card {
    background: var(--surface); border-color: rgb(var(--line-rgb) / 0.4);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 0.125rem 0.5rem -0.125rem rgb(0 0 0 / 0.6);
  }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .award-card:hover,
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .award-card:focus-visible { border-color: var(--ink); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .full-info {
    background: linear-gradient(180deg, #1e1432, #170f26);
    box-shadow: inset 0 0 0 0.1875rem #190f28, inset 0 0 0 calc(0.1875rem + 1px) rgb(var(--line-rgb) / 0.3), 0 0 1.5rem -0.5rem rgb(138 92 230 / 0.35);
  }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .faq details,
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .faq details:first-child { background: var(--surface); border-color: rgb(var(--line-rgb) / 0.28); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .faq details[open] { background: #1d122f; border-color: rgb(var(--line-rgb) / 0.6); box-shadow: inset 0.1875rem 0 0 #9a6bf0; }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .faq details[open] summary::after { background: var(--brand); border-color: #9a6bf0; color: #fff; }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .bio-facts { background: var(--surface); border-color: rgb(var(--line-rgb) / 0.35); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .bio-line li::before { background: #9a6bf0; }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .std-table tbody tr:hover { background: rgb(var(--line-rgb) / 0.08); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .zoom-box { background: rgb(15 8 24 / 0.985); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .zoom-close { background: var(--surface); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .zoom-img { border: 1px solid rgb(var(--line-rgb) / 0.25); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .dots a::before { border-color: var(--ink-soft); }
}
/* FORCED: the footer switch is on Dark (any system setting) */
@media screen {
  html:has(input[name="theme"][value="dark"]:checked) {
    color-scheme: dark;
    --ink: #f1eafc;
    --ink-soft: #b9a9d3;
    --bg: #0f0818;
    --bar-bg: #150c21;
    --surface: #1a1029;
    --surface-2: #150d22;
    --line-rgb: 203 186 238;
    --brand: #3a1270;
    --brand-2: #2a0c52;
    --dot-rgb: 241 234 252;
  }
  html:has(input[name="theme"][value="dark"]:checked) { background: var(--bg); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) body { background: radial-gradient(ellipse 120% 60% at 50% 0%, #1a0f2c, var(--bg) 62%) fixed, var(--bg); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) ::selection { background: rgb(160 120 235 / 0.35); }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    :where(html:has(input[name="theme"][value="dark"]:checked)) .topbar { background-color: rgba(15, 8, 24, 0.72); }
  }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .logo,
  :where(html:has(input[name="theme"][value="dark"]:checked)) .arrow,
  :where(html:has(input[name="theme"][value="dark"]:checked)) .icon { filter: brightness(0) invert(1); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .logo { opacity: 0.94; }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .s1 { background: radial-gradient(ellipse 70% 46% at 50% 40%, rgb(122 72 214 / 0.2), transparent 70%); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .cover { filter: drop-shadow(0 0.5rem 0.9rem rgb(0 0 0 / 0.6)); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .zoom-img { box-shadow: 0 1rem 2.5rem -0.75rem rgb(0 0 0 / 0.7); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .plaque {
    background: linear-gradient(180deg, #1e1432, #150d23);
    box-shadow:
      inset 0 0 0 0.3125rem #190f28,
      inset 0 0 0 calc(0.3125rem + 1px) rgb(var(--line-rgb) / 0.32),
      0 0.125rem 0.25rem rgb(0 0 0 / 0.5),
      0 0 3.5rem -1rem rgb(138 92 230 / 0.3),
      0 1.75rem 2.75rem -1.25rem rgb(0 0 0 / 0.8);
  }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .tier-row { background: linear-gradient(100deg, rgb(var(--line-rgb) / 0.1), rgb(var(--line-rgb) / 0.05)); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .ledger-rank { background: linear-gradient(100deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: inset 0 0 0 1px rgb(var(--line-rgb) / 0.25); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .award-card {
    background: var(--surface); border-color: rgb(var(--line-rgb) / 0.4);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 0.125rem 0.5rem -0.125rem rgb(0 0 0 / 0.6);
  }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .award-card:hover,
  :where(html:has(input[name="theme"][value="dark"]:checked)) .award-card:focus-visible { border-color: var(--ink); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .full-info {
    background: linear-gradient(180deg, #1e1432, #170f26);
    box-shadow: inset 0 0 0 0.1875rem #190f28, inset 0 0 0 calc(0.1875rem + 1px) rgb(var(--line-rgb) / 0.3), 0 0 1.5rem -0.5rem rgb(138 92 230 / 0.35);
  }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .faq details,
  :where(html:has(input[name="theme"][value="dark"]:checked)) .faq details:first-child { background: var(--surface); border-color: rgb(var(--line-rgb) / 0.28); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .faq details[open] { background: #1d122f; border-color: rgb(var(--line-rgb) / 0.6); box-shadow: inset 0.1875rem 0 0 #9a6bf0; }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .faq details[open] summary::after { background: var(--brand); border-color: #9a6bf0; color: #fff; }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .bio-facts { background: var(--surface); border-color: rgb(var(--line-rgb) / 0.35); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .bio-line li::before { background: #9a6bf0; }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .std-table tbody tr:hover { background: rgb(var(--line-rgb) / 0.08); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .zoom-box { background: rgb(15 8 24 / 0.985); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .zoom-close { background: var(--surface); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .zoom-img { border: 1px solid rgb(var(--line-rgb) / 0.25); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .dots a::before { border-color: var(--ink-soft); }
}
/* AUTO, more contrast / less transparency */
@media screen and (prefers-color-scheme: dark) and ((prefers-reduced-transparency: reduce) or (prefers-contrast: more)) {
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .zoom-box { background: var(--bg); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .topbar { background-color: var(--bg); }
}
/* FORCED, more contrast / less transparency */
@media screen and ((prefers-reduced-transparency: reduce) or (prefers-contrast: more)) {
  :where(html:has(input[name="theme"][value="dark"]:checked)) .zoom-box { background: var(--bg); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .topbar { background-color: var(--bg); }
}
/* <<< theme-css */

/* v1.13.10 (owner: text looks soft on a PC when the pointer is on it): text that zooms or nudges is drawn with exact glyph geometry
   (no hinting jumps while the scale changes) and the zoom ends on the pixel grid; with the tilt now flat over text (js/tilt.js) it stays crisp. */
@media (hover: hover) and (pointer: fine) {
  :is(.facts > div, .award-head, .award-date, .bio p, .group-title, .faq p, .section-title, .dedication, .ledger-top > span, .ledger-rank > p, .home-lead, .foot-note, .ver),
  .tier-row > :is(.t-label, .t-display, .t-title), .facts dt { text-rendering: geometricPrecision; -webkit-font-smoothing: subpixel-antialiased; }
}

/* ==========================================================================
   v1.13.11 (owner: «More about SETTWOR» and «All awards» do not fit on a phone; «All awards» is tight on a PC)
   - computer: the three award groups sit side by side, so the screen is never taller than the window
   - phone: compact award cards (kind + date on one line) and a compact bio (facts as one-line rows)
   ========================================================================== */
@media (min-width: 900px) {
  .stack:has(> .award-groups) { max-width: 76rem; }
  .award-groups { width: min(100%, 72rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; grid-auto-flow: column; column-gap: 1.5rem; row-gap: 0.5rem; align-items: start; }
  .award-groups .award-card { --cs: clamp(3.5rem, 8.5dvh, 4.75rem); gap: 0.875rem; padding: 0.625rem 0.875rem 0.625rem 0.625rem; }
  .award-groups .card-num { font-size: 1.5rem; }
  .award-groups .card-kind, .award-groups .card-sub, .award-groups .card-date { font-size: var(--fs-small); }
}
/* phone ladder (v1.13.14, owner: «do not squeeze so hard»): tall phones keep the roomy original cards and bio; the squeeze comes in steps and only as far as the screen height needs */
@media (max-width: 899px) and (max-height: 839px) {   /* step 1: middle height. Cards: kind + date share a line, still roomy */
  .award-groups { gap: 0.375rem; }
  .award-groups .cards { gap: 0.375rem; }
  .award-groups .award-card { --cs: 3.5rem; gap: 0.75rem; padding: 0.4375rem 0.75rem 0.4375rem 0.5rem; min-height: 0; }
  .award-groups .card-text { display: grid; grid-template-columns: 1fr auto; column-gap: 0.5rem; row-gap: 0.0625rem; align-items: baseline; }
  .award-groups .card-kind { grid-column: 1; grid-row: 1; }
  .award-groups .card-date { grid-column: 2; grid-row: 1; text-align: right; }
  .award-groups .card-days { display: none; }
  .award-groups .card-num { grid-column: 1 / -1; grid-row: 2; font-size: 1.375rem; line-height: 1.05; }
  .award-groups .card-sub { grid-column: 1 / -1; grid-row: 3; }
  .award-groups .icon { display: none; }
  .bio { gap: 0.625rem; padding-block: 0; }
  .bio-line { gap: 0.375rem; }
  .bio-facts > div { padding-block: 0.4375rem !important; }
  .s4 .stack { gap: 0.5rem; }
}
@media (max-width: 899px) and (max-height: 699px) {   /* step 2: short phones (about 640-700 px): the tight version */
  .award-groups { gap: 0.25rem; }
  .award-groups .group-title { padding-top: 0.125rem; }
  .award-groups .cards { gap: 0.3125rem; }
  .award-groups .award-card { --cs: 3rem; gap: 0.625rem; padding: 0.3125rem 0.625rem 0.3125rem 0.375rem; }
  .award-groups .card-text { row-gap: 0; }
  .award-groups .card-num { font-size: 1.25rem; }
  .bio { gap: 0.4375rem; }
  .bio-line { gap: 0.25rem; }
  .bio-facts > div { padding-block: 0.25rem !important; }
  .s4 .stack { gap: 0.375rem; padding-block: 0; }
  .s4 .section-title { margin-bottom: -0.25rem; }
}
/* bio: facts are one-line rows (label left, value right) on phones, roomy by default */
@media (max-width: 899px) {
  .bio-facts { grid-template-columns: 1fr !important; }
  .bio-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.875rem; border-right: 0 !important; border-top: 1px solid rgb(var(--line-rgb) / 0.2) !important; }
  .bio-facts > div:first-child { border-top: 0 !important; }
  .bio-facts dd { margin: 0; text-align: right; }
  .bio-line { gap: 0.625rem; }
}
@media (max-width: 899px) and (max-height: 760px) { .s3 .thumb { width: clamp(6rem, 20dvh, 9rem); } }

/* ==========================================================================
   v1.13.12 (owner): no zoom on phones, no page scrollbar, a soft press on text
   ========================================================================== */
@media (pointer: coarse) { html, body { touch-action: pan-x pan-y; } }   /* iOS ignores user-scalable=no: this stops pinch and double-tap zoom */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  :is(.facts > div, .award-head, .award-date, .bio p, .group-title, .faq p, .section-title, .dedication, .ledger-top > span, .ledger-rank > p, .home-lead, .foot-note, .ver, .tier-row > :is(.t-label, .t-display, .t-title)):active {
    scale: 1.02; transition-duration: 280ms; transition-timing-function: cubic-bezier(.22, .61, .36, 1);
  }
}

/* ==========================================================================
   v1.13.15 (owner: «add a theme switch to the footer»): Auto / Light / Dark, between the two footer links.
   CSS only (AGENTS.md rule 8: no script, no storage): three radio buttons, the page reads the checked one with :has().
   Auto = the system setting (as in v1.13.9). Light / Dark = forced on this page. The choice is NOT remembered on the next page
   (that would need storage and a script). The dark rules live in src/dark.css (copied above, between the theme-css markers).
   Look: one 36px pill (44px tap area), hairline ring, the chosen segment filled with ink (white-on-ink in light, ink-on-ground in dark); 13px text.
   ========================================================================== */
:root:has(input[name="theme"][value="light"]:checked) { color-scheme: light; }   /* a forced Light page also draws scrollbars and controls light */
.theme-switch {   /* 36px pill + 2 x 4px margin = the 44px of a footer link row, so the footer does not grow; the tap area (the inputs) is the full 44px */
  position: relative;
  display: inline-flex;
  align-items: stretch;
  margin: 0.25rem;
  border-radius: 999px;
}
.theme-switch::after {   /* the ring is drawn OVER the filled segment so the pill keeps its outline */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(var(--line-rgb) / 0.45);
  pointer-events: none;
}
.theme-opt { position: relative; display: flex; min-height: 2.25rem; min-inline-size: 44px; cursor: pointer; }
.theme-opt input { position: absolute; inset: -0.25rem 0; inline-size: 100%; block-size: calc(100% + 0.5rem); margin: 0; opacity: 0; cursor: pointer; }   /* 36px + 4px above and below = 44px tap area */
.theme-opt:first-child span { border-start-start-radius: 999px; border-end-start-radius: 999px; }
.theme-opt:last-child span  { border-start-end-radius: 999px;   border-end-end-radius: 999px; }
.theme-opt input:focus-visible { outline: none; }
.theme-opt span {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-inline: 0.75rem;
  font-size: var(--fs-small);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.theme-opt input:checked + span { background: var(--ink); color: var(--bg); }
.theme-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: -3px; }
.theme-opt input:checked:focus-visible + span { outline-color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .theme-opt:hover input:not(:checked) + span { background: rgb(var(--line-rgb) / 0.12); } }
@media (prefers-reduced-motion: no-preference) {
  /* press = instant, release = a small hop (same feel as the footer links) */
  .theme-opt span { transition: background-color 180ms ease, color 180ms ease, scale var(--spring); }
  .theme-opt:active span { scale: 0.94; transition: scale var(--press), background-color 180ms ease, color 180ms ease; }
}
@media (prefers-reduced-motion: reduce) { .theme-opt:active span { opacity: 0.6; } }
@media (prefers-contrast: more) { .theme-switch::after { box-shadow: inset 0 0 0 1px var(--ink); } }
@media (forced-colors: active) {
  .theme-opt input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
@media print { .theme-switch { display: none; } }
@supports not selector(:has(*)) { .theme-switch { display: none; } }   /* without :has() the switch could not work, so it is not shown */