/* worldtour.exsports.fi: sivuston asettelu. Ladataan tokens.css:n ja bundle.css:n jälkeen. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.exs { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: var(--space-4); padding-right: var(--space-4); }
@media (min-width: 720px) { .wrap { padding-left: var(--space-8); padding-right: var(--space-8); } }

.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; }
.brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--text); }
.brand__exs { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 26px; line-height: 1; }
.brand__bar { width: 24px; height: 4px; background: var(--accent); }
.brand__wt { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 16px; text-transform: uppercase; color: var(--text-soft); }
.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav a:not(.exs-btn) { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 16px; text-transform: uppercase; text-decoration: none; color: var(--text); padding: var(--space-3) 0; }
.site-nav a:not(.exs-btn):hover, .site-nav a[aria-current="page"] { color: var(--accent); }
.site-nav a:focus-visible { outline: none; box-shadow: var(--exs-focus); }
@media (max-width: 719px) { .site-nav .exs-btn { display: none; } .brand__wt { display: none; } .site-nav { gap: var(--space-4); } }

.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 20px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4) var(--space-8); padding-top: var(--space-8); padding-bottom: var(--space-8); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.site-footer a { color: var(--text-soft); }
.site-footer a:hover { color: var(--accent); }
.site-footer__logo { height: 32px; width: auto; display: block; opacity: .85; }

.section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
@media (min-width: 720px) { .section { padding-top: var(--space-16); padding-bottom: var(--space-16); } .exs-hero { min-height: 700px; } }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.h1 { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 40px; line-height: 1; text-transform: uppercase; margin: 0; }
.h2 { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 40px; line-height: 1; text-transform: uppercase; margin: 0; }
@media (min-width: 720px) { .h1, .h2 { font-size: 56px; } }
.kicker { font-size: 12px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.more { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 16px; text-transform: uppercase; color: var(--accent); text-decoration: none; white-space: nowrap; }
.prose { color: var(--text-soft); font-size: 16px; line-height: 24px; max-width: 640px; }
.prose p { margin: 0 0 var(--space-4); }
.prose h2 { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 26px; line-height: 1.05; text-transform: uppercase; color: var(--text); margin: var(--space-8) 0 var(--space-3); }
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose a { color: var(--accent); }

.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.grid-main { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } .grid-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-8); } }
.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.pad-shadow { padding-right: 8px; padding-bottom: 8px; }
@media (max-width: 719px) { .exs-panel { padding: var(--space-4); } .exs-panel__title { font-size: 22px; } .exs-row { grid-template-columns: 28px 1fr auto; gap: var(--space-3); padding: var(--space-3); } .exs-row__name { font-size: 18px; } .exs-row__score { font-size: 22px; } .exs-row.exs-row--podium .exs-row__name { font-size: 22px; } .exs-row.exs-row--podium .exs-row__score { font-size: 28px; } .exs-score { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .exs-score__value { font-size: 22px; } .exs-hero__title { font-size: 72px; } .exs-hero__sub { font-size: 28px; } }
.row-actions { display: flex; align-items: center; gap: var(--space-4); }
.row-actions .exs-btn--sm { display: none; }
@media (min-width: 720px) { .row-actions .exs-btn--sm { display: inline-block; } }
.exs-row.exs-row--me .more { color: var(--accent-ink); }
.pinned { position: sticky; bottom: 0; padding: var(--space-2) 0 var(--space-3); background: var(--surface); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .pinned { position: static; border: 0; padding: var(--space-4) 0 0; } }
.tabs-scroll { overflow-x: auto; padding-bottom: 6px; }
.tabs-scroll .exs-tab { white-space: nowrap; }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--surface-raised); border-top: var(--accent-bar-top) solid var(--accent); box-shadow: var(--shadow-hard); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.video__badges { position: absolute; top: var(--space-4); left: var(--space-4); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.video__play { width: 96px; height: 96px; border: 0; background: var(--accent); color: var(--accent-ink); transform: skewX(var(--skew-panel)); box-shadow: var(--shadow-hard-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.video__play svg { transform: skewX(12deg); }
.video__play:focus-visible { outline: none; box-shadow: var(--exs-focus), var(--shadow-hard-sm); }
.video__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--panel); border-top: 1px solid var(--line); }
.video__track { flex-grow: 1; height: 4px; background: var(--line); }
.video__fill { height: 100%; width: 0; background: var(--accent); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); color: var(--muted); font-size: 14px; padding-top: var(--space-8); }
.crumbs a { color: var(--text-soft); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.linkbox { padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--line-strong); font-size: 14px; color: var(--text-soft); word-break: break-all; }
.steps { display: grid; grid-template-columns: 1fr; gap: var(--space-4); counter-reset: step; }
.steps .exs-panel { padding-top: var(--space-6); }
.notice { border-left: var(--accent-bar) solid var(--accent); background: var(--surface-raised); padding: var(--space-3) var(--space-4); color: var(--text-soft); font-size: 14px; line-height: 20px; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--space-4); top: var(--space-4); z-index: 10; padding: var(--space-2) var(--space-4); background: var(--accent); color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .exs-btn { transition: none; } }
table.lessons { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; color: var(--text-soft); }
table.lessons th { text-align: left; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line-strong); }
table.lessons td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); vertical-align: top; }
table.lessons td:first-child { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 16px; color: var(--accent); }
.lang-switch { position: relative; margin-left: var(--space-2); padding-left: var(--space-4); border-left: 1px solid var(--line-strong); }
.lang-switch summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-1); min-height: 44px; font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 16px; color: var(--text); }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::after { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--accent); }
.lang-switch summary:focus-visible { outline: none; box-shadow: var(--exs-focus); }
.lang-switch ul { position: absolute; right: 0; top: 100%; z-index: 20; margin: 0; padding: var(--space-2) 0; list-style: none; min-width: 180px; background: var(--panel-solid); border: 1px solid var(--line-strong); border-top: var(--accent-bar-top) solid var(--accent); box-shadow: var(--shadow-hard-sm); max-height: 70vh; overflow-y: auto; }
.lang-switch ul a { display: block; padding: var(--space-2) var(--space-4); font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--text-soft); text-decoration: none; white-space: nowrap; }
.lang-switch ul a:hover { color: var(--accent); }
.lang-switch ul a[aria-current="true"] { color: var(--accent); }
@media (max-width: 719px) { .lang-switch { padding-left: var(--space-3); } }
.site-nav .lang-switch ul a { font-family: var(--font-body); font-weight: 600; font-style: normal; font-size: 14px; text-transform: none; letter-spacing: 0; padding: var(--space-2) var(--space-4); }
@media (max-width: 719px) { .site-header .wrap { flex-wrap: wrap; row-gap: 0; } .site-nav { flex-wrap: wrap; } .site-nav a:not(.exs-btn) { font-size: 15px; } }

/* Legal documents share the site's palette, with a readable long-form layout. */
.footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.site-footer nav { max-width: 760px; }
.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.legal-heading .h1 { margin: var(--space-3) 0 var(--space-6); line-height: 1.1; overflow-wrap: anywhere; }
.legal-languages { display: flex; flex-wrap: wrap; gap: var(--space-4); }
@media (max-width: 719px) { .legal-heading .h1 { font-size: clamp(28px, 8.5vw, 36px); } }
.legal-languages a, .legal-sidebar a, .legal-fallback a { color: var(--accent); text-underline-offset: 3px; }
.legal-languages a { padding: var(--space-2) 0; }
.legal-sidebar { padding: var(--space-5, 20px); background: var(--surface-raised); border: 1px solid var(--line); align-self: start; }
.legal-sidebar nav + nav { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.legal-nav-title { margin: 0 0 var(--space-3); color: var(--text); font-weight: 700; }
.legal-sidebar ul, .legal-sidebar ol { margin: 0; padding-left: 20px; }
.legal-toc ol { list-style: none; padding-left: 0; }
.legal-sidebar li + li { margin-top: var(--space-2); }
.legal-sidebar a { display: inline-block; padding: 4px 0; line-height: 1.45; overflow-wrap: anywhere; }
.legal-nav a[aria-current="page"] { color: var(--text); font-weight: 700; text-decoration-thickness: 2px; }
.legal-document { max-width: 760px; font-size: 17px; line-height: 1.65; overflow-wrap: anywhere; }
.legal-document h2 { line-height: 1.2; scroll-margin-top: 24px; }
.legal-document h3 { color: var(--text); line-height: 1.4; margin: 24px 0 12px; }
.legal-document .notice, .legal-document .legal-status { padding: 20px; border-left: 4px solid var(--accent); background: var(--surface-raised); margin: 0 0 24px; font-size: 16px; line-height: 1.6; }
.legal-document .notice p:last-child, .legal-document .legal-status p:last-child { margin-bottom: 0; }
.legal-fallback { max-width: 100%; margin: 0 0 var(--space-8); font-size: 16px; line-height: 1.6; }
.legal-section a:focus-visible, .site-footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (min-width: 960px) {
  .legal-layout { grid-template-columns: minmax(240px, 1fr) minmax(0, 2.4fr); column-gap: 48px; }
  .legal-heading { grid-column: 1 / -1; }
}
@media print {
  body.exs.legal-page { display: block; background: #fff; color: #111; }
  .legal-page .site-header, .legal-page .site-footer, .legal-page .skip, .legal-page .legal-sidebar, .legal-page .legal-languages { display: none; }
  .legal-page .section, .legal-page .wrap { padding: 0; max-width: none; }
  .legal-page .legal-layout { display: block; }
  .legal-page .legal-heading { margin-bottom: 20pt; }
  .legal-page .legal-heading .h1 { font-size: 26pt; }
  .legal-page .legal-document { max-width: none; font-size: 11pt; line-height: 1.5; }
  .legal-page .legal-document, .legal-page .legal-document h2, .legal-page .legal-document h3, .legal-page .kicker, .legal-page .notice, .legal-page .legal-status { color: #111; background: #fff; }
  .legal-page .notice, .legal-page .legal-status { border-color: #333; }
  .legal-page a { color: #111; text-decoration: underline; }
  .legal-page h1, .legal-page h2, .legal-page h3 { break-after: avoid; }
  .legal-page p, .legal-page li { orphans: 3; widows: 3; }
}

.hero-offer { max-width: 620px; margin: 16px 0 24px; }