/* Paletit + 3 uutta ilmettä + arkisto
   Ilmeet: 1 Kutsu, 2 Viesti, 3 Lava
   Arkisto: a3 Aalto, a4 Lehti, a6 Kuntarekisteri, a7 Juliste, a8 Piste,
            a1 Ilmoitustaulu, a2 Tarra-arkki, a5 Retkikartta
   ============================================================ */

:root {
  --ilon-dark: #47639C;
  --ilon-dark-deep: #3A5280;
  --ilon-light: #A5D8EB;
  --ilon-light-pale: #E8F4F9;
  --ilon-light-soft: #C5E8F5;
  --ilon-text: #2D4568;
  --ilon-muted: #5A7A9E;
  --ilon-white: #F8FCFE;
  --ilon-warm: #A5D8EB;
  --ilon-dark-rgb: 71, 99, 156;
  --ilon-light-rgb: 165, 216, 235;
  --ilon-shadow-rgb: 58, 82, 128;
  --ilon-border: #C5DDE8;
  --ilon-border-strong: #8FB4CC;
  /* Sanamerkin maskiväri. Yläpalkissa on toistaiseksi alkuperäinen PNG;
     vaihda tämä hex ja palauta maski headeriin, kun virallinen väri varmistuu. */
  --logo-color: var(--ilon-dark);
  --logo-color-footer: var(--ilon-light);
}

/* ---------- Paletit (vaihtuvat data-palette-attribuutilla) ---------- */

[data-palette="ilon"] {
  --ilon-dark: #47639C;
  --ilon-dark-deep: #3A5280;
  --ilon-light: #A5D8EB;
  --ilon-light-pale: #E8F4F9;
  --ilon-light-soft: #C5E8F5;
  --ilon-text: #2D4568;
  --ilon-muted: #5A7A9E;
  --ilon-white: #F8FCFE;
  --ilon-warm: #A5D8EB;
  --ilon-dark-rgb: 71, 99, 156;
  --ilon-light-rgb: 165, 216, 235;
  --ilon-shadow-rgb: 58, 82, 128;
  --ilon-border: #C5DDE8;
  --ilon-border-strong: #8FB4CC;
}

[data-palette="ranta"] {
  --ilon-dark: #5A7E85;
  --ilon-dark-deep: #3F5E64;
  --ilon-light: #93B7BE;
  --ilon-light-pale: #F1FFFA;
  --ilon-light-soft: #D5C7BC;
  --ilon-text: #33484C;
  --ilon-muted: #6B7F7C;
  --ilon-white: #F1FFFA;
  --ilon-warm: #D5C7BC;
  --ilon-dark-rgb: 90, 126, 133;
  --ilon-light-rgb: 147, 183, 190;
  --ilon-shadow-rgb: 63, 94, 100;
  --ilon-border: #D5C7BC;
  --ilon-border-strong: #93B7BE;
}

[data-palette="mustikka"] {
  --ilon-dark: #3D4A7A;
  --ilon-dark-deep: #2C365C;
  --ilon-light: #C9B8D6;
  --ilon-light-pale: #F6F2EA;
  --ilon-light-soft: #E4D7C8;
  --ilon-text: #2A2F48;
  --ilon-muted: #6B6680;
  --ilon-white: #FBF8F2;
  --ilon-warm: #E4D7C8;
  --ilon-dark-rgb: 61, 74, 122;
  --ilon-light-rgb: 201, 184, 214;
  --ilon-shadow-rgb: 44, 54, 92;
  --ilon-border: #DDD4C6;
  --ilon-border-strong: #9A8BB0;
}

[data-palette="mintti"] {
  --ilon-dark: #5E5A72;
  --ilon-dark-deep: #47445A;
  --ilon-light: #9590A8;
  --ilon-light-pale: #E5FFDE;
  --ilon-light-soft: #BBCBCB;
  --ilon-text: #3A3848;
  --ilon-muted: #6D7280;
  --ilon-white: #F4FFF0;
  --ilon-warm: #BBCBCB;
  --ilon-dark-rgb: 94, 90, 114;
  --ilon-light-rgb: 149, 144, 168;
  --ilon-shadow-rgb: 71, 68, 90;
  --ilon-border: #BBCBCB;
  --ilon-border-strong: #9590A8;
}

[data-palette="rubiini"] {
  --ilon-dark: #A71D31;
  --ilon-dark-deep: #3F0D12;
  --ilon-light: #F1F0CC;
  --ilon-light-pale: #F1F0CC;
  --ilon-light-soft: #E8D4D0;
  --ilon-text: #3F0D12;
  --ilon-muted: #8A5A5E;
  --ilon-white: #FBFAEE;
  --ilon-warm: #F1F0CC;
  --ilon-dark-rgb: 167, 29, 49;
  --ilon-light-rgb: 241, 240, 204;
  --ilon-shadow-rgb: 63, 13, 18;
  --ilon-border: #E0C9B8;
  --ilon-border-strong: #A71D31;
}

[data-palette="lohi"] {
  --ilon-dark: #C45B4A;
  --ilon-dark-deep: #8F4E44;
  --ilon-light: #EA9E8D;
  --ilon-light-pale: #EEF4D4;
  --ilon-light-soft: #DAEFB3;
  --ilon-text: #3D3A32;
  --ilon-muted: #6F7460;
  --ilon-white: #F7FAEC;
  --ilon-warm: #EA9E8D;
  --ilon-dark-rgb: 196, 91, 74;
  --ilon-light-rgb: 234, 158, 141;
  --ilon-shadow-rgb: 143, 78, 68;
  --ilon-border: #DAEFB3;
  --ilon-border-strong: #EA9E8D;
}

[data-palette="kulta"] {
  --ilon-dark: #1C1A16;
  --ilon-dark-deep: #12110E;
  --ilon-light: #C4A35A;
  --ilon-light-pale: #F7F1E3;
  --ilon-light-soft: #E8D9B5;
  --ilon-text: #1C1A16;
  --ilon-muted: #6E6758;
  --ilon-white: #FBF7EE;
  --ilon-warm: #C4A35A;
  --ilon-dark-rgb: 28, 26, 22;
  --ilon-light-rgb: 196, 163, 90;
  --ilon-shadow-rgb: 28, 26, 22;
  --ilon-border: #E0D4B8;
  --ilon-border-strong: #C4A35A;
}

[data-palette="mandariini"] {
  --ilon-dark: #EA580C;
  --ilon-dark-deep: #7C2D12;
  --ilon-light: #FFEDD5;
  --ilon-light-pale: #FFF7ED;
  --ilon-light-soft: #FED7AA;
  --ilon-text: #7C2D12;
  --ilon-muted: #9A5B3C;
  --ilon-white: #FFFBF5;
  --ilon-warm: #FB923C;
  --ilon-dark-rgb: 234, 88, 12;
  --ilon-light-rgb: 255, 237, 213;
  --ilon-shadow-rgb: 124, 45, 18;
  --ilon-border: #FED7AA;
  --ilon-border-strong: #EA580C;
}

[data-palette="aprikoosi"] {
  --ilon-dark: #C2410C;
  --ilon-dark-deep: #9A3412;
  --ilon-light: #FB923C;
  --ilon-light-pale: #FFF7ED;
  --ilon-light-soft: #FFEDD5;
  --ilon-text: #431407;
  --ilon-muted: #9A5B3C;
  --ilon-white: #FFFAF5;
  --ilon-warm: #FB923C;
  --ilon-dark-rgb: 194, 65, 12;
  --ilon-light-rgb: 251, 146, 60;
  --ilon-shadow-rgb: 154, 52, 18;
  --ilon-border: #FFEDD5;
  --ilon-border-strong: #FB923C;
}

[data-palette="tiili"] {
  --ilon-dark: #9A3412;
  --ilon-dark-deep: #1C1917;
  --ilon-light: #F5E6D3;
  --ilon-light-pale: #FAF4EB;
  --ilon-light-soft: #E7C9A8;
  --ilon-text: #1C1917;
  --ilon-muted: #78716C;
  --ilon-white: #FDFBF7;
  --ilon-warm: #C2410C;
  --ilon-dark-rgb: 154, 52, 18;
  --ilon-light-rgb: 245, 230, 211;
  --ilon-shadow-rgb: 28, 25, 23;
  --ilon-border: #E7D5C0;
  --ilon-border-strong: #9A3412;
}

[data-palette="hunaja"] {
  --ilon-dark: #B45309;
  --ilon-dark-deep: #451A03;
  --ilon-light: #FCD34D;
  --ilon-light-pale: #FFFBEB;
  --ilon-light-soft: #FDE68A;
  --ilon-text: #451A03;
  --ilon-muted: #92400E;
  --ilon-white: #FFFEF7;
  --ilon-warm: #D97706;
  --ilon-dark-rgb: 180, 83, 9;
  --ilon-light-rgb: 252, 211, 77;
  --ilon-shadow-rgb: 69, 26, 3;
  --ilon-border: #FDE68A;
  --ilon-border-strong: #D97706;
}

/* Sininen + oranssi + keltainen */

[data-palette="satama"] {
  --ilon-dark: #28536B;
  --ilon-dark-deep: #1A3A4C;
  --ilon-light: #F0A202;
  --ilon-light-pale: #EAF4F2;
  --ilon-light-soft: #83C5BE;
  --ilon-text: #1A3A4C;
  --ilon-muted: #4A6B78;
  --ilon-white: #F7FBFA;
  --ilon-warm: #F0A202;
  --ilon-dark-rgb: 40, 83, 107;
  --ilon-light-rgb: 240, 162, 2;
  --ilon-shadow-rgb: 26, 58, 76;
  --ilon-border: #C5DDD9;
  --ilon-border-strong: #83C5BE;
}

[data-palette="poiju"] {
  --ilon-dark: #0E4A67;
  --ilon-dark-deep: #082F42;
  --ilon-light: #FF8A1F;
  --ilon-light-pale: #F3F7FA;
  --ilon-light-soft: #FFD23F;
  --ilon-text: #082F42;
  --ilon-muted: #4A6A7A;
  --ilon-white: #FAFCFD;
  --ilon-warm: #FF8A1F;
  --ilon-dark-rgb: 14, 74, 103;
  --ilon-light-rgb: 255, 138, 31;
  --ilon-shadow-rgb: 8, 47, 66;
  --ilon-border: #C5D4DC;
  --ilon-border-strong: #FF8A1F;
}

[data-palette="iltarusko"] {
  --ilon-dark: #2A3F5F;
  --ilon-dark-deep: #1A283C;
  --ilon-light: #F2B84B;
  --ilon-light-pale: #FBF6EC;
  --ilon-light-soft: #E07A3D;
  --ilon-text: #1A283C;
  --ilon-muted: #5C6578;
  --ilon-white: #FFFCF6;
  --ilon-warm: #E07A3D;
  --ilon-dark-rgb: 42, 63, 95;
  --ilon-light-rgb: 242, 184, 75;
  --ilon-shadow-rgb: 26, 40, 60;
  --ilon-border: #E8D9C4;
  --ilon-border-strong: #E07A3D;
}

[data-palette="sinappi"] {
  --ilon-dark: #2F4C6E;
  --ilon-dark-deep: #1E334A;
  --ilon-light: #E3B23C;
  --ilon-light-pale: #F7F3E8;
  --ilon-light-soft: #D4894A;
  --ilon-text: #1E334A;
  --ilon-muted: #5E6E80;
  --ilon-white: #FBF9F3;
  --ilon-warm: #E3B23C;
  --ilon-dark-rgb: 47, 76, 110;
  --ilon-light-rgb: 227, 178, 60;
  --ilon-shadow-rgb: 30, 51, 74;
  --ilon-border: #E2D8C4;
  --ilon-border-strong: #E3B23C;
}

[data-palette="aurinko"] {
  --ilon-dark: #1E5F8A;
  --ilon-dark-deep: #164866;
  --ilon-light: #F5C518;
  --ilon-light-pale: #FFF9E6;
  --ilon-light-soft: #F08A24;
  --ilon-text: #163A52;
  --ilon-muted: #5A7388;
  --ilon-white: #FFFEF8;
  --ilon-warm: #F08A24;
  --ilon-dark-rgb: 30, 95, 138;
  --ilon-light-rgb: 245, 197, 24;
  --ilon-shadow-rgb: 22, 72, 102;
  --ilon-border: #F0E0B0;
  --ilon-border-strong: #F5C518;
}

[data-palette="niitty"] {
  --ilon-dark: #246A73;
  --ilon-dark-deep: #1A4F56;
  --ilon-light: #FFBA49;
  --ilon-light-pale: #F1F5EB;
  --ilon-light-soft: #7EA16B;
  --ilon-text: #163F45;
  --ilon-muted: #4E6F68;
  --ilon-white: #F8FAF4;
  --ilon-warm: #FFBA49;
  --ilon-dark-rgb: 36, 106, 115;
  --ilon-light-rgb: 255, 186, 73;
  --ilon-shadow-rgb: 26, 79, 86;
  --ilon-border: #D5E0CC;
  --ilon-border-strong: #7EA16B;
}

/* ---------- 1: KUTSU (oletus) ----------
   Kevään 2027 juhlakutsu: reunat, leima, lipunreikä. */

:root {
  --bg: var(--ilon-light-pale);
  --text: var(--ilon-text);
  --muted: var(--ilon-muted);
  --card-bg: var(--ilon-white);
  --border: var(--ilon-border);
  --border-strong: var(--ilon-border-strong);
  --primary: var(--ilon-dark);
  --primary-text: var(--ilon-light);
  --accent: var(--ilon-light);
  --error: #C44A4A;
  --focus: var(--ilon-dark);

  --font-body: "Archivo", "Helvetica Neue", sans-serif;
  --font-heading: "Oswald", "Arial Narrow", sans-serif;
  --heading-weight: 600;
  --heading-transform: uppercase;
  --heading-spacing: .04em;

  --radius-btn: 2px;
  --radius-card: 2px;
  --radius-chip: 2px;
  --radius-input: 2px;

  --card-border: 1px solid var(--border-strong);
  --btn-border: 2px solid transparent;
  --shadow-card: 8px 8px 0 rgba(var(--ilon-shadow-rgb), .12);
  --shadow-card-hover: 10px 10px 0 rgba(var(--ilon-shadow-rgb), .18);
  --shadow-btn: none;

  --chip-bg: var(--ilon-white);
  --chip-border: 1px solid var(--border-strong);
  --chip-active-bg: var(--ilon-dark);
  --chip-active-text: var(--ilon-light);

  --input-bg: var(--ilon-white);
  --input-border: 1px solid var(--border-strong);

  --header-bg: var(--ilon-white);
  --header-border: 2px solid var(--border-strong);
  --footer-bg: var(--ilon-dark);
  --footer-text: var(--ilon-light);

  --hero-bg: transparent;
  --hero-align: left;
  --hero-lead-margin: 0;
  --hero-ctas-justify: flex-start;

  --map-land: var(--ilon-light-soft);
  --map-stroke: var(--ilon-border-strong);
}

[data-design="1"] .hero {
  padding-block: 1.8rem 3rem;
}

[data-design="1"] .hero-inner {
  max-width: none;
  padding: 2rem 2.2rem;
  border: 2px solid var(--ilon-dark);
  box-shadow: 12px 12px 0 var(--ilon-light);
  background: var(--ilon-white);
}

[data-design="1"] .hp {
  border-radius: 0;
  border: 2px solid var(--ilon-dark);
}

[data-design="1"] .hero .kicker {
  background: transparent;
  color: var(--ilon-dark);
  border: 1px solid var(--ilon-dark);
  border-radius: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .14em;
}

[data-design="1"] .hero .kicker--credit {
  border: 0;
  letter-spacing: .03em;
  font-size: .78rem;
  padding: 0;
}

[data-design="1"] h1 {
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  line-height: .95;
}

[data-design="1"] .hero h1 {
  font-size: clamp(2.15rem, 5.2vw, 3.55rem);
  line-height: 1.05;
  max-width: 14ch;
  text-wrap: balance;
}

[data-design="1"] .deed-card {
  position: relative;
  border-left: 2px dashed var(--ilon-dark);
}

[data-design="1"] .feed-grid .deed-card:first-child {
  background: var(--ilon-light-pale);
}

[data-design="1"] .partner-lane {
  border-top: 2px solid var(--ilon-light);
}

/* ---------- 2: VIESTI ----------
   Viesti nuorilta nuorille: käsiala, kapea palsta. */

[data-design="2"] {
  --radius-btn: 999px;
  --radius-card: 18px 18px 18px 4px;
  --radius-chip: 999px;
  --radius-input: 12px;
  --card-border: 0 solid transparent;
  --shadow-card: 0 10px 28px rgba(var(--ilon-shadow-rgb), .1);
  --shadow-card-hover: 0 14px 32px rgba(var(--ilon-shadow-rgb), .16);
  --header-border: 0 solid transparent;
  --font-body: "Fraunces", Georgia, serif;
  --heading-transform: none;
  --heading-spacing: 0;
}

[data-design="2"] .hero .kicker {
  font-family: "Caveat", cursive;
  font-size: 1.45rem;
  background: transparent;
  color: var(--primary);
  padding: 0;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
}

[data-design="2"] h1 {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
}

[data-design="2"] .hero p.lead,
[data-design="2"] .hero-note {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
}

[data-design="2"] .deed-card {
  border-left: 5px solid var(--ilon-light);
}

[data-design="2"] .deed-card h3 {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  letter-spacing: .03em;
}

[data-design="2"] .filter-label {
  font-family: "Caveat", cursive;
  font-size: 1.15rem;
  text-transform: none;
  letter-spacing: 0;
}

[data-design="2"] .hp {
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 10px 24px rgba(var(--ilon-shadow-rgb), .14);
}

/* ---------- 3: LAVA ----------
   Juhlan lava: tumma näyttämö, teot valokeilassa. */

[data-design="3"] {
  --bg: var(--ilon-dark-deep);
  --text: var(--ilon-light);
  --muted: color-mix(in srgb, var(--ilon-light) 70%, var(--ilon-dark) 30%);
  --card-bg: var(--ilon-dark);
  --header-bg: var(--ilon-dark-deep);
  --header-border: 0;
  --footer-bg: #0E0E0C;
  --footer-text: var(--ilon-light);
  --radius-btn: 999px;
  --radius-card: 16px;
  --radius-chip: 999px;
  --card-border: 1px solid color-mix(in srgb, var(--ilon-light) 25%, transparent);
  --shadow-card: 0 0 0 1px rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.28);
  --shadow-card-hover: 0 0 0 1px var(--ilon-light), 0 22px 48px rgba(0,0,0,.35);
  --chip-bg: rgba(255,255,255,.06);
  --chip-border: 1px solid rgba(255,255,255,.18);
  --input-bg: var(--ilon-dark);
  --input-border: 1px solid rgba(255,255,255,.25);
  --map-land: color-mix(in srgb, var(--ilon-dark) 80%, var(--ilon-light));
  --map-stroke: var(--ilon-light);
}

[data-design="3"] .site-header { color: var(--ilon-light); }
[data-design="3"] .site-nav > a:not(.btn) { color: var(--ilon-light); }
[data-design="3"] .site-nav > a:not(.btn):hover { background: transparent; color: var(--ilon-light-soft); }
[data-design="3"] { --logo-color: var(--ilon-light); }
[data-design="3"] .site-header .logo-wordmark,
[data-design="a2"] .site-header .logo-wordmark,
[data-design="a8"] .site-header .logo-wordmark {
  background-image: none;
  background-color: var(--logo-color);
  -webkit-mask-image: url("../assets/ilon-teot-logo.png");
  mask-image: url("../assets/ilon-teot-logo.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

[data-design="3"] .hero .kicker {
  background: var(--ilon-light);
  color: var(--ilon-dark-deep);
}

[data-design="3"] .hp {
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

[data-design="3"] h1 {
  font-size: clamp(2.8rem, 8vw, 5.4rem);
  line-height: .92;
}

[data-design="3"] .deed-card {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--ilon-light-rgb), .16), transparent 55%),
    var(--ilon-dark);
}

[data-design="3"] .stat-line span { color: var(--ilon-light); }

[data-design="3"] .form-card,
[data-design="3"] .filters,
[data-design="3"] .kunta-info,
[data-design="3"] .step {
  background: var(--card-bg);
  color: var(--ilon-light);
}

[data-design="3"] input,
[data-design="3"] textarea,
[data-design="3"] select { color: var(--ilon-light); }

[data-design="3"] .partner-lane {
  background: #0E0E0C;
}

/* ---------- Arkisto: a3 AALTO ---------- */

[data-design="a3"] {
  --radius-btn: 999px;
  --radius-card: 20px;
  --radius-chip: 999px;
  --radius-input: 12px;
  --card-border: 0 solid transparent;
  --shadow-card: 0 8px 28px rgba(var(--ilon-shadow-rgb), .1);
  --shadow-card-hover: 0 14px 36px rgba(var(--ilon-shadow-rgb), .16);
  --shadow-btn: 0 4px 14px rgba(var(--ilon-shadow-rgb), .22);
  --header-bg: color-mix(in srgb, var(--ilon-white) 88%, transparent);
  --header-border: 0 solid transparent;
}

[data-design="a3"] body {
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(var(--ilon-light-rgb), .45), transparent 55%),
    radial-gradient(ellipse 70% 50% at 95% 20%, rgba(var(--ilon-dark-rgb), .12), transparent 50%),
    var(--ilon-light-pale);
}

[data-design="a3"] .hero {
  padding-block: 3.5rem 2.5rem;
}

[data-design="a3"] .hero .kicker {
  background: var(--ilon-light);
  color: var(--ilon-dark);
  border-radius: 999px;
  font-family: "Oswald", sans-serif;
  font-size: .78rem;
  letter-spacing: .1em;
}

[data-design="a3"] h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.05;
}

[data-design="a3"] .counter {
  border-radius: 16px;
  background: linear-gradient(145deg, var(--ilon-white), var(--ilon-light-pale));
}

[data-design="a3"] .counter .num {
  background: linear-gradient(135deg, var(--ilon-dark), #5A7FB5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-design="a3"] .deed-card {
  border-radius: 20px;
  overflow: hidden;
}

[data-design="a3"] .deed-card::before {
  content: "";
  display: block;
  height: 4px;
  margin: -1.25rem -1.25rem 1rem;
  background: linear-gradient(90deg, var(--ilon-dark), var(--ilon-light));
}

[data-design="a3"] .map-box {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* ---------- Arkisto a4: LEHTI ----------
   Editoriaali: sääntöviivat, kaksipalstainen tekosivu. */

[data-design="a4"] {
  --bg: var(--ilon-white);
  --text: var(--ilon-dark);
  --muted: var(--ilon-muted);
  --card-bg: var(--ilon-white);
  --border: #C5DDE8;
  --border-strong: var(--ilon-dark);
  --primary: var(--ilon-dark);
  --primary-text: var(--ilon-light);
  --accent: var(--ilon-light);
  --error: #C44A4A;
  --focus: var(--ilon-dark);

  --font-body: "Fraunces", Georgia, serif;
  --font-heading: "Oswald", "Arial Narrow", sans-serif;
  --heading-weight: 600;
  --heading-transform: uppercase;
  --heading-spacing: .04em;

  --radius-btn: 0;
  --radius-card: 0;
  --radius-chip: 0;
  --radius-input: 0;

  --card-border: 0 solid transparent;
  --shadow-card: none;
  --shadow-card-hover: none;
  --shadow-btn: none;

  --chip-bg: transparent;
  --chip-border: 1px solid var(--ilon-dark);
  --chip-active-bg: var(--ilon-dark);
  --chip-active-text: var(--ilon-light);

  --input-bg: var(--ilon-white);
  --input-border: 1px solid var(--ilon-dark);

  --header-bg: var(--ilon-white);
  --header-border: 3px double var(--ilon-dark);
  --footer-bg: var(--ilon-dark);
  --footer-text: var(--ilon-light);

  --hero-bg: transparent;
  --hero-align: left;
  --hero-lead-margin: 0;
  --hero-ctas-justify: flex-start;

  --map-land: var(--ilon-light-pale);
  --map-stroke: var(--ilon-dark);
}

[data-design="a4"] body { font-size: 17px; line-height: 1.65; }

[data-design="a4"] .hero {
  padding-block: 3rem 2rem;
  border-bottom: 1px solid var(--ilon-dark);
}

[data-design="a4"] .hero .kicker {
  background: transparent;
  color: var(--ilon-muted);
  border: 0;
  border-bottom: 1px solid var(--ilon-dark);
  border-radius: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  padding-bottom: .4em;
}

[data-design="a4"] .hero p.lead {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  max-width: 48ch;
}

[data-design="a4"] .section {
  border-top: 1px solid var(--border);
}

[data-design="a4"] .deed-card {
  border-top: 3px solid var(--ilon-dark);
  padding-top: 1.25rem;
  box-shadow: none;
}

[data-design="a4"] .deed-card h3 {
  font-family: "Oswald", sans-serif;
  font-size: 1.35rem;
  text-transform: uppercase;
}

[data-design="a4"] .deed-desc {
  font-family: "Fraunces", Georgia, serif;
}

[data-design="a4"] .deed-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-top: 1px dashed var(--border-strong);
  padding-top: .75rem;
}

[data-design="a4"] .kat-emoji { display: none; }

[data-design="a4"] .deeds-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 2.5rem;
  align-items: start;
}

[data-design="a4"] .deeds-aside { display: block; }

[data-design="a4"] .leaderboard {
  border-left: 3px solid var(--ilon-dark);
  padding-left: 1.25rem;
}

[data-design="a4"] .leaderboard h3 {
  font-family: "Oswald", sans-serif;
  font-size: .85rem;
  letter-spacing: .1em;
}

[data-design="a4"] #deed-list.deed-grid {
  grid-template-columns: 1fr;
  gap: 2rem;
}

[data-design="a4"] .counter {
  border: 1px solid var(--ilon-dark);
  border-radius: 0;
}

[data-design="a4"] .counter .num {
  font-family: "Oswald", sans-serif;
  color: var(--ilon-dark);
}

@media (max-width: 860px) {
  [data-design="a4"] .deeds-layout { grid-template-columns: 1fr; }
  [data-design="a4"] .leaderboard { border-left: 0; padding-left: 0; border-top: 3px solid var(--ilon-dark); padding-top: 1.25rem; }
}

/* ---------- Arkisto a6: KUNTAREKISTERI ----------
   Kunnan arkistokortisto: monospace, ohuet viivat,
   kuntanumerot näkyvissä, KIRJATTU-leima. */

[data-design="a6"] {
  --bg: var(--ilon-white);
  --text: var(--ilon-dark);
  --muted: var(--ilon-muted);
  --card-bg: var(--ilon-white);
  --border: var(--ilon-dark);
  --border-strong: var(--ilon-dark);
  --primary: var(--ilon-dark);
  --primary-text: var(--ilon-light);
  --accent: var(--ilon-dark);
  --error: #C44A4A;
  --focus: var(--ilon-dark);

  --font-body: "IBM Plex Mono", "Menlo", monospace;
  --font-heading: "Oswald", "Arial Narrow", sans-serif;
  --heading-weight: 600;
  --heading-transform: uppercase;
  --heading-spacing: .02em;

  --radius-btn: 0;
  --radius-card: 0;
  --radius-chip: 0;
  --radius-input: 0;

  --card-border: 1px solid var(--ilon-dark);
  --shadow-card: none;
  --shadow-card-hover: none;
  --shadow-btn: none;

  --chip-bg: transparent;
  --chip-border: 1px solid var(--ilon-dark);
  --chip-active-bg: var(--ilon-dark);
  --chip-active-text: var(--ilon-light);

  --input-bg: #FFFFFF;
  --input-border: 1px solid var(--ilon-dark);

  --header-bg: var(--ilon-white);
  --header-border: 1px solid var(--ilon-dark);
  --footer-bg: var(--ilon-dark);
  --footer-text: var(--ilon-light);

  --hero-bg: transparent;
  --hero-align: left;
  --hero-lead-margin: 0;
  --hero-ctas-justify: flex-start;

  --map-land: var(--ilon-light-pale);
  --map-stroke: var(--ilon-dark);
}

[data-design="a6"] body { font-size: 14.5px; }
[data-design="a6"] h1 { font-size: clamp(1.5rem, 3.5vw, 2.4rem); }
[data-design="a6"] h2 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }
[data-design="a6"] .hero { padding-block: 2.5rem 2rem; border-bottom: 1px solid var(--border); }
[data-design="a6"] .hero .kicker {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--muted);
  border-radius: 0;
  font-weight: 500;
}
[data-design="a6"] .kat-emoji { display: none; }
[data-design="a6"] .tag::before, [data-design="a6"] .filters .chip::before { content: "["; }
[data-design="a6"] .tag::after, [data-design="a6"] .filters .chip::after { content: "]"; }
[data-design="a6"] .tag, [data-design="a6"] .chip { border-color: transparent; background: transparent; padding-inline: .1em; font-weight: 500; }
[data-design="a6"] .chip.active, [data-design="a6"] .chip[aria-pressed="true"] {
  background: transparent; color: var(--primary); font-weight: 700;
}
[data-design="a6"] .btn:hover { transform: none; text-decoration: underline; }
[data-design="a6"] .deed-card:hover { transform: none; background: var(--ilon-light-pale); }
[data-design="a6"] .counters { margin-top: 1.5rem; }
[data-design="a6"] .counter .num { font-size: 1.9rem; color: var(--text); }
[data-design="a6"] .deed-meta { border-top: 1px dashed var(--border-strong); padding-top: .6rem; }

/* Kuntanumero näkyviin, kuten oikeassa rekisterissä */
[data-design="a6"] .meta-kunta::before {
  content: attr(data-nro) " ";
  font-weight: 700;
  color: var(--primary);
}

/* KIRJATTU-leima kortin kulmaan */
[data-design="a6"] .deed-card { position: relative; overflow: hidden; }
[data-design="a6"] .deed-card::after {
  content: "KIRJATTU";
  position: absolute;
  top: 14px;
  right: -8px;
  padding: .1em .8em;
  border: 2px solid rgba(var(--ilon-dark-rgb), .55);
  color: rgba(var(--ilon-dark-rgb), .65);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  transform: rotate(6deg);
}

/* Kortistolista */
[data-design="a6"] #deed-list.deed-grid { grid-template-columns: 1fr; gap: 0; }
[data-design="a6"] #deed-list .deed-card { border-bottom-width: 0; }
[data-design="a6"] #deed-list .deed-card:last-child { border-bottom-width: 1px; }
[data-design="a6"] #deed-list .deed-card:nth-child(even) { background: var(--ilon-light-pale); }

/* ---------- Arkisto a7: JULISTE ----------
   Suomalainen julistetypografia: valtava Anton, musta ja
   keltainen, paksut viivat, epäsymmetrinen kollaasi. */

[data-design="a7"] {
  --bg: var(--ilon-light-pale);
  --text: var(--ilon-dark);
  --muted: var(--ilon-muted);
  --card-bg: var(--ilon-light-pale);
  --border: var(--ilon-dark);
  --border-strong: var(--ilon-dark);
  --primary: var(--ilon-dark);
  --primary-text: var(--ilon-light);
  --accent: var(--ilon-light);
  --error: #C44A4A;
  --focus: var(--ilon-dark);

  --font-body: "Archivo", "Helvetica Neue", sans-serif;
  --font-heading: "Oswald", "Arial Narrow", sans-serif;
  --heading-weight: 600;
  --heading-transform: uppercase;
  --heading-spacing: .02em;

  --radius-btn: 0;
  --radius-card: 0;
  --radius-chip: 0;
  --radius-input: 0;

  --card-border: 2px solid var(--ilon-dark);
  --shadow-card: none;
  --shadow-card-hover: 6px 6px 0 var(--ilon-light);
  --shadow-btn: none;

  --chip-bg: transparent;
  --chip-border: 2px solid var(--ilon-dark);
  --chip-active-bg: var(--ilon-light);
  --chip-active-text: var(--ilon-dark);

  --input-bg: #FFFFFF;
  --input-border: 2px solid var(--ilon-dark);

  --header-bg: var(--ilon-light-pale);
  --header-border: 4px solid var(--ilon-dark);
  --footer-bg: var(--ilon-dark);
  --footer-text: var(--ilon-light);

  --hero-bg: transparent;
  --hero-align: left;
  --hero-lead-margin: 0;
  --hero-ctas-justify: flex-start;

  --map-land: var(--ilon-light-soft);
  --map-stroke: var(--ilon-dark);
}

[data-design="a7"] .kat-emoji { display: none; }
[data-design="a7"] h1 {
  font-size: clamp(3rem, 10.5vw, 8.5rem);
  line-height: .92;
  letter-spacing: 0;
}
/* Kartan vieressä otsikon pitää mahtua puolikkaaseen palstaan */
[data-design="a7"] .hero h1 { font-size: clamp(2.8rem, 8vw, 6.5rem); }
[data-design="a7"] .hero { padding-block: 3rem 2.5rem; border-bottom: 4px solid var(--ilon-dark); }
[data-design="a7"] .hero .kicker {
  background: var(--ilon-light);
  color: var(--ilon-dark);
  border-radius: 0;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
}
[data-design="a7"] .hero p.lead { font-size: 1.15rem; max-width: 52ch; }
[data-design="a7"] .counter .num { font-family: "Oswald", sans-serif; font-size: 3rem; color: var(--ilon-dark); }
[data-design="a7"] .counter { border-width: 2px; }
[data-design="a7"] .counters { margin-top: 1.5rem; }
[data-design="a7"] .vote-btn { border-width: 2px; border-radius: 0; }
[data-design="a7"] .vote-btn:hover:not(:disabled) { background: var(--ilon-dark); color: var(--ilon-light); }
[data-design="a7"] .vote-btn.voted { background: var(--ilon-light); border-color: var(--ilon-dark); color: var(--ilon-dark); }
[data-design="a7"] .section-head h2 { border-bottom: 4px solid var(--ilon-dark); padding-bottom: .15em; }

/* Masonry-kollaasi, joka kolmas kortti keltainen */
[data-design="a7"] #deed-list.deed-grid {
  display: block;
  columns: 3 280px;
  column-gap: 1.2rem;
}
[data-design="a7"] #deed-list .deed-card { margin-bottom: 1.2rem; display: inline-flex; width: 100%; }
[data-design="a7"] #deed-list .deed-card:nth-child(4n) { background: var(--ilon-light); }
[data-design="a7"] #deed-list .deed-card:nth-child(4n) .deed-desc,
[data-design="a7"] #deed-list .deed-card:nth-child(4n) .deed-meta { color: var(--ilon-dark-deep); }

/* ---------- Arkisto a8: PISTE ----------
   Tiivis dashboard: pisteruudukko, tumma header, mono-luvut. */

[data-design="a8"] {
  --bg: #F0F6FA;
  --text: var(--ilon-text);
  --muted: var(--ilon-muted);
  --card-bg: var(--ilon-white);
  --border: #D0E3EE;
  --border-strong: #8FB4CC;
  --primary: var(--ilon-dark);
  --primary-text: var(--ilon-light);
  --accent: var(--ilon-light);
  --error: #C44A4A;
  --focus: var(--ilon-light);

  --font-body: "Archivo", "Helvetica Neue", sans-serif;
  --font-heading: "Oswald", "Arial Narrow", sans-serif;
  --heading-weight: 600;
  --heading-transform: uppercase;
  --heading-spacing: .05em;

  --radius-btn: 4px;
  --radius-card: 4px;
  --radius-chip: 4px;
  --radius-input: 4px;

  --card-border: 1px solid var(--border);
  --shadow-card: none;
  --shadow-card-hover: 0 0 0 2px var(--ilon-dark);
  --shadow-btn: none;

  --chip-bg: var(--ilon-white);
  --chip-border: 1px solid var(--border-strong);
  --chip-active-bg: var(--ilon-dark);
  --chip-active-text: var(--ilon-light);

  --input-bg: var(--ilon-white);
  --input-border: 1px solid var(--border-strong);

  --header-bg: var(--ilon-dark);
  --header-border: 0;
  --footer-bg: var(--ilon-dark-deep);
  --footer-text: var(--ilon-light);

  --hero-bg: transparent;
  --hero-align: left;
  --hero-lead-margin: 0;
  --hero-ctas-justify: flex-start;

  --map-land: var(--ilon-light-soft);
  --map-stroke: #8FB4CC;
}

[data-design="a8"] body {
  background-image: radial-gradient(circle, rgba(var(--ilon-dark-rgb), .14) 1px, transparent 1px);
  background-size: 18px 18px;
}

[data-design="a8"] .site-header {
  color: var(--ilon-light);
}

[data-design="a8"] {
  --logo-color: var(--ilon-light);
}

[data-design="a8"] .site-nav > a:not(.btn) {
  color: var(--ilon-light);
}

[data-design="a8"] .site-nav > a:not(.btn):hover {
  background: transparent;
  color: var(--ilon-light-soft);
}

[data-design="a8"] .btn-primary {
  background: var(--ilon-light);
  color: var(--ilon-dark);
  border-color: var(--ilon-light);
}

[data-design="a8"] .hero .kicker {
  background: var(--ilon-dark);
  color: var(--ilon-light);
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
}

[data-design="a8"] .counters {
  margin-top: -1rem;
}

[data-design="a8"] .counter {
  border-left: 4px solid var(--ilon-dark);
  text-align: left;
  padding: 1rem 1.2rem;
}

[data-design="a8"] .counter .num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 2rem;
  font-weight: 700;
  color: var(--ilon-dark);
}

[data-design="a8"] .counter .lbl {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

[data-design="a8"] .deed-card {
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--ilon-light);
}

[data-design="a8"] .deed-card:hover {
  border-left-color: var(--ilon-dark);
}

[data-design="a8"] .deed-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

[data-design="a8"] .kat-emoji { display: none; }

[data-design="a8"] .tag {
  font-family: "IBM Plex Mono", monospace;
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 2px;
}

[data-design="a8"] #deed-list.deed-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: .75rem;
}

[data-design="a8"] .section-head h2 {
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--ilon-muted);
}

/* ============================================================
   ARKISTO — vanhat prototyypit (a1, a2, a5)
   ============================================================ */

/* ---------- a1: ILMOITUSTAULU ---------- */

[data-design="a1"] {
  --bg: var(--ilon-light-pale);
  --text: var(--ilon-text);
  --muted: var(--ilon-muted);
  --card-bg: var(--ilon-white);
  --border: #C5DDE8;
  --border-strong: #8FB4CC;
  --primary: var(--ilon-dark);
  --primary-text: var(--ilon-light);
  --accent: var(--ilon-light);
  --error: #C44A4A;
  --focus: var(--ilon-dark);
  --font-body: "Archivo", sans-serif;
  --font-heading: "Oswald", sans-serif;
  --heading-weight: 600;
  --heading-transform: uppercase;
  --heading-spacing: .02em;
  --radius-btn: 6px;
  --radius-card: 3px;
  --radius-chip: 4px;
  --radius-input: 6px;
  --card-border: 1px solid var(--border);
  --btn-border: 2px solid transparent;
  --shadow-card: 0 2px 6px rgba(58, 82, 128, .14);
  --shadow-card-hover: 0 4px 10px rgba(58, 82, 128, .18);
  --shadow-btn: 0 3px 0 var(--ilon-dark-deep);
  --chip-bg: var(--ilon-light-soft);
  --chip-border: 1px solid var(--border-strong);
  --chip-active-bg: var(--ilon-dark);
  --chip-active-text: var(--ilon-light);
  --input-bg: var(--ilon-white);
  --input-border: 2px solid var(--border-strong);
  --header-bg: rgba(232, 244, 249, .92);
  --header-border: 1px solid var(--border-strong);
  --footer-bg: var(--ilon-dark);
  --footer-text: var(--ilon-light);
  --hero-bg: transparent;
  --hero-align: left;
  --hero-lead-margin: 0;
  --hero-ctas-justify: flex-start;
  --map-land: var(--ilon-light-soft);
  --map-stroke: #8FB4CC;
}

[data-design="a1"] body {
  background-image:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(71, 99, 156, .08) 25px 26px),
    repeating-linear-gradient(90deg, transparent 0 25px, rgba(71, 99, 156, .08) 25px 26px);
}

[data-design="a1"] .hero .kicker {
  font-family: "Caveat", cursive;
  font-size: 1.35rem;
  background: transparent;
  color: var(--accent);
  padding: 0;
  transform: rotate(-1.2deg);
  border-bottom: 2px solid var(--accent);
  border-radius: 0;
}

[data-design="a1"] .filter-label {
  font-family: "Caveat", cursive;
  font-size: 1.15rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--primary);
}

[data-design="a1"] .deed-card {
  position: relative;
  transform: rotate(-.5deg);
}

[data-design="a1"] .deed-card:nth-child(even) { transform: rotate(.6deg); }

[data-design="a1"] .deed-card:nth-child(5n) {
  background: var(--ilon-light-soft);
  border-color: var(--ilon-light);
}

[data-design="a1"] .deed-card::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 74px;
  height: 20px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(165, 216, 235, .65);
  border-left: 1px dashed rgba(71, 99, 156, .25);
  border-right: 1px dashed rgba(71, 99, 156, .25);
}

[data-design="a1"] .deed-card:hover { transform: rotate(0deg) translateY(-2px); }

/* ---------- a2: TARRA-ARKKI ---------- */

[data-design="a2"] {
  --bg: var(--ilon-dark);
  --logo-color: var(--ilon-light);
  --text: var(--ilon-light);
  --muted: #C5E0EF;
  --card-bg: var(--ilon-white);
  --border: #C5DDE8;
  --border-strong: var(--ilon-light);
  --primary: var(--ilon-light);
  --primary-text: var(--ilon-dark);
  --accent: var(--ilon-light-soft);
  --error: #FFB0B0;
  --focus: var(--ilon-light);
  --font-body: "Archivo", sans-serif;
  --font-heading: "Oswald", sans-serif;
  --heading-weight: 600;
  --heading-transform: uppercase;
  --heading-spacing: .02em;
  --radius-btn: 999px;
  --radius-card: 18px;
  --radius-chip: 999px;
  --radius-input: 10px;
  --card-border: 0 solid transparent;
  --shadow-card: 0 0 0 4px var(--ilon-light), 7px 9px 0 rgba(45, 69, 104, .45);
  --shadow-card-hover: 0 0 0 4px var(--ilon-light), 10px 12px 0 rgba(45, 69, 104, .55);
  --shadow-btn: 0 0 0 3px var(--ilon-light), 4px 5px 0 rgba(45, 69, 104, .45);
  --chip-bg: rgba(165, 216, 235, .18);
  --chip-border: 2px solid rgba(165, 216, 235, .55);
  --chip-active-bg: var(--ilon-light);
  --chip-active-text: var(--ilon-dark);
  --input-bg: #FFFFFF;
  --input-border: 2px solid var(--ilon-light);
  --header-bg: rgba(71, 99, 156, .92);
  --header-border: 3px solid var(--ilon-light);
  --footer-bg: var(--ilon-dark-deep);
  --footer-text: var(--ilon-light);
  --hero-bg: transparent;
  --hero-align: left;
  --hero-lead-margin: 0;
  --hero-ctas-justify: flex-start;
  --map-land: #5A7FB5;
  --map-stroke: var(--ilon-light);
}

[data-design="a2"] .deed-card { color: var(--ilon-text); transform: rotate(-.8deg); }
[data-design="a2"] .deed-card:nth-child(3n) { transform: rotate(.9deg); }
[data-design="a2"] .deed-card:hover { transform: rotate(0deg) translateY(-3px); }
[data-design="a2"] .deed-card h3 { color: var(--ilon-text); }
[data-design="a2"] .deed-card .deed-desc { color: var(--ilon-muted); }
[data-design="a2"] .deed-card .tag { background: var(--ilon-light-pale); color: var(--ilon-dark); }
[data-design="a2"] .deeds-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.5rem;
}
[data-design="a2"] .deeds-aside { display: block; }
[data-design="a2"] #deed-list.deed-grid { grid-template-columns: 1fr; }
[data-design="a2"] .btn-secondary { color: var(--ilon-text); border-color: var(--ilon-light); }

/* ---------- a5: RETKIKARTTA ---------- */

[data-design="a5"] {
  --bg: var(--ilon-light-pale);
  --text: var(--ilon-text);
  --muted: var(--ilon-muted);
  --card-bg: var(--ilon-white);
  --border: #C5DDE8;
  --border-strong: #8FB4CC;
  --primary: var(--ilon-dark);
  --primary-text: var(--ilon-light);
  --accent: var(--ilon-dark-deep);
  --error: #C44A4A;
  --focus: var(--ilon-dark);
  --font-body: "Archivo", sans-serif;
  --font-heading: "Oswald", sans-serif;
  --heading-weight: 600;
  --heading-transform: uppercase;
  --heading-spacing: .02em;
  --radius-btn: 6px;
  --radius-card: 10px;
  --radius-chip: 4px;
  --radius-input: 6px;
  --card-border: 1px solid var(--border-strong);
  --shadow-card: 0 1px 3px rgba(58, 82, 128, .12);
  --shadow-card-hover: 0 4px 12px rgba(58, 82, 128, .18);
  --shadow-btn: none;
  --chip-bg: var(--ilon-white);
  --chip-border: 1px solid var(--border-strong);
  --chip-active-bg: var(--ilon-dark);
  --chip-active-text: var(--ilon-light);
  --input-bg: var(--ilon-white);
  --input-border: 1px solid var(--border-strong);
  --header-bg: rgba(232, 244, 249, .93);
  --header-border: 2px solid var(--ilon-dark);
  --footer-bg: var(--ilon-dark);
  --footer-text: var(--ilon-light);
  --hero-bg: transparent;
  --hero-align: left;
  --hero-lead-margin: 0;
  --hero-ctas-justify: flex-start;
  --map-land: var(--ilon-light-soft);
  --map-stroke: #8FB4CC;
}

[data-design="a5"] body {
  background-image:
    repeating-radial-gradient(circle at 15% -10%, transparent 0 46px, rgba(71, 99, 156, .12) 46px 47px),
    repeating-radial-gradient(circle at 95% 60%, transparent 0 64px, rgba(165, 216, 235, .18) 64px 65px);
}

[data-design="a5"] .kat-emoji { display: none; }

[data-design="a5"] [data-kat]::before {
  font-family: "IBM Plex Mono", monospace;
  margin-right: .35em;
  color: var(--accent);
}

[data-design="a5"] [data-kat="sosiaalinen"]::before { content: "●"; }
[data-design="a5"] [data-kat="ymparisto"]::before { content: "▲"; color: var(--ilon-dark); }
[data-design="a5"] [data-kat="urheilu"]::before { content: "◆"; }
[data-design="a5"] [data-kat="kestava-kehitys"]::before { content: "◒"; color: var(--ilon-dark); }
[data-design="a5"] [data-kat="kulttuuri"]::before { content: "■"; }
[data-design="a5"] [data-kat="muu"]::before { content: "○"; }

[data-design="a5"] .hero .kicker {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 3px;
  font-family: "IBM Plex Mono", monospace;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

[data-design="a5"] .deed-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  text-transform: uppercase;
}

[data-design="a5"] .deed-card { border-left: 4px solid var(--primary); }
[data-design="a5"] #deed-list.deed-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.4rem; }

[data-design="a5"] .section-head h2 { position: relative; padding-bottom: .35em; }
[data-design="a5"] .section-head h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 90px;
  border-bottom: 2px dashed var(--accent);
}