/* ==========================================================================
   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(3rem, 7vw, 4.125rem);   /* v1.14.15: taller bar (was 2.75–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: 3.25rem; }
  /* 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; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }   /* v1.14.17: transform (was translate): runs on the GPU in every mobile browser */
@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) */
  /* v1.14.17: the top bar no longer fades in: fading an element that has backdrop-filter makes iOS Safari flicker. It is simply there from the first frame. */
  .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 .award-code           { animation: rise 560ms var(--ease) 280ms 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 */

/* v1.14.17 (owner): the award code, a quiet registry line under the dedication: CDRA-<KIND>-<LEVEL>-<YY>-<NNNN>-<C>. Hidden where the dedication is hidden (short screens). */
.award-code {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;   /* always two lines: the label, then the code, so every award looks the same */
  align-items: center;
  gap: 0.125rem;
  font-size: var(--fs-small);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.award-code { opacity: 0.85; }
.award-code-v { font-variant-numeric: tabular-nums; letter-spacing: 0.1em; white-space: nowrap; user-select: all; }   /* v1.14.17: quiet, same soft ink as the date line, no bold */
/* the same code, very quiet, on the home page cards: only where the screen is tall enough (rule 9) */
.card-code { display: none; font-size: var(--fs-small); line-height: 1.2; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; color: var(--ink-soft); opacity: 0.8; white-space: nowrap; }
@media (min-height: 960px) { .card-code { display: block; } }
@media (max-height: 640px) { .award-code, .facts > .fact-code { display: none; } }   /* no room on 320×568 screens (rule 9) */
@media (orientation: landscape) and (max-height: 520px) { .s1 .award-code { display: none; } }

/* 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, .home-eyebrow, .home-name, .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, .home-eyebrow, .home-name, .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, .home-eyebrow, .home-name, .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, .home-eyebrow, .home-name, .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); }
  /* (v1.14.3: the FAQ answer motion moved to the v1.14.3 block at the end of this file) */

  /* 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, .home-eyebrow, .home-name, .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; }

/* v1.14.17 (owner: the «Listen» links looked odd, the gaps): no dot separators and no ragged wrap; the four services are an even 2×2 grid of quiet outlined buttons
   (hairline, soft radius, 44px tall, same ink as the rest). On narrow screens the label sits above the grid and the grid takes the full row, so «YouTube Music» never squeezes.
   The award code row follows the same rule so the code is never cut in the middle. */
/* v1.14.30 (owner: «remove the buttons in More information, make them clickable text»): the «Listen» (and «Website») links are plain underlined text again, in one wrapping
   line with a wide gap between them; no outline, no fill. Each link still keeps a 44px tall target (.fact-link min-height), so wrapped lines stay tappable. */
.facts dd.is-links:not(.is-share) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.25rem; }
.facts dd.is-links:not(.is-share) > span[aria-hidden] { display: none; }   /* no dots: a dot left at the end of a wrapped line looks stray */
.facts dd.is-links:not(.is-share) .fact-link { min-inline-size: 0; justify-content: flex-start; padding: 0; }
.facts > .fact-code dd { font-size: var(--fs-body); letter-spacing: 0.06em; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* v1.16.2 (owner: «the award code is written on two lines on my phone, make it one line and exactly on the table»): the code now fits its own column at ANY screen width and ANY text size.
   The value cell is a size container, and the code takes 9.6% of the cell width as its font size (17 characters = about 10 em with the tracking), never more than body size.
   So it cannot spill past the table edge or wrap, whatever the phone width or the user's text-size setting. The link is plain inline text (baseline = the label's baseline, row as tall as the other rows);
   the 44px tap target is kept by padding cancelled with a negative margin, so the row no longer looks taller than its neighbours. */
.facts > .fact-code dd { container-type: inline-size; min-inline-size: 0; }
.facts > .fact-code dd a { display: inline-block; min-height: 44px; box-sizing: border-box; padding: 0.75rem 0.25rem; margin: -0.75rem -0.25rem; min-inline-size: 0; white-space: nowrap; letter-spacing: 0.02em; font-size: min(var(--fs-body), 9.6cqw); }
@media (min-width: 30.0625rem) { .facts > .fact-code dd a { letter-spacing: 0.06em; font-size: min(var(--fs-body), 8.6cqw); } }
@media (max-width: 30rem) {
  .facts > div:has(> dd.is-links:not(.is-share) > a + a, > dd.is-links:not(.is-share) > span) { grid-template-columns: 1fr; row-gap: 0.25rem; }   /* v1.16.8: only a row with SEVERAL links is stacked; one link stays label | value like the other rows */
}
/* v1.14.35 (owner: «on a phone the award code must be ONE line like the other rows, shrink the text if it does not fit»): the row stays label | value; the code shrinks with the width (floor 13px = small text floor, §5 item 5) */
/* 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; } }
/* v1.14.1 (owner): only the TEXT of «Awards / Top award / Latest» reacts to hover and press; the lines of the table (top, bottom and the dividers) stay still.
   So the scale sits on each dt / dd, never on the cell that carries the divider. */
@media (prefers-reduced-motion: no-preference) {
  .home-stats dt, .home-stats dd { transition: scale var(--soft), color var(--soft); }
  @media (hover: hover) and (pointer: fine) { .home-stats > div:hover dt, .home-stats > div:hover dd { scale: 1.04; } }
  .home-stats > div:active dt, .home-stats > div:active dd { scale: 0.96; transition-duration: 90ms; }
}
@media (prefers-reduced-motion: reduce) { .home-stats > div:active dt, .home-stats > div:active dd { 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-tilt { 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, .home-eyebrow, .home-name, .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; } }

/* ==========================================================================
   v1.14.17 (owner: «Other awards» prettier, and ALL the awards, not only one release): a register of every award, in three groups (the track, the album, the artist).
   Each group has a hairline title (name left, kind right); each award is one quiet row: metal disc, the number, the level and the date in a soft second line, the link icon.
   The open page is marked (aria-current): a soft tint and a short ink bar. Rows are 44px+ targets. On short screens the date line goes, so everything still fits (rule 9).
   ========================================================================== */
.reg { width: min(100%, 26rem); display: flex; flex-direction: column; gap: clamp(0.375rem, 1.8dvh, 1.125rem); }
.reg-group { display: flex; flex-direction: column; gap: clamp(0.125rem, 0.6dvh, 0.375rem); }
.reg-title {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin: 0;
  padding: 0 0.5rem 0.25rem; border-bottom: 1px solid rgb(var(--line-rgb) / 0.28);
  font-size: var(--fs-small); line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft);
}
.reg-name { min-width: 0; overflow-wrap: anywhere; }
.reg-kind { flex: none; }
.reg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.reg-row {
  position: relative; display: grid; grid-template-columns: auto auto 1fr auto; column-gap: 0.625rem; align-items: center;
  min-height: 44px; padding: 0.25rem 0.5rem; border-radius: 0.5rem;
}
.reg-row .mini-disc { grid-row: 1 / span 2; grid-column: 1; width: 1.625rem; height: 1.625rem; }
.reg-row .icon { grid-row: 1 / span 2; grid-column: 4; opacity: 0.75; }
.reg-main { grid-column: 3; display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; white-space: nowrap; }
.reg-num { font-family: var(--f-title); font-weight: 700; font-size: clamp(1.125rem, min(5vw, 3dvh), 1.5rem); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.01em; }
.reg-unit { font-size: var(--fs-small); color: var(--ink-soft); letter-spacing: 0.04em; }
.reg-meta { grid-column: 3; font-size: var(--fs-small); line-height: 1.25; color: var(--ink-soft); letter-spacing: 0.03em; }
.reg-row[aria-current="page"] { background: rgb(var(--line-rgb) / 0.07); }
.reg-row[aria-current="page"]::before { content: ""; position: absolute; inset-block: 0.5rem; inset-inline-start: 0; width: 0.1875rem; border-radius: 2px; background: var(--ink); }
@media (hover: hover) and (pointer: fine) { .reg-row:hover { background: rgb(var(--line-rgb) / 0.07); } }
@media (prefers-contrast: more) { .reg-row[aria-current="page"] { outline: 1px solid var(--ink); } .reg-title { border-bottom-color: var(--ink); } }
@media (max-height: 700px) { .reg-meta { display: none; } .reg-main { grid-row: 1 / span 2; align-self: center; } }
/* phones turned sideways: two columns (the singles on the left, the album and the artist on the right), so all five awards fit the short screen */
@media (orientation: landscape) and (max-height: 520px) {
  .reg { width: min(100%, 44rem); display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1rem, 4vw, 2.5rem); row-gap: 0.25rem; align-items: start; }
  .reg-group:first-child { grid-row: 1 / span 2; }
  .reg-row { padding-block: 0; }
}
@media (min-width: 600px) and (min-height: 760px) { .reg { width: min(100%, 30rem); } .reg-num { font-size: clamp(1.375rem, min(2.4vw, 3.4dvh), 1.75rem); } }

/* >>> 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: 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))) body { background: transparent; }
  :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: #150c21; -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  :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, rgb(122 72 214 / 0.2), rgb(122 72 214 / 0.1)); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(var(--line-rgb) / 0.2); }
  :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); }
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .s1 .plaque::after,
  :where(html:not(:has(input[name="theme"][value="light"]:checked))) .zoom-tilt::after { mix-blend-mode: screen; opacity: calc(var(--sh, 0) * 0.3); }
}
/* 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: radial-gradient(ellipse 120% 60% at 50% 0%, #1a0f2c, var(--bg) 62%) fixed, var(--bg); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) body { background: transparent; }
  :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: #150c21; -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  :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, rgb(122 72 214 / 0.2), rgb(122 72 214 / 0.1)); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(var(--line-rgb) / 0.2); }
  :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); }
  :where(html:has(input[name="theme"][value="dark"]:checked)) .s1 .plaque::after,
  :where(html:has(input[name="theme"][value="dark"]:checked)) .zoom-tilt::after { mix-blend-mode: screen; opacity: calc(var(--sh, 0) * 0.3); }
}
/* 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, .home-eyebrow, .home-name, .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, .home-eyebrow, .home-name, .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 (v1.14.31): a 28px segmented track (44px tap area), a thumb filled with ink that glides under the chosen word (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 {   /* v1.14.31 (owner: smaller, neater): a quiet segmented control, 28px track (2px inset) with ONE thumb that slides under the chosen word; the tap area is still 44px (the inputs); 28px + 2 x 8px margin = the 44px of a footer link row, so the footer does not grow */
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* three equal columns, so the thumb is exactly one column wide */
  margin: 0.5rem 0.25rem;
  padding: 2px;
  border-radius: 999px;
  background: rgb(var(--line-rgb) / 0.08);
  box-shadow: inset 0 0 0 1px rgb(var(--line-rgb) / 0.22);
}
.theme-switch::before {   /* the thumb: ink fill, the chosen word is drawn in the page colour on top of it */
  content: "";
  position: absolute;
  inset-block: 2px;
  inset-inline-start: 2px;
  inline-size: calc((100% - 4px) / 3);
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 1px 2px rgb(var(--line-rgb) / 0.35);
  pointer-events: none;
}
.theme-switch:has(input[value="light"]:checked)::before { translate: 100% 0; }
.theme-switch:has(input[value="dark"]:checked)::before  { translate: 200% 0; }
.theme-opt { position: relative; display: flex; min-block-size: 1.5rem; min-inline-size: 44px; cursor: pointer; }
.theme-opt input { position: absolute; inset: -0.625rem 0; inline-size: 100%; block-size: calc(100% + 1.25rem); margin: 0; opacity: 0; cursor: pointer; }   /* 24px + 10px above and below = 44px tap area */
.theme-opt input:focus-visible { outline: none; }
.theme-opt span {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-inline: 0.5rem;
  border-radius: 999px;
  font-size: var(--fs-small);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.theme-opt input:checked + span { color: var(--bg); }
.theme-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: -2px; }
.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) {
  /* the thumb glides (a short ease-out, no bounce: it is a quiet control); a press is instant, the release hops back like the footer links */
  .theme-switch::before { transition: translate 280ms cubic-bezier(.32, .72, 0, 1); }
  .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 { box-shadow: inset 0 0 0 1px var(--ink); } }
@media (forced-colors: active) {
  .theme-switch { outline: 1px solid CanvasText; }
  .theme-switch::before { forced-color-adjust: none; background: Highlight; box-shadow: none; }
  .theme-opt input:checked + span { forced-color-adjust: none; 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 */

/* v1.14.31 (owner: «info about Ledgertone in the footer as SETTWOR projects»): ONE quiet two-line link in the footer link row, in the place of the removed «Award standards» link: a small caption «SETTWOR projects» over the project name; the whole 44px-tall item is the link (one line would not fit next to the theme switch on a 375px phone and would add a row, rule 9) */
.foot-projects { flex-direction: column; justify-content: center; gap: 0.0625rem; line-height: 1.15; text-align: center; text-decoration: none; }
.foot-projects-l { color: var(--ink-soft); }
.foot-projects-n { text-decoration: underline; text-underline-offset: 0.2em; }
.foot-projects:hover .foot-projects-n { text-underline-offset: 0.32em; }

/* ---------- v1.14.0 (owner: pull the page down to refresh it, but never by accident) ----------
   js/tilt.js adds html.ptr-on on touch screens and creates ONE ring (.ptr) on the first deliberate pull at the top of the page.
   The browser's own instant pull-to-refresh is switched off only while the script is running, so without it nothing changes.
   Ring = a conic fill (--p, 0..1) around a disc in the page colours; the chevron points down while pulling and up when armed (let go = reload).
   Tokens only (--ink, --bg, --line-rgb), so light, dark and forced-dark work with no extra rules. Not in print. */
html.ptr-on { overscroll-behavior-y: contain; }
.ptr {
  position: fixed;
  z-index: 900;                       /* under the top bar (1000): the ring slides out from beneath it */
  inset-inline-start: 50%;
  inset-block-start: calc(var(--bar-full) + 0.25rem);
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin-inline-start: -1.375rem;
  border-radius: 50%;
  background: conic-gradient(var(--ink) calc(var(--p, 0) * 1turn), rgb(var(--line-rgb) / 0.22) 0);
  box-shadow: 0 0.25rem 1rem rgb(var(--line-rgb) / 0.22);
  translate: 0 calc(var(--ptr-y, 0px) - 2.75rem);
  opacity: 0;
  pointer-events: none;
}
.ptr::after {                          /* the disc inside the ring */
  content: "";
  position: absolute;
  inset: 0.1875rem;
  border-radius: 50%;
  background: var(--bg);
}
.ptr::before {                         /* the chevron (drawn in CSS: no glyph, no picture) */
  content: "";
  position: absolute;
  z-index: 1;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  margin: -0.4375rem 0 0 -0.3125rem;
  border: solid var(--ink);
  border-width: 0 0.125rem 0.125rem 0;
  rotate: 45deg;
}
.ptr.is-armed::before { rotate: 225deg; margin-block-start: -0.1875rem; }
@media (prefers-reduced-motion: no-preference) {
  .ptr::before { transition: rotate 220ms var(--ease), margin 220ms var(--ease); }
  .ptr.is-back { transition: translate 280ms var(--ease), opacity 220ms ease-out; }   /* let go early: it slides back up */
}
@media (prefers-reduced-motion: reduce) {
  .ptr { translate: 0 0; }                                                            /* no travel, only the fade */
}
@media (prefers-contrast: more) { .ptr { box-shadow: 0 0 0 1px var(--ink); } }
@media (forced-colors: active) { .ptr { forced-color-adjust: none; background: Canvas; border: 2px solid CanvasText; } .ptr::after { background: Canvas; } .ptr::before { border-color: CanvasText; } }
@media print { .ptr { display: none; } }

/* ---------- v1.14.3 (owner: «questions do not fit the phone screen; everything must fit one screen on computer and phone; switching between questions must be smooth») ----------
   AGENTS.md rule 9 (strict fit) + §5 13(y). CSS only, no script.
   1) The Q&A screen is a fixed stage: .stack takes exactly the room between the title and the arrow (flex-basis 0) and is a size container,
      so the list is sized against the room that really exists (any phone, any browser bar, landscape), not against a guess.
   2) The list compacts in steps by that room: roomy -> compact rows -> tight rows -> «chips» (numbers + one panel). Every step shows all the text.
   3) Opening / switching: the answer height and opacity animate together on one curve; the old answer closes while the new one opens, so the
      list below keeps moving as ONE motion. Reduced motion: opacity only. Browsers without ::details-content simply toggle. */
.faq { --q-h: 3.25rem; --q-gap: clamp(0.375rem, 1.2dvh, 0.75rem); --a-fs: var(--fs-body); --a-lh: 1.35; --a-indent: calc(0.875rem + 1.5rem + 0.875rem); --faq-t: 360ms; --faq-e: cubic-bezier(.2, .8, .2, 1); gap: var(--q-gap); }
.faq summary { min-height: var(--q-h); }
.faq .faq-a { min-height: 0; }
.faq .faq-a p, .faq .faq-a .faq-link { margin-left: var(--a-indent); }
.faq .faq-a p { font-size: var(--a-fs); line-height: var(--a-lh); }
.faq .faq-a .faq-link { margin-block: -0.25rem 0.25rem; }

@supports (container-type: size) {
  .faq-screen .stack { flex: 1 1 0; min-height: 0; container-type: size; container-name: faqbox; padding-block: clamp(0.125rem, 1.2dvh, 1.25rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .faq details { transition: border-color 240ms ease, background-color 240ms ease, box-shadow 240ms ease; }
  .faq summary::before { transition: color 240ms ease; }
  @supports selector(::details-content) {
    .faq details::details-content {
      display: grid; grid-template-rows: 0fr; opacity: 0;
      transition: grid-template-rows var(--faq-t) var(--faq-e), opacity 160ms ease, content-visibility var(--faq-t) allow-discrete;
    }
    .faq details[open]::details-content {
      grid-template-rows: 1fr; opacity: 1;
      transition: grid-template-rows var(--faq-t) var(--faq-e), opacity 260ms ease 90ms, content-visibility var(--faq-t) allow-discrete;
    }
    .faq .faq-a { overflow: hidden; }
  }
}
@media (prefers-reduced-motion: reduce) {
  @supports selector(::details-content) {
    .faq details::details-content { opacity: 0; transition: opacity 160ms ease, content-visibility 160ms allow-discrete; }
    .faq details[open]::details-content { opacity: 1; }
  }
}

/* v1.14.3 — step 2: compact rows, then «chips». Sizes come from the room of the Q&A box (.stack, a size container), not from the viewport. */
.faq-q, .faq-hint { display: none; }
@supports (container-type: size) {
  /* step A1: compact rows (44px targets stay), smaller gaps, answer at label size */
  @container faqbox (max-height: 38.5rem) {
    .faq { --q-h: 2.75rem; --q-gap: 0.375rem; --a-fs: 0.9375rem; --a-lh: 1.3; --a-indent: 2.375rem; }
    .faq summary { padding-block: 0; gap: 0.75rem; }
    .faq .faq-a p { padding-bottom: 0.625rem; }
  }
  /* step B: the list becomes number «chips» (44px) + ONE answer panel; the question text of the open one is the panel's heading */
  @container faqbox (max-height: 30rem) {
    .faq { --chips-h: 6.0625rem; position: relative; flex: 1 1 0; min-height: 0; width: min(100%, 26rem); flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-end; gap: 0.375rem; counter-reset: q; }
    .faq details, .faq details:first-child, .faq details[open] { flex: 0 0 2.75rem; position: static; overflow: visible; border: 0; background: none; box-shadow: none; }
    .faq summary { inline-size: 2.75rem; block-size: 2.75rem; min-block-size: 0; padding: 0; justify-content: center; border: 1px solid rgb(var(--line-rgb) / 0.3); border-radius: 0.375rem; background: var(--surface, #fff); }
    .faq summary > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .faq summary::before { min-width: 0; font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--ink); }
    .faq summary::after, .faq details[open] summary::after { display: none; }
    .faq details[open] summary { background: var(--ink); border-color: var(--ink); }
    .faq details[open] summary::before { color: var(--bg, #fff); }
    /* the panel: every answer sits in the same box, above the chips; switching = a cross-fade */
    .faq .faq-a { position: absolute; inset: 0 0 var(--chips-h) 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.5rem; padding: 0.75rem 0.875rem; border: 1px solid rgb(var(--line-rgb) / 0.3); border-left: 0.1875rem solid var(--ink); border-radius: 0.375rem; background: var(--surface, #fff); overflow: hidden; }
    .faq .faq-q { display: block; font-weight: 700; font-size: var(--fs-body); line-height: 1.2; }
    .faq .faq-a p, .faq .faq-a .faq-link { margin: 0; padding: 0; }
    .faq .faq-a .faq-link { align-self: flex-start; margin-block: 0; }
    .faq details::details-content { grid-template-rows: 1fr; }
    .faq-hint { display: grid; place-items: center; position: absolute; inset: 0 0 var(--chips-h) 0; margin: 0; padding: 0.75rem 0.875rem; text-align: center; color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.3; border: 1px dashed rgb(var(--line-rgb) / 0.3); border-radius: 0.375rem; opacity: 1; transition: opacity 200ms ease; }
    .faq:has(details[open]) .faq-hint { opacity: 0; visibility: hidden; transition: opacity 120ms ease, visibility 0s 120ms; }
  }
  /* a wide box holds all seven chips in ONE row, so the panel may grow */
  @container faqbox (max-height: 30rem) and (min-width: 20.75rem) { .faq { --chips-h: 3.125rem; } }
  /* short and wide (a phone on its side): the panel is two columns, the question and the link on the left, the answer on the right */
  @container faqbox (max-height: 14rem) and (min-width: 20.75rem) {
    .faq { width: min(100%, 38rem); }
    .faq .faq-a { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); grid-template-areas: "q p" "l p"; align-content: center; align-items: start; column-gap: 1rem; row-gap: 0.25rem; padding: 0.5rem 0.75rem; }
    .faq .faq-q { grid-area: q; font-size: var(--fs-label); }
    .faq .faq-a p:not(.faq-q) { grid-area: p; font-size: var(--fs-hint); line-height: 1.3; align-self: center; }
    .faq .faq-a .faq-link { grid-area: l; }
  }
}

/* ==========================================================================
   v1.14.5 (owner: text MUST react to a press, as before; and it must be copyable on a phone)
   The press swell is back exactly as before (instant swell, 1.02). If the finger STAYS down (a long press = the user wants to select),
   the text eases back to its normal size after 0.3 s and stays still, so the selection handles can work. A tap (released early) looks as before.
   ========================================================================== */
@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, .home-eyebrow, .home-name, .foot-note, .ver, .tier-row > :is(.t-label, .t-display, .t-title)):active {
    animation: press-hold 700ms cubic-bezier(.22, .61, .36, 1) both;
  }
  @keyframes press-hold { 0% { scale: 1; } 25% { scale: 1.02; } 40% { scale: 1.02; } 75%, 100% { scale: 1; } }
}
@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, .home-eyebrow, .home-name, .foot-note, .ver, .tier-row > :is(.t-label, .t-display, .t-title), .home-stats dt, .home-stats dd) {
    -webkit-user-select: text; user-select: text;
  }
}

/* ==========================================================================
   v1.14.7 (owner: «make the Full information button prettier»)
   A solid ink pill (white text in the light theme, dark text in the dark theme) with a fine inner ring and a soft shadow;
   the arrow sits in a small round chip. Same size and position as before (still 44 px high), so no screen changes height.
   Colours only from the tokens --ink / --bg (no new colours, rule 13h).
   ========================================================================== */
.full-info {
  gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  /* v1.14.15 (owner: «not the opposite colour»): colours, border and ring come back from the framed-button rules above
     (white pill with ink text in the light theme, dark pill with light text in the dark theme), not an inverted fill. */
}
.full-info .icon {
  box-sizing: content-box;
  width: 0.75rem; height: 0.75rem;
  padding: 0.4375rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
@media (prefers-contrast: more) { .full-info { box-shadow: none; } }

/* v1.14.8 (owner: «also add that I run the Ledgertone project»): a plain underlined link inside the bio sentence (inline text link, not a stand-alone button) */
.inline-link { padding-block: 0.875rem; margin-block: -0.875rem; color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .inline-link:hover { text-underline-offset: 0.32em; } }

/* v1.14.8: the bio sentence got longer (Ledgertone): on the shortest phones (about 640 px) the facts and the timeline sit a little tighter so «More about SETTWOR» still fits one window (rule 9) */
@media (max-width: 899px) and (max-height: 660px) {
  .bio { gap: 0.3125rem; }
  .bio p { line-height: 1.3; }
  .bio-line { gap: 0.1875rem; }
  .bio-facts > div { padding-block: 0.125rem !important; }
}

/* v1.16.1 (owner: «the moving gradient background: faster and more transparent, the colour less saturated»): the colour tokens below are ~47% weaker (every alpha almost halved,
   light and dark) and the two drift cycles are 20 s and 31 s (were 46 s and 71 s). Still one slow back-and-forth of ~40 s / ~62 s (far from the 0.2 Hz band of apple-design §14),
   still off under prefers-reduced-motion. */
/* ==========================================================================
   v1.14.10 (owner: «make the page background shimmer smoothly and beautifully»)
   Two fixed layers of soft colour blobs behind the pages (html::before / ::after) drift, turn and breathe very slowly, on different, long, never-synchronised
   cycles (46 s and 71 s, alternating, ease-in-out), so the colours melt into each other and the pattern practically never repeats. Pale lilac / sky / rose / mint in the light
   theme, deep violet / indigo / magenta in the dark theme. CSS only; individual properties translate / rotate / scale (no `transform`, no filter, no blur: cheap on phones).
   prefers-reduced-motion: the blobs stay still (a static soft gradient). Print: off. Text, cards and covers sit above it, contrast is unchanged (the tints stay under ~25% opacity).
   ========================================================================== */
:root {
  --fx-a1: rgb(176 140 255 / 0.16);  --fx-a2: rgb(122 190 255 / 0.14);  --fx-a3: rgb(255 154 205 / 0.12);
  --fx-b1: rgb(140 236 222 / 0.11);  --fx-b2: rgb(190 150 255 / 0.12);  --fx-b3: rgb(255 190 150 / 0.09);
}
@media screen and (prefers-color-scheme: dark) {
  html:not(:has(input[name="theme"][value="light"]:checked)) {
    --fx-a1: rgb(122 72 214 / 0.18);  --fx-a2: rgb(58 92 224 / 0.14);   --fx-a3: rgb(196 74 186 / 0.11);
    --fx-b1: rgb(60 170 200 / 0.08);  --fx-b2: rgb(150 90 235 / 0.14);  --fx-b3: rgb(220 90 150 / 0.08);
  }
}
html:has(input[name="theme"][value="dark"]:checked) {
  --fx-a1: rgb(122 72 214 / 0.18);  --fx-a2: rgb(58 92 224 / 0.14);   --fx-a3: rgb(196 74 186 / 0.11);
  --fx-b1: rgb(60 170 200 / 0.08);  --fx-b2: rgb(150 90 235 / 0.14);  --fx-b3: rgb(220 90 150 / 0.08);
}
@media screen {
  body { background: transparent; }   /* the page colour is the html background; the shimmer layers sit between it and the body */
  html::before, html::after {
    content: ""; position: fixed; inset: -28%; z-index: -1; pointer-events: none;
    will-change: translate, rotate, scale;
  }
  html::before {
    background:
      radial-gradient(ellipse 34% 30% at 22% 24%, var(--fx-a1), transparent 70%),
      radial-gradient(ellipse 30% 34% at 78% 36%, var(--fx-a2), transparent 70%),
      radial-gradient(ellipse 36% 30% at 40% 82%, var(--fx-a3), transparent 70%);
  }
  html::after {
    background:
      radial-gradient(ellipse 32% 32% at 70% 14%, var(--fx-b1), transparent 70%),
      radial-gradient(ellipse 34% 30% at 12% 62%, var(--fx-b2), transparent 70%),
      radial-gradient(ellipse 30% 34% at 86% 84%, var(--fx-b3), transparent 70%);
  }
}
@media screen and (prefers-reduced-motion: no-preference) {
  /* v1.14.17: the background starts to move only after the entrance of the first screen (1.2 s), so the two big layers do not compete with it on a phone;
     `backwards` keeps the first keyframe during the wait, so nothing jumps when the drift starts */
  html::before { animation: fx-drift-a 20s ease-in-out 1.2s infinite alternate backwards; }
  html::after  { animation: fx-drift-b 31s ease-in-out 1.2s infinite alternate backwards; }
  @keyframes fx-drift-a { from { translate: -5% -4%; rotate: -8deg; scale: 1; }    to { translate: 6% 5%;  rotate: 14deg; scale: 1.12; } }
  @keyframes fx-drift-b { from { translate: 6% 3%;   rotate: 10deg; scale: 1.1; }  to { translate: -6% -5%; rotate: -12deg; scale: 0.98; } }
}
@media print { html::before, html::after { display: none; } }

/* v1.14.15 (owner: «the gradient background must fade out little by little towards the bar, so under the bar the colour is solid»):
   one more fixed layer behind the content (after the two shimmer layers), the plain page colour, solid under the bar and fading to nothing below it
   with an eased curve. The bar itself is not touched. Screen only. */
@media screen {
  body::before {
    content: ""; position: fixed; z-index: -1; pointer-events: none;
    inset: 0 0 auto 0;
    height: calc(var(--bar-full) + clamp(4.5rem, 20vw, 9rem));
    background: linear-gradient(to bottom,
      var(--bg) 0, var(--bg) var(--bar-full),
      color-mix(in srgb, var(--bg) 96%, transparent) calc(var(--bar-full) + clamp(4.5rem, 20vw, 9rem) * 0.1),
      color-mix(in srgb, var(--bg) 88%, transparent) calc(var(--bar-full) + clamp(4.5rem, 20vw, 9rem) * 0.2),
      color-mix(in srgb, var(--bg) 76%, transparent) calc(var(--bar-full) + clamp(4.5rem, 20vw, 9rem) * 0.3),
      color-mix(in srgb, var(--bg) 62%, transparent) calc(var(--bar-full) + clamp(4.5rem, 20vw, 9rem) * 0.4),
      color-mix(in srgb, var(--bg) 48%, transparent) calc(var(--bar-full) + clamp(4.5rem, 20vw, 9rem) * 0.5),
      color-mix(in srgb, var(--bg) 34%, transparent) calc(var(--bar-full) + clamp(4.5rem, 20vw, 9rem) * 0.6),
      color-mix(in srgb, var(--bg) 22%, transparent) calc(var(--bar-full) + clamp(4.5rem, 20vw, 9rem) * 0.7),
      color-mix(in srgb, var(--bg) 12%, transparent) calc(var(--bar-full) + clamp(4.5rem, 20vw, 9rem) * 0.8),
      color-mix(in srgb, var(--bg) 5%, transparent) calc(var(--bar-full) + clamp(4.5rem, 20vw, 9rem) * 0.9),
      color-mix(in srgb, var(--bg) 1%, transparent) calc(var(--bar-full) + clamp(4.5rem, 20vw, 9rem) * 1.0),
      transparent calc(var(--bar-full) + clamp(4.5rem, 20vw, 9rem)));
  }
}

/* v1.14.15 (owner: «the gradient background must fade out little by little towards the bottom, so under the bottom of the screen the colour is solid»):
   the mirror of the layer under the top bar: one more fixed layer (after the shimmer layers, behind the content), the plain page colour, solid at the very bottom
   and fading to nothing upwards with an eased curve. Screen only; taps pass through. */
@media screen {
  body::after {
    content: ""; position: fixed; z-index: -1; pointer-events: none;
    inset: auto 0 0 0;
    height: calc(calc(var(--safe-bottom) + 0.75rem) + clamp(4.5rem, 20vw, 9rem));
    background: linear-gradient(to top,
      var(--bg) 0, var(--bg) calc(var(--safe-bottom) + 0.75rem),
      color-mix(in srgb, var(--bg) 96%, transparent) calc(calc(var(--safe-bottom) + 0.75rem) + clamp(4.5rem, 20vw, 9rem) * 0.1),
      color-mix(in srgb, var(--bg) 88%, transparent) calc(calc(var(--safe-bottom) + 0.75rem) + clamp(4.5rem, 20vw, 9rem) * 0.2),
      color-mix(in srgb, var(--bg) 76%, transparent) calc(calc(var(--safe-bottom) + 0.75rem) + clamp(4.5rem, 20vw, 9rem) * 0.3),
      color-mix(in srgb, var(--bg) 62%, transparent) calc(calc(var(--safe-bottom) + 0.75rem) + clamp(4.5rem, 20vw, 9rem) * 0.4),
      color-mix(in srgb, var(--bg) 48%, transparent) calc(calc(var(--safe-bottom) + 0.75rem) + clamp(4.5rem, 20vw, 9rem) * 0.5),
      color-mix(in srgb, var(--bg) 34%, transparent) calc(calc(var(--safe-bottom) + 0.75rem) + clamp(4.5rem, 20vw, 9rem) * 0.6),
      color-mix(in srgb, var(--bg) 22%, transparent) calc(calc(var(--safe-bottom) + 0.75rem) + clamp(4.5rem, 20vw, 9rem) * 0.7),
      color-mix(in srgb, var(--bg) 12%, transparent) calc(calc(var(--safe-bottom) + 0.75rem) + clamp(4.5rem, 20vw, 9rem) * 0.8),
      color-mix(in srgb, var(--bg) 5%, transparent) calc(calc(var(--safe-bottom) + 0.75rem) + clamp(4.5rem, 20vw, 9rem) * 0.9),
      color-mix(in srgb, var(--bg) 1%, transparent) calc(calc(var(--safe-bottom) + 0.75rem) + clamp(4.5rem, 20vw, 9rem) * 1.0),
      transparent calc(calc(var(--safe-bottom) + 0.75rem) + clamp(4.5rem, 20vw, 9rem)));
  }
}

/* ==========================================================================
   v1.14.11 (owner: «set the logo as text in Gloock»): the logo is the text «CDRA» in Gloock (was an SVG picture).
   Colour = --ink (light and dark themes follow it, no image filter). Size matches the old picture (cap height = old logo height).
   ========================================================================== */
.logo {
  display: inline-block; width: auto; height: auto; aspect-ratio: auto;
  font-family: 'Gloock', Georgia, 'Times New Roman', serif; font-weight: 400; font-synthesis: none;
  font-size: clamp(1.625rem, 3.2vw, 2.3125rem); line-height: 1; letter-spacing: 0.03em; white-space: nowrap;
  color: var(--ink); filter: none !important;
}
@media (max-height: 560px) { .logo { font-size: 1.5rem; } }
@media print { .topbar .logo { width: auto !important; font-size: 1.6rem; } }

/* ==========================================================================
   v1.14.12 (owner: «add a privacy policy»): PRIVACY-POLICY.html, a plain reading page (no screens, no snap), same type and colours as the site.
   ========================================================================== */
.page-legal { display: flex; flex-direction: column; align-items: center; min-height: 100dvh; padding: calc(var(--bar-full) + 1rem) calc(var(--pad) + var(--safe-right)) max(12px, var(--safe-bottom)) calc(var(--pad) + var(--safe-left)); }
.legal { width: 100%; max-width: 38rem; flex: 1 0 auto; text-align: left; }
.legal h1 { margin: 0 0 0.25rem; text-align: left; font-family: var(--f-title); font-weight: 700; font-size: clamp(1.75rem, 6vw, 2.25rem); line-height: 1.1; }
.legal h2 { margin: 1.75rem 0 0.5rem; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.legal p { margin: 0 0 0.875rem; font-size: var(--fs-body); line-height: 1.5; text-wrap: pretty; }
.legal .legal-date { color: var(--ink-soft); font-size: var(--fs-small); margin-bottom: 1.25rem; }
.legal code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; }
.page-legal .site-foot { margin-top: 2rem; }

/* v1.14.12: the footer got a fourth item (Privacy policy): on narrow phones the links sit a little closer so the last two share one row and the screen still fits (rule 9) */
@media (max-width: 24rem) { .foot-links { column-gap: 0.25rem; } .foot-links .foot-link { padding-inline: 0.25rem; } }

/* ==========================================================================
   v1.14.15 (owner: «a click on the award plaque opens a window: save as photo, post to an Instagram story»)
   The share window is a native <dialog> (js/share.js opens it); the picture is images/story/*.png (made by scripts/make_story.py from the real page).
   Buttons are NOT inverted: the theme's own ink on the theme's own page colour, a thin ink outline. Tokens only, so light, dark and forced dark work.
   ========================================================================== */
/* v1.14.29 (owner: the plate is not clickable any more; the save / share window moves elsewhere): a 44px share button at the right end of the top bar
   (iOS-style share glyph, ink, no label; shown only when js/share.js runs). It takes no layout space (absolute inside the bar), so no screen changes height (rule 9). */
.topbar-share { position: absolute; top: var(--safe-top); bottom: 0; right: max(var(--safe-right), 0.25rem); inline-size: 44px; min-height: 44px; margin: auto 0; padding: 0; display: flex; align-items: center; justify-content: center;
  color: var(--ink); background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.topbar-share[hidden] { display: none; }
.topbar-share:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; border-radius: 0.5rem; }
@media (prefers-reduced-motion: no-preference) { .topbar-share { transition: transform var(--soft, 200ms ease), opacity 100ms; } .topbar-share:active { transform: scale(0.9); } }
@media (prefers-reduced-motion: reduce) { .topbar-share:active { opacity: 0.6; } }
html:has(.share-dlg[open]) { overflow: hidden; }
.share-dlg {
  box-sizing: border-box; width: min(92vw, 24rem); max-height: 94dvh; margin: auto; padding: 0;
  border: 1px solid rgb(var(--line-rgb) / 0.3); border-radius: 1.25rem; background: var(--bg); color: var(--ink);
  box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.5); overflow: auto;
}
.share-dlg::backdrop { background: rgb(15 8 24 / 0.6); }
.share-box { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1rem 1rem max(1rem, var(--safe-bottom)); }
.share-title { margin: 0; font-family: var(--f-title); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.06em; text-align: center; }
.share-img { width: auto; height: min(46dvh, 26rem); max-width: 100%; aspect-ratio: 9 / 16; object-fit: contain; border-radius: 0.75rem; border: 1px solid rgb(var(--line-rgb) / 0.25); }
.share-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; width: 100%; }
.share-btn {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.5rem 1.25rem;
  border: 1px solid var(--ink); border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink);
  font: inherit; font-family: var(--f-body); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.02em; text-align: center; text-decoration: none; cursor: pointer;
}
.share-btn[hidden], .share-note[hidden] { display: none; }
.share-close { border-color: rgb(var(--line-rgb) / 0.4); background: none; font-weight: 400; }
.share-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.share-note { margin: 0; font-size: var(--fs-small); line-height: 1.35; color: var(--ink-soft); text-align: center; text-wrap: balance; }
@media (orientation: landscape) and (max-height: 520px) {
  .share-dlg { width: min(92vw, 36rem); }
  .share-box { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: 0.5rem; align-items: center; }
  .share-title { grid-column: 1 / -1; }
  .share-img { height: min(62dvh, 14rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .share-dlg[open] { animation: fade 200ms ease-out; }
}
@media (prefers-contrast: more) { .share-dlg, .share-img, .share-close { border-color: var(--ink); box-shadow: none; } }
@media print { .share-dlg, .topbar-share { display: none !important; } }

/* ---------- v1.14.17 (owner: «when the picture and the award plates turn, they should also shimmer») ----------
   js/tilt.js already turns .s1 .plaque and the enlarged cover; with the same move it writes three custom properties on the turning element:
   --sx / --sy (where the light is, 0-100%) and --sh (how strong, 0 at rest to 1 at the full turn). The sheen is ONE pseudo-element over the element:
   a soft white glint at the light + a wide pastel rainbow band whose position follows the turn, so the colours really slide as it leans.
   Light theme: `multiply` (colour can only darken white, so ink text never gets lighter: contrast stays above 13:1); dark theme: `screen` (src/dark.css).
   At rest --sh is unset, so opacity is 0: nothing is drawn, text is flat and sharp. No layout space, no pointer events.
   The enlarged cover is wrapped in <span class="zoom-tilt"> (img pseudo-elements do not exist), the wrapper is what turns; same corner radius as the picture.
   apple-design › 14 Reduced motion (the script does not run under `reduce`; the rule below hides the layer as the second lock; also off for more-contrast),
   apple-design › 11 Frame-level smoothness (only opacity/background-position, driven by the script's own smoothed value), motion.md › Best practices
   («Add motion purposefully … without overshadowing»: the sheen is capped at 0.34 opacity and only exists while the mouse leans the block). */
.zoom-tilt { position: relative; display: grid; isolation: isolate; border-radius: clamp(1rem, 5vw, 1.75rem); }
.s1 .plaque::after, .zoom-tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), rgb(255 255 255 / 0.9), transparent 42%),
    linear-gradient(115deg, #ff8fd0 0%, #ffd27a 20%, #8dffb0 40%, #7fd6ff 60%, #b49bff 80%, #ff8fd0 100%);
  background-size: 100% 100%, 320% 320%;
  background-repeat: no-repeat;   /* v1.14.34: a repeated tile showed coloured rectangles at the edges while a finger was held */
  background-position: 0 0, var(--sx, 50%) var(--sy, 50%);
  mix-blend-mode: multiply;
  opacity: calc(var(--sh, 0) * 0.34);
}
.zoom-tilt::after { mix-blend-mode: soft-light; opacity: calc(var(--sh, 0) * 0.85); }
@media (prefers-reduced-motion: reduce), (prefers-contrast: more), print { .s1 .plaque::after, .zoom-tilt::after { display: none; } }

/* ---------- v1.14.21 (owner: «make the Award standards plate a little bigger so there is more room for the discs») ----------
   Only the plate on the first screen of AWARD-STANDARDS.html (.std-plaque): a little wider, a little more air, and the five discs
   in its row about 35% bigger with wider gaps. Sizes are limited by both the width and the height of the window (min(vw, dvh)),
   so the screen still fits the window (rule 9); on short landscape phones the old sizes stay. Decoration only, no new text. */
.s1:has(.std-plaque) .stack { max-width: 40rem; }
.s1 .std-plaque { width: min(calc(100% - 0.5rem), 36rem); padding-block: clamp(1.25rem, 4.5dvh, 2.5rem); }
.std-plaque .disc-row { gap: clamp(0.625rem, 3.6vw, 1.5rem); padding-top: clamp(0.375rem, 1.6dvh, 1rem); }
.std-plaque .disc-row .mini-disc { width: clamp(1.75rem, min(9.5vw, 5.6dvh), 3.25rem); height: clamp(1.75rem, min(9.5vw, 5.6dvh), 3.25rem); }
@media (orientation: landscape) and (max-height: 520px) {
  .s1 .std-plaque { width: min(calc(100% - 1rem), 30rem); padding-block: revert-layer; }
  .std-plaque .disc-row { gap: clamp(0.5rem, 3vw, 0.875rem); padding-top: clamp(0.25rem, 1.2dvh, 0.75rem); }
  .std-plaque .disc-row .mini-disc { width: clamp(1.5rem, 7vw, 2rem); height: clamp(1.5rem, 7vw, 2rem); }
}

/* ---------- v1.14.25 (owner: «make the award code text on the plates smaller, put it INSIDE the award and hide it a little, barely noticeable») ----------
   (v1.14.24 set the code into the top border line; it now sits INSIDE the frame, in the gap between the inner hairline and the cover.) A tiny, faint
   line, centred at the top inside the plate: about 9px, soft ink at half strength, no background and no border cut. It is out of the flow (absolute), so the
   plate and every screen keep their height (rule 9); it ignores the pointer, so a click on it still opens the plate's share window. The words «Award code» are
   kept for screen readers only. This is a CONSCIOUS exception to the 13px text floor and the 4.5:1 contrast (the owner wants it barely visible): the same code
   stays full size and fully readable in the «More information» row and in the Award registry, so no information is lost (audit_layout.py skips this one line). */
.s1 .plaque > .award-code { position: absolute; top: 0.4375rem; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 3rem); padding: 0; display: block; z-index: 1; pointer-events: none;
  background: none; font-size: 0.5625rem; line-height: 1; letter-spacing: 0.14em; text-indent: 0.14em; text-transform: none; color: var(--ink-soft); opacity: 0.5; }
.award-code-v { font-variant-numeric: tabular-nums; white-space: nowrap; user-select: all; letter-spacing: 0.14em; }
/* v1.14.26 (owner): on phones the code is smaller still (about 7px) */
@media (max-width: 600px), (max-height: 500px) { .s1 .plaque > .award-code { top: 0.5rem; font-size: 0.4375rem; letter-spacing: 0.12em; text-indent: 0.12em; } .s1 .plaque > .award-code .award-code-v { letter-spacing: 0.12em; } }
@media (prefers-contrast: more) { .s1 .plaque > .award-code { color: var(--ink); opacity: 0.75; } }

/* the Award registry page (AWARD-REGISTRY.html): list of all awards, then how to read a code. Same ruled-list language as the FAQ and the standards table. */
.rr { width: 100%; }
.rr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(var(--line-rgb) / 0.3); }
.rr-list > li { border-bottom: 1px solid rgb(var(--line-rgb) / 0.3); scroll-margin-top: 4rem; }
.rr-row { display: grid; gap: 0.125rem; min-height: 44px; padding: 0.5rem 0.25rem; color: var(--ink); text-decoration: none; }
.rr-code { font-family: var(--f-title); font-weight: 700; font-size: var(--fs-body); line-height: 1.2; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rr-what { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-hint); line-height: 1.25; }
.rr-what .mini-disc { flex: none; width: 1rem; height: 1rem; }
.rr-date { font-size: var(--fs-small); line-height: 1.3; letter-spacing: 0.04em; color: var(--ink-soft); }
.rr-list > li:target { background: rgb(var(--line-rgb) / 0.07); box-shadow: inset 0.1875rem 0 0 var(--ink); }
@media (hover: hover) and (pointer: fine) { .rr-row:hover { background: rgb(var(--line-rgb) / 0.05); } }
@media (prefers-contrast: more) { .rr-list, .rr-list > li { border-color: var(--ink); } .rr-date { color: var(--ink); } }
.rr-example { margin: 0 0 0.75rem; padding: 0.75rem 0.5rem; text-align: center; font-family: var(--f-title); font-weight: 700; font-size: clamp(0.9375rem, 4.4vw, 1.375rem); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; white-space: nowrap;
  border-block: 1px solid rgb(var(--line-rgb) / 0.4); text-shadow: 0 1px 0 rgb(255 255 255 / 0.9); }
.rr-parts { margin: 0; }
.rr-parts > div { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); align-items: baseline; gap: 0.75rem; padding: 0.375rem 0; border-bottom: 1px solid rgb(var(--line-rgb) / 0.2); }
.rr-parts dt { font-family: var(--f-title); font-weight: 700; font-size: var(--fs-label); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.rr-parts dd { margin: 0; font-size: var(--fs-label); line-height: 1.3; color: var(--ink-soft); }
@media (max-height: 640px) { .rr-parts > div { padding-block: 0.25rem; } .rr-example { margin-bottom: 0.375rem; padding-block: 0.375rem; } }
.home-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1.25rem; }   /* v1.14.21: the two quiet links of the home plate, «Award standards» and «Award registry» */
/* the registry page on phones turned sideways (rule 9): two columns, tighter rows; every piece of text stays */
@media (orientation: landscape) and (max-height: 520px) {
  .s2 .stack.std-screen-stack, .s3 .stack.std-screen-stack { max-width: 48rem; }
  .rr-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; border-top: 0; }
  .rr-list > li { border-top: 1px solid rgb(var(--line-rgb) / 0.3); }
  .rr-row { padding-block: 0.25rem; gap: 0; }
  .rr-code { font-size: var(--fs-label); }
  .rr-what { font-size: var(--fs-hint); }
  .rr-parts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .rr-parts > div { grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0.5rem; padding-block: 0.25rem; }
  .rr-parts dd, .rr-parts dt { font-size: var(--fs-hint); line-height: 1.2; }
  .rr-example { margin-bottom: 0.25rem; padding-block: 0.25rem; font-size: 1.125rem; }
}
@media (max-height: 640px) and (orientation: portrait) { .rr-row { padding-block: 0.25rem; gap: 0; } .rr-code { font-size: var(--fs-label); } }
@media (orientation: landscape) and (max-height: 340px) { .rr-parts > div { padding-block: 0.125rem; } .rr-example { padding-block: 0.125rem; margin-bottom: 0.125rem; font-size: 1rem; } .rr-row { padding-block: 0.125rem; min-height: 0; } .std-note { padding-top: 0.25rem; } }
@media (orientation: landscape) and (max-height: 340px) {
  .s2 .stack.std-screen-stack, .s3 .stack.std-screen-stack { padding-block: 0; }
  .rr-row { padding-block: 0.0625rem; }
  .rr-code, .rr-what, .rr-date { line-height: 1.15; }
  .rr-parts > div { padding-block: 0.0625rem; }
}

/* ==========================================================================
   v1.14.33 (owner: «small pictures of the album / artist releases in Other awards»): a 24px cover in front of each group name (the track and the album: the album
   cover; the artist: the artist photo). Decoration only (alt=""), the name stays text. The title row grows by about 7px per group, checked by audit_layout (rule 9).
   ========================================================================== */
.reg-title { align-items: center; }
.reg-name { display: flex; align-items: center; gap: 0.5rem; }
.reg-cover { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 0.25rem; object-fit: cover; background: rgb(var(--line-rgb) / 0.08); box-shadow: 0 0 0 1px rgb(var(--line-rgb) / 0.22); }
@media (prefers-contrast: more) { .reg-cover { box-shadow: 0 0 0 1px var(--ink); } }


/* v1.14.36 (owner: small release / artist pictures «next to each disc»): the cover now sits in every row of Other awards, right after the disc (grid has 4 columns:
   disc | cover | number + date | arrow). Same 1.625rem size as the disc, so the row height and the screen heights do not change; the group-title cover of v1.14.33 is gone (it would repeat the same picture). */
.reg-row .reg-cover { grid-row: 1 / span 2; grid-column: 2; width: 1.625rem; height: 1.625rem; }


/* ---------- v1.16.3 (owner: «improve the plaque on the main page: more information, prettier»): «Newest award» strip ----------
   Under the three figures: the metal disc of the newest award, its level and kind, name, streams and registry code; the whole strip opens that line of the registry.
   Ink hairline frame like the rest of the plaque, no new colours (the disc is the only metal). Hidden where the screen has no room (short phones, landscape) so rule 9 holds. */
.home-newest { display: flex; align-items: center; gap: 0.75rem; width: 100%; max-width: 21rem; min-height: 44px; padding: 0.5rem 0.75rem; margin-top: 0.25rem; color: var(--ink); text-decoration: none; text-align: start; border: 1px solid rgb(var(--line-rgb) / 0.3); border-radius: 0.5rem; }
.home-newest .mini-disc { flex: none; width: 2rem; height: 2rem; }
.home-newest-text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.home-newest-label { font-size: var(--fs-small); line-height: 1.25; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.home-newest-what { font-family: var(--f-title); font-weight: 700; font-size: var(--fs-label); line-height: 1.2; overflow-wrap: anywhere; }
.home-newest-meta { font-size: var(--fs-small); line-height: 1.3; letter-spacing: 0.04em; color: var(--ink-soft); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* the code never breaks into two lines */
.home-newest-code { white-space: nowrap; overflow-wrap: normal; }
.home-newest-code { font-size: var(--fs-small); }
@media (hover: hover) and (pointer: fine) { .home-newest:hover { background: rgb(var(--line-rgb) / 0.05); } }
.home-newest:active { opacity: 0.6; }
@media (prefers-contrast: more) { .home-newest { border-color: var(--ink); } .home-newest-label, .home-newest-meta { color: var(--ink); } }
@media (max-height: 700px), (orientation: landscape) and (max-height: 520px) { .home-newest { display: none; } }

/* ---------- v1.16.4 (owner: «More about SETTWOR is too squeezed on a phone»): roomy bio on short phones ----------
   On phones under 720px tall the text, the facts table and the timeline were pressed together (no gap between the blocks, words hyphenated).
   The «Label» row (SETTWOR, already shown in «More information» on screen 2) is left out here; the 30px it frees go back as gaps between the three blocks, and words are no longer hyphenated.
   Taller phones and wider screens are unchanged. */
@media (max-width: 26rem) and (max-height: 720px) {
  .bio p { hyphens: manual; }
  .bio { gap: 0.75rem; }
  .bio-facts > div:nth-child(4) { display: none; }
}


/* ---------- v1.16.5 (owner: «add the creation date of CDRA, Oct 14, 2025»): «Since October 14, 2025» on the first-screen plaque ----------
   Small caps line under the CDRA mark, same quiet ink as the eyebrow. Hidden on short phones and in low landscape, like the eyebrow and the newest-award strip, so the screen stays whole (rule 9). */
.home-since { margin: 0; font-size: var(--fs-small); line-height: 1.2; letter-spacing: 0.16em; text-indent: 0.16em; text-transform: uppercase; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
@media (prefers-contrast: more) { .home-since { color: var(--ink); } }
@media (max-height: 740px), (orientation: landscape) and (max-height: 520px) { .home-since { display: none; } }

/* ---------- v1.16.7 (owner: «if I press the "Presented to SETTWOR to commemorate..." plaque on a phone it disappears for a second») ----------
   The first-screen entrance of .dedication is `animation: rise` (opacity 0 -> 1, 240ms delay, fill backwards). The press rule (press-hold, v1.14.5) REPLACED that animation while the finger was down,
   so on release `rise` started again from opacity 0 and the plaque vanished and faded back. Now the pressed state keeps `rise` first in the list (the same finished animation, it is not restarted)
   and adds press-hold after it. Same fix for the other first-screen blocks that carry an entrance animation and a press rule. */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .s1 .dedication:active { animation: rise 560ms var(--ease) 240ms backwards, press-hold 700ms cubic-bezier(.22, .61, .36, 1) both; }
}


/* ---------- v1.16.8 (owner: «on a PC make the other rows (Date, Award code) as wide as the other table rows; on a phone put Listen and Website on one line like the others») ----------
   PC / wide screens (over 30rem): every row of the facts table is the same: value at the same size and the same 44px row height (Date and Award code were smaller and tighter than Listen and Website).
   Phones (30rem and under): a row with ONE link («Listen: Spotify», «Website») is one line, label left and value right, exactly like Date and Award code; the 44px tap target is kept by padding
   cancelled with a negative margin, so the row is as tall as the others. A row with several links is still stacked. */
@media (min-width: 30.0625rem) and (min-height: 521px) {   /* not in a low landscape phone: there the compact rows stay */
  .facts { --rule-gap: clamp(0.25rem, 1dvh, 0.75rem); gap: var(--rule-gap); }   /* rows are 44px tall now, so the space between the rules shrinks and the longest table (9 rows) still fits one window */
  .facts > div > dd:not(.is-links):not(.is-share) { display: flex; align-items: center; min-height: 44px; }
  .facts > .fact-code dd { font-size: clamp(1rem, min(0.85rem + 0.9vw, 3.2dvh), 1.375rem); letter-spacing: normal; }
  .facts > .fact-code dd a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; font-size: inherit; letter-spacing: normal; }
}
@media (max-width: 30rem) {
  .facts dd.is-links:not(.is-share) > .fact-link:only-child { display: inline-block; min-height: 44px; box-sizing: border-box; padding: 0.75rem 0.25rem; margin: -0.75rem -0.25rem; }
  .facts dd.is-links:not(.is-share):has(> .fact-link:only-child) { min-height: 0; }
}


/* ---------- v1.16.9 (owner: «Other awards: no split by track, just plaques; inside: single / album / artist and whose it is, SETTWOR») ----------
   No group titles any more: the list is flat and every award is its own plaque (hairline frame, soft radius, like the «Newest award» strip). Rows have three lines on the right:
   the number of streams, «Single · GOT ME UP 2 · SETTWOR» (the artist: «Artist · SETTWOR») and the level with the date (the last line goes on short screens, as before). */
.reg { gap: 0; }
.reg > .reg-list { gap: clamp(0.375rem, 1.4dvh, 0.75rem); }
.reg-list > li > .reg-row { border: 1px solid rgb(var(--line-rgb) / 0.3); padding: 0.375rem 0.625rem; }
.reg-row .mini-disc, .reg-row .reg-cover, .reg-row .icon { grid-row: 1 / span 3; }
.reg-what { grid-column: 3; font-size: var(--fs-hint); line-height: 1.25; font-weight: 700; color: var(--ink); letter-spacing: 0.02em; }
.reg-row .reg-main { grid-row: 1; }
.reg-row .reg-what { grid-row: 2; }
.reg-row .reg-meta { grid-row: 3; }
@media (max-height: 700px) { .reg-row .reg-main { align-self: auto; } .reg-meta { display: block; } }   /* flat plaques are shorter than the old groups: the level and date stay on phones down to 561px tall */
@media (max-height: 560px) { .reg-meta { display: none; } .reg-row .mini-disc, .reg-row .reg-cover, .reg-row .icon { grid-row: 1 / span 2; } }
@media (prefers-contrast: more) { .reg-list > li > .reg-row { border-color: var(--ink); } }
@media (orientation: landscape) and (max-height: 520px) {
  .reg > .reg-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1rem, 4vw, 2.5rem); row-gap: 0.25rem; }
  .reg-list > li > .reg-row { padding-block: 0.125rem; }
  .reg-what { font-size: var(--fs-small); }
}


/* ---------- v1.16.10 (owner: «on a phone, in More about SETTWOR let every part breathe; make the Full information button smaller and lower; add a little air to the rest, nothing squeezed») ----------
   Phones: the sentence, the facts table and the timeline now share the free room of the screen evenly (flex, `space-evenly`: the same gap above the first block, between the blocks and below the last),
   so every part gets air exactly as much as the screen has to give: a tall phone gets a lot, a short one only what is left, and the screen can never grow past the window (rule 9: the extra room
   only comes from space that was empty; the old gaps stay as the minimum). On phones 640 to 699px tall, where the table rows and the timeline steps were only 2 to 4px apart, they get a little more.
   The button is smaller on every phone width: smaller type, tighter padding, smaller arrow chip (the height stays 44px: that is the tap target, §5 item 5); with the free room shared out it also sits lower.
   CSS only; no fixed extra height anywhere, so no screen that fitted before can stop fitting. */
@media (max-width: 899px) {
  .s4 .bio { flex: 1 1 auto; justify-content: space-evenly; max-height: 38rem; }
  .s4 .full-info { gap: 0.5rem; padding: 0.25rem 0.375rem 0.25rem 1.125rem; font-size: var(--fs-hint); }
  .s4 .full-info .icon { width: 0.625rem; height: 0.625rem; padding: 0.375rem; }
}
@media (max-width: 899px) and (orientation: portrait) and (min-height: 640px) {
  .s4 .section-title { margin-bottom: 0; }   /* the sentence never sits closer to the title than before: the title's -0.25rem pull is switched off here */
  .s4 .bio { padding-top: 0.25rem; }
}
@media (min-width: 23.4rem) and (max-width: 899px) and (orientation: portrait) and (min-height: 640px) and (max-height: 699px) {
  .s4 .bio-facts > div { padding-block: 0.3125rem !important; }
}
@media (min-width: 23.4rem) and (max-width: 899px) and (orientation: portrait) and (min-height: 640px) and (max-height: 660px) { .s4 .bio-line { gap: 0.5rem; } }
@media (max-width: 899px) and (orientation: portrait) and (min-height: 640px) { .s4 .full-info { margin-bottom: max(0.5rem, clamp(0rem, calc((100dvh - 44rem) * 0.12), 1.75rem)); } }   /* room under the button above the footer: a little on every phone, more on tall ones */

/* ---------- v1.16.11 (owner: «on the phone I press the plate and drag my finger over it, it must bend toward the finger until I let go») ----------
   Before, the browser took a dragging finger for a page scroll, sent pointercancel and js/tilt.js let the plate spring back after a few pixels.
   On touch screens the plate (and the enlarged cover) now keep the finger for themselves: no scroll starts on them, so the plate follows the finger
   all the way until it is lifted. A tap still works (click on the cover, links). The page scrolls and swipes from everywhere else
   (top bar, the space above and below the plate, the arrow). No layout space, no visual change at rest. */
@media (pointer: coarse) { .s1 .plaque, .zoom-tilt { touch-action: none; } }

/* ---------- v1.16.12 (owner: «in Other awards the cover first, a little bigger, and the disc hides behind it on the right») ----------
   Each row: the cover (was 1.625rem, now --rc) comes first; the metal disc of the same size sits in the same grid cell, pushed right so about 40% of it
   peeks out from behind the cover (the markup keeps disc then cover, so the cover paints on top; no markup change). The cell is as wide as cover + peek,
   so the text column moves by the peek only. Row heights stay set by the 2-3 text lines (cover fits inside them), checked by audit_layout (rule 9).
   Decoration only (alt="" / aria-hidden); the number, kind, level and date stay text. */
.reg-row { --rc: 2.5rem; --peek: calc(var(--rc) * 0.4); grid-template-columns: auto 1fr auto; }
.reg-row .reg-cover, .reg-row .mini-disc { grid-column: 1; grid-row: 1 / span 3; align-self: center; width: var(--rc); height: var(--rc); }
.reg-row .reg-cover { justify-self: start; border-radius: 0.3125rem; box-shadow: 0 0 0 1px rgb(var(--line-rgb) / 0.3), 0.125rem 0 0.375rem rgb(0 0 0 / 0.22); }
.reg-row .mini-disc { margin-inline-start: var(--peek); }
.reg-row .reg-main, .reg-row .reg-what, .reg-row .reg-meta { grid-column: 2; }
.reg-row .icon { grid-column: 3; grid-row: 1 / span 3; }
.reg-row .reg-cover, .reg-row .mini-disc, .reg-row .icon { align-self: center; }
@media (max-height: 560px) { .reg-row { --rc: 2rem; } .reg-row .reg-cover, .reg-row .mini-disc, .reg-row .icon { grid-row: 1 / span 2; } }
@media (orientation: landscape) and (max-height: 520px) { .reg-row { --rc: 1.75rem; } }
@media (prefers-contrast: more) { .reg-row .reg-cover { box-shadow: 0 0 0 1px var(--ink); } }

/* ---------- v1.16.13 (owner): «own award, not an official certification» on the FIRST screen of every page ----------
   One short line under the plaque (outside it, so the embed widget and the story picture stay as they were). It is real text, always
   visible: never display:none at any size (that is the whole point), never in a <details>. Ink, hint size, balanced wrap. */
.own-note { max-width: 22rem; margin-inline: auto; text-align: center; font-size: var(--fs-hint); line-height: 1.3; color: var(--ink); text-wrap: balance; }
.own-note strong { font-weight: 700; }
@media (max-height: 600px) { .own-note { max-width: 30rem; } }
@media (min-width: 900px) and (min-height: 700px) { .own-note { font-size: var(--fs-body); max-width: 28rem; } }
@media (prefers-contrast: more) { .own-note { color: var(--ink); } }
/* the home plaque gives back the height the note takes (laptop windows 700–800px tall); only its top and bottom padding shrink */
@media (min-width: 900px) and (min-height: 700px) and (max-height: 800px) { .s1 .home-plaque:not(.std-plaque) { padding-block: clamp(1.25rem, 4dvh, 2.25rem); } }