/* Look & feel della presentazione "HONG KONG PROJECT — Corrado Ciamei" (portato dal template resources/look&feel):
   editoriale scuro, titoli serif Georgia, etichette spaziate in maiuscolo, nav a pillola, griglie con bordi sottili. */
:root { --lf-bg: #050505; --lf-fg: #f3f1ed; --lf-muted: #8f8c86; --lf-line: #222; --lf-accent: #eeeae2; }
.serif { font-family: Georgia, "Times New Roman", serif; }
.italic { font-style: italic; }

/* header fisso + nav a pillola */
/* header opaco: durante lo scroll i contenuti passano sotto, senza sovrapposizioni visive */
.lf-header { position: fixed; top: 0; left: 0; right: 0; height: 72px; padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; z-index: 30; background: var(--lf-bg); border-bottom: 1px solid #1a1a1a; }
.lf-header > * { pointer-events: auto; }
.lf-logo { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--lf-fg); text-decoration: none; }
.lf-tools { display: flex; align-items: center; gap: 10px; }
.lf-tools a { color: #d8d4cc; text-decoration: none; font: 500 10px/1 Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(7,7,7,.72); backdrop-filter: blur(14px); }
.lf-tools a:hover { color: #fff; border-color: rgba(255,255,255,.35); }
.lang-switch { display: flex; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(7,7,7,.72); backdrop-filter: blur(14px); overflow: hidden; }
.lang-switch button { font: 500 10px/1 Arial, sans-serif; letter-spacing: .14em; color: #a9a59e; background: none; border: 0; border-radius: 0; padding: 10px 11px; cursor: pointer; }
.lang-switch button.active { color: #050505; background: var(--lf-accent); }
.lang-switch button:hover:not(.active) { color: #fff; }
.top-nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 31; display: flex; gap: 28px; padding: 12px 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(7,7,7,.72); backdrop-filter: blur(14px); }
.top-nav a { color: #d8d4cc; text-decoration: none; font: 500 10px/1 Arial, sans-serif; letter-spacing: .18em; }
.top-nav a:hover { color: #fff; }
.top-nav[hidden] { display: none; }
@media (max-width: 1000px) { .top-nav { display: none; } }
@media (max-width: 720px) { .lf-tools a.lf-admin { display: none; } }

/* pagina di presentazione */
.landing { color: var(--lf-fg); background: var(--lf-bg); }
.landing .eyebrow { font-size: 11px; letter-spacing: .28em; color: #8d8982; text-transform: uppercase; margin-bottom: 18px; }
.landing .section-kicker { font-size: 10px; letter-spacing: .28em; color: #77736d; text-transform: uppercase; margin-bottom: 18px; }
.landing .section-title { font: 400 clamp(44px, 8vw, 92px)/.9 Georgia, serif; letter-spacing: -.045em; margin: 0; }
.landing .section-title em { font-style: italic; }
.landing .muted-lf { color: #97928a; line-height: 1.6; }
.landing .pill { border: 1px solid #4a4844; border-radius: 999px; padding: 12px 17px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; background: none; color: var(--lf-fg); text-decoration: none; display: inline-block; }
.landing .pill.primary { background: var(--lf-accent); color: #050505; border-color: var(--lf-accent); }
.lf-section { padding: 110px 22px; max-width: 1180px; margin: auto; }
.lf-section.wide { max-width: 1500px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }

/* hero */
.hero { position: relative; overflow: visible; padding: 0 0 42px; }
/* titolo contenuto (max 84px) cosi' la fotografia resta interamente visibile sotto l'header; la foto entra con uno slide-in di 2 s */
.hero-title { position: relative; z-index: 3; padding: 100px 22px 30px; max-width: 1050px; }
.hero-title h1 { font-size: clamp(40px, 6vw, 84px); line-height: .86; margin: 0; letter-spacing: -.05em; font-weight: 500; }
.hero-media { position: relative; width: 100%; height: clamp(300px, 36vw, 480px); overflow: hidden; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); background: #080808; }
.hero-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 52%; filter: grayscale(1) contrast(1.04) brightness(.8); transform: scale(1.01); animation: hero-slide-in 2s cubic-bezier(.22,.61,.36,1) both; }
@keyframes hero-slide-in { from { opacity: 0; transform: translateX(-9%) scale(1.04); } to { opacity: 1; transform: translateX(0) scale(1.01); } }
@media (prefers-reduced-motion: reduce) { .hero-media img { animation: none; } }
.hero-media:after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.12) 55%, rgba(0,0,0,.35)); pointer-events: none; }
.hero-links { max-width: 1180px; margin: 0 auto; padding: 0 22px; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #242424; }
.hero-link { position: relative; min-height: 122px; padding: 26px 28px 25px 0; color: #eeeae2; text-decoration: none; border-right: 1px solid #242424; display: flex; flex-direction: column; justify-content: center; transition: opacity .25s ease; }
.hero-link:nth-child(2), .hero-link:nth-child(3) { padding-left: 28px; }
.hero-link:nth-child(3) { border-right: 0; }
.hero-link:hover { opacity: .62; }
.hero-link span { position: absolute; top: 18px; left: 0; color: #6f6c67; font: 10px Arial, sans-serif; letter-spacing: .18em; }
.hero-link:nth-child(2) span, .hero-link:nth-child(3) span { left: 28px; }
.hero-link strong { font: 500 11px Arial, sans-serif; letter-spacing: .16em; }
.hero-link em { margin-top: 9px; color: #77746e; font: italic 17px Georgia, serif; }
.corrado-intro { max-width: 1180px; margin: 0 auto; padding: 76px 22px 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; border-bottom: 1px solid #222; }
.corrado-intro h2 { font: 400 clamp(46px, 7vw, 86px)/.9 Georgia, serif; letter-spacing: -.045em; margin: 0; }
.corrado-intro h2 em { font-style: italic; }
.corrado-intro p { color: #97928a; line-height: 1.65; max-width: 500px; margin: 0 0 24px; }

/* atleta digitale: pannello con il carosello multimediale */
.device { border: 1px solid #222; background: #080808; padding: 14px; min-height: 560px; }
.device-top { display: flex; justify-content: space-between; color: #77736d; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 10px; }
/* carosello multimediale (foto e video a scorrimento orizzontale, scroll-snap) */
.media-carousel-wrap { position: relative; }
.media-carousel { display: flex; gap: 0; height: 540px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; background: #050505; }
.media-carousel::-webkit-scrollbar { display: none; }
.media-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; margin: 0; background: #050505; display: flex; align-items: center; justify-content: center; }
.media-slide img, .media-slide video { width: 100%; height: 100%; object-fit: cover; display: block; background: #050505; }
.media-slide video { object-fit: contain; }
.media-slide img { filter: grayscale(.15) contrast(1.03); }
.media-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 42px 18px 16px; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0)); pointer-events: none; }
.media-slide figcaption b { display: block; font: 400 22px Georgia, serif; color: #f3f1ed; }
.media-slide figcaption span { display: block; margin-top: 4px; font: 10px Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #b3afa7; }
.media-slide .media-kind { position: absolute; top: 14px; left: 14px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font: 8px Arial, sans-serif; letter-spacing: .18em; color: #eeeae2; text-transform: uppercase; background: rgba(5,5,5,.55); pointer-events: none; }
.media-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(5,5,5,.7); color: #eeeae2; font: 24px/1 Georgia, serif; cursor: pointer; backdrop-filter: blur(6px); }
.media-arrow.prev { left: 12px; } .media-arrow.next { right: 12px; }
.media-arrow:hover { border-color: rgba(255,255,255,.6); }
.media-arrow[disabled] { opacity: .3; cursor: default; }
.media-dots { display: flex; justify-content: center; gap: 6px; padding: 12px 0 2px; }
.media-dots button { width: 7px; height: 7px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.22); cursor: pointer; transition: transform .2s, background .2s; }
.media-dots button.active { background: #eeeae2; transform: scale(1.3); }
.media-empty { height: 540px; display: flex; align-items: center; justify-content: center; color: #6d6963; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.partner-areas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.partner-areas button { border: 1px solid #4a4844; border-radius: 999px; padding: 9px 14px; font: 500 10px Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; background: none; color: var(--lf-fg); cursor: pointer; }
.partner-areas button:hover, .partner-areas button.active { border-color: var(--lf-accent); background: var(--lf-accent); color: #050505; }
.partner-info { min-height: 120px; border-top: 1px solid #292929; margin-top: 16px; padding-top: 18px; transition: opacity .25s ease; }
.partner-info b { font-family: Georgia, serif; font-size: 26px; font-weight: 400; }
.partner-info p { color: #88837c; font-size: 13px; line-height: 1.5; }
.partner-info a { color: #eeeae2; font: 11px Arial, sans-serif; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }

/* viaggio delle gare: mappa 3D CesiumJS (bandiere + rotta fino a Hong Kong) con carosello dei segnalibri, poi griglia gare */
.journey-head { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: end; margin-bottom: 34px; }
.journey-head p { max-width: 560px; margin: 0; }
.journey-panel { background: #050505; border: 1px solid #222; border-radius: 24px; padding: 18px 18px 14px; overflow: hidden; }
.journey-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 0 6px 12px; font-size: 10px; letter-spacing: .22em; color: #fff; opacity: .75; text-transform: uppercase; }
.journey-panel-head small { font-size: 8px; letter-spacing: .16em; opacity: .55; }
.cesium-map.journey { height: 580px; border-radius: 14px; }
.journey-carousel-wrap { margin-top: 14px; }
.journey-carousel-head { display: flex; justify-content: space-between; align-items: center; padding: 0 6px 8px; font-size: 9px; letter-spacing: .2em; color: #8d8982; text-transform: uppercase; }
.journey-arrows button { width: 30px; height: 30px; margin-left: 6px; padding: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(10,10,10,.9); color: #eeeae2; font: 18px/1 Georgia, serif; cursor: pointer; }
.journey-arrows button:hover { border-color: rgba(255,255,255,.5); }
.journey-carousel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 6px 8px; -webkit-overflow-scrolling: touch; }
.journey-carousel::-webkit-scrollbar { display: none; }
.journey-bookmark { flex: 0 0 196px; scroll-snap-align: start; display: grid; grid-template-columns: 38px 1fr; gap: 10px 12px; align-items: center; padding: 12px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: #0b0b0b; color: var(--lf-fg); text-align: left; cursor: pointer; transition: border-color .25s, background .25s, transform .25s; }
.journey-bookmark:hover { border-color: rgba(255,255,255,.4); transform: translateY(-2px); }
.journey-bookmark.active { border-color: var(--lf-accent); background: #141414; box-shadow: 0 0 0 1px var(--lf-accent) inset, 0 0 24px rgba(238,234,226,.18); }
.journey-bookmark.final { border-color: rgba(238,234,226,.45); }
.journey-bookmark .jb-flag { width: 38px; height: 26px; border-radius: 3px; object-fit: cover; background: #222; box-shadow: 0 0 0 1px rgba(255,255,255,.15); grid-row: span 2; }
.journey-bookmark .jb-flag.none { display: flex; align-items: center; justify-content: center; font-size: 14px; color: #8d8982; }
.journey-bookmark .jb-city { font: 500 11px Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journey-bookmark .jb-meta { font-size: 10px; color: #8d8982; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journey-bookmark .jb-meta b { color: #eeeae2; font-weight: 500; }
.journey-bookmark .jb-num { position: absolute; }
.journey-empty { padding: 20px; color: #6d6963; font-size: 12px; }
.races { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: #222; border: 1px solid #222; margin-top: 70px; }
.race { background: #080808; padding: 20px 15px; min-height: 150px; cursor: pointer; transition: .25s; border: 0; border-radius: 0; text-align: left; color: var(--lf-fg); display: block; }
.race:hover, .race.active { background: #151515; border-color: #222; }
.race .num { font-size: 10px; color: #6d6963; letter-spacing: .2em; }
.race h3 { font: 400 26px Georgia, serif; margin: 28px 0 6px; }
.race p { font-size: 10px; color: #858078; letter-spacing: .08em; text-transform: uppercase; margin: 0; line-height: 1.6; }
.race.empty { cursor: default; color: #6d6963; }
.sponsor-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin: 90px 0 36px; padding-top: 70px; border-top: 1px solid #222; scroll-margin-top: 40px; /* nav "Sponsorships": keeps the heading clear of the fixed header */ }
.sponsor-head p { color: #97928a; line-height: 1.65; max-width: 500px; margin: 0; }

/* partnership */
.partnerships { padding: 110px 22px 120px; border-top: 1px solid #222; max-width: 1180px; margin: 0 auto; }
.partnerships-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 70px; }
.partnerships-head h2 { font: 400 clamp(54px, 7vw, 92px)/.88 Georgia, serif; letter-spacing: -.045em; margin: 14px 0 0; }
.partnerships-head h2 em { font-style: italic; }
.partnerships-head p { max-width: 500px; color: #97928a; line-height: 1.65; margin: 0; }
.partnership-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid #292929; border-left: 1px solid #292929; }
.partner-card { min-height: 260px; padding: 30px; border-right: 1px solid #292929; border-bottom: 1px solid #292929; display: flex; flex-direction: column; }
.partner-card span { color: #77736d; font: 11px Arial, sans-serif; letter-spacing: .2em; }
.partner-card h3 { font: 400 34px/1.05 Georgia, serif; margin: 45px 0 15px; }
.partner-card p { color: #92908b; line-height: 1.55; max-width: 430px; margin: 0 0 28px; }
.partner-card a { margin-top: auto; color: #eeeae2; text-decoration: none; font: 11px Arial, sans-serif; letter-spacing: .16em; }
.inventory { margin-top: 90px; border-top: 1px solid #292929; padding-top: 28px; }
.inventory-list { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 25px; }
.inventory-list div { padding: 17px 0; border-bottom: 1px solid #1f1f1f; color: #a5a19a; font: 11px Arial, sans-serif; letter-spacing: .17em; }

/* pagina work-in-progress (solo sezione PROJECT) */
.wip-body { max-width: 1180px; margin: 0 auto; padding: 64px 22px 96px; }
.wip-copy { font: 400 clamp(22px, 2.6vw, 34px)/1.25 Georgia, serif; letter-spacing: -.01em; max-width: 860px; margin: 0 0 18px; }
.wip-note { max-width: 620px; margin: 0 0 30px; }
.wip-preview-banner { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 40; padding: 10px 16px; border: 1px solid var(--season, #c9a24a); border-radius: 999px; background: rgba(7,7,7,.85); color: #c9a24a; font: 10px Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.wip-preview-banner a { color: #fff; margin-left: 10px; }
body.site-wip .top-nav, body.site-wip .lf-tools .lf-admin { display: none; }

/* about + contatti + footer */
.final-about { position: relative; overflow: hidden; border-top: 1px solid #222; min-height: 680px; background: #050505; }
.final-about-media { position: absolute; inset: 0; background: url(landing/between.jpg) center 40% / cover no-repeat; filter: grayscale(1) contrast(1.05) brightness(.85); }
.final-about-media:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,5,.72) 0%, rgba(5,5,5,.5) 48%, rgba(5,5,5,.2) 100%), linear-gradient(to bottom, rgba(5,5,5,.1), rgba(5,5,5,.45)); }
.final-about-inner { position: relative; z-index: 2; max-width: 1180px; margin: auto; padding: 92px 22px 100px; }
.final-about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: end; }
.final-about h2 { font: 400 clamp(72px, 10vw, 132px)/.82 Georgia, serif; letter-spacing: -.055em; margin: 0 0 30px; }
.final-about h2 em { font-style: italic; }
.final-role { letter-spacing: .22em; font-size: 11px; color: #85817b; text-transform: uppercase; }
.final-about-copy { max-width: 520px; }
.final-about-copy p { color: #9b9790; line-height: 1.7; font-size: 17px; margin: 0 0 20px; }
.final-email { margin-top: 20px; color: #77736e; font-size: 12px; letter-spacing: .08em; }
.contact { padding: 110px 22px 130px; border-top: 1px solid #222; text-align: center; }
.contact h2 { font: 400 clamp(58px, 9vw, 110px)/.86 Georgia, serif; letter-spacing: -.05em; margin: 18px 0 28px; }
.contact h2 em { font-style: italic; }
.contact p { color: #8e8b85; max-width: 500px; margin: 0 auto 28px; line-height: 1.6; }
.contact-mail { color: #eeeae2; text-decoration: none; font: 12px Arial, sans-serif; letter-spacing: .1em; }
.lf-footer { border-top: 1px solid #222; padding: 40px 22px; display: flex; justify-content: space-between; color: #77736d; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.lf-footer a { color: #d8d4cc; text-decoration: none; }

/* pagine applicative (area atleta, admin, pagamento) sotto l'header fisso */
.container.app-page { padding-top: 96px; } /* specificita' > .container di styles.css, che altrimenti riporta il padding a 20px sotto l'header fisso */

@media (max-width: 700px) {
  .split, .corrado-intro, .partnerships-head, .partnership-grid, .inventory-list, .sponsor-head, .final-about-grid { grid-template-columns: 1fr; }
  .hero-links { grid-template-columns: 1fr; }
  .hero-link, .hero-link:nth-child(2), .hero-link:nth-child(3) { min-height: 100px; padding: 25px 0 23px; border-right: 0; border-bottom: 1px solid #242424; }
  .hero-link:last-child { border-bottom: 0; }
  .hero-link span, .hero-link:nth-child(2) span, .hero-link:nth-child(3) span { left: 0; }
  .hero-title { padding: 96px 22px 26px; }
  .hero-title h1 { font-size: clamp(38px, 11vw, 64px); }
  .hero-media { height: 44vh; min-height: 260px; }
  .races { grid-template-columns: 1fr 1fr; }
  .lf-section { padding: 82px 18px; }
  .journey-head { grid-template-columns: 1fr; gap: 18px; }
  .journey-panel { padding: 12px 10px 10px; border-radius: 16px; } .cesium-map.journey { height: min(70vh, 460px); }
  .journey-bookmark { flex-basis: 170px; }
  .device { min-height: 420px; } .media-carousel, .media-empty { height: min(62vh, 440px); }
  .final-about { min-height: 620px; } .final-about-inner { padding: 72px 22px; } .final-about h2 { font-size: 76px; }
  .lf-footer { display: block; } .lf-footer div + div { margin-top: 12px; }
}