/* =============================================================================
   velofy.cc — seurasivun tyylitiedosto
   Tulostaulu-design-systeemin --tt-*-tokenit + seuran värikorvaus .ksp--club:ssa.
   Komponenttirakenne (kortit, napit, spacing, typografia) pysyy koskematta.
   ============================================================================= */

:root {
  --tt-bg:        #efe7d6;
  --tt-bg-warm:   #f5eee0;
  --tt-surface:   #faf4e3;
  --tt-ink:       #1a1714;
  --tt-ink-soft:  #3d342c;
  --tt-ink-muted: #6a5f50;
  --tt-burgundy:    #6b1f1f;
  --tt-burgundy-d:  #4a1414;
  --tt-burgundy-l:  #8a3030;
  --tt-mustard:    #d4a537;
  --tt-mustard-d:  #b88820;
  --tt-mustard-l:  #e6bd5a;
  --tt-olive:      #5d5a2b;
  --tt-rule:        #c9bfa6;
  --tt-rule-soft:   #ddd4be;
  --tt-rule-strong: #8a8165;
  --tt-disc-gravel: #6b5d2b;
  --tt-disc-road:   #6b1f1f;
  --tt-disc-mtb:    #8a4a20;
  --tt-disc-cx:     #4a2b44;
  --tt-disc-trial:  #3d5028;
  --tt-disc-brevet: #2d2c4a;
  --tt-font-brand:   "Bricolage Grotesque", -apple-system, sans-serif;
  --tt-font-display: "Oswald", Impact, "Arial Narrow", sans-serif;
  --tt-font-serif:   "Playfair Display", "Times New Roman", serif;
  --tt-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* KSP-24:n väripaletti — poimittu seuran ajoasusta */
  --ksp-cyan:      #0f9fc0;
  --ksp-cyan-d:    #0b7a94;
  --ksp-cyan-l:    #5cc9e2;
  --ksp-magenta:   #b3157e;
  --ksp-magenta-d: #7f0f59;
  --ksp-magenta-l: #e563b8;
  --ksp-yellow:    #e8d400;
  --ksp-yellow-d:  #b8a700;
  --ksp-yellow-l:  #f5ea6b;
}

/* Seuran värikorvaus — roolitetut tokenit (burgundy/mustard/olive) osoittavat
   seuran omiin väreihin; kaikki komponentit käyttävät näitä automaattisesti */
.ksp--club {
  --tt-burgundy:    var(--ksp-magenta);
  --tt-burgundy-d:  var(--ksp-magenta-d);
  --tt-burgundy-l:  var(--ksp-magenta-l);
  --tt-mustard:     var(--ksp-yellow);
  --tt-mustard-d:   var(--ksp-yellow-d);
  --tt-mustard-l:   var(--ksp-yellow-l);
  --tt-olive:       var(--ksp-cyan-d);
  --tt-disc-road:   var(--ksp-cyan-d);
  --tt-disc-gravel: var(--ksp-magenta-d);
}

/* ---- Perusasettelu ---- */
html, body {
  margin: 0; padding: 0;
  background: #d8cfba;
}
.ksp, .ksp * { box-sizing: border-box; margin: 0; padding: 0; }
.ksp {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--tt-bg);
  color: var(--tt-ink);
  font-family: var(--tt-font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.ksp img { display: block; max-width: 100%; }
.ksp a { color: inherit; text-decoration: none; }

/* ---- Käännetty otsake: seura edellä, velofy "powered by" hiljaa ---- */
.ksp .khead {
  display: flex; align-items: center; gap: 12px;
  background: var(--tt-surface); border-bottom: 3px double var(--tt-ink);
  padding: 12px 16px;
}
.ksp .khead__logo {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden; background: var(--tt-bg-warm);
}
.ksp .khead__logo img { width: 100%; height: 100%; object-fit: contain; }
.ksp .khead__id { min-width: 0; }
.ksp .khead__name {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 22px;
  line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em; color: var(--tt-ink);
}
.ksp .khead__sub {
  font-family: var(--tt-font-serif); font-style: italic; font-size: 12px;
  color: var(--tt-burgundy); margin-top: 2px;
}
.ksp .khead__spacer { flex: 1; }
.ksp .khead__powered { text-align: right; flex-shrink: 0; opacity: 0.55; }
.ksp .khead__powered-lbl {
  display: block; font-family: var(--tt-font-sans); font-size: 8px;
  letter-spacing: 0.06em; color: var(--tt-ink-muted);
}
.ksp .khead__powered-brand {
  display: block; font-family: var(--tt-font-brand); font-weight: 800;
  font-size: 11px; letter-spacing: -0.03em; color: var(--tt-ink-muted);
}

/* ---- Hero (Variantti B) ---- */
.ksp .bhero { position: relative; }
.ksp .bhero__img { width: 100%; height: 300px; object-fit: cover; object-position: 50% 20%; transition: opacity 0.5s ease; }
.ksp .bhero__img.fading { opacity: 0; }
.ksp .bhero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(179,21,126,0.08) 0%, rgba(26,23,20,0.02) 40%, rgba(26,23,20,0.85) 100%);
}
.ksp .bhero__stripe {
  position: absolute; top: 0; left: 0; right: 0; height: 5px; display: flex;
}
.ksp .bhero__stripe span { flex: 1; }
.ksp .bhero__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 18px 18px; display: flex; align-items: flex-end; gap: 14px;
}
.ksp .bhero__logo {
  width: 80px; height: 80px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden; background: var(--tt-surface);
}
.ksp .bhero__logo img { width: 100%; height: 100%; object-fit: contain; }
.ksp .bhero__name {
  font-family: var(--tt-font-display); font-weight: 700; text-transform: uppercase;
  font-size: 44px; line-height: 0.86; color: #fff;
}
.ksp .bhero__tagline {
  font-family: var(--tt-font-serif); font-style: italic; font-size: 15px;
  color: var(--ksp-yellow-l); margin-top: 4px;
}

/* ---- Osiorakenne ---- */
.ksp .sec { padding: 22px 18px; }
.ksp .sec--tight { padding: 18px 18px; }
.ksp .sec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border-top: 3px double var(--tt-ink); padding-top: 12px; margin-bottom: 14px;
}
.ksp .sec-head__title {
  font-family: var(--tt-font-display); font-weight: 700; text-transform: uppercase;
  font-size: 26px; line-height: 0.95; letter-spacing: 0.01em; color: var(--tt-ink);
}
.ksp .sec-head__note {
  font-family: var(--tt-font-serif); font-style: italic; font-size: 13px;
  color: var(--tt-burgundy); text-align: right; flex-shrink: 0; max-width: 46%;
}

/* ---- Seura-osio (about) ---- */
.ksp .about p { font-size: 15px; line-height: 1.65; color: var(--tt-ink-soft); }
.ksp .about p + p { margin-top: 12px; }
.ksp .lede {
  font-family: var(--tt-font-serif); font-style: italic;
  font-size: 19px; line-height: 1.5; color: var(--tt-burgundy);
}

/* ---- Instagram-karuselli ---- */
.ksp .insta { padding: 20px 0 22px; }
.ksp .insta__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; margin-bottom: 12px;
}
.ksp .insta__title {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 20px;
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--tt-ink);
}
.ksp .insta__handle {
  font-family: var(--tt-font-sans); font-size: 13px; font-weight: 600; color: var(--tt-burgundy);
}
.ksp .insta__row {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 18px 4px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.ksp .insta__row::-webkit-scrollbar { display: none; }
.ksp .insta__item {
  flex: 0 0 auto; width: 118px; height: 118px; scroll-snap-align: start;
  background: var(--tt-bg-warm);
  background-image: repeating-linear-gradient(45deg, var(--tt-rule-soft) 0 8px, var(--tt-bg-warm) 8px 16px);
  display: flex; align-items: center; justify-content: center;
}
.ksp .insta__item span {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-ink-muted);
}

/* ---- Liity-osio ---- */
.ksp .join {
  background: var(--tt-burgundy); color: var(--tt-bg);
  padding: 26px 20px; text-align: center;
}
.ksp .join__eyebrow {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--tt-mustard);
}
.ksp .join__title {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 34px;
  text-transform: uppercase; line-height: 0.95; letter-spacing: 0.01em; margin: 10px 0 6px;
}
.ksp .join__sub {
  font-family: var(--tt-font-serif); font-style: italic; font-size: 15px;
  color: rgba(239,231,214,0.82); margin-bottom: 18px;
}

/* ---- Napit ---- */
.ksp .btn {
  display: inline-block; width: 100%; text-align: center;
  font-family: var(--tt-font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.2em; text-transform: uppercase; padding: 15px 20px; cursor: pointer;
}
.ksp .btn--mustard { background: var(--tt-mustard); color: var(--tt-ink); }
.ksp .btn--ghost {
  background: transparent; color: var(--tt-bg);
  box-shadow: inset 0 0 0 1.5px rgba(239,231,214,0.4); margin-top: 10px;
}
.ksp .btn--outline {
  background: transparent; color: var(--tt-ink); box-shadow: inset 0 0 0 2px var(--tt-ink);
}

/* ---- Viikkolenkki-teaser ---- */
.ksp .weekly {
  background: var(--tt-ink); color: var(--tt-bg);
  padding: 18px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
  margin: 0 18px;
}
.ksp .weekly__cal { text-align: center; flex-shrink: 0; border: 2px solid var(--tt-mustard); padding: 6px 12px; }
.ksp .weekly__cal-day {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tt-mustard);
}
.ksp .weekly__cal-time {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 28px;
  line-height: 0.9; color: #fff; margin-top: 2px;
}
.ksp .weekly__title {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 19px;
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 1;
}
.ksp .weekly__place {
  font-family: var(--tt-font-serif); font-style: italic; font-size: 14px;
  color: var(--tt-mustard-l); margin-top: 5px;
}
.ksp .weekly__meta {
  font-family: var(--tt-font-display); font-weight: 600; font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(239,231,214,0.6); margin-top: 8px;
}
.ksp .weekly__link {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--tt-mustard); margin-top: 12px;
}
.ksp .weekly--link { cursor: pointer; }
.ksp .weekly--link:hover .weekly__link { color: var(--tt-mustard-l); }

/* ---- Kuukausiryhmittely ---- */
.ksp .month {
  font-family: var(--tt-font-display); font-weight: 700; text-transform: uppercase;
  display: flex; align-items: baseline; gap: 10px;
  border-top: 1px solid var(--tt-rule); padding: 14px 0 8px;
}
.ksp .month__name { font-size: 30px; line-height: 0.9; letter-spacing: 0.01em; }
.ksp .month__count {
  font-family: var(--tt-font-serif); font-style: italic; font-weight: 400;
  font-size: 13px; text-transform: none; color: var(--tt-burgundy);
}
.ksp .month__year {
  margin-left: auto; font-size: 12px; letter-spacing: 0.06em;
  color: var(--tt-mustard); background: var(--tt-ink); padding: 3px 8px;
}
/* Noston pieni eyebrow-label — ei kilpaile TAPAHTUMAT/HEINÄKUU-otsikoiden kanssa */
.ksp .next-up-eyebrow {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tt-burgundy);
  margin: 4px 0 8px;
}

/* ---- Tapahtumarivi ---- */
.ksp .erow {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 13px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--tt-rule-soft);
}
.ksp .erow--own { background: rgba(232,212,0,0.06); margin: 0 -18px; padding: 13px 18px; }
.ksp .erow__date { text-align: center; }
.ksp .erow__day {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 30px;
  line-height: 0.86; color: var(--tt-ink);
}
.ksp .erow__wd {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--tt-burgundy); margin-top: 3px;
}
.ksp .erow__body { min-width: 0; }
.ksp .erow__name {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 16px;
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; color: var(--tt-ink);
}
.ksp .erow__meta { margin-top: 4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ksp .erow__disc {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ksp .erow__place {
  font-family: var(--tt-font-serif); font-style: italic; font-size: 13px; color: var(--tt-burgundy);
}
.ksp .erow__map {
  display: inline-flex; align-items: center; margin-left: 4px;
  color: var(--tt-ink-muted); opacity: 0.7; vertical-align: middle;
  text-decoration: none;
}
.ksp .erow__map:hover { opacity: 1; color: var(--tt-burgundy); }
.ksp .erow__group {
  font-family: var(--tt-font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tt-ink-muted); background: var(--tt-rule);
  border-radius: 2px; padding: 1px 5px; text-decoration: none;
}
.ksp .erow__group--gpx { color: var(--tt-burgundy); }
.ksp .erow__group--gpx:hover { background: var(--tt-burgundy); color: white; }
.ksp .erow__right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.ksp .erow__time {
  font-family: var(--tt-font-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.04em; color: var(--tt-ink-muted);
}

/* ---- Badget ---- */
.ksp .badge {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 8px; white-space: nowrap;
}
.ksp .badge--race    { background: var(--tt-burgundy); color: var(--tt-surface); }
.ksp .badge--sportive { background: var(--tt-mustard); color: var(--tt-ink); }
.ksp .badge--social  { background: var(--tt-surface); color: var(--tt-ink); box-shadow: inset 0 0 0 1.5px var(--tt-ink); }
.ksp .badge--brevet  { background: var(--tt-olive); color: var(--tt-surface); }
.ksp .badge--own     { background: var(--tt-ink); color: var(--ksp-yellow); }
.ksp .badge--pending { background: transparent; color: var(--ksp-yellow-l); box-shadow: inset 0 0 0 1.5px var(--ksp-yellow-d); }
.ksp .badge--disc    { background: var(--ksp-cyan-d); color: #fff; }

/* ---- Sponsorinauhake ---- */
.ksp .sponsors { background: var(--tt-ink); padding: 14px 18px 18px; }
.ksp .sponsors__eyebrow {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(239,231,214,0.45);
  margin-bottom: 12px; text-align: center;
}
.ksp .sponsors__row {
  display: flex; align-items: center; justify-content: center;
  gap: 22px; flex-wrap: wrap;
}
.ksp .sponsors__logo { height: 30px; width: auto; object-fit: contain; opacity: 0.9; }
.ksp .sponsors__text {
  font-family: var(--tt-font-sans); font-size: 12px; font-weight: 600;
  color: rgba(239,231,214,0.65); white-space: nowrap;
}

/* ---- Yhteystietorivi ---- */
.ksp .crow {
  display: flex; align-items: baseline; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--tt-rule-soft);
}
.ksp .crow:last-child { border-bottom: none; }
.ksp .crow__k {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tt-ink-muted);
  width: 96px; flex-shrink: 0;
}
.ksp .crow__v { font-family: var(--tt-font-sans); font-size: 14px; color: var(--tt-ink); }
.ksp .crow__v a { color: var(--tt-burgundy); border-bottom: 1px solid var(--tt-rule); }

/* ---- Kauppatuotteet ---- */
.ksp .shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ksp .product { background: var(--tt-surface); box-shadow: inset 0 0 0 1px var(--tt-rule); }
.ksp .product__img {
  height: 120px; background: var(--tt-bg-warm); display: flex; align-items: center; justify-content: center;
  background-image: repeating-linear-gradient(45deg, var(--tt-rule-soft) 0 8px, var(--tt-bg-warm) 8px 16px);
}
.ksp .product__body { padding: 10px 12px 12px; }
.ksp .product__name {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05;
}
.ksp .product__price { font-family: var(--tt-font-sans); font-size: 13px; color: var(--tt-ink-muted); margin-top: 3px; }

/* ---- Footer (velofy = pieni, seura = iso) ---- */
.ksp .foot--powered {
  background: var(--tt-ink); padding: 24px 18px 28px; text-align: center;
}
.ksp .foot--powered .foot__club {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 26px;
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--ksp-yellow);
}
.ksp .foot--powered .foot__line2 {
  font-family: var(--tt-font-serif); font-style: italic; font-size: 13px;
  color: rgba(239,231,214,0.55); margin-top: 5px;
}
.ksp .foot--powered .foot__powered {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(239,231,214,0.15);
  font-family: var(--tt-font-sans); font-size: 11px; color: rgba(239,231,214,0.4);
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.ksp .foot--powered .foot__powered b {
  font-family: var(--tt-font-brand); font-weight: 800; color: rgba(239,231,214,0.65);
}

/* ---- Tapahtumasivu-komponentit (Variantti E) ---- */
.ksp .ebread {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  background: var(--tt-surface); border-bottom: 1px solid var(--tt-rule);
}
.ksp .ebread a {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tt-burgundy);
}
.ksp .ebread span { color: var(--tt-ink-muted); font-size: 11px; }

.ksp .ehero { position: relative; }
.ksp .ehero img { width: 100%; height: 220px; object-fit: cover; object-position: 50% 20%; }
.ksp .ehero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,23,20,0) 40%, rgba(26,23,20,0.88) 100%);
}
.ksp .ehero__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 18px 16px; }
.ksp .ehero__badges { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.ksp .ehero__title {
  font-family: var(--tt-font-display); font-weight: 700; text-transform: uppercase;
  font-size: 30px; line-height: 0.96; color: #fff;
}
.ksp .ehero__sub {
  font-family: var(--tt-font-serif); font-style: italic; font-size: 14px;
  color: var(--ksp-yellow-l); margin-top: 5px;
}

.ksp .efacts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--tt-rule); box-shadow: 0 0 0 1px var(--tt-rule); margin-top: 4px;
}
.ksp .efacts--full { grid-column: 1 / -1; }
.ksp .efact { background: var(--tt-surface); padding: 10px 12px; }
.ksp .efact-k {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 8px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tt-ink-muted);
}
.ksp .efact-v {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--tt-ink); margin-top: 2px;
}

.ksp .eflags { display: flex; gap: 7px; flex-wrap: wrap; padding: 14px 18px 4px; }
.ksp .eflag {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 9px;
  background: var(--tt-bg-warm); color: var(--tt-ink-soft); box-shadow: inset 0 0 0 1px var(--tt-rule);
}

.ksp .paces {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--tt-rule); box-shadow: 0 0 0 1px var(--tt-rule); margin: 0 18px;
}
.ksp .pace {
  background: var(--tt-surface);
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center;
  gap: 10px; padding: 10px 12px;
}
.ksp .pace__km {
  font-family: var(--tt-font-display); font-weight: 800; font-size: 15px;
  color: var(--tt-burgundy); white-space: nowrap;
}
.ksp .pace__name {
  font-family: var(--tt-font-display); font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em; color: var(--tt-ink-soft);
}
.ksp .pace__gpx-wrap { text-align: right; }
.ksp .pace__gpx {
  font-family: var(--tt-font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--tt-burgundy); text-decoration: none;
  border: 1px solid var(--tt-burgundy); border-radius: 2px; padding: 2px 6px;
}
.ksp .pace__gpx:hover { background: var(--tt-burgundy); color: white; }

.ksp .epending {
  background: var(--tt-bg-warm); border-left: 4px solid var(--tt-mustard-d);
  padding: 12px 14px; margin: 0 18px;
  font-family: var(--tt-font-sans); font-size: 13px; color: var(--tt-ink-soft);
}
.ksp .epending b {
  font-family: var(--tt-font-display); font-weight: 700; text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.1em; color: var(--tt-burgundy);
  display: block; margin-bottom: 4px;
}

/* ---- Kevyt RSVP ---- */
.ksp .rsvp {
  background: var(--tt-ink); color: var(--tt-bg); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.ksp .rsvp__proof {
  font-family: var(--tt-font-serif); font-style: italic; font-size: 13px;
  color: rgba(239,231,214,0.75);
}
.ksp .rsvp__proof b {
  color: var(--ksp-yellow-l); font-style: normal;
  font-family: var(--tt-font-display); font-weight: 700; letter-spacing: 0.02em;
}
.ksp .rsvp__reveal {
  border: 1.5px dashed rgba(239,231,214,0.3); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 9px;
}
.ksp .rsvp__reveal-lbl {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--tt-bg);
}
.ksp .rsvp__check {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--tt-font-sans); font-size: 12px; color: rgba(239,231,214,0.7);
}
.ksp .rsvp__name {
  font-family: var(--tt-font-sans); font-size: 13px;
  background: rgba(239,231,214,0.08); border: 1px solid rgba(239,231,214,0.25);
  color: var(--tt-bg); padding: 8px 10px;
}
.ksp .rsvp__name::placeholder { color: rgba(239,231,214,0.45); }
.ksp .rsvp__cta {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--ksp-yellow); color: var(--tt-ink); border: none;
  padding: 12px 14px; cursor: pointer; width: 100%; text-align: center;
}
.ksp .rsvp__share {
  font-family: var(--tt-font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
  background: transparent; color: var(--tt-bg); border: 1.5px solid rgba(239,231,214,0.4);
  padding: 9px 14px; cursor: pointer; width: 100%;
}

/* ---- Lataustilapaikka ---- */
.ksp .loading {
  padding: 24px 0; text-align: center;
  font-family: var(--tt-font-serif); font-style: italic; font-size: 14px; color: var(--tt-ink-muted);
}