/*
 * Santa Claus Reindeer + Taava Reindeer Farm — tyylijärjestelmä
 *
 * Mitat, välit, fonttikoot ja värit on mitattu esikatselusivustosta
 * (santaclausreindeer-preview.resahost.net, 7.10.2026) leveyksillä 1440 ja 390 px.
 *
 * Kerrokset (myöhempi voittaa aiemman, tarkkuudesta riippumatta):
 *   scr.tokens      muuttujat: raaka-arvot → teemat → sävyt
 *   scr.base        elementtien oletukset
 *   scr.layout      l-*   asettelu ilman ulkoasua
 *   scr.components  c-*   komponentit
 *   scr.motion            liike: sisääntulot, hover, kiinteä header
 *   scr.utilities   u-*   yhden asian apuluokat
 *
 * Nimeäminen:
 *   .c-card                 lohko
 *   .c-card__title          lohkon osa
 *   .c-card--experience     variantti
 *   [data-theme="taava"]    teema (brändi), periytyy sisältöön
 *   [data-tone="brand"]     sävy (tausta + tekstiväri), periytyy sisältöön
 *   .u-tone-*, .u-theme-*   samat luokkina, koska Bricks-komponentin valinta voi asettaa vain luokan
 *   [aria-*], :disabled     tila; tilalle ei ole omia luokkia
 *
 * Mitat kirjoitetaan suunnittelupikseleinä kertoimella --u, joka on rem-pohjainen.
 * Arvot seuraavat käyttäjän fonttikokoa, ja vanhan Bricks-sisällön 10 px:n rem
 * hoidetaan yhdellä rivillä tiedostossa scr-legacy.css.
 */

@layer scr.tokens, scr.base, scr.layout, scr.components, scr.motion, scr.utilities;

/* ═════════════════════════════ Fontit ═════════════════════════════ */

@font-face { font-family: "Saira Condensed"; font-weight: 500; font-display: swap; src: url("fonts/SairaCondensed-500.woff2") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-weight: 700; font-display: swap; src: url("fonts/SairaCondensed-700.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 400; font-display: swap; src: url("fonts/Raleway-400.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 600; font-display: swap; src: url("fonts/Raleway-600.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 700; font-display: swap; src: url("fonts/Raleway-700.woff2") format("woff2"); }
@font-face { font-family: "Fahkwang"; font-weight: 400; font-display: swap; src: url("fonts/Fahkwang-400.woff2") format("woff2"); }
@font-face { font-family: "Fahkwang"; font-weight: 500; font-display: swap; src: url("fonts/Fahkwang-500.woff2") format("woff2"); }
@font-face { font-family: "Fahkwang"; font-weight: 600; font-display: swap; src: url("fonts/Fahkwang-600.woff2") format("woff2"); }

/* ═════════════════════════════ Tokenit ═════════════════════════════ */

@layer scr.tokens {
  :root {
    --u: 0.0625rem; /* 1 suunnittelupikseli, kun 1rem = 16px */

    /* 1. Raaka-arvot. Ainoa paikka, jossa värikoodeja on. */
    --color-red-600: oklch(47.6% 0.183 27.9);   /* #ac1515 */
    --color-red-700: oklch(43.2% 0.164 27.4);   /* #961314 */
    --color-red-900: oklch(33.5% 0.135 25);     /* #6f0308, painikkeen hover */
    --color-gold-200: oklch(89.7% 0.037 67.3);  /* #eed9c4 */
    --color-gold-400: oklch(83.6% 0.059 69.4);  /* #e3c3a0 */
    --color-gold-500: oklch(76.9% 0.084 67.8);  /* #d8aa79 */
    --color-brown-500: oklch(55% 0.068 68);     /* #8c6a45 */
    --color-brown-600: oklch(50.1% 0.061 67.5); /* #7b5d3d */
    --color-brown-900: oklch(31.4% 0.03 38.3);  /* #3f2c26 */
    --color-rust-700: oklch(39.6% 0.095 48.4);  /* #6e3410, Taavan tunniste */
    --color-plum-900: oklch(32.8% 0.019 18.2);  /* #3e3131 */
    --color-beige-50: oklch(98.4% 0.017 84.6);  /* #fff9ed */
    --color-beige-100: oklch(96.4% 0.039 86.1); /* #fff2d6 */
    --color-beige-300: oklch(89.6% 0.045 79.3); /* #eddabc */
    --color-grey-300: oklch(88.5% 0 0);         /* #d9d9d9 */
    --color-grey-400: oklch(84.5% 0 0);         /* #cccccc */
    --color-grey-500: oklch(73.8% 0 0);         /* #aaaaaa */
    --color-grey-700: oklch(38.7% 0 0);         /* #444444 */
    --color-grey-800: oklch(37.1% 0 0);         /* #404040 */
    --color-white: oklch(100% 0 0);
    --color-black: oklch(0% 0 0);

    /* 2. Välit. Liukuvat 320 → 1312 px näkymän leveyden mukaan. */
    --space-3xs: calc(var(--u) * 4);
    --space-2xs: calc(var(--u) * 8);
    --space-xs: calc(var(--u) * 13.5);
    --space-s: clamp(calc(var(--u) * 18), calc(var(--u) * 17.36 + 0.202vi), calc(var(--u) * 20));
    --space-m: clamp(calc(var(--u) * 24), calc(var(--u) * 22.06 + 0.605vi), calc(var(--u) * 30));
    --space-l: clamp(calc(var(--u) * 32), calc(var(--u) * 27.81 + 1.31vi), calc(var(--u) * 45));
    --space-xl: clamp(calc(var(--u) * 42.6), calc(var(--u) * 34.57 + 2.51vi), calc(var(--u) * 67.5));
    --space-2xl: clamp(calc(var(--u) * 56.8), calc(var(--u) * 42.46 + 4.481vi), calc(var(--u) * 101));
    --space-section: clamp(calc(var(--u) * 48), calc(var(--u) * 34.45 + 4.234vi), calc(var(--u) * 90));
    --space-gutter: clamp(calc(var(--u) * 15), calc(var(--u) * 0.48 + 4.536vi), calc(var(--u) * 60));
    --space-block: calc(var(--u) * 40);  /* osion sisäinen pystyväli */
    --space-flow: calc(var(--u) * 24);   /* otsikon, tekstin ja painikkeen väli */

    /* 3. Typografia */
    --text-xs: calc(var(--u) * 12);
    --text-s: calc(var(--u) * 14);
    --text-m: clamp(calc(var(--u) * 14), calc(var(--u) * 13.35 + 0.202vi), calc(var(--u) * 16));
    --text-l: calc(var(--u) * 18);
    --text-xl: clamp(calc(var(--u) * 20), calc(var(--u) * 18.71 + 0.403vi), calc(var(--u) * 24));
    --text-2xl: clamp(calc(var(--u) * 24), calc(var(--u) * 21.42 + 0.806vi), calc(var(--u) * 32));
    --text-display: clamp(calc(var(--u) * 28), calc(var(--u) * 26.77 + 1.008vi), calc(var(--u) * 40));
    --text-hero: clamp(calc(var(--u) * 34), calc(var(--u) * 26.9 + 2.218vi), calc(var(--u) * 56));
    --text-hero-l: clamp(calc(var(--u) * 44), calc(var(--u) * 33 + 2.823vi), calc(var(--u) * 72));
    --text-hero-xl: clamp(calc(var(--u) * 42), calc(var(--u) * 29.74 + 3.831vi), calc(var(--u) * 80));
    --leading-tight: 1.1;
    --leading-snug: 1.2;
    --leading-normal: 1.5;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* 4. Muodot, mitat, liike */
    --radius-s: calc(var(--u) * 8);
    --radius-m: calc(var(--u) * 16);
    --radius-l: calc(var(--u) * 24);
    --radius-xl: calc(var(--u) * 32);
    --radius-pill: 100vmax;
    --width-content: calc(var(--u) * 1312);
    --width-text: calc(var(--u) * 760);
    --shadow-m:
      0 4px 4px -10px oklch(0% 0 0 / 0.04),
      0 13px 13px -10px oklch(0% 0 0 / 0.06),
      0 40px 60px -10px oklch(0% 0 0 / 0.08);
    /* Liike. Kaikki kestot kerrotaan --motion-scale-arvolla; teema voi hidastaa. */
    --motion-scale: 1;
    --duration-fast: calc(150ms * var(--motion-scale));
    --duration: calc(220ms * var(--motion-scale));
    --duration-slow: calc(450ms * var(--motion-scale));
    --duration-scene: calc(1200ms * var(--motion-scale));
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --reveal-distance: calc(var(--u) * 14);
    --target-min: calc(var(--u) * 44);
  }

  /*
   * 5. Teemat. Teema päättää brändin: värit, fontit, painikkeen ja footerin.
   *    Uusi teema = tämän lohkon kopio; komponentteihin ei kosketa.
   */
  :root,
  :is([data-theme="scr"], .u-theme-scr) {
    --theme-brand: var(--color-red-700);
    --theme-brand-hover: var(--color-red-600);
    --theme-brand-surface: var(--color-red-700);     /* korostuslohkon ja uutiskirjeen tausta */
    --theme-page: var(--color-beige-50);
    --theme-surface: var(--color-beige-100);
    --theme-ink: var(--color-black);
    --theme-footer: var(--color-plum-900);
    --theme-footer-ink: var(--color-beige-100);

    --font-heading: "Saira Condensed", "Arial Narrow", sans-serif;
    --font-body: "Raleway", system-ui, sans-serif;
    --heading-weight: var(--weight-bold);
    --heading-transform: uppercase;
    --heading-scale: 1;
    --eyebrow-weight: var(--weight-bold);
    --eyebrow-rule: oklch(88.5% 0 0 / 0.2);

    --theme-action: var(--theme-brand);
    --theme-action-hover: var(--color-red-900);
    --theme-action-ink: var(--color-white);
    --action-font: var(--font-heading);
    --action-weight: var(--weight-bold);
    --action-transform: uppercase;

    /*
     * Toissijainen painike: punainen ääriviiva vaalealla pinnalla, hoverissa
     * tummanpunainen täyttö. Kuvan päällä beige täyttö ja punainen teksti.
     */
    --theme-alt-bg: transparent;
    --theme-alt-ink: var(--theme-brand);
    --theme-alt-border: var(--theme-brand);
    --theme-alt-bg-hover: var(--color-red-900);
    --theme-alt-ink-hover: var(--color-white);
    --theme-alt-bg-inverse: var(--color-beige-100);
    --theme-alt-ink-inverse: var(--theme-brand);
    --theme-alt-border-inverse: var(--color-beige-100);
    --theme-alt-bg-hover-inverse: var(--color-beige-300);
    --theme-alt-ink-hover-inverse: var(--theme-brand);
    --action-alt-border-width: 1px;

    --tag-bg: var(--theme-brand);
    --tag-ink: var(--color-white);
    --tag-font: "Saira Condensed", "Arial Narrow", sans-serif;
    --tag-weight: var(--weight-bold);
    --tag-transform: uppercase;
  }

  :is([data-theme="taava"], .u-theme-taava) {
    --theme-brand: var(--color-brown-600);
    --theme-brand-hover: var(--color-brown-500);
    --theme-brand-surface: var(--color-brown-900);
    --theme-page: var(--color-beige-50);
    --theme-surface: var(--color-beige-100);
    --theme-ink: var(--color-black);
    --theme-footer: var(--color-beige-300);
    --theme-footer-ink: var(--color-black);

    --font-heading: "Fahkwang", Georgia, serif;
    --heading-weight: var(--weight-medium);
    --heading-transform: none;
    --heading-scale: 1.2; /* Fahkwang on ladottu sivustolla 48 px, kun Saira on 40 px */
    --motion-scale: 1.25; /* Taavassa sama liike on rauhallisempi */
    --eyebrow-weight: var(--weight-semibold);
    --eyebrow-rule: var(--color-grey-500);

    --theme-action: linear-gradient(90deg, var(--color-brown-500), var(--color-gold-500));
    --theme-action-hover: linear-gradient(90deg, var(--color-brown-600), var(--color-gold-500));
    --theme-action-ink: var(--color-beige-50);
    --action-weight: var(--weight-medium);
    --action-transform: none;

    /* Toissijainen painike: pelkkä ohut ääriviiva, vaalea tummalla ja ruskea vaalealla pinnalla */
    --theme-alt-bg: transparent;
    --theme-alt-ink: var(--color-brown-900);
    --theme-alt-border: var(--color-brown-900);
    --theme-alt-bg-hover: var(--color-brown-900);
    --theme-alt-ink-hover: var(--color-beige-100);
    --theme-alt-bg-inverse: transparent;
    --theme-alt-ink-inverse: var(--color-beige-100);
    --theme-alt-border-inverse: var(--color-beige-100);
    --theme-alt-bg-hover-inverse: var(--color-beige-100);
    --theme-alt-ink-hover-inverse: var(--color-brown-900);
    --action-alt-border-width: 1px;

    --tag-bg: var(--color-rust-700);
    --tag-ink: var(--color-beige-100);
    --tag-font: var(--font-heading);
    --tag-weight: var(--weight-medium);
    --tag-transform: none;
  }

  /*
   * 6. Sävyt. Sävy päättää taustan ja kääntää tekstin, reunat ja painikkeen
   *    sen mukaan. Komponentit lukevat vain --color-*- ja --action-*-muuttujia.
   */
  :root,
  :is([data-theme], :where([class*="u-theme-"]:not(.u-theme-inherit))),
  :is([data-tone="page"], .u-tone-page),
  :is([data-tone="surface"], .u-tone-surface),
  /* Valkoinen kortti on oma vaalea pintansa myös värillisen osion sisällä */
  .c-card--experience {
    --color-bg: var(--theme-page);
    --color-text: var(--theme-ink);
    --color-text-muted: var(--color-grey-800);
    --color-heading: var(--theme-ink);
    --color-link: var(--theme-brand);
    --color-border: oklch(0% 0 0 / 0.1);
    --color-card: var(--color-white);
    --color-focus: var(--theme-brand);
    --action-bg: var(--theme-action);
    --action-bg-hover: var(--theme-action-hover);
    --action-text: var(--theme-action-ink);
    --action-alt-bg: var(--theme-alt-bg);
    --action-alt-text: var(--theme-alt-ink);
    --action-alt-border: var(--theme-alt-border);
    --action-alt-bg-hover: var(--theme-alt-bg-hover);
    --action-alt-text-hover: var(--theme-alt-ink-hover);
  }

  :is([data-tone="surface"], .u-tone-surface) {
    --color-bg: var(--theme-surface);
  }

  /* Brändipinta: punainen (SCR) tai tummanruskea (Taava), beige teksti */
  :is([data-tone="brand"], .u-tone-brand),
  :is([data-tone="earth"], .u-tone-earth) {
    --color-bg: var(--theme-brand-surface);
    --color-text: var(--color-beige-100);
    --color-text-muted: var(--color-beige-100);
    --color-heading: var(--color-beige-100);
    --color-link: var(--color-beige-100);
    --color-border: color-mix(in oklch, var(--color-beige-100) 30%, transparent);
    --color-focus: var(--color-beige-100);
    --eyebrow-rule: color-mix(in oklch, var(--color-beige-100) 30%, transparent);
    --action-bg: var(--color-beige-100);
    --action-bg-hover: var(--color-beige-300);
    --action-text: var(--theme-brand);
    --action-alt-bg: transparent;
    --action-alt-text: var(--color-beige-100);
    --action-alt-border: var(--color-beige-100);
    --action-alt-bg-hover: var(--color-beige-300);
    --action-alt-text-hover: var(--theme-brand);
  }

  /* Maanruskea pinta: faktalohko */
  :is([data-tone="earth"], .u-tone-earth) {
    --color-bg: var(--color-brown-600);
  }

  /* Kuvan tai tumman pinnan päällä: valkoinen teksti, painikkeet ennallaan */
  :is([data-tone="inverse"], .u-tone-inverse) {
    --color-bg: var(--color-brown-900);
    --color-text: var(--color-white);
    --color-text-muted: oklch(100% 0 0 / 0.8);
    --color-heading: var(--color-white);
    --color-link: var(--color-white);
    --color-border: oklch(100% 0 0 / 0.24);
    --color-focus: var(--color-white);
    --action-alt-bg: var(--theme-alt-bg-inverse);
    --action-alt-text: var(--theme-alt-ink-inverse);
    --action-alt-border: var(--theme-alt-border-inverse);
    --action-alt-bg-hover: var(--theme-alt-bg-hover-inverse);
    --action-alt-text-hover: var(--theme-alt-ink-hover-inverse);
  }

  /* Footer: tumma (SCR) tai vaalea (Taava), teema päättää */
  :is([data-tone="footer"], .u-tone-footer) {
    --color-bg: var(--theme-footer);
    --color-text: var(--theme-footer-ink);
    --color-text-muted: var(--theme-footer-ink);
    --color-heading: var(--theme-footer-ink);
    --color-link: var(--theme-footer-ink);
    --color-border: color-mix(in oklch, var(--theme-footer-ink) 20%, transparent);
    --color-focus: var(--theme-footer-ink);
  }
}

/* ═════════════════════════════ Perusta ═════════════════════════════ */

@layer scr.base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--u) * 120);
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }

  body {
    min-block-size: 100svh;
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-m);
    line-height: var(--leading-normal);
    overflow-x: clip;
  }

  /* Teema- tai sävyalue maalaa oman taustansa ja tekstinsä */
  :is([data-theme], :where([class*="u-theme-"]:not(.u-theme-inherit))),
  :is([data-tone], :where([class*="u-tone-"]:not(.u-tone-inherit))) {
    background-color: var(--color-bg);
    color: var(--color-text);
  }

  /*
   * Elementtien oletukset koskevat vain tyylijärjestelmällä rakennettuja alueita.
   * Vanha Bricks-sisältö ja lisäosien oma merkkaus (lomakkeet, varauskalenteri)
   * jäävät koskematta, joten uusia komponentteja voi ottaa käyttöön sivu kerrallaan.
   */
  :where(.l-section, .l-container, .c-hero, .c-feature, .c-header, .c-footer) {
    & :where(h1, h2, h3, h4, h5, h6) {
      margin-block: 0;
      color: var(--color-heading);
      font-family: var(--font-heading);
      font-weight: var(--heading-weight);
      line-height: var(--leading-tight);
      text-transform: var(--heading-transform);
    }

    & :where(h1) { font-size: var(--text-hero); }
    & :where(h2) { font-size: calc(var(--text-display) * var(--heading-scale)); }
    & :where(h3) { font-size: var(--text-xl); }
    & :where(h4, h5, h6) { font-size: var(--text-l); }

    & :where(p, ul, ol, blockquote) {
      margin-block: 0;
    }

    & :where(figure) {
      margin: 0;
    }

    & :where(a) {
      color: var(--color-link);
      text-decoration-thickness: 1px;
      text-underline-offset: 0.18em;
    }

    & :where(img, picture, video, svg) {
      display: block;
      max-inline-size: 100%;
      block-size: auto;
    }

    & :where(button, input, select, textarea) {
      font: inherit;
      color: inherit;
    }
  }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }
}

/* ═════════════════════════════ Asettelu ═════════════════════════════ */

@layer scr.layout {
  /* Osio: pystyväli ja reunukset. Tausta tulee data-tone-attribuutista. */
  .l-section {
    padding-block: var(--space-section);
    padding-inline: var(--space-gutter);

    &.l-section--tight { padding-block: var(--space-xl); }
    &.l-section--no-end { padding-block-end: 0; }
    &.l-section--bleed { padding-inline: 0; }
  }

  /* Sisältöleveys. Toimii myös kyselysäiliönä lapsilleen. */
  .l-container {
    container-type: inline-size;
    inline-size: 100%;
    max-inline-size: var(--width-content);
    margin-inline: auto;

    &.l-container--narrow { max-inline-size: calc(var(--u) * 900); }
  }

  /* Pino: tasainen pystyväli lasten välillä */
  .l-stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-block));

    &.l-stack--s { --stack-gap: var(--space-flow); }
    &.l-stack--l { --stack-gap: var(--space-l); }
  }

  /* Rivi, joka rivittyy: painikkeet, tunnisteet, metatiedot */
  .l-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, calc(var(--u) * 16));
  }

  /*
   * Ruudukko. --cols on sarakkeiden enimmäismäärä; sarakkeita vähennetään
   * itsestään, kun yksi sarake jäisi --grid-min-arvoa kapeammaksi.
   */
  .l-grid {
    --cols: 3;
    --grid-gap: var(--space-s);
    --grid-min: calc(var(--u) * 260);

    display: grid;
    grid-template-columns: repeat(
      auto-fill,
      minmax(max(var(--grid-min), (100% - (var(--cols) - 1) * var(--grid-gap)) / var(--cols)), 1fr)
    );
    gap: var(--grid-gap);
    margin: 0;
    padding: 0;
    list-style: none;

    &.l-grid--2 { --cols: 2; --grid-min: calc(var(--u) * 320); --grid-gap: clamp(calc(var(--u) * 40), 3.6vi, calc(var(--u) * 48)); }
    &.l-grid--3 { --cols: 3; }
    &.l-grid--4 { --cols: 4; --grid-min: calc(var(--u) * 240); }

    /* Mobiilissa artikkelikortit ovat sivustolla väljästi allekkain */
    &.l-grid--loose {
      @container (inline-size < 560px) {
        row-gap: calc(var(--u) * 80);
      }
    }
  }

  /* Kaksi palstaa, jotka pinoutuvat, kun säiliö on kapea */
  .l-split {
    --split: 1fr 1fr;
    --split-gap: var(--space-m);

    display: grid;
    gap: var(--split-gap);
    align-items: center;

    & > * {
      container-type: inline-size;
      min-inline-size: 0;
    }

    /* Kapeassa kuva tulee ensin, kuten sivustolla */
    & > .l-split__media { order: -1; }

    @container (inline-size > 760px) {
      grid-template-columns: var(--split);

      & > .l-split__media { order: 0; }
      &.l-split--reverse > .l-split__media,
      & > .l-split__media--first { order: -1; }
    }

    &.l-split--1-2 { --split: 1fr 2fr; }
    &.l-split--2-1 { --split: 2fr 1fr; }

    /* Suhde tarkoittaa tekstin ja kuvan suhdetta: kun kuva on ensin, palstat vaihtavat paikkaa */
    &.l-split--1-2:has(> .l-split__media--first) { --split: 2fr 1fr; }
    &.l-split--2-1:has(> .l-split__media--first) { --split: 1fr 2fr; }
    &.l-split--wide-gap { --split-gap: var(--space-2xl); }
    &.l-split--stretch { align-items: stretch; }
  }

  /*
   * Vaakavieritettävä rivi. --per-view kertoo, montako kohdetta mahtuu
   * leveään säiliöön; kapeassa kohde ei kutistu --item-min-arvon alle.
   * Rivi jatkuu oikean reunan yli, kuten sivustolla.
   */
  .l-carousel {
    --per-view: 3;
    --carousel-gap: calc(var(--u) * 24);
    --item-min: calc(var(--u) * 300);

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max(
      min(100cqi, var(--item-min)),
      (100cqi - (var(--per-view) - 1) * var(--carousel-gap)) / var(--per-view)
    );
    gap: var(--carousel-gap);
    margin: 0;
    /* Oikea reuna ulottuu ikkunan reunaan asti, myös sisältöleveyttä leveämmällä näytöllä */
    margin-inline-end: min(calc(var(--space-gutter) * -1), calc(50cqi - 50vw));
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    list-style: none;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;

    & > * {
      scroll-snap-align: start;
    }

    &.l-carousel--4 {
      --per-view: 4;
      --carousel-gap: calc(var(--u) * 17.5);
      --item-min: calc(var(--u) * 230);
    }
  }
}

/* ═════════════════════════════ Komponentit ═════════════════════════════ */

@layer scr.components {
  /* ── Painike ── */
  .c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 10);
    padding: calc(var(--u) * 12) calc(var(--u) * 24);
    border: 0 solid transparent;
    border-radius: var(--radius-pill);
    background: var(--action-bg);
    color: var(--action-text);
    font-family: var(--action-font);
    font-size: calc(var(--u) * 16);
    font-weight: var(--action-weight);
    line-height: var(--leading-normal);
    text-align: center;
    text-decoration: none;
    text-transform: var(--action-transform);
    cursor: pointer;
    transition: background-color var(--duration) var(--ease), filter var(--duration) var(--ease);

    @media (hover: hover) {
      &:hover { background: var(--action-bg-hover); }
    }

    /* Toissijainen: ääriviiva, hoverissa täyttyy */
    &.c-btn--secondary {
      border-width: var(--action-alt-border-width);
      border-color: var(--action-alt-border);
      background: var(--action-alt-bg);
      color: var(--action-alt-text);

      @media (hover: hover) {
        &:hover {
          border-color: var(--action-alt-bg-hover);
          background: var(--action-alt-bg-hover);
          color: var(--action-alt-text-hover);
        }
      }
    }

    /* Vaalea täyttö tummalle tai värilliselle pinnalle, kun sävy ei sitä itse valitse */
    &.c-btn--light {
      background: var(--color-beige-100);
      color: var(--theme-brand);

      @media (hover: hover) {
        &:hover { background: var(--color-beige-300); }
      }
    }

    /* Vaalea ääriviiva tummalle tai värilliselle pinnalle */
    &.c-btn--light-outline {
      border-width: var(--action-alt-border-width);
      border-color: var(--color-beige-100);
      background: transparent;
      color: var(--color-beige-100);

      @media (hover: hover) {
        &:hover {
          border-color: var(--color-beige-300);
          background: var(--color-beige-300);
          color: var(--theme-brand);
        }
      }
    }

    &.c-btn--block { inline-size: 100%; }

    &[aria-disabled="true"],
    &:disabled {
      opacity: 0.5;
      pointer-events: none;
    }
  }

  /* Painikerivi: vierekkäin, kapeassa täysleveinä allekkain */
  .c-actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--u) * 16);

    &.c-actions--stack {
      @container (inline-size < 480px) {
        flex-direction: column;
        align-items: stretch;
        inline-size: 100%;
      }
    }
  }

  /* ── Tekstilinkki nuolella ── */
  .c-link {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 5);
    color: var(--color-link);
    font-size: calc(var(--u) * 16);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    text-decoration: none;

    &::after {
      content: "";
      inline-size: calc(var(--u) * 16);
      aspect-ratio: 1;
      background: currentColor;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.3 3.3 14 8l-4.7 4.7-.9-.9L11.5 8.7H2V7.3h9.5L8.4 4.2z'/%3E%3C/svg%3E") center / contain no-repeat;
      transition: translate var(--duration) var(--ease);
    }

    @media (hover: hover) {
      &:hover::after { translate: calc(var(--u) * 3) 0; }
    }
  }

  /* ── Tunniste: sijainti ── */
  .c-tag {
    display: inline-flex;
    align-items: center;
    padding: calc(var(--u) * 8) calc(var(--u) * 18);
    border-radius: var(--radius-pill);
    background: var(--tag-bg);
    color: var(--tag-ink);
    font-family: var(--tag-font);
    font-size: var(--text-s);
    font-weight: var(--tag-weight);
    line-height: var(--leading-normal);
    text-transform: var(--tag-transform);
    white-space: nowrap;
  }

  /* Taavan elämyksen merkki on aina Taavan omalla värillä, myös Santa Claus Reindeerin sivuilla.
     Sijainnin nimi on merkin attribuutissa; nimessä on "Taava" kaikilla kielillä. */
  .c-tag[data-location*="Taava"] {
    background: linear-gradient(90deg, var(--color-brown-500), var(--color-gold-500));
    color: var(--color-beige-50);
  }

  /*
   * ── Arvosanamerkki ──
   * Lähde (Google, Tripadvisor, …) tulee sisällöstä: logo on kuva tai SVG,
   * arvosana asetetaan muuttujalla --rating (0–5). Lähdekohtainen väri ja
   * merkin muoto vaihtuvat data-source-attribuutilla.
   */
  .c-rating {
    --rating: 5;
    --rating-color: oklch(81% 0.16 83);
    --rating-empty: oklch(0% 0 0 / 0.15);
    --rating-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m10 1.6 2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z'/%3E%3C/svg%3E");

    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 16);
    padding: calc(var(--u) * 14) calc(var(--u) * 24);
    border-radius: var(--radius-m);
    background: color-mix(in oklch, var(--color-text) 7%, var(--color-bg));
    color: var(--color-text);
    text-decoration: none;

    & .c-rating__logo {
      display: grid;
      flex: none;
      place-items: center;
      inline-size: calc(var(--u) * 40);
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--color-white);

      & :where(img, svg) { inline-size: 60%; }
    }

    & .c-rating__body {
      display: grid;
      gap: calc(var(--u) * 2);
    }

    & .c-rating__score {
      display: flex;
      align-items: center;
      gap: calc(var(--u) * 8);
      font-family: "Saira Condensed", "Arial Narrow", sans-serif;
      font-size: calc(var(--u) * 20);
      font-weight: var(--weight-bold);
      line-height: 1;
    }

    /* Viisi merkkiä, joista täyttyy --rating / 5 */
    & .c-rating__marks {
      inline-size: calc(var(--u) * 90);
      aspect-ratio: 5 / 1;
      background: linear-gradient(90deg, var(--rating-color) calc(var(--rating) / 5 * 100%), var(--rating-empty) 0);
      mask: var(--rating-shape) left center / 20% 100% repeat-x;
    }

    & .c-rating__count {
      color: var(--color-text-muted);
      font-size: var(--text-xs);

      & strong { color: var(--color-text); font-weight: var(--weight-bold); }
    }

    &[data-source="tripadvisor"] {
      --rating-color: oklch(65% 0.17 160);
      --rating-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3C/svg%3E");
    }

    &.c-rating--plain {
      padding: 0;
      background: none;
    }
  }

  /*
   * ── Osion johdanto ──
   * Tunniste, otsikko, teksti ja toiminnot kiinteässä järjestyksessä.
   */
  .c-intro {
    display: grid;
    gap: var(--space-flow);
    justify-items: start;

    & .c-intro__eyebrow {
      inline-size: min(100%, calc(var(--u) * 250));
      padding-block-end: calc(var(--u) * 4);
      border-block-end: 1px solid var(--eyebrow-rule);
      color: var(--color-heading);
      font-family: var(--font-heading);
      font-size: calc(var(--u) * 16);
      font-weight: var(--eyebrow-weight);
      line-height: var(--leading-normal);
      text-transform: var(--heading-transform);
    }

    & .c-intro__text {
      max-inline-size: var(--width-text);

      /* Tyhjäksi jätetty teksti ei vie riviä eikä väliä */
      &:not(:has(> *)) { display: none; }

      & > * + * { margin-block-start: 1em; }
      & a { border-block-end: 1px solid color-mix(in oklch, currentColor 50%, transparent); text-decoration: none; }
    }

    & .c-intro__actions {
      margin-block-start: calc(var(--u) * 16);
    }

    &.c-intro--center {
      justify-items: center;
      text-align: center;
    }

    /* Otsikko vasemmalla, linkki oikealla, teksti alla. Yläotsikko omalla rivillään. */
    &.c-intro--row {
      grid-template-columns: 1fr auto;
      align-items: center;
      column-gap: var(--space-m);
      row-gap: 0;
      padding-block-start: calc(var(--u) * 7);

      & .c-intro__eyebrow {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-block-end: var(--space-flow);
      }

      & .c-intro__title { grid-column: 1; grid-row: 2; }
      & .c-link { grid-column: 2; grid-row: 2; }

      /* Hiusviiva otsikkorivin alla koko leveydeltä */
      &::after {
        content: "";
        grid-column: 1 / -1;
        grid-row: 3;
        block-size: 1px;
        margin-block-start: calc(var(--u) * 7);
        background: oklch(0% 0 0 / 0.2);
      }

      & .c-intro__text {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-block-start: var(--space-block);
      }

      & .c-intro__actions {
        grid-column: 1 / -1;
        grid-row: 5;
      }

      @container (inline-size < 640px) {
        grid-template-columns: 1fr;

        & .c-link { grid-column: 1; grid-row: 3; margin-block-start: calc(var(--u) * 16); }
        &::after { grid-row: 4; }
        & .c-intro__text { grid-row: 5; }
        & .c-intro__actions { grid-row: 6; }
      }
    }

    /* Pienempi otsikko kapeassa palstassa (Taavan kuva + teksti) */
    &.c-intro--compact .c-intro__title {
      font-size: var(--text-display);
    }

    /* Leveässä säiliössä kaksi palstaa, kapeassa pino */
    @container (inline-size > 860px) {
      &.c-intro--split {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr;
        column-gap: calc(var(--u) * 80);
        align-items: start;

        & .c-intro__eyebrow,
        & .c-intro__title { grid-column: 1; }

        & .c-intro__text {
          grid-column: 2;
          grid-row: 1 / span 2;
          max-inline-size: none;
        }
      }
    }

    @container (inline-size <= 860px) {
      &.c-intro--split .c-intro__text { margin-block-start: calc(var(--u) * 16); }
    }
  }

  /* ── Kokoelma: johdanto + korttirivi + nuolet ── */
  .c-collection {
    display: grid;
    gap: var(--space-block);

    & .c-collection__body {
      display: grid;
      gap: calc(var(--u) * 24);
      min-inline-size: 0;
    }

    & .c-collection__controls {
      display: flex;
      justify-content: flex-end;
      gap: calc(var(--u) * 5);
    }

    & .c-collection__control {
      display: grid;
      place-items: center;
      inline-size: calc(var(--u) * 45);
      aspect-ratio: 1;
      padding: 0;
      border: 1px solid var(--color-text);
      border-radius: 50%;
      background: transparent;
      cursor: pointer;

      &:disabled { opacity: 0.25; cursor: default; }
    }
  }

  /*
   * ── Karuselli ──
   * Lista (ul > li), jota vieritetään vaakaan. Nuolet ovat lisä: ne ovat piilossa,
   * kunnes skripti toteaa, että vieritettävää on.
   */
  .c-carousel {
    display: grid;
    gap: calc(var(--u) * 24);
    min-inline-size: 0;

    & .c-carousel__item {
      display: grid;
      min-inline-size: 0;
    }

    /* Näppäimistöllä kohdistettu kortti ei saa jäädä reunan alle */
    & .c-carousel__track {
      scroll-padding-inline: calc(var(--u) * 4);
    }

    & .c-carousel__controls {
      display: flex;
      justify-content: flex-end;
      gap: calc(var(--u) * 5);

      &[hidden] { display: none; }
    }

    & .c-carousel__control {
      display: grid;
      place-items: center;
      inline-size: calc(var(--u) * 45);
      aspect-ratio: 1;
      padding: 0;
      border: 1px solid var(--color-text);
      border-radius: 50%;
      background: transparent;
      color: var(--color-text);
      cursor: pointer;
      transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease), opacity var(--duration) var(--ease);

      @media (hover: hover) {
        &:not([aria-disabled="true"]):hover {
          background: var(--color-text);
          color: var(--color-bg);
        }
      }

      &:focus-visible {
        outline: 2px solid var(--color-text);
        outline-offset: 3px;
      }

      /* aria-disabled, ei disabled: kohdistus pysyy nuolessa, kun rivi loppuu */
      &[aria-disabled="true"] {
        opacity: 0.25;
        cursor: default;
      }
    }
  }

  /*
   * ── Kortti ──
   * Korttityyppi on variantti. Kortti ei tiedä sisarustensa määrää;
   * ruudukko tai karuselli päättää leveyden.
   */
  .c-card {
    position: relative;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
    color: var(--color-text);

    & .c-card__media {
      position: relative;
      overflow: clip;

      & img {
        inline-size: 100%;
        block-size: 100%;
        aspect-ratio: var(--card-ratio, 16 / 9);
        object-fit: cover;
      }
    }

    & .c-card__body {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: flex-start;
      gap: calc(var(--u) * 16);
    }

    & .c-card__title {
      font-size: var(--text-xl);

      /* Koko kortti on klikattava otsikon linkin kautta */
      & a {
        color: inherit;
        text-decoration: none;

        &::after {
          content: "";
          position: absolute;
          inset: 0;
          z-index: 1;
        }
      }
    }

    /* Elämyskortissa on kaksi tekstiä; rivi tai ruudukko valitsee, kumpi näkyy */
    &.c-card--text-short .c-card__text--long,
    &:not(.c-card--text-short) .c-card__text--short {
      display: none;
    }

    /* Muut linkit ja painikkeet pysyvät klikattavina koko kortin linkin päällä */
    & :where(.c-btn, .c-link) {
      position: relative;
      z-index: 2;
    }

    /* Elämys: valkoinen kehystetty kortti, hinta kuvan päällä */
    &.c-card--experience {
      --card-pad-block: clamp(calc(var(--u) * 24), 7.6cqi, calc(var(--u) * 32));
      --card-pad-inline: clamp(calc(var(--u) * 20), 7.6cqi, calc(var(--u) * 32));

      overflow: clip;
      border: 1px solid var(--color-grey-400);
      border-radius: var(--radius-l);
      background: var(--color-card);

      & .c-card__price {
        position: absolute;
        inset-block-start: calc(var(--u) * 16);
        inset-inline-end: calc(var(--u) * 16);
        padding: calc(var(--u) * 8) calc(var(--u) * 18);
        border-radius: var(--radius-pill);
        background: oklch(25% 0 0 / 0.73);
        color: var(--color-white);
        font-size: var(--text-s);
        line-height: var(--leading-normal);

        & strong { font-weight: var(--weight-bold); }
      }

      & .c-card__body {
        padding: var(--card-pad-block) var(--card-pad-inline) 0;
      }

      & .c-card__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: calc(var(--u) * 8) calc(var(--u) * 16);
      }

      & .c-card__duration {
        display: inline-flex;
        align-items: center;
        gap: calc(var(--u) * 5);
        color: var(--color-grey-700);
        font-size: var(--text-s);
        font-weight: var(--weight-semibold);

        &::before {
          content: "";
          inline-size: calc(var(--u) * 14);
          aspect-ratio: 1;
          border: 1.5px solid currentColor;
          border-radius: 50%;
          background:
            linear-gradient(currentColor, currentColor) 50% 28% / 1.5px 36% no-repeat,
            linear-gradient(currentColor, currentColor) 72% 52% / 32% 1.5px no-repeat;
        }
      }

      & .c-card__title {
        font-family: "Saira Condensed", "Arial Narrow", sans-serif;
        font-weight: var(--weight-bold);
        line-height: var(--leading-normal);
        text-transform: uppercase;
      }

      & .c-card__text {
        font-size: calc(var(--u) * 16);
        line-height: 1.45;
      }

      & .c-card__footer {
        padding: calc(var(--u) * 32) var(--card-pad-inline) var(--card-pad-block);
      }
    }

    /* Artikkeli: neliökuva, ei kehystä */
    &.c-card--article {
      --card-ratio: 1;

      gap: calc(var(--u) * 16);

      & .c-card__media { border-radius: var(--radius-m); }

      & .c-card__title {
        font-size: calc(var(--u) * 20);
        line-height: 1.4;
      }

      & .c-card__text {
        color: var(--color-text-muted);
        font-size: calc(var(--u) * 16);
      }
    }

    /* Kuvalinkki: kausi tai sijainti, teksti kuvan päällä */
    &.c-card--image-link {
      justify-content: flex-end;
      aspect-ratio: 3 / 4;
      padding: calc(var(--u) * 24) calc(var(--u) * 32);
      overflow: clip;
      border-radius: var(--radius-l);
      isolation: isolate;

      & .c-card__media {
        position: absolute;
        inset: 0;
        z-index: -1;

        & img { aspect-ratio: auto; }

        &::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(transparent, oklch(0% 0 0 / 0.3));
        }
      }

      & .c-card__title {
        color: var(--color-white);
        font-family: "Saira Condensed", "Arial Narrow", sans-serif;
        font-size: var(--text-2xl);
        font-weight: var(--weight-bold);
        line-height: var(--leading-snug);
        text-transform: uppercase;
      }
    }

    /* Vaihtoehto: tekstikortti vaalealla pinnalla */
    &.c-card--option {
      align-items: flex-start;
      gap: calc(var(--u) * 16);
      block-size: 100%;
      padding: var(--space-m);
      border: 1px solid color-mix(in oklch, var(--color-gold-200) 30%, transparent);
      border-radius: calc(var(--u) * 15);
      background: color-mix(in oklch, var(--color-gold-200) 20%, transparent);

      & .c-card__title {
        font-size: calc(var(--u) * 24);
      }

      & .c-card__eyebrow {
        inline-size: min(100%, calc(var(--u) * 250));
        padding-block-end: calc(var(--u) * 4);
        border-block-end: 1px solid var(--eyebrow-rule);
        color: var(--color-heading);
        font-family: var(--font-heading);
        font-size: calc(var(--u) * 16);
        font-weight: var(--eyebrow-weight);
        line-height: var(--leading-normal);
        text-transform: var(--heading-transform);
      }

      /* Painike kortin alareunaan, jotta rivin painikkeet ovat samalla tasolla */
      & .c-btn { margin-block-start: auto; }
      & .c-card__text { margin-block-end: calc(var(--u) * 8); }

      @container (inline-size < 480px) {
        & .c-btn { inline-size: 100%; }
      }
    }

    /* Profiili: poro tai henkilö (uusi, artikkelikortin mitoilla) */
    &.c-card--profile {
      --card-ratio: 4 / 5;

      gap: calc(var(--u) * 16);

      & .c-card__media { border-radius: var(--radius-m); }
      & .c-card__role { color: var(--color-text-muted); font-size: var(--text-s); }
    }
  }

  /* ── Hero ── */
  .c-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-block-size: calc(var(--u) * 900);
    padding-block: var(--space-section);
    padding-inline: var(--space-gutter);
    overflow: clip;
    border-end-start-radius: var(--radius-xl);
    border-end-end-radius: var(--radius-xl);

    & .c-hero__media {
      position: absolute;
      inset: 0;
      z-index: -1;

      & img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
      }

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        /*
         * Tummennus vain tekstin kohdalla: ylhäällä kapea kaista valikon takana, kapeassa näkymässä
         * alaosa (teksti täyttää sen), leveässä vasen reuna. Muu kuva näkyy sellaisenaan.
         */
        --hero-nav-shade: linear-gradient(oklch(0% 0 0 / 0.5), oklch(0% 0 0 / 0) 22%);
        background:
          var(--hero-nav-shade),
          linear-gradient(0deg, oklch(0% 0 0 / 0.82), oklch(0% 0 0 / 0.58) 50%, oklch(0% 0 0 / 0.1) 85%);

        @media (width > 760px) {
          background:
            var(--hero-nav-shade),
            linear-gradient(90deg, oklch(0% 0 0 / 0.74), oklch(0% 0 0 / 0.5) 32%, oklch(0% 0 0 / 0) 62%);
        }
      }
    }

    & .c-hero__content {
      display: grid;
      gap: var(--space-flow);
      justify-items: start;
      inline-size: 100%;
      max-inline-size: var(--width-content);
      margin-inline: auto;
      container-type: inline-size;
    }

    & .c-hero__title {
      max-inline-size: calc(var(--u) * 525);
      padding-block-end: calc(var(--u) * 24);
      border-block-end: 2px solid oklch(100% 0 0 / 0.35);
      color: var(--color-beige-100);
      font-size: var(--text-hero-l);
      line-height: 0.9;
    }

    & .c-hero__text {
      max-inline-size: calc(var(--u) * 640);

      & > * + * { margin-block-start: 1em; }
    }

    /* Alasivun hero: matalampi, keskitetty pystysuunnassa, tasainen tummennus */
    &.c-hero--sub {
      justify-content: center;
      min-block-size: 90svh;

      & .c-hero__media::after {
        background: var(--hero-nav-shade), oklch(0% 0 0 / 0.5);

        @media (width > 760px) {
          background:
            var(--hero-nav-shade),
            linear-gradient(90deg, oklch(0% 0 0 / 0.68), oklch(0% 0 0 / 0.5) 45%, oklch(0% 0 0 / 0.05) 82%);
        }
      }
      & .c-hero__content { gap: var(--space-m); }

      & .c-hero__title {
        max-inline-size: calc(var(--u) * 787);
        padding-block-end: 0;
        border: 0;
        color: var(--color-white);
        font-size: var(--text-hero);
        line-height: var(--leading-snug);
      }

      & .c-hero__text {
        max-inline-size: calc(var(--u) * 787);
        color: var(--color-text-muted);
      }
    }

    /* Jaettu hero: teksti tummalla pinnalla vasemmalla, kuva oikealla */
    /* Etusivu: muita suurempi otsikko ja kapeampi teksti */
    &.c-hero--home {
      & .c-hero__title {
        font-size: clamp(calc(var(--u) * 52), calc(var(--u) * 40 + 3.75vi), calc(var(--u) * 94));
        line-height: 0.9;
      }

      & .c-hero__text { max-inline-size: calc(var(--u) * 525); }
    }

    &.c-hero--split {
      border-radius: 0;

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(oklch(0% 0 0 / 0.5), transparent);
        pointer-events: none;
      }

      & .c-hero__media::after { content: none; }
      & .c-hero__content { gap: calc(var(--u) * 32); }

      & .c-hero__title {
        max-inline-size: none;
        padding-block-end: 0;
        border: 0;
        color: var(--color-white);
        font-size: var(--text-hero-xl);
        line-height: var(--leading-snug);

        & span { border-block-end: 2px solid var(--color-grey-500); }
      }

      @media (width <= 900px) {
        padding-block-end: 0;
        padding-inline: 0;

        & .c-hero__content { padding-inline: var(--space-gutter); }

        & .c-hero__media {
          position: static;
          order: 2;
          margin-block-start: var(--space-m);
          overflow: clip;
          border-start-start-radius: var(--radius-xl);
          border-start-end-radius: var(--radius-xl);

          & img { aspect-ratio: 1; }
        }
      }

      @media (width > 900px) {
        background-color: var(--theme-page);

        /* Kuva jatkuu paneelin pyöristetyn kulman alle */
        & .c-hero__media { inset-inline-start: calc(50% - var(--radius-xl)); }

        /* Tumma tekstipaneeli vasemmalla, oikea alakulma pyöristetty */
        &::after {
          content: "";
          position: absolute;
          inset-block: 0;
          inset-inline-start: 0;
          z-index: -1;
          inline-size: 50%;
          border-end-end-radius: var(--radius-xl);
          background: linear-gradient(oklch(0% 0 0 / 0.35), transparent 45%), var(--color-bg);
        }

        & .c-hero__content > * { max-inline-size: calc(50cqi - var(--space-m)); }
      }
    }
  }

  /* ── Kuva + teksti ── */
  .c-media {
    position: relative;
    overflow: clip;
    border-radius: var(--radius-xl);

    & img {
      inline-size: 100%;
      block-size: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }

    /* Kuvateksti kuvan päällä vasemmassa alakulmassa: tummennus vain tekstin taustalla kuvan alaosassa */
    &:has(.c-media__caption)::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, oklch(0% 0 0 / 0.62), oklch(0% 0 0 / 0.48) 24%, oklch(0% 0 0 / 0) 50%);
    }

    & .c-media__caption {
      position: absolute;
      inset-inline-start: clamp(calc(var(--u) * 24), 5.6cqi, calc(var(--u) * 48));
      inset-block-end: clamp(calc(var(--u) * 24), 5.6cqi, calc(var(--u) * 48));
      z-index: 1;
      max-inline-size: calc(var(--u) * 210);
      margin: 0;
      text-align: start;
      color: var(--color-white);
      /* Vaalean kuvan päällä teksti erottuu varjon avulla, kun tummennus on vain alaosassa */
      text-shadow: 0 1px 3px oklch(0% 0 0 / 0.55), 0 2px 18px oklch(0% 0 0 / 0.45);
      font-family: var(--font-heading);
      font-size: clamp(calc(var(--u) * 24), 3.2cqi, calc(var(--u) * 27));
      font-weight: var(--heading-weight);
      line-height: var(--leading-tight);
      text-transform: var(--heading-transform);
    }

    /* Tekstiosion kuva: pystykuva ohuella kehyksellä */
    &.c-media--portrait {
      border: 1px solid var(--color-border);

      & img { aspect-ratio: 3 / 4; }

      /* Kapeassa neliö, kuten sivustolla */
      @container (inline-size < 600px) {
        & img { aspect-ratio: 1; }
      }
    }
  }

  /* ── Kuvataustainen nosto ── */
  .c-feature {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-block-size: calc(var(--u) * 800);
    padding-block: var(--space-section);
    padding-inline: var(--space-gutter);
    overflow: clip;
    border-end-start-radius: var(--radius-xl);
    border-end-end-radius: var(--radius-xl);

    & .c-feature__media {
      position: absolute;
      inset: 0;
      z-index: -1;

      & img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
      }

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        /* Tummennus tekstin puolella: kapeassa koko alue (teksti täyttää sen), leveässä vasen reuna */
        background: linear-gradient(-130deg, transparent, oklch(0% 0 0 / 0.7));

        @media (width > 760px) {
          background: linear-gradient(90deg, oklch(0% 0 0 / 0.66), oklch(0% 0 0 / 0.5) 34%, oklch(0% 0 0 / 0) 64%);
        }
      }
    }

    & .c-feature__content {
      display: grid;
      gap: var(--space-flow);
      justify-items: start;
      inline-size: 100%;
      max-inline-size: var(--width-content);
      margin-inline: auto;
      container-type: inline-size;
    }

    & :where(h2) { max-inline-size: calc(var(--u) * 550); }

    & .c-feature__text {
      max-inline-size: calc(var(--u) * 600);

      & > * + * { margin-block-start: 1em; }
    }
  }

  /*
   * Valinnainen osa (yläotsikko, linkki, painike) näkyy, kun sen teksti on täytetty.
   * Tyhjäksi jätetty ei vie tilaa, eikä tyhjä painikerivi jätä väliä.
   */
  :is(.c-eyebrow, .c-intro__eyebrow, .c-card__eyebrow, .c-btn, .c-link, .c-callout__sub, .c-media__caption):empty {
    display: none;
  }

  .c-actions:not(:has(> :not(:empty))) {
    display: none;
  }

  /* Kuvatekstin tumma liuku vain, kun kuvateksti on täytetty */
  .c-media:has(.c-media__caption:empty)::after {
    content: none;
  }

  /* Osio, jonka taustalla on kuva: kuva sisällön takana, tumma peite, vaalea teksti */
  .l-section--media {
    position: relative;
    isolation: isolate;
    overflow: clip;

    & > .l-section__bg {
      position: absolute;
      inset: 0;
      z-index: -1;

      & img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
      }

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: oklch(0% 0 0 / 0.6);
      }
    }
  }

  /* Yksittäinen kuva tekstipinossa (yleisen muunnon sisältö) pysyy kuvituskokoisena */
  .l-stack > :is(img, figure):not(.c-media) {
    max-inline-size: calc(var(--u) * 480);
    border-radius: var(--radius-l);
    overflow: clip;
  }

  /* Paneeli: pinta, jolla on oma reunus ja pyöristys (esim. lomakkeen tausta) */
  .c-panel {
    padding: var(--space-m);
    border-radius: var(--radius-l);
  }

  /* Upotettu kartta tai muu kehys mahtuu palstaansa */
  :where(.l-section) iframe {
    inline-size: 100%;
    max-inline-size: 100%;
    border: 0;
    border-radius: var(--radius-l);
  }

  /* Kuvake tekstin yhteydessä (yleisen muunnon sisältö) */
  .c-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: calc(var(--u) * 40);
    block-size: calc(var(--u) * 40);
    color: var(--color-link);
    font-size: calc(var(--u) * 28);

    & svg, &svg {
      inline-size: 100%;
      block-size: 100%;
    }
  }

  /* Kuvakkeen väri tulee tekstin väristä, ei kuvakkeen omista asetuksista */
  .c-icon:is(svg), .c-icon svg { fill: none; stroke: currentColor; }

  /* ── Vinkkikortit (Tips for visitors): kuvakemerkki, sisältö ja tarkistuslista ── */
  .c-tips {
    display: grid;
    gap: var(--space-s);
  }

  .l-stack:has(> .c-tips) > :is(h2, h3):first-child { align-self: center; text-align: center; }

  .c-tip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-l);
    padding: var(--space-l);
    border-radius: calc(var(--u) * 32);
    background: var(--color-white);
    color: var(--color-black);

    @media (width < 48em) {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-m);
      padding: var(--space-m);
    }
  }

  .c-tip__badge {
    display: grid;
    place-items: center;
    inline-size: calc(var(--u) * 140);
    block-size: calc(var(--u) * 140);
    border-radius: 50%;
    background: var(--color-beige-50);

    & .c-icon {
      inline-size: calc(var(--u) * 72);
      block-size: calc(var(--u) * 72);
    }

    @media (width < 48em) {
      inline-size: calc(var(--u) * 100);
      block-size: calc(var(--u) * 100);

      & .c-icon { inline-size: calc(var(--u) * 52); block-size: calc(var(--u) * 52); }
    }
  }

  .c-tip__body {
    padding-inline-start: var(--space-l);
    border-inline-start: 1px dotted var(--color-border);

    & :is(h2, h3, h4) { color: var(--color-red-700); }
    & ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }

    @media (width < 48em) {
      padding-inline-start: 0;
      padding-block-start: var(--space-m);
      border-inline-start: 0;
      border-block-start: 1px dotted var(--color-border);
    }
  }

  .c-tip__body--media {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-m);
    align-items: start;

    @media (width < 62em) { grid-template-columns: minmax(0, 1fr); }
  }

  .c-tip__media img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-l);
  }

  /* Tarkistusrivi: kuvake ja teksti samalla rivillä */
  .c-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);

    & > .c-icon {
      inline-size: calc(var(--u) * 24);
      block-size: calc(var(--u) * 24);
      font-size: calc(var(--u) * 24);
      color: var(--color-red-700);
    }

    & > :not(.c-icon) { flex: 1; min-inline-size: 0; margin: 0; }
  }

  .c-check--note {
    align-items: center;
    padding: var(--space-s);
    border-radius: var(--radius-m);
    background: var(--color-beige-50);
  }

  /* Kohta, jonka otsikon alla on viiva (More about …) */
  .c-ruled > :is(h2, h3, h4) {
    padding-block-end: var(--space-xs);
    border-block-end: 1px solid color-mix(in oklch, currentColor 35%, transparent);
    font-size: var(--text-l);
    text-transform: none;
  }

  /* Ruudukko palstan tai toisen ruudukon sisällä mahtuu kapeampaan tilaan */
  :is(.l-split, .l-grid) .l-grid { --grid-min: calc(var(--u) * 170); }

  /* Painike kokoelman tai pinon suorana lapsena ei veny koko leveydelle */
  :is(.c-collection, .l-stack) > :is(.c-btn, .c-link) { justify-self: start; align-self: flex-start; }

  /* Kuva ja teksti -osion otsikko on molemmissa brändeissä saman kokoinen (sivustolla 40 px) */
  .l-split :where(h2) { font-size: var(--text-display); }

  /* Peräkkäiset kuva ja teksti -osiot samalla taustalla: väli vain kerran */
  .l-section.u-tone-inherit:has(> .l-container > .l-split) + .l-section.u-tone-inherit:has(> .l-container > .l-split) {
    padding-block-start: 0;
  }

  /* Sivun otsikko ilman kuvaa */
  .c-page-header {
    padding-block: var(--space-l) var(--space-m);

    & .c-page-header__title { max-inline-size: calc(var(--u) * 860); }
    & .c-page-header__text { max-inline-size: var(--width-text); }
  }

  /* Tyhjäksi jätetty otsikko tai teksti ei vie tilaa */
  :where(.l-stack, .c-collection, .c-faq) > :is(h1, h2, h3):empty { display: none; }
  .c-collection > .c-intro__text:not(:has(> *)) { display: none; }

  /* Jako, jossa on vain yksi palsta (kuva piilotettu), käyttää koko leveyden luettavalla rivinpituudella */
  .l-split:not(:has(> :nth-child(2))) {
    --split: minmax(0, 1fr);

    & > * { max-inline-size: calc(var(--u) * 860); }
  }

  /* Artikkelikokoelman suodatin ja sivutus (Bricksin omat elementit) */
  .c-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--u) * 8) calc(var(--u) * 12);

    & ul {
      display: flex;
      flex-wrap: wrap;
      gap: calc(var(--u) * 8);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    & label {
      display: inline-flex;
      align-items: center;
      padding: calc(var(--u) * 8) calc(var(--u) * 18);
      border: 1px solid var(--color-text);
      border-radius: var(--radius-pill);
      font-size: var(--text-s);
      font-weight: var(--weight-semibold);
      cursor: pointer;

      &:has(input:checked), &.brx-option-active { background: var(--color-text); color: var(--color-bg); }
      &:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
    }

    & input[type="radio"] {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      opacity: 0;
    }
  }

  .c-pagination {
    & ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: calc(var(--u) * 8);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    & :is(a, span).page-numbers {
      display: grid;
      place-items: center;
      min-inline-size: calc(var(--u) * 44);
      min-block-size: calc(var(--u) * 44);
      padding-inline: calc(var(--u) * 8);
      border: 1px solid var(--color-text);
      border-radius: var(--radius-pill);
      color: var(--color-text);
      font-weight: var(--weight-semibold);
      text-decoration: none;

      &.current { background: var(--color-text); color: var(--color-bg); }
    }
  }

  /* Artikkelin otsikkoalue ja leipäteksti */
  .c-article__header > .l-container { --stack-gap: calc(var(--u) * 16); }
  .c-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--u) * 8) calc(var(--u) * 16);
    color: var(--color-text-muted);
    font-size: var(--text-s);
  }
  .c-article__title { max-inline-size: calc(var(--u) * 960); }
  .c-article__body { max-inline-size: calc(var(--u) * 800); margin-inline: auto; }

  /* Yhteystietorivit ja muu pienen otsikon ja arvon pari */
  .c-pair {
    display: grid;
    gap: calc(var(--u) * 4);

    & > :first-child { color: var(--color-text-muted); font-size: var(--text-s); }
    & a { color: inherit; }
  }

  /* Yläotsikko osion otsikon yllä, kun osiossa ei ole Section introa */
  .c-eyebrow {
    display: block;
    inline-size: min(100%, calc(var(--u) * 250));
    padding-block-end: calc(var(--u) * 4);
    border-block-end: 1px solid var(--eyebrow-rule, var(--color-border));
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-size: calc(var(--u) * 16);
    font-weight: var(--eyebrow-weight);
    line-height: var(--leading-normal);
    text-transform: var(--heading-transform);
  }

  /* Rivin alla oleva teksti ei jää tyhjänä näkyviin */
  .l-stack > .c-intro__text:not(:has(> *)) { display: none; }
  .l-stack > .c-intro__text { max-inline-size: var(--width-text); }

  /* ── Korostuslohko (WE ♥ …) ── */
  .c-callout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-m);
    padding: clamp(calc(var(--u) * 32), 5.2cqi, calc(var(--u) * 67.5)) clamp(calc(var(--u) * 24), 5.2cqi, calc(var(--u) * 67.5));
    border-radius: clamp(var(--radius-l), 2.5cqi, var(--radius-xl));

    & .c-callout__intro {
      display: grid;
      gap: calc(var(--u) * 16);
    }

    /* Otsikko koostuu kolmesta osasta: sana, sydän, sana */
    & .c-callout__title {
      display: flex;
      flex-wrap: wrap;
      column-gap: 0.22em;
    }

    & .c-callout__sub {
      font-size: calc(var(--u) * 18 * var(--heading-scale));
    }

    & .c-callout__text > * + * {
      margin-block-start: calc(var(--u) * 12);
    }

    @container (inline-size < 480px) {
      & .c-btn { inline-size: 100%; }
    }
  }

  /* Arvosanamerkit rinnakkain, kun lähteitä on useampi */
  .c-ratings {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--u) * 16);
  }

  /* ── Faktalohko ── */
  .c-fact {
    display: grid;
    grid-template-columns: clamp(calc(var(--u) * 64), 9cqi, calc(var(--u) * 120)) minmax(0, 1fr);
    column-gap: clamp(calc(var(--u) * 20), 3.6cqi, calc(var(--u) * 48));
    align-items: center;

    & .c-fact__body {
      display: grid;
      gap: calc(var(--u) * 12);
      max-inline-size: calc(var(--u) * 780);
    }

    /* Porohahmo koriste-elementtinä (ei kuvaelementtinä), jotta osoite ei riipu ympäristöstä */
    & div.c-fact__figure {
      aspect-ratio: 68 / 77.5;
      background: url("img/reindeer-figure.svg") center / contain no-repeat;
    }

    &:not(:has(.c-fact__figure)) {
      grid-template-columns: minmax(0, 1fr);
    }

    @container (inline-size < 600px) {
      align-items: start;
    }
  }

  /* ── Arvostelut ── */
  .c-reviews {
    display: grid;
    gap: calc(var(--u) * 48);
    justify-items: center;

    & .c-reviews__badge {
      overflow: clip;
      border-radius: var(--radius-m);
      background: var(--color-white);

      & img { inline-size: calc(var(--u) * 245); }
    }

    & .c-reviews__viewport {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: var(--space-m);
      align-items: center;
      inline-size: 100%;
    }

    & .c-reviews__control {
      display: grid;
      place-items: center;
      inline-size: calc(var(--u) * 45);
      aspect-ratio: 1;
      padding: 0;
      border: 1px solid var(--color-text);
      border-radius: 50%;
      background: transparent;
      cursor: pointer;

      color: var(--color-text);

      &[hidden] { visibility: hidden; display: grid; }
      &[aria-disabled="true"] { opacity: 0.25; cursor: default; }

      &:focus-visible {
        outline: 2px solid var(--color-text);
        outline-offset: 3px;
      }

      @container (inline-size < 640px) { display: none; }
    }

    & .c-reviews__list {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 100%;
      align-items: center;
      inline-size: 100%;
      margin: 0;
      padding: 0;
      overflow-x: auto;
      list-style: none;
      scroll-snap-type: inline mandatory;
      scrollbar-width: none;
    }

    & .c-reviews__item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      scroll-snap-align: center;
    }

    & .c-reviews__stars {
      margin-block-end: calc(var(--u) * 24);
      color: var(--theme-brand);
      font-size: calc(var(--u) * 20);
      line-height: 1;
      letter-spacing: calc(var(--u) * 5);
    }

    & .c-reviews__quote {
      max-inline-size: calc(var(--u) * 768);
      margin: 0;
      margin-block-end: calc(var(--u) * 16);
      padding: 0;
      border: 0;
      quotes: "\201C" "\201D";

      &::before { content: open-quote; }
      &::after { content: close-quote; }

      color: var(--color-heading);
      font-family: "Saira Condensed", "Arial Narrow", sans-serif;
      font-size: var(--text-xl);
      font-weight: var(--weight-bold);
      line-height: 1.4;
      text-transform: uppercase;
    }

    & .c-reviews__author {
      font-size: calc(var(--u) * 16);
      font-weight: var(--weight-semibold);
    }

    & .c-reviews__dots {
      display: flex;
      gap: calc(var(--u) * 10);
      margin: 0;
      padding: 0;
      list-style: none;

      & > * {
        inline-size: calc(var(--u) * 10);
        aspect-ratio: 1;
        border-radius: 50%;
        background: oklch(0% 0 0 / 0.33);

        &[aria-current="true"] { background: var(--theme-brand); }
      }
    }
  }

  /* ── FAQ: kysymykset ruudukossa, hiusviivat välissä ── */
  /* Osio, jonka kysymyslista jäi tyhjäksi, ei näy lainkaan */
  .l-section:has(.c-faq):not(:has(.c-faq__item)) {
    display: none;
  }

  .c-faq {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);

    & .c-faq__list {
      --faq-gap: clamp(calc(var(--u) * 28), 2.5cqi, calc(var(--u) * 32));

      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--u) * 420)), 1fr));
      grid-auto-rows: 1fr;
      gap: var(--faq-gap);
      margin: 0;
      padding: 0;
      overflow: clip;
      list-style: none;
    }

    /* Viivat piirretään jokaisen kohdan ylä- ja vasempaan reunaan; säiliö leikkaa uloimmat pois */
    & .c-faq__item {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      padding: var(--space-s);

      &::before,
      &::after {
        content: "";
        position: absolute;
        background: oklch(0% 0 0 / 0.1);
      }

      &::before {
        inset-block-start: 0;
        inset-inline-start: calc(var(--faq-gap) / -2);
        inline-size: 2px;
        block-size: 100vh;
      }

      &::after {
        inset-block-start: calc(var(--faq-gap) / -2);
        inset-inline-start: 0;
        inline-size: 100vw;
        block-size: 2px;
      }
    }

    & .c-faq__question {
      max-inline-size: calc(var(--u) * 433);
      font-family: "Saira Condensed", "Arial Narrow", sans-serif;
      font-size: calc(var(--u) * 20);
      font-weight: var(--weight-medium);
      line-height: var(--leading-snug);
      text-transform: none;
    }

    & .c-faq__answer {
      font-size: calc(var(--u) * 15);
      line-height: 1.45;
    }

    & .c-faq__footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-s);
      align-self: center;
      text-align: center;
    }

    & .c-faq__footer-title {
      font-family: "Saira Condensed", "Arial Narrow", sans-serif;
      font-size: calc(var(--u) * 27);
      font-weight: var(--weight-medium);
      line-height: var(--leading-snug);
      text-transform: none;
    }
  }

  /* ── Leipäteksti: Info-sivut, artikkelit, elämyksen kuvaukset ── */
  .c-prose {
    line-height: 1.45;

    & > * + * {
      margin-block-start: 1.25em;
    }

    /* Leipätekstin omat väliotsikot ovat kevyempiä kuin osioiden otsikot, kuten sivustolla */
    & :where(h2, h3, h4):not(.scr-experiences *) {
      margin-block-start: var(--space-m);
      font-weight: var(--weight-medium);
      line-height: 1.2;
      text-transform: none;
    }

    & :where(h2):not(.scr-experiences *) { font-size: calc(var(--u) * 32); }
    & :where(h3):not(.scr-experiences *) { font-size: calc(var(--u) * 24); }
    & :where(h4):not(.scr-experiences *) { font-size: calc(var(--u) * 20); }

    & :where(ul, ol):not(.scr-experiences *) {
      padding-inline-start: calc(var(--u) * 40);
    }

    & :where(a):not(.scr-experiences *) {
      border-block-end: 1px solid color-mix(in oklch, currentColor 50%, transparent);
      text-decoration: none;
    }

    & :where(img):not(.scr-experiences *) {
      border-radius: var(--radius-xl);
    }
    /* Peräkkäiset kuvat (scr-core ryhmittelee ne) kahdessa sarakkeessa */
    & .c-prose__gallery {
      display: grid;
      gap: var(--space-s);

      @media (width > 760px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      & figure {
        margin: 0;
      }

      & figure:last-child:nth-child(odd) {
        grid-column: 1 / -1;
      }

      & img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
      }
    }

    /* Upotettu elämysrivi käyttää komponentin omia tyylejä, ei artikkelin tekstin */
    & .scr-experiences {
      margin-block: var(--space-m);

      /* Artikkelissa on oma otsikko: rivin tyhjä otsikko ja linkki pois, osion reunat artikkelin levyisiksi */
      & .c-intro {
        display: none;
      }

      & .l-section {
        padding-block: 0;
      }

      & .l-container {
        padding-inline: 0;
        max-inline-size: none;
      }
    }
  }

  /* ── Elämyksen tietolohkot: sisältyy, ei sisälly, hyvä tietää ── */
  .c-detail {
    display: grid;
    gap: calc(var(--u) * 24);

    & .c-detail__title {
      font-size: calc(var(--u) * 24);
      line-height: 1.3;
    }

    & .c-detail__body {
      font-size: calc(var(--u) * 16);
      line-height: 1.6;
    }
  }

  /* ── Galleria: iso kuva + neljä pientä, viimeisessä "View gallery" ── */
  /*
   * ── Elämyssivu ──
   * Pohja kootaan erillisistä elementeistä (murupolku, otsikko, galleria, perustiedot,
   * tekstit, varaus). Nämä luokat ovat pohjan asettelulle; elementit eivät tiedä toisistaan.
   */
  .c-experience__header {
    padding-block: var(--space-l) var(--space-m);

    & > .l-container { --stack-gap: calc(var(--u) * 16); }
  }

  .c-experience__heading {
    display: grid;
    gap: calc(var(--u) * 16);
  }

  .c-experience__title {
    max-inline-size: calc(var(--u) * 860);
    font-size: clamp(calc(var(--u) * 35.5), calc(var(--u) * 29.6 + 1.83vi), calc(var(--u) * 56));
    line-height: 1.2;
  }

  /* Sijainti ja kesto rinnakkain, kuten elämyskortissa */
  .c-experience__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--u) * 8) calc(var(--u) * 16);

    & .c-card__duration {
      display: inline-flex;
      align-items: center;
      gap: calc(var(--u) * 5);
      color: var(--color-grey-700);
      font-size: var(--text-s);
      font-weight: var(--weight-semibold);

      &::before {
        content: "";
        inline-size: calc(var(--u) * 14);
        aspect-ratio: 1;
        border: 1.5px solid currentColor;
        border-radius: 50%;
        background:
          linear-gradient(currentColor, currentColor) 50% 28% / 1.5px 36% no-repeat,
          linear-gradient(currentColor, currentColor) 72% 52% / 32% 1.5px no-repeat;
      }
    }
  }

  /*
   * Bokunista tulevien tekstien omat väliotsikot näyttävät samalta kuin lohkojen otsikot:
   * hiusviiva ennen otsikkoa ja sama kirjasin. Tekstin ensimmäinen otsikko ei saa viivaa, koska sen yllä ei ole tekstiä.
   */
  .c-experience__details .c-prose :where(h2, h3, h4) {
    margin-block-start: var(--space-l);
    padding-block-start: var(--space-l);
    border-block-start: 1px solid oklch(0% 0 0 / 0.35);
    font-family: "Saira Condensed", "Arial Narrow", sans-serif;
    font-size: calc(var(--u) * 24);
    font-weight: var(--weight-bold);
    line-height: 1.3;
    text-transform: uppercase;

    &:first-child {
      margin-block-start: 0;
      padding-block-start: 0;
      border-block-start: 0;
    }

    /* Bokunin editori lihavoi otsikot erikseen */
    & :where(strong, b) { font-weight: inherit; }
  }

  .c-experience__main { padding-block-start: var(--space-m); }

  .c-experience__layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-l) calc(var(--u) * 54);
    align-items: start;

    /* Ilman varausaluetta teksti saa koko leveyden */
    &:not(:has(.c-booking)) { grid-template-columns: minmax(0, 1fr); }

    @container (inline-size < 900px) {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .c-experience__content,
  .c-experience__details {
    display: grid;
    gap: var(--space-l);
    min-inline-size: 0;
  }

  .c-experience__details {
    /* Hiusviiva lohkojen välissä */
    & .c-detail {
      padding-block-start: var(--space-l);
      border-block-start: 1px solid oklch(0% 0 0 / 0.35);
    }

    & .c-detail__title {
      font-family: "Saira Condensed", "Arial Narrow", sans-serif;
      font-weight: var(--weight-bold);
      text-transform: uppercase;
    }
  }

  /* Varausalue pysyy näkyvissä tekstiä vieritettäessä */
  .c-booking {
    display: grid;
    gap: calc(var(--u) * 16);
    align-content: start;

    .c-experience__layout > & {
      position: sticky;
      inset-block-start: calc(var(--u) * 24);

      @container (inline-size < 900px) {
        position: static;
      }
    }

    &.c-booking--note {
      min-block-size: 0;
      padding: var(--space-m);
      border-radius: var(--radius-l);
      background: color-mix(in oklch, var(--color-gold-200) 20%, transparent);
    }

    & .c-booking__title {
      font-size: var(--text-2xl);
    }
  }

  /* Perustiedot: tumma paneeli, tiedot nimi–arvo-pareina */
  .c-facts {
    display: grid;
    gap: calc(var(--u) * 16);
    padding: calc(var(--u) * 32);
    border-radius: var(--radius-m);

    & .c-facts__title {
      padding-block-end: calc(var(--u) * 12);
      border-block-end: 1px solid var(--color-border);
      font-size: calc(var(--u) * 20);
    }

    & .c-facts__list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--u) * 240)), 1fr));
      gap: calc(var(--u) * 12) var(--space-m);
      margin: 0;
    }

    & .c-facts__row {
      display: flex;
      flex-wrap: wrap;
      gap: calc(var(--u) * 6);
      font-size: calc(var(--u) * 16);
    }

    & dt { font-weight: var(--weight-bold); }
    & dd { margin: 0; }
  }

  .c-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--u) * 8);
    margin: 0;
    padding: 0;
    overflow: clip;
    border-radius: var(--radius-l);
    list-style: none;

    & .c-gallery__item {
      position: relative;

      & a {
        display: block;
        block-size: 100%;
      }

      & img {
        inline-size: 100%;
        block-size: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
      }

      &:nth-child(n + 6) { display: none; }
    }

    & .c-gallery__more {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background: oklch(0% 0 0 / 0.5);
      color: var(--color-white);
      font-family: "Saira Condensed", "Arial Narrow", sans-serif;
      font-size: var(--text-l);
      font-weight: var(--weight-bold);
      text-transform: uppercase;
    }

    @container (inline-size > 700px) {
      grid-template-columns: 2fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;

      & .c-gallery__item:first-child { grid-row: span 2; }
    }
  }

  /* ── Murupolku ── */
  .c-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--u) * 8);
    margin: 0;
    padding: 0;
    font-size: var(--text-s);
    list-style: none;

    & li + li::before {
      content: "/";
      margin-inline-end: calc(var(--u) * 8);
      color: var(--color-text-muted);
    }
  }

  /* ── Uutiskirje ── */
  .c-newsletter {
    display: grid;
    gap: var(--space-l);
    padding: clamp(calc(var(--u) * 48), 16cqi, calc(var(--u) * 64)) calc(var(--u) * 20);
    border-radius: var(--radius-xl);

    & .c-intro__title { max-inline-size: calc(var(--u) * 400); }
    & .c-intro__text { max-inline-size: calc(var(--u) * 468); }
    & .c-intro { gap: calc(var(--u) * 16); }

    & .c-newsletter__form {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: calc(var(--u) * 20) calc(var(--u) * 24);
      align-items: center;
    }

    & .c-newsletter__input {
      grid-column: 1 / -1;
      min-block-size: calc(var(--u) * 48);
      padding: calc(var(--u) * 8.5) calc(var(--u) * 10);
      border: 1px solid var(--color-beige-100);
      border-radius: var(--radius-s);
      background: transparent;
      font-size: calc(var(--u) * 16);

      &::placeholder { color: var(--color-text); opacity: 0.8; }
    }

    & .c-newsletter__submit {
      min-inline-size: calc(var(--u) * 189);
      border-radius: calc(var(--u) * 50);
    }

    & .c-newsletter__note {
      max-inline-size: calc(var(--u) * 150);
      font-size: var(--text-xs);
      line-height: 1.55;

      & a { font-weight: var(--weight-bold); }
    }

    @container (inline-size > 760px) {
      grid-template-columns: 1fr 1fr;
      gap: 0;
      align-items: center;
      padding: calc(var(--u) * 48);
    }
  }

  /* Taavan uutiskirjeessä painike on ääriviivallinen */
  [data-theme="taava"] .c-newsletter .c-newsletter__submit {
    border: 1px solid var(--color-beige-100);
    background: transparent;
    color: var(--color-beige-100);
  }

  /*
   * ── Header ──
   * Oletuksena läpinäkyvä heron päällä. Kun osoitin tai kohdistus on headerissa,
   * tausta vaihtuu vaaleaksi, teksti tummaksi ja logo värilliseksi.
   * .c-header--solid pitää saman tilan pysyvästi (sivut ilman heroa).
   */
  .c-header {
    --header-ink: var(--color-grey-300);
    --header-ink-strong: var(--color-white);
    --header-inset: max(var(--space-gutter), calc((100cqi - var(--width-content)) / 2));

    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    color: var(--header-ink);
    container-type: inline-size;
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);

    &:hover,
    &:focus-within,
    &[data-menu-open],
    &.c-header--solid {
      --header-ink: var(--color-black);
      --header-ink-strong: var(--color-black);

      background-color: var(--color-beige-50);
      box-shadow: var(--shadow-m);
    }

    &.c-header--solid { position: relative; }

    & .c-header__top {
      display: none;
      justify-content: flex-end;
      padding-inline: var(--header-inset);
    }

    & .c-header__top-inner {
      display: flex;
      align-items: center;
      gap: calc(var(--u) * 32);
      padding-block: calc(var(--u) * 8);
      border-block-end: 1px solid oklch(0% 0 0 / 0.2);
    }

    & .c-header__top-link {
      display: inline-flex;
      align-items: center;
      gap: calc(var(--u) * 5);
      color: var(--header-ink-strong);
      font-size: calc(var(--u) * 16);
      text-decoration: none;
      white-space: nowrap;

      &::after {
        content: "";
        inline-size: calc(var(--u) * 20);
        aspect-ratio: 1;
        background: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' fill='none'%3E%3Crect x='.5' y='.5' width='20' height='20' rx='10' stroke='%23000'/%3E%3Cpath d='M6.84 15 6 14.16l6.96-6.96H9V6h6v6h-1.2V8.04z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
      }
    }

    & .c-header__languages {
      display: flex;
      gap: calc(var(--u) * 20);
      margin: 0;
      padding: calc(var(--u) * 14) calc(var(--u) * 18);
      list-style: none;

      & img { inline-size: calc(var(--u) * 24); border-radius: 2px; }
    }

    & .c-header__bar {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-m);
      padding-block: var(--space-s);
      padding-inline: var(--header-inset);
    }

    /* Kaksi logoa päällekkäin: vaalea läpinäkyvälle, värillinen vaalealle taustalle */
    & .c-header__logo {
      display: grid;

      & img {
        grid-area: 1 / 1;
        inline-size: calc(var(--u) * 128);
        margin-block: calc(var(--u) * -10);
        transition: opacity var(--duration) var(--ease);
      }

      & .c-header__logo-colour { opacity: 0; }
    }

    &:hover .c-header__logo-colour,
    &:focus-within .c-header__logo-colour,
    &[data-menu-open] .c-header__logo-colour,
    &.c-header--solid .c-header__logo-colour { opacity: 1; }

    &:hover .c-header__logo-light,
    &:focus-within .c-header__logo-light,
    &[data-menu-open] .c-header__logo-light,
    &.c-header--solid .c-header__logo-light { opacity: 0; }

    & .c-header__nav {
      display: none;
      align-items: center;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    & .c-header__link {
      display: inline-flex;
      align-items: center;
      gap: calc(var(--u) * 8);
      padding: calc(var(--u) * 30) var(--space-xs);
      border: 0;
      background: none;
      color: inherit;
      font: inherit;
      font-size: calc(var(--u) * 16);
      font-weight: var(--weight-semibold);
      line-height: 1.5;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;

      &[aria-current="page"] { color: var(--header-ink-strong); }

      @media (hover: hover) {
        &:hover { color: var(--color-red-600); }
      }
    }

    /* Megavalikon avauspainike linkin vieressä */
    & .c-header__sub-toggle {
      display: grid;
      place-items: center;
      inline-size: calc(var(--u) * 24);
      aspect-ratio: 1;
      margin-inline-start: calc(var(--u) * -4);
      margin-inline-end: calc(var(--u) * 6);
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: inherit;
      cursor: pointer;

      &::before {
        content: "";
        inline-size: calc(var(--u) * 10);
        aspect-ratio: 1;
        background: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='m1.5 3.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
        transition: rotate var(--duration) var(--ease);
      }

      &[aria-expanded="true"]::before { rotate: 180deg; }

      &:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
      }
    }

    & .c-header__item {
      position: relative;
      display: flex;
      align-items: center;
    }

    /* Megavalikko asemoituu koko palkin leveydelle, ei omaan kohtaansa */
    & .c-header__item:has(> .c-mega) { position: static; }

    /* Tavallinen alavalikko: pudotuslista kohdan alla */
    & .c-header__sub {
      position: absolute;
      inset-block-start: 100%;
      inset-inline-end: 0;
      z-index: 1;
      display: grid;
      gap: calc(var(--u) * 4);
      min-inline-size: calc(var(--u) * 280);
      margin: 0;
      padding: calc(var(--u) * 16);
      border-radius: var(--radius-l);
      background: var(--color-beige-50);
      box-shadow: 0 10px 10px oklch(0% 0 0 / 0.1);
      color: var(--color-black);
      list-style: none;
      visibility: hidden;
      opacity: 0;
      translate: 0 calc(var(--u) * -8);
      transition:
        opacity var(--duration) var(--ease),
        translate var(--duration) var(--ease),
        visibility 0s var(--duration);
    }

    & .c-header__item:has(> [aria-expanded="true"]) > .c-header__sub {
      visibility: visible;
      opacity: 1;
      translate: 0;
      transition-delay: 0s;
    }

    & .c-header__sub-link {
      display: block;
      padding: calc(var(--u) * 8) calc(var(--u) * 12);
      border-radius: var(--radius-s);
      color: inherit;
      font-size: calc(var(--u) * 16);
      font-weight: var(--weight-semibold);
      text-decoration: none;

      &[aria-current="page"] { color: var(--color-link); }

      @media (hover: hover) {
        &:hover { background: oklch(0% 0 0 / 0.06); color: var(--color-link); }
      }
    }

    & .c-header__top-links {
      display: flex;
      align-items: center;
      gap: calc(var(--u) * 32);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    & .c-header__languages a {
      display: block;
      border-radius: 2px;

      &[aria-current="true"] { outline: 1px solid currentColor; outline-offset: 3px; }
    }

    /* Valikko: kapealla näytöllä painikkeen takana oleva paneeli, leveällä rivi */
    & .c-header__navigation {
      display: none;
    }

    & .c-header__toggle-close { display: none; }
    & .c-header__toggle[aria-expanded="true"] .c-header__toggle-open { display: none; }
    & .c-header__toggle[aria-expanded="true"] .c-header__toggle-close { display: inline; }

    &[data-menu-open] .c-header__navigation {
      position: absolute;
      inset-block-start: 100%;
      inset-inline: 0;
      z-index: 2;
      display: grid;
      gap: var(--space-m);
      max-block-size: calc(100dvh - 100%);
      max-block-size: calc(100dvh - var(--header-block-size, 5rem));
      padding: var(--space-s) var(--header-inset) var(--space-m);
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--color-beige-50);
      box-shadow: var(--shadow-m);
      color: var(--color-black);

      & .c-header__nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }

      & .c-header__item {
        flex-wrap: wrap;
        justify-content: space-between;
        border-block-end: 1px solid oklch(0% 0 0 / 0.12);
      }

      & .c-header__link {
        flex: 1;
        padding: calc(var(--u) * 14) 0;
        white-space: normal;
      }

      & .c-header__sub-toggle {
        inline-size: calc(var(--u) * 44);
        margin: 0;
      }

      & .c-header__panel-extra {
        display: grid;
        gap: var(--space-s);
      }

      & .c-header__top-links {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--u) * 12);
      }

      & .c-header__languages { padding-inline: 0; }

      /* Megavalikko on paneelissa tavallinen avautuva linkkilista ilman kuvia */
      & .c-mega {
        position: static;
        display: none;
        flex-basis: 100%;
        padding: 0 0 calc(var(--u) * 16);
        border-radius: 0;
        background: none;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        translate: none;
        transition: none;
      }

      & .c-header__item:has(> [aria-expanded="true"]) > .c-mega { display: block; }

      & .c-header__sub {
        position: static;
        display: none;
        flex-basis: 100%;
        min-inline-size: 0;
        padding: 0 0 calc(var(--u) * 12);
        border-radius: 0;
        background: none;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        translate: none;
        transition: none;
      }

      & .c-header__item:has(> [aria-expanded="true"]) > .c-header__sub { display: grid; }
      & .c-header__sub-link { padding-inline: 0; }
      & .c-mega__title,
      & .c-mega__panels { display: none; }
      & .c-mega__body { display: block; }
      & .c-mega__list { gap: calc(var(--u) * 14); }
    }

    & .c-header__panel-extra { display: none; }

    & .c-header__actions {
      display: flex;
      align-items: center;
      gap: var(--space-m);
    }

    & .c-header__cta { display: none; white-space: nowrap; }

    & .c-header__toggle {
      display: grid;
      place-items: center;
      inline-size: calc(var(--u) * 30);
      aspect-ratio: 1;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--header-ink-strong);
      cursor: pointer;
    }

    @container (inline-size > 1180px) {
      & .c-header__top { display: flex; }
      & .c-header__bar { padding-block: 0; }

      & .c-header__logo img {
        inline-size: calc(var(--u) * 218);
        margin-block: calc(var(--u) * -40) calc(var(--u) * -14);
      }

      & .c-header__navigation,
      &[data-menu-open] .c-header__navigation {
        position: static;
        display: block;
        max-block-size: none;
        padding: 0;
        overflow: visible;
        background: none;
        box-shadow: none;
        color: inherit;
      }

      & .c-header__nav,
      &[data-menu-open] .c-header__nav { display: flex; flex-direction: row; align-items: center; }
      & .c-header__panel-extra,
      &[data-menu-open] .c-header__panel-extra { display: none; }
      & .c-header__cta { display: inline-flex; }
      & .c-header__toggle { display: none; }

      /* Osoittimella megavalikko aukeaa myös viemällä osoitin kohdan päälle */
      @media (hover: hover) {
        & .c-header__item:hover > :is(.c-mega, .c-header__sub) {
          visibility: visible;
          opacity: 1;
          translate: 0;
          transition-delay: 0s;
        }
      }
    }
  }

  /*
   * ── Megavalikko ──
   * Aukeaa, kun osoitin tai kohdistus on valikkokohdassa, tai kun kohdan
   * painikkeella on aria-expanded="true". Oikean reunan kuva vaihtuu sen
   * mukaan, minkä linkin päällä ollaan; ilman valintaa näkyy ensimmäinen.
   */
  .c-mega {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: var(--header-inset);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding: var(--space-m);
    border-radius: var(--radius-l);
    background: var(--color-beige-50);
    box-shadow: 0 10px 10px oklch(0% 0 0 / 0.1);
    color: var(--color-black);

    /* Suljettuna näkymätön ja pois ruudunlukijalta; avautuu häivytyksellä ja lyhyellä liu'ulla */
    visibility: hidden;
    opacity: 0;
    translate: 0 calc(var(--u) * -8);
    transition:
      opacity var(--duration) var(--ease),
      translate var(--duration) var(--ease),
      visibility 0s var(--duration);

    .c-header__item:has(> [aria-expanded="true"]) > & {
      visibility: visible;
      opacity: 1;
      translate: 0;
      transition-delay: 0s;
    }

    & .c-mega__title {
      padding-block-end: calc(var(--u) * 8);
      border-block-end: 1px solid var(--color-black);
      font-family: "Saira Condensed", "Arial Narrow", sans-serif;
      font-size: calc(var(--u) * 32);
      font-weight: var(--weight-bold);
      line-height: var(--leading-snug);
      text-transform: none;
    }

    & .c-mega__body {
      display: grid;
      grid-template-columns: 2fr 3fr;
      gap: var(--space-2xl);
    }

    & .c-mega__list {
      display: flex;
      flex-direction: column;
      gap: calc(var(--u) * 24);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    & .c-mega__link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-xs);
      color: var(--color-red-700);
      font-family: "Saira Condensed", "Arial Narrow", sans-serif;
      font-size: calc(var(--u) * 16);
      font-weight: var(--weight-bold);
      line-height: 1.15;
      text-decoration: none;
      text-transform: uppercase;
      opacity: 0.85;

      & > span { max-inline-size: calc(var(--u) * 400); }

      /* Nimi ja Bokunin otsikon täsmennys: täsmennys omalla rivillään, kevyempänä */
      & .c-mega__name,
      & .c-mega__detail { display: block; }

      & .c-mega__detail {
        margin-block-start: calc(var(--u) * 4);
        color: var(--color-black);
        font-family: var(--font-body, "Raleway", sans-serif);
        font-size: calc(var(--u) * 13);
        font-weight: var(--weight-regular, 400);
        line-height: 1.35;
        text-transform: none;
      }

      &::after {
        content: "";
        flex: none;
        inline-size: calc(var(--u) * 16);
        aspect-ratio: 1;
        background: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.3 3.3 14 8l-4.7 4.7-.9-.9L11.5 8.7H2V7.3h9.5L8.4 4.2z'/%3E%3C/svg%3E") center / contain no-repeat;
      }
    }

    & .c-mega__list > :first-child .c-mega__link,
    & .c-mega__link:hover,
    & .c-mega__link:focus-visible { opacity: 1; }

    & .c-mega__list:has(.c-mega__link:hover) > :first-child .c-mega__link:not(:hover) { opacity: 0.85; }

    & .c-mega__panels {
      display: grid;
      overflow: clip;
      border-radius: var(--radius-l);
    }

    & .c-mega__panel {
      position: relative;
      grid-area: 1 / 1;
      opacity: 0;
      transition: opacity var(--duration) var(--ease);

      &:first-child { opacity: 1; }

      & img {
        inline-size: 100%;
        block-size: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
      }

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(transparent 45%, oklch(0% 0 0 / 0.55));
      }
    }

    & .c-mega__caption {
      position: absolute;
      inset-inline-start: calc(var(--u) * 24);
      inset-block-end: calc(var(--u) * 24);
      z-index: 1;
      max-inline-size: calc(var(--u) * 240);
      color: var(--color-white);
      font-family: "Saira Condensed", "Arial Narrow", sans-serif;
      font-size: calc(var(--u) * 20);
      font-weight: var(--weight-bold);
      line-height: var(--leading-tight);
      text-transform: uppercase;
    }

    &:has(.c-mega__list > :nth-child(2) .c-mega__link:is(:hover, :focus-visible)) .c-mega__panel:nth-child(2) { z-index: 1; opacity: 1; }
    &:has(.c-mega__list > :nth-child(3) .c-mega__link:is(:hover, :focus-visible)) .c-mega__panel:nth-child(3) { z-index: 1; opacity: 1; }
    &:has(.c-mega__list > :nth-child(4) .c-mega__link:is(:hover, :focus-visible)) .c-mega__panel:nth-child(4) { z-index: 1; opacity: 1; }
    &:has(.c-mega__list > :nth-child(5) .c-mega__link:is(:hover, :focus-visible)) .c-mega__panel:nth-child(5) { z-index: 1; opacity: 1; }
    &:has(.c-mega__list > :nth-child(6) .c-mega__link:is(:hover, :focus-visible)) .c-mega__panel:nth-child(6) { z-index: 1; opacity: 1; }
    &:has(.c-mega__list > :nth-child(7) .c-mega__link:is(:hover, :focus-visible)) .c-mega__panel:nth-child(7) { z-index: 1; opacity: 1; }
    &:has(.c-mega__list > :nth-child(8) .c-mega__link:is(:hover, :focus-visible)) .c-mega__panel:nth-child(8) { z-index: 1; opacity: 1; }
  }

  /* ── Footer ── */
  /* Sivun viimeinen osio jättää tilan uutiskirjelohkolle, joka nousee sen päälle */
  :where(#brx-content, main) > :is(.l-section, .c-feature):last-child {
    padding-block-end: calc(var(--space-section) + var(--u) * 202);
  }

  /* Tyhjä kysymysosio sivun lopussa on piilossa, mutta sen pitää silti varata tila uutiskirjelohkolle:
     osio jää näkyviin ilman sisältöä ja yläväliä, pelkkänä alatilana. (:has ei voi olla sisäkkäin,
     joten edellistä osiota ei voi valita tämän perusteella.) */
  :where(#brx-content, main) > .l-section:last-child:has(.c-faq):not(:has(.c-faq__item)) {
    display: block;
    padding-block: 0 calc(var(--u) * 202);

    & > * { display: none; }
  }

  .c-footer {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 80);
    padding-inline: var(--space-gutter);
    padding-block-end: var(--space-s);

    /* Uutiskirjelohko nousee footerin yläreunan yli edellisen osion päälle */
    & > .l-container:first-child {
      margin-block-start: calc(var(--u) * -202);
    }

    /*
     * Linkkipalstat vasemmalla tasavälein, yhteystiedot omana palstanaan oikeassa
     * reunassa. Sama asettelu molemmissa teemoissa; vain värit ja fontit vaihtuvat.
     */
    & .c-footer__columns {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: var(--space-l) var(--space-m);
    }

    & .c-footer__links {
      display: grid;
      flex: 1 1 calc(var(--u) * 480);
      grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 140), calc(var(--u) * 160)));
      gap: var(--space-l) var(--space-m);
      min-inline-size: 0;
      max-inline-size: min(100%, calc(var(--u) * 760));
    }

    & .c-footer__column {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-s);
    }

    & .c-footer__about {
      max-inline-size: calc(var(--u) * 300);
      margin-block-start: calc(var(--u) * 16);
      font-size: var(--text-s);
      line-height: 1.55;
      opacity: 0.85;
    }

    & .c-footer__heading {
      font-family: var(--font-body);
      font-size: calc(var(--u) * 16);
      font-weight: var(--weight-semibold);
      line-height: var(--leading-normal);
      text-transform: none;
    }

    & .c-footer__list {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      margin: 0;
      padding: 0;
      font-size: var(--text-s);
      list-style: none;
    }

    & .c-footer__link {
      color: inherit;
      text-decoration: none;

      @media (hover: hover) {
        &:hover { text-decoration: underline; }
      }
    }

    /* Yhteystiedot: otsikko brändin otsikkofontilla, nimi, osoite, sitten puhelin ja sähköposti */
    & .c-footer__contact {
      display: flex;
      flex: 0 1 calc(var(--u) * 300);
      flex-direction: column;
      gap: var(--space-s);
      font-size: calc(var(--u) * 15);
      line-height: 1.6;

      & .c-footer__heading {
        font-family: var(--font-heading);
        font-size: var(--text-xl);
        font-weight: var(--heading-weight);
        line-height: var(--leading-snug);
        text-transform: var(--heading-transform);
      }

      & address {
        font-style: normal;

        & strong {
          display: block;
          font-weight: var(--weight-semibold);
        }
      }

      & .c-footer__reach {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        & a { color: inherit; text-decoration: underline; }
      }
    }

    & .c-footer__meta {
      display: flex;
      flex-direction: column;
      gap: calc(var(--u) * 32);
    }

    & .c-footer__brand {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-m);
    }

    /*
     * Kaksi logoa, joista teema näyttää oikean: vaalea tummalle footerille (SCR),
     * värillinen vaalealle (Taava). Sisältöä ei tarvitse vaihtaa teeman mukaan.
     */
    & .c-footer__logo {
      inline-size: clamp(calc(var(--u) * 210), 24cqi, calc(var(--u) * 315));

      &.c-footer__logo--colour { display: none; }
    }

    & .c-footer__badges {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: calc(var(--u) * 26);
      margin: 0;
      padding: 0;
      list-style: none;

      & img {
        inline-size: auto;
        max-block-size: calc(var(--u) * 124);
      }
    }

    & .c-footer__bottom {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: calc(var(--u) * 17);
      padding-block-start: calc(var(--u) * 24);
      border-block-start: 1px solid color-mix(in oklch, var(--color-text) 60%, transparent);
      font-size: var(--text-s);

      & .c-footer__link { font-weight: var(--weight-bold); text-decoration: underline; }
    }

    & .c-footer__legal,
    & .c-footer__social {
      display: flex;
      align-items: center;
      gap: calc(var(--u) * 17);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    & .c-footer__social a {
      display: grid;
      place-items: center;
      inline-size: calc(var(--u) * 30);
      aspect-ratio: 1;
      color: inherit;
      text-decoration: none;

      & svg { inline-size: calc(var(--u) * 20); fill: currentColor; }
    }
  }

  [data-theme="taava"] .c-footer {
    & .c-footer__logo--light { display: none; }
    & .c-footer__logo--colour { display: block; }
  }

  [data-theme="scr"] .c-footer {
    & .c-footer__logo--light { display: block; }
    & .c-footer__logo--colour { display: none; }
  }

  /* ── Varauskalenterin kehys (Bokun-widget) ── */
  .c-booking {
    min-block-size: calc(var(--u) * 480);
  }
}

/* ═════════════════════════════ Liike ═════════════════════════════ */

/*
 * Periaatteet: lyhyt ja pieni, sisältö ei odota liikettä, mikään ei pyöri
 * itsekseen. Kaikki sisääntulot ovat lisäparannus: selaimessa, joka ei tue
 * vierityssidonnaisia animaatioita, sisältö näkyy heti paikallaan.
 */
@layer scr.motion {
  /* ── Kosketus- ja hover-palaute: aina mukana, vain väri ja muutama pikseli ── */
  .c-btn {
    transition:
      background-color var(--duration-fast) var(--ease),
      border-color var(--duration-fast) var(--ease),
      color var(--duration-fast) var(--ease),
      translate var(--duration-fast) var(--ease);

    &:active { translate: 0 1px; }
  }

  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .c-card .c-card__media img,
    .c-media img {
      transition: scale var(--duration-slow) var(--ease);
    }

    /* Zoom vain klikattavalle kuvalle: kortti on linkki, tavallinen kuva ei reagoi */
    .c-card:has(a):hover .c-card__media img,
    a.c-media:hover img,
    .c-media:has(a):hover img { scale: 1.03; }

    .c-card:hover .c-link::after { translate: calc(var(--u) * 3) 0; }
  }

  /*
   * ── Kiinteä header ──
   * scr-foundation.js asettaa data-stuck-attribuutin, kun sivua on vieritetty
   * heron yläosan ohi. Palkki on silloin kiinteä, vaalea ja tiivis.
   */
  .c-header[data-stuck] {
    --header-ink: var(--color-black);
    --header-ink-strong: var(--color-black);

    position: fixed;
    background-color: var(--color-beige-50);
    box-shadow: var(--shadow-m), 0 1px 0 oklch(0% 0 0 / 0.08);

    & .c-header__top { display: none; }
    & .c-header__bar { padding-block: calc(var(--u) * 8); }
    & .c-header__logo-colour { opacity: 1; }
    & .c-header__logo-light { opacity: 0; }
    & .c-header__link { padding-block: calc(var(--u) * 14); }

    & .c-header__logo img {
      inline-size: calc(var(--u) * 132);
      margin-block: 0;
    }

    @media (prefers-reduced-motion: no-preference) {
      animation: m-header-in var(--duration) var(--ease) both;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    /* ── Hero-kuva asettuu paikalleen sivun latautuessa ── */
    .c-hero__media img,
    .c-feature__media img {
      animation: m-settle var(--duration-scene) var(--ease) both;
    }

    /* ── Sivunvaihto: lyhyt ristihäivytys ── */
    @view-transition {
      navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-duration: var(--duration);
    }

    /*
     * ── Sisääntulot vierittäessä ──
     * Elementti nousee ja häivittyy sisään, kun se tulee näkymän alareunasta.
     * Ruudukon lapset tulevat porrastettuna. Header, hero ja footer eivät liiku.
     */
    @supports (animation-timeline: view()) {
      :where(.c-intro, .l-carousel, .c-media, .c-callout, .c-fact, .c-faq__list, .c-faq__footer, .c-reviews__viewport, .c-rating, .c-prose, .l-grid > *):not(.c-hero *, .c-feature *, .c-header *, .c-footer *) {
        animation: m-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry var(--reveal-end, 45%);
      }

      .l-grid > :nth-child(4n + 2) { animation-range: entry 8% entry 53%; }
      .l-grid > :nth-child(4n + 3) { animation-range: entry 16% entry 61%; }
      .l-grid > :nth-child(4n + 4) { animation-range: entry 24% entry 69%; }

      /* Kuva tulee hieman tekstin jälkeen ja asettuu samalla paikalleen */
      .c-media:not(.c-hero *) {
        animation-name: m-rise-media;
        animation-range: entry 5% entry 60%;
      }

      /* Sydän sykähtää kerran, kun korostuslohko on tullut näkyviin */
      .c-callout__heart {
        display: inline-block;
        animation: m-pulse linear both;
        animation-timeline: view();
        animation-range: entry 60% cover 45%;
      }
    }
  }

  @keyframes m-rise {
    from { opacity: 0; translate: 0 var(--reveal-distance); }
    to { opacity: 1; translate: 0; }
  }

  @keyframes m-rise-media {
    from { opacity: 0; translate: 0 var(--reveal-distance); scale: 0.985; }
    to { opacity: 1; translate: 0; scale: 1; }
  }

  @keyframes m-settle {
    from { scale: 1.04; }
    to { scale: 1; }
  }

  @keyframes m-pulse {
    0%, 100% { scale: 1; }
    50% { scale: 1.22; }
  }

  @keyframes m-header-in {
    from { translate: 0 -100%; }
    to { translate: 0; }
  }
}

/* ═════════════════════════════ Apuluokat ═════════════════════════════ */

@layer scr.utilities {
  .u-strong { font-weight: var(--weight-bold); }

  .u-visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .u-text-center { text-align: center; }
  .u-text-narrow { max-inline-size: var(--width-text); }
  .u-self-center { align-self: center; }
}

/* ═════════════════════════════ Kolmannen osapuolen lomake ═════════════════════════════ */

/*
 * WS Form tuo omat kerroksettomat tyylinsä, joita kerrostettu sääntö ei voi ohittaa.
 * Siksi uutiskirjelomakkeen ulkoasu on tässä kerrosten ulkopuolella. Säännöt koskevat
 * vain footerin uutiskirjettä.
 */
.c-newsletter .c-newsletter__form:has(.wsf-form) {
  position: relative;
  grid-template-columns: 1fr;
  gap: 0;
}

.c-newsletter .c-newsletter__form .wsf-form .wsf-field-wrapper {
  margin-block-end: calc(var(--u) * 20);
  padding: 0;
}

.c-newsletter .c-newsletter__form .wsf-form input.wsf-field {
  inline-size: 100%;
  min-block-size: calc(var(--u) * 48);
  padding: calc(var(--u) * 8.5) calc(var(--u) * 10);
  border: 1px solid var(--color-beige-100);
  border-radius: var(--radius-s);
  background: transparent;
  box-shadow: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: calc(var(--u) * 16);
}

.c-newsletter .c-newsletter__form .wsf-form input.wsf-field::placeholder {
  color: var(--color-text);
  opacity: 0.8;
}

.c-newsletter .c-newsletter__form .wsf-form input.wsf-field:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.c-newsletter .c-newsletter__form .wsf-form button.wsf-button {
  min-inline-size: calc(var(--u) * 189);
  min-block-size: calc(var(--u) * 48);
  padding: calc(var(--u) * 12) calc(var(--u) * 24);
  border: 0 solid transparent;
  border-radius: calc(var(--u) * 50);
  background: var(--action-bg);
  color: var(--action-text);
  font-family: var(--action-font);
  font-size: calc(var(--u) * 16);
  font-weight: var(--action-weight);
  line-height: var(--leading-normal);
  text-transform: var(--action-transform);
  cursor: pointer;
}

.c-newsletter .c-newsletter__form .wsf-form button.wsf-button:hover {
  background: var(--action-bg-hover);
}

.c-newsletter .c-newsletter__form .wsf-form .wsf-field-wrapper:last-child {
  margin-block-end: 0;
}

/* Ehtoteksti painikkeen vieressä */
.c-newsletter .c-newsletter__form:has(.wsf-form) .c-newsletter__note {
  position: absolute;
  inset-block-end: calc(var(--u) * 7);
  inset-inline-start: calc(var(--u) * 213);
  margin: 0;
}

/*
 * WS Form sivun osioissa (yhteydenotto, tarjouspyyntö, rekrytointi). Samasta syystä kuin
 * uutiskirjeessä säännöt ovat kerrosten ulkopuolella.
 */
.l-section .wsf-form.wsf-form label.wsf-label {
  margin-block-end: calc(var(--u) * 4);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-s);
  font-weight: var(--weight-semibold);
}

.l-section .wsf-form.wsf-form :is(input, textarea, select).wsf-field:not([type="checkbox"], [type="radio"]) {
  inline-size: 100%;
  min-block-size: calc(var(--u) * 48);
  padding: calc(var(--u) * 10) calc(var(--u) * 12);
  border: 1px solid color-mix(in oklch, var(--color-text) 35%, transparent);
  border-radius: var(--radius-s);
  background: var(--color-white);
  box-shadow: none;
  color: var(--color-black);
  font-family: inherit;
  font-size: calc(var(--u) * 16);
}

.l-section .wsf-form.wsf-form :is(input, textarea, select).wsf-field:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.l-section .wsf-form.wsf-form button.wsf-button {
  min-block-size: calc(var(--u) * 48);
  padding: calc(var(--u) * 12) calc(var(--u) * 24);
  border: 0 solid transparent;
  border-radius: var(--radius-pill);
  background: var(--action-bg);
  color: var(--action-text);
  font-family: var(--action-font);
  font-size: calc(var(--u) * 16);
  font-weight: var(--action-weight);
  line-height: var(--leading-normal);
  text-transform: var(--action-transform);
  cursor: pointer;
}

.l-section .wsf-form.wsf-form button.wsf-button:hover {
  background: var(--action-bg-hover);
}

/* Suodattimen vaihtoehto on jo painikkeen näköinen etiketti. Bricks antaa sisemmälle tekstille
   painikeluokan kerrosten ulkopuolisella tyylillä, joten nollaus on myös kerrosten ulkopuolella. */
.c-filter .brx-option-text.bricks-button,
.c-filter .brx-option-text.bricks-button.xl {
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  /* Kohdistus näkyy etiketin reunalla, ei tekstin ympärillä */
  outline: 0;
}