/* ============================================================
   Inbar Lanir - "Gold is the one colour she has not taken yet"
   ------------------------------------------------------------
   Her own words: "I'm fast, dynamic, explosive, aggressive."
   The page is built to that sentence, not to a template.

   Ground is near-black carrying a judogi-blue undertone. The
   blue is never a fill; it lives inside the dark as a tint on a
   five-step elevation ramp, because on dark surfaces lightness
   is the depth cue and a flat saturated panel reads as 2000s
   wallpaper.

   One accent: gold. It is rationed on purpose. Silver and
   bronze appear as data in the record; gold appears only where
   she has actually taken it, and on the target. Most of the
   page has no gold in it at all. That is the point.

   Logical properties throughout, so the Hebrew RTL pages reuse
   this file unchanged.
   ============================================================ */

/* ---------- fonts: self-hosted, no third-party request ---------- */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/heebo-hebrew-400.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/heebo-latin-400.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: 'Heebo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/heebo-hebrew-700.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/heebo-latin-700.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: 'Heebo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/heebo-hebrew-900.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/assets/fonts/heebo-latin-900.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;
}

/* ---------- tokens ---------- */
:root {
  /* surfaces - five-step elevation ramp, blue lives here as undertone */
  --s0:  oklch(0.145 0.018 258);   /* page ground */
  --s1:  oklch(0.185 0.022 258);   /* raised band */
  --s2:  oklch(0.225 0.026 258);   /* card */
  --s3:  oklch(0.275 0.030 258);   /* hover / lifted card */
  --s4:  oklch(0.330 0.034 258);   /* popover, top of ramp */
  --hair: oklch(1 0 0 / 0.09);     /* hairline, never a solid border */
  --hair-2: oklch(1 0 0 / 0.16);
  --lift: oklch(1 0 0 / 0.07);     /* inset top-edge highlight */

  /* light inversion - used for one or two sections only */
  --gi:      oklch(0.968 0.004 258);
  --gi-2:    oklch(0.930 0.007 258);
  --gi-line: oklch(0.855 0.010 258);

  /* text */
  --on-dark:        oklch(0.975 0.004 258);
  --on-dark-muted:  oklch(0.735 0.016 258);
  --on-dark-faint:  oklch(0.605 0.018 258);  /* nudged up from 0.560: measured 4.26:1 on --s0, below the 4.5:1 floor for normal text */
  --on-gi:          oklch(0.190 0.030 258);
  --on-gi-muted:    oklch(0.435 0.024 258);

  /* the single accent. Gold, because that is the one she is going for. */
  --gold:      oklch(0.815 0.145 88);
  --gold-deep: oklch(0.680 0.130 82);
  --gold-dim:  oklch(0.815 0.145 88 / 0.16);

  /* medal swatches - data in the record, not decoration */
  --m-gold:   var(--gold);
  --m-silver: oklch(0.780 0.012 258);
  --m-bronze: oklch(0.620 0.085 55);

  /* type - one family, weight does the work. Heebo covers Hebrew and Latin,
     so the RTL pages are the same design and not a translated afterthought. */
  --display: "Heebo", "Arial Black", Helvetica, sans-serif;
  --body:    "Heebo", "Helvetica Neue", Arial, sans-serif;

  /* space */
  --pad:    clamp(1.25rem, 5vw, 5rem);
  --gutter: clamp(4.5rem, 10vw, 11rem);
  --shell:  80rem;

  /* radius - one scale, sharp end of it. A disciplined sport, not a friendly app. */
  --r:    4px;
  --r-lg: 8px;

  /* motion */
  --out:      cubic-bezier(0.23, 1, 0.32, 1);
  --out-soft: cubic-bezier(0.16, 1, 0.30, 1);
  --inout:    cubic-bezier(0.77, 0, 0.175, 1);

  /* z - semantic, never arbitrary */
  --z-grain: 1;
  --z-sticky: 100;
  --z-nav: 200;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--s0);
  color: var(--on-dark);
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.24vw, 1.14rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film grain. Fixed and pointer-events:none so it never repaints on scroll —
   it exists to stop the large dark gradients banding, not as texture for its
   own sake. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none; opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, iframe { display: block; max-inline-size: 100%; }
img { block-size: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: var(--gold); color: var(--s0); }

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

.skip {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--pad);
  z-index: var(--z-nav); background: var(--gi); color: var(--on-gi);
  padding: 0.75rem 1.25rem; font-weight: 700; border-radius: 0 0 4px 4px;
}
.skip:focus { inset-block-start: 0; }

.vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.035em;   /* floor is -0.04em; below that the letters touch */
  text-wrap: balance;
  text-transform: uppercase;  /* Latin only; Hebrew has no case, so it is a no-op there */
}
h2 { font-size: clamp(2.1rem, 1.2rem + 4vw, 4.2rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.6rem); line-height: 1.14; letter-spacing: -0.02em; }
p  { text-wrap: pretty; }
.lede { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem); line-height: 1.45; }
.prose { max-inline-size: 62ch; }
.prose p + p { margin-block-start: 1.05em; }

/* Hebrew has no ascenders or descenders to breathe with — give it more room
   and let go of the negative tracking, which only helps Latin. */
[lang="he"] { line-height: 1.75; }
[lang="he"] h1, [lang="he"] h2, [lang="he"] h3 { letter-spacing: 0; line-height: 1.18; }

/* ---------- shell ---------- */
.shell { max-inline-size: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
section { padding-block: var(--gutter); }
.band-gi { background: var(--gi); color: var(--on-gi); }
.band-gi h2, .band-gi h3 { color: var(--s0); }

/* ---------- header ---------- */
.site-head {
  position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
  background: color-mix(in oklab, var(--s0) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-block-end: 1px solid color-mix(in oklab, var(--on-dark) 12%, transparent);
}
.site-head__in {
  max-inline-size: var(--shell); margin-inline: auto;
  padding: 0.75rem var(--pad);
  display: flex; align-items: center; gap: 1.5rem;
}
.mark {
  font-family: var(--display); font-weight: 900; font-size: 1.02rem;
  letter-spacing: -0.02em; text-decoration: none; white-space: nowrap;
}
.mark span { color: var(--gold); }
.site-nav { margin-inline-start: auto; display: flex; align-items: center; gap: clamp(0.85rem, 2.2vw, 1.9rem); }
.site-nav a {
  position: relative; text-decoration: none; font-weight: 600; font-size: 0.94rem;
  color: var(--on-dark-muted); padding-block: 0.3rem;
  transition: color 180ms var(--out);
}
/* The visible row stays compact (the sticky header must not eat a short
   phone screen), so the 44px tap target is an invisible hit-area layered
   over it rather than added padding that would grow the header. */
.site-nav a::before {
  content: ""; position: absolute; inset-block: -8px; inset-inline: 0;
}
/* underline grows from the leading edge — mirrors correctly in RTL */
.site-nav a::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  inline-size: 100%; block-size: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--out);
}
@media (hover: hover) {
  .site-nav a:hover { color: var(--on-dark); }
  .site-nav a:hover::after { transform: scaleX(1); }
}
[dir="rtl"] .site-nav a::after { transform-origin: right; }
.site-nav a[aria-current]::after { transform: scaleX(1); }
.lang-switch {
  position: relative;
  font-weight: 700; font-size: 0.88rem; color: var(--on-dark);
  border: 1px solid var(--hair-2); border-radius: 999px;
  padding: 0.24rem 0.8rem; text-decoration: none;
  transition: background 200ms var(--out), border-color 200ms var(--out);
}
.lang-switch::after { display: none; }
/* Same invisible hit-area trick as .site-nav a — the pill stays its own
   compact size, the tap target grows to 44px around it. */
.lang-switch::before { content: ""; position: absolute; inset-block: -6px; inset-inline: -4px; }
@media (hover: hover) { .lang-switch:hover { background: var(--gold); border-color: var(--gold); } }
@media (max-width: 640px) {
  .site-nav .hide-sm { display: none; }
  .site-nav { gap: 0.7rem; }
  .site-nav a { font-size: 0.86rem; }
  .site-head__in { gap: 0.75rem; }
}
@media (max-width: 26rem) {
  .site-nav .hide-xs { display: none; }
  .mark { font-size: 0.95rem; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.6rem; border-radius: 3px;
  font-weight: 700; text-decoration: none;
  transition: background 200ms var(--out), border-color 200ms var(--out),
              color 200ms var(--out), transform 160ms var(--out);
}
.btn:active { transform: scale(0.97); transition-duration: 90ms; }  /* asymmetric: press fast, release slow */
.btn--solid { background: var(--gold); color: var(--s0); }
.btn--ghost { border: 2px solid var(--hair-2); color: var(--on-dark); }
.band-gi .btn--ghost { border-color: var(--gi-line); color: var(--on-gi); }
@media (hover: hover) {
  .btn--solid:hover { background: var(--gold-deep); }
  .btn--ghost:hover { border-color: var(--on-dark); }
  .band-gi .btn--ghost:hover { border-color: var(--s0); }
}
/* the arrow sits in its own well and leans out on hover */
.btn .arw {
  inline-size: 1.55rem; block-size: 1.55rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 0.9rem;
  background: color-mix(in oklab, currentColor 16%, transparent);
  transition: transform 260ms var(--out);
}
[dir="rtl"] .btn .arw { transform: scaleX(-1); }
@media (hover: hover) {
  .btn:hover .arw { transform: translateX(3px); }
  [dir="rtl"] .btn:hover .arw { transform: scaleX(-1) translateX(3px); }
}

/* ============================================================
   HERO — full height. The photo bleeds off three edges and the
   name overlaps it. Grid-breaking on purpose: the two planes
   fight for the same space, which is the whole sport.
   ============================================================ */
.hero {
  position: relative;
  padding-block: 0;
  display: grid;
  align-content: center;
  overflow: clip;
  background:
    radial-gradient(120% 90% at 78% 8%, color-mix(in oklab, var(--s1) 82%, white 6%) 0%, transparent 62%),
    linear-gradient(190deg, var(--s1) 0%, var(--s0) 100%);
}

@media (min-width: 60rem) { .hero { min-block-size: 100svh; } }
.hero__grid {
  max-inline-size: var(--shell); inline-size: 100%;
  margin-inline: auto; padding-inline: var(--pad);
  display: grid; grid-template-columns: 1fr;
  gap: 2.5rem; align-items: center;
  padding-block: clamp(5rem, 12vh, 7.5rem) clamp(8rem, 16vh, 10rem);
}

.hero__art { position: relative; justify-self: center; inline-size: min(100%, 26rem); }
.hero__art img {
  inline-size: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 18%;
  border-radius: 2px;
}
/* the tatami line: one rust rule down the leading edge of the frame */
.hero__art::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: -0.7rem;
  inline-size: 3px; background: var(--gold);
}
.hero__credit {
  margin-block-start: 0.7rem; font-size: 0.72rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--on-dark-muted);
}
[lang="he"] .hero__credit { text-transform: none; letter-spacing: 0.02em; font-size: 0.8rem; }

@media (min-width: 60rem) {
  .hero__grid {
    /* full-bleed grid: the gutter lives in padding-inline-start only, so the
       photo column runs all the way off the trailing edge. Split into two
       declarations so a bad calc can never drop both. */
    max-inline-size: none;
    inline-size: 100%;
    padding-inline-start: max(var(--pad), calc((100vw - var(--shell)) / 2 + var(--pad)));
    padding-inline-end: 0;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 0;
  }
  .hero__copy { grid-area: 1 / 1 / 2 / 2; position: relative; z-index: 2; }
  .hero__art  {
    grid-area: 1 / 2 / 2 / 3;
    inline-size: auto;
    margin-inline-start: -9rem;   /* slides under the name */
    z-index: 1;
  }
  .hero__art img { aspect-ratio: 3/4; block-size: min(64svh, 38rem); inline-size: 100%; object-position: 50% 14%; }
  .hero__art::before { inset-inline-start: -1.2rem; }
  .hero__credit { padding-inline-start: 0.2rem; }
}

/* masked line reveal — each word rides up out of its own box */
.hero__name { font-size: clamp(3.2rem, 1.1rem + 8.4vw, 6rem); letter-spacing: -0.038em; }
.hero__name .ln { display: block; overflow: hidden; padding-block-end: 0.06em; }
.hero__name .ln > span { display: block; }
.hero__he {
  font-family: var(--display); font-weight: 700; color: var(--on-dark-muted);
  font-size: clamp(1.35rem, 0.9rem + 1.9vw, 2.15rem);
  line-height: 1; margin-block: 0.5rem 1.4rem;
}
.hero__claim {
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.5rem);
  font-weight: 600; line-height: 1.35; max-inline-size: 20ch;
}
.hero__claim b { color: var(--gold); font-weight: 600; }
.hero__next { margin-block-start: 1.3rem; color: var(--on-dark-muted); max-inline-size: 32ch; }
.hero__cta { margin-block-start: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ---------- scoreboard strip ---------- */
.board {
  position: relative; z-index: 2;
  border-block: 1px solid color-mix(in oklab, var(--on-dark) 14%, transparent);
  background: color-mix(in oklab, var(--s0) 55%, transparent);
  backdrop-filter: blur(6px);
}
@media (min-width: 60rem) { .hero .board { position: absolute; inset-inline: 0; inset-block-end: 0; } }
.board__in {
  max-inline-size: var(--shell); margin-inline: auto; padding-inline: var(--pad);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.board dl { padding: 1.05rem 0; }
.board__in > dl + dl {
  border-inline-start: 1px solid color-mix(in oklab, var(--on-dark) 12%, transparent);
  padding-inline-start: 1.15rem;
}
.board dt {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--on-dark-muted); font-weight: 700;
}
.board dd { font-size: 1.02rem; font-weight: 700; margin-block-start: 0.18rem; font-variant-numeric: tabular-nums; }
[lang="he"] .board dt { text-transform: none; letter-spacing: 0.01em; font-size: 0.78rem; }

/* ============================================================
   IPPON — the moment. One number, one line. Everything on the
   page is quieter than this by design.
   ============================================================ */
.ippon {
  position: relative; text-align: center; overflow: clip;
  background: var(--s0);
  padding-block: clamp(6rem, 14vw, 11rem);
}
.ippon::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 100% at 50% 100%, color-mix(in oklab, var(--gold) 22%, transparent) 0%, transparent 70%);
}
.ippon > * { position: relative; }
.ippon__num {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(5rem, 2rem + 17vw, 15rem);
  line-height: 0.82; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--on-dark);
}
.ippon__word {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.3rem, 0.9rem + 1.8vw, 2.2rem);
  color: var(--gold); letter-spacing: 0.02em;
  margin-block-start: 0.5rem;
}
.ippon__say {
  margin-block-start: 1.6rem; margin-inline: auto; max-inline-size: 34ch;
  color: var(--on-dark-muted); font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
}
.ippon__cta { margin-block-start: 2.2rem; display: flex; justify-content: center; }

/* ---------- section heads ---------- */
.head { margin-block-end: clamp(2rem, 4vw, 3.5rem); max-inline-size: 44ch; }
.head p { margin-block-start: 0.8rem; color: var(--on-dark-muted); }
.band-gi .head p { color: var(--on-gi-muted); }

/* ---------- about ---------- */
.about { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 56rem) {
  .about { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .about__portrait { position: sticky; inset-block-start: 6rem; }
}
.about__portrait img { inline-size: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 2px; }
.pull {
  /* No accent side-stripe. The quote earns its weight from size and from a
     hanging quote mark, which is what a typesetter would actually do. */
  margin-block-start: 2.8rem;
  position: relative;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.35rem, 1rem + 1.35vw, 2rem); line-height: 1.22;
  letter-spacing: -0.02em;
  max-inline-size: 26ch;
}
/* The copy already carries real typographic quotes, so a decorative glyph
   would just double them. Hang the real ones instead. */
.pull { hanging-punctuation: first; }
.pull cite { display: block; margin-block-start: 0.7rem; font: 600 0.88rem/1 var(--body); font-style: normal; color: var(--on-dark-muted); }

/* ============================================================
   HONOURS — an index, not cards. Big year, event name that
   grows into the rust on hover, medal as a physical disc.
   ============================================================ */
.honours { border-block-start: 2px solid var(--s0); }
.honour {
  display: grid; align-items: baseline;
  grid-template-columns: minmax(5rem, auto) 1fr auto;
  gap: 0.35rem clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.4rem, 2.4vw, 2.1rem);
  border-block-end: 1px solid var(--gi-line);
  transition: background 260ms var(--out);
}
@media (hover: hover) {
  .honour:hover { background: var(--gi-2); }
  .honour:hover .honour__year { color: var(--gold); }
}
.honour__year {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3.2rem);
  line-height: 0.9; color: var(--on-gi-muted);
  font-variant-numeric: tabular-nums;
  transition: color 260ms var(--out);
}
.honour__what { font-weight: 700; font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem); color: var(--s0); line-height: 1.2; }
/* 1rem, not the 0.94rem it was: this line is a sentence someone reads
   (where and when the medal happened), not a label, so it holds the 16px
   body-text floor same as everything else in the record. */
.honour__where { color: var(--on-gi-muted); font-size: 1rem; margin-block-start: 0.25rem; }
@media (max-width: 46rem) {
  .honour { grid-template-columns: minmax(4rem, auto) 1fr; }
  .honour__medal { grid-column: 2; }
}

.medal { display: inline-flex; align-items: center; gap: 0.55rem; white-space: nowrap; font-weight: 700; font-size: 0.95rem; }
.medal::before {
  content: ""; inline-size: 0.8rem; block-size: 0.8rem; border-radius: 50%; flex: none;
  background: var(--dot, currentColor);
  box-shadow: inset 0 1px 1px color-mix(in oklab, white 45%, transparent);
}
.medal--gold   { --dot: var(--gold); }
.medal--silver { --dot: var(--m-silver); }
.medal--bronze { --dot: var(--m-bronze); }
.medal--title  { --dot: oklch(0.62 0.012 258); }   /* an award is not a gold medal */

/* ---------- results tables ---------- */
.table-wrap { position: relative; overflow-x: auto; }
/* The table scrolls sideways on a phone but nothing said so. .is-scrollable
   is set by site.js only when the table actually needs it (never guessed
   from a breakpoint), so this never paints over a table that already fits.
   The fade sits on the trailing edge — where the hidden columns are — and
   clears once scrolled to the end. */
.table-wrap.is-scrollable::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0;
  inline-size: 2.75rem; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--gi) 78%);
  transition: opacity 200ms var(--out);
}
[dir="rtl"] .table-wrap.is-scrollable::after {
  background: linear-gradient(to left, transparent, var(--gi) 78%);
}
.table-wrap.is-scrollable.at-end::after { opacity: 0; }
table.results { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-inline-size: 34rem; }
table.results caption { text-align: start; font-weight: 600; padding-block-end: 0.85rem; color: var(--on-gi-muted); font-size: 0.94rem; }
table.results th, table.results td {
  text-align: start; padding: 0.9rem 1rem 0.9rem 0;
  border-block-end: 1px solid var(--gi-line); vertical-align: baseline;
}
table.results thead th {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--on-gi-muted); border-block-end: 2px solid var(--s0); padding-block-end: 0.6rem;
}
[lang="he"] table.results thead th { text-transform: none; letter-spacing: 0; font-size: 0.84rem; }
table.results tbody tr { transition: background 200ms var(--out); }
@media (hover: hover) { table.results tbody tr:hover { background: var(--gi-2); } }
table.results td:first-child { font-weight: 700; inline-size: 5.5rem; }
table.results .event { font-weight: 600; color: var(--s0); }
table.results .where { display: block; font-size: 0.85rem; color: var(--on-gi-muted); font-weight: 400; }

/* ---------- video ---------- */
.videos { display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
@media (min-width: 62rem) {
  .videos { grid-template-columns: 1.6fr 1fr 1fr; align-items: start; }
  .videos > :first-child { grid-row: span 1; }
}
.vid { border: 0; padding: 0; background: none; text-align: start; cursor: pointer; display: block; inline-size: 100%; }
.vid__frame { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: 2px; background: var(--s0); }
.vid__frame img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform 700ms var(--out-soft), opacity 300ms var(--out);
}
.vid__play {
  position: absolute; inset: 0; margin: auto;
  inline-size: 3.6rem; block-size: 3.6rem; border-radius: 50%;
  background: var(--gold); display: grid; place-items: center;
  transition: transform 320ms var(--out);
}
.vid__play::after {
  content: ""; inline-size: 0; block-size: 0;
  border-inline-start: 1rem solid oklch(0.99 0 0);
  border-block: 0.64rem solid transparent;
  margin-inline-start: 0.28rem;
}
[dir="rtl"] .vid__play::after { transform: scaleX(-1); }
@media (hover: hover) {
  .vid:hover .vid__frame img { transform: scale(1.05); opacity: 0.8; }
  .vid:hover .vid__play { transform: scale(1.12); }
}
.vid:active .vid__play { transform: scale(0.97); transition-duration: 90ms; }
.vid__title { margin-block-start: 0.95rem; font-weight: 700; font-size: 1.05rem; }
.vid__meta { color: var(--on-dark-muted); font-size: 0.9rem; }
.vid iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }

/* ============================================================
   GALLERY — deliberately uneven. Two images earn full width;
   the rest sit in a tighter rhythm around them.
   ============================================================ */
.gallery { display: grid; gap: clamp(0.6rem, 1.4vw, 1.1rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 52rem) { .gallery { grid-template-columns: repeat(6, 1fr); } }
.gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: 2px; }
.gallery img {
  inline-size: 100%; block-size: 100%; object-fit: cover;
  filter: saturate(0.94);
  transition: transform 900ms var(--out-soft), filter 500ms var(--out);
}
@media (hover: hover) { .gallery figure:hover img { transform: scale(1.05); filter: saturate(1.06); } }
.gallery figcaption {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: 2.5rem 1rem 0.85rem;
  font-size: 0.8rem; font-weight: 600; color: oklch(0.99 0 0);
  background: linear-gradient(to top, oklch(0.14 0.04 258 / 0.85), transparent);
}
@media (min-width: 52rem) {
  .g-wide  { grid-column: span 4; aspect-ratio: 16/10; }
  .g-tall  { grid-column: span 2; aspect-ratio: 4/5; }
  .g-half  { grid-column: span 3; aspect-ratio: 3/2; }
  .g-third { grid-column: span 2; aspect-ratio: 3/2; }
  .g-full  { grid-column: span 6; aspect-ratio: 21/9; }
}
@media (max-width: 51.99rem) { .gallery figure { aspect-ratio: 4/3; } .g-wide, .g-full { grid-column: span 2; } }

/* ============================================================
   PARTNERS — the one thing both elite judo sites (Riner,
   Paltchik) treat as first-class. These are dark-ink logos, so
   each sits on its own white plate rather than being inverted
   with a brightness hack that washes it out.
   ============================================================ */
.partners-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 56rem) { .partners-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.partners-pitch p { color: var(--on-dark-muted); margin-block-start: 0.85rem; max-inline-size: 40ch; }
.partners-pitch .btn { margin-block-start: 1.8rem; }

.partners { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.partners li { list-style: none; }
.partners a, .partners span {
  display: grid; place-items: center;
  min-inline-size: 9.5rem; min-block-size: 5rem;
  padding: 1rem 1.5rem; border-radius: 3px;
  background: var(--gi);
  transition: transform 300ms var(--out), background 300ms var(--out);
}
.partners img {
  block-size: auto; inline-size: auto;
  max-block-size: 2.4rem; max-inline-size: 100%;
  filter: saturate(0.9); transition: filter 300ms var(--out);
}
@media (hover: hover) {
  .partners a:hover { transform: translateY(-3px); }
  .partners a:hover img { filter: none; }
}

/* ---------- contact ---------- */
.routes { list-style: none; padding: 0; margin-block: 1.6rem 2rem; display: grid; gap: 0; }
.routes li { border-block-start: 1px solid color-mix(in oklab, currentColor 28%, transparent); }
.routes li:last-child { border-block-end: 1px solid color-mix(in oklab, currentColor 28%, transparent); }
.routes a {
  display: flex; align-items: baseline; gap: 1rem;
  padding-block: 0.95rem; text-decoration: none; font-weight: 700;
  transition: padding-inline-start 260ms var(--out), opacity 200ms var(--out);
}
.routes a span { margin-inline-start: auto; font-weight: 400; opacity: 0.72; font-size: 0.9rem; }
@media (max-width: 40rem) { .routes a span { display: none; } }
@media (hover: hover) { .routes a:hover { padding-inline-start: 0.6rem; } }

.contact { background: var(--s2); color: var(--on-dark); border-block-start: 1px solid var(--hair); box-shadow: inset 0 1px 0 var(--lift); }
.contact h2 { color: inherit; }
.contact__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .contact__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.contact a.mail {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.35rem, 0.9rem + 2.2vw, 2.6rem);
  text-decoration: none; display: inline-block; word-break: break-word;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 3px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 320ms var(--out), opacity 200ms var(--out);
}
@media (hover: hover) { .contact a.mail:hover { background-size: 100% 100%; opacity: 0.92; } }
.socials { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-block-start: 1.4rem; list-style: none; padding: 0; }
.socials a {
  position: relative;
  display: inline-block; padding: 0.5rem 1.1rem; border-radius: 999px;
  border: 1.5px solid color-mix(in oklab, currentColor 42%, transparent);
  text-decoration: none; font-weight: 700; font-size: 0.9rem;
  transition: background 220ms var(--out), border-color 220ms var(--out), transform 160ms var(--out);
}
/* Measured 41px tall at 390px — just under the 44px tap-target floor. */
.socials a::before { content: ""; position: absolute; inset-block: -2px; inset-inline: 0; }
.socials a:active { transform: scale(0.97); transition-duration: 90ms; }
@media (hover: hover) { .socials a:hover { background: oklch(0.99 0 0 / 0.17); border-color: currentColor; } }

/* ---------- footer ---------- */
.site-foot { background: var(--s0); padding-block: 2.75rem; font-size: 0.88rem; color: var(--on-dark-muted); }
.site-foot__in { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.site-foot a { color: var(--on-dark); }
@media (min-width: 40rem) { .site-foot p:last-child { margin-inline-start: auto; } }

/* ============================================================
   MOTION
   Three distinct reveals, chosen per element. A single uniform
   fade-up on every section is the tell we are avoiding.
   ============================================================ */

/* hero: words ride up out of their masks, staggered */
@keyframes lift { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes plate { from { opacity: 0; transform: translateY(28px) scale(1.04); } to { opacity: 1; transform: none; } }

.hero__name .ln > span { animation: lift 1s var(--out-soft) both; }
.hero__name .ln:nth-child(2) > span { animation-delay: 90ms; }
.hero__he    { animation: fade 700ms var(--out) 260ms both; }
.hero__claim { animation: fade 700ms var(--out) 340ms both; }
.hero__next  { animation: fade 700ms var(--out) 420ms both; }
.hero__cta   { animation: fade 700ms var(--out) 500ms both; }
.hero__art   { animation: plate 1.1s var(--out-soft) 120ms both; }
.hero .board { animation: fade 700ms var(--out) 620ms both; }

/* Scroll reveals only exist once JS has confirmed it can undo them.
   Without JS every element renders in its final state. */
html.js .rv-mask,
html.js .rv-rise,
html.js .rv-zoom { --d: calc(var(--i, 0) * 55ms); }

html.js .rv-mask { clip-path: inset(0 0 100% 0); opacity: 0.001; }
html.js .rv-mask.in {
  clip-path: inset(0 0 0 0); opacity: 1;
  transition: clip-path 800ms var(--out-soft) var(--d), opacity 400ms var(--out) var(--d);
}

/* blur bridges the two states so the arrival reads as focus, not motion */
html.js .rv-rise { opacity: 0; transform: translateY(26px); filter: blur(6px); }
html.js .rv-rise.in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 700ms var(--out) var(--d), transform 800ms var(--out-soft) var(--d), filter 700ms var(--out) var(--d);
}

html.js .rv-zoom > img,
html.js .rv-zoom.rv-self { opacity: 0; transform: scale(1.07); }
html.js .rv-zoom.in > img,
html.js .rv-zoom.rv-self.in {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--out) var(--d), transform 1.1s var(--out-soft) var(--d);
}

@media (prefers-reduced-motion: reduce) {
  /* Keep a gentle fade — removing all motion entirely is its own failure. */
  *, *::before, *::after {
    animation-duration: 260ms !important;
    animation-delay: 0ms !important;
    transition-duration: 200ms !important;
    transition-delay: 0ms !important;
  }
  @keyframes lift  { from { opacity: 0; transform: none; } to { opacity: 1; transform: none; } }
  @keyframes plate { from { opacity: 0; transform: none; } to { opacity: 1; transform: none; } }
  @keyframes fade  { from { opacity: 0; transform: none; } to { opacity: 1; transform: none; } }
  html.js .rv-mask { clip-path: none; opacity: 0; }
  html.js .rv-mask.in { clip-path: none; opacity: 1; transition: opacity 260ms linear; }
  html.js .rv-rise { transform: none; filter: none; }
  html.js .rv-rise.in { transform: none; filter: none; }
  html.js .rv-zoom > img, html.js .rv-zoom.rv-self { transform: none; }
  html.js .rv-zoom.in > img, html.js .rv-zoom.rv-self.in { transform: none; }
  .btn:active, .socials a:active, .vid:active .vid__play { transform: none; }
}

/* ---------- print ---------- */
@media print {
  body { background: #fff; color: #000; }
  body::after, .site-head, .hero__art, .videos, .contact, .gallery, .ippon { display: none; }
}

/* ============================================================
   THE PROOF LINE
   This slot used to carry her own description of herself. A
   sponsor discounts self-description, so it now carries facts
   from the IJF, the sport's governing body, and each one shows
   its source. Her own voice is still on the page, attributed,
   in the About quote where it belongs.

   Hard cuts rather than crossfades: the motion should read like
   a scoreboard flipping, not a carousel easing.
   ============================================================ */
.hero__words {
  --hw-frame: 3.15rem;
  margin-block-start: 1.6rem;
}
@media (min-width: 48rem) { .hero__words { --hw-frame: 3.9rem; } }

.hw__slot {
  display: block; overflow: hidden;
  block-size: var(--hw-frame);
  border-inline-start: 1px solid var(--hair-2);
  padding-inline-start: 0.95rem;
}
.hw__reel { display: block; }
.hw__reel b {
  display: flex; flex-direction: column; justify-content: center;
  block-size: var(--hw-frame);
  font-family: var(--display); font-weight: 900;
  font-size: clamp(1.5rem, 1.05rem + 2vw, 2.6rem);
  line-height: 1.04; letter-spacing: -0.03em;
  color: var(--gold);
}
/* The source is the entire point of the change, so it is always visible
   rather than a hover reveal. */
.hw__reel b i {
  font: 500 0.74rem/1.2 var(--body); font-style: normal;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-block-start: 0.3rem;
}
[lang="he"] .hw__reel b i { text-transform: none; letter-spacing: 0.02em; font-size: 0.8rem; }

/* Four frames, three distinct facts, the fourth repeating the first so the
   loop closes without a visible jump back. */
@keyframes reel {
   0%, 26% { transform: translateY(0); }
  33%, 59% { transform: translateY(calc(-1 * var(--hw-frame))); }
  66%, 92% { transform: translateY(calc(-2 * var(--hw-frame))); }
 100%      { transform: translateY(calc(-3 * var(--hw-frame))); }
}
.hw__reel { animation: reel 12s var(--inout) infinite; }

/* ============================================================
   SCROLL-DRIVEN MOTION
   Native CSS timelines where the browser has them. No library,
   no scroll listener, nothing to jank. Everything below is an
   enhancement on top of content that is already visible.
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* The nine seconds get longer as you come down on them. The number
       is the event, so the scroll position is allowed to drive it. */
    .ippon__num {
      animation: ippon-grow linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 55%;
    }
    @keyframes ippon-grow {
      from { transform: scale(0.72); letter-spacing: 0.06em; opacity: 0.35; }
      to   { transform: scale(1);    letter-spacing: -0.04em; opacity: 1; }
    }

    /* The gold under the ippon rises with it rather than sitting there. */
    .ippon::before {
      animation: ippon-glow linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }
    @keyframes ippon-glow {
      from { opacity: 0; transform: translateY(30%); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* The hero photo holds still while the page moves past it. One
       subtle layer, not a parallax hero. */
    .hero__art img {
      animation: hero-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes hero-drift {
      from { transform: scale(1.06) translateY(-1.5%); }
      to   { transform: scale(1.06) translateY(1.5%); }
    }
  }
}

/* ============================================================
   SURFACE RAMP IN USE
   Sections sit at different heights instead of one flat fill.
   On a dark ground lightness is the depth cue, so this is what
   stops the page reading as a coloured wallpaper.
   ============================================================ */
.band-1 { background: var(--s1); }
.band-2 { background: var(--s2); }

/* Hairline separators instead of solid borders, and an inset top
   highlight so a raised band reads as edge-lit rather than pasted. */
.band-1, .band-2 {
  border-block-start: 1px solid var(--hair);
  box-shadow: inset 0 1px 0 var(--lift);
}

@media (prefers-reduced-motion: reduce) {
  .hw__reel { animation: none; }
  /* Without the reel, show one fact rather than a blank slot. */
  .hw__slot { block-size: auto; }
  .hw__reel b:not(:first-child) { display: none; }
}

/* The sub-minute tournament. A second fact, deliberately quieter than
   the 0:09, so the section still has one loud thing in it and not two.
   Quieter is colour and weight, not the 16px body-text floor — it stays
   a full sentence, so the size holds at 1rem. */
.ippon__also {
  margin-block-start: 1.1rem;
  color: var(--on-dark-faint);
  font-size: 1rem;
  max-inline-size: 46ch; margin-inline: auto;
}
.ippon__also b { color: var(--on-dark-muted); font-weight: 700; }

/* ============================================================
   HERO OVERLAP
   The two-column hero was polite: a text box next to a picture
   box, both rectangles, a clean seam down the middle. Breaking
   the seam is what stops it reading as a template. The name now
   crosses into the photograph, the photograph runs off the
   trailing edge, and a scrim keeps the type readable where the
   two planes overlap.
   ============================================================ */
@media (min-width: 68rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }

  .hero__copy {
    position: relative; z-index: 2;
    margin-inline-end: clamp(-9rem, -7vw, -4rem);
  }
  .hero__art {
    /* auto, not 100%: with a negative start margin, a percentage width resolves
       against the column and drags the whole box inward, leaving a gap at the
       trailing edge. auto + stretch pins the trailing edge to the viewport. */
    inline-size: auto; justify-self: stretch; align-self: stretch;
    margin-inline-start: clamp(-11rem, -8vw, -5rem);
    /* Cancel the grid's own vertical padding so the photograph runs the full
       height of the hero. Three edges bleed; only the leading one is a seam,
       and the scrim softens that one. */
    margin-block: calc(-1 * clamp(5rem, 12vh, 7.5rem)) calc(-1 * clamp(8rem, 16vh, 10rem));
    position: relative;
  }
  .hero__art img { aspect-ratio: auto; block-size: 100%; min-block-size: 34rem; }

  /* Scrim. Logical properties cannot express a gradient direction, so this is
     the one place the RTL page needs an explicit override. */
  .hero__art::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to right,
      var(--s0) 0%,
      color-mix(in oklab, var(--s0) 62%, transparent) 26%,
      transparent 58%);
  }
  [dir="rtl"] .hero__art::after {
    background: linear-gradient(to left,
      var(--s0) 0%,
      color-mix(in oklab, var(--s0) 62%, transparent) 26%,
      transparent 58%);
  }

  /* The gold edge-line belongs on the outside of the frame, not under a scrim. */
  .hero__art::before { display: none; }

  /* The credit sat on top of the photograph and was unreadable. Move it out
     to the bottom of the frame with its own footing. */
  .hero__credit {
    position: absolute; inset-block-end: 1rem; inset-inline-end: 1.25rem;
    margin: 0; z-index: 3;
    color: var(--on-dark);
    text-shadow: 0 1px 6px oklch(0.12 0.02 258 / 0.9);
  }

  /* Bigger. The name is the loudest thing on the page and it should be. */
  .hero__name { font-size: clamp(4rem, 1rem + 9.6vw, 8.2rem); }
}

/* ============================================================
   NARROW SCREENS
   Two real defects at 390px: the nav ran past the trailing edge
   and body{overflow-x:hidden} silently clipped the last links,
   and the two hero buttons sat on one row wider than the screen.
   Hiding overflow is not fixing it, so both now fit.
   ============================================================ */
@media (max-width: 46rem) {
  /* The nav scrolls rather than being clipped. Every link stays reachable. */
  .site-head__in { gap: 0.9rem; }
  .site-nav {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-inline-size: 0;
    padding-block: 0.15rem;
    /* Fade only the trailing edge, where links actually go out of view.
       Fading the leading edge too clipped the first link even when the
       nav had not been scrolled at all. */
    mask-image: linear-gradient(to right, #000 calc(100% - 1.4rem), transparent 100%);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  [dir="rtl"] .site-nav {
    mask-image: linear-gradient(to left, #000 calc(100% - 1.4rem), transparent 100%);
  }
  .site-nav a { white-space: nowrap; }
  .lang-switch { flex: 0 0 auto; }

  /* Buttons go full width and stack. A cut-off CTA is a dead CTA. */
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
  .hero__cta .btn { justify-content: center; inline-size: 100%; }
}

/* A button label must never wrap: shorten the label, do not let it break. */
.btn { white-space: nowrap; }

/* The hero is a grid, and its implicit column was `auto`, so it sized to the
   max-content of its widest child. The scoreboard strip never wraps, so at
   390px it demanded 720px and dragged the entire hero out with it, where
   overflow-x:hidden quietly clipped the buttons instead of showing a bug.
   minmax(0, 1fr) forbids a track from exceeding its container. */
.hero { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 46rem) {
  /* Two columns of stats rather than five in a clipped row. */
  .board__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board__in > dl + dl { border-inline-start: 0; padding-inline-start: 0; }
  .board dl { padding-block: 0.8rem; }
}

/* The portrait column was a short image above a tall empty gap. Letting it
   travel with the prose fills the column instead of leaving a hole. */
@media (min-width: 60rem) {
  .about__portrait { position: sticky; inset-block-start: 6rem; }
}

/* On the light band a pale gold dot nearly vanishes, so the medal swatches
   use their deeper cuts there. Same meaning, readable ground. */
.band-gi .medal--gold  { --dot: var(--gold-deep); }
.band-gi .medal--silver { --dot: oklch(0.62 0.012 258); }

/* ============================================================
   HERO PHOTO — NARROW SCREENS
   Below the desktop overlap breakpoint (68rem) the base rule caps
   the photo at 26rem and centres it, so on a phone it rendered as
   a small floating rectangle with dead space either side,
   disconnected from the name above it. Full-bleed it to the
   viewport edge instead, in a wider-but-shorter crop, so it reads
   as part of the hero rather than an afterthought under it. The
   desktop treatment (>=68rem, photo bleeding off the trailing
   edge under a scrim) is untouched — this only overrides the
   base centred-plate rule below it.
   ============================================================ */
@media (max-width: 67.99rem) {
  .hero__art {
    justify-self: stretch;
    /* cancel the hero grid's own inline padding so the photo runs edge
       to edge instead of sitting inside it */
    inline-size: calc(100% + 2 * var(--pad));
    margin-inline: calc(-1 * var(--pad));
  }
  .hero__art img {
    /* wide-but-short crop, checked against the source photo: her raised
       fist sits near the top of the frame and the vertical crop has to
       stay above it or it gets cut off */
    aspect-ratio: 4 / 3;
    object-position: 50% 0%;
    border-radius: 0;
  }
  /* No frame edge left to mark once the photo bleeds to the screen edge. */
  .hero__art::before { display: none; }
  /* The credit line sits below a full-bleed photo, not inside a frame
     with its own gutter, so it needs the page's own inline padding back. */
  .hero__credit { padding-inline: var(--pad); }
}

/* ============================================================
   PARTNERS PAGE
   Its job is different from the rest of the site: a brand is
   deciding whether to spend money, so every section has to
   answer "what would we actually get" rather than impress.
   Logos are deliberately NOT the first thing, and each partner
   gets a story rather than a bare mark, because a logo wall
   reads as an afterthought.
   ============================================================ */
.crumb {
  font-size: 0.9rem; color: var(--on-dark-muted);
  margin-block-end: 1.25rem;
}
.crumb span { margin-inline: 0.4rem; opacity: 0.5; }

.pt-hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem); }
.pt-hero h1 {
  font-size: clamp(2.8rem, 1.2rem + 6.4vw, 6rem);
  letter-spacing: -0.038em;
}
.pt-lede { margin-block-start: 1.4rem; max-inline-size: 46ch; color: var(--on-dark-muted); }

/* The four numbers a brand scans for before reading a word. */
.pt-facts {
  list-style: none; padding: 0; margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border-block-start: 1px solid var(--hair);
  padding-block-start: 1.5rem;
}
.pt-facts b {
  display: block; font-family: var(--display); font-weight: 900;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); line-height: 1;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.pt-facts span {
  display: block; margin-block-start: 0.45rem;
  font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-dark-faint);
}
[lang="he"] .pt-facts span { text-transform: none; letter-spacing: 0.02em; font-size: 0.9rem; }

.pt-why { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) { .pt-why { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }

/* One partner per row: logo on its own plate, story beside it. Not a grid of
   equal cards, because the partnerships are not equal and pretending they are
   is what makes these pages read as filler. */
.pt-list { list-style: none; padding: 0; margin: 0; }
.pt-card {
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-block-start: 1px solid var(--hair);
}
.pt-card:last-child { border-block-end: 1px solid var(--hair); }
@media (min-width: 46rem) {
  .pt-card { grid-template-columns: 14rem minmax(0, 1fr); }
}
/* Logos are supplied on white backgrounds, so they get a white plate rather
   than being knocked out onto the dark ground where they would look broken. */
.pt-card__logo {
  background: var(--gi); border-radius: var(--r);
  padding: 1rem 1.25rem; display: grid; place-items: center;
  inline-size: 14rem; max-inline-size: 100%;
  aspect-ratio: 5 / 2;
}
.pt-card__logo img { max-block-size: 100%; inline-size: auto; object-fit: contain; }
.pt-card__meta {
  font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--on-dark-faint); margin-block-end: 0.5rem;
}
[lang="he"] .pt-card__meta { text-transform: none; letter-spacing: 0.02em; font-size: 0.88rem; }
.pt-card h3 { margin-block-end: 0.6rem; }
.pt-card__body p:last-child { color: var(--on-dark-muted); max-inline-size: 60ch; }

/* Press: a link list, not logo soup. Every row goes somewhere checkable. */
.pt-press { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.pt-press li { border-block-start: 1px solid var(--hair); }
.pt-press li:last-child { border-block-end: 1px solid var(--hair); }
.pt-press a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem;
  padding-block: 1.05rem; text-decoration: none;
  transition: color 200ms var(--out);
}
.pt-press b { font-family: var(--display); font-weight: 900; font-size: 1.15rem; letter-spacing: -0.02em; }
.pt-press span { color: var(--on-dark-muted); font-size: 0.95rem; }
.pt-press a::after {
  content: "\2192"; margin-inline-start: auto; color: var(--on-dark-faint);
  transition: transform 200ms var(--out), color 200ms var(--out);
}
[dir="rtl"] .pt-press a::after { content: "\2190"; }
@media (hover: hover) {
  .pt-press a:hover { color: var(--gold); }
  .pt-press a:hover::after { color: var(--gold); transform: translateX(3px); }
  [dir="rtl"] .pt-press a:hover::after { transform: translateX(-3px); }
}

.pt-comeback .prose { max-inline-size: 60ch; }
.pt-comeback .btn { margin-block-start: 2rem; }

/* ============================================================
   PRESS INDEX
   Grouped rather than one long undifferentiated list, because a
   sponsor scans for the outlets they recognise. Outlet name is
   the loud part; the headline is secondary; the date is a right
   rail so the eye can date the whole column at a glance.
   ============================================================ */
.pr-groups { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); }
@media (min-width: 62rem) { .pr-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pr-group__title {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold);
  font-family: var(--body);
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--hair-2);
}
[lang="he"] .pr-group__title { text-transform: none; letter-spacing: 0.03em; font-size: 0.92rem; }

.pr-list { list-style: none; padding: 0; margin: 0; }
.pr-list li + li { border-block-start: 1px solid var(--hair); }
.pr-list a {
  display: grid; gap: 0.15rem 1rem; padding-block: 0.9rem;
  grid-template-columns: minmax(0, 1fr) auto;
  text-decoration: none;
  transition: color 180ms var(--out);
}
.pr-out {
  grid-column: 1; font-weight: 700; font-size: 0.95rem;
}
.pr-when {
  grid-column: 2; grid-row: 1;
  font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--on-dark-faint); white-space: nowrap; padding-block-start: 0.15rem;
  font-variant-numeric: tabular-nums;
}
[lang="he"] .pr-when { text-transform: none; letter-spacing: 0.02em; font-size: 0.86rem; }
.pr-ttl {
  grid-column: 1; grid-row: 2;
  color: var(--on-dark-muted); font-size: 0.95rem; line-height: 1.4;
}
@media (hover: hover) {
  .pr-list a:hover .pr-out { color: var(--gold); }
  .pr-list a:hover .pr-ttl { color: var(--on-dark); }
}