/* Van 't Hof September Challenge — page-specific layer over styles.css. */
.vh-skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--red); color: #fff; padding: 10px 16px; font-family: var(--mono); font-size: .7rem; text-transform: uppercase; text-decoration: none; }
.vh-skip:focus { left: 12px; top: 12px; }
.vh-main { padding-bottom: 0; }
.vh-main h1, .vh-main h2, .vh-main h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; }
.vh-main [data-summary], .vh-main [data-count], .vh-table, .vh-private-stat b { font-variant-numeric: tabular-nums; }

.vh-hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(330px, .72fr); gap: clamp(34px, 7vw, 90px); align-items: center; min-height: min(790px, calc(100vh - 65px)); padding: 64px 0; position: relative; border-bottom: 1px solid var(--border); }
.vh-hero::before { content: ''; position: absolute; inset: 0 -50vw 0 46%; pointer-events: none; background: repeating-linear-gradient(115deg, transparent 0 20px, color-mix(in srgb, var(--t1) 5%, transparent) 20px 21px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, transparent 88%); mask-image: linear-gradient(90deg, transparent, #000 35%, transparent 88%); }
.vh-hero-copy, .vh-prize { position: relative; z-index: 1; }
.vh-lockup { display: flex; align-items: center; gap: 16px; height: 60px; margin-bottom: 26px; }
/* The partner crest sits on its OWN WHITE PLATE in both themes.
   assets/partners/vanthof.png is the white-on-dark variant — 63% of its
   opaque pixels are near-white, so on this light-canonical page it rendered
   as an unreadable dark blob. This is the federation's colour artwork,
   trimmed to its content box (assets/vanthof-crest.png). A partner's mark
   gets a plate rather than a filter, so it is never recoloured; same call as
   .ap-gym-hero on the landing page. */
.vh-crest { display: inline-flex; padding: 5px 8px; background: #FFFFFF; border: 1px solid var(--border-light); border-radius: 3px; }
.vh-crest img { display: block; width: 100px; height: 48px; object-fit: contain; }
.vh-clinchr { font-family: var(--display); font-size: 1.75rem; letter-spacing: .045em; line-height: 1; }
.vh-clinchr span { color: var(--red); }
.vh-lockup-x { color: var(--t3); font-family: var(--mono); font-size: .8rem; }
.vh-kicker { color: var(--red); font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 14px; animation: vhRise .65s cubic-bezier(.16,1,.3,1) both; }
.vh-hero h1 { font-size: clamp(4rem, 8.1vw, 7.3rem); letter-spacing: -.01em; line-height: .86; max-width: 780px; color: var(--t1); animation: vhRise .8s cubic-bezier(.16,1,.3,1) .06s both; }
/* inline-block + an explicit line-height, so the ::after below hangs off a box
   that ends where the WORD ends. As a plain inline, this span's box is the
   font's full em box, which under the h1's line-height: .86 overhangs the
   visible glyphs by ~33px at desktop size — the rule then sat 40px lower than
   designed, clearing the paragraph beneath it by THREE pixels. Three pixels is
   not a margin: a fallback font before Anton swaps in, a zoom step, or another
   browser's metrics all tip it into the sub line, which is exactly what it was
   doing. Measured after this change: rule bottom 504, paragraph top 541. */
.vh-hero h1 span { color: var(--red); position: relative; display: inline-block; line-height: .86; }
.vh-hero h1 span::after { content: ''; position: absolute; left: 1%; right: 0; bottom: -.08em; height: .035em; min-height: 3px; background: var(--red); transform-origin: left; animation: vhLine .75s cubic-bezier(.16,1,.3,1) .7s both; }
.vh-hero-sub { color: var(--t2); font-size: 1.03rem; line-height: 1.65; max-width: 51ch; margin: 28px 0 26px; animation: vhRise .8s cubic-bezier(.16,1,.3,1) .2s both; }
.vh-phase-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vh-phase { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px; border: 1px solid var(--border-light); background: var(--surface); font-family: var(--mono); font-size: .61rem; letter-spacing: .16em; text-transform: uppercase; }
.vh-phase i, .vh-live-dot { width: 6px; height: 6px; background: var(--red); border-radius: 50%; display: inline-block; box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 40%, transparent); animation: vhPulse 2s ease-out infinite; }
.vh-phase[data-state="finished"] i { background: var(--t3); animation: none; }
.vh-phase[data-state="live"] i, .vh-live-dot { background: var(--green); }
.vh-phase-note { font-family: var(--mono); font-size: .6rem; color: var(--t3); letter-spacing: .12em; text-transform: uppercase; }
.vh-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 78px)); gap: 6px; margin: 12px 0 25px; }
.vh-countdown > span { display: flex; flex-direction: column; padding: 10px 11px 8px; background: var(--surface); border: 1px solid var(--border); }
.vh-countdown b { font-family: var(--display); font-size: 1.65rem; font-weight: 400; line-height: 1; color: var(--t1); }
.vh-countdown i { font-style: normal; font-family: var(--mono); font-size: .51rem; letter-spacing: .15em; text-transform: uppercase; color: var(--t3); margin-top: 5px; }
.vh-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.vh-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--border-light); color: var(--t1); background: var(--surface); font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }
.vh-button:hover { transform: translateY(-2px); border-color: var(--t2); }
.vh-button--primary { background: var(--red); border-color: var(--red); color: #fff; }
.vh-button--primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.vh-proof-note { max-width: 58ch; color: var(--t3); font-size: .72rem; line-height: 1.5; margin-top: 12px; }

.vh-prize { min-height: 590px; padding: 24px; background: #0D0D0E; color: #F5F5F2; border: 1px solid #262629; box-shadow: 0 35px 90px -45px rgba(0,0,0,.72); overflow: hidden; transform: rotate(1deg); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.vh-prize:hover { transform: rotate(0deg) translateY(-4px); }
.vh-prize::before { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(229,57,53,.12), transparent 35%), repeating-linear-gradient(115deg, transparent 0 16px, rgba(255,255,255,.025) 16px 17px); pointer-events: none; }
.vh-prize-top { position: relative; display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); text-transform: uppercase; letter-spacing: .2em; font-size: .62rem; }
.vh-prize-top b { color: #EF3A36; font-family: var(--display); font-size: 2.4rem; font-weight: 400; letter-spacing: .01em; }
/* The emblem is the Clinchr mark itself — a geometric boxing glove — not a
   redrawn approximation of one. The glow behind it is the card's own red,
   so the mark reads as struck INTO the poster rather than pasted on top. */
.vh-glove { position: relative; height: 292px; display: grid; place-items: center; }
.vh-glove::before { content: ''; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(229,57,53,.20), transparent 68%); filter: blur(6px); }
.vh-glove img { position: relative; width: 252px; height: 252px; object-fit: contain; filter: drop-shadow(0 22px 42px rgba(229,57,53,.22)); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.vh-prize:hover .vh-glove img { transform: rotate(-4deg) scale(1.025); }
.vh-prize-label { position: relative; font-family: var(--mono); font-size: .55rem; letter-spacing: .23em; text-transform: uppercase; color: #8E8E8B; }
.vh-prize h2 { position: relative; font-size: clamp(2.7rem, 5vw, 4.1rem); line-height: .9; margin: 5px 0; }
.vh-prize > p:not(.vh-prize-label) { position: relative; color: #A9A9A5; }
.vh-prize-stamp { position: relative; margin-top: 24px; padding-top: 14px; border-top: 1px solid #2B2B2E; color: #777773; font-family: var(--mono); font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; }

.vh-tape { display: grid; grid-template-columns: repeat(3, 1fr) minmax(210px, 1.2fr); border-bottom: 1px solid var(--border); }
.vh-tape > div { padding: 24px 22px; border-right: 1px solid var(--border); }
.vh-tape span { display: block; font-family: var(--mono); font-size: .57rem; letter-spacing: .16em; color: var(--t3); text-transform: uppercase; }
.vh-tape b { display: block; margin-top: 7px; font-family: var(--display); font-size: 2.3rem; font-weight: 400; color: var(--t1); line-height: 1; }
.vh-tape p { padding: 24px 0 24px 24px; display: flex; align-items: center; gap: 9px; color: var(--t3); font-size: .68rem; line-height: 1.45; }

.vh-board, .vh-activity, .vh-rules { padding: 78px 0; border-bottom: 1px solid var(--border); }
.vh-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 32px; }
.vh-section-head p { font-family: var(--mono); color: var(--red); font-size: .61rem; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 9px; }
.vh-section-head h2 { color: var(--t1); font-size: clamp(2.7rem, 5vw, 4.6rem); line-height: .92; }
.vh-section-head > span { color: var(--t3); font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; max-width: 32ch; text-align: right; }

.vh-podium { min-height: 210px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; margin-bottom: 28px; }
.vh-podium-card { min-height: 168px; border: 1px solid var(--border); background: var(--surface); padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; animation: vhRow .55s cubic-bezier(.16,1,.3,1) both; }
.vh-podium-card--one { min-height: 205px; border-color: color-mix(in srgb, var(--red) 48%, var(--border)); }
.vh-podium-rank { position: absolute; top: -7px; right: 12px; font-family: var(--display); font-size: 5rem; line-height: 1; color: var(--surface-alt); }
.vh-podium-card--one .vh-podium-rank { color: color-mix(in srgb, var(--red) 15%, var(--surface)); }
.vh-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--surface-alt); display: grid; place-items: center; overflow: hidden; color: var(--t2); font-family: var(--mono); font-size: .75rem; font-weight: 500; }
.vh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vh-podium-card h3 { position: relative; font-family: 'DM Sans', sans-serif; font-size: 1rem; text-transform: none; font-weight: 650; margin: 10px 0 2px; }
.vh-podium-time { color: var(--red); font-family: var(--display); font-size: 2rem; line-height: 1; }
.vh-podium-meta { color: var(--t3); font-family: var(--mono); font-size: .56rem; letter-spacing: .08em; margin-top: 5px; text-transform: uppercase; }

.vh-table { min-height: 410px; border-top: 1px solid var(--border); }
.vh-table-head, .vh-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 110px 150px; align-items: center; gap: 14px; }
.vh-table-head { min-height: 42px; color: var(--t3); font-family: var(--mono); font-size: .54rem; letter-spacing: .13em; text-transform: uppercase; }
.vh-table-head span:nth-child(n+3) { text-align: right; }
.vh-row { min-height: 68px; border-top: 1px solid var(--border); padding: 8px 0; position: relative; animation: vhRow .5s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--row) * 45ms); }
.vh-row::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; background: var(--red); transform: scaleY(0); transition: transform .2s ease; }
.vh-row:hover::before { transform: scaleY(1); }
.vh-row-rank { color: var(--t3); font-family: var(--display); font-size: 1.5rem; }
.vh-fighter { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vh-fighter b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-row-sessions, .vh-row-time { text-align: right; font-family: var(--mono); font-size: .75rem; }
.vh-row-sessions { color: var(--t3); }
.vh-row-time { color: var(--t1); font-weight: 500; }

.vh-activity-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .5fr); gap: 40px; align-items: start; }
.vh-activity-list { min-height: 350px; border-top: 1px solid var(--border); }
.vh-activity-row { min-height: 78px; padding: 13px 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; animation: vhRow .5s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--row) * 45ms); }
.vh-activity-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vh-activity-name b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh-activity-name small { display: block; color: var(--t3); font-size: .7rem; margin-top: 2px; }
.vh-activity-end { text-align: right; }
.vh-activity-end > b { font-family: var(--mono); font-size: .78rem; }
.vh-proof-chips { display: flex; justify-content: flex-end; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.vh-chip { padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--green) 12%, transparent); color: var(--green); font-family: var(--mono); font-size: .49rem; letter-spacing: .09em; text-transform: uppercase; animation: vhChip .35s cubic-bezier(.34,1.56,.64,1) both; }
.vh-chip--pending { max-width: 240px; border-radius: 2px; background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); letter-spacing: .02em; text-transform: none; line-height: 1.35; }
.vh-private-count { padding: 26px; background: var(--surface); border: 1px solid var(--border); position: sticky; top: 92px; }
.vh-private-count span { font-family: var(--mono); font-size: .58rem; color: var(--blue); letter-spacing: .17em; text-transform: uppercase; }
/* Number and unit are two elements, not one string. They used to be a single
   "0 sessions" written into one 4rem display element, which wrapped to "0" on
   one line and "sessions" on the next — an orphaned digit above its own label.
   This is the same b + i lockup the countdown already uses, so the page states
   a number in one way, not two. */
.vh-private-stat { margin: 16px 0 10px; }
.vh-private-stat b { display: block; font-family: var(--display); font-size: 4.4rem; font-weight: 400; line-height: .9; color: var(--t1); }
.vh-private-stat i { display: block; font-style: normal; font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--t3); margin-top: 9px; }
.vh-private-count p { color: var(--t2); font-size: .82rem; line-height: 1.55; }

.vh-rule-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* flex-start, NOT space-between. With space-between the number pinned to the
   top and the text block to the BOTTOM, so each column's title landed at a
   different height depending on how long its body copy was — three steps that
   read as three unrelated columns. Top-aligned with a fixed gap, plus a
   two-line floor under the h3, puts the number, the title and the body on the
   same three lines across all three. The floor is lifted at 640px, where the
   grid is a single column and it would only add dead space. */
.vh-rule-grid li { min-height: 230px; padding: 26px; display: flex; flex-direction: column; justify-content: flex-start; gap: 30px; border-right: 1px solid var(--border); }
.vh-rule-grid li:last-child { border-right: 0; }
.vh-rule-grid li > span { font-family: var(--mono); color: var(--red); font-size: .64rem; letter-spacing: .16em; }
.vh-rule-grid h3 { font-size: 1.7rem; line-height: 1; margin-bottom: 10px; min-height: 3.4rem; }
.vh-rule-grid p { color: var(--t2); font-size: .85rem; line-height: 1.55; }
.vh-rule-fineprint { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 24px; color: var(--t3); font-size: .74rem; line-height: 1.55; }
.vh-rule-fineprint b { color: var(--t2); }

.vh-final { padding: 100px 0 110px; text-align: center; }
.vh-final > p { color: var(--red); font-family: var(--mono); font-size: .65rem; letter-spacing: .24em; text-transform: uppercase; }
.vh-final h2 { font-size: clamp(3.4rem, 8vw, 7rem); line-height: .88; margin: 18px auto 34px; }
.vh-final h2 span { color: var(--red); }
.vh-actions--center { justify-content: center; }

.vh-empty { min-height: 220px; display: grid; place-items: center; text-align: center; color: var(--t3); border-top: 1px solid var(--border); padding: 38px; }
.vh-empty b { display: block; color: var(--t1); font-size: 1rem; margin-bottom: 5px; }
.vh-skeleton-card, .vh-skeleton-row { position: relative; overflow: hidden; background: var(--surface); }
.vh-skeleton-row { height: 68px; border-bottom: 1px solid var(--border); }
.vh-skeleton-card::after, .vh-skeleton-row::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, color-mix(in srgb, var(--t1) 5%, transparent) 48%, transparent 72%); transform: translateX(-100%); animation: vhShimmer 1.5s ease-in-out infinite; }
.vh-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.vh-reveal.is-visible { opacity: 1; transform: none; }
.vh-updating { animation: vhFade .4s ease both; }

@keyframes vhRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes vhLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vhPulse { 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes vhRow { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vhChip { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: scale(1); } }
@keyframes vhShimmer { to { transform: translateX(100%); } }
@keyframes vhFade { 50% { opacity: .55; } }

@media (max-width: 900px) {
  .vh-hero { grid-template-columns: 1fr; min-height: 0; padding: 54px 0 64px; }
  .vh-hero::before { inset: 45% -50vw 0 20%; }
  .vh-prize { width: min(100%, 520px); justify-self: center; min-height: 540px; transform: rotate(.5deg); }
  .vh-tape { grid-template-columns: repeat(3, 1fr); }
  .vh-tape p { grid-column: 1 / -1; padding: 17px 0; border-top: 1px solid var(--border); }
  .vh-activity-grid { grid-template-columns: 1fr; }
  .vh-private-count { position: static; }
}

@media (max-width: 640px) {
  .vh-main { padding: 0 16px; }
  .vh-hero { padding: 38px 0 48px; gap: 34px; }
  .vh-lockup { height: 48px; margin-bottom: 21px; }
  .vh-crest { padding: 4px 7px; }
  .vh-crest img { width: 78px; height: 38px; }
  .vh-clinchr { font-size: 1.45rem; }
  .vh-kicker { font-size: .58rem; letter-spacing: .21em; }
  .vh-hero h1 { font-size: clamp(3.45rem, 17vw, 5rem); }
  .vh-hero-sub { margin: 24px 0 22px; font-size: .94rem; }
  .vh-countdown { grid-template-columns: repeat(4, 1fr); }
  .vh-countdown > span { padding: 9px 8px 7px; }
  .vh-countdown b { font-size: 1.4rem; }
  .vh-actions .vh-button { width: 100%; }
  .vh-proof-note { font-size: .68rem; }
  .vh-prize { min-height: 490px; padding: 20px; }
  .vh-glove { height: 240px; }
  .vh-glove::before { width: 215px; height: 215px; }
  .vh-glove img { width: 212px; height: 212px; }
  .vh-prize h2 { font-size: 2.8rem; }
  .vh-tape { grid-template-columns: 1fr; }
  .vh-tape > div { border-right: 0; border-bottom: 1px solid var(--border); padding: 18px 0; display: grid; grid-template-columns: 1fr auto; align-items: end; }
  .vh-tape b { margin: 0; }
  .vh-tape p { grid-column: auto; border-top: 0; padding: 17px 0; }
  .vh-board, .vh-activity, .vh-rules { padding: 56px 0; }
  .vh-section-head { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 25px; }
  .vh-section-head > span { text-align: left; }
  .vh-podium { grid-template-columns: 1fr; align-items: stretch; min-height: 0; }
  .vh-podium-card, .vh-podium-card--one { min-height: 128px; }
  .vh-podium-card--one { order: -1; }
  .vh-table { min-height: 370px; }
  .vh-table-head, .vh-row { grid-template-columns: 42px minmax(0, 1fr) 96px; gap: 9px; }
  .vh-table-head span:nth-child(3), .vh-row-sessions { display: none; }
  .vh-table-head span:nth-child(4) { grid-column: 3; }
  .vh-row-time { font-size: .68rem; }
  .vh-avatar { width: 36px; height: 36px; }
  .vh-activity-row { align-items: start; }
  .vh-activity-end { min-width: 100px; }
  .vh-chip--pending { max-width: 140px; }
  .vh-rule-grid { grid-template-columns: 1fr; }
  .vh-rule-grid li { min-height: 180px; gap: 18px; border-right: 0; border-bottom: 1px solid var(--border); padding: 23px 0; }
  .vh-rule-grid h3 { min-height: 0; }
  .vh-rule-grid li:last-child { border-bottom: 0; }
  .vh-rule-fineprint { grid-template-columns: 1fr; gap: 10px; }
  .vh-final { padding: 72px 0 78px; }
  .vh-final h2 { font-size: clamp(3rem, 14vw, 4.6rem); }
  .vh-actions--center .store-btn { flex: 1; min-width: 0; justify-content: center; }
}

@media (max-width: 380px) {
  .vh-main { padding: 0 12px; }
  .vh-countdown i { letter-spacing: .09em; }
  .vh-lockup { gap: 11px; }
  .vh-crest img { width: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .vh-hero *, .vh-reveal, .vh-row, .vh-activity-row, .vh-chip, .vh-skeleton-card::after, .vh-skeleton-row::after, .vh-phase i, .vh-live-dot { animation: none !important; transition: none !important; transform: none !important; }
  .vh-reveal { opacity: 1; }
}