:root { --edge: clamp(20px, 5vw, 72px); --lead: 28px; }
/* Event skin — the poster's own world: deep Saimaa blue, ink black, paper white.
   Type stays Archivo (the shared system face); color diverges by design. */
.folk {
  --bg: #10344a; --ink: #071620; --paper: #eef5f8;
  --hi: #8fbdd6; --line: color-mix(in srgb, #eef5f8 40%, transparent);
  margin: 0; color: var(--paper); font-family: var(--font-body); text-wrap: pretty;
  background:
    radial-gradient(130% 90% at 72% 6%, #266a92 0%, #164b68 34%, #0e3149 62%, #081f2e 100%);
  min-height: 100vh; position: relative; isolation: isolate;
}
.folk::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.folk a { color: var(--hi); }
.folk .wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.folk .rule { height: 2px; background: var(--line); border: 0; margin: 0; }

.folk .nav { display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-4) max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
  border-bottom: 2px solid var(--line); }
.folk .nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; letter-spacing: -0.01em; margin-right: auto; text-decoration: none; color: var(--paper); }
.folk .nav a.link { color: var(--paper); text-decoration: none; font-size: 14px; }
.folk .nav a.link:hover { color: var(--hi); }
.folk .lang { font-family: var(--font-heading); font-weight: 600; font-size: 13px; letter-spacing: 0.06em;
  background: none; border: 2px solid var(--line); color: var(--paper); padding: 6px 10px; cursor: pointer; }
.folk .lang:hover { border-color: var(--hi); color: var(--hi); }

/* buttons */
.fbtn { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 600;
  font-size: 15px; letter-spacing: 0.01em; padding: 13px 20px; text-decoration: none; border: 2px solid; cursor: pointer; }
.fbtn-solid { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.fbtn-solid:hover { background: var(--hi); border-color: var(--hi); color: var(--ink); }
.fbtn-ghost { background: none; color: var(--paper); border-color: var(--line); }
.fbtn-ghost:hover { border-color: var(--paper); background: color-mix(in srgb, #fff 10%, transparent); color: var(--paper); }

/* hero — the poster, set as type */
.folk-hero { padding: clamp(28px, 6vw, 80px) 0 clamp(32px, 5vw, 64px); }
.folk-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.folk-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  color: var(--ink); font-size: clamp(64px, 15vw, 220px); line-height: 0.82; letter-spacing: -0.035em;
  margin: 0; margin-left: -0.05em; text-transform: uppercase; }
.folk-title span { display: block; }
.folk-datebox { text-align: right; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  color: var(--ink); font-size: clamp(28px, 4.4vw, 60px); line-height: 0.92; letter-spacing: -0.01em; flex: none; }
.folk-venue { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(22px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.01em; margin: clamp(18px,3vw,34px) 0 0;
  color: var(--ink); }
.folk-lineup { list-style: none; margin: clamp(24px,4vw,44px) 0 0; padding: 0; }
.folk-lineup li { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  color: var(--paper); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.02;
  font-size: clamp(34px, 7vw, 92px); }
.folk-lineup li:first-child { font-size: clamp(48px, 11vw, 150px); }

/* info strip */
.folk-info { border-top: 2px solid var(--line); border-bottom: 2px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr); }
.folk-info .cell { padding: calc(1.2 * var(--lead)) var(--space-6); border-right: 2px solid var(--line); }
.folk-info .cell:last-child { border-right: 0; }
.folk-info .k { display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hi); margin-bottom: 8px; }
.folk-info .v { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(17px, 1.8vw, 22px); line-height: 1.15; }
@media (max-width: 720px) { .folk-info { grid-template-columns: 1fr 1fr; }
  .folk-info .cell:nth-child(2) { border-right: 0; }
  .folk-info .cell:nth-child(1), .folk-info .cell:nth-child(2) { border-bottom: 2px solid var(--line); } }

/* about */
.folk-about { padding: clamp(40px,6vw,88px) 0; }
.folk-about .lead { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 3vw, 40px); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--lead); max-width: 22ch; }
.folk-about p { font-size: 17px; line-height: var(--lead); margin: 0 0 var(--lead); max-width: 62ch;
  color: color-mix(in srgb, var(--paper) 90%, transparent); }
.folk-about p:last-child { margin-bottom: 0; }

/* artwork slot */
.folk-art { padding: 0 0 clamp(40px,6vw,80px); }
.folk-art image-slot { display: block; width: 100%; aspect-ratio: 3 / 2; }

/* performers */
.folk-acts { padding: clamp(24px,4vw,48px) 0 clamp(40px,6vw,80px); }
.folk-kicker { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hi);
  margin: 0 0 var(--lead); }
.act { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto;
  gap: 8px clamp(20px,4vw,56px); align-items: baseline; padding: calc(1.15*var(--lead)) 0;
  border-top: 2px solid var(--line); }
.act:last-child { border-bottom: 2px solid var(--line); }
.act-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; margin: 0; }
.act-desc { font-size: 15.5px; line-height: var(--lead); color: color-mix(in srgb, var(--paper) 85%, transparent); margin: 0; }
.act-link { justify-self: end; white-space: nowrap; font-family: var(--font-heading); font-weight: 600;
  font-size: 14px; text-decoration: none; color: var(--paper); border-bottom: 2px solid var(--hi); padding-bottom: 2px; }
.act-link:hover { color: var(--hi); }
.act-link.disabled { color: color-mix(in srgb, var(--paper) 45%, transparent); border-bottom-color: transparent; }
@media (max-width: 760px) { .act { grid-template-columns: 1fr; }
  .act-link { justify-self: start; } }
.folk-host { font-size: 16px; line-height: var(--lead); margin: var(--lead) 0 0;
  color: color-mix(in srgb, var(--paper) 85%, transparent); }

/* CTA */
.folk-cta { padding: clamp(44px,7vw,96px) 0; text-align: left; }
.folk-cta h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  color: var(--ink); font-size: clamp(40px, 8vw, 120px); line-height: 0.9; letter-spacing: -0.03em; margin: 0 0 var(--lead);
  text-transform: uppercase; }
.folk-cta .row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.folk-cta .price { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--hi); }

/* partners */
.folk-partners { padding: clamp(32px,5vw,64px) 0; border-top: 2px solid var(--line); }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--line); border: 2px solid var(--line); }
.pgrid div { background: transparent; padding: var(--lead) var(--space-6); min-height: 76px;
  display: flex; align-items: center; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; line-height: 1.15; }
@media (max-width: 720px) { .pgrid { grid-template-columns: 1fr 1fr; } }

.folk footer { border-top: 2px solid var(--line); padding: clamp(28px,4vw,48px) 0; }
.folk .foot { display: flex; flex-wrap: wrap; gap: 10px var(--space-8); justify-content: space-between;
  font-size: 13px; color: color-mix(in srgb, var(--paper) 65%, transparent); }
.folk .foot strong { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  color: var(--paper); font-size: 14px; }

/* kumppanit linkkeinä (div -> a) */
.pgrid a{background:transparent;padding:var(--lead) var(--space-6);min-height:76px;display:flex;align-items:center;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:15px;line-height:1.15;text-decoration:none;color:inherit;transition:color .15s}
.pgrid a:hover{color:var(--hi)}
/* juliste (image-slot -> img) */
.folk-art img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}

/* logoseinä (kumppanilogot valkoisina tummalla) */
.pgrid-logos a{justify-content:center;min-height:92px;padding:var(--space-6)}
.pgrid-logos a img{max-height:54px;width:auto;max-width:100%;object-fit:contain;opacity:.9;transition:opacity .15s}
.pgrid-logos a:hover img{opacity:1}
.pgrid-logos a img.logo-invert{filter:invert(1)}
.pgrid-logos a.pgrid-text{justify-content:center;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:16px;color:var(--paper)}

/* SEKSY-logo yläpalkissa */
.folk .nav-brand{display:inline-flex;align-items:center}
.folk .brand-logo{height:40px;width:auto}

/* --- Teemun UX-korjaukset 22.7. --- */
.pgrid{background:transparent;border:0;gap:clamp(20px,3vw,44px)}
.pgrid-logos a{min-height:160px;padding:var(--space-4)}
.pgrid-logos a img{max-height:120px}
.folk-hero{background:linear-gradient(to bottom,rgba(14,49,73,.12),rgba(14,49,73,.5)),url(/assets/img/saimaa-folk-tausta.jpg) center 22%/cover no-repeat;padding:clamp(44px,8vw,120px) 0 clamp(44px,6vw,90px)}
.folk-art img{aspect-ratio:auto;object-fit:contain;width:auto;max-width:min(100%,560px);margin:0 auto}
.folk .brand-logo{height:clamp(44px,4.5vw,62px)}

/* nappien tekstit: .folk a -linkkiväri ei saa yliajaa nappeja */
.folk a.fbtn-solid,.folk a.fbtn-solid:hover{color:var(--ink)}
.folk a.fbtn-ghost,.folk a.fbtn-ghost:hover{color:var(--paper)}

/* CTA-otsikko valkoiseksi (ink liian tumma tummalla taustalla) */
.folk-cta h2{color:var(--paper)}