/* SK Arabians — public website. "Heritage Noir": cinematic, editorial, glass and gold.
   On top of tokens.css (brand colours, motion), brand.css (the design language shared with the Management System:
   type, spacing, radius, shadows, glass, motifs, keyframes) and fonts.css (self-hosted Marcellus + Inter; Amiri + IBM
   Plex Sans Arabic for Arabic). Order: 1 System (tokens, base, utilities) · 2 Components · 3 Layout (header, menu,
   footer) · 4 Pages · 5 Motion, reduced motion, print.
   Colours: only the brand tokens of tokens.css (navy, navy-2, navy-deep, navy-ink, gold, gold-2, gold-soft, ivory,
   soft, slate, line, mist, white) — every tint, glow and gradient is a color-mix() of those. No other hue.
   Mobile-first and RTL-aware: logical properties only; directional motion is mirrored for Arabic. */

/* =====================================================================================================================
   1 · SYSTEM
   ===================================================================================================================== */

/* The website's fonts once more, with font-display: optional (fonts.css, shared with the staff system, says swap).
   Same files, so nothing is downloaded twice; the later rule wins. A font is used only if it is ready for the first
   paint (they are preloaded in layouts/site.php) and never swapped in afterwards, so the large headlines never jump
   (layout shift). On a very slow first visit the page keeps the system font; the next page has them from the cache. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:optional;src:url(../fonts/Inter-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:optional;src:url(../fonts/Marcellus-400.woff2) format('woff2')}
/* Arabic on the website: two Plex files (400 serves 400–500, 700 serves 600–700) and Amiri's bold only (Arabic headings are bold) —
   ~190 KB instead of ~390 KB on an Arabic page. These ranges win over fonts.css's single weights (defined later). */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400 500;font-display:optional;src:url(../fonts/IBMPlexSansArabic-400-4.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600 700;font-display:optional;src:url(../fonts/IBMPlexSansArabic-700-7.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Amiri';font-style:normal;font-weight:400 700;font-display:optional;src:url(../fonts/Amiri-700-12.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

/* ---- Tokens ---- */
:root {
  /* colour roles (dark is the website's default page; .section-light switches them to ivory) */
  --bg: var(--c-navy-deep);
  --bg-2: var(--c-navy-ink);
  --card: var(--c-navy-ink);
  --edge: var(--c-navy);
  --edge-2: var(--c-navy-2);
  --text: var(--c-ivory);
  --soft: var(--c-soft);
  --muted: var(--c-soft);
  --gold: var(--c-gold);
  --gold-2: var(--c-gold-2);
  --gold-soft: var(--c-gold-soft);
  --ok-dark: color-mix(in srgb, var(--c-ok) 45%, var(--c-white));
  --bad-dark: var(--c-bad-light);
  --veil: color-mix(in srgb, var(--c-navy-deep) 88%, transparent);
  --hairline: color-mix(in srgb, var(--c-ivory) 12%, transparent);

  /* layout rhythm (the shared scales — type, spacing, radius, shadows, glass, motion — are in brand.css) */
  --section-y: clamp(88px, 4rem + 7vw, 184px);
  --gutter: 16px;
  --gap: var(--s-4);
  --wrap: 1440px;
  --hdr-h: 68px;
}
@media (min-width: 640px) { :root { --gutter: 28px; --gap: var(--s-5); } }
@media (min-width: 1024px) { :root { --gutter: 40px; --hdr-h: 80px; } }
@media (min-width: 1600px) { :root { --gutter: 64px; } }
/* Arabic: the display faces run larger, so the scale steps down; generous line height for the joined letters */
html[dir="rtl"] {
  --fw-medium: 400; --fw-semibold: 700; /* Arabic text in two weights: two font files instead of four */
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + var(--s-4)); background: var(--bg); color-scheme: dark;
  scrollbar-color: color-mix(in srgb, var(--c-gold) 55%, var(--c-navy-ink)) var(--c-navy-deep); scrollbar-width: thin; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--c-navy-deep); }
html::-webkit-scrollbar-thumb { border: 2px solid var(--c-navy-deep); border-radius: 10px; background: linear-gradient(var(--c-gold-2), var(--c-gold)); }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; overflow-x: clip; background: var(--bg); color: var(--text);
  font-family: var(--font-text); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
main { flex: 1 0 auto; display: flex; flex-direction: column; }
main:focus { outline: 0; }
img, video, svg { max-width: 100%; }
img, video { display: block; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-regular); line-height: var(--lh-head); margin: 0 0 .5em; letter-spacing: -.01em; text-wrap: balance; }
html[dir="rtl"] :is(h1, h2, h3, h4) { font-weight: var(--fw-bold); letter-spacing: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
::selection { background: var(--gold-2); color: var(--c-navy-deep); }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 4px; }

/* ---- Utilities ---- */
.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; z-index: var(--z-skip); inset-inline-start: var(--s-2); top: -60px; padding: var(--s-2) var(--s-4); border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--gold-2); color: var(--c-navy-deep); font-weight: var(--fw-semibold); text-decoration: none; transition: top var(--dur) var(--ease-out); }
.skip:focus { top: 0; }
.x { color: var(--gold-2); padding-inline: 2px; }
.dim, .muted-text { color: var(--soft); }
.num, .tally-item b, .stat-card b, .group-n, .cat-tab .n, .ach-counter b { font-variant-numeric: tabular-nums; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* glass on the ivory page */
.section-light .glass { background: var(--glass-bg-light); border: 1px solid color-mix(in srgb, var(--c-gold) 28%, transparent);
  box-shadow: inset 0 1px 0 var(--c-white), 0 24px 60px -30px color-mix(in srgb, var(--c-navy) 45%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .section-light .glass { background: var(--c-white); } }
/* phones: frosted only where it counts (header, menu, hero pill); panels further down go nearly solid — the same look
   on a small screen, and scrolling stays smooth */
@media (max-width: 639px) {
  .section .glass, .section .glass-dark { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--c-navy-ink) 94%, transparent); }
  .section-light .glass { background: color-mix(in srgb, var(--c-white) 94%, transparent); }
}
.eyebrow { display: inline-flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); color: var(--gold-2); font-family: var(--font-text); font-size: var(--t-caps); font-weight: var(--fw-semibold);
  letter-spacing: var(--track-caps); text-transform: uppercase; }
html[dir="rtl"] .eyebrow { text-transform: none; font-size: var(--t-small); }
.eyebrow-line::before { content: ""; width: 40px; height: 1px; background: currentColor; }

/* =====================================================================================================================
   2 · COMPONENTS
   ===================================================================================================================== */

/* ---- Buttons: gold (metallic, a sheen passes on hover), ghost (hairline), glass. Magnetic on computers (site.js sets
   --mx/--my). Every button is at least 44px tall. ---- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 46px; padding: 0 var(--s-6);
  border-radius: var(--r-pill); border: 1px solid transparent; font-family: var(--font-text); font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: .01em; line-height: 1.2; white-space: nowrap;
  text-decoration: none; text-align: center; cursor: pointer; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform var(--dur-md) var(--ease-spring), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur-md) var(--ease-out); }
.btn:active { transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + 1px), 0); }
.btn .icon { width: 18px; height: 18px; }
.btn-sm { min-height: 44px; padding: 0 var(--s-4); font-size: var(--t-small); }
.btn-lg { min-height: 54px; padding: 0 var(--s-7); font-size: var(--t-body); }
.btn-gold { background: var(--metal); background-size: 180% 100%; background-position: 0 0; border-color: color-mix(in srgb, var(--c-gold-soft) 60%, transparent); color: var(--c-navy-deep);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 45%, transparent), 0 10px 30px -12px color-mix(in srgb, var(--c-gold) 70%, transparent); }
.btn-gold::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--c-white) 55%, transparent) 50%, transparent 65%);
  transform: translateX(-110%); transition: transform var(--dur-lg) var(--ease-out-expo); }
.btn-gold:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 45%, transparent), var(--sh-gold); }
.btn-gold:hover::after { transform: translateX(110%); }
html[dir="rtl"] .btn-gold::after { scale: -1 1; }
.btn-ghost, .btn-line, .btn-outline { background: transparent; border-color: color-mix(in srgb, var(--c-ivory) 30%, transparent); color: var(--text); }
.btn-ghost:hover, .btn-line:hover, .btn-outline:hover { background: color-mix(in srgb, var(--c-ivory) 8%, transparent); border-color: var(--gold-2); color: var(--gold-soft); }
.btn-glass { background: var(--glass-bg); border-color: var(--glass-edge); color: var(--text); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.btn-glass:hover { border-color: var(--glass-edge-hot); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; color: var(--gold-soft); font-weight: var(--fw-medium); text-decoration: none; }
.link-arrow > span[aria-hidden] { transition: transform var(--dur-md) var(--ease-out-expo); }
.link-arrow:hover > span[aria-hidden] { transform: translateX(5px); }
html[dir="rtl"] .link-arrow:hover > span[aria-hidden] { transform: translateX(-5px); }
html[dir="rtl"] .link-arrow.back:hover > span[aria-hidden] { transform: translateX(5px); }
.link-arrow.back:hover > span[aria-hidden] { transform: translateX(-5px); }
.link-arrow:hover { color: var(--text); }

/* ---- Badges and medals (gold, silver, bronze from the brand gold, ivory and soft tones; a sheen passes once) ---- */
.badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--s-3); border-radius: var(--r-pill); font-size: var(--t-caps); font-weight: var(--fw-semibold); letter-spacing: .04em;
  background: color-mix(in srgb, var(--c-navy-deep) 82%, transparent); border: 1px solid currentColor; }
.badge-active { color: var(--ok-dark); }
.badge-sold { color: var(--soft); }
.medal { position: relative; overflow: hidden; width: 32px; height: 32px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px; font-weight: var(--fw-bold); line-height: 1;
  color: var(--c-navy-deep); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--c-navy-deep) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c-white) 50%, transparent); }
.medal.sm { width: 22px; height: 22px; font-size: 11px; vertical-align: middle; }
.medal-gold { background: linear-gradient(145deg, var(--c-gold-soft), var(--c-gold-2) 45%, var(--c-gold)); }
.medal-silver { background: linear-gradient(145deg, var(--c-white), var(--c-soft)); }
.medal-bronze { background: linear-gradient(145deg, color-mix(in srgb, var(--c-gold-soft) 60%, var(--c-bad)), color-mix(in srgb, var(--c-gold) 65%, var(--c-bad))); }
.medal-plain { background: var(--c-navy-2); color: var(--text); }
.medal::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--c-white) 70%, transparent) 50%, transparent 60%); transform: translateX(-100%); pointer-events: none; }
.medal-pill { display: inline-flex; align-items: center; gap: var(--s-2); padding-block: 5px; padding-inline: 5px var(--s-4); border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--glass-edge); font-size: var(--t-small); }
.medal-pill .medal { width: 26px; height: 26px; font-size: var(--t-caps); }
.medal-summary { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-5); }

/* ---- Filter chips (horse categories, seasons): a pill slides under the chosen one (site.js adds it) ---- */
.cat-tabs { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-2); }
.cat-tab { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding-block: 0; padding-inline: var(--s-4) 6px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--c-ivory) 18%, transparent);
  color: var(--text); font-size: 15px; font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur-md) var(--ease-out); }
.cat-tab .n { min-width: 30px; height: 30px; padding: 0 var(--s-2); border-radius: var(--r-pill); display: inline-grid; place-items: center; background: var(--c-navy); color: var(--gold-soft); font-size: 13px;
  transition: background-color var(--dur-md) var(--ease-out), color var(--dur-md) var(--ease-out); }
.cat-tab:hover { border-color: var(--gold-2); }
.cat-tab.on { background: var(--text); border-color: var(--text); color: var(--c-navy-deep); }
.cat-tab.on .n { background: var(--c-navy-deep); color: var(--gold-2); }
.cat-tabs.has-pill .cat-tab.on { background: transparent; border-color: transparent; }
.cat-pill { position: absolute; z-index: -1; top: 0; left: 0; height: 44px; border-radius: var(--r-pill); background: var(--text); pointer-events: none;
  transition: transform var(--dur-md) var(--ease-out-expo), width var(--dur-md) var(--ease-out-expo); }
@media (max-width: 639px) {
  .cat-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) var(--s-2); }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tab { flex: none; }
}

/* ---- Horse card: a glass "collector card". Photo zoom, a gold rim, a spotlight that follows the pointer, a slight
   tilt, and on computers the pedigree line slides in. On touch everything is simply shown. ---- */
.hgrid, .news-grid, .gallery, .medal-wall, .champ-grid, .pillars, .experts { --cols: 1; display: flex; flex-wrap: wrap; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
:is(.hgrid, .news-grid, .gallery, .medal-wall, .champ-grid, .pillars, .experts) > * { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
@media (min-width: 520px) { .hgrid, .gallery, .experts { --cols: 2; } }
@media (min-width: 640px) { .news-grid, .medal-wall, .champ-grid { --cols: 2; } }
@media (min-width: 860px) { .hgrid, .gallery, .experts, .pillars { --cols: 3; } }
@media (min-width: 1040px) { .news-grid, .medal-wall, .champ-grid { --cols: 3; } }
@media (min-width: 1180px) { .hgrid, .gallery, .experts, .medal-wall { --cols: 4; } }
.hcard { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); color: var(--text); text-decoration: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-ivory) 7%, transparent), color-mix(in srgb, var(--c-ivory) 3%, transparent)); border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-highlight), var(--sh-2); transform: perspective(900px) translate3d(0, var(--lift, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--dur-md) var(--ease-out-expo), border-color var(--dur) var(--ease-out), box-shadow var(--dur-md) var(--ease-out); }
.hcard::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--dur-md) var(--ease-out);
  background: radial-gradient(320px circle at var(--px, 50%) var(--py, 0%), color-mix(in srgb, var(--c-gold-soft) 16%, transparent), transparent 60%); }
.hcard:hover { --lift: -6px; border-color: var(--glass-edge-hot); box-shadow: var(--glass-highlight), var(--sh-gold), var(--sh-3); }
.hcard:hover::after { opacity: 1; }
.hcard:focus-visible { outline-offset: 4px; border-color: var(--gold-2); }
.hcard[hidden] { display: none; }
.hcard-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-navy); }
.hcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-xl) var(--ease-out-expo), opacity var(--dur-lg) var(--ease-out); }
.hcard:hover .hcard-media img { transform: scale(1.08); }
.hcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--c-navy-deep) 55%, transparent)); pointer-events: none; }
.hcard-media .badge { position: absolute; z-index: 1; top: var(--s-3); inset-inline-start: var(--s-3); }
.hcard-medals { position: absolute; z-index: 1; top: var(--s-3); inset-inline-end: var(--s-3); display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 10px;
  border-radius: var(--r-pill); background: var(--metal); color: var(--c-navy-deep); font-size: 13px; font-weight: var(--fw-bold); box-shadow: var(--sh-1); }
.hcard-body { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: var(--s-4) var(--s-5) var(--s-5); }
.hcard-name { font-family: var(--font-display); font-size: var(--t-h4); line-height: 1.2; overflow-wrap: anywhere; transition: color var(--dur) var(--ease-out); }
html[dir="rtl"] .hcard-name { font-weight: var(--fw-bold); }
.hcard:hover .hcard-name { color: var(--gold-soft); }
.hcard-other { color: var(--soft); font-size: 15px; line-height: 1.4; }
.hcard-other[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--font-text); }
.hcard-other[lang="en"] { font-family: "Marcellus", var(--font-display); font-size: var(--t-small); }
.hcard-parents { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--hairline); color: var(--soft); font-size: var(--t-small); line-height: 1.45; }
.hcard-meta { margin-top: auto; padding-top: var(--s-3); color: var(--gold-2); font-size: 13px; font-weight: var(--fw-medium); letter-spacing: .05em; }
html[dir="rtl"] .hcard-meta { letter-spacing: 0; }
@media (hover: hover) and (pointer: fine) {
  .hcard-parents { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out-expo); }
  .hcard:is(:hover, :focus-visible) .hcard-parents { opacity: 1; transform: none; }
}
/* No photo yet: the SK mark on navy with the horse's initials — a brand tile, not a missing picture */
.hcard-ph { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 30%, var(--c-navy-2) 0%, var(--c-navy) 50%, var(--c-navy-ink) 100%); }
.ph-mark { position: absolute; top: 50%; inset-inline-start: 50%; height: 80%; aspect-ratio: 262 / 408; transform: translate(-50%, -50%);
  background: linear-gradient(160deg, var(--c-gold-soft), var(--c-gold-2) 70%); -webkit-mask: var(--mark-img) center / contain no-repeat; mask: var(--mark-img) center / contain no-repeat; opacity: .18; }
html[dir="rtl"] .ph-mark { transform: translate(50%, -50%); }
.ph-initials { position: relative; font-family: "Marcellus", var(--font-display); font-size: clamp(40px, 5vw, 60px); letter-spacing: .1em; color: var(--gold-soft); }
.hcard-ph.big .ph-initials { font-size: clamp(64px, 9vw, 120px); }
/* image loading: a soft shimmer holds the place, then the photo fades in (html.js only, so images never hide without JS) */
.js :is(.hcard-media, .tl-photo, .news-media, .gallery a, .pgallery-main, .featured-media)::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--c-ivory) 6%, transparent) 50%, transparent 70%); background-size: 250% 100%; animation: skeleton 1.6s linear infinite; }
.js :is(.hcard-media, .tl-photo, .news-media, .gallery a, .pgallery-main, .featured-media).img-done::before { content: none; }
.js :is(.hcard-media, .tl-photo, .news-media, .gallery a, .featured-media) img:not(.is-in) { opacity: 0; }
.js :is(.hcard-media, .tl-photo, .news-media, .gallery a, .featured-media) img { position: relative; z-index: 1; }
@keyframes skeleton { from { background-position: 150% 0; } to { background-position: -100% 0; } }

/* ---- Group headings (a category, a season) ---- */
.horse-group { margin-top: var(--s-8); }
.horse-group[hidden], .result-year[hidden] { display: none; }
.group-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.group-head h3 { margin: 0; font-size: var(--t-h3); }
.group-n { min-width: 34px; height: 34px; padding: 0 var(--s-2); display: inline-grid; place-items: center; border: 1px solid var(--glass-edge); border-radius: var(--r-pill); color: var(--gold-2); font-size: var(--t-small); }
.group-rule { flex: 1; height: 1px; background: linear-gradient(to right, var(--glass-edge-hot), transparent); }
html[dir="rtl"] .group-rule { background: linear-gradient(to left, var(--glass-edge-hot), transparent); }
/* phones: each category of the homepage is one row to swipe through (the next card peeks in) */
@media (max-width: 639px) {
  .rows-on-phone:not(.filtered) .hgrid { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) var(--s-4); scroll-padding-inline: var(--gutter); }
  .rows-on-phone:not(.filtered) .hgrid::-webkit-scrollbar { display: none; }
  .rows-on-phone:not(.filtered) .hgrid > .hcard { flex: 0 0 78%; scroll-snap-align: start; }
  .rows-on-phone:not(.filtered) .hgrid > .hcard:only-child { flex-basis: 100%; }
}

/* ---- News card: editorial; the photo slowly zooms, the title takes the gold ---- */
.news-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); color: var(--text); text-decoration: none;
  background: var(--glass-bg); border: 1px solid var(--glass-edge); box-shadow: var(--glass-highlight), var(--sh-2); transition: transform var(--dur-md) var(--ease-out-expo), border-color var(--dur) var(--ease-out); }
.news-card:hover { transform: translateY(-5px); border-color: var(--glass-edge-hot); }
.news-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-navy); }
.news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-xl) var(--ease-out-expo); }
.news-card:hover .news-media img { transform: scale(1.06); }
.news-media .ph-mark { height: 70%; }
.news-body { flex: 1; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); }
.news-body time { color: var(--gold-2); font-size: 13px; font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; }
html[dir="rtl"] .news-body time { letter-spacing: 0; text-transform: none; }
.news-title { font-family: var(--font-display); font-size: var(--t-h4); line-height: 1.2; transition: color var(--dur) var(--ease-out); }
html[dir="rtl"] .news-title { font-weight: var(--fw-bold); }
.news-card:hover .news-title { color: var(--gold-soft); }
.news-sum { color: var(--soft); font-size: 15px; }

/* ---- Medal card (homepage, profile, champions) ---- */
.medal-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); color: inherit; text-decoration: none;
  background: var(--glass-bg); border: 1px solid var(--glass-edge); box-shadow: var(--glass-highlight); transition: transform var(--dur-md) var(--ease-out-expo), border-color var(--dur) var(--ease-out); }
a.medal-card:hover { transform: translateY(-4px); border-color: var(--glass-edge-hot); }
.medal-card strong { display: block; font-weight: var(--fw-semibold); line-height: 1.35; }
.medal-card small { display: block; color: var(--soft); font-size: var(--t-small); }
.medal-card small.where { font-size: 13px; opacity: .85; }

/* ---- Forms: a frosted panel; floating labels (the field first, then its label: the label sits inside the empty
   field and lifts on focus or once filled — always visible, never only a placeholder); a gold focus glow ---- */
.form { position: relative; display: grid; gap: var(--s-4); padding: clamp(var(--s-5), 3vw, var(--s-7)); border-radius: var(--r-xl); background: var(--glass-bg); border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-highlight), var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .form { background: var(--glass-solid); } }
.form-title { margin: 0 0 var(--s-2); font-size: var(--t-h3); }
.form label { display: grid; gap: 6px; color: var(--soft); font-size: var(--t-small); font-weight: var(--fw-medium); }
.form input, .form select, .form textarea { width: 100%; min-height: 48px; padding: 12px 16px; border: 1px solid var(--glass-edge); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-navy-deep) 55%, transparent); color: var(--text); font: inherit; font-size: var(--t-body); font-weight: var(--fw-regular);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur-md) var(--ease-out), background-color var(--dur) var(--ease-out); }
.form textarea { min-height: 140px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--soft); opacity: .7; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 0; border-color: var(--gold-2); background: color-mix(in srgb, var(--c-navy-deep) 75%, transparent);
  box-shadow: var(--focus-ring), 0 0 30px -6px color-mix(in srgb, var(--c-gold-2) 45%, transparent); }
.form .fl { position: relative; display: block; }
.form .fl input, .form .fl textarea { min-height: 58px; padding: 24px 16px 8px; }
.form .fl > span { position: absolute; inset-inline-start: 17px; top: 19px; max-width: calc(100% - 34px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
  color: var(--soft); font-size: var(--t-body); font-weight: var(--fw-regular); line-height: 1.2; transform-origin: 0 0; transition: transform var(--dur-sm) var(--ease-out-expo), color var(--dur-sm) var(--ease-out); }
html[dir="rtl"] .form .fl > span { transform-origin: 100% 0; }
.form .fl :is(input, textarea):is(:focus, :not(:placeholder-shown)) + span { transform: translateY(-11px) scale(.76); color: var(--gold-soft); }
.form .fl :is(input, textarea)::placeholder { color: transparent; }
.form .btn { justify-self: start; }
.form-note { margin: 0; color: var(--soft); font-size: 13px; }
.form .row2 { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .form .row2 { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; inset-inline-start: -9999px; }
/* the native select (before dropdown.js enhances it): its arrow drawn in --c-soft */
select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c3cbe0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 15px; }
html[dir="rtl"] select { background-position: left 14px center; }
select::-ms-expand { display: none; }
/* the shared custom dropdown (dropdown.js, the same component as the staff system) in the website's glass */
.sel { position: relative; display: inline-block; width: 100%; }
.sel-btn { position: relative; width: 100%; min-height: 48px; padding: 12px 16px; padding-inline-end: 40px; display: flex; align-items: center; border: 1px solid var(--glass-edge); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-navy-deep) 55%, transparent); color: var(--text); font: inherit; font-size: var(--t-body); text-align: start; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-btn.dd-placeholder { color: var(--soft); }
.sel-btn:disabled { opacity: .6; cursor: default; }
.sel-btn-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-btn::after { content: ""; position: absolute; inset-inline-end: 14px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; background: var(--soft); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out); }
.sel.open .sel-btn::after { transform: rotate(180deg); }
.sel-btn:focus { outline: none; }
.sel-btn:focus-visible { border-color: var(--gold-2); box-shadow: var(--focus-ring); }
.sel-panel { position: absolute; z-index: var(--z-dropdown); inset-inline-start: 0; top: calc(100% + 6px); min-width: 100%; width: max-content; max-width: min(360px, 90vw); padding: 6px;
  background: color-mix(in srgb, var(--c-navy-ink) 96%, transparent); border: 1px solid var(--glass-edge); border-radius: var(--r-md); box-shadow: var(--sh-3); opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.sel.open .sel-panel, .sel-panel.open { opacity: 1; transform: none; }
.sel-panel[hidden] { display: none; }
.sel-search { padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--edge); }
.sel-search input { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--edge-2); border-radius: var(--r-sm); background: var(--bg); color: var(--text); font: inherit; font-size: var(--t-body); }
.sel-list { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0; list-style: none; text-align: start; }
.sel-list li { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border-radius: var(--r-sm); background: transparent; color: var(--text); font-size: 15px; cursor: pointer; }
.sel-list li:hover, .sel-list li.active { background: var(--c-navy); }
.sel-list li[aria-selected="true"] { background: var(--gold-2); color: var(--c-navy-deep); font-weight: var(--fw-semibold); }
.sel-list li[aria-selected="true"]:hover, .sel-list li[aria-selected="true"].active { background: var(--gold-soft); }
.sel-list li.empty-opt { color: var(--soft); cursor: default; }
.dd-check { display: inline-flex; width: 14px; flex: none; font-size: var(--t-caps); }
.field-invalid .sel-btn { border-color: var(--bad-dark); }
.dd-sheet-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); background: color-mix(in srgb, var(--c-navy-deep) 60%, transparent); }
.dd-sheet-backdrop[hidden] { display: none; }
body.dd-sheet-open { overflow: hidden; }
@media (max-width: 640px) {
  .sel-panel { position: fixed; z-index: calc(var(--z-overlay) + 1); inset-inline: 0; bottom: 0; top: auto !important; width: 100%; max-width: none; max-height: 70vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0; transform: none; padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* ---- Notices (after sending a form, page messages): they arrive with a small rise, an icon drawn in their tone ---- */
.notice { position: relative; display: flex; align-items: flex-start; gap: var(--s-3); margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1px solid; font-size: 15px; }
.notice::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 1.5px solid currentColor;
  background: currentColor; -webkit-mask: var(--notice-icon) center / 14px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--notice-icon) center / 14px no-repeat exclude, linear-gradient(#000 0 0); }
.notice-success { --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
  color: var(--ok-dark); border-color: color-mix(in srgb, var(--c-ok) 70%, transparent); background: color-mix(in srgb, var(--c-ok) 16%, transparent); }
.notice-error { --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18v.5'/%3E%3C/svg%3E");
  color: var(--bad-dark); border-color: color-mix(in srgb, var(--c-bad) 70%, transparent); background: color-mix(in srgb, var(--c-bad) 16%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .notice { animation: rise-in var(--dur-lg) var(--ease-out-expo) both; }
  .notice-error { animation: rise-in var(--dur-lg) var(--ease-out-expo) both, nudge 420ms var(--ease-out) 250ms; }
}
@keyframes nudge { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.flash-box { display: grid; gap: var(--s-2); padding-block: calc(var(--hdr-h) + var(--s-4)) var(--s-4); }
.empty-note { padding: var(--s-8) var(--s-5); text-align: center; color: var(--soft); border-radius: var(--r-xl); background: var(--glass-bg); border: 1px dashed var(--glass-edge); }

/* ---- Breadcrumbs ---- */
.crumbs { margin-bottom: var(--s-5); font-size: var(--t-small); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--gold-soft); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 85% / 0 1px no-repeat;
  transition: background-size var(--dur-md) var(--ease-out-expo); }
html[dir="rtl"] .crumbs a { background-position: 100% 85%; }
.crumbs a:hover { background-size: 100% 1px; }
.crumbs [aria-current] { color: var(--soft); overflow-wrap: anywhere; }
.crumbs .sep { color: var(--edge-2); }
@media (max-width: 639px) { .crumbs a { min-height: 44px; } }

/* ---- Facts (a horse's details, a checked document) ---- */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 var(--s-5); overflow: hidden; border-radius: var(--r-lg); background: var(--hairline); border: 1px solid var(--glass-edge); }
.facts div { min-width: 0; padding: var(--s-3) var(--s-4); background: color-mix(in srgb, var(--c-navy-ink) 92%, transparent); }
.facts div:last-child:nth-child(odd) { grid-column: span 2; }
.facts dt { color: var(--gold-2); font-size: var(--t-caps); font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; }
html[dir="rtl"] .facts dt { letter-spacing: 0; text-transform: none; font-size: 13px; }
.facts dd { margin: 2px 0 0; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.facts dd a { color: var(--gold-soft); text-underline-offset: 3px; }

/* ---- Results table (a profile with classes): a list of cards on a phone ---- */
.table-scroll { overflow-x: auto; }
.results-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.results-table th, .results-table td { padding: var(--s-3) var(--s-4); text-align: start; vertical-align: middle; border-bottom: 1px solid var(--hairline); }
.results-table th { color: var(--gold-2); font-size: var(--t-caps); font-weight: var(--fw-semibold); letter-spacing: .12em; text-transform: uppercase; }
html[dir="rtl"] .results-table th { letter-spacing: 0; text-transform: none; font-size: 13px; }
.results-table tbody tr { transition: background-color var(--dur) var(--ease-out); }
.results-table tbody tr:hover { background: var(--glass-bg); }
.results-table .score { color: var(--soft); margin-inline-start: 4px; }
@media (max-width: 639px) {
  .results-table thead { display: none; }
  .results-table, .results-table tbody, .results-table tr, .results-table td { display: block; width: 100%; }
  .results-table tr { margin-bottom: var(--s-2); padding: 6px 0; border-radius: var(--r-md); background: var(--glass-bg); border: 1px solid var(--glass-edge); }
  .results-table td { display: flex; justify-content: space-between; gap: var(--s-3); padding: 5px var(--s-4); border: 0; text-align: end; }
  .results-table td::before { content: attr(data-label); flex: none; color: var(--gold-2); font-size: var(--t-caps); text-align: start; }
}

/* ---- Pedigree tree: up to 5 generations; gold connectors join each horse to its parents and draw in once in view.
   On narrow screens the tree scrolls inside its own frame. ---- */
.ped-hint { display: none; margin: calc(-1 * var(--s-3)) 0 var(--s-3); color: var(--soft); font-size: var(--t-small); }
@media (max-width: 999px) { .ped-hint { display: block; } }
.ped5 { overflow-x: auto; overscroll-behavior-x: contain; padding: var(--s-3); border-radius: var(--r-xl); background: var(--glass-bg); border: 1px solid var(--glass-edge); box-shadow: var(--glass-highlight); }
.ped5 table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 22px 6px; }
.ped5.gens-4 table { min-width: 920px; }
.ped5.gens-5 table { min-width: 1060px; border-spacing: 22px 3px; }
.ped5 td { position: relative; vertical-align: middle; }
.ped-box { position: relative; min-height: 50px; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: color-mix(in srgb, var(--c-navy-deep) 70%, transparent); border: 1px solid var(--glass-edge);
  border-inline-start: 3px solid var(--soft); transition: border-color var(--dur) var(--ease-out), transform var(--dur-md) var(--ease-out-expo); }
.ped-box:hover { transform: translateY(-2px); border-color: var(--glass-edge-hot); }
.ped-box.dam { border-inline-start-color: var(--gold-2); }
.ped-box a { color: var(--text); font-weight: var(--fw-medium); text-decoration: none; }
.ped-box a:hover { color: var(--gold-soft); text-decoration: underline; }
.ped-box small { display: block; color: var(--soft); font-size: var(--t-caps); }
/* the connector from each box back to its child (into the gap before it) */
.ped5 td:not(.g1) .ped-box::before { content: ""; position: absolute; top: 50%; inset-inline-end: 100%; width: 23px; height: 1px; margin-inline-end: 1px; background: var(--glass-edge-hot);
  transform-origin: 100% 50%; }
html[dir="rtl"] .ped5 td:not(.g1) .ped-box::before { transform-origin: 0 50%; }
.ped5 td.g4 .ped-box, .ped5 td.g5 .ped-box { min-height: 0; padding: 4px 10px; font-size: 13px; line-height: 1.3; }
.ped5 td.g4 .ped-box small, .ped5 td.g5 .ped-box small { display: none; }
.reveal-pre .ped5 .ped-box { opacity: 0; transform: translateX(-10px); }
html[dir="rtl"] .reveal-pre .ped5 .ped-box { transform: translateX(10px); }
.reveal-pre .ped5 td:not(.g1) .ped-box::before { transform: scaleX(0); }
.reveal-pre.in .ped5 .ped-box { opacity: 1; transform: none; transition: opacity var(--dur-lg) var(--ease-out), transform var(--dur-lg) var(--ease-out-expo); }
.reveal-pre.in .ped5 td:not(.g1) .ped-box::before { transform: none; transition: transform var(--dur-lg) var(--ease-out-expo); }
.reveal-pre.in .ped5 td.g2 .ped-box, .reveal-pre.in .ped5 td.g2 .ped-box::before { transition-delay: 150ms; }
.reveal-pre.in .ped5 td.g3 .ped-box, .reveal-pre.in .ped5 td.g3 .ped-box::before { transition-delay: 300ms; }
.reveal-pre.in .ped5 td.g4 .ped-box, .reveal-pre.in .ped5 td.g4 .ped-box::before { transition-delay: 450ms; }
.reveal-pre.in .ped5 td.g5 .ped-box, .reveal-pre.in .ped5 td.g5 .ped-box::before { transition-delay: 600ms; }

/* ---- Video, share menu ---- */
.video-embed { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-xl); background: var(--c-navy-deep); border: 1px solid var(--glass-edge); box-shadow: var(--sh-3); }
.video-embed iframe, .video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.share { position: relative; }
.share-menu { position: absolute; z-index: var(--z-dropdown); top: calc(100% + var(--s-2)); inset-inline-start: 0; min-width: 230px; display: grid; gap: 2px; padding: 6px;
  background: color-mix(in srgb, var(--c-navy-ink) 92%, transparent); border: 1px solid var(--glass-edge); border-radius: var(--r-md); box-shadow: var(--sh-3);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.share-menu[hidden] { display: none; }
.share-menu.flip { inset-inline-start: auto; inset-inline-end: 0; }
.share-menu a, .share-menu button { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--text); font: inherit; font-size: 15px; text-align: start; text-decoration: none; cursor: pointer; }
.share-menu a:hover, .share-menu button:hover, .share-menu a:focus-visible, .share-menu button:focus-visible { background: var(--c-navy); outline: none; }
.share-menu .icon { width: 18px; height: 18px; color: var(--gold-2); }
.share-menu button.done { color: var(--ok-dark); }

/* ---- Photo viewer (site.js): frosted navy veil, the photo settles in; keyboard, swipe and captions ---- */
.lb { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: color-mix(in srgb, var(--c-navy-deep) 96%, transparent);
  opacity: 0; transition: opacity var(--dur-md) var(--ease-out); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lb { background: color-mix(in srgb, var(--c-navy-deep) 82%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
}
.lb.open { opacity: 1; }
.lb[hidden] { display: none; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); padding-top: calc(var(--s-3) + env(safe-area-inset-top)); color: var(--soft); font-size: var(--t-small); }
.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 var(--s-4); }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-md); box-shadow: var(--sh-3); user-select: none; -webkit-user-drag: none; }
@media (prefers-reduced-motion: no-preference) { .lb.open .lb-stage img { animation: lb-in var(--dur-md) var(--ease-out-expo) both; } }
@keyframes lb-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.lb-cap { margin: 0; padding: var(--s-3) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom)); text-align: center; color: var(--text); font-size: 15px; }
.lb-cap a { color: var(--gold-soft); text-underline-offset: 4px; }
.lb-btn { display: inline-grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 1px solid var(--glass-edge); border-radius: 50%; background: var(--glass-bg); box-shadow: var(--glass-highlight);
  color: var(--text); font-size: 26px; line-height: 1; cursor: pointer; transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.lb-btn:hover { border-color: var(--glass-edge-hot); background: var(--c-navy); }
.lb-btn .icon { width: 22px; height: 22px; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { inset-inline-start: var(--s-4); }
.lb-next { inset-inline-end: var(--s-4); }
.lb-prev[hidden], .lb-next[hidden] { display: none; }
@media (max-width: 639px) { .lb-prev, .lb-next { top: auto; bottom: var(--s-2); transform: none; } .lb-stage { padding-bottom: 66px; } }
body.lb-open { overflow: hidden; }

/* ---- First-visit preloader: the brand's eight-pointed star is drawn in gold, the SK mark appears inside it, then two
   curtains part onto the page (which loaded underneath all along). Once per session, ~1.3s, skipped by a click or any
   key; never with reduced motion or without JavaScript (layouts/site.php adds html.intro only then). ---- */
.preloader { display: none; }
.intro .preloader { position: fixed; inset: 0; z-index: calc(var(--z-skip) + 10); display: grid; place-items: center; cursor: pointer; }
.intro .preloader::before, .intro .preloader::after { content: ""; position: absolute; inset-inline: 0; height: 50.5%; background: var(--c-navy-deep); transition: transform 900ms var(--ease-in-out-quint); }
.intro .preloader::before { top: 0; }
.intro .preloader::after { bottom: 0; }
.preloader-mark { position: relative; z-index: 1; width: 132px; height: 132px; display: grid; place-items: center; transition: opacity 400ms var(--ease-out), transform 900ms var(--ease-in-out-quint); }
.preloader-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.preloader-mark path { fill: none; stroke: url(#pl-gold); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1s var(--ease-in-out-quint) forwards; }
.preloader-mark path + path { animation-delay: 150ms; }
.preloader-mark img { width: 40px; height: auto; opacity: 0; transform: scale(.9); animation: rise-in 600ms var(--ease-out-expo) 650ms forwards; }
.preloader[hidden] { display: none !important; } /* gone once the curtains have parted: nothing left over the page */
.intro.intro-out .preloader::before { transform: translateY(-101%); }
.intro.intro-out .preloader::after { transform: translateY(101%); }
.intro.intro-out .preloader-mark { opacity: 0; transform: scale(1.15); }



/* =====================================================================================================================
   3 · LAYOUT
   ===================================================================================================================== */

/* ---- Header: on every page it starts transparent over the dark hero, then lifts into a floating glass capsule;
   scrolling down hides it, scrolling up brings it back (site.js); never while it holds the keyboard focus ---- */
.site-header { position: sticky; top: 0; z-index: var(--z-header); height: var(--hdr-h); margin-bottom: calc(-1 * var(--hdr-h));
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-navy-deep) 72%, transparent), transparent); transition: transform var(--dur-md) var(--ease-out-expo); }
.site-header.scrolled { background: transparent; }
.site-header.scrolled .nav-bar { width: calc(100% - 2 * var(--s-3)); max-width: calc(var(--wrap) - var(--s-5)); height: calc(100% - var(--s-4)); margin-top: var(--s-2);
  padding-inline: var(--s-4); border: 1px solid var(--glass-edge); border-radius: var(--r-pill); background: var(--glass-bg-strong);
  box-shadow: var(--glass-highlight), var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header.scrolled .nav-bar { background: var(--c-navy-ink); } }
.site-header.away { transform: translateY(calc(-100% - var(--s-2))); }
.site-header.away:focus-within { transform: none; }
.nav-bar { display: flex; align-items: center; gap: var(--s-3); height: 100%; transition: background-color var(--dur-md) var(--ease-out), border-color var(--dur-md) var(--ease-out); }
.logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.logo img { width: auto; height: 40px; }
@media (min-width: 1024px) { .logo img { height: 44px; } }
@media (prefers-reduced-motion: no-preference) { .site-header .logo, .site-header .nav-tools, .main-nav a { animation: rise-in var(--dur-xl) var(--ease-out-expo) both; } }
.main-nav { display: none; align-items: center; gap: 2px; margin-inline: auto; }
.main-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); color: var(--text); font-size: 15px; font-weight: var(--fw-medium);
  text-decoration: none; white-space: nowrap; transition: color var(--dur) var(--ease-out); }
.main-nav a:nth-child(2) { animation-delay: 60ms; } .main-nav a:nth-child(3) { animation-delay: 120ms; } .main-nav a:nth-child(4) { animation-delay: 180ms; }
.main-nav a:nth-child(5) { animation-delay: 240ms; } .main-nav a:nth-child(6) { animation-delay: 300ms; }
/* the underline grows from the reading start and leaves towards the end */
.main-nav a::after { content: ""; position: absolute; inset-inline: var(--s-3); bottom: 8px; height: 1px; background: var(--metal-line); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--dur-md) var(--ease-out-expo); }
html[dir="rtl"] .main-nav a::after { transform-origin: 0 50%; }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; }
html[dir="rtl"] .main-nav a:hover::after, html[dir="rtl"] .main-nav a[aria-current="page"]::after { transform-origin: 100% 50%; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--gold-soft); }
.nav-tools { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
.lang-switch { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-pill); color: var(--text); font-size: var(--t-small);
  font-weight: var(--fw-medium); text-decoration: none; transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.lang-switch .icon { width: 18px; height: 18px; color: var(--gold-2); }
.lang-switch:hover { color: var(--gold-soft); background: color-mix(in srgb, var(--c-ivory) 7%, transparent); }
.nav-tools .lang-switch, .nav-staff { display: none; }
.nav-staff .icon { width: 16px; height: 16px; }
.nav-enquire { padding-inline: var(--s-5); }
.menu-btn, .menu-close { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--glass-edge); border-radius: 50%; background: var(--glass-bg);
  color: var(--text); cursor: pointer; transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.menu-btn:hover, .menu-close:hover { border-color: var(--gold-2); }
.menu-btn .icon, .menu-close .icon { width: 22px; height: 22px; }
@media (max-width: 359px) { .nav-enquire { display: none; } }
@media (min-width: 768px) { .nav-tools .lang-switch { display: inline-flex; } }
@media (min-width: 900px) { .nav-staff { display: inline-flex; } }
@media (min-width: 1200px) { .main-nav { display: flex; } .nav-tools { margin-inline-start: 0; } .menu-btn { display: none; } }

/* ---- Phone / tablet menu: a full-screen glass room; the links rise in one after another ---- */
.nav-overlay { position: fixed; inset: 0; z-index: var(--z-drawer); background: color-mix(in srgb, var(--c-navy-deep) 60%, transparent); opacity: 0; transition: opacity var(--dur-md) var(--ease-out); }
.nav-overlay.open { opacity: 1; }
.nav-panel { position: fixed; z-index: calc(var(--z-drawer) + 1); inset: 0; display: flex; flex-direction: column; gap: var(--s-6);
  padding: var(--s-4) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(90% 60% at 85% 0%, color-mix(in srgb, var(--c-navy-2) 55%, transparent), transparent), color-mix(in srgb, var(--c-navy-deep) 86%, transparent);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); opacity: 0; transform: scale(1.02); transition: opacity var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out-expo); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav-panel { background: var(--c-navy-deep); } }
.nav-panel.open { opacity: 1; transform: none; }
.nav-panel[hidden], .nav-overlay[hidden] { display: none; }
.nav-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold-2); opacity: .05; -webkit-mask: var(--pattern) 0 0 / 72px 72px repeat; mask: var(--pattern) 0 0 / 72px 72px repeat; pointer-events: none; }
.nav-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 52px; }
.nav-panel-head img { height: 38px; width: auto; }
.nav-panel-links { display: grid; margin-block: auto; }
.nav-panel-links a { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding-block: var(--s-2); border-bottom: 1px solid var(--hairline); color: var(--text);
  font-family: var(--font-display); font-size: clamp(30px, 7.5vw, 46px); line-height: 1.1; text-decoration: none; opacity: 0; transform: translateY(18px);
  transition: color var(--dur) var(--ease-out), opacity var(--dur-lg) var(--ease-out), transform var(--dur-lg) var(--ease-out-expo); }
html[dir="rtl"] .nav-panel-links a { font-weight: var(--fw-bold); }
.nav-panel-links a::after { content: "→"; font-family: var(--font-text); font-size: 18px; color: var(--gold-2); opacity: 0; transform: translateX(-8px); transition: opacity var(--dur) var(--ease-out), transform var(--dur-md) var(--ease-out-expo); }
html[dir="rtl"] .nav-panel-links a::after { content: "←"; transform: translateX(8px); }
.nav-panel-links a:hover::after, .nav-panel-links a[aria-current="page"]::after { opacity: 1; transform: none; }
.nav-panel.open .nav-panel-links a { opacity: 1; transform: none; }
.nav-panel.open .nav-panel-links a:nth-child(1) { transition-delay: 80ms; } .nav-panel.open .nav-panel-links a:nth-child(2) { transition-delay: 130ms; }
.nav-panel.open .nav-panel-links a:nth-child(3) { transition-delay: 180ms; } .nav-panel.open .nav-panel-links a:nth-child(4) { transition-delay: 230ms; }
.nav-panel.open .nav-panel-links a:nth-child(5) { transition-delay: 280ms; } .nav-panel.open .nav-panel-links a:nth-child(6) { transition-delay: 330ms; }
.nav-panel-links a:hover, .nav-panel-links a[aria-current="page"] { color: var(--gold-soft); }
.nav-panel-actions { display: grid; gap: var(--s-3); }
.nav-panel-actions .btn { min-height: 52px; }
.nav-panel-actions .lang-switch { justify-self: center; }
body.menu-open { overflow: hidden; }

/* ---- Sections ---- */
.section { position: relative; padding-block: var(--section-y); --card: var(--c-navy-ink); }
.section-alt { background: var(--bg-2); --card: var(--c-navy-deep); }
.section-deep { isolation: isolate; overflow: hidden; background: radial-gradient(90% 120% at 15% 0%, var(--c-navy) 0%, var(--c-navy-ink) 45%, var(--c-navy-deep) 100%); }
.section-deep .container { position: relative; }
.section-pattern, .hero-pattern, .cta-pattern { position: absolute; inset: 0; pointer-events: none; background: var(--gold-2); opacity: .045; -webkit-mask: var(--pattern) 0 0 / 72px 72px repeat; mask: var(--pattern) 0 0 / 72px 72px repeat; }
.section-title { display: grid; gap: 0 var(--s-7); max-width: none; margin: 0 0 var(--s-8); text-align: start; }
.section-title h2, .section-head h2, .contact h2, .cta-band h2 { font-size: var(--t-h2); line-height: var(--lh-head); letter-spacing: var(--track-display); margin: 0; }
.section-title p { max-width: 52ch; margin: var(--s-4) 0 0; color: var(--soft); font-size: var(--t-lead); }
@media (min-width: 900px) {
  .section-title:has(> p) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .section-title > :not(p) { grid-column: 1; }
  .section-title > p { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end; margin: 0; }
}
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-7); }
.section-more { margin: var(--s-7) 0 0; }
.sub-head { margin: var(--s-8) 0 var(--s-5); font-size: var(--t-h3); }
/* the ivory page (story, about): navy type; gold is darkened so small text still reads */
.section-light { --text: var(--c-navy-ink); --soft: var(--c-slate); --card: var(--c-white); --hairline: color-mix(in srgb, var(--c-navy) 12%, transparent);
  --gold-ink: color-mix(in srgb, var(--c-gold) 62%, var(--c-navy-ink)); background: var(--c-ivory); color: var(--text); color-scheme: light; }
.section-light :focus-visible { outline-color: var(--c-navy); }
.section-light .eyebrow { color: var(--gold-ink); }
.section-light :is(h2, h3) { color: var(--c-navy); }
.section-light .btn-ghost { border-color: color-mix(in srgb, var(--c-navy) 35%, transparent); color: var(--c-navy); }
.section-light .btn-ghost:hover { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-ivory); }
.section-light .gold-text { background-image: linear-gradient(100deg, var(--c-gold) 0%, var(--gold-ink) 50%, var(--c-gold) 100%); }

/* ---- Inner pages: the cinematic title band (aurora, grain, the star lattice and the SK mark) ---- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(420px, 62svh, 720px);
  padding-block: calc(var(--hdr-h) + var(--s-8)) clamp(var(--s-7), 6vw, var(--s-9));
  background: radial-gradient(70% 90% at 85% 10%, var(--c-navy) 0%, transparent 60%), radial-gradient(60% 70% at 0% 100%, color-mix(in srgb, var(--c-gold) 14%, transparent), transparent 70%), var(--c-navy-deep); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold-2); opacity: .05; -webkit-mask: var(--pattern) 0 0 / 72px 72px repeat; mask: var(--pattern) 0 0 / 72px 72px repeat; pointer-events: none; }
.page-hero::after { content: ""; position: absolute; z-index: -1; inset-inline-end: max(var(--s-4), calc((100vw - var(--wrap)) / 2 + var(--s-6))); bottom: -8%; height: min(520px, 92%); aspect-ratio: 262 / 408;
  background: linear-gradient(160deg, var(--c-gold-soft), var(--c-gold)); -webkit-mask: var(--mark-img) center / contain no-repeat; mask: var(--mark-img) center / contain no-repeat; opacity: .08; pointer-events: none; }
.ph-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ph-fx::before { content: ""; position: absolute; top: -30%; inset-inline-start: 30%; width: 60vmax; height: 60vmax; border-radius: 50%; background: radial-gradient(closest-side, var(--aurora-gold), transparent 70%); opacity: .45; }
.ph-fx::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .06; mix-blend-mode: overlay; }
@media (prefers-reduced-motion: no-preference) { .ph-fx::before { animation: drift-a var(--dur-ambient) var(--ease-in-out) infinite alternate; } }
.page-hero .container { position: relative; }
.page-hero h1 { max-width: 16ch; margin: 0; font-size: var(--t-h1); line-height: var(--lh-display); letter-spacing: var(--track-display); }
.page-hero p { max-width: 58ch; margin: var(--s-5) 0 0; color: var(--soft); font-size: var(--t-lead); }
.page-hero .eyebrow { margin-bottom: var(--s-3); }
.page-hero .alt-name { margin-top: var(--s-3); }
.page-hero-rule { position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--metal-line); opacity: .7; }
.hero-badges { margin-top: var(--s-4) !important; }

/* ---- Closing call to action ---- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(var(--s-9), 9vw, 168px);
  background: radial-gradient(80% 140% at 85% 50%, var(--c-navy) 0%, var(--c-navy-ink) 55%, var(--c-navy-deep) 100%); border-top: 1px solid var(--hairline); }
html[dir="rtl"] .cta-band { background: radial-gradient(80% 140% at 15% 50%, var(--c-navy) 0%, var(--c-navy-ink) 55%, var(--c-navy-deep) 100%); }
.cta-pattern { z-index: -1; }
.cta-inner { display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 900px) { .cta-inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); } }
.cta-band h2 { max-width: 18ch; }
.cta-band p { max-width: 58ch; margin: var(--s-4) 0 0; color: var(--soft); font-size: var(--t-lead); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 639px) { .cta-actions .btn { flex: 1 1 150px; } }

/* ---- Footer: a glass contact strip, the explore links, then the oversized SK Arabians wordmark as the sign-off ---- */
.site-footer { position: relative; isolation: isolate; overflow: hidden; flex: none; padding: var(--s-8) 0 var(--s-6); background: var(--c-navy-deep); color: var(--soft); font-size: 15px; }
.site-footer::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: var(--metal-line); opacity: .8; }
.footer-strip { display: grid; gap: var(--s-4); align-items: center; padding: var(--s-5); border-radius: var(--r-xl); margin-bottom: var(--s-8); }
@media (min-width: 900px) { .footer-strip { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s-5) var(--s-6); padding-inline-end: calc(var(--s-6) + 64px); } } /* room for the WhatsApp button */
.site-footer .footer-strip-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: 0; padding: 0; list-style: none; }
.site-footer .footer-strip-links a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; color: var(--text); font-size: var(--t-body); text-decoration: none; transition: color var(--dur) var(--ease-out); }
.site-footer .btn-gold { color: var(--c-navy-deep); }
.site-footer .footer-strip-links a:hover { color: var(--gold-soft); }
.footer-strip-links .icon { width: 18px; height: 18px; color: var(--gold-2); }
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); } }
.footer-brand .logo img { height: 56px; width: auto; }
.footer-brand p { max-width: 42ch; margin: var(--s-4) 0 0; }
.footer-h { margin: 0 0 var(--s-3); color: var(--text); font-size: var(--t-h4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-footer a { color: var(--soft); text-decoration: none; transition: color var(--dur) var(--ease-out); }
.site-footer a:hover { color: var(--gold-soft); }
.site-footer li > a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-contact li { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; }
.footer-contact .icon { width: 18px; height: 18px; color: var(--gold-2); }
.socials { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--glass-edge); border-radius: 50%; transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.socials a:hover { border-color: var(--gold-2); }
.socials .icon { width: 18px; height: 18px; }
.footer-wordmark { margin: var(--s-8) 0 0; font-family: "Marcellus", var(--font-display); font-size: clamp(56px, 15.6vw, 300px); line-height: .82; letter-spacing: -.02em; text-align: center;
  white-space: nowrap; text-transform: uppercase; user-select: none; background: linear-gradient(180deg, var(--c-gold-soft), var(--c-gold) 55%, transparent 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; opacity: .3; }
/* the wordmark fills the footer's column edge to edge at every width: sized from the column (cqi), not the window (vw,
   which made it wider than the column on large screens and cut it at "SK ARABIA"). Marcellus caps "SK ARABIANS" are
   5.83em wide, so 16.6cqi fills ~97% of the column. */
.footer-wordmark-wrap { container-type: inline-size; }
@supports (font-size: 1cqi) { .footer-wordmark { font-size: 16.6cqi; } }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-top: var(--s-5); padding-top: var(--s-5);
  padding-inline-end: 72px; border-top: 1px solid var(--hairline); font-size: var(--t-small); }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 639px) { .site-footer { padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom)); } .footer-bottom { padding-inline-end: 0; } }

/* ---- Floating WhatsApp button (the chat launcher sits above it: ai-chat.css) ---- */
.wa-float { position: fixed; z-index: var(--z-sticky); bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); inset-inline-end: calc(var(--s-5) + env(safe-area-inset-right)); display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%; background: var(--metal); color: var(--c-navy-deep); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 45%, transparent), var(--sh-3);
  transition: transform var(--dur-md) var(--ease-spring), opacity var(--dur-slow) var(--ease-out); }
.wa-float:hover { transform: translateY(-3px) scale(1.04); }
.wa-float .icon { width: 26px; height: 26px; }
@media (max-width: 639px) {
  .wa-float { width: 50px; height: 50px; bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); inset-inline-end: var(--s-4); }
  .wa-float.over-stats { opacity: 0; transform: scale(.6); pointer-events: none; }
}
body.menu-open .wa-float, body.lb-open .wa-float { visibility: hidden; }

/* =====================================================================================================================
   4 · PAGES
   ===================================================================================================================== */

/* ---------- Home hero: cinematic ----------
   Layers, back to front: photos (slow Ken Burns + crossfade, light parallax) · navy veil · drifting gold aurora ·
   gold dust (canvas, computers only) · mouse spotlight · grain · copy. Everything decorative is aria-hidden and
   pointer-events: none; with reduced motion only the photo and the copy remain, still. */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--bg); color: var(--text); }
.hero-home { min-height: 100svh; display: flex; flex-direction: column; }
.hero-media { position: absolute; inset: -4% 0; z-index: -3; will-change: transform; }
.hero-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide { opacity: 0; transition: opacity var(--dur-xl) var(--ease-in-out-quint); }
.hero-slide.on { opacity: 1; }
/* Ken Burns: each photo drifts and zooms slowly; every other photo the opposite way */
@media (prefers-reduced-motion: no-preference) {
  .hero-slide.on { animation: ken-burns 16s linear both; }
  .hero-slide.on:nth-child(even) { animation-name: ken-burns-2; }
}
/* the navy veil: readable text over any photo, dark from the text side and fading into the page at the bottom */
.hero-home::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(110% 90% at 80% 25%, var(--c-navy) 0%, var(--c-navy-ink) 45%, var(--c-navy-deep) 100%); }
.hero-home.has-media::before { background:
  linear-gradient(180deg, color-mix(in srgb, var(--c-navy-deep) 45%, transparent) 0%, transparent 30%, transparent 55%, var(--c-navy-deep) 100%),
  linear-gradient(to right, color-mix(in srgb, var(--c-navy-deep) 92%, transparent) 0%, color-mix(in srgb, var(--c-navy-deep) 66%, transparent) 45%, color-mix(in srgb, var(--c-navy-deep) 16%, transparent) 100%); }
html[dir="rtl"] .hero-home.has-media::before { background:
  linear-gradient(180deg, color-mix(in srgb, var(--c-navy-deep) 45%, transparent) 0%, transparent 30%, transparent 55%, var(--c-navy-deep) 100%),
  linear-gradient(to left, color-mix(in srgb, var(--c-navy-deep) 92%, transparent) 0%, color-mix(in srgb, var(--c-navy-deep) 66%, transparent) 45%, color-mix(in srgb, var(--c-navy-deep) 16%, transparent) 100%); }
/* aurora: three soft light leaks (gradients, not filters: cheap to draw) drifting on long loops */
.hero-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.hero-aurora i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; opacity: .55; will-change: transform;
  background: radial-gradient(closest-side, var(--aurora-gold), transparent 70%); }
.hero-aurora i:nth-child(1) { top: -25vmax; inset-inline-end: -15vmax; }
.hero-aurora i:nth-child(2) { bottom: -30vmax; inset-inline-start: 10vw; background: radial-gradient(closest-side, var(--aurora-navy), transparent 70%); opacity: .7; }
.hero-aurora i:nth-child(3) { top: 30%; inset-inline-start: 45%; width: 34vmax; height: 34vmax; opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .hero-aurora i:nth-child(1) { animation: drift-a var(--dur-ambient) var(--ease-in-out) infinite alternate; }
  .hero-aurora i:nth-child(2) { animation: drift-b calc(var(--dur-ambient) * 1.3) var(--ease-in-out) infinite alternate; }
  .hero-aurora i:nth-child(3) { animation: drift-a calc(var(--dur-ambient) * .8) var(--ease-in-out) infinite alternate-reverse; }
}
html[dir="rtl"] .hero-aurora i { animation-direction: alternate-reverse; }
.hero-dust { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
/* spotlight: a soft gold pool that follows the mouse (moved with transform by site.js; computers only) */
.hero-spot { position: absolute; top: 0; left: 0; z-index: -1; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-gold-soft) 16%, transparent), transparent 72%); mix-blend-mode: screen;
  transition: opacity var(--dur-lg) var(--ease-out); will-change: transform; }
.hero-home.spot-on .hero-spot { opacity: 1; }
/* film grain: one tiny noise tile, still (a moving grain costs a repaint every frame) */
.hero-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-pattern { z-index: -1; opacity: .04; }
.hero-mark { position: absolute; z-index: -1; inset-inline-end: max(-40px, calc((100vw - var(--site-max)) / 2)); top: 50%; height: min(78vh, 760px); aspect-ratio: 262 / 408; transform: translateY(-46%);
  background: linear-gradient(160deg, var(--c-gold-soft), var(--c-gold-2) 50%, var(--c-gold)); -webkit-mask: var(--mark-img) center / contain no-repeat; mask: var(--mark-img) center / contain no-repeat;
  opacity: .14; pointer-events: none; }
.hero-home.has-media .hero-mark { display: none; }
/* copy at the bottom of the photo; on a computer the caption of the horse on screen sits opposite it */
.hero-inner { flex: 1; display: grid; align-content: end; gap: var(--space-6); padding-block: calc(var(--hdr-h) + var(--space-8)) clamp(var(--space-8), 12vh, 136px); }
@media (min-width: 1024px) { .hero-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-8); } }
.hero-copy { max-width: 900px; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); color: var(--gold-soft); }
.hero .eyebrow::before { content: ""; width: 40px; height: 1px; background: currentColor; }
.hero h1 { max-width: 15ch; margin: 0 0 var(--space-5); font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--track-display); text-shadow: 0 2px 30px color-mix(in srgb, var(--c-navy-deep) 60%, transparent); }
html[dir="rtl"] .hero h1 { max-width: 16ch; }
.hero .lead { max-width: 52ch; margin: 0 0 var(--space-6); color: var(--soft); font-size: var(--t-lead); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
/* the two calls to action share one frosted pill */
.glass-pill { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: var(--radius-full); }
.glass-pill .btn-ghost { border-color: transparent; background: transparent; }
.glass-pill .btn-ghost:hover { background: color-mix(in srgb, var(--c-ivory) 10%, transparent); border-color: transparent; }

/* Entrances (the headline: 5 · Motion → .split-now; the lines below fade up in turn, after the preloader when it plays) */
@media (prefers-reduced-motion: no-preference) {
  .hero-in { animation: rise-in var(--dur-lg) var(--ease-out-expo) both; animation-delay: calc(200ms + var(--d, 0) * 110ms); }
  .intro .hero-in { animation-delay: calc(1300ms + var(--d, 0) * 110ms); }
}

/* "the horse in this photo": category, name, and one dash per photo of the slideshow */
.hero-caption { display: none; min-width: 240px; max-width: 340px; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); color: var(--text); text-decoration: none;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur-md) var(--ease-out-expo); }
@media (min-width: 1024px) { .hero-caption { display: grid; gap: 2px; } }
.hero-caption:hover { border-color: var(--glass-edge-hot); transform: translateY(-2px); }
.hero-caption-cat { color: var(--gold-2); font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: .16em; text-transform: uppercase; }
html[dir="rtl"] .hero-caption-cat { letter-spacing: 0; font-size: var(--fs-14); }
.hero-caption-name { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-24); line-height: 1.25; transition: color var(--dur) var(--ease-out); }
html[dir="rtl"] .hero-caption-name { font-weight: var(--fw-bold); }
.hero-caption:hover .hero-caption-name { color: var(--gold-soft); }
.hero-dots { display: flex; gap: 6px; margin-top: var(--space-3); }
.hero-dots i { width: 28px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--c-ivory) 30%, transparent); transform: scaleX(.5); transform-origin: 0 50%;
  transition: transform var(--dur-md) var(--ease-out-expo), background-color var(--dur-md) var(--ease-out); }
html[dir="rtl"] .hero-dots i { transform-origin: 100% 50%; }
.hero-dots i.on { transform: none; background: var(--gold-2); }
@media (prefers-reduced-motion: no-preference) { .hero-caption.swap :is(.hero-caption-cat, .hero-caption-name) { animation: rise-in var(--dur-lg) var(--ease-out-expo) both; } }

/* scroll cue: a slim capsule with a falling bead (a link to the first section: also a keyboard shortcut) */
.hero-scroll { position: absolute; z-index: 1; inset-inline: 0; bottom: var(--space-5); display: grid; place-items: center; width: 44px; height: 56px; margin-inline: auto; color: var(--gold-soft); } /* centred by margins: its entrance animation owns transform */
.hero-home.has-rail .hero-scroll { bottom: calc(var(--rail-h, 92px) + var(--space-4)); }
.hero-scroll i { position: relative; width: 22px; height: 36px; border: 1.5px solid color-mix(in srgb, var(--c-gold-soft) 60%, transparent); border-radius: 12px; }
.hero-scroll i::after { content: ""; position: absolute; top: 7px; left: 50%; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; background: var(--gold-2); }
@media (prefers-reduced-motion: no-preference) { .hero-scroll i::after { animation: bead 2.2s var(--ease-in-out) infinite; } }
@keyframes bead { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
.home-start { display: block; height: 0; outline: 0; }
@media (max-width: 639px) {
  .hero-home { min-height: 92svh; }
  .glass-pill { display: flex; width: 100%; }
  .glass-pill .btn { flex: 1 1 130px; }
  .hero-actions .link-arrow { flex-basis: 100%; }
  .hero-scroll { display: none; }
  .hero-mark { top: calc(var(--hdr-h) + var(--space-4)); height: 300px; transform: none; inset-inline-end: -60px; opacity: .08; }
  .hero-aurora i { opacity: .35; }
}

/* Counters: a glass rail along the bottom of the hero (horses · titles · the latest title) */
.stat-cards { position: relative; z-index: 2; border-top: 1px solid color-mix(in srgb, var(--c-ivory) 14%, transparent); background: color-mix(in srgb, var(--c-navy-deep) 64%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-lg)); backdrop-filter: blur(var(--blur-lg)); }
.stat-cards-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-card { display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); padding-block: var(--space-4); padding-inline: 0 var(--space-4); color: var(--text); text-decoration: none; }
.stat-card + .stat-card { padding-inline-start: var(--space-4); border-inline-start: 1px solid color-mix(in srgb, var(--c-ivory) 12%, transparent); }
.stat-card b { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: clamp(var(--fs-30), 3.4vw, 44px); line-height: 1; color: var(--gold-2); }
.stat-card > span { color: var(--soft); font-size: var(--fs-14); line-height: 1.35; }
.stat-latest { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--space-3); border-top: 1px solid color-mix(in srgb, var(--c-ivory) 12%, transparent);
  transition: background-color var(--dur) var(--ease-out); }
.stat-cards-row > .stat-latest { padding-inline-start: 0; border-inline-start: 0; }
a.stat-latest:hover { background: color-mix(in srgb, var(--c-ivory) 5%, transparent); }
a.stat-latest:hover strong { color: var(--gold-soft); }
.stat-latest .medal { width: 40px; height: 40px; font-size: var(--fs-16); }
.stat-latest-text { min-width: 0; }
.stat-latest-text strong { display: block; font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-20); line-height: 1.25; transition: color var(--dur) var(--ease-out); }
html[dir="rtl"] .stat-latest-text strong { font-weight: var(--fw-bold); }
.stat-latest-text small { display: block; margin-top: 2px; font-size: 13px; color: var(--soft); }
.stat-latest-go { margin-inline-start: auto; padding-inline: var(--space-2); color: var(--gold-2); font-size: var(--fs-20); transition: transform var(--dur) var(--ease-out); }
a.stat-latest:hover .stat-latest-go { transform: translateX(4px); }
html[dir="rtl"] a.stat-latest:hover .stat-latest-go { transform: translateX(-4px); }
@media (min-width: 900px) {
  .stat-cards-row { grid-template-columns: auto auto minmax(0, 1fr); }
  .stat-card { flex-direction: row; align-items: baseline; gap: var(--space-3); padding-block: var(--space-5); padding-inline-end: var(--space-7); }
  .stat-card + .stat-card { padding-inline-start: var(--space-7); }
  .stat-card:not(.stat-latest) > span { max-width: 12ch; }
  .stat-cards-row > .stat-latest { grid-column: auto; align-items: center; padding-inline: var(--space-7) var(--space-2); border-top: 0; border-inline-start: 1px solid color-mix(in srgb, var(--c-ivory) 12%, transparent); }
}


/* ---- Homepage chapters: each section is numbered (01 — The collection …) ---- */
.home { counter-reset: chapter; }
.home :is(.section-title, .section-head, .story-panel, .contact-info) .eyebrow::before { counter-increment: chapter; content: counter(chapter, decimal-leading-zero);
  padding-inline-end: 40px; background: linear-gradient(currentColor, currentColor) 100% 50% / 28px 1px no-repeat; font-family: "Marcellus", var(--font-display); letter-spacing: .08em; }
html[dir="rtl"] .home :is(.section-title, .section-head, .story-panel, .contact-info) .eyebrow::before { background-position: 0 50%; }
/* the gold thread: a hairline that draws down into each chapter as it scrolls into view (site.js → GSAP scrub) */
.thread { position: absolute; top: 0; inset-inline-start: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); width: 1px; height: calc(var(--section-y) - var(--s-5));
  background: linear-gradient(180deg, transparent, var(--c-gold) 40%, var(--c-gold-soft)); transform-origin: 50% 0; transform: scaleY(var(--p, 1)); pointer-events: none; }
.section-mesh { overflow: hidden; isolation: isolate; }
.mesh { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mesh i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .5; will-change: transform; background: radial-gradient(closest-side, var(--aurora-navy), transparent 70%); }
.mesh i:nth-child(1) { top: -30vmax; inset-inline-start: -20vmax; }
.mesh i:nth-child(2) { bottom: -35vmax; inset-inline-end: -25vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-gold-2) 18%, transparent), transparent 70%); opacity: .8; }
.mesh i:nth-child(3) { top: 35%; inset-inline-start: 40%; width: 40vmax; height: 40vmax; opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .mesh i:nth-child(1) { animation: drift-a calc(var(--dur-ambient) * 1.4) var(--ease-in-out) infinite alternate; }
  .mesh i:nth-child(2) { animation: drift-b calc(var(--dur-ambient) * 1.2) var(--ease-in-out) infinite alternate; }
  .mesh i:nth-child(3) { animation: drift-a var(--dur-ambient) var(--ease-in-out) infinite alternate-reverse; }
}
/* swipe rows can also be dragged with a mouse */
.timeline[data-drag] { cursor: grab; }
@media (max-width: 639px) { .rows-on-phone:not(.filtered) .hgrid[data-drag] { cursor: grab; } }
[data-drag].dragging { cursor: grabbing; scroll-snap-type: none !important; user-select: none; }
[data-drag].dragging a { pointer-events: none; }

/* ---- Featured champion: the photo in an arched glass frame; a gold shimmer sweeps its rim; a slight 3D tilt ---- */
.featured { display: grid; gap: var(--s-7); align-items: center; perspective: 1200px; }
@media (min-width: 900px) { .featured { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: var(--s-9); } }
.featured-frame { position: relative; width: 100%; max-width: 480px; margin-inline: auto; padding: 10px; border-radius: 999px 999px var(--r-xl) var(--r-xl);
  background: var(--glass-bg); border: 1px solid var(--glass-edge); box-shadow: var(--glass-highlight), var(--glass-shadow); transform-style: preserve-3d; transition: transform var(--dur-md) var(--ease-out-expo); }
@media (max-width: 639px) { .featured-frame { max-width: 340px; } }
.featured-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px var(--r-lg) var(--r-lg); background: var(--c-navy); }
.featured-media img { width: 100%; height: 100%; object-fit: cover; }
.shimmer { position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.shimmer::before { content: ""; position: absolute; inset: -50% -100%; background: var(--shimmer); transform: translateX(-60%); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .reveal-pre.in .shimmer::before, .featured-frame:hover .shimmer::before { animation: sweep 2.4s var(--ease-in-out-quint) .3s both; } }
@keyframes sweep { 0% { transform: translateX(-60%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(60%); opacity: 0; } }
html[dir="rtl"] .shimmer::before { scale: -1 1; }
.featured-text h3 { margin: 0; font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem); line-height: var(--lh-display); letter-spacing: var(--track-display); }
.featured-text h3 a { text-decoration: none; transition: color var(--dur) var(--ease-out); }
.featured-text h3 a:hover { color: var(--gold-soft); }
.alt-name { margin: var(--s-2) 0 var(--s-3); color: var(--gold-soft); font-size: var(--t-h4); }
.alt-name[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--font-text); }
.alt-name[lang="en"] { font-family: "Marcellus", var(--font-display); }
.lineage { margin: 0 0 var(--s-3); color: var(--soft); }
.titles { list-style: none; padding: 0; margin: var(--s-5) 0; display: grid; gap: var(--s-2); }
.titles li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); }
.titles strong { display: block; font-weight: var(--fw-semibold); }
.titles small { display: block; color: var(--soft); font-size: 13px; }
.featured-text .btn { margin-top: var(--s-2); }
.ped-mini { display: flex; align-items: stretch; gap: var(--s-2); margin: var(--s-3) 0 var(--s-4); }
.ped-lines { width: 36px; height: auto; flex: none; overflow: visible; }
html[dir="rtl"] .ped-lines { transform: scaleX(-1); }
.ped-parents { display: grid; gap: var(--s-2); }
.ped-node { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--glass-edge); background: var(--glass-bg); color: var(--soft); font-size: 15px; }
.ped-node:first-child { color: var(--text); }
:is(.ped-lines, .line-tree) path { fill: none; stroke: var(--glass-edge-hot); stroke-width: 1.25; vector-effect: non-scaling-stroke; }

/* ---- Latest foals: a horizontal timeline, its line drawing in from one foal to the next ---- */
.timeline { --tl-top: 10px; display: flex; gap: var(--s-5); margin: 0 calc(-1 * var(--gutter)); padding: var(--s-2) var(--gutter) var(--s-5); list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--edge-2) transparent; }
.timeline:focus-visible { outline-offset: -2px; }
.tl-item { position: relative; flex: 0 0 clamp(250px, 26vw, 310px); padding-top: calc(var(--tl-top) + 30px); scroll-snap-align: start; }
.tl-item::before { content: ""; position: absolute; top: calc(var(--tl-top) + 6px); inset-inline: 0 calc(-1 * var(--s-5)); height: 1px; background: linear-gradient(90deg, var(--gold-2), var(--glass-edge)); transform-origin: 0 50%; }
html[dir="rtl"] .tl-item::before { transform-origin: 100% 50%; background: linear-gradient(-90deg, var(--gold-2), var(--glass-edge)); }
.tl-item:last-child::before { inset-inline-end: 0; }
.tl-dot { position: absolute; top: var(--tl-top); inset-inline-start: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gold-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-gold-2) 18%, transparent); }
.reveal-pre .tl-item::before { transform: scaleX(0); }
.reveal-pre .tl-dot { transform: scale(0); }
.reveal-pre.in .tl-item::before { transform: none; transition: transform var(--dur-xl) var(--ease-out-expo); transition-delay: calc(200ms + var(--i, 0) * 140ms); }
.reveal-pre.in .tl-dot { transform: none; transition: transform var(--dur-md) var(--ease-spring); transition-delay: calc(120ms + var(--i, 0) * 140ms); }
.tl-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); color: var(--text); text-decoration: none; transition: transform var(--dur-md) var(--ease-out-expo), border-color var(--dur) var(--ease-out); }
.tl-card:hover { transform: translateY(-5px); border-color: var(--glass-edge-hot); }
.tl-photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-navy); }
.tl-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-xl) var(--ease-out-expo); }
.tl-card:hover .tl-photo img { transform: scale(1.06); }
.tl-body { display: grid; gap: 2px; padding: var(--s-4) var(--s-5) var(--s-5); }
.tl-body time { color: var(--gold-2); font-size: 13px; font-weight: var(--fw-medium); letter-spacing: .06em; }
.tl-body strong { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--t-h4); line-height: 1.25; }
html[dir="rtl"] .tl-body strong { font-weight: var(--fw-bold); }
.tl-body small { color: var(--soft); font-size: var(--t-small); }
.tl-flag { justify-self: start; margin-top: var(--s-2); padding: 2px var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--glass-edge); color: var(--gold-soft); font-size: var(--t-caps); }

/* ---- Bloodlines: each line a glass panel; a small tree draws down from the line's name to its horses ---- */
.lines { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.line { padding: var(--s-6) var(--s-5); border-radius: var(--r-xl); }
.line-head { display: grid; justify-items: center; gap: var(--s-1); text-align: center; } /* centred over the tree's stem */
.line-head h3 { margin: 0; font-size: var(--t-h3); }
.line-n { color: var(--soft); font-size: var(--t-small); }
.line-n b { color: var(--gold-2); font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--t-h4); }
.line-tree { display: block; width: 100%; height: 28px; margin-top: var(--s-3); overflow: visible; }
.reveal-pre .line-tree { clip-path: inset(0 0 100% 0); }
.reveal-pre .ped-lines { clip-path: inset(0 100% 0 0); }
.reveal-pre.in :is(.ped-lines, .line-tree) { clip-path: inset(0); transition: clip-path 1.2s var(--ease-out-expo) .3s; }
.line-horses { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.line-horses a { display: grid; justify-items: center; gap: 2px; padding: var(--s-2) 2px; border-radius: var(--r-md); color: var(--text); text-align: center; text-decoration: none; transition: background-color var(--dur) var(--ease-out); }
.line-horses a:hover { background: color-mix(in srgb, var(--c-ivory) 6%, transparent); }
.line-photo { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--s-2); overflow: hidden; border-radius: 50%; border: 1px solid var(--glass-edge-hot); background: var(--c-navy);
  transition: transform var(--dur-md) var(--ease-spring); }
.line-horses a:hover .line-photo { transform: scale(1.08); }
.line-photo img { width: 100%; height: 100%; object-fit: cover; }
.line-photo .ph-initials { font-size: var(--fs-18); }
.line-name { max-width: 100%; font-size: var(--t-small); font-weight: var(--fw-medium); line-height: 1.3; overflow-wrap: anywhere; }
.line-horses small { color: var(--soft); font-size: var(--t-caps); }

/* ---- Achievements: counters with a gold underline that draws, the medals as a glass bento grid ---- */
.ach-counters { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-9); margin: 0 0 var(--s-8); }
.ach-counter { display: grid; gap: var(--s-2); }
.ach-counter b { position: relative; justify-self: start; padding-bottom: var(--s-2); font-family: var(--font-display); font-weight: var(--fw-regular); font-size: clamp(64px, 9vw, 136px); line-height: 1; }
.ach-counter b::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--metal); transform-origin: 0 50%; }
html[dir="rtl"] .ach-counter b::after { transform-origin: 100% 50%; }
.reveal-pre .ach-counter b::after { transform: scaleX(0); }
.reveal-pre.in .ach-counter b::after { transform: none; transition: transform 1.4s var(--ease-out-expo) .3s; }
.ach-counter span { color: var(--soft); font-size: var(--t-body); letter-spacing: .04em; }
.bento { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 519px) { .bento { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1000px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bento > :first-child { grid-column: span 2; grid-row: span 2; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: 240px; padding: var(--s-6); }
@media (max-width: 519px) { .bento > :first-child { grid-column: auto; min-height: 0; } }
.bento > .medal-card:first-child .medal { width: 60px; height: 60px; font-size: var(--fs-24); }
.bento > .medal-card:first-child strong { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--t-h3); }
.medal-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--c-gold-soft) 18%, transparent) 50%, transparent 65%);
  transform: translateX(-100%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal-pre.in .medal-card::after { animation: light-pass 1.6s var(--ease-in-out-quint) both; animation-delay: calc(500ms + var(--i, 0) * 120ms); }
  .reveal-pre.in .medal::after, .medal-card:hover .medal::after, .medal-pill:hover .medal::after { animation: light-pass 1.2s var(--ease-in-out-quint) both; animation-delay: calc(400ms + var(--i, 0) * 120ms); }
}
html[dir="rtl"] .medal-card::after { scale: -1 1; }

/* ---- Story: glass panels scroll over a photo pinned behind them (computers); the quote surfaces word by word ---- */
.story { display: grid; gap: var(--s-6); align-items: stretch; }
@media (min-width: 900px) { .story { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-8); } }
.section-story { isolation: isolate; }
.story-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.story-bg img { width: 100%; height: 115%; object-fit: cover; opacity: .2; filter: saturate(.6); will-change: transform; }
@media (min-width: 900px) {
  .section-story.has-photo { padding-block: clamp(110px, 14vw, 220px); }
  .story-bg { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; inset: auto; }
}
.story-panel { padding: clamp(var(--s-5), 4vw, var(--s-7)); border-radius: var(--r-xl); }
.story-panel h2 { margin-bottom: var(--s-4); font-size: var(--t-h2); line-height: var(--lh-head); letter-spacing: var(--track-display); }
.story-panel p, .story-panel .prose { color: var(--soft); font-size: var(--t-lead); }
.story blockquote { position: relative; align-self: center; margin: 0; padding: var(--s-6) var(--s-6) var(--s-6) var(--s-7); border-inline-start: 2px solid var(--c-gold);
  font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem); line-height: 1.32; }
html[dir="rtl"] .story blockquote { padding: var(--s-6) var(--s-7) var(--s-6) var(--s-6); }
.story blockquote .q { position: absolute; top: -10px; inset-inline-start: var(--s-4); font-size: 80px; line-height: 1; color: var(--c-gold); opacity: .6; }
.section-light .story blockquote { color: var(--c-navy); }
.split-fade .w { overflow: visible; }
.reveal-pre .split-fade .w > span { opacity: .12; }
.reveal-pre.in .split-fade .w > span { opacity: 1; transition: opacity var(--dur-lg) var(--ease-out); transition-delay: calc(300ms + var(--i, 0) * 55ms); }
.pillars { margin-top: var(--s-8); }
.pillar { padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); }
.pillar .num { display: block; color: var(--gold-ink, var(--gold-2)); font-family: "Marcellus", var(--font-display); font-size: var(--t-h3); line-height: 1; }
.pillar h3 { margin: var(--s-4) 0 var(--s-2); font-size: var(--t-h4); }
.pillar p { margin: 0; color: var(--soft); font-size: 15px; }

/* ---- Gallery: masonry columns (a wipe unveils each photo); on a computer the homepage pins it and scrolls it
   sideways as one long film strip (site.js → GSAP) ---- */
.gallery { display: block; columns: 2 200px; column-gap: var(--gap); }
@media (min-width: 900px) { .gallery { columns: 3 240px; } }
@media (min-width: 1200px) { .gallery { columns: 4 240px; } }
.gallery > li { margin: 0 0 var(--gap); break-inside: avoid; }
.gallery a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); background: var(--c-navy); cursor: zoom-in; }
.gallery > li:nth-child(3n + 1) a { aspect-ratio: 3 / 4; }
.gallery > li:nth-child(4n + 2) a { aspect-ratio: 1; }
.gallery a[target] { cursor: pointer; }
.gallery a::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--glass-edge); pointer-events: none; transition: box-shadow var(--dur) var(--ease-out); }
.gallery a:hover::after { box-shadow: inset 0 0 0 1px var(--glass-edge-hot); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-xl) var(--ease-out-expo), opacity var(--dur-lg) var(--ease-out); }
.gallery a:hover img { transform: scale(1.06); }
.gallery .play { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; }
.gallery .play span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--glass-bg-strong); border: 1px solid var(--glass-edge); color: var(--text); font-size: var(--fs-20); padding-inline-start: 4px;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.gallery.reveal-pre { opacity: 1; transform: none; }
.gallery.reveal-pre > li { clip-path: inset(100% 0 0 0); }
.gallery.reveal-pre.in > li { clip-path: inset(0); transition: clip-path var(--dur-xl) var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 90ms); }
/* the film strip (added by site.js on computers): one row of tall frames, moved sideways while the section is pinned */
.film { overflow: hidden; }
.film .gallery { display: flex; gap: var(--gap); columns: auto; width: max-content; will-change: transform; }
.film .gallery > li { flex: none; width: auto; margin: 0; }
.film .gallery a { height: min(62vh, 620px); aspect-ratio: 4 / 5; }
.film .gallery > li:nth-child(3n + 2) a { aspect-ratio: 4 / 3; }
.film .gallery > li:nth-child(4n) a { aspect-ratio: 1; }
.film .gallery.reveal-pre > li { clip-path: none; }

/* ---- Experts ---- */
.expert { display: flex; flex-direction: column; align-items: center; padding: var(--s-6) var(--s-5); text-align: center; border-radius: var(--r-xl); transition: transform var(--dur-md) var(--ease-out-expo), border-color var(--dur) var(--ease-out); }
.expert:hover { transform: translateY(-5px); border-color: var(--glass-edge-hot); }
.expert-photo { display: block; width: 120px; height: 120px; margin: 0 auto var(--s-4); border-radius: 50%; object-fit: cover; border: 3px solid transparent; outline: 1px solid var(--glass-edge-hot); outline-offset: 3px; background: var(--c-navy); }
.expert-ph { display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, var(--c-navy-2), var(--c-navy) 60%, var(--c-navy-ink)); color: var(--gold-soft); font-family: "Marcellus", var(--font-display); font-size: var(--fs-36); letter-spacing: .06em; }
.expert h3 { margin: 0; font-size: var(--t-h4); }
.expert p { margin: var(--s-1) 0 0; color: var(--gold-2); font-size: var(--t-small); }
.expert small { display: block; margin-top: var(--s-2); color: var(--soft); font-size: var(--t-small); }

/* ---- Contact (homepage section, contact page, horse profile) ---- */
.contact { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-9); } }
.contact h2 { margin-bottom: var(--s-5); }
.contact-info > p { margin-top: calc(-1 * var(--s-2)); }
.contact-list { list-style: none; padding: 0; margin: 0 0 var(--s-6); display: grid; gap: var(--s-2); }
.contact-list li { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; }
.contact-list .ci { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--glass-bg); border: 1px solid var(--glass-edge); color: var(--gold-2); }
.contact-list .ci .icon { width: 18px; height: 18px; }
.contact-list a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; transition: color var(--dur) var(--ease-out); }
.contact-list a:hover { color: var(--gold-soft); }
.map-frame { padding: 6px; border-radius: var(--r-xl); background: var(--glass-bg); border: 1px solid var(--glass-edge); }
.map { display: block; width: 100%; height: 340px; border: 0; border-radius: var(--r-lg); background: var(--c-navy); }
.contact-form { border-radius: var(--r-xl); }
.contact-form .form { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- Horses page ---- */
.horses-page .horse-groups { margin-top: var(--s-6); }

/* ---- Horse profile: the horse full-bleed under its name, then a large gallery beside a sticky glass panel ---- */
.profile-hero { min-height: clamp(520px, 88svh, 980px); }
.profile-hero-bg { position: absolute; inset: -4% 0; z-index: -2; overflow: hidden; }
.profile-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) { .profile-hero-bg img { animation: ken-burns 22s linear both; } }
.profile-hero.has-photo::before { z-index: -1; opacity: 1; -webkit-mask: none; mask: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-navy-deep) 55%, transparent) 0%, transparent 30%, color-mix(in srgb, var(--c-navy-deep) 40%, transparent) 60%, var(--c-navy-deep) 100%),
    linear-gradient(to right, color-mix(in srgb, var(--c-navy-deep) 70%, transparent), transparent 70%); }
html[dir="rtl"] .profile-hero.has-photo::before { background: linear-gradient(180deg, color-mix(in srgb, var(--c-navy-deep) 55%, transparent) 0%, transparent 30%, color-mix(in srgb, var(--c-navy-deep) 40%, transparent) 60%, var(--c-navy-deep) 100%),
    linear-gradient(to left, color-mix(in srgb, var(--c-navy-deep) 70%, transparent), transparent 70%); }
.profile-hero.has-photo::after { display: none; }
.profile-hero h1 { max-width: 14ch; font-size: var(--t-display); }
.profile-hero .medal-summary { margin: var(--s-5) 0 0; }
.profile-section { padding-top: clamp(var(--s-7), 5vw, var(--s-9)); }
.profile-top { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 960px) { .profile-top { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-7); } }
.pgallery-main { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-xl); background: var(--c-navy); border: 1px solid var(--glass-edge); box-shadow: var(--sh-3); }
.pgallery-main a { position: relative; z-index: 1; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.pgallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-xl) var(--ease-out-expo), opacity var(--dur-md) var(--ease-out); }
.pgallery-main a:hover img { transform: scale(1.03); }
.pgallery-main a::after { content: ""; position: absolute; inset-inline-end: var(--s-4); bottom: var(--s-4); width: 46px; height: 46px; border-radius: 50%; background: var(--glass-bg-strong) center / 20px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3cfa8' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E");
  border: 1px solid var(--glass-edge); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.pgallery-thumbs { display: flex; gap: var(--s-2); margin-top: var(--s-3); padding-bottom: 4px; overflow-x: auto; scrollbar-width: thin; }
.pgallery-thumbs[hidden] { display: none; }
.pgallery-thumbs button { flex: none; width: 96px; height: 72px; padding: 0; overflow: hidden; border: 1px solid var(--glass-edge); border-radius: var(--r-sm); background: var(--c-navy); cursor: pointer;
  opacity: .6; transition: opacity var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-md) var(--ease-out-expo); }
.pgallery-thumbs button:hover, .pgallery-thumbs button.on { opacity: 1; }
.pgallery-thumbs button:hover { transform: translateY(-2px); }
.pgallery-thumbs button.on { border-color: var(--gold-2); box-shadow: 0 0 0 1px var(--gold-2); }
.pgallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.profile-info { padding: var(--s-5); border-radius: var(--r-xl); }
@media (min-width: 960px) { .profile-info { position: sticky; top: calc(var(--hdr-h) + var(--s-4)); padding: var(--s-6); } }
.profile-info .facts { background: var(--hairline); }
.profile-info .prose { margin-bottom: var(--s-5); font-size: var(--t-body); }
.profile-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.profile-block { margin-top: clamp(var(--s-8), 8vw, 140px); }
.profile-block[id] { scroll-margin-top: calc(var(--hdr-h) + var(--s-4)); }
.profile-block h2 { margin-bottom: var(--s-6); font-size: var(--t-h2); letter-spacing: var(--track-display); }
/* the champion timeline: medals down a gold rail, newest first */
.medal-line { position: relative; display: grid; gap: var(--s-3); margin: 0 0 var(--s-6); padding: 0; padding-inline-start: var(--s-7); list-style: none; }
.medal-line::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 15px; width: 1px; background: linear-gradient(180deg, var(--c-gold), var(--glass-edge)); transform-origin: 50% 0; }
.reveal-pre .medal-line::before { transform: scaleY(0); }
.reveal-pre.in .medal-line::before { transform: none; transition: transform var(--dur-2xl) var(--ease-out-expo) .2s; }
.medal-line li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); }
.medal-line .medal { position: absolute; inset-inline-start: calc(-1 * var(--s-7)); top: 50%; margin-top: -16px; }
.medal-line .ml-year { font-family: "Marcellus", var(--font-display); font-size: var(--t-h4); color: var(--gold-2); }
.medal-line strong { display: block; font-weight: var(--fw-semibold); }
.medal-line small { display: block; color: var(--soft); font-size: var(--t-small); }
.profile-pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-4); align-items: center; margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid var(--hairline); }
.profile-pager a { display: block; color: var(--text); text-decoration: none; }
.profile-pager span { display: block; color: var(--gold-2); font-size: var(--t-caps); letter-spacing: .12em; text-transform: uppercase; }
html[dir="rtl"] .profile-pager span { letter-spacing: 0; text-transform: none; font-size: 13px; }
.profile-pager b { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--t-h4); transition: color var(--dur) var(--ease-out); }
.profile-pager a:hover b { color: var(--gold-soft); }
.pager-next { text-align: end; }
.pager-all { display: inline-flex !important; align-items: center; min-height: 46px; padding: 0 var(--s-5); border: 1px solid var(--glass-edge); border-radius: var(--r-pill); font-size: var(--t-small); font-weight: var(--fw-semibold); }
.pager-all:hover { border-color: var(--gold-2); }
@media (max-width: 639px) { .profile-pager { grid-template-columns: 1fr 1fr; } .pager-all { display: none !important; } .profile-pager b { font-size: var(--t-body); } }

/* ---- Champions: a hall of fame — the medal count in the title band, the champions as a glass bento, the seasons on
   a timeline whose year stays in view beside its results ---- */
.tally { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-8); margin-top: var(--s-7); }
.tally-item { display: inline-flex; align-items: center; gap: var(--s-3); }
.tally-item .medal { width: 40px; height: 40px; font-size: var(--fs-16); }
.tally-item b { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); line-height: 1; }
.tally-label { color: var(--soft); font-size: var(--t-caps); letter-spacing: .14em; text-transform: uppercase; }
html[dir="rtl"] .tally-label { letter-spacing: 0; text-transform: none; font-size: var(--t-small); }
.champ-grid.bento > :first-child { justify-content: flex-start; }
.champ-card { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6) var(--s-5); border-radius: var(--r-xl); transition: transform var(--dur-md) var(--ease-out-expo), border-color var(--dur) var(--ease-out); }
.champ-card:hover { transform: translateY(-4px); border-color: var(--glass-edge-hot); }
.champ-head h3 { margin: 0; font-size: var(--t-h3); }
.champ-grid.bento > :first-child .champ-head h3 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); }
.champ-head h3 a { text-decoration: none; transition: color var(--dur) var(--ease-out); }
.champ-head h3 a:hover { color: var(--gold-soft); }
.champ-meta { display: block; margin-top: var(--s-1); color: var(--gold-2); font-size: 13px; font-weight: var(--fw-medium); letter-spacing: .06em; }
html[dir="rtl"] .champ-meta { letter-spacing: 0; }
.champ-card .medal-summary { margin: 0; gap: 6px; }
.champ-card .medal-pill { font-size: 13px; }
.champ-titles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.champ-titles li { display: flex; align-items: flex-start; gap: var(--s-3); }
.champ-titles strong { display: block; font-weight: var(--fw-semibold); line-height: 1.35; }
.champ-titles small { display: block; color: var(--soft); font-size: 13px; }
.champ-foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--hairline); font-size: var(--t-small); }
.champ-foot .more { color: var(--soft); }
.champ-foot a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; color: var(--gold-2); font-weight: var(--fw-semibold); text-decoration: none; }
.champ-foot a:hover { color: var(--gold-soft); }
@media (max-width: 639px) {
  .champ-grid.bento { display: flex !important; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) var(--s-4); scroll-padding-inline: var(--gutter); }
  .champ-grid.bento::-webkit-scrollbar { display: none; }
  .champ-grid.bento > .champ-card { flex: 0 0 86%; scroll-snap-align: start; min-height: 0; }
  .champ-grid.bento > .champ-card:only-child { flex-basis: 100%; }
}
.result-year { position: relative; margin-top: var(--s-8); }
@media (min-width: 900px) {
  .result-year { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--s-7); align-items: start; }
  .result-year > .group-head { position: sticky; top: calc(var(--hdr-h) + var(--s-5)); flex-direction: column; align-items: flex-start; margin: 0; }
  .result-year > .group-head h3 { font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height: 1; }
  .result-year > .group-head .group-rule { display: none; }
}
.result-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.result-row { display: grid; grid-template-columns: 34px minmax(0, 1.2fr) minmax(0, 1fr); gap: 4px var(--s-4); align-items: center; padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--hairline);
  transition: background-color var(--dur) var(--ease-out); }
.result-row:hover { background: var(--glass-bg); }
.rr-horse { display: block; font-family: var(--font-display); font-size: var(--t-h4); line-height: 1.25; }
html[dir="rtl"] .rr-horse { font-weight: var(--fw-bold); }
.rr-horse a { text-decoration: none; }
.rr-horse a:hover { color: var(--gold-soft); }
.rr-what { display: block; color: var(--soft); font-size: var(--t-small); }
.rr-show-name { display: block; font-weight: var(--fw-medium); font-size: 15px; }
.rr-show small { display: block; color: var(--soft); font-size: 13px; }
@media (max-width: 639px) { .result-row { grid-template-columns: 34px minmax(0, 1fr); align-items: start; padding-inline: var(--s-1); } .rr-show { grid-column: 2; } }

/* ---- News: the newest story leads, large; the article reads in a calm column with a drop cap ---- */
.news-page .news-grid > :first-child { flex-basis: 100%; }
@media (min-width: 900px) {
  .news-page .news-grid > :first-child { flex-direction: row; }
  .news-page .news-grid > :first-child .news-media { flex: 1.3; aspect-ratio: auto; min-height: 380px; }
  .news-page .news-grid > :first-child .news-body { flex: 1; justify-content: center; padding: var(--s-7); }
  .news-page .news-grid > :first-child .news-title { font-size: var(--t-h2); line-height: var(--lh-head); }
}
.article { max-width: 920px; }
.article-media { position: relative; display: block; margin-bottom: var(--s-7); overflow: hidden; border-radius: var(--r-2xl); aspect-ratio: 16 / 9; background: var(--c-navy); cursor: zoom-in; border: 1px solid var(--glass-edge); box-shadow: var(--sh-3); }
.article-media img { width: 100%; height: 115%; object-fit: cover; }
.article-back { margin: var(--s-7) 0 0; }
.prose { max-width: 70ch; color: var(--soft); font-size: 18px; line-height: 1.75; }
.prose p { margin: 0 0 1.15em; }
.article .prose > p:first-child::first-letter { float: inline-start; margin: .08em .12em 0 0; font-family: "Marcellus", var(--font-display); font-size: 4.2em; line-height: .8; color: var(--gold-2); }
html[dir="rtl"] .article .prose > p:first-child::first-letter { float: none; margin: 0; font-size: inherit; line-height: inherit; color: inherit; } /* no drop cap for joined Arabic letters */

/* ---- Document check and page not found: one glass card on the cinematic band ---- */
.verify-page, .error-section { position: relative; isolation: isolate; overflow: hidden; flex: 1 0 auto; display: flex; align-items: center; min-height: 100svh; padding-block: calc(var(--hdr-h) + var(--s-7)) var(--s-8);
  background: radial-gradient(70% 80% at 50% 0%, var(--c-navy) 0%, var(--c-navy-ink) 45%, var(--c-navy-deep) 100%); }
.verify-page::before, .error-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold-2); opacity: .05; -webkit-mask: var(--pattern) 0 0 / 72px 72px repeat; mask: var(--pattern) 0 0 / 72px 72px repeat; }
.verify-card, .error-card { position: relative; max-width: 620px; margin-inline: auto; padding: clamp(var(--s-6), 5vw, var(--s-8)) clamp(var(--s-5), 5vw, var(--s-8)); text-align: center; border-radius: var(--r-2xl);
  background: var(--glass-bg); border: 1px solid var(--glass-edge); box-shadow: var(--glass-highlight), var(--sh-3); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .verify-card, .error-card { background: var(--glass-solid); } }
.verify-kicker { margin: 0 0 var(--s-5); color: var(--gold-2); font-size: var(--t-caps); font-weight: var(--fw-semibold); letter-spacing: .2em; text-transform: uppercase; }
html[dir="rtl"] .verify-kicker { letter-spacing: 0; font-size: var(--t-small); }
.verify-icon { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 2px solid currentColor; }
.verify-icon .icon { width: 40px; height: 40px; stroke-width: 2.4; }
@media (prefers-reduced-motion: no-preference) { .verify-icon { animation: pop-in 700ms var(--ease-spring) 200ms both; } .verify-icon .icon { animation: rise-in 600ms var(--ease-out-expo) 500ms both; } }
.verify-ok .verify-icon, .verify-ok .verify-state { color: var(--ok-dark); }
.verify-ok .verify-icon { background: color-mix(in srgb, var(--c-ok) 22%, transparent); box-shadow: 0 0 0 10px color-mix(in srgb, var(--c-ok) 10%, transparent); }
.verify-bad .verify-icon, .verify-bad .verify-state, .verify-void .verify-icon, .verify-void .verify-state { color: var(--bad-dark); }
.verify-bad .verify-icon, .verify-void .verify-icon { background: color-mix(in srgb, var(--c-bad) 22%, transparent); box-shadow: 0 0 0 10px color-mix(in srgb, var(--c-bad) 10%, transparent); }
.verify-state { margin: var(--s-4) 0 var(--s-2); font-size: var(--t-small); font-weight: var(--fw-bold); letter-spacing: .14em; text-transform: uppercase; }
html[dir="rtl"] .verify-state { letter-spacing: 0; font-size: var(--t-body); }
.verify-card h1, .error-card h1 { margin: 0 0 var(--s-5); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.2; }
.verify-card .facts { text-align: start; }
.verify-note { margin: 0; color: var(--soft); font-size: var(--t-small); }
.verify-card .btn { margin-top: var(--s-4); }
.error-code { display: block; margin-bottom: var(--s-3); font-family: "Marcellus", var(--font-display); font-size: clamp(96px, 22vw, 240px); line-height: .9; letter-spacing: -.03em; }
.error-card p { color: var(--soft); }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
.error-more { margin: var(--s-4) 0 0; }
.error-section .ph-fx::before { inset-inline-start: 50%; top: -20%; transform: translateX(-50%); }

/* =====================================================================================================================
   5 · MOTION, REDUCED MOTION, PRINT
   ===================================================================================================================== */

/* Reveal (site.js): only blocks below the screen at load are hidden first, only with JavaScript and motion allowed.
   A block fades up; inside a .stagger group the children follow one after another (--i). */
.reveal-pre { opacity: 0; transform: translateY(28px); }
.reveal-pre.in { opacity: 1; transform: none; transition: opacity var(--dur-lg) var(--ease-out-expo), transform var(--dur-lg) var(--ease-out-expo); }
.reveal-pre.stagger { opacity: 1; transform: none; }
:is(.reveal-pre.stagger, .reveal-pre .stagger) > * { opacity: 0; transform: translateY(30px); }
:is(.reveal-pre.in.stagger, .reveal-pre.in .stagger) > * { opacity: 1; transform: none;
  transition: opacity var(--dur-lg) var(--ease-out-expo), transform var(--dur-lg) var(--ease-out-expo); transition-delay: calc(120ms + var(--i, 0) * var(--stagger)); }
/* masked headlines (split_title()): words rise out of their masks line by line (site.js gives each word its line as
   --i); in view for section titles, at load for the hero and page titles */
@media (prefers-reduced-motion: no-preference) {
  .split-now .w > span { animation: word-up var(--dur-xl) var(--ease-out-expo) both; animation-delay: calc(220ms + var(--i, 0) * 110ms); }
  .intro .split-now .w > span { animation-delay: calc(1300ms + var(--i, 0) * 110ms); }
  .reveal-pre .split .w > span { transform: translateY(110%); }
  .reveal-pre.in .split .w > span { transform: none; transition: transform var(--dur-xl) var(--ease-out-expo); transition-delay: calc(100ms + var(--i, 0) * 110ms); }
  .reveal-pre .split-fade .w > span, .reveal-pre.in .split-fade .w > span { transform: none; } /* quotes fade word by word instead of rising */
}
/* entrances in the page titles (eyebrow, lead, actions follow the headline) */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise-in var(--dur-lg) var(--ease-out-expo) both; animation-delay: calc(300ms + var(--d, 0) * 110ms); }
  .intro .rise { animation-delay: calc(1400ms + var(--d, 0) * 110ms); }
}

/* Page to page: the new page fades up over the old one (View Transitions, where the browser has them; elsewhere the
   page simply loads) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 380ms var(--ease-in-out-quint) both; }
  ::view-transition-new(root) { animation: vt-in 620ms var(--ease-out-expo) both; }
}
@keyframes vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  .hcard, .hcard-media img, .gallery img, .news-card, .btn, .nav-panel, .nav-overlay, .nav-panel-links a, .lb, .site-header, .featured-frame, .tl-card, .medal-card, .expert, .champ-card, .pgallery-main img
    { transition: none !important; }
  .hcard, .btn { transform: none !important; }
  .hcard:hover, .news-card:hover, .tl-card:hover, a.medal-card:hover, .expert:hover, .champ-card:hover, .hero-caption:hover { transform: none; }
  .reveal-pre, .reveal-pre .stagger > *, .reveal-pre.stagger > *, .reveal-pre .split .w > span { opacity: 1; transform: none; }
  .nav-panel-links a { opacity: 1; transform: none; }
  .cursor, .preloader, .hero-dust, .hero-spot { display: none !important; }
}

/* Print: a plain, readable light page */
@media print {
  @page { margin: 16mm 14mm; }
  html, body { background: #fff !important; color: #000 !important; display: block; min-height: 0; font-size: 11pt; }
  .hero-aurora, .hero-dust, .hero-spot, .hero-grain, .hero-scroll, .mesh, .story-bg, .shimmer, .ped-lines, .line-tree, .thread, .ph-fx, .profile-hero-bg, .footer-strip, .footer-wordmark, .cursor, .preloader,
  .site-header, .nav-panel, .nav-overlay, .wa-float, .skc-launch, .skc-panel, .skip, .hero-media, .hero-pattern, .hero-mark, .section-pattern, .cta-pattern, .cta-band, .map-frame, .form, .share,
  .profile-actions, .profile-pager, .cat-tabs, .stat-cards, .lb, .socials, .footer-bottom a, .pgallery-thumbs, .ped-hint, .section-more, .hero-actions, .link-arrow { display: none !important; }
  *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; -webkit-text-fill-color: currentColor !important; }
  .hero-home, .page-hero, .section, .verify-page, .error-section { min-height: 0 !important; padding: 0 0 8mm !important; border: 0 !important; }
  .page-hero::before, .page-hero::after, .hero-home::before { display: none !important; }
  .hero-inner { padding: 0 !important; }
  .container { max-width: none; padding: 0; }
  h1, h2, h3 { break-after: avoid; }
  .hcard, .news-card, .champ-card, .medal-card, .pillar, .expert, .featured, .verify-card, .error-card, .facts, .facts div, .ped5, .ped-box, .titles li, .results-table tr { border-color: #999 !important; break-inside: avoid; }
  .hgrid, .news-grid, .gallery, .medal-wall, .champ-grid, .pillars, .experts { --cols: 3 !important; }
  .rows-on-phone .hgrid, .champ-grid { flex-wrap: wrap !important; overflow: visible !important; }
  .ped5 { overflow: visible; } .ped5 table { min-width: 0 !important; font-size: 9pt; }
  .reveal-pre, .reveal-pre .stagger > * { opacity: 1 !important; transform: none !important; }
  .site-footer { padding: 6mm 0 0; border-top: 1px solid #999; }
  a[href^="http"]:not([href*="wa.me"])::after { content: ""; }
}