/* ============================================================================
   THEME — brand · "Márka" — DARK, krasznai-register (ported from v3)
   ============================================================================
   Replaces the 2026-08-22 wiring probe. This is the August dark concept —
   design\concepts\v3-krasznai\ — brought back as a live theme after the client
   rejected all six warm-linen directions and pointed at krasznai.hu
   (design\recon\robi-refs\OBSERVED.md). The concept was never rejected; it was
   never chosen. The design decisions here are ITS decisions; where this file
   deviates it says so and why.

   THE REGISTER (v3 NOTES.md thesis): one dramatic stage; a Jet-dominant field
   (inside the brand book's 80% Linen+Jet rule — Jet is that 80's other half);
   photographs hang as FRAMED PRINTS on a dark gallery wall; tone-on-tone
   embossed RR monograms (vaknyomás); doctor-first name prominence; airy
   wide-tracked uppercase labels; a metallic accent.

   ⚠ THE METAL IS OLD ROSE, NOT GOLD — deliberate (v3 NOTES "Taken/rejected").
   krasznai.hu is a DIRECT COMPETITOR; cloning their black+gold would make RR
   look like them. Old Rose is RR's own secondary, lifted to play the role gold
   plays there. IF THE CLIENT ASKS FOR GOLD: it is a token swap, not a rebuild —
   change --color-accent-deep / --color-accent-deepest (and re-measure both
   against the four fields below, ≥4.5:1). Everything metallic reads from those
   two tokens.

   SCROLL-REVEALS ARE DROPPED, NOT TUNED. The concept's IntersectionObserver
   reveals hid content up to 4s on a fast scroll (its own safety-net timeout);
   the recorded recommendation (A8 §4 + the LCP note in brand-tokens.css) is to
   drop them. No opacity reveal, no observer, nothing here animates on scroll.

   WARM FOOTAGE ON A DARK FIELD — the one real translation problem. The hero
   loops and stills are shot on warm off-white (≈Linen); full-bleed on Jet they
   are a glowing rectangle. The concept's own device is the answer: every
   photograph is a framed print — surface-toned mount, hairline outer border,
   inset frame line, and the v3 media filter saturate(.85) brightness(.9) that
   sinks the whites into the wall. Nothing is cropped: the hero boxes sit on
   ratios that keep top-of-head-to-shoulder visible (verify-design-rules D-1).

   DARK-FIELD TONES — measured (WCAG 2.2 relative luminance, same formula
   check-theme-contract.mjs self-tests; reproduces v3 NOTES.md's table exactly):

     ink \ field         bg #2b2b2b  surface #343230  deep #222  deepest #1c1c1c
     Linen   #fdf5eb       13.11        11.82          14.73       15.77
     muted   #cdc5b8        8.28         7.46           9.30        9.96
     subtle  #a69e92        5.34         4.82           6.01        6.43
     rose↑   #c49b9d        5.75         5.18           6.46        6.92
     rose↑↑  #d2a9ab        6.74         6.08           7.58        8.12
     sage↑   #9daa8d        5.78         5.21           6.49        6.95
     sage↑↑  #aebc9d        7.07         6.37           7.94        8.50
     raw rose #ac7b7d       3.97 (non-text only)        4.46        4.77
     raw reseda #7b886b     3.76 (non-text only)        4.22        4.53

   Jet text on the rose CTA fill: 5.75:1 (#2b2b2b on #c49b9d); on hover fill
   #d2a9ab: 6.74:1. Jet on the sage skip-link fill #9daa8d: 5.78:1. Every text
   pair ≥4.5:1 on every field it paints; every REQUIRED non-text boundary
   (ghost-button border 3.92:1, focus ring 5.78:1, BA divider ≥11:1, rose rule
   3.97:1) ≥3:1. Decorative-only lines are stated as such where they appear.

   CONTRACT: every rule scoped html[data-theme='brand']; overridden tokens only
   (none invented); frozen tokens untouched; triplets space-separated and in
   lockstep. Enforced by scripts/check-theme-contract.mjs.
   ========================================================================= */

html[data-theme='brand'] {
  /* --- Field — the dark system, all derived along Jet (v3 values) ---------- */
  --color-bg: var(--brand-jet); /* the page field IS brand Jet #2b2b2b */
  --color-surface: #343230; /* Jet +4L, warmed — cards, panels, print mounts */
  --color-surface-deep: #222222; /* Jet −4L — the chiaroscuro deep bands, footer */
  --color-surface-deepest: #1c1c1c; /* footer base bar */

  /* --- Ink — Linen and two steps down it (v3 values, table above) ---------- */
  --color-text: var(--brand-linen); /* 13.11:1 on the field */
  --color-text-muted: #cdc5b8; /* Linen −19L — body, nav: 8.28 / 7.46 / 9.30 */
  --color-text-subtle: #a69e92; /* Linen −35L — captions: 5.34 / 4.82 / 6.01 */

  /* --- The metal: Old Rose, LIFTED to carry text on dark -------------------
     Raw Old Rose (#ac7b7d) is 3.97:1 on the field — non-text only (rules,
     icon rings); it stays on --color-accent untouched. The two deep tiers
     INVERT on a dark theme: "deep enough for the field" now means LIGHT
     enough, so both are lifted, not dropped.
     GOLD SWAP LIVES HERE — see the header note. */
  --color-accent-deep: #c49b9d; /* Old Rose +13L — eyebrows, CTA fill: 5.75 on bg */
  --color-accent-deepest: #d2a9ab; /* +19L — hover fill, deeper-field text: 6.74 w/ Jet */

  /* --- Sage, lifted the same way — the institutional colour ----------------
     Rose is the action colour; Reseda keeps the logo, the focus ring, the
     doctor's role line, the footer icons (v3's split exactly). */
  --color-primary: #9daa8d; /* Reseda +13L — logo mark, icons: 5.78 on bg, ≥3 non-text everywhere */
  --color-primary-deep: #9daa8d; /* focus ring + skip-link fill — 5.78/5.21/6.49/6.95, ≥3 on every field (WCAG 1.4.11) */
  --color-primary-deepest: #aebc9d; /* +19L — hover/current text tier: 7.07 on bg */
  --color-primary-contrast: var(--brand-jet); /* on light fills, the contrast tone is Jet */

  /* --- Hairlines — Linen whispers over Jet (v3's rgba system) --------------
     DECORATIVE tier: composite #4d4b4a on the field, 1.63:1 — deliberately
     sub-3:1, like the base theme's own footer dividers (rgb(text/0.1)); the
     surfaces separate by tone, the hairline is an engraving detail, and every
     REQUIRED boundary is handled separately (see --color-border-strong).
     NOTE: lab.css's .card__desc borrows --color-border as TEXT; that consumer
     is re-pointed at --color-text-muted below, which is what frees this token
     to be a real hairline again. */
  --color-border: rgba(253, 245, 235, 0.16);
  /* REQUIRED-boundary tier: ghost-button outline. Composite #8a8681 on the
     field = 3.92:1, #8a8681-on-surface 3.72:1 — ≥3:1 (WCAG 1.4.11) on every
     field a ghost control sits on. */
  --color-border-strong: rgba(253, 245, 235, 0.45);

  /* --- Channel triplets — lockstep with their hex twins, SPACE-separated ---
     (a comma triplet is invalid inside rgb(var()/α) and the browser drops the
     whole declaration silently — checker enforces this; it has bitten before).
     --color-on-image / --color-on-image-rgb stay base Linen: on-image ink is
     Linen in both worlds. --color-scrim-rgb stays the base warm near-black —
     card scrims still darken toward the same tone. */
  --color-bg-rgb: 43 43 43; /* = --brand-jet */
  --color-text-rgb: 253 245 235; /* = --brand-linen — footer hairlines become Linen whispers */

  /* --- Vaknyomás on a dark wall --------------------------------------------
     The blind emboss inverts: the body sits a whisper ABOVE the page tone
     (v3 ran the Linen monogram at 4.5–5% opacity ≈ this composite), and the
     lift is a faint white lower edge. 1.14:1 vs the field — intentionally
     sub-threshold, it is a watermark (v3 NOTES "least sure #3" flags exactly
     this tolerance; device sweep still owed). */
  --color-emboss-body: #363430;
  --color-emboss-lift: rgba(255, 255, 255, 0.1);

  /* --- Type — the stage scale (v3 values) ----------------------------------
     Display floor lifted for non-hero pages too; the hero H1 is hardcoded in
     lab.css and overridden at the rule level below (THEME-SYSTEM.md §2).
     The concept's "extra-light" sans voice is NOT portable: fonts.css ships
     Montserrat 400/500/600/700 only, and browsers do not synthesize lighter —
     a 300 here would silently render 400. The airy register is carried by
     weight-400 labels (down from 500), tracking and size instead. */
  --font-size-h1: clamp(2.5rem, 6vw, 5rem); /* 40 → 80px */
  --font-size-lead: 1.1875rem; /* 19px — v3's lead ceiling */

  /* --- Space — darkness is the whitespace (v3: 64 → 120px) ----------------- */
  --section-pad: clamp(3.5rem, 6.5vw, 6.5rem);

  /* --- Fold arithmetic — hero + stat band fill the first screen ------------
     Same mechanism as the premium themes (brand-tokens.css declares the
     primitives; a theme opts in). v3's stage was 100svh with the trust strip
     below the fold; here the strip (stat band) IS the fold's bottom edge. */
  --ribbon-h: 6.75rem;
}

/* The draft banner is real page content above the hero; the fold arithmetic
   self-corrects the day it is removed (premium-a's pattern, same reasoning). */
html[data-theme='brand']:has(.draft-banner) {
  --fold-offset: 2.75rem;
}

/* v3's selection colour — rose over Jet, 5.75:1. */
html[data-theme='brand'] ::selection {
  background: var(--color-accent-deep);
  color: var(--color-bg);
}

/* ===========================================================================
   CHROME — the darkened glass bar (v3 .site-header)
   =========================================================================== */

/* The base linen wash ramp becomes v3's glass: a slightly-darker-than-field
   pane with a blur, terminated by a hairline. The bar tone is scrim-warm
   (composite ≈ #212120 over the field — decorative distinction; the hairline
   and the blur are what read). */
html[data-theme='brand'] .site-header::before {
  background: rgb(var(--color-scrim-rgb) / 0.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
html[data-theme='brand'] .site-header {
  border-bottom: 1px solid var(--color-border); /* decorative terminator */
}

/* Nav: muted Linen (8.28:1 on the glass, which is darker than the field so
   the ratio only improves), weight 400 for the airy voice, rose on hover —
   v3's exact hover move. The 0.22em nav tracking v3 used is NOT ported: the
   Russian rail overflowed the viewport once already at 0.16em (D-6, fixed by
   tightening gaps), and +0.06em per glyph would spend that margin again. */
html[data-theme='brand'] .nav a {
  color: var(--color-text-muted);
  font-weight: var(--weight-body);
}
html[data-theme='brand'] .nav a:hover,
html[data-theme='brand'] .nav a:focus-visible {
  color: var(--color-accent-deepest); /* 6.74:1 on the field */
}
html[data-theme='brand'] .nav a::after {
  background: var(--color-accent-deep); /* the underline is the metal */
}

/* Identity separator drops to the decorative hairline tier — the strong tier
   is reserved for required boundaries on this theme. */
html[data-theme='brand'] .site-header .logo {
  border-right-color: var(--color-border);
}

/* Airy label weight across the tracked-caps layer (500 → 400; see the type
   note in the token block — 300 does not exist in the loaded set). Buttons
   deliberately KEEP --weight-label 500, as v3 did. */
html[data-theme='brand'] .eyebrow,
html[data-theme='brand'] .stat__label,
html[data-theme='brand'] .fcol__head,
html[data-theme='brand'] .logo__word {
  font-weight: var(--weight-body);
}

/* Dropdown panels sit on the raised surface with v3's .dd-panel shadow —
   on a dark page a same-field panel with a 1.63:1 hairline would float
   nowhere. Text on surface: Linen 11.82:1, muted 7.46:1. */
html[data-theme='brand'] .search__panel,
html[data-theme='brand'] .lang__menu {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 24px 48px rgb(var(--color-scrim-rgb) / 0.45);
}

/* Mobile drawer: v3's opaque deep stage. Its 28px/weight-200 menu type is not
   portable (no light weights shipped); the drawer steps up to 15px instead of
   the rail's 11px, which keeps the 48px touch rows and gives the register
   without faux-weight rendering. */
html[data-theme='brand'] .nav-panel {
  background: var(--color-surface-deep);
  border-bottom-color: var(--color-border);
}
html[data-theme='brand'] .nav-panel a {
  font-size: var(--font-size-sm); /* Linen on deep: 14.73:1 */
}

/* ===========================================================================
   BUTTONS — the rose is the metal (v3 .btn-fill / .btn-ghost)
   =========================================================================== */

/* Filled = rose with Jet ink: 5.75:1, hover 6.74:1 (v3's exact pair). This is
   the single rule to revisit for a gold swap — it reads the accent tokens. */
html[data-theme='brand'] .btn--solid {
  background: var(--color-accent-deep);
  color: var(--color-bg);
}
html[data-theme='brand'] .btn--solid:hover,
html[data-theme='brand'] .btn--solid:focus-visible {
  background: var(--color-accent-deepest);
  color: var(--color-bg);
}

/* Ghost hover goes to full Linen + a faint fill (v3), not to the green tier —
   rose and sage both stay out of the ghost so the fill button remains the one
   metallic object per screen (the ferrari one-red rule v3 cites). */
html[data-theme='brand'] .btn--ghost:hover,
html[data-theme='brand'] .btn--ghost:focus-visible {
  border-color: var(--color-text);
  color: var(--color-text);
  background: rgb(var(--color-on-image-rgb) / 0.06);
}

/* Section eyebrows join the metal (v3 uses rose for every eyebrow; the base's
   green --primary-deepest tier was a light-theme decision). 5.75:1 on the
   field, 6.46:1 on the deep band. */
html[data-theme='brand'] .eyebrow--section {
  color: var(--color-accent-deep);
}

/* ===========================================================================
   HERO — the single dramatic stage (v3 .hero, translated to shared markup)
   ===========================================================================
   v3 ran the clinic interior full-bleed under a heavy scrim. Here the checks
   and the markup push to the concept's OWN fallback (NOTES "least sure #2"):
   the Jet void is the stage, and the interior hangs on it as one large framed
   print — "the clinic emerges from darkness like an exhibit", literally. The
   face loops stay off the desktop stage exactly as v3 shipped it (krasznai's
   move: the place, not a face); the face carries the phone hero and Rólunk. */

html[data-theme='brand'] .hero {
  position: relative; /* containing block for the emboss — and the probe rule's
    one declaration, now load-bearing */
  overflow: hidden; /* the emboss bleeds past the stage edge by design */
}

/* Tone-on-tone RR monogram on the stage, between copy and print (v3
   .hero-emboss: 5% Linen ≈ this token's composite). Watermark tier — 1.14:1,
   deliberately sub-threshold, never carries information. Desktop only: the
   phone stage is a tight portrait-and-CTA stack with no void to sign. */
@media (min-width: 901px) {
  html[data-theme='brand'] .hero::before {
    content: '';
    position: absolute;
    right: 30%;
    bottom: -3rem;
    width: clamp(300px, 32vw, 500px);
    aspect-ratio: 366 / 336;
    background-color: var(--color-emboss-body);
    -webkit-mask: url('/assets/home/img/logo-monogram-mask.png') center / contain no-repeat;
    mask: url('/assets/home/img/logo-monogram-mask.png') center / contain no-repeat;
    pointer-events: none;
  }

  /* Stage height: fill the first screen less the banner and the pinned stat
     band (premium mechanism, v3 proportions — its stage was 100svh). */
  html[data-theme='brand'] .hero {
    min-height: max(38rem, calc(100dvh - var(--fold-offset) - var(--ribbon-h)));
  }

  /* No face on the desktop stage — v3's composition. The loop returns on the
     phone tier below, where it is the hook. */
  html[data-theme='brand'] .hero__portrait {
    display: none;
  }

  /* Copy: bottom-anchored on the void (lab's flex-end inherited), aligned to
     the section content edge (gutter + centered-container margin, so the
     stage's left line continues into the page below it). */
  html[data-theme='brand'] .hero__copy {
    padding: var(--space-5) 0 clamp(3rem, 7vh, 4.5rem);
  }
  html[data-theme='brand'] .hero__text {
    margin-left: calc(max(var(--gutter), (100vw - var(--content-max)) / 2) + var(--gutter));
    width: min(38rem, 100%);
  }

  /* The stage type: 46 → 80px serif uppercase (v3 --size-h1). Overridden at
     the RULE, not the token — lab.css hardcodes the hero H1 (THEME-SYSTEM §2). */
  html[data-theme='brand'] .hero h1 {
    font-size: clamp(2.875rem, 6vw, 5rem);
  }
  html[data-theme='brand'] .hero .lead {
    max-width: 34rem; /* v3's 44ch measure; muted Linen 8.28:1 */
  }

  /* THE EXHIBIT — the clinic interior as one large framed print.
     The box is pinned to 3:4 with its height derived from the viewport, so
     the print scales with the stage and its crop window is viewport-
     independent: ph-hero-scene.webp is 1152x2048 (9:16), a 3:4 box is
     width-constrained, and `center top` then shows source rows 0–75% at ANY
     size — top of frame kept, D-1 clear by construction (needs ≤3% top,
     ≥72% bottom). 24.5rem ≈ banner + header + ribbon + breathing room. */
  html[data-theme='brand'] .hero__scene {
    align-self: center;
    justify-self: center;
    height: clamp(22rem, calc(100dvh - 24.5rem), 42rem);
    width: auto;
    aspect-ratio: 3 / 4;
    background: var(--color-surface); /* the mount behind the print */
    border: 1px solid var(--color-border); /* decorative — the tone step and the
      inner line do the framing */
  }
}

/* The print treatment, all widths: v3's card-media device. The inner frame
   line (Linen 0.22 ≈ 1.95:1 on the mount) is decorative engraving; the
   filter sinks the warm off-white footage into the dark wall. */
html[data-theme='brand'] .hero__scene::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgb(var(--color-on-image-rgb) / 0.22);
  pointer-events: none;
}
html[data-theme='brand'] .hero__scene .ph-photo {
  object-position: center top; /* crops from the bottom, never the top (D-1) */
  filter: saturate(0.82) brightness(0.9); /* v3 .hero-media values */
}

/* ===========================================================================
   HERO — phone tier: the face loop as a framed print
   ===========================================================================
   Geometry is lab.css's shipped mobile flow (portrait on the asset's own 3:4,
   width-capped, CTA on the first screen — D-9). This theme only re-materials
   it: the base's bottom dissolve is the LIGHT theme's device and on Jet it
   reads as a glowing smear, so the print gets a hard frame instead. Nothing
   about the crop changes: the box stays on the asset ratio, cover crops
   nothing, head-to-shoulder stays whole. */
@media (max-width: 900px) {
  html[data-theme='brand'] .hero__portrait {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
  }
  /* ::before, NOT ::after — placeholders.css owns .hero__portrait::after for
     the reduced-motion poster; colliding with it would put a border on the
     poster layer. z-index lifts the line above the absolutely-positioned
     video (tree order would otherwise paint it underneath). */
  html[data-theme='brand'] .hero__portrait::before {
    content: '';
    position: absolute;
    inset: 8px;
    z-index: 2;
    border: 1px solid rgb(var(--color-on-image-rgb) / 0.22); /* decorative */
    pointer-events: none;
  }
  html[data-theme='brand'] .hero__portrait img,
  html[data-theme='brand'] .hero__portrait video {
    -webkit-mask: none;
    mask: none;
    filter: saturate(0.88) brightness(0.94);
  }
}

/* Hero label layer: v3's 0.38em stage eyebrow. Rose 5.75:1 on the field. */
html[data-theme='brand'] .hero .eyebrow--accent {
  letter-spacing: 0.38em;
  margin-bottom: var(--space-1);
}

/* ===========================================================================
   SECTION RHYTHM — chiaroscuro bands + blind-emboss grooves (v3 .groove)
   ===========================================================================
   field (stage) → deep (stat strip) → surface (Rólunk, ELEVATED — dark-theme
   elevation is surface-lightening, the lamborghini note v3 cites) → field
   (treatments) → deep (results) → field (quotes, signed by the emboss) →
   deep (footer) → deepest (base bar).

   The groove: v3's print-derived divider — a dark cut with a lit lower edge.
   Composite ≈1.5:1 either side: DECORATIVE, the tonal bands do the actual
   separation; the groove is the letterpress detail on top. */
html[data-theme='brand'] .stats,
html[data-theme='brand'] .about,
html[data-theme='brand'] .treatments,
html[data-theme='brand'] .results,
html[data-theme='brand'] .quotes,
html[data-theme='brand'] .site-footer {
  border-top: 1px solid rgb(var(--color-scrim-rgb) / 0.6);
  box-shadow: inset 0 1px 0 var(--color-emboss-lift);
}

html[data-theme='brand'] .results {
  background: var(--color-surface-deep);
}

/* ===========================================================================
   STAT BAND — v3's trust strip, on the deep band instead of brand green
   ===========================================================================
   The v3 register has no coloured bands — chiaroscuro only. Figures in Linen
   serif (14.73:1 on deep), labels muted (9.30:1 at 11–12px, AA). The base
   paints this band --color-primary-deep with --color-primary-contrast ink;
   both of those now resolve to light-fill/Jet-ink, so BOTH the band and its
   inherited text colour must move together — half-overriding would paint Jet
   text on a near-black band. */
html[data-theme='brand'] .stats {
  background: var(--color-surface-deep);
  color: var(--color-text);
}
html[data-theme='brand'] .stat__label {
  color: var(--color-text-muted); /* 9.30:1 on deep — solid, never alpha (D37) */
}

/* Pinned to the fold's bottom edge on desktop (premium mechanism). The
   inter-stat dividers stay lab's Linen/0.26 — composite 2.28:1, decorative:
   the cells are separated by their own gutters, same as the base band. */
@media (min-width: 901px) {
  html[data-theme='brand'] .stats {
    padding-block: 0;
    min-height: var(--ribbon-h);
    display: grid;
    align-content: center;
  }
  html[data-theme='brand'] .stat {
    grid-template-rows: minmax(2rem, auto) auto;
  }
}

/* ===========================================================================
   RÓLUNK — the doctor's stage (v3 .about-sign: doctor-first prominence)
   =========================================================================== */

/* The name is the brand: near-H2 serif scale, full Linen (11.82:1 on the
   elevated surface), over a debossed groove — v3's .about-sign device. */
html[data-theme='brand'] .about__signature {
  position: relative;
  font-size: clamp(1.875rem, 2.8vw, 2.5rem);
  color: var(--color-text);
  padding-top: var(--space-3);
}
html[data-theme='brand'] .about__signature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5rem;
  border-top: 1px solid rgb(var(--color-scrim-rgb) / 0.6);
  border-bottom: 1px solid var(--color-emboss-lift); /* debossed groove, not a
    plain rule — decorative */
}
/* The role line is sage — v3's institutional colour split. 5.21:1 on surface. */
html[data-theme='brand'] .about__role {
  color: var(--color-primary-deep);
}

/* The doctor hangs as a framed print too — inset from the section edge with
   the mount + inner-line treatment; crown-safe crop (premium-b's measured
   center-top fix, same source asset). */
html[data-theme='brand'] .about__portrait {
  margin: var(--space-5);
  background: var(--color-surface-deep);
  border: 1px solid var(--color-border);
}
html[data-theme='brand'] .about__portrait::before {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 2; /* above the absolutely-positioned img (tree order) */
  border: 1px solid rgb(var(--color-on-image-rgb) / 0.22); /* decorative */
  pointer-events: none;
}
html[data-theme='brand'] .about__portrait img {
  object-position: center top;
  filter: saturate(0.9) brightness(0.95);
}
@media (max-width: 900px) {
  /* lab's phone rule pins width:100%; margins on top of that would push the
     figure past the viewport, so the phone print re-derives its width. */
  html[data-theme='brand'] .about__portrait {
    width: auto;
    margin: var(--space-3) var(--gutter) 0;
  }
}

/* ===========================================================================
   KEZELÉSEINK — treatment tiles as prints (v3 .treat-card register)
   =========================================================================== */
html[data-theme='brand'] .card {
  background: var(--color-surface);
  border: 1px solid var(--color-border); /* decorative — scrim carries the text */
}
html[data-theme='brand'] .card img {
  filter: saturate(0.85) brightness(0.9);
  transition: transform 1.2s var(--ease), filter var(--dur) var(--ease);
}
html[data-theme='brand'] .card:hover img,
html[data-theme='brand'] .card:focus-visible img {
  filter: saturate(0.95) brightness(1); /* v3's hover lift */
}
/* The base borrows --color-border as the description INK (its value happened
   to be a warm near-Linen). This theme's border token is a 16%-alpha hairline
   — as text it would be invisible — so the description takes the muted tier:
   on the scrim's 0.75–0.81 zone over a worst-case white frame it measures
   4.75–5.93:1 (composite #524f4d–#444140), AA at 12px, no alpha on text. */
html[data-theme='brand'] .card__desc {
  color: var(--color-text-muted);
}

/* ===========================================================================
   EREDMÉNYEK — the consent-gated comparison frames, dark furniture
   ===========================================================================
   The panels stay honest hatched placeholders (surface tones on the deep
   band); only the instrument is re-inked. Divider: Linen 0.9 — ≥11:1 against
   both hatch stripes, a required boundary. Knob: v3's .ba-knob exactly —
   rose disc, Jet arrows (5.75:1), ≥5.18:1 disc-to-hatch (1.4.11), dark
   shadow instead of the base's now-Linen glow. */
html[data-theme='brand'] .ba__divider {
  background: rgb(var(--color-on-image-rgb) / 0.9);
}
html[data-theme='brand'] .ba__knob {
  background: var(--color-accent-deep);
  color: var(--color-bg);
  box-shadow: 0 1px 6px rgb(var(--color-scrim-rgb) / 0.5);
}

/* ===========================================================================
   VÉLEMÉNYEK — the vaknyomás signs the closing stage
   ===========================================================================
   The mark's body token is set dark-side above; the base's filter pair would
   now throw a LIGHT shadow up-left (its --color-text-rgb is Linen here) and
   flatten the emboss, so the shadows are restated dark-side-up: dark cut
   above, faint lit edge below — the same physics as the groove. */
html[data-theme='brand'] .emboss {
  filter: drop-shadow(-1.5px -1.5px 1.5px rgb(var(--color-scrim-rgb) / 0.55))
    drop-shadow(1.5px 2px 1.5px var(--color-emboss-lift));
}

/* ============================================================================
   NOT PORTED from v3, and why — so nobody re-derives the gaps:
   * Orvosaink / Tudástár / quote-band / Kapcsolat sections, the newsletter
     form, the header mega-menu disclosure and the scroll cue: no counterpart
     markup in HomeDesign.astro/Layout.astro, and a theme may not add HTML.
   * The 0.22em nav tracking and the 200/300 sans weights: measured RU-rail
     overflow risk and unshipped font weights respectively (notes inline).
   * The scroll-reveal system: dropped by instruction, not tuned (header note).
   * Palatino display face: v3 chose it as the best CYRILLIC-SAFE SYSTEM serif
     for a zero-webfont concept file; the site self-hosts Cormorant Garamond —
     the brand book's own secondary face, which is the warmth Palatino was
     standing in for. The register (uppercase, tracked, 46–80px on dark) is
     ported; the stand-in face is not.
   ========================================================================= */