/* ==========================================================================
   LUXORA — design tokens (public/css/tokens.css)
   Owner: DESIGN. Source of truth: DESIGN.md. Components reference tokens only.
   Direction: "Ivory Atelier — Bone & Ink". Single ivory look; dark is a band.

   Fonts are loaded by the <link> tag in every page (see DESIGN.md §3.1):
     Almarai 300/400/700 · Amiri 400/700 · Cormorant Garamond 300/400/500 + 400i · Jost 400/500
   Breakpoints (type literally in media queries — custom props cannot be used there):
     sm 480px · md 768px · lg 1024px · xl 1280px · 2xl 1536px
   ========================================================================== */

:root {
  color-scheme: light;                                   /* no dark mode; dark is a material, not a theme */

  /* ---------- Colour: surfaces ---------- */
  --bg:            #F7F3EC;   /* Ivory — page background everywhere; never pure white */
  --surface:       #FBF9F4;   /* Paper — drawers, modals, curtain, dropdowns, admin cards */
  --surface-2:     #EFE9DF;   /* Bone — the product image plate, skeleton base, applied-filter row */
  --surface-3:     #E8E0D3;   /* Linen — plate hover, category tile ground, admin table header */
  --plate:         var(--surface-2); /* alias: background behind every product photo (4:5) */
  --image-plate:   #EFE9DF;   /* literal plate hex for JS-generated inline styles (admin preview) */

  /* ---------- Colour: text & lines ---------- */
  --ink:           #141210;   /* primary text, primary button fill, icons, wordmark — 16.9:1 on ivory */
  --ink-2:         #4A4540;   /* secondary text: card names, editorial body, accordion text — 8.9:1 */
  --muted:         #8A837A;   /* tertiary: counts, placeholders, captions — 4.6:1, only >=13px, never actionable */
  --line:          #E3DCD0;   /* all 1px hairlines on ivory */
  --line-strong:   #CFC6B7;   /* borders that must show on bone: swatch rings, chips, dropzone, handles */

  /* ---------- Colour: accent (rationed) ---------- */
  --accent:        #6B1F2A;   /* Oxblood — the single accent: current nav, active chip, bag dot, Rare/Sold text, errors */
  --accent-hover:  #56161F;   /* oxblood hover/press */
  --accent-ink:    #F3EEE4;   /* text/icon on an oxblood fill */
  --gold:          #A8894F;   /* Antique gold — 1px hairlines and 24px assurance icons ONLY; never text on ivory (3.1:1) */
  --gold-on-dark:  #C9A24A;   /* gold as text is allowed only on dark surfaces (7.4:1 on --band-bg) */

  /* ---------- Colour: semantic ---------- */
  --success:       #3F5D48;   /* deep olive — added-to-bag icon, in-stock dot, admin published */
  --success-soft:  #E4EBE5;   /* olive tint — admin row tint only */
  --warning:       #9A7B2F;   /* ochre — last piece / low stock, admin draft */
  --warning-soft:  #F1E9D2;   /* ochre tint — admin only */
  --danger:        #8A2F2F;   /* claret — destructive admin actions, error input borders */
  --danger-soft:   #F3E3E0;   /* claret tint — error input background */
  --whatsapp:      #25D366;   /* WhatsApp green — ONLY the 6px online dot in the concierge pill */
  --toast-success: #7FA582;   /* toast rule colours are lifted for legibility on the ink toast */
  --toast-info:    #C9A24A;   /* toast info rule */
  --toast-error:   #D98C84;   /* toast error rule */

  /* ---------- Colour: overlays, focus, skeleton ---------- */
  --scrim:         rgba(20, 18, 16, .42); /* behind drawers, sheets, modals — no blur anywhere */
  --scrim-strong:  rgba(20, 18, 16, .72); /* lightbox backdrop */
  --focus:         #141210;   /* 2px focus-visible outline, offset 3px (ivory inside .band-dark) */
  --skeleton-base: #EFE9DF;   /* skeleton block */
  --skeleton-hi:   #F5F0E7;   /* skeleton moving sheen */

  /* ---------- Colour: dark band values (referenced by .band-dark remap) ---------- */
  --band-bg:       #141210;   /* footer, Nocturne band, admin sidebar, primary buttons */
  --band-bg-2:     #1E1B18;   /* hover rows / panels inside a band */
  --band-plate:    #221F1B;   /* product plate inside a band (rare) */
  --band-text:     #F3EEE4;   /* primary text on dark — 15.2:1 */
  --band-text-2:   #C9C2B6;   /* secondary text on dark */
  --band-muted:    #A39C90;   /* tertiary on dark (footer links at rest) — 6.5:1 */
  --band-line:     #2C2824;   /* 1px hairlines on dark */
  --band-line-strong: #3A352F; /* visible borders on dark (secondary button on ink) */

  /* ---------- Typography: families ---------- */
  --font-display:       'Cormorant Garamond', 'Amiri', Georgia, 'Times New Roman', serif; /* EN display (AR overrides below) */
  --font-body:          'Jost', 'Almarai', 'Helvetica Neue', Arial, sans-serif;            /* EN body/UI (AR overrides below) */
  --font-latin-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;            /* forced Latin inside Arabic headings (model names) */
  --font-latin-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;                        /* brand names, prices, SKUs, digits — both languages */
  --font-numeric:       var(--font-latin-body);                                             /* alias for .num / <bdi> */

  /* ---------- Typography: language-scoped metrics (EN values; AR block overrides) ---------- */
  --lh-display:     1.02;     /* display-1/2 line-height */
  --lh-heading:     1.15;     /* h1–h3 */
  --lh-body:        1.6;      /* running text */
  --lh-ui:          1;        /* buttons, chips, badges, inputs */
  --ls-display:     -0.01em;  /* display tracking */
  --ls-eyebrow:     0.18em;   /* eyebrow / micro labels */
  --ls-button:      0.14em;   /* buttons */
  --ls-nav:         0.12em;   /* header nav */
  --ls-wordmark:    0.32em;   /* LUXORA wordmark only */
  --tt-caps:        uppercase;/* text-transform for eyebrows/buttons/nav (none in AR) */
  --fw-regular:     400;      /* body weight */
  --fw-medium:      500;      /* Jost 500 (AR → Almarai 700) */
  --fw-display:     300;      /* Cormorant 300 for >=44px display; use 400 below (AR → 400) */
  --fw-display-sm:  400;      /* display weight under 44px */
  --display-scale:  1;        /* Amiri optical compensation (AR → 1.06) */
  --underline-offset: 0.18em; /* text-underline-offset (AR → 0.28em) */
  --underline-origin: 0;      /* underline draw origin: 0 = inline-start in LTR (RTL → 100%) */

  /* ---------- Typography: fluid scale (375px → 1536px) ---------- */
  --fs-display-1: clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem);   /* 44→88px hero headline, brand page name */
  --fs-display-2: clamp(2.25rem, 1.5rem + 2.6vw, 4rem);     /* 36→64px home section titles, Icon, Nocturne quote, About chapters */
  --fs-h1:        clamp(1.75rem, 1.25rem + 1.6vw, 2.75rem); /* 28→44px shop title, PDP name, brands letters, quick-view title */
  --fs-h2:        clamp(1.5rem, 1.2rem + 1vw, 2.125rem);    /* 24→34px drawer titles, concierge headline, maison names */
  --fs-h3:        clamp(1.375rem, 1.15rem + .8vw, 1.75rem); /* 22→28px category/brand tile labels, empty-state titles */
  --fs-h4:        1.125rem;                                 /* 18px accordion headers, filter groups, bag item names — BODY font, never Amiri */
  --fs-body-lg:   clamp(1.0625rem, 1rem + .3vw, 1.1875rem);/* 17→19px editorial paragraphs, hero sentence */
  --fs-body:      0.9375rem;                                /* 15px default text (AR 16px) */
  --fs-small:     0.8125rem;                                /* 13px card names, meta, tables, footer links (AR 14px) */
  --fs-caption:   0.75rem;                                  /* 12px timestamps, incl. VAT, SKU, copyright */
  --fs-eyebrow:   0.6875rem;                                /* 11px eyebrows, column titles (AR 12px) */
  --fs-badge:     0.625rem;                                 /* 10px badge text EN (AR 11px) */
  --fs-nav:       0.8125rem;                                /* 13px header nav (AR 14px) */
  --fs-button:    0.75rem;                                  /* 12px buttons (AR 13px) */
  --fs-price:     0.875rem;                                 /* 14px card price */
  --fs-price-lg:  1.125rem;                                 /* 18px PDP price */
  --fs-price-xl:  1.5rem;                                   /* 24px bag total (weight 500) */
  --fs-wordmark:  1.375rem;                                 /* 22px desktop wordmark (18px mobile via media query) */
  --fs-wordmark-sm: 1.125rem;                               /* 18px mobile wordmark */
  --fs-search:    clamp(1.75rem, 1.2rem + 2.2vw, 3rem);     /* 28→48px search curtain input */
  --fs-watermark: clamp(4rem, 12vw, 11.25rem);              /* 64→180px footer watermark wordmark */

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:  4px;    /* badge gap, hairline offsets */
  --sp-2:  8px;    /* icon/label gap, gallery gap */
  --sp-3:  12px;   /* card image→text gap, mobile grid column gap */
  --sp-4:  16px;   /* mobile gutter, form field gap */
  --sp-5:  24px;   /* component padding, desktop grid column gap */
  --sp-6:  32px;   /* section head→content (mobile), modal padding */
  --sp-7:  48px;   /* section head→content (desktop), grid row gap, rail gap */
  --sp-8:  64px;   /* pagination top, Three Rooms stagger, mobile section floor */
  --sp-9:  96px;   /* footer padding, mobile section max */
  --sp-10: 128px;  /* desktop section padding (lg) */
  --sp-11: 160px;  /* desktop section padding (2xl), About gaps */
  --sp-12: 192px;  /* reserved: hero bottom air on 2xl */
  --section-y: clamp(64px, 5vw + 32px, 160px); /* section padding-block: 64 @375 · ~96 @1024 · 128 @1440 · 160 cap */
  --section-y-tight: 80px;                     /* home hero→Curated Edit on mobile */
  --head-gap: var(--sp-7);                     /* section head → content (mobile overrides to --sp-6) */

  /* ---------- Layout ---------- */
  --w-site:   1440px;  /* default content container */
  --w-wide:   1600px;  /* editorial inner content, footer columns, hero inner */
  --w-medium: 1120px;  /* brands index, contact split, wishlist */
  --w-narrow: 720px;   /* prose: About, policies, concierge block, 404 */
  --gutter: clamp(16px, 4vw, 64px); /* padding-inline on .container — 16 <480 · 20 · 32 · 48 · 64 ≥1440 */
  --grid-gap: 16px;    /* 12-col editorial grid column-gap (24 ≥768, 32 ≥1280) */
  --grid-cols: 12;     /* editorial grid columns */

  /* ---------- Header / sticky offsets ---------- */
  --utility-h:          36px;  /* utility bar (collapses to 0 when scrolled / on catalog pages) */
  --announce-h:         36px;  /* optional announcement bar */
  --header-h:           76px;  /* desktop main bar at top */
  --header-h-scrolled:  64px;  /* desktop main bar after 80px scroll */
  --header-h-mobile:    60px;  /* mobile bar */
  --toolbar-h:          48px;  /* shop toolbar desktop (44px mobile) */
  --toolbar-h-mobile:   44px;  /* mobile Filter · Sort bar */
  --cta-bar-h:          72px;  /* PDP sticky bottom CTA bar (+ safe-area) */
  --sticky-top: var(--header-h-scrolled); /* generic sticky offset for rails/toolbars on desktop */

  /* ---------- Product grid ---------- */
  --card-ratio:     4 / 5;   /* product media aspect */
  --card-pad:       8%;      /* packshot inset inside the plate (10% on PDP) */
  --tile-ratio:     3 / 4;   /* category & brand tiles */
  --grid-col-gap:   12px;    /* product grid column gap mobile (16 md, 24 lg, 32 2xl) */
  --grid-row-gap:   32px;    /* product grid row gap mobile (40 md, 48 lg, 56 2xl) */
  --plate-inset:    inset 0 0 0 1px rgba(20,18,16,.03), inset 0 -24px 32px -24px rgba(20,18,16,.06); /* barely-there contact floor on the plate */

  /* ---------- Radii ---------- */
  --r-0:    0;      /* cards, images, buttons, inputs, modals, drawers, badges — everything */
  --r-xs:   2px;    /* admin inputs/cards only (density concession) */
  --r-pill: 999px;  /* filter chips, concierge pill, admin status pills, density toggle, icon-button hover disc */

  /* ---------- Shadows (only two exist) ---------- */
  --shadow-1: 0 24px 48px -24px rgba(20, 18, 16, .25);                                   /* quick-view modal, curtain bottom edge, mega-menu */
  --shadow-2: 0 0 0 1px var(--line), 0 32px 64px -32px rgba(20, 18, 16, .35);            /* drawers, sheets, toast, sticky CTA bar */
  --shadow-none: none;                                                                   /* cards, buttons, images, inputs */

  /* ---------- Borders ---------- */
  --hair: 1px solid var(--line);          /* default hairline */
  --hair-strong: 1px solid var(--line-strong); /* hairline on bone */
  --hair-gold: 1px solid var(--gold);     /* gold rule (24/32/48px long, never a full-width border) */
  --rule-eyebrow-w: 24px;                 /* gold rule before eyebrows / under wordmark */
  --rule-tile-w: 32px;                    /* gold rule under category/brand tile labels (draws on hover) */
  --rule-hero-w: 48px;                    /* gold rule in the hero (draws on entrance) */

  /* ---------- Motion: easing ---------- */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);   /* reveals, drawers entering, underline draw, chips */
  --ease-in:     cubic-bezier(.4, 0, 1, 1);      /* drawers/modals leaving */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);   /* crossfades, image swaps, tab content, search curtain */
  --ease-expo:   cubic-bezier(.16, 1, .3, 1);    /* hero choreography, line-mask reveal, hairline draw */
  --ease-linear: linear;                         /* marquee, skeleton sheen, toast progress */

  /* ---------- Motion: durations ---------- */
  --dur-1:    150ms;  /* icon colour, checkbox, chip, focus ring, heart fade */
  --dur-2:    220ms;  /* button colour, nav underline, mega-menu close, tab indicator */
  --dur-3:    320ms;  /* drawers, modals, sheets, accordion, header collapse, filter apply */
  --dur-4:    400ms;  /* card image crossfade, curtain content, tab crossfade */
  --dur-5:    600ms;  /* scroll reveal */
  --dur-6:    900ms;  /* category tile zoom, hero settle */
  --dur-hero: 1200ms; /* hero image entrance */
  --dur-line: 700ms;  /* line-mask headline reveal per line */
  --dur-marquee: 48s; /* Maisons marquee one loop (36s mobile) */
  --stagger: 60ms;    /* reveal sibling stagger ([data-reveal-delay="n"] → n × --stagger) */
  --stagger-line: 80ms; /* line-mask stagger per line */
  --reveal-y: 16px;   /* scroll-reveal travel distance */

  /* ---------- Z-index ---------- */
  --z-below:    -1;   /* watermark wordmark, decorative letters */
  --z-base:     0;    /* content */
  --z-raised:   10;   /* card overlays (badge, heart, quick view), tab indicator */
  --z-sticky:   50;   /* filter rail, PDP info column, thumbnail rail, letter rail */
  --z-toolbar:  90;   /* shop toolbar, mobile Filter·Sort bar, PDP CTA bar */
  --z-header:   100;  /* site header */
  --z-dropdown: 200;  /* mega-menu, sort dropdown */
  --z-pill:     250;  /* concierge pill */
  --z-scrim:    300;  /* scrim behind drawers/sheets/modals */
  --z-drawer:   310;  /* bag drawer, nav drawer, filter sheet */
  --z-curtain:  350;  /* search curtain */
  --z-modal:    400;  /* quick view, size guide, lightbox */
  --z-toast:    500;  /* toasts */
  --z-skip:     600;  /* skip link */

  /* ---------- Controls ---------- */
  --hit:          44px;  /* minimum hit area for every control */
  --btn-h:        48px;  /* button height desktop (52 mobile) */
  --btn-h-lg:     52px;  /* .btn--lg desktop (56 mobile) */
  --btn-h-sm:     40px;  /* .btn--sm */
  --btn-pad-x:    28px;  /* button padding-inline */
  --btn-min-w:    160px; /* button min-inline-size */
  --input-h:      48px;  /* storefront underline inputs */
  --input-h-admin:44px;  /* admin boxed inputs */
  --chip-h:       32px;  /* filter chip desktop (36 touch) */
  --badge-h:      22px;  /* badge height */
  --icon:         20px;  /* default icon size (.icon) */
  --icon-sm:      16px;  /* .icon--sm */
  --icon-lg:      24px;  /* .icon--lg */
  --icon-stroke:  1.5;   /* stroke-width for the SVG sprite */
  --swatch:       28px;  /* PDP colour swatch (20 in rail) */
  --thumb:        56px;  /* PDP thumbnail rail size */
  --bag-thumb-w:  80px;  /* bag row thumbnail 80×100 */
  --admin-thumb-w:40px;  /* admin table thumbnail 40×50 */
  --drawer-w:     440px; /* bag / nav drawer max width */
  --rail-w:       264px; /* filter rail width */
  --sidebar-w:    248px; /* admin sidebar (64 collapsed) */
  --sheet-h:      88svh; /* filter bottom sheet height (92svh bag sheet) */
  --safe-b: env(safe-area-inset-bottom, 0px); /* bottom safe area for fixed bars */
  --safe-t: env(safe-area-inset-top, 0px);    /* top safe area (PWA) */
}

/* ==========================================================================
   Arabic (default document language): fonts, metrics, tracking
   ========================================================================== */
html[lang="ar"] {
  --font-display: 'Amiri', 'Cormorant Garamond', 'Noto Naskh Arabic', 'Traditional Arabic', serif; /* AR display — never below 20px */
  --font-body:    'Almarai', 'Jost', 'Segoe UI', Tahoma, sans-serif;                                 /* AR body/UI */
  --lh-display:   1.3;     /* Amiri needs ascender/descender room */
  --lh-heading:   1.45;
  --lh-body:      1.8;
  --ls-display:   0;       /* tracking is always 0 in Arabic */
  --ls-eyebrow:   0;
  --ls-button:    0;
  --ls-nav:       0;
  --tt-caps:      none;    /* no text-transform on Arabic */
  --fw-medium:    700;     /* Almarai has no 500 */
  --fw-display:   400;     /* Amiri 300 does not exist; 400 at every display size */
  --fw-display-sm:400;
  --display-scale:1.06;    /* Amiri sits optically smaller than Cormorant */
  --underline-offset: 0.28em; /* clear Arabic descenders */
  --fs-display-1: clamp(2.75rem, 1.7rem + 3.6vw, 4.75rem); /* 44→76px — capped so «المجموعة» fits a 5-col text block */
  --fs-display-2: calc(clamp(2.25rem, 1.5rem + 2.6vw, 4rem) * var(--display-scale));
  --fs-h1:        calc(clamp(1.75rem, 1.25rem + 1.6vw, 2.75rem) * var(--display-scale));
  --fs-h2:        calc(clamp(1.5rem, 1.2rem + 1vw, 2.125rem) * var(--display-scale));
  --fs-h3:        calc(clamp(1.375rem, 1.15rem + .8vw, 1.75rem) * var(--display-scale));
  --fs-body:      1rem;      /* 16px — Almarai 16 ≈ Jost 15 optically */
  --fs-small:     0.875rem;  /* 14px */
  --fs-eyebrow:   0.75rem;   /* 12px, weight 700, no tracking, no caps */
  --fs-badge:     0.6875rem; /* 11px */
  --fs-nav:       0.875rem;  /* 14px */
  --fs-button:    0.8125rem; /* 13px */
  --fs-wordmark:  1.625rem;  /* 26px لوكسورا desktop */
  --fs-wordmark-sm: 1.3125rem; /* 21px mobile */
}
html[lang="ar"] * { letter-spacing: 0 !important; }   /* tracking breaks connected letterforms — intentional !important */

/* RTL: underline draw origin mirrors (background-position for the drawn underline) */
html[dir="rtl"] { --underline-origin: 100%; }

/* ==========================================================================
   Dark band scope: same token names remapped so components drop in unchanged.
   Used by: footer, Nocturne band, brand page hero band, admin sidebar.
   ========================================================================== */
.band-dark,
[data-theme="dark-band"] {
  color-scheme: dark;                      /* native controls inside the band render dark */
  --bg:           var(--band-bg);          /* #141210 band background */
  --surface:      var(--band-bg-2);        /* #1E1B18 panels / hover rows inside the band */
  --surface-2:    var(--band-plate);       /* #221F1B plate inside a band */
  --surface-3:    #2A2622;                 /* plate hover inside a band */
  --plate:        var(--band-plate);
  --ink:          var(--band-text);        /* #F3EEE4 primary text on dark */
  --ink-2:        var(--band-text-2);      /* #C9C2B6 secondary */
  --muted:        var(--band-muted);       /* #A39C90 tertiary */
  --line:         var(--band-line);        /* #2C2824 hairlines */
  --line-strong:  var(--band-line-strong); /* #3A352F visible borders */
  --accent:       var(--gold-on-dark);     /* oxblood vanishes on ink → gold takes the accent role */
  --accent-hover: #D9B45C;                 /* gold hover on dark */
  --accent-ink:   #141210;                 /* text on a gold fill (reserved) */
  --gold:         var(--gold-on-dark);     /* gold hairlines on dark */
  --focus:        var(--band-text);        /* ivory focus ring */
  --scrim:        rgba(0, 0, 0, .5);
  --skeleton-base:#1E1B18;                 /* skeleton inside band */
  --skeleton-hi:  #262320;
  --shadow-2:     0 0 0 1px var(--band-line), 0 32px 64px -32px rgba(0, 0, 0, .6);
  /* primary button inverts on ink: ivory fill, ink text */
  --btn-primary-bg:   var(--band-text);
  --btn-primary-ink:  var(--band-bg);
  --btn-primary-hover:#FFFFFF;
  color: var(--ink);
  background: var(--bg);
}

/* Storefront button colour hooks (ivory context) — components read these, not raw hex */
:root {
  --btn-primary-bg:    var(--ink);       /* primary button fill */
  --btn-primary-ink:   var(--accent-ink);/* primary button text (#F3EEE4) */
  --btn-primary-hover: #2A2622;          /* primary hover */
  --btn-primary-active:#000000;          /* primary active */
  --btn-secondary-ink: var(--ink);       /* outline button text/border; hover inverts to primary */
  --icon-press-bg:     rgba(20, 18, 16, .06); /* icon-button pressed disc */
}

/* ==========================================================================
   Responsive token shifts (breakpoints typed literally)
   ========================================================================== */
@media (max-width: 479.98px) {
  :root {
    --muted: #6F6860;          /* darker ash on phones for outdoor glare */
    --head-gap: var(--sp-6);   /* section head → content 32px */
    --btn-h: 52px;             /* touch button heights */
    --btn-h-lg: 56px;
    --chip-h: 36px;
    --toolbar-h: var(--toolbar-h-mobile);
    --fs-wordmark: var(--fs-wordmark-sm);
  }
}
@media (max-width: 1023.98px) {
  :root {
    --header-h: var(--header-h-mobile);          /* 60px bar */
    --header-h-scrolled: var(--header-h-mobile);
    --utility-h: 0px;                            /* no utility bar on mobile */
    --sticky-top: var(--header-h-mobile);
    --chip-h: 36px;
    --btn-h: 52px;
    --btn-h-lg: 56px;
  }
}
@media (min-width: 768px) {
  :root { --grid-gap: 24px; --grid-col-gap: 16px; --grid-row-gap: 40px; }
}
@media (min-width: 1024px) {
  :root { --grid-col-gap: 24px; --grid-row-gap: 48px; }
}
@media (min-width: 1280px) {
  :root { --grid-gap: 32px; }
}
@media (min-width: 1536px) {
  :root { --grid-col-gap: 32px; --grid-row-gap: 56px; }
}

/* Numerals: every price / count / SKU / phone uses the Latin body face with tabular lining figures */
.num, [data-num] {
  font-family: var(--font-numeric);
  font-variant-numeric: lining-nums tabular-nums;
  unicode-bidi: isolate;
}

/* ==========================================================================
   Reduced motion: one block zeroes every duration and disables the theatrics
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0.01ms; --dur-2: 0.01ms; --dur-3: 0.01ms; --dur-4: 0.01ms;
    --dur-5: 0.01ms; --dur-6: 0.01ms; --dur-hero: 0.01ms; --dur-line: 0.01ms;
    --dur-marquee: 0.01ms; --stagger: 0ms; --stagger-line: 0ms; --reveal-y: 0px;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; translate: none !important; transform: none !important; }
  .line__in { translate: none !important; }
  .marquee { animation: none !important; }
  @view-transition { navigation: none; }
}

/* ==========================================================================
   CJK languages: Noto faces (loaded on demand by i18n.js), no tracking, no caps
   ========================================================================== */
html[lang="zh"] {
  --font-display: 'Noto Serif SC', 'Cormorant Garamond', 'Songti SC', 'SimSun', serif;
  --font-body:    'Noto Sans SC', 'Jost', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --lh-display: 1.3; --lh-heading: 1.45; --lh-body: 1.85;
  --ls-display: 0; --ls-eyebrow: .06em; --ls-button: .04em; --ls-nav: .04em; --tt-caps: none;
}
html[lang="ja"] {
  --font-display: 'Noto Serif JP', 'Cormorant Garamond', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-body:    'Noto Sans JP', 'Jost', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  --lh-display: 1.3; --lh-heading: 1.45; --lh-body: 1.85;
  --ls-display: 0; --ls-eyebrow: .06em; --ls-button: .04em; --ls-nav: .04em; --tt-caps: none;
}
html[lang="ko"] {
  --font-display: 'Noto Serif KR', 'Cormorant Garamond', 'Apple SD Gothic Neo', 'Malgun Gothic', serif;
  --font-body:    'Noto Sans KR', 'Jost', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --lh-display: 1.3; --lh-heading: 1.45; --lh-body: 1.8;
  --ls-display: 0; --ls-eyebrow: .06em; --ls-button: .04em; --ls-nav: .04em; --tt-caps: none;
}