:root {
    --Tumma-tausta: rgb(23, 14, 5);
    --Tekstiväritumma: rgb(60, 35, 3);
    --Tekstivärikulta: rgba(236, 188, 31, 0.956);
    --Tekstivärivaalea: rgb(223, 196, 164);
    --Kylma: rgb(243, 236, 227);
    --Vaimea: rgb(92, 72, 52); /* toissijainen teksti vaalealla pohjalla, kontrasti yli 4.5:1 */
    --font-heading: "Major Mono Display", monospace;
    --font-main: "Bricolage Grotesque", sans-serif;

    --space-s: 1rem;
    --space-m: 2rem;
    --space-l: 4rem;

    --radius-s: 12px;
    --radius-m: 20px;
    --radius-l: 30px;

    --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 18px 40px -12px rgba(23, 14, 5, 0.35);

    --text-s: 0.875rem;
    --text-m: 1rem;

    --sivun-leveys: 1400px;
    --sivureuna: 30px;
}


* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle, var(--Kylma), var(--Tekstivärivaalea)) no-repeat;
    background-color: var(--Tekstivärivaalea);
    background-size: cover;
    background-attachment: fixed;
    font-family: var(--font-main);
    color: var(--Tumma-tausta);
    line-height: 1.6;
}

img,
svg {
    max-width: 100%;
}


/* SAAVUTETTAVUUS: YHTEISET APULUOKAT */

/* Piilottaa tekstin näkyvistä, mutta ruudunlukija lukee sen */
.vain-ruudunlukijalle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Ohituslinkki näkyy vasta, kun siihen tabataan */
.ohituslinkki {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 100;

    padding: 0.8em 1.4em;

    font-weight: 600;
    color: var(--Tumma-tausta);
    background: var(--Tekstivärikulta);
    border-radius: 20em;
    text-decoration: none;

    translate: 0 -200%;
    transition: translate 0.2s ease;
}

.ohituslinkki:focus {
    translate: 0 0;
}

/* Yhtenäinen, selvästi näkyvä fokus kaikille linkeille ja napeille */
:focus-visible {
    outline: 3px solid var(--Tekstiväritumma);
    outline-offset: 3px;
}

header :focus-visible,
.aalto-kehys :focus-visible {
    outline-color: var(--Tekstivärikulta);
}

/* main saa fokuksen ohituslinkistä, mutta reunaviivaa ei tarvita */
main:focus {
    outline: none;
}


/* HEADER */

header {
    position: relative;

    display: flex;
    flex-direction: column;

    text-align: center;

    min-height: 78vh;

    padding: 2px 0 60px;

    background-color: var(--Tumma-tausta);

    background-image:
        linear-gradient(
            to right,
            var(--Tumma-tausta) 0%,
            transparent 30%,
            transparent 70%,
            var(--Tumma-tausta) 100%
        ),
        linear-gradient(
            to bottom,
            transparent 60%,
            color-mix(in srgb, var(--Tumma-tausta) 85%, transparent) 100%
        ),
        url("../Kuvat/headertausta-web.jpg");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;


/* HEADERIN KUPERA ALAREUNA */

    clip-path: ellipse(150% 100% at 50% 0%);
}

/* HEADERIN ALAREUNAN VARJO */

.header-container {
    filter: drop-shadow(0 0 36px rgba(43, 31, 31, 0.9));
}


/* OTSIKKO JA SLOGAN. NÄILLE SISÄÄNTULOANIMAATIO */

@keyframes sisään {
    from {
        opacity: 0;
        filter: blur(8px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

h1 {
    animation: sisään 2s ease-out;
    margin-top: clamp(30px, 8vh, 70px);
    margin-bottom: 0;
    padding: 0 20px;

    /* Pelkkä väri riittää. Aiempi background-clip: text -tekniikka
       piilotti otsikon Windowsin suurikontrastitilassa. */
    color: var(--Tekstivärikulta);

    font-family: var(--font-heading);
    font-size: clamp(3rem, 12vw, 10rem);
    font-weight: 400;
    line-height: 1;
    overflow-wrap: break-word;

    text-shadow: 0 0 10px rgba(250, 243, 243, 0.1);
}


#slogan {
    animation: sisään 3s ease-out 0.8s both;
    padding: 0 20px;

    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 3.5vw, 3rem);
    font-style: italic;
    line-height: 1.3;

    color: var(--Tekstivärivaalea);

    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
    margin-top: 0.4em;
}


/* NAVIGAATIO */

.header-nav {
    margin-top: auto;
    padding: 20px 30px 0;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}


/* Työpöydällä paneeli on "läpinäkyvä": navit asettuvat suoraan .header-navin sisään */
.nav-paneeli {
    display: contents;
}

.valikko-nappi {
    display: none;
}

.navi {
    list-style: none;

    display: flex;
    gap: 20px;

    padding: 0;
    margin: 0;
}


.navi a {
    color: var(--Tekstivärivaalea);

    font-family: var(--font-main);
    font-size: clamp(0.9rem, 2.5vw, 1rem);

    text-decoration: none;

    transition: scale 0.3s ease, text-shadow 0.7s ease, color 0.7s ease;
}


.navinappi {
    display: flex;
    align-items: center;
    gap: 0.3em;

    /* Riittävän iso kosketusalue sormelle */
    min-height: 44px;

    font-weight: 500;
    letter-spacing: 0.05em;

    padding: 0.7em 1.4em;

    border-radius: 20em;

    cursor: pointer;
}


/* Pieni ohut nuoli uuteen välilehteen aukeavalle linkille (CV) */
.ulkoinen-nuoli {
    width: 0.7em;
    height: 0.7em;
    flex-shrink: 0;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.navinappi:hover {
    color: var(--Kylma);
    text-shadow: 0 0 20px #f1f8f198;
    scale: 1.07;
}


.navinappi:active {
    box-shadow: 0 0.3em 1em -0.5em #a7911498;
}

/* Nykyinen sivu: kultainen väri JA alleviivaus, ettei tieto ole pelkän värin varassa */
.navi a[aria-current="page"] {
    color: var(--Tekstivärikulta);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}


/* SISÄLTÖ: YHTEISET OSIOT */

.osio {
    max-width: var(--sivun-leveys);
    margin: var(--space-l) auto;
    padding: 0 var(--sivureuna);
}

.osio-otsikko {
    margin: 0 0 var(--space-m);

    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 1;
    color: var(--Tumma-tausta);
}

/* Pieni kultainen viiva otsikon alla */
.osio-otsikko::after {
    content: "";
    display: block;
    width: 2.5em;
    height: 3px;
    margin-top: 0.35em;

    background: var(--Tekstivärikulta);
    border-radius: 3px;
}


/* PALVELUKORTIT */

.sektiot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-m);
}

.kortti {
    display: flex;
    flex-direction: column;

    background: rgba(243, 239, 233, 0.7);
    border-radius: var(--radius-m);
    padding: 20px;
    line-height: 1.6;
    box-shadow: var(--shadow-card);

    transition: translate 0.4s ease, box-shadow 0.4s ease;
}

.kortti:hover {
    translate: 0 -4px;
    box-shadow: var(--shadow-card-hover);
}

.kortti h3 {
    margin: 1.1rem 0 0.4rem;

    font-size: 1.5rem;
    font-weight: 650;
    line-height: 1.2;
}

.kortti p {
    margin: 0 0 0.8em;
}

.kortti .hinta {
    margin-top: auto;
    padding-top: 0.6em;
    border-top: 1px solid rgba(23, 14, 5, 0.15);
}

.kortti-kuva {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-m);
}

img.kortti-kuva {
    filter: sepia(0.25) saturate(0.8) contrast(1.1);
}


/* AUDIOREEL */

.video-osio {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--radius-m);
    background: #000;
    box-shadow: var(--shadow-card-hover);
}

.video-osio iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Leveällä näytöllä linkki on pieni lisä videon alla */
.video-linkki {
    margin: var(--space-s) 0 0;
    text-align: right;
}

.video-linkki a {
    font-weight: 600;
    color: var(--Tekstiväritumma);
    text-underline-offset: 4px;
}

.video-linkki a:hover {
    text-decoration-thickness: 2px;
}

/* Kapealla näytöllä upotus piiloon ja linkki isoksi */
@media (max-width: 768px) {
    .desktop-audioreel {
        display: none;
    }

    .video-linkki {
        margin: 0;
        text-align: left;
    }

    .video-linkki a {
        font-family: var(--font-heading);
        font-size: clamp(2.2rem, 11vw, 5rem);
        font-weight: 400;
        line-height: 1.1;
        color: inherit;
        text-decoration: none;
    }

    .video-linkki a:hover {
        text-decoration: underline;
    }
}


/* YHTEYDENOTTO */

#contact {
    max-width: 700px;
    margin: 80px auto;
    padding: 50px 40px;

    background: rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);

    text-align: left;
    color: var(--Tumma-tausta);
}

#contact > p {
    margin: 0 0 var(--space-m);
}

#contact form,
#contact fieldset {
    display: grid;
    gap: var(--space-s);
}

#contact fieldset {
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 0;
    border: none;
}

#contact legend {
    grid-column: 1 / -1;
    padding: 0;
    margin-bottom: 10px;
}

#contact label,
#contact legend {
    font-weight: 500;
}

.lomake-ohje {
    margin: 0;
    font-size: var(--text-s);
    color: var(--Vaimea);
}

#contact input,
#contact textarea {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 14px 16px;

    font: inherit;
    font-weight: 400;
    color: inherit;

    background: white;
    border: 1px solid rgba(23, 14, 5, 0.45); /* reuna erottuu taustasta (WCAG 1.4.11) */
    border-radius: var(--radius-s);

    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#contact textarea {
    resize: vertical;
}

#contact input:focus-visible,
#contact textarea:focus-visible {
    outline: 3px solid var(--Tekstiväritumma);
    outline-offset: 1px;
}

/* Virheellinen kenttä merkitään vasta, kun käyttäjä on koskenut siihen */
#contact input:user-invalid,
#contact textarea:user-invalid {
    border-color: rgb(166, 38, 20);
    box-shadow: inset 4px 0 0 rgb(166, 38, 20);
}

#contact button {
    justify-self: start;
    min-height: 44px;
    padding: 0.9em 2.4em;

    font: inherit;
    font-weight: 600;
    color: var(--Tekstivärikulta);

    background: var(--Tumma-tausta);
    border: none;
    border-radius: var(--radius-l);
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}

#contact button:hover {
    background: var(--Tekstivärikulta);
    color: var(--Tumma-tausta);
}

.lomake-tila {
    margin: 0;
    font-weight: 500;
}

.lomake-tila:empty {
    display: none;
}

#contact button:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Roskapostiansa piiloon kaikilta ihmisiltä */
.ansa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* FOOTER */

footer {
    text-align: center;
    font-size: var(--text-s);

    padding: 50px 20px;

    font-family: var(--font-main);
}

footer p {
    margin: 0.3em 0;
}

#maili {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(23, 14, 5, 0.4);
    text-underline-offset: 4px;
}

#maili:hover {
    text-decoration-color: currentColor;
}


/* CLAUDEN AVULLA TEHTY ANIMOITU ÄÄNIAALTO */

.aalto-kehys {
    position: relative;
}

.aalto-svg {
    background: var(--Tumma-tausta);
    cursor: crosshair;
    touch-action: pan-y;
}

/* Pysäytä/toista-nappi aallon oikeassa yläkulmassa */
.aalto-nappi {
    position: absolute;
    top: 10px;
    right: 10px;

    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;

    color: var(--Tekstivärikulta);
    background: rgba(23, 14, 5, 0.75);
    border: 1px solid rgba(236, 188, 31, 0.4);
    border-radius: 50%;
    cursor: pointer;

    transition: background 0.3s ease;
}

.aalto-nappi:hover {
    background: rgba(60, 35, 3, 0.95);
}

/* Ikoni piirretty CSS:llä: kaksi palkkia = pause */
.aalto-ikoni {
    width: 12px;
    height: 14px;
    border-left: 4px solid currentColor;
    border-right: 4px solid currentColor;
}

/* Pysäytettynä kolmio = play */
.aalto-nappi[aria-pressed="true"] .aalto-ikoni {
    width: 0;
    height: 0;
    margin-left: 4px;
    border-left: 12px solid currentColor;
    border-right: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.ruudukko {
    stroke: var(--Tekstivärikulta);
    stroke-opacity: 0.12;
    stroke-width: 1;
    fill: none;
}

.akseli {
    stroke: var(--Tekstivärikulta);
    stroke-opacity: 0.3;
    stroke-width: 1;
    fill: none;
}

/* pienet mittaviivat akselien päälle */

.asteikko {
    stroke: var(--Tekstivärikulta);
    stroke-opacity: 0.45;
    stroke-width: 8;
    stroke-dasharray: 1 9;
    fill: none;
}

.aalto {
    fill: none;
    stroke: var(--Tekstivärikulta);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aalto-hehku {
    stroke-width: 6;
    stroke-opacity: 0.9;
}

.aalto-viiva {
    stroke-width: 2;
}


/* WORK-SIVU */

.työt {
    list-style: none;
    margin: var(--space-l) auto;
    padding: 0 var(--sivureuna);
    max-width: var(--sivun-leveys);

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 14px;
}

.työ {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radius-s);
    background: var(--Tumma-tausta);
    box-shadow: var(--shadow-card);
}

.työ article {
    position: relative;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    padding: 14px;
    text-align: center;
}

.työ img {
    position: absolute;
    inset: 0;
    z-index: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

/* Ei positionia: muuten napin ::after venyisi vain otsikon kokoiseksi.
   Flex-lapsena z-index toimii ilmankin. */
.tyo-otsikko {
    z-index: 2;
    margin: 0;
    max-width: 100%;
    text-align: center;

    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Otsikko on nappi: klikkaus/napautus/Enter näyttää kuvauksen.
   ::after venyttää napin koko kortin kokoiseksi. */
.tyo-nappi {
    padding: 8px 16px;

    font: inherit;
    color: var(--Tekstivärivaalea);

    background: rgba(23, 14, 5, 0.78);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.6s ease;
}

.tyo-nappi::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: var(--radius-s);
}

.tyo-nappi:focus-visible {
    outline: none;
}

/* Fokusreunus koko kortin ympärille */
.tyo-nappi:focus-visible::after {
    outline: 3px solid var(--Tekstivärikulta);
    outline-offset: -3px;
}

.tyo-lisa {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-m) var(--space-m) calc(var(--space-l) + var(--space-m));

    color: var(--Tekstivärivaalea);
    line-height: 1.5;
    background: rgba(23, 14, 5, 0.85);

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.tyo-lisa p {
    margin: 0;
}

/* Avattu kortti (nappi painettu) */
.työ.auki .tyo-lisa {
    opacity: 1;
    visibility: visible;
}

.työ.auki img,
.työ:has(.tyo-nappi:focus-visible) img {
    transform: scale(1.08);
}

.työ.auki .tyo-nappi,
.tyo-nappi:focus-visible {
    color: var(--Tekstivärikulta);
}

/* Hover vain laitteilla, joissa on oikea hiiri. Puhelimessa napautus avaa kortin. */
@media (hover: hover) {
    .työ:hover img {
        transform: scale(1.08);
    }

    .työ:hover .tyo-lisa {
        opacity: 1;
        visibility: visible;
    }

    .työ:hover .tyo-nappi {
        color: var(--Tekstivärikulta);
    }
}


/* Kosketusnäytöt: ohje ja +/× -merkki kertovat, että korttia voi napauttaa.
   Hiirellä käytettäessä ne ovat piilossa, koska hover näyttää kuvauksen. */
.tyo-vihje,
.tyo-merkki {
    display: none;
}

@media (hover: none) {
    .tyo-vihje {
        display: block;
        max-width: var(--sivun-leveys);
        margin: var(--space-m) auto calc(-1 * var(--space-m));
        padding: 0 var(--sivureuna);

        font-size: var(--text-s);
        color: var(--Vaimea);
    }

    .tyo-nappi {
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
    }

    /* Plus-merkki kahdesta viivasta; auki-tilassa kääntyy ristiksi */
    .tyo-merkki {
        display: block;
        position: relative;
        width: 0.7em;
        height: 0.7em;
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }

    .tyo-merkki::before,
    .tyo-merkki::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        margin-top: -1px;
        background: currentColor;
        border-radius: 2px;
    }

    .tyo-merkki::after {
        transform: rotate(90deg);
    }

    .työ.auki .tyo-merkki {
        transform: rotate(45deg);
    }
}


/* SCROLL-ANIMAATIO. JAVASCRIPT "LUO" LUOKAT */

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease, translate 0.4s ease, box-shadow 0.4s ease;
}

.fade-in.nakyvissa {
    opacity: 1;
    transform: none;
}


/* VÄHENNETTY LIIKE */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

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

    .kortti:hover {
        translate: none;
    }

    .työ img {
        transform: none !important;
    }
}


/* WINDOWSIN SUURIKONTRASTITILA */

@media (forced-colors: active) {
    .kortti,
    #contact,
    .tyo-nappi {
        border: 1px solid CanvasText;
    }

    .osio-otsikko::after {
        background: CanvasText;
    }

    .aalto {
        stroke: CanvasText;
    }
}


/* SUUREMMAT NÄYTÖT */

@media (min-width: 801px) {

    header {
        background-image: none;
        text-align: start;
    }


/* Headerin taustakuva oikealla, josta se feidaantuu taustaväriin */

    header::before {
        content: "";

        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;

        width: 65%;

        background-image:
            linear-gradient(to right, var(--Tumma-tausta) 0%, transparent 40%),
            linear-gradient(
                to bottom,
                transparent 60%,
                color-mix(in srgb, var(--Tumma-tausta) 85%, transparent) 100%
            ),
            url("../Kuvat/headertausta-web.jpg");

        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    h1,
    #slogan,
    .header-nav {
        position: relative;
        z-index: 1;
    }

    h1 {
        margin-top: 160px;
        padding: 0 0 0 60px;
        max-width: 55%;

        /* Aina kahden rivin korkeus, jotta header on joka sivulla yhtä korkea
           (Home-otsikko on kaksirivinen, Work yksirivinen) */
        min-height: 2em;

        font-size: clamp(3rem, 8vw, 9rem);
    }

    /* Slogan rivittyy sivusta riippuen eri määrälle rivejä, joten varataan
       aina neljän rivin tila, ettei headerin korkeus vaihtele sivujen välillä */
    #slogan {
        padding: 0 0 0 60px;
        max-width: 45%;
        min-height: calc(4 * 1.3em);
    }
}

/* Kapealla työpöydällä Home-slogan rivittyy viidelle riville */
@media (min-width: 801px) and (max-width: 1000px) {
    #slogan {
        min-height: calc(5 * 1.3em);
    }
}


/* PIENEMMÄT NÄYTÖT */

@media (max-width: 800px) {

    /* korkeampi header, jotta otsikolle jää tilaa laskeutua alas */

    header {
        min-height: 85svh;
        padding-bottom: 40px;
    }

    /* navigaatio ylös oikeaan reunaan */
    .header-nav {
        order: -1;
        position: relative;
        z-index: 2;
        margin-top: 0;
        justify-content: flex-end;
        align-items: flex-start;

        padding: 14px 15px 40px;
        text-align: left;
    }

    /* otsikko ja slogan alas */
    h1 {
        margin-top: auto;
    }


    /* HAMPURILAISVALIKKO */

    .valikko-nappi {
        display: grid;
        place-items: center;

        width: 48px;
        height: 48px;
        padding: 0;

        color: var(--Tekstivärivaalea);
        background: color-mix(in srgb, var(--Tumma-tausta) 60%, transparent);
        border: 1px solid color-mix(in srgb, var(--Tekstivärivaalea) 35%, transparent);
        border-radius: 50%;

        cursor: pointer;
        transition: color 0.3s ease, border-color 0.3s ease;
    }

    .valikko-nappi[hidden] {
        display: none;
    }

    .valikko-nappi[aria-expanded="true"] {
        color: var(--Tekstivärikulta);
        border-color: var(--Tekstivärikulta);
    }

    /* Kolme viivaa: keskiviiva + ::before ja ::after. Auki-tilassa ristiksi. */
    .valikko-ikoni,
    .valikko-ikoni::before,
    .valikko-ikoni::after {
        display: block;
        width: 22px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .valikko-ikoni {
        position: relative;
    }

    .valikko-ikoni::before,
    .valikko-ikoni::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .valikko-ikoni::before { transform: translateY(-7px); }
    .valikko-ikoni::after  { transform: translateY(7px); }

    .valikko-nappi[aria-expanded="true"] .valikko-ikoni {
        background-color: transparent;
    }

    .valikko-nappi[aria-expanded="true"] .valikko-ikoni::before {
        transform: rotate(45deg);
    }

    .valikko-nappi[aria-expanded="true"] .valikko-ikoni::after {
        transform: rotate(-45deg);
    }


    /* Paneeli: ilman JavaScriptiä aina näkyvissä, muuten avautuu napista */
    .nav-paneeli {
        display: flex;
        flex-direction: column;
        min-width: 210px;
        padding: 8px;

        background: color-mix(in srgb, var(--Tumma-tausta) 92%, transparent);
        border: 1px solid color-mix(in srgb, var(--Tekstivärikulta) 30%, transparent);
        border-radius: var(--radius-m);
        box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
    }

    .on-valikko .nav-paneeli {
        position: absolute;
        top: 72px;
        right: 15px;

        visibility: hidden;
        opacity: 0;
        translate: 0 -8px;
        transition: opacity 0.25s ease, translate 0.25s ease, visibility 0s linear 0.25s;
    }

    .on-valikko.auki .nav-paneeli {
        visibility: visible;
        opacity: 1;
        translate: 0 0;
        transition: opacity 0.25s ease, translate 0.25s ease, visibility 0s;
    }

    .navi {
        flex-direction: column;
        gap: 0;
    }

    /* Ohut viiva sivunavigaation ja somen väliin */
    #navigointi-right {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid color-mix(in srgb, var(--Tekstivärivaalea) 20%, transparent);
    }

    .navinappi {
        font-size: 1rem;
        padding: 0.6em 1em;
    }

    .navinappi:hover {
        scale: none;
    }
}


/* PIENIN NÄYTTÖ */

@media (max-width: 600px) {

    :root {
        --sivureuna: 15px;
    }

    header {
        min-height: 92svh;
        text-align: left;
    }

    /* otsikko vasemmalle, alas */
    h1 {
        margin-top: auto;
        padding: 0 20px;
        font-size: clamp(3.5rem, 18vw, 6rem);
    }

    /* slogan oikeaan laitaan */
    #slogan {
        max-width: 11em;
        margin-left: auto;
        padding: 0 20px;
        font-size: 1.3rem;
        text-align: right;
    }

    /* muu sisältö */
    .sektiot {
        gap: 20px;
    }

    footer {
        padding: 40px 20px;
    }

    #contact {
        margin: 50px 15px;
        padding: 35px 22px;
    }

    #contact fieldset {
        grid-template-columns: 1fr;
    }

    #contact button {
        justify-self: stretch;
    }
}