/* JP Tran — cinematic athlete page. Dark arena ground, champion gold as the single accent, warm white type.
   Tall condensed display for the name and headlines, Barlow for reading, Barlow Condensed caps for labels.
   One deliberate dark look (photos read best on it), so colors are set once, no light variant. */
@font-face { font-family: 'Big Shoulders Display'; src: url('/assets/fonts/big-shoulders.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow-500-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/assets/fonts/barlow-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/assets/fonts/barlow-condensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/assets/fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bg: #090B10;
  --bg-2: #0F131B;
  --surface: #151A24;
  --line: #2A3140;
  --text: #F3EFE7;
  --muted: #A8AEB9;
  --gold: #D9A845;
  --gold-hi: #F1C96A;
  --gold-ink: #15110A;
  --ok: #57C996;
  --err: #FF8E86;
  --display: 'Big Shoulders Display', 'Arial Narrow', 'Helvetica Neue', Impact, sans-serif;
  --body: 'Barlow', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.65 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--gold); }
a:hover { color: var(--gold-hi); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--gold-ink); padding: 10px 14px; z-index: 30; }
.skip:focus { left: 12px; }
.kicker { font: 700 0.95rem/1.3 var(--cond); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }

/* buttons: squared, condensed caps, like a fight poster */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border: 1.5px solid var(--gold); border-radius: 2px; background: var(--gold); color: var(--gold-ink); font: 700 1.02rem/1 var(--cond); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: var(--gold-ink); }
.btn-line { background: transparent; color: var(--gold); }
.btn-line:hover { background: var(--gold); color: var(--gold-ink); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 0.92rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(9, 11, 16, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(243, 239, 231, 0.08); }
.top-in { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.brand { font: 800 1.7rem/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.brand span { color: var(--gold); }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { color: var(--text); text-decoration: none; font: 700 0.95rem/1 var(--cond); letter-spacing: 0.16em; text-transform: uppercase; padding-block: 8px; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--gold); border-bottom-color: var(--gold); }
@media (max-width: 1080px) { .nav { display: none; } .nav + .aoj-menu { margin-left: auto; } }
/* AOJ menu in the top bar: native dropdown, links open AOJ's site in a new tab */
.top-in { position: relative; }
.aoj-menu { position: static; }
@media (min-width: 1081px) { .nav + .aoj-menu { margin-left: 4px; } }
.aoj-menu summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none; color: var(--text); font: 700 0.92rem/1 var(--cond); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; }
.aoj-menu summary::-webkit-details-marker { display: none; }
.aoj-menu summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.aoj-menu[open] summary { border-color: var(--line); background: var(--surface); }
.aoj-menu[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.aoj-menu summary:hover { color: var(--gold); }
.aoj-menu summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.aoj-pop { position: absolute; right: max(20px, env(safe-area-inset-right, 0px)); top: calc(100% - 4px); width: min(300px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); z-index: 30; }
.aoj-pop p { margin: 0; padding: 12px 16px 10px; color: var(--muted); font-size: 0.82rem; font-weight: 700; border-bottom: 1px solid var(--line); }
.aoj-pop ul { list-style: none; margin: 0; padding: 4px 0 6px; }
.aoj-pop a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 16px; color: var(--text); text-decoration: none; font-weight: 700; }
.aoj-pop a::after { content: "↗"; color: var(--gold); font-weight: 700; }
.aoj-pop a:hover, .aoj-pop a:focus-visible { background: var(--bg-2); color: var(--gold-hi); }
@media (max-width: 420px) { .aoj-long { display: none; } .top-in { gap: 10px; } .aoj-menu summary { padding: 0 10px; } }

/* photo slots: a real photo covers the slot; until one is added, a dark textured panel with a label shows */
.ph { margin: 0; position: relative; overflow: hidden; background: radial-gradient(120% 90% at 70% 20%, rgba(217, 168, 69, 0.14), transparent 60%), repeating-linear-gradient(135deg, #121722 0 14px, #0F131C 14px 28px); border: 1px solid var(--line); min-height: 200px; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph figcaption, .ph .cap { position: absolute; left: 14px; bottom: 14px; font: 700 0.78rem/1.2 var(--cond); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); background: rgba(9, 11, 16, 0.7); padding: 8px 12px; }
.ph img ~ figcaption, .ph img ~ .cap { display: none; }

/* hero: full-bleed photo, name set huge across it */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(90px, 14vw, 170px) 0; border-bottom: 1px solid var(--line); }
.hero-media { position: absolute; inset: 0; z-index: -2; border: 0; min-height: 0; }
/* JP's portrait: cut out, graded dark, set on the right and faded into the page */
.hero-media { left: auto; right: 0; width: 100%; bottom: 30%; background: none; }
.hero-media img { object-fit: contain; object-position: right center; opacity: 0.34; filter: contrast(1.08);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 40%), linear-gradient(to right, transparent 0%, #000 30%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to top, transparent 0%, #000 40%), linear-gradient(to right, transparent 0%, #000 30%, #000 88%, transparent 100%);
          mask-composite: intersect; }
@media (min-width: 900px) { .hero-media { width: 49%; right: 1%; top: 4%; bottom: 16%; } .hero-media img { opacity: 0.52; object-position: right center; } }
@media (min-width: 900px) and (max-width: 1199px) { .hero-media { width: 42%; top: 10%; } }
.hero-media figcaption { left: auto; right: max(20px, env(safe-area-inset-right, 0px)); top: 16px; bottom: auto; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 50% 60% at 72% 38%, rgba(217, 168, 69, 0.07), transparent 70%), linear-gradient(90deg, rgba(9, 11, 16, 0.85) 0%, rgba(9, 11, 16, 0.35) 40%, rgba(9, 11, 16, 0) 62%), linear-gradient(0deg, var(--bg) 0%, rgba(9, 11, 16, 0) 32%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.08; background-image: 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-in { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
h1 { font: 900 clamp(5.6rem, 21vw, 15.5rem)/0.8 var(--display); letter-spacing: -0.005em; text-transform: uppercase; color: var(--text); margin-left: -0.04em; }
h1 span { color: var(--gold); }
.hero-sub { font: 700 clamp(1.15rem, 2.4vw, 1.6rem)/1.2 var(--cond); letter-spacing: 0.2em; text-transform: uppercase; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); max-width: 44ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.titles { list-style: none; margin: clamp(56px, 8vw, 96px) 0 0; padding: 22px 0 26px; border-top: 1px solid rgba(243, 239, 231, 0.14); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.titles li { display: flex; gap: 12px; align-items: flex-start; }
.titles b { display: block; font: 700 1.15rem/1.15 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; }
.titles small { display: block; font: 600 0.82rem/1.3 var(--cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.medal { flex: none; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--gold-hi), var(--gold) 60%, #9C7425); box-shadow: 0 0 0 2px rgba(217, 168, 69, 0.22); margin-top: 3px; }
@media (max-width: 760px) { .titles { grid-template-columns: 1fr; gap: 14px; } }

/* quote band */
.band { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.band-in { padding-block: clamp(40px, 6vw, 64px); display: flex; justify-content: center; }
.quote { margin: 0; text-align: center; display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.quote p { font: italic 500 clamp(1.35rem, 3vw, 2.1rem)/1.35 var(--body); color: var(--text); }
.quote footer { font: 700 0.92rem/1.3 var(--cond); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }

/* sections */
.sec { padding-block: clamp(64px, 9vw, 120px); }
.sec-alt { background: var(--bg-2); }
.sec-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(32px, 4vw, 52px); max-width: 820px; }
h2 { font: 800 clamp(2.6rem, 6.2vw, 4.8rem)/0.92 var(--display); letter-spacing: 0; text-transform: uppercase; }
h3 { font: 700 1.5rem/1.1 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; }
.sub { color: var(--muted); max-width: 60ch; }

/* podium collage: newest/featured tournament large, the rest fill around it; each opens its portfolio */
.podium { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 300px; gap: 12px; }
.t { min-width: 0; }
.t:first-child { grid-row: span 2; }
.t:nth-child(2):last-child { grid-column: span 2; grid-row: span 2; }
.podium:has(> .t:nth-child(3):last-child) > .t:not(:first-child) { grid-column: span 2; }
.t:nth-child(4):last-child { grid-column: span 2; }
.t:nth-child(3n+6):last-child { grid-column: 1 / -1; }
.t:nth-child(3n+7):last-child { grid-column: span 2; }
.t-btn { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: border-color .2s ease; }
.t-btn:hover, .t-btn:focus-visible { border-color: var(--gold); }
.t-media { position: absolute; inset: 0; border: 0; min-height: 0; }
.t-media img { transition: transform .5s ease; }
.t-btn:hover .t-media img { transform: scale(1.04); }
.t-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9, 11, 16, 0.95) 0%, rgba(9, 11, 16, 0.55) 45%, rgba(9, 11, 16, 0) 75%); }
/* smaller tiles: keep the photo clear; only year, event and medals in a slim band at the bottom (division is in the portfolio) */
.t:not(:first-child) .t-media::after { background: linear-gradient(0deg, rgba(9, 11, 16, 0.92) 0%, rgba(9, 11, 16, 0.55) 26%, rgba(9, 11, 16, 0) 50%); }
.t:not(:first-child) .t-info { padding: 14px 16px 16px; gap: 5px; }
.t:not(:first-child) .t-year { font-size: 1.05rem; }
.t:not(:first-child) .t-event { font-size: clamp(1rem, 1.35vw, 1.2rem); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.t:not(:first-child) .res { font-size: 0.8rem; letter-spacing: 0.14em; }
.t:not(:first-child) .t-div, .t:not(:first-child) .t-more { display: none; }
.t:not(:first-child) .t-btn::after { content: "→"; position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(9, 11, 16, 0.7); border: 1px solid rgba(217, 168, 69, 0.6); color: var(--gold-hi); font: 700 1rem/1 var(--cond); transition: background .2s, color .2s; }
.t:not(:first-child) .t-btn:hover::after, .t:not(:first-child) .t-btn:focus-visible::after { background: var(--gold); color: var(--gold-ink); }
.t-media .cap { top: 14px; bottom: auto; }
.t-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; }
.t-year { font: 800 1.4rem/1 var(--display); color: var(--gold); }
.t-event { font: 700 clamp(1.2rem, 1.9vw, 1.55rem)/1.05 var(--cond); letter-spacing: 0.04em; text-transform: uppercase; }
.t:first-child .t-event { font: 800 clamp(2.2rem, 4.4vw, 3.6rem)/0.92 var(--display); letter-spacing: 0; }
.t:first-child .t-year { font-size: 1.8rem; }
.t-div { color: var(--muted); font-size: 0.92rem; line-height: 1.35; }
.t-more { margin-top: 6px; font: 700 0.85rem/1 var(--cond); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.t-more::after { content: " →"; }
.res { display: inline-flex; align-items: center; gap: 7px; font: 700 0.95rem/1 var(--cond); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.res .medal { margin: 0; }
.medal.silver { background: radial-gradient(circle at 35% 35%, #F4F6F8, #BFC5CC 60%, #858C95); box-shadow: 0 0 0 2px rgba(191, 197, 204, 0.22); }
.medal.bronze { background: radial-gradient(circle at 35% 35%, #F0B98A, #C07A43 60%, #85502A); box-shadow: 0 0 0 2px rgba(192, 122, 67, 0.22); }
@media (max-width: 760px) {
  .podium { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .podium > .t { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 4 / 3; }
  .podium > .t:first-child { aspect-ratio: 4 / 5; }
}

/* tournament portfolio (native dialog) */
html:has(dialog[open]) { overflow: hidden; }
dialog.pf { width: min(1080px, calc(100% - 24px)); max-height: calc(100% - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: 0; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); overflow: auto; }
dialog.pf::backdrop { background: rgba(4, 5, 8, 0.85); }
.pf-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px clamp(18px, 3vw, 30px); background: var(--bg-2); border-bottom: 1px solid var(--line); }
.pf-title { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pf-title h3 { font: 800 clamp(2rem, 4.5vw, 3.2rem)/0.92 var(--display); letter-spacing: 0; }
.pf-x { flex: none; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.pf-x:hover { border-color: var(--gold); color: var(--gold); }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: clamp(18px, 3vw, 30px); }
.pf-item { margin: 0; aspect-ratio: 4 / 3; min-height: 0; }
.pf-item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.pf-video video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.pf-empty { padding: 30px; color: var(--muted); }
@media (max-width: 640px) { .pf-grid { grid-template-columns: 1fr; } .pf-item:first-child { aspect-ratio: 4 / 3; } }

/* game plan: the steps are a real sequence, so they are numbered and connected */
.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: step; }
.chain li { position: relative; background: var(--surface); border: 1px solid var(--line); padding: 22px 18px 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chain li::before { counter-increment: step; content: counter(step, decimal-leading-zero); font: 800 2.2rem/1 var(--display); color: var(--gold); }
.chain li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -14px; width: 14px; height: 2px; background: var(--gold); }
.chain small { font: 700 0.8rem/1.2 var(--cond); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.chain b { font: 700 1.3rem/1.1 var(--cond); letter-spacing: 0.04em; text-transform: uppercase; }
.chain p { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.chain li:last-child p { color: var(--gold-ink); }
.own { margin-top: 28px; font: 600 1rem/1.5 var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.own span { color: var(--gold); margin-right: 10px; }
.chain li:last-child { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.chain li:last-child::before, .chain li:last-child small { color: var(--gold-ink); }
@media (max-width: 900px) {
  .chain { grid-template-columns: 1fr; gap: 12px; }
  .chain li { flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 16px; row-gap: 6px; padding: 16px 18px; }
  .chain p { flex-basis: 100%; }
  .chain li::before { font-size: 1.6rem; }
  .chain li:not(:last-child)::after { top: auto; bottom: -12px; right: auto; left: 34px; width: 2px; height: 12px; }
}

/* coach */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.coach-photo { aspect-ratio: 1320 / 1133; }
.coach-photo img { object-position: 50% 60%; }
.coach-text { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.coach-text > p:not(.kicker) { color: var(--muted); max-width: 60ch; }
.points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.points li { padding-left: 24px; position: relative; max-width: 60ch; color: var(--muted); }
.points li b { color: var(--text); }
.points li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 12px; height: 2px; background: var(--gold); }
.parents { margin-top: 6px; border: 1px solid var(--line); outline: 1px solid rgba(217, 168, 69, 0.35); outline-offset: -7px; padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; }
.parents h3 { color: var(--gold); font-size: 1.2rem; }
.parents ul { margin: 0; padding-left: 20px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* offers: one framed panel, three framed photos */
.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); border: 1px solid var(--line); outline: 1px solid rgba(243, 239, 231, 0.06); outline-offset: -10px; padding: clamp(22px, 3.5vw, 44px); }
.offer { display: flex; flex-direction: column; gap: 14px; min-width: 0; text-align: center; align-items: center; }
.offer h3 { font: 800 clamp(1.9rem, 3vw, 2.4rem)/1 var(--display); letter-spacing: 0.04em; }
.frame { width: 100%; aspect-ratio: 4 / 3; min-height: 0; outline: 1px solid rgba(243, 239, 231, 0.18); outline-offset: -8px; }
.tag { font: 700 0.88rem/1.3 var(--cond); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.offer p:not(.tag) { color: var(--muted); flex: 1; max-width: 40ch; }
@media (max-width: 900px) { .offers { grid-template-columns: 1fr; } }

/* events */
.events { list-style: none; margin: 0 0 20px; padding: 0; border-top: 2px solid var(--gold); }
.events li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.events .ev-empty { display: block; color: var(--muted); padding: 24px 0; }
.ev-date { font: 700 0.9rem/1.15 var(--cond); text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); font-variant-numeric: tabular-nums; }
.ev-date b { display: block; font: 800 3rem/0.95 var(--display); letter-spacing: 0; color: var(--gold); }
.ev-main b { display: block; font: 700 1.35rem/1.15 var(--cond); letter-spacing: 0.04em; text-transform: uppercase; }
.ev-main small { display: block; color: var(--muted); font-size: 0.98rem; margin-top: 4px; }
.ev-kind { font: 700 0.8rem/1 var(--cond); letter-spacing: 0.18em; text-transform: uppercase; padding: 9px 12px; border: 1px solid var(--gold); color: var(--gold); white-space: nowrap; }
.ev-kind.ex { border-style: dashed; border-color: var(--muted); color: var(--muted); }
.note { color: var(--muted); font-size: 0.98rem; }
@media (max-width: 640px) { .events li { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; } .ev-kind { grid-column: 2; justify-self: start; } .ev-date b { font-size: 2.4rem; } }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 260px; gap: 12px; }
.gallery .g-tall { grid-row: span 2; }
.gallery .ph { min-height: 0; transition: border-color .2s ease; }
.gallery .ph:hover { border-color: var(--gold); }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; } }

/* inquiry form */
.form-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.form-info { display: flex; flex-direction: column; gap: 18px; }
.form-info > p:not(.kicker) { color: var(--muted); max-width: 52ch; }
.rules { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.rules li { border-left: 2px solid var(--gold); padding: 2px 0 2px 16px; color: var(--muted); }
.form { background: var(--surface); border: 1px solid var(--line); padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.types { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.types legend { font: 700 1.05rem/1.2 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; padding: 0; }
.types label { position: relative; }
.types input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.types span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); font: 700 0.95rem/1 var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.types input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.types input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.f { display: flex; flex-direction: column; gap: 7px; font: 700 0.9rem/1.2 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; min-width: 0; }
.f i { font: 400 0.82rem/1.2 var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.f-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.f input, .f select, .f textarea { font: 400 1rem/1.4 var(--body); letter-spacing: 0; text-transform: none; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 2px; padding: 12px 14px; min-height: 48px; width: 100%; min-width: 0; }
.f input, .f select { height: 48px; }
.f input::placeholder, .f textarea::placeholder { color: #6F7684; }
.f textarea { resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217, 168, 69, 0.18); }
.f [aria-invalid="true"] { border-color: var(--err); }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } .row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .row3 .f:last-child { grid-column: 1 / -1; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status { min-height: 1.4em; font-weight: 600; }
.status.ok { color: var(--ok); }
.status.err { color: var(--err); }
.fine { font-size: 0.88rem; color: var(--muted); }
@media (max-width: 860px) { .form-split { grid-template-columns: 1fr; } }

/* footer */
.foot { border-top: 1px solid var(--line); padding-block: 40px 48px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; color: var(--muted); font-size: 0.95rem; }
.foot .brand { font-size: 1.5rem; }
.foot .links { display: flex; gap: 20px; }
.foot .links a { color: var(--text); text-decoration: none; font: 700 0.9rem/1 var(--cond); letter-spacing: 0.14em; text-transform: uppercase; }
.foot .links a:hover { color: var(--gold); }
.foot .credit { margin-left: auto; font: 600 0.82rem/1.3 var(--cond); letter-spacing: 0.16em; text-transform: uppercase; }
@media (max-width: 640px) { .foot .credit { margin-left: 0; } }

/* legal pages */
.legal { max-width: 780px; padding-block: 56px 88px; }
.legal h1 { font: 800 clamp(2.8rem, 8vw, 4.4rem)/0.95 var(--display); text-transform: uppercase; margin: 0 0 10px; color: var(--text); }
.legal h2 { font: 700 1.35rem/1.2 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; margin: 34px 0 10px; }
.legal p, .legal li { color: var(--muted); }
.legal b { color: var(--text); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal .updated { font: 700 0.85rem/1.3 var(--cond); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 30px; }

/* portfolio summary line (counted from tournaments.json) */
.tally { font: 700 1.05rem/1.3 var(--cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 32px; }
.tally .stat { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.tally b { font: 800 2.6rem/1 var(--display); letter-spacing: 0; color: var(--gold); font-variant-numeric: tabular-nums; }

/* scrolling titles strip */
.ticker { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--gold); color: var(--gold-ink); }
.ticker-track { display: flex; width: max-content; animation: tick 38s linear infinite; }
.ticker span { font: 800 1.35rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; padding: 14px 0; white-space: nowrap; display: inline-flex; align-items: center; }
.ticker span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-ink); margin: 0 28px; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* seminars */
.sems { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sem { min-width: 0; }
.sem-btn { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease; }
.sem-btn:hover, .sem-btn:focus-visible { border-color: var(--gold); }
.sem-media { aspect-ratio: 4 / 3; min-height: 0; border: 0; border-bottom: 1px solid var(--line); }
.sem-media img { transition: transform .5s ease; }
.sem-btn:hover .sem-media img { transform: scale(1.04); }
.sem-media .cap { top: 14px; bottom: auto; }
.sem-info { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; flex: 1; }
.sem-name { font: 800 clamp(1.7rem, 2.6vw, 2.2rem)/0.95 var(--display); text-transform: uppercase; }
.sem-sum { color: var(--muted); font-size: 0.98rem; flex: 1; }
.sem-cta { margin-top: 28px; }
.pf-sum { color: var(--muted); max-width: 62ch; }
@media (max-width: 900px) { .sems { grid-template-columns: 1fr; } }

/* gallery: filters + photos that open in a viewer */
.sec-head-row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; max-width: none; gap: 18px 32px; }
.sec-head-text { display: flex; flex-direction: column; gap: 14px; }
.ig { gap: 10px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.filters { border: 0; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.filters label { position: relative; }
.filters input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.filters span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); font: 700 0.95rem/1 var(--cond); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.filters input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.filters input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.gallery { grid-auto-flow: dense; }
.g-item { display: block; padding: 0; font: inherit; color: inherit; cursor: zoom-in; }
.g-item img { transition: transform .5s ease; }
.g-item:hover img { transform: scale(1.04); }
.g-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gal:has(#gfComp:checked) .g-item:not([data-tag~="competition"]),
.gal:has(#gfTeach:checked) .g-item:not([data-tag~="teaching"]) { display: none; }

/* photo viewer */
dialog.lb { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: max(56px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px)); border: 0; background: rgba(5, 6, 9, 0.96); color: var(--text); }
dialog.lb[open] { display: flex; align-items: center; justify-content: center; gap: 12px; }
dialog.lb::backdrop { background: rgba(5, 6, 9, 0.9); }
.lb-fig { margin: 0; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.lb-fig img { max-width: 100%; max-height: calc(100% - 48px); object-fit: contain; }
.lb-fig figcaption { color: var(--muted); font-size: 0.95rem; text-align: center; max-width: 70ch; }
.lb-x { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
.lb-nav { flex: none; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: rgba(9, 11, 16, 0.7); color: var(--text); cursor: pointer; }
.lb-nav:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 640px) { .lb-nav { position: absolute; bottom: max(14px, env(safe-area-inset-bottom, 0px)); } .lb-prev { left: 16px; } .lb-next { right: 16px; } .lb-fig img { max-height: calc(100% - 120px); } }

/* sections slide up a little as they come into view (they are always visible) */
@media (prefers-reduced-motion: no-preference) {
  html.js .rv { transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .8s ease; }
  html.js .rv:not(.in) { transform: translateY(26px); opacity: 0.35; }
}


/* match highlight videos */
.hl-title { font: 700 1.2rem/1.2 var(--cond); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.hls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 44px; }
.hl { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hl video { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 560px; object-fit: cover; background: #000; border: 1px solid var(--line); }
.hl figcaption { display: flex; flex-direction: column; gap: 2px; }
.hl figcaption b { font: 700 1.05rem/1.2 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; }
.hl figcaption span { color: var(--muted); font-size: 0.88rem; }
@media (max-width: 760px) { .hls { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .hl { scroll-snap-align: start; } }