/* Version3 top page: black and gold, giant display type, the athlete as the background.
   Builds on tokens.css and base.css; shared header and footer keep their own styles. */
.page-v3 {
  --v3-ink: #0c0c0e;
  --v3-gold: #c9a24a;
  --v3-gold-text: #7d5f1d;        /* gold for small text on white (about 5.6:1) */
  --v3-display: "Alfa Slab One", "Dela Gothic One", serif;
  --v3-display-ja: "Dela Gothic One", "Zen Kaku Gothic New", sans-serif;
  background: var(--white);
}
.page-v3 .site-header.is-scrolled.over-dark { background: color-mix(in srgb, var(--v3-ink) 80%, transparent); }
.v3-kicker { font: 600 13px/1 var(--font-display-en); letter-spacing: .22em; text-transform: uppercase; color: var(--v3-gold-text); }
.on-dark .v3-kicker { color: var(--v3-gold); }
.v3-solid { display: block; }
.v3-outline { display: block; color: transparent; -webkit-text-stroke: 2px var(--v3-gold); }
.v3-gold { display: block; color: var(--v3-gold); }
.v3-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 26px; border: 1.5px solid var(--v3-gold); border-radius: var(--radius-button); background: var(--v3-gold); color: var(--v3-ink); font-weight: 700; text-decoration: none; transition: background-color .25s, color .25s; }
.v3-btn:hover { background: transparent; color: inherit; }
.v3-btn.is-ghost { background: transparent; color: var(--white); }
.v3-btn.is-ghost:hover { background: var(--v3-gold); color: var(--v3-ink); }
.v3-card-more { font-size: 13px; font-weight: 700; color: var(--v3-gold); text-decoration: underline; text-underline-offset: 4px; }

/* Hero */
.v3-hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: var(--v3-ink); color: var(--white); }
.v3-slide { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: 0; transform: scale(1.08); transition: opacity 1.4s ease, transform 7s linear; }
.v3-slide.is-active { opacity: 1; transform: scale(1); }
.v3-cut { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos); opacity: 0; transform: scale(1.08); transition: opacity 1.4s ease, transform 7s linear; pointer-events: none; }
.v3-hero[data-slide="0"] .v3-cut { opacity: 1; transform: scale(1); }
.v3-name { position: relative; z-index: 0; }
.v3-tag, .v3-sub, .v3-dots { position: relative; z-index: 2; }
.v3-dots { position: absolute; }
.v3-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--v3-ink) 0%, #0c0c0ed9 22%, #0c0c0e40 58%, #0c0c0e8c 100%); }
.v3-hero-copy { padding-block: calc(var(--header-h) + 40px) clamp(88px, 12vh, 140px); text-align: center; }
.v3-name { font-family: var(--v3-display); font-weight: 400; font-size: clamp(48px, 15vw, 230px); line-height: .88; letter-spacing: .01em; }
html[lang=en] .v3-name { font-family: var(--v3-display); font-weight: 400; letter-spacing: .01em; }
.v3-tag { margin-top: 26px; font: 400 clamp(22px, 3vw, 40px)/1.4 var(--v3-display-ja); }
.v3-sub { margin-top: 10px; color: #cfcfd4; font-size: 14px; letter-spacing: .08em; }
.v3-dots { position: absolute; right: var(--gutter); bottom: 28px; display: flex; gap: 4px; }
.v3-dots button { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.v3-dots button::before { content: ""; display: block; height: 3px; margin-inline: 6px; border-radius: 2px; background: #ffffff59; transition: background-color .3s; }
.v3-dots button[aria-current=true]::before { background: var(--v3-gold); }

/* Topics and partners */
.v3-topics { padding-block: clamp(56px, 7vw, 96px) clamp(80px, 10vw, 140px); }
.v3-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.v3-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: clamp(340px, 30vw, 440px); padding: 28px; overflow: hidden; background: var(--v3-ink); color: var(--white); text-decoration: none; }
.v3-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 1.2s var(--ease-out); }
.v3-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #0c0c0ef2 0%, #0c0c0e99 40%, #0c0c0e1a 75%); }
.v3-card:hover img { transform: scale(1.05); }
.v3-card-tag { font: 600 12px/1 var(--font-display-en); letter-spacing: .2em; text-transform: uppercase; color: var(--v3-gold); }
.v3-card h3 { font: 700 18px/1.6 var(--font-body); }
html[lang=en] .v3-card h3 { font: 700 18px/1.5 var(--font-body); letter-spacing: 0; }
.v3-partners { margin-top: clamp(64px, 8vw, 110px); text-align: center; }
.v3-partners h2 { margin-top: 14px; font: 400 clamp(26px, 3.2vw, 44px)/1.4 var(--v3-display-ja); color: var(--v3-ink); }
html[lang=en] .v3-partners h2 { font-family: var(--v3-display); font-weight: 400; }
.v3-facts { list-style: none; margin: 40px auto; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.v3-facts b { display: block; font: 400 clamp(52px, 6vw, 84px)/1 var(--v3-display); color: var(--v3-ink); }
.v3-facts small { font-size: .5em; }
.v3-facts span { display: block; margin-top: 10px; color: var(--muted); font-size: 14px; }
@media (max-width: 860px) { .v3-cards, .v3-facts { grid-template-columns: 1fr; } .v3-card { min-height: 300px; } }

/* Mission band */
.v3-mission { position: relative; isolation: isolate; min-height: 92svh; display: grid; place-items: center; overflow: hidden; background: var(--v3-ink); color: var(--white); text-align: center; }
.v3-mission-bg { position: absolute; left: 0; top: -12%; z-index: -2; width: 100%; height: 124%; object-fit: cover; opacity: .6; }
.v3-mission::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #061a45cc, #061a45a6 50%, #0c0c0ee6); }
.v3-bigtype { font: 400 clamp(48px, 10vw, 156px)/1.08 var(--v3-display-ja); }
html[lang=en] .v3-bigtype { font-family: var(--v3-display); font-weight: 400; line-height: .95; }
.v3-mission-sub { margin-top: 28px; font: 400 clamp(17px, 1.8vw, 24px)/1.6 var(--v3-display-ja); color: #e8e8ee; }

/* Record: native sideways scroll by default; .is-pinned (wide, motion allowed) is driven by GSAP */
.v3-record { background: var(--white); }
.v3-record-stage { padding-block: clamp(80px, 10vw, 140px); overflow: hidden; }
.v3-record-head h2 { margin-top: 14px; font: 400 clamp(30px, 4vw, 56px)/1.2 var(--v3-display-ja); color: var(--v3-ink); }
.v3-record-track { list-style: none; margin: 40px 0 0; padding: 0 var(--gutter) 8px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.v3-record-track::-webkit-scrollbar { display: none; }
.v3-rec { position: relative; flex: 0 0 clamp(260px, 26vw, 380px); aspect-ratio: 3 / 4; overflow: hidden; scroll-snap-align: start; background: var(--v3-ink); color: var(--white); }
.v3-rec img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.v3-rec > div { position: absolute; inset: auto 0 0; display: grid; gap: 6px; padding: 80px 24px 24px; background: linear-gradient(0deg, #0c0c0ef2 10%, #0c0c0e00); }
.v3-rec-year { font: 400 18px/1 var(--v3-display); color: var(--v3-gold); }
.v3-rec b { font: 400 clamp(30px, 3vw, 42px)/1.1 var(--v3-display-ja); }
.v3-rec > div span:last-child { font-size: 14px; line-height: 1.6; color: #dcdce2; }
.v3-rec-more { display: grid; place-content: center; gap: 16px; padding: 32px; text-align: center; }
.v3-rec-more a { font: 400 18px/1.6 var(--v3-display-ja); text-wrap: balance; color: var(--v3-gold); text-decoration: none; }
.v3-rec-more p { font-size: 12px; color: #b9b9c2; }
.v3-record.is-pinned .v3-record-stage { height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--header-h) + 8px) 32px; }
.v3-record.is-pinned .v3-record-track { width: max-content; overflow: visible; scroll-snap-type: none; }
.v3-record.is-pinned .v3-rec { flex-basis: clamp(280px, 24vw, 360px); max-height: calc(100svh - 280px); aspect-ratio: auto; height: calc(100svh - 280px); }

/* Project trio on gold squares */
.v3-project { padding-block: clamp(80px, 10vw, 140px); background: var(--cloud); }
.v3-project-head { text-align: center; }
.v3-project-head h2 { margin-top: 14px; font: 400 clamp(30px, 4vw, 56px)/1.2 var(--v3-display-ja); color: var(--v3-ink); }
.v3-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 48px); margin-top: 48px; }
.v3-item { color: var(--v3-ink); text-decoration: none; text-align: center; }
.v3-item-art { display: block; aspect-ratio: 1; padding: 13%; background: var(--v3-gold); }
.v3-item-art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); box-shadow: 0 24px 40px -24px #0c0c0e99; transition: transform .6s var(--ease-out); }
.v3-item:hover img { transform: translateY(-8px) rotate(-1deg); }
.v3-item h3 { margin-top: 18px; font: 500 18px/1.5 var(--font-body); }
html[lang=en] .v3-item h3 { font: 500 18px/1.5 var(--font-body); letter-spacing: 0; }
@media (max-width: 760px) { .v3-trio { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* Story and business */
.v3-duo { padding-block: 0 clamp(80px, 10vw, 140px); background: var(--cloud); }
.v3-duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v3-story, .v3-business { position: relative; isolation: isolate; min-height: 380px; overflow: hidden; color: var(--white); }
.v3-story { display: flex; align-items: flex-end; padding: 36px; text-decoration: none; }
.v3-story img, .v3-business img { position: absolute; z-index: -2; object-fit: cover; }
.v3-story img { inset: 0; width: 100%; height: 100%; object-position: var(--pos, 50% 50%); transition: transform 1.2s var(--ease-out); }
.v3-story:hover img { transform: scale(1.05); }
.v3-story::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #0c0c0ef2 0%, #0c0c0e66 50%, #0c0c0e1a 100%); }
.v3-story h3 { margin: 12px 0 14px; font: 400 clamp(24px, 2.4vw, 32px)/1.35 var(--v3-display-ja); }
.v3-business { display: flex; align-items: center; padding: 40px; background: var(--v3-ink); }
.v3-business img { inset: 0 0 0 auto; width: 60%; height: 100%; object-position: 55% 30%; opacity: .7; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.v3-business > div { max-width: 62%; }
.v3-business-title { font: 400 clamp(26px, 2.6vw, 36px)/1.3 var(--v3-display-ja); }
.v3-business-title span { display: block; }
.v3-business-title span:first-child { color: var(--v3-gold); }
.v3-business p { margin: 14px 0 24px; color: #d3d3da; font-size: 15px; }
@media (max-width: 860px) { .v3-duo-grid { grid-template-columns: 1fr; } .v3-business > div { max-width: none; } .v3-business img { width: 100%; opacity: .3; -webkit-mask-image: none; mask-image: none; } }

/* Follow: collage over outlined handle text */
.v3-follow { position: relative; overflow: hidden; padding-block: clamp(72px, 8vw, 120px) clamp(48px, 6vw, 80px); background: var(--white); }
.v3-follow-wall { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; font: 400 clamp(56px, 12vw, 190px)/.95 var(--v3-display); color: transparent; -webkit-text-stroke: 1.5px #0c0c0e1c; white-space: nowrap; pointer-events: none; }
.v3-collage { position: relative; height: clamp(440px, 46vw, 680px); max-width: 1440px; margin-inline: auto; }
.v3-collage img { position: absolute; object-fit: cover; box-shadow: 0 30px 60px -30px #0c0c0e8c; }
.v3-collage .c1 { left: 2%; top: 4%; width: 22%; aspect-ratio: 3 / 2; }
.v3-collage .c2 { left: 15%; top: 32%; width: 16%; aspect-ratio: 3 / 4; }
.v3-collage .c3 { left: 33%; top: 56%; width: 17%; aspect-ratio: 3 / 2; }
.v3-collage .c4 { left: 46%; top: 2%; width: 20%; aspect-ratio: 2 / 3; }
.v3-collage .c5 { left: 68%; top: 22%; width: 19%; aspect-ratio: 3 / 2; }
.v3-collage .c6 { left: 80%; top: 60%; width: 17%; aspect-ratio: 3 / 2; }
.v3-follow-title { position: relative; margin-top: 32px; text-align: center; font: 400 clamp(20px, 2.4vw, 32px)/1.4 var(--v3-display-ja); }
.v3-follow-title a { color: var(--v3-gold-text); text-decoration: none; }
.v3-follow-title a:hover { text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 760px) {
  .v3-collage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-inline: var(--gutter); }
  .v3-collage img { position: static; width: 100% !important; aspect-ratio: 1 !important; transform: none !important; }
}

/* Connect */
.v3-connect { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(96px, 12vw, 170px); background: var(--v3-ink); color: var(--white); }
.v3-connect-photo { position: absolute; inset: 0 0 0 auto; z-index: -1; width: 58%; height: 100%; object-fit: cover; object-position: 50% 35%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%); mask-image: linear-gradient(90deg, transparent 0%, #000 50%); }
.v3-connect .v3-bigtype { font-family: var(--v3-display); font-size: clamp(64px, 11vw, 168px); line-height: .9; }
.v3-connect-copy > p { margin-top: 26px; max-width: 26em; font: 400 clamp(18px, 1.8vw, 24px)/1.6 var(--v3-display-ja); }
.v3-connect-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.v3-connect-mail { margin-top: 22px; }
.v3-connect-mail a { color: var(--v3-gold); font-weight: 700; }
@media (max-width: 860px) { .v3-connect-photo { width: 100%; opacity: .32; -webkit-mask-image: none; mask-image: none; } }

@media (prefers-reduced-motion: reduce) { .v3-slide, .v3-cut { transition: none; transform: none; } }

/* Page-level touches: black footer to match, plain type for the email line. */
.page-v3 .site-footer { background: var(--v3-ink); }
.v3-connect-copy > p.v3-connect-mail { font: 700 16px/1.6 var(--font-body); }
/* Phones: the photo is cropped tight on the athlete, so the cut-out would hide the whole name; show the name on top instead. */
@media (max-width: 760px) {
  .v3-hero[data-slide] .v3-cut { display: none; }
  .v3-sub { font-size: 12px; text-wrap: balance; }
}