@font-face{
  font-family:'Baloo Deco';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('../fonts/baloo2-800.woff2') format('woff2');
}
@font-face{
  font-family:'Karla Text';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/karla-400.woff2') format('woff2');
}
@font-face{
  font-family:'Karla Text';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/karla-700.woff2') format('woff2');
}

:root{
  --orange:#FF6D22;
  --orange-deep:#E35108;
  --orange-soft:#FFE3CC;
  --hero-1:#F8AD82;
  --hero-2:#F2935F;
  --hero-3:#EA8049;
  --pine:#1F6F63;
  --pine-soft:#DEEEE9;
  --ink:#241A12;
  --ink-soft:#5A4A3D;
  --cream:#FFF8EF;
  --cream-dim:#F6ECDC;
  --paper:#FFFFFF;
  --line:rgba(36,26,18,.13);
  --shadow:0 24px 48px -26px rgba(36,20,10,.45);
  --radius-lg:30px;
  --radius-md:18px;
  --radius-sm:10px;
  --font-display:'Baloo Deco', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --font-body:'Karla Text', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --orange:#FF8A4C; --orange-deep:#FFA265; --orange-soft:#3A2412;
    --hero-1:#FFB27E; --hero-2:#FF9A5C; --hero-3:#F27F3F;
    --pine:#5FBFAE; --pine-soft:#13302B; --ink:#FBF1E4; --ink-soft:#D9C7B4;
    --cream:#1B140E; --cream-dim:#241B12; --paper:#211811;
    --line:rgba(251,241,228,.14); --shadow:0 24px 48px -26px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --orange:#FF8A4C; --orange-deep:#FFA265; --orange-soft:#3A2412;
  --hero-1:#FFB27E; --hero-2:#FF9A5C; --hero-3:#F27F3F;
  --pine:#5FBFAE; --pine-soft:#13302B; --ink:#FBF1E4; --ink-soft:#D9C7B4;
  --cream:#1B140E; --cream-dim:#241B12; --paper:#211811;
  --line:rgba(251,241,228,.14); --shadow:0 24px 48px -26px rgba(0,0,0,.6);
  color-scheme: dark;
}
:root[data-theme="light"]{
  --orange:#FF6D22; --orange-deep:#E35108; --orange-soft:#FFE3CC;
  --hero-1:#F8AD82; --hero-2:#F2935F; --hero-3:#EA8049;
  --pine:#1F6F63; --pine-soft:#DEEEE9; --ink:#241A12; --ink-soft:#5A4A3D;
  --cream:#FFF8EF; --cream-dim:#F6ECDC; --paper:#FFFFFF;
  --line:rgba(36,26,18,.13); --shadow:0 24px 48px -26px rgba(36,20,10,.45);
  color-scheme: light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
h1,h2,h3{ font-family:var(--font-display); font-weight:800; text-wrap:balance; margin:0; letter-spacing:.2px; }
a{color:inherit;}
.wrap{max-width:1120px; margin-inline:auto; padding-inline:24px;}
.eyebrow{ font-family:var(--font-body); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; color:var(--orange-deep); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:14px; z-index:55;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 22px; margin:0 auto; max-width:1080px;
  border-radius:999px;
  background:color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.nav-brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:1.05rem; text-decoration:none;}
.nav-brand img{height:30px; width:auto; border-radius:6px;}
.nav-links{display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0;}
.nav-links a{ font-weight:700; font-size:.92rem; text-decoration:none; color:var(--ink-soft); transition:color .15s ease; }
.nav-links a:hover, .nav-links a:focus-visible{color:var(--orange-deep);}
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:700; font-size:.92rem;
  padding:11px 22px; border-radius:999px; border:none; cursor:pointer; text-decoration:none; white-space:nowrap;
}
.btn:focus-visible{outline:3px solid var(--pine); outline-offset:2px;}
.btn-primary{background:var(--orange); color:#2B1200; box-shadow:0 10px 22px -10px rgba(227,81,8,.65);}
.btn-primary:hover{background:var(--orange-deep);}
.btn-ghost{background:transparent; border:1.5px solid var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--orange);}
.btn-block{width:100%; justify-content:center;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}
.nav-cta{display:flex; align-items:center; gap:14px;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle span{display:block; width:22px; height:2.5px; background:var(--ink); margin:4.5px 0; border-radius:2px;}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden; padding:60px 24px 90px; padding-top:70px;
  background: radial-gradient(120% 90% at 18% -10%, var(--hero-1) 0%, var(--hero-2) 46%, var(--hero-3) 100%);
  color:#2B1200;
}
.hero-shape{position:absolute; border-radius:50%; will-change:transform;}
.hero .shape-ball{width:150px; height:150px; top:12%; left:6%; background:rgba(255,255,255,.16); }
.hero .shape-ribbon{width:340px; height:340px; bottom:-140px; right:-60px; background:rgba(255,255,255,.10);}
.hero .shape-dot{width:26px; height:26px; top:32%; right:20%; background:rgba(255,255,255,.5);}
.hero .shape-dot2{width:14px; height:14px; top:60%; left:30%; background:rgba(255,255,255,.4);}
.hero-inner{position:relative; z-index:2; max-width:1120px; margin-inline:auto; text-align:center; padding-top:40px;}
.hero-logo{width:min(300px, 50vw); margin:0 auto 26px;}

.news-spotlight{
  display:inline-flex; align-items:center; gap:14px; max-width:600px; width:100%; margin:0 auto 30px;
  background:var(--cream); color:var(--ink); border-radius:999px; padding:10px 22px 10px 12px;
  text-decoration:none; box-shadow:0 18px 34px -16px rgba(43,18,0,.55); border:1px solid rgba(255,255,255,.55);
  transition:transform .18s ease, box-shadow .18s ease;
}
.news-spotlight:hover, .news-spotlight:focus-visible{transform:translateY(-2px); box-shadow:0 22px 40px -16px rgba(43,18,0,.6);}
.news-spotlight:focus-visible{outline:3px solid var(--pine); outline-offset:3px;}
.news-spotlight-dot{flex:none; position:relative; width:10px; height:10px; border-radius:50%; background:var(--pine); margin-left:4px;}
.news-spotlight-dot::after{
  content:""; position:absolute; inset:-7px; border-radius:50%; border:2px solid var(--pine); opacity:.55;
  animation:spotlightPulse 2.4s ease-out infinite;
}
@keyframes spotlightPulse{0%{transform:scale(.5); opacity:.6;} 100%{transform:scale(2); opacity:0;}}
@media (prefers-reduced-motion: reduce){ .news-spotlight-dot::after{animation:none; display:none;} }
.news-spotlight-body{display:flex; flex-direction:column; gap:1px; text-align:left; min-width:0;}
.news-spotlight-eyebrow{font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--pine);}
.news-spotlight-title{font-family:var(--font-body); font-weight:700; font-size:.94rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.news-spotlight-arrow{flex:none; margin-left:auto; font-size:1.15rem; color:var(--ink-soft); transition:transform .18s ease;}
.news-spotlight:hover .news-spotlight-arrow{transform:translateX(3px);}

.hero h1{font-size:clamp(2.1rem, 5.4vw, 3.6rem); line-height:1.06; color:#2B1200;}
.hero p.lead{ max-width:46ch; margin:20px auto 0; font-size:1.15rem; color:#3E1A00; font-weight:400; }
.hero-cta{display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap;}
.hero .btn-primary{background:#2B1200; color:var(--orange-soft); box-shadow:0 14px 26px -12px rgba(0,0,0,.5);}
.hero .btn-primary:hover{background:#1c0b00;}
.hero .btn-ghost{border-color:rgba(43,18,0,.35); color:#2B1200;}
.hero .btn-ghost:hover{border-color:#2B1200;}

.stat-strip{
  position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  max-width:640px; margin:64px auto 0; background:rgba(43,18,0,.16); border-radius:var(--radius-md); overflow:hidden;
  backdrop-filter:blur(6px);
}
.stat-strip div{background:rgba(255,255,255,.14); padding:20px 12px; text-align:center;}
.stat-strip strong{display:block; font-family:var(--font-display); font-size:1.7rem; color:#2B1200;}
.stat-strip span{font-size:.78rem; color:#3E1A00; font-weight:700;}

/* ---------- generic section ---------- */
section{padding:104px 0; position:relative;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{font-size:clamp(1.7rem, 3.4vw, 2.5rem); margin-top:10px;}
.section-head p{color:var(--ink-soft); font-size:1.05rem; margin-top:14px;}

/* ---------- yhdistys ---------- */
.about{background:var(--paper);}
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center;}
.about-card{ background:var(--pine-soft); border-radius:var(--radius-lg); padding:36px; border:1px solid var(--line); }
.about-card h3{font-size:1.15rem; color:var(--pine); margin-bottom:14px;}
.about-card p{margin:0; color:var(--ink-soft);}
.badge-row{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}
.badge{
  display:inline-flex; align-items:center; gap:8px; background:var(--cream-dim); border:1px solid var(--line);
  padding:9px 16px; border-radius:999px; font-size:.85rem; font-weight:700; color:var(--ink-soft); text-decoration:none;
}

/* ---------- kurssit ---------- */
.courses{background:var(--cream-dim);}
.day-rail{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; margin-bottom:40px; scrollbar-width:none; }
.day-rail::-webkit-scrollbar{display:none;}
.day-pill{
  flex:none; padding:9px 18px; border-radius:999px; border:1.5px solid var(--line);
  font-weight:700; font-size:.86rem; background:var(--paper); color:var(--ink-soft); cursor:pointer;
  font-family:var(--font-body);
}
.day-pill.is-active{background:var(--ink); color:var(--cream); border-color:var(--ink);}
.course-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
.course-card{
  background:var(--paper); border-radius:var(--radius-md); padding:26px; border:1px solid var(--line);
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px; transition:transform .2s ease;
}
.course-card:hover{transform:translateY(-4px);}
.course-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.course-day{
  font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--pine); background:var(--pine-soft); padding:5px 11px; border-radius:999px;
}
.course-price{font-family:var(--font-display); font-weight:800; color:var(--orange-deep); font-size:1.1rem; white-space:nowrap;}
.course-card h3{font-size:1.2rem;}
.course-meta{display:flex; gap:16px; font-size:.85rem; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.course-meta b{color:var(--ink); font-weight:700;}
.course-spots{font-size:.82rem; color:var(--ink-soft);}
.course-spots .dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--pine); margin-right:6px;}
.course-spots.is-full .dot{background:#B33A2E;}
.course-card .btn{margin-top:auto; justify-content:center;}
.course-status-badge{
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 16px; border-radius:999px; font-weight:700; font-size:.84rem; text-align:center; line-height:1.25;
}
.course-status-badge.is-upcoming{background:var(--orange-soft); color:var(--orange-deep);}
.course-status-badge.is-closed{background:var(--line); color:var(--ink-soft);}
.empty-note{color:var(--ink-soft); font-size:.95rem;}

/* ---------- ilmoittautuminen (etusivun selitysosio) ---------- */
.signup{background:var(--ink); color:var(--cream); overflow:hidden; position:relative;}
.signup .eyebrow{color:var(--orange);}
.signup .section-head p{color:#C7B7A6;}
.signup-grid{display:grid; grid-template-columns:1fr; gap:40px; align-items:start; max-width:640px; margin-inline:auto; text-align:left;}
.flow{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:26px;}
.flow li{display:flex; gap:16px; align-items:flex-start;}
.flow-num{
  flex:none; width:38px; height:38px; border-radius:50%; background:var(--orange); color:#2B1200;
  font-family:var(--font-display); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.flow h4{margin:0 0 4px; font-family:var(--font-display); font-size:1.02rem; color:var(--cream);}
.flow p{margin:0; font-size:.92rem; color:#C7B7A6;}

/* ---------- ticket (rekisteröitymislomake) ---------- */
.ticket{
  background:var(--cream); color:var(--ink); border-radius:var(--radius-lg); padding:34px; position:relative;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5); max-width:520px; margin-inline:auto;
}
.ticket:before, .ticket:after{
  content:""; position:absolute; width:26px; height:26px; background:var(--ink); border-radius:50%; top:50%; transform:translateY(-50%);
}
.ticket:before{left:-13px;}
.ticket:after{right:-13px;}
.ticket h3{font-size:1.15rem; margin-bottom:4px;}
.ticket .muted{color:var(--ink-soft); font-size:.88rem; margin-bottom:22px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:.78rem; font-weight:700; color:var(--ink-soft);}
.field .hint{font-size:.72rem; color:var(--ink-soft); font-weight:400;}
.field input, .field select{
  font-family:var(--font-body); font-size:.95rem; padding:12px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line); background:var(--paper); color:var(--ink); width:100%;
}
.field input:focus-visible, .field select:focus-visible{outline:2.5px solid var(--pine); outline-offset:1px;}
.field-error{color:#B33A2E; font-size:.78rem; font-weight:700;}
.ticket .btn-primary{width:100%; justify-content:center; margin-top:8px; padding:14px;}
.ticket-note{font-size:.76rem; color:var(--ink-soft); margin-top:12px; text-align:center;}
.checkbox-row{display:flex; align-items:flex-start; gap:10px; margin:14px 0;}
.checkbox-row input{width:auto; margin-top:3px;}
.checkbox-row label{font-size:.85rem; color:var(--ink-soft); font-weight:400;}

.osallistuja-rivi{grid-template-columns:1fr 1fr 1fr; margin-bottom:10px;}

.maara-valinta{display:flex; gap:12px; flex-wrap:wrap; margin:20px 0;}
.maara-nappi{
  flex:1; min-width:120px; text-align:center; padding:18px 14px; border-radius:var(--radius-md);
  border:1.5px solid var(--line); background:var(--paper); color:var(--ink); font-weight:700; font-size:1rem;
  text-decoration:none; transition:border-color .15s ease, background .15s ease;
}
.maara-nappi:hover, .maara-nappi:focus-visible{border-color:var(--orange); background:var(--orange-soft);}

/* ---------- alert ---------- */
.alert{ border-radius:var(--radius-md); padding:18px 22px; margin-bottom:20px; font-size:.92rem; border:1px solid var(--line); }
.alert-success{background:var(--pine-soft); color:var(--pine); border-color:transparent;}
.alert-error{background:#FBE3DE; color:#B33A2E; border-color:transparent;}
:root[data-theme="dark"] .alert-error, :root[data-theme="dark"] .alert-success{ filter:brightness(1.15); }

/* ---------- ajankohtaista ---------- */
.news{background:var(--paper);}
.news-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px;}
.news-card{ border-radius:var(--radius-md); border:1px solid var(--line); padding:30px; background:var(--cream-dim); display:flex; flex-direction:column; gap:10px; }
.news-card.featured{background:linear-gradient(160deg, var(--orange-soft), var(--cream-dim) 70%);}
.news-date{font-size:.78rem; font-weight:700; color:var(--orange-deep); letter-spacing:.04em;}
.news-card h3{font-size:1.25rem;}
.news-card p{color:var(--ink-soft); margin:0; font-size:.95rem; white-space:pre-line;}

/* ---------- footer ---------- */
footer{background:var(--ink); color:var(--cream); padding:64px 0 28px;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(251,241,228,.14);}
footer h4{font-family:var(--font-display); font-size:1rem; margin-bottom:16px; color:var(--cream);}
footer .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:1.15rem; margin-bottom:12px;}
footer .brand img{height:30px; border-radius:6px;}
footer p{color:#C7B7A6; font-size:.92rem; margin:0 0 8px;}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
footer a{color:#C7B7A6; text-decoration:none; font-size:.92rem;}
footer a:hover{color:var(--orange);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:.8rem; color:#8A7864; flex-wrap:wrap; gap:10px;}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* ---------- rekisteröitymissivu (ei hero-taustaa) ---------- */
.page-hero{ background:var(--cream-dim); padding:64px 0 48px; text-align:center; }
.page-hero .eyebrow{display:block; margin-bottom:10px;}
.page-hero h1{font-size:clamp(1.8rem, 4vw, 2.6rem);}
.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:.88rem; font-weight:700; color:var(--ink-soft); text-decoration:none; margin-bottom:18px;}
.back-link:hover{color:var(--orange-deep);}
.result-page{ min-height:60vh; display:flex; align-items:center; justify-content:center; padding:60px 24px; }
.result-card{ max-width:520px; text-align:center; }
.result-icon{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:1.8rem; }
.result-icon.ok{background:var(--pine-soft); color:var(--pine);}
.result-icon.warn{background:var(--orange-soft); color:var(--orange-deep);}

@media (max-width: 880px){
  .nav-links, .nav-cta .btn-ghost{display:none;}
  .nav-toggle{display:block;}
  .about-grid, .news-grid{grid-template-columns:1fr;}
  .course-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr; gap:28px;}
  /* Rivitys vierityksen sijaan, ettei viimeinen (esim. Sunnuntai) jää huomaamatta
     näkymän ulkopuolelle piilotetun vierityspalkin taakse. */
  .day-rail{flex-wrap:wrap; overflow-x:visible;}
}
@media (max-width: 560px){
  .course-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .stat-strip{grid-template-columns:1fr; max-width:280px;}
  section{padding:72px 0;}
  .hero{padding-top:60px; padding-bottom:70px;}
  .news-spotlight{padding:10px 16px 10px 12px; gap:11px;}
  .news-spotlight-title{white-space:normal; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; font-size:.88rem;}
  .news-spotlight-arrow{display:none;}
  .ticket{padding:24px;}
}