/* Soprano: the original content and section order, with a cinematic finish. */
body {
  --bg: #101416;
  --paper: #1a1f21;
  --text: #f2efe9;
  --muted: #b5b9b9;
  --accent: #d2b995;
  --accent-hover: #eedcc0;
  --line: rgba(214,202,184,.19);
  --primary-bg: #e1d0b6;
  --primary-hover: #eee1cc;
  --primary-text: #182023;
  --section-space: clamp(3rem,5vw,5rem);
  --max: 1200px;
  --ease-out: cubic-bezier(.23,1,.32,1);
  --photo-fade: 250ms;
}
body .site-header { background: #101416; border-color: var(--line); min-height: 72px; }
body .site-header.is-scrolled { background: rgba(16,20,22,.97); border-color: var(--line); text-shadow: none; }
body .brand { letter-spacing: .12em; }
body .lang-toggle, body .menu-toggle { border-radius: 2px; }
body .button { border-radius: 2px; min-height: 54px; padding-inline: 1.5rem; font-size: .8rem; letter-spacing: .035em; }
body .button:active { transform: scale(.98); }
body .button { transition: transform 120ms var(--ease-out), background-color 180ms ease, border-color 180ms ease; }
.hero.cinematic-hero { position: relative; isolation: isolate; display: grid; align-items: center; width: 100%; max-width: none; min-height: 680px; min-height: min(780px,calc(100svh - 72px)); padding: 5rem 1.5rem 6rem; overflow: hidden; background: #11181c; }
.hero-film, .hero-film-shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero-film { object-fit: cover; }
.hero-film-shade { z-index: -1; background: linear-gradient(180deg,rgba(8,16,22,.35),rgba(8,16,22,.72) 45%,rgba(8,16,22,.57) 76%,#101416 100%); }
.cinematic-hero .hero-copy { max-width: 790px; width: 100%; }
.hero-signature { display: flex; align-items: center; justify-content: center; gap: 1.2rem; color: #e2d0b2; font-size: .61rem; letter-spacing: .27em; margin: 0 0 2rem; }
.hero-signature::before, .hero-signature::after { content: ""; width: 40px; height: 1px; background: rgba(226,208,178,.55); }
.cinematic-hero h1 { font-family: Georgia,'Times New Roman',serif; font-size: clamp(2.9rem,7.2vw,6.4rem); line-height: 1.05; font-weight: 400; letter-spacing: .025em; margin-bottom: 1.4rem; color: #fffaf0; text-shadow: 0 2px 24px rgba(0,0,0,.15); }
.cinematic-hero .hero-text { font-family: Georgia,'Times New Roman',serif; font-style: italic; font-size: clamp(1.2rem,2.1vw,1.8rem); color: #eee5d7; margin-bottom: 1.5rem; }
.cinematic-hero .hero-copy > .muted { max-width: 58ch; margin: 0 auto 2rem; font-size: .9rem; line-height: 1.9; color: #e0e2e1; }
.cinematic-hero .hero-actions { max-width: 28rem; gap: .9rem; }
.cinematic-hero .button-ghost { color: #f5eee2; border-color: rgba(239,226,204,.65); background: rgba(15,23,29,.2); }
.cinematic-hero .button-ghost:hover { background: rgba(15,23,29,.6); }
.cinematic-hero .hero-footnote { color: #d0d4d3; font-size: .68rem; letter-spacing: .08em; }
.hero-bottom { position: absolute; bottom: 1.4rem; left: max(1.5rem,calc((100vw - 1136px)/2)); right: max(1.5rem,calc((100vw - 1136px)/2)); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.hero-bottom > span { color: #c6c4bc; font-size: .57rem; letter-spacing: .21em; }
.film-control { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .5rem .9rem; border: 1px solid rgba(230,218,197,.35); background: rgba(13,21,25,.55); color: #f4ede2; font-size: .7rem; cursor: pointer; border-radius: 2px; }
.film-control-icon { font-size: .8rem; }
body .featured { border-top: 0; }
body .section-heading h2, body .geography-heading h2, body .cta h2 { font-family: Georgia,'Times New Roman',serif; font-size: clamp(1.8rem,3vw,2.65rem); font-weight: 400; letter-spacing: -.025em; }
body .eyebrow { font-size: .65rem; letter-spacing: .16em; }
body .intro { line-height: 1.9; margin: 1rem 0 2.1rem; max-width: 68ch; }
body .casting-grid { gap: 2rem; }
body .casting-card {
  --panel: #171c1e;
  --panel2: #1c2224;
  --text: #eeeae3;
  --muted: #b1b7b8;
  --accent: #d2b995;
  --accent-hover: #eedcc0;
  --line: rgba(214,202,184,.2);
  color-scheme: dark;
  border-radius: 3px;
  padding: 1.5rem;
}
body .casting-card:hover { background: var(--panel); }
body .card-media { position: relative; margin: -1.5rem -1.5rem 1.5rem; border-radius: 2px 2px 0 0; background: #222729; }
body .card-media img { aspect-ratio: 16/10; }
body .card-arrow { top: 1rem; right: 1rem; width: 36px; height: 36px; background: rgba(16,23,26,.7); border: 1px solid rgba(238,229,214,.55); color: #f0e4d0; }
body .casting-card h3 { font-family: Georgia,'Times New Roman',serif; font-size: clamp(1.35rem,2vw,1.8rem); line-height: 1.35; letter-spacing: -.015em; margin-top: .75rem; }
body .casting-card > .small { font-size: .85rem; line-height: 1.85; }
body .card-meta { font-size: .62rem; letter-spacing: .13em; }
body .casting-card > .text-link { align-self: flex-start; font-size: .76rem; margin: 0 0 1.3rem; }
body .card-bottom { padding-top: 1rem; border-top: 1px solid var(--line); font-size: .78rem; }
body .card-bottom b { font-family: Georgia,serif; font-size: 1.3rem; }
body .featured > .small { margin-top: 1.3rem; font-size: .65rem; color: #9ca6a9; }
/* A fixed monochrome layer fades away: only opacity is animated. */
.photo-reveal { position: relative; }
.photo-reveal img.photo-mono { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: 1; pointer-events: none; transition: opacity var(--photo-fade) ease; }
@media(hover:hover) and (pointer:fine) {
  .casting-card:hover .photo-mono, .geography-region:hover .photo-mono { opacity: 0; }
}
.casting-card:focus-visible .photo-mono, .geography-region:focus-visible .photo-mono, .casting-card:active .photo-mono { opacity: 0; }
body .geography { padding-block: 2.5rem 4rem; }
body .geography-circle { background: #252b2d; border-color: #6b665d; }
body .club-principles { border-top: 1px solid var(--line); padding-top: 3.8rem; }
body .feature-icon { color: #cfb893; border-color: rgba(207,184,147,.4); }
body .feature-copy h2 { font-family: Georgia,serif; font-size: 1.5rem; }
body .testimonial { padding-top: 2rem; padding-bottom: 4rem; }
body .quotes blockquote { font-family: Georgia,serif; font-size: 1.18rem; line-height: 1.8; color: #d9d8d2; }
body .cta { --panel: #d8cebe; --text: #172025; --muted: #536067; --primary-bg: #19252b; --primary-hover: #2b3a42; --primary-text: #f5eee2; background: var(--panel); padding: 3rem; margin-bottom: 2.5rem; border-radius: 2px; gap: 3rem; }
body .cta .small { margin: .8rem 0 0; max-width: 55ch; font-size: .85rem; }
@media(max-width:640px) {
  .hero.cinematic-hero { min-height: 690px; min-height: min(760px,calc(100svh - 72px)); padding: 4rem 1.25rem 6rem; }
  .cinematic-hero h1 { font-size: clamp(2.6rem,10.8vw,4.5rem); line-height: 1.13; }
  .hero-signature { font-size: .5rem; gap: .8rem; margin-bottom: 1.7rem; letter-spacing: .16em; }
  .hero-signature::before,.hero-signature::after { width: 20px; }
  .cinematic-hero .hero-copy > .muted { font-size: .83rem; line-height: 1.8; margin-bottom: 1.5rem; }
  .cinematic-hero .hero-text { font-size: 1.22rem; }
  .cinematic-hero .hero-actions { grid-template-columns: 1fr; max-width: 22rem; gap: .65rem; }
  .hero-bottom { left: 1.25rem; right: 1.25rem; bottom: 1rem; }
  .hero-bottom > span { font-size: .46rem; letter-spacing: .1em; }
  body .casting-grid { gap: 1.5rem; }
  body .cta { padding: 2rem 1.25rem; gap: 1.5rem; }
}
@media(max-width:360px) { .hero.cinematic-hero { min-height: 730px; } .hero-signature { letter-spacing: .09em; } }
@media(prefers-reduced-motion:reduce) { .photo-reveal img.photo-mono { transition: none; } body .button:active { transform: none; } }

/* Geography: real destinations with the same monochrome reveal as the cards. */
body .geography-track { grid-auto-columns: max(132px,calc((100% - 6rem)/7)); gap: 1rem; padding: .5rem .25rem 1.25rem; }
body .geography-region { gap: 1rem; font-size: .78rem; border-radius: 2px; }
body .geography-circle { width: 116px; height: 116px; border-color: rgba(210,185,149,.4); }
body .geography-region:hover .geography-circle { box-shadow: none; }
body .geography-region:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.geography-region:active .photo-mono { opacity: 0; }

/* A compact editorial list, without three tall feature panels. */
body .club-principles { grid-template-columns: minmax(0,.85fr) minmax(0,1.25fr); gap: clamp(3rem,7vw,7rem); align-items: start; padding-block: 3rem; }
.principles-intro h2 { font-family: Georgia,'Times New Roman',serif; font-size: clamp(1.9rem,3.2vw,2.7rem); font-weight: 400; line-height: 1.25; letter-spacing: -.025em; margin: .8rem 0 1.2rem; }
.principles-intro > .muted { max-width: 34ch; font-size: .87rem; line-height: 1.85; margin-bottom: 1.5rem; }
.principles-intro .text-link, .principle-row .text-link { font-size: .75rem; }
.principle-row { display: grid; grid-template-columns: 1.8rem minmax(0,1fr); gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.principle-row:first-child { padding-top: 0; }
.principle-row:last-child { border-bottom: 0; padding-bottom: 0; }
.principle-number { color: var(--accent); font-size: .62rem; letter-spacing: .08em; padding-top: .3rem; }
.principle-row h3 { font-family: Georgia,serif; font-size: 1.22rem; font-weight: 400; margin: 0 0 .6rem; }
.principle-row p { color: var(--muted); margin: 0 0 .65rem; font-size: .83rem; line-height: 1.8; max-width: 59ch; }

/* Native horizontal scrolling supports touch and trackpads without auto-rotation. */
body .testimonial { padding-top: 3rem; padding-bottom: 3rem; border-top: 1px solid var(--line); }
.reviews-count { color: var(--accent); font-size: .68rem; letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.reviews-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 2rem; }
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
.review-slide { scroll-snap-align: start; scroll-snap-stop: always; margin: 0; padding: 1rem .25rem; min-width: 0; display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 3rem; align-items: center; }
.review-person { display: flex; align-items: center; flex-direction: column; gap: .5rem; text-align: center; }
.review-avatar { display: grid; place-items: center; width: 78px; height: 78px; margin-bottom: .5rem; border: 1px solid rgba(210,185,149,.5); border-radius: 50%; background: radial-gradient(circle at 25% 20%,#46413a,#21282a 75%); color: #e2d0b2; font-family: Georgia,serif; font-size: 1.5rem; letter-spacing: .06em; }
.review-avatar-anonymous { background: radial-gradient(circle at 25% 20%,#344146,#192023 75%); }
.review-name { font-size: .85rem; line-height: 1.4; color: var(--text); }
.review-role { color: var(--muted); font-size: .68rem; }
.review-slide blockquote { margin: 0; max-width: 36ch; font-family: Georgia,'Times New Roman',serif; font-size: clamp(1.25rem,2.15vw,1.85rem); font-weight: 400; line-height: 1.65; letter-spacing: -.015em; color: #e6e1d7; }
.reviews-navigation { display: flex; align-items: center; justify-content: space-between; margin: 1.2rem 0 0 238px; border-top: 1px solid var(--line); padding-top: .8rem; }
.reviews-arrows, .reviews-dots { display: flex; gap: .5rem; }
.reviews-navigation button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; color: var(--accent); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; }
.reviews-arrows button { font-size: 1.15rem; }
.reviews-dots { gap: 0; }
.reviews-dots button { border: 0; border-radius: 0; }
.reviews-dots span { width: 20px; height: 2px; background: #4a5151; }
.reviews-dots [aria-current="true"] span { background: var(--accent); }
.reviews-navigation button:disabled { opacity: .3; cursor: default; }
.reviews-navigation button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media(hover:hover) and (pointer:fine) { .reviews-arrows button:hover:not(:disabled) { background: #2a302f; border-color: var(--accent); } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width:760px) {
  body .club-principles { grid-template-columns: 1fr; gap: 1.8rem; padding-block: 2.2rem; }
  .principles-intro h2 br { display: none; }
  .principles-intro h2 br::after { content: ' '; }
  .principles-intro > .muted { max-width: 48ch; margin-bottom: 1rem; }
  .principle-row { gap: .7rem; }
  .review-slide { grid-template-columns: 1fr; gap: 1.4rem; align-content: start; }
  .review-person { display: grid; grid-template-columns: 58px minmax(0,1fr); grid-template-rows: auto auto; gap: .2rem 1rem; text-align: left; align-items: end; }
  .review-avatar { grid-row: 1/3; width: 58px; height: 58px; margin: 0; font-size: 1.15rem; }
  .review-role { align-self: start; }
  .review-slide blockquote { font-size: 1.25rem; line-height: 1.7; }
  .reviews-navigation { margin-left: 0; }
  .reviews-track { margin-top: 1rem; }
  body .geography-track { grid-auto-columns: 120px; gap: .75rem; }
  body .geography-circle { width: 104px; height: 104px; }
}
body .club-principles { padding-block: 2.5rem; }
.principle-row { padding-block: 1rem; }
.principle-row h3 { margin-bottom: .35rem; line-height: 1.4; }
.principle-row h3 a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; color: inherit; text-decoration: none; }
.principle-row h3 a > [aria-hidden] { color: var(--accent); font-family: Arial,sans-serif; font-size: .85rem; }
.principle-row p { margin-bottom: 0; line-height: 1.7; }
@media(hover:hover) and (pointer:fine) { .principle-row h3 a:hover { color: var(--accent); } }