@import url("figtree.css");

/* Chillax: ITF Free Font License 2.0. Failid on Fontshare'i originaalid,
   alamhulka ega formaadimuutust litsents ei luba. */
@font-face { font-family: "Chillax"; src: url("fonts/chillax-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Chillax"; src: url("fonts/chillax-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Chillax"; src: url("fonts/chillax-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* =========================================================================
   Näidis 2: soe valgus. Vt DESIGN.md.
   Skaala on siin ja ainult siin. Allpool kasutatakse ainult muutujaid.
   ========================================================================= */

:root {
    /* värvid */
    --valge:       #fffaf5;
    --pind:        #ffffff;
    --aprikoos:    #f7ddc9;
    --roos:        #f1d3c9;
    --salvei-hele: #e5ece3;
    --salvei:      #4d6b57;
    --salvei-tume: #3e5847;
    --tume:        #3b302c;
    --tume-2:      #62554f;
    --joon:        #eaded6;
    --niit:        #c9805f;

    --aprikoos-hele: #fbe7d8;
    --salvei-helgim: #eef3ec;

    /* reavahed: suur kiri tihedamalt, väike hõredamalt */
    --rv-tihe:    1.08;
    --rv-avaldus: 1.18;
    --rv-suur:    1.38;
    --rv-lead:    1.55;
    --rv-tekst:   1.62;

    /* kiri */
    --display: "Chillax", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
    --tekst:   "Figtree", ui-sans-serif, system-ui, sans-serif;

    --k-xs:   .84rem;
    --k-s:    .94rem;
    --k-m:    1.0625rem;
    --k-l:    clamp(1.1rem, 1rem + .4vw, 1.3rem);
    --k-xl:   clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
    --k-mark: clamp(1.45rem, 1.2rem + .8vw, 1.85rem);
    --k-2xl:  clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem);
    --k-3xl:  clamp(1.5rem, 1rem + 1.6vw, 2.3rem);
    --k-hero: clamp(2.4rem, 1.2rem + 3.4vw, 4.2rem);
    --k-leht: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem);

    /* vahed */
    --v-1: .25rem;
    --v-2: .5rem;
    --v-3: .75rem;
    --v-4: 1rem;
    --v-5: 1.5rem;
    --v-6: 2rem;
    --v-7: 3rem;
    --v-8: 4.5rem;
    --v-9: clamp(4.5rem, 2.5rem + 7vw, 8.5rem);
    --gut: clamp(1.25rem, .6rem + 2.6vw, 4rem);
    --laius: 1200px;
    --rida-foto: 11rem;   /* loetelu foto, Tarvo 22.09 pool varasemast, 25.09 veel väiksem */

    /* vormid: kõik on ümar */
    --r-s:    16px;
    --r-m:    32px;
    --r-pill: 999px;
    --kivi-a: 58% 42% 50% 50% / 46% 50% 50% 54%;
    --kivi-b: 46% 54% 42% 58% / 56% 44% 56% 44%;
    --kivi-c: 52% 48% 58% 42% / 44% 56% 44% 56%;
    --lomp:   64px 56px 72px 48px / 56px 64px 48px 72px;

    /* varjud, soojaks toonitud */
    --vari-1: 0 1px 2px rgba(59, 48, 44, .05);
    --vari-2: 0 18px 40px -22px rgba(128, 82, 60, .32);
    --vari-3: 0 30px 70px -34px rgba(128, 82, 60, .42);

    --pehme: cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------- alus */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html { scrollbar-color: var(--aprikoos) var(--valge); }

body {
    margin: 0;
    background: var(--valge);
    color: var(--tume);
    font-family: var(--tekst);
    font-size: var(--k-m);
    line-height: var(--rv-tekst);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, li, dd, blockquote, figcaption { overflow-wrap: anywhere; }
a { color: inherit; }
p { margin: 0; }

h1, h2, h3 {
    margin: 0;
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: -0.018em;
    line-height: var(--rv-tihe);
    text-wrap: balance;
}

::selection { background: var(--aprikoos); color: var(--tume); }

:focus-visible {
    outline: 2px solid var(--salvei);
    outline-offset: 3px;
    border-radius: var(--r-s);
}

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 90;
    padding: var(--v-3) var(--v-5);
    background: var(--salvei); color: var(--pind);
    border-radius: 0 0 var(--r-s) 0;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: var(--laius); margin-inline: auto; padding-inline: var(--gut); }

/* --------------------------------------------------------------- nupud */

.nupp {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 54px;
    padding: var(--v-4) var(--v-6);
    border: 1.5px solid transparent;
    border-radius: var(--r-pill);
    font-family: var(--display);
    font-size: var(--k-m);
    font-weight: 500;
    letter-spacing: .005em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .3s var(--pehme), border-color .3s var(--pehme),
                transform .3s var(--pehme), box-shadow .3s var(--pehme);
}
.nupp:hover { transform: translateY(-2px); }
.nupp:active { transform: translateY(0); }

.nupp--pea { background: var(--salvei); color: var(--pind); box-shadow: var(--vari-2); }
.nupp--pea:hover { background: var(--salvei-tume); }

.nupp--pehme { background: var(--pind); color: var(--salvei); border-color: color-mix(in srgb, var(--salvei) 45%, transparent); }
.nupp--pehme:hover { border-color: var(--salvei); }

.nupp--vaike { min-height: 46px; padding: var(--v-3) var(--v-5); font-size: var(--k-s); }

.nupud { display: flex; flex-wrap: wrap; gap: var(--v-3); }

.h2 { font-size: var(--k-2xl); }
.lopp__nupud { margin-top: var(--v-6); }

/* ---------------------------------------------------------------- päis */

.pais { position: sticky; top: 0; z-index: 50; }

/* Päise taust on eraldi kihis, mis ulatub päisest allapoole ja hääbub seal.
   Nii ei lõpe hägustatud riba terava joonega, vaid sulab lehte. */
.pais::after {
    content: "";
    position: absolute; inset: 0 0 -28px 0; z-index: -1;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--valge) 92%, transparent) 55%,
        color-mix(in srgb, var(--valge) 70%, transparent) 78%,
        transparent 100%);
    backdrop-filter: saturate(150%) blur(16px);
    -webkit-backdrop-filter: saturate(150%) blur(16px);
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0,0,0,.55) 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 58%, rgba(0,0,0,.55) 80%, transparent 100%);
    pointer-events: none;
}
@supports not (backdrop-filter: blur(1px)) { .pais::after { background: var(--valge); } }

.pais__sees {
    display: flex; align-items: center; gap: var(--v-5);
    min-height: 78px;
    max-width: var(--laius); margin-inline: auto; padding-inline: var(--gut);
}

.mark {
    display: flex;
    flex-direction: column;
    margin-right: auto;
    text-decoration: none;
    white-space: nowrap;
}
.mark__nimi {
    font-family: var(--display);
    font-size: var(--k-mark);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: var(--rv-tihe);
}
.mark__amet {
    margin-top: calc(var(--v-1) * -1);
    font-size: var(--k-xs);
    line-height: var(--rv-tihe);
    color: var(--tume-2);
}

/* Menüü. Alamlehtedega punktil on link ja eraldi nupp, mis alammenüü avab. */
.menu__list { display: flex; align-items: center; gap: var(--v-5); list-style: none; margin: 0; padding: 0; }
.menu__item { position: relative; }
.menu__link {
    display: inline-flex; align-items: center; gap: var(--v-1);
    min-height: 44px; padding: 0;
    background: none; border: 0;
    font-family: var(--tekst); font-size: var(--k-s); color: var(--tume-2);
    cursor: pointer; transition: color .2s var(--pehme);
}
a.menu__link { text-decoration: none; }
.menu__link:hover { color: var(--tume); }
.menu__link[aria-current="page"], .menu__link.menu__link--osa {
    color: var(--tume);
    text-decoration: underline;
    text-decoration-color: var(--salvei);
    text-decoration-thickness: 2px;
    text-underline-offset: .5em;
}
.menu__rida { display: inline-flex; align-items: center; }
.menu__ava {
    display: inline-grid; place-items: center;
    width: 28px; min-height: 44px; padding: 0;
    background: none; border: 0; color: var(--tume-2); cursor: pointer;
}
.menu__ava svg { width: .6em; opacity: .55; transition: transform .25s var(--pehme); }

.menu__sub {
    position: absolute; top: 100%; left: calc(var(--v-4) * -1);
    min-width: 270px; list-style: none; margin: 0; padding: var(--v-2);
    background: var(--pind); border-radius: var(--r-m); box-shadow: var(--vari-3);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .25s var(--pehme), transform .25s var(--pehme), visibility .25s;
}
.menu__item--sub:hover > .menu__sub,
.menu__item--sub:focus-within > .menu__sub,
.menu__item--sub.lahti > .menu__sub { opacity: 1; visibility: visible; transform: none; }
.menu__item--sub:hover .menu__ava svg,
.menu__item--sub.lahti .menu__ava svg { transform: rotate(180deg); }
.menu__sub .menu__link {
    width: 100%; justify-content: flex-start;
    padding: var(--v-2) var(--v-4); border-radius: var(--r-s);
    color: var(--tume); text-align: left;
}
.menu__sub .menu__link:hover { background: var(--valge); }
.menu__sub .menu__link[aria-current="page"] { text-decoration: none; background: var(--salvei-helgim); color: var(--salvei-tume); }

.burger {
    display: none; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-right: calc(var(--v-2) * -1);
    background: none; border: 0; color: var(--tume); cursor: pointer;
}
.burger span { position: relative; display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.burger span::before, .burger span::after {
    content: ""; position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform .3s var(--pehme), top .25s var(--pehme);
}
.burger span::before { top: -7px; }
.burger span::after  { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
    .burger { display: inline-flex; }

    /* Päisel on backdrop-filter, seega ta on fixed-elementide kinnistusplokk.
       Paneelile tuleb anda selge kõrgus, alumist inset'i kasutada ei saa. */
    .menu {
        position: fixed; top: 78px; left: 0; right: 0; height: calc(100dvh - 78px);
        padding: var(--v-4) var(--gut) var(--v-7);
        background: var(--valge); overflow-y: auto;
        opacity: 0; visibility: hidden; transform: translateY(-8px);
        transition: opacity .3s var(--pehme), transform .3s var(--pehme), visibility .3s;
    }
    .menu.lahti { opacity: 1; visibility: visible; transform: none; }
    .menu__list { display: block; }
    .menu__item { border-bottom: 1px solid var(--joon); }
    .menu__item > .menu__link,
    .menu__rida > .menu__link { width: 100%; min-height: 58px; font-size: var(--k-l); color: var(--tume); }
    .menu__rida { display: flex; width: 100%; }
    .menu__ava { width: 48px; min-height: 58px; flex: none; }
    .menu__ava svg { width: 12px; }
    .menu__sub {
        position: static; display: none; min-width: 0;
        margin: 0 0 var(--v-3); padding: 0 0 var(--v-2) var(--v-4);
        background: none; box-shadow: none; border-radius: 0;
        opacity: 1; visibility: visible; transform: none;
    }
    .menu__item--sub:hover > .menu__sub { display: none; }
    .menu__item--sub.lahti > .menu__sub { display: block; }
    .menu__sub .menu__item { border: 0; }
    .menu__sub .menu__link { min-height: 48px; font-size: var(--k-m); color: var(--tume-2); }
    .menu__kontakt { display: grid; gap: var(--v-2); margin-top: var(--v-6); font-size: var(--k-m); }
    .menu__kontakt a { max-width: 100%; overflow-wrap: anywhere; color: var(--salvei); font-weight: 500; }
}
@media (min-width: 1081px) { .menu__kontakt { display: none; } }
/* Telefonis mahub päisesse logo koos ametiga ja menüü. Sama nupp on kohe hero all
   ning kontaktid on menüüs, seega päise nupp jääb ära. */
@media (max-width: 520px) { .pais__nupp { display: none; } }
@media (max-width: 359px) {
    .nupp { white-space: normal; max-width: 100%; text-align: center; }
    .mark { white-space: normal; }
    .mark__nimi { font-size: var(--k-l); }
}

/* ---------------------------------------------------------------- niit

   Signatuur. Üks peenike soe joon voolab portreest kutseni ja puudutab iga
   lõiku. Janne sõnum on ühendus, niit on see ühendus pildina.            */

main { position: relative; }

.niit {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1; overflow: visible;
}
.niit__tee {
    fill: none;
    stroke: url(#niit-varv);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}
.niit__solm { fill: var(--salvei); }

@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .niit__tee, .niit__solm {
            animation: niit-joonista linear both;
            animation-timeline: scroll(root block);
        }
        .niit__solm { animation-name: niit-solm; }
    }
}
@keyframes niit-joonista { from { stroke-dashoffset: .86; } to { stroke-dashoffset: 0; } }

/* Kõik sisu istub niidi kohal, lombid ja taustad selle all. */
.kiht { position: relative; z-index: 2; }

/* ---------------------------------------------------------------- hero */

.hero {
    position: relative;
    padding-block: var(--v-7) var(--v-9);
    background:
        radial-gradient(42% 52% at 80% 34%, var(--aprikoos) 0%, transparent 70%),
        radial-gradient(30% 34% at 10% 62%, var(--salvei-hele) 0%, transparent 70%);
}

.hero__ruut {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    align-items: center;
    gap: var(--v-8);
}

/* Kõige pikem rida "kus omal jõul edasi liikuda" on 13 kirjakõrgust lai.
   Suurus tuleb veeru laiusest, siis mahub kolm rida igal laiusel ära. */
.hero__tekst { container-type: inline-size; }
.hero__pealkiri { font-size: clamp(2.2rem, 7.3cqi, var(--k-hero)); }

.hero__lead {
    margin-top: var(--v-5);
    max-width: 40ch;
    font-size: var(--k-l);
    line-height: var(--rv-lead);
    color: var(--tume-2);
}

.hero__lead--jargmine { margin-top: calc(1em * var(--rv-lead)); }
.hero__nupud { margin-top: var(--v-6); }

.portree { margin: 0; }
.portree__pilt {
    width: 100%;
    aspect-ratio: 5 / 6;
    object-fit: cover;
    border-radius: var(--kivi-a);
    box-shadow: var(--vari-3);
}
.portree__allkiri {
    max-width: 62%;
    margin-top: var(--v-4);
    padding-left: var(--v-4);
    font-size: var(--k-s);
    color: var(--tume-2);
}
.portree__tsitaat { font-family: var(--display); font-size: var(--k-l); line-height: var(--rv-suur); color: var(--tume); }
.portree__nimi { margin-top: var(--v-2); }
.portree__nimi strong { font-family: var(--display); font-weight: 500; color: var(--tume); }

/* Tarvo 23.09: hero portree väiksem (72% veerust). Allkiri on pildiga täpselt
   kohakuti ja sama lai. Telefonis jääb pilt endiseks. NB: peab olema pärast
   baasreegleid, muidu võidab hilisem .portree__pilt { width: 100% }. */
@media (min-width: 881px) {
    .portree__pilt { width: 72%; margin-inline: auto; }
    .portree__allkiri { width: 72%; max-width: none; margin-inline: auto; padding-left: 0; }
}

.rv { display: none; }
@media (min-width: 900px) { .rv { display: inline; } }

@media (max-width: 880px) {
    .hero { padding-top: var(--v-5); }
    .hero__ruut { grid-template-columns: minmax(0, 1fr); gap: var(--v-7); }
    .portree { max-width: 380px; }
}

/* ------------------------------------------------------------ avaldus */

.lomp {
    position: relative;
    border-radius: var(--lomp);
    padding: var(--v-8) var(--v-6);
}

.avaldus {
    z-index: 2;
    margin-top: calc(var(--v-8) * -1);
    background:
        radial-gradient(70% 90% at 30% 20%, var(--aprikoos-hele) 0%, transparent 70%),
        var(--aprikoos);
    text-align: center;
}

.avaldus p {
    max-width: 48ch;
    margin-inline: auto;
    font-family: var(--display);
    font-size: var(--k-3xl);
    font-weight: 400;
    line-height: var(--rv-avaldus);
    letter-spacing: -0.012em;
}

@media (max-width: 880px) {
    .avaldus { margin-top: var(--v-6); }
    .avaldus p { line-height: var(--rv-suur); }
}

/* ----------------------------------------------------------- abi */

.plokk { padding-block: var(--v-9); }

.abi {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: var(--v-8);
    align-items: start;
}

.abi__foto { margin: 0; }
.abi__foto img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--kivi-b);
    box-shadow: var(--vari-2);
}

.abi__sissejuhatus { margin-top: var(--v-4); max-width: 44ch; color: var(--tume-2); font-size: var(--k-l); line-height: var(--rv-lead); }

.teenused { list-style: none; margin: var(--v-6) 0 0; padding: 0; }

.teenus {
    position: relative;
    padding: var(--v-5) var(--v-5);
    margin-inline: calc(var(--v-5) * -1);
    border-radius: var(--r-m);
    transition: background-color .35s var(--pehme);
}
.teenus + .teenus { margin-top: var(--v-2); }
.teenus:hover { background: var(--pind); box-shadow: var(--vari-1); }

.teenus__nimi { font-size: var(--k-xl); }
.abi__kinnitus { margin-top: var(--v-6); max-width: 46ch; font-size: var(--k-l); color: var(--tume); }
.abi__kinnitus a { color: var(--salvei); font-weight: 500; text-underline-offset: .2em; }
.teenus__tekst { margin-top: var(--v-2); max-width: 52ch; color: var(--tume-2); }

@media (max-width: 860px) {
    .abi { grid-template-columns: minmax(0, 1fr); gap: var(--v-6); }
    .abi__foto { max-width: 360px; }
    .teenus { margin-inline: calc(var(--v-3) * -1); padding-inline: var(--v-3); }
}

/* --------------------------------------------------------- minust */

.minust {
    background:
        radial-gradient(60% 80% at 90% 10%, var(--salvei-helgim) 0%, transparent 70%),
        var(--salvei-hele);
    border-radius: var(--lomp);
    padding: var(--v-8) var(--v-7);
}

.minust__ruut {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    gap: var(--v-8);
    align-items: center;
}

.minust__tekst { margin-top: var(--v-4); max-width: 56ch; font-size: var(--k-l); line-height: var(--rv-tekst); color: var(--tume-2); }

.faktid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v-5) var(--v-6);
    margin: var(--v-6) 0 0;
}
.faktid dt { font-size: var(--k-xs); color: var(--tume-2); }
.faktid dd { margin: var(--v-1) 0 0; font-family: var(--display); font-size: var(--k-l); line-height: var(--rv-suur); }
@media (max-width: 480px) { .faktid { grid-template-columns: minmax(0, 1fr); } }

.minust__foto { margin: 0; }
.minust__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--kivi-c); }

@media (max-width: 860px) {
    .minust { padding: var(--v-7) var(--v-5); }
    .minust__ruut { grid-template-columns: minmax(0, 1fr); gap: var(--v-6); }
    .minust__foto { max-width: 300px; }
}

/* ------------------------------------------------------- tagasiside */

.pais-plokk { max-width: 30ch; }

.mullid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--v-5);
    margin-top: var(--v-7);
    align-items: start;
}
.mullid__veerg { display: grid; gap: var(--v-5); }
.mullid__veerg:last-child { margin-top: var(--v-8); }

.mull {
    margin: 0;
    padding: var(--v-6);
    background: var(--roos);
    border-radius: var(--r-m) var(--r-m) var(--r-m) var(--r-s);
    font-size: var(--k-m);
    line-height: var(--rv-tekst);
}
.mull--hele { background: var(--pind); box-shadow: var(--vari-2); border-radius: var(--r-m) var(--r-m) var(--r-s) var(--r-m); }
.mull--suur { font-size: var(--k-l); line-height: var(--rv-lead); }

@media (max-width: 760px) {
    .mullid { grid-template-columns: minmax(0, 1fr); }
    .mullid__veerg:last-child { margin-top: 0; }
}

/* ------------------------------------------------------------ lõpp */

.lopp {
    background:
        radial-gradient(60% 90% at 20% 90%, var(--roos) 0%, transparent 70%),
        radial-gradient(70% 80% at 80% 10%, var(--aprikoos-hele) 0%, transparent 70%),
        var(--aprikoos);
    border-radius: var(--lomp);
    padding: var(--v-8) var(--v-7);
}

.lopp__ruut {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: var(--v-8);
    align-items: center;
}

.lopp__tekst { margin-top: var(--v-4); font-size: var(--k-l); color: var(--tume-2); max-width: 36ch; }

.kontakt { list-style: none; margin: var(--v-6) 0 0; padding: 0; display: grid; gap: var(--v-1); font-size: var(--k-s); color: var(--tume-2); }
.kontakt a { display: inline-block; max-width: 100%; padding-block: var(--v-1); overflow-wrap: anywhere; color: var(--salvei); font-weight: 500; text-underline-offset: .2em; }

.lopp__foto { margin: 0; }
.lopp__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--kivi-a); box-shadow: var(--vari-3); }

@media (max-width: 860px) {
    .lopp { padding: var(--v-7) var(--v-5); }
    .lopp__ruut { grid-template-columns: minmax(0, 1fr); }
    .lopp__foto { max-width: 300px; }
}

.lopu-vahe { height: var(--v-7); }

/* ============================================================ sisulehed
   Vt DESIGN.md, peatükk "Sisulehed". Uusi värve ega vahesamme ei ole,
   ainult üks pealkirjaaste --k-leht.                                     */

.minust__edasi { margin-top: var(--v-5); }
.minust__edasi a { display: inline-block; padding-block: var(--v-2); color: var(--salvei); font-weight: 500; text-underline-offset: .2em; }

/* Avalehe teenused viivad oma lehele. Link katab kogu rea. */
.teenus__nimi a { text-decoration: none; }
.teenus__nimi a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-m); }
.teenus__nimi a:focus-visible { outline: none; }
.teenus__nimi a:focus-visible::after { outline: 2px solid var(--salvei); outline-offset: 2px; }
.teenus:hover .teenus__nimi { color: var(--salvei-tume); }

.peidus {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------ lehe päis */

.lehe-pais {
    position: relative;
    padding-block: var(--v-7) var(--v-8);
}
/* Kuma on eraldi kihis ja hääbub üla- ja alaservas, muidu jääks päise alla
   ja ploki lõppu kõva serv. Pikslites, et telefonis ei veniks triibuks. */
.lehe-pais::before {
    content: "";
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(560px 380px at 86% 42%, var(--aprikoos) 0%, transparent 70%),
        radial-gradient(420px 300px at 4% 76%, var(--salvei-hele) 0%, transparent 70%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--v-8), #000 calc(100% - var(--v-8)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--v-8), #000 calc(100% - var(--v-8)), transparent 100%);
}

.lehe-pais__ruut--foto {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: var(--v-8);
    align-items: center;
}
/* Tarvo 24.09: pikad pealkirjad kasutavad kogu laiust, juhatus jääb loetavaks. */
.lehe-pais__tekst--ainult { max-width: none; }
.lehe-pais__tekst--ainult .lehe-pais__lead { max-width: none; }
/* Koondlehtedel on juhatus üks lause ja mahub laual ühele reale (Tarvo 22.09). */
.lehe-pais__tekst--lai, .lehe-pais__tekst--lai .lehe-pais__lead { max-width: none; }
/* Tänu- ja 404 leht: lühike sõnum keskel. */
.lehe-pais__tekst--kesk { margin-inline: auto; text-align: center; }
.lehe-pais__tekst--kesk .lehe-pais__lead { margin-inline: auto; }
.lehe-pais__tekst--kesk .vaata-ka__read { justify-content: center; }
.lehe-pais__tekst--kesk .lehe-pais__lead + .lehe-pais__lead { margin-top: var(--v-3); }

.lehe-pais__pealkiri { font-size: var(--k-leht); }
.lehe-pais__lead {
    margin-top: var(--v-5);
    max-width: 46ch;
    font-size: var(--k-l);
    line-height: var(--rv-lead);
    color: var(--tume-2);
}
.lehe-pais__aeg { margin-bottom: var(--v-3); font-size: var(--k-s); color: var(--tume-2); }

.tagasi {
    display: inline-flex; align-items: center; gap: var(--v-2);
    min-height: 44px; margin-bottom: var(--v-2);
    color: var(--salvei); font-size: var(--k-s); font-weight: 500;
    text-decoration: none;
    transition: color .2s var(--pehme), gap .3s var(--pehme);
}
.tagasi svg { width: 1em; }
.tagasi:hover { color: var(--salvei-tume); gap: var(--v-3); }

.hinnakivi {
    display: flex; width: fit-content;
    margin-top: var(--v-5);
    padding: var(--v-2) var(--v-5);
    background: var(--pind);
    border-radius: var(--r-pill);
    box-shadow: var(--vari-1);
    font-family: var(--display); font-size: var(--k-m); font-weight: 500;
}
.hinnakivi--vaike { margin-top: var(--v-4); padding: var(--v-1) var(--v-4); font-size: var(--k-s); }

.lehe-pais__foto { margin: 0; }
.lehe-pais__pilt {
    /* Tarvo 25.09: päisefotod veidi väiksemad. */
    width: 82%;
    margin-inline: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: var(--kivi-b);
    box-shadow: var(--vari-3);
}
/* Tarvo 25.09: Minust portree veidi väiksem. */
.lehe-pais__pilt--portree { aspect-ratio: 1; border-radius: var(--kivi-a); }
.lehe-pais__pilt--raam { aspect-ratio: 16 / 9; border-radius: var(--r-m); }

@media (max-width: 860px) {
    .lehe-pais { padding-top: var(--v-5); }
    .lehe-pais::before {
        background:
            radial-gradient(300px 240px at 100% 30%, var(--aprikoos) 0%, transparent 70%),
            radial-gradient(260px 200px at 0% 85%, var(--salvei-hele) 0%, transparent 70%);
    }
    .lehe-pais__ruut--foto { grid-template-columns: minmax(0, 1fr); gap: var(--v-6); }
    .lehe-pais__foto { max-width: 460px; }
}

/* ------------------------------------------------------ voolav loetelu
   Read vaheldumisi foto vasakul ja paremal. Ridade vahel on tühi riba,
   kus niit ühelt fotolt teisele liigub.                                  */

.plokk--loetelu { padding-block: var(--v-4) var(--v-8); }
.loetelu { list-style: none; margin: 0; padding: 0; }

.rida {
    position: relative;
    display: grid;
    grid-template-columns: var(--rida-foto) minmax(0, 1fr);
    gap: var(--v-7);
    align-items: center;
}
.rida + .rida { margin-top: var(--v-8); }
.rida--vastu { grid-template-columns: minmax(0, 1fr) var(--rida-foto); }
.rida--vastu .rida__foto { order: 2; }

.rida__foto { margin: 0; }
.rida__foto img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--kivi-a);
    box-shadow: var(--vari-2);
}
.rida:nth-child(3n+2) .rida__foto img { border-radius: var(--kivi-b); }
.rida:nth-child(3n) .rida__foto img { border-radius: var(--kivi-c); }
.rida .rida__foto.rida__foto--raam img { aspect-ratio: 16 / 9; border-radius: var(--r-m); }

.rida__aeg { margin-bottom: var(--v-2); font-size: var(--k-s); color: var(--tume-2); }
.rida__pealkiri { font-size: var(--k-xl); transition: color .25s var(--pehme); }
.rida__pealkiri a { text-decoration: none; }
.rida__pealkiri a::after { content: ""; position: absolute; inset: calc(var(--v-4) * -1); border-radius: var(--r-m); }
.rida__pealkiri a:focus-visible { outline: none; }
.rida__pealkiri a:focus-visible::after { outline: 2px solid var(--salvei); outline-offset: 2px; }
.rida__lead { margin-top: var(--v-3); max-width: none; font-size: var(--k-m); line-height: var(--rv-tekst); color: var(--tume-2); }

.rida__edasi {
    display: flex; align-items: center; gap: var(--v-2); width: fit-content;
    margin-top: var(--v-4);
    color: var(--salvei);
    font-family: var(--display); font-weight: 500;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--salvei) 40%, transparent);
    text-underline-offset: .3em;
    transition: text-decoration-color .25s var(--pehme);
}
.rida__edasi svg { width: .7em; }
.rida:hover .rida__pealkiri, .lisa:hover .lisa__pealkiri { color: var(--salvei-tume); }
.rida:hover .rida__edasi, .lisa:hover .rida__edasi { text-decoration-color: var(--salvei); }

/* Tarvo 22.09: rea tekst ja lisaplokkide sisu on keskel. */
.rida__tekst, .lisa { text-align: center; }
.rida__lead, .lisa__tekst, .rida__tekst .hinnakivi, .rida__edasi { margin-inline: auto; }

@media (max-width: 860px) {
    .rida__foto { margin-inline: auto; }
    .rida, .rida--vastu { grid-template-columns: minmax(0, 1fr); gap: var(--v-5); }
    .rida--vastu .rida__foto { order: 0; }
    .rida + .rida { margin-top: var(--v-7); }
    .rida__foto { max-width: 180px; }
    .rida__foto--raam { max-width: 230px; }
}

/* ---------------------------------------------------------------- tekst */

.plokk--sisu { padding-block: var(--v-7) var(--v-9); }

.proosa { max-width: 62ch; font-size: var(--k-l); line-height: var(--rv-tekst); }
.proosa > * + * { margin-top: var(--v-5); }
.proosa h2 { margin-top: var(--v-7); font-size: var(--k-xl); }
/* Ainult Janne teksti loendid, mitte "Vaata ka" ja "Loe veel". */
.proosa > ul { margin-block: 0; padding-left: 1.2em; }
.proosa > ul > li + li { margin-top: var(--v-2); }
/* Lingid on sageli üksi oma lõigus: puuteala vähemalt 24 px. */
.proosa a { padding-block: var(--v-1); color: var(--salvei); font-weight: 500; text-underline-offset: .2em; }

.fail a {
    display: inline-flex; align-items: center; gap: var(--v-3);
    min-height: 54px; padding: var(--v-3) var(--v-5);
    background: var(--pind);
    border-radius: var(--r-pill);
    box-shadow: var(--vari-2);
    color: var(--tume);
    font-family: var(--display); font-weight: 500;
    text-decoration: none;
    transition: transform .3s var(--pehme);
}
.fail a:hover { transform: translateY(-2px); }
.fail span {
    padding: 0 var(--v-2);
    background: var(--aprikoos);
    border-radius: var(--r-pill);
    font-family: var(--tekst); font-size: var(--k-xs); font-weight: 600;
}

.vaata-ka, .loe-veel { margin-top: var(--v-8); }
.proosa > .vaata-ka, .proosa > .loe-veel { margin-top: var(--v-8); }
.vaata-ka__pealkiri { font-size: var(--k-xl); }
.vaata-ka__read { display: flex; flex-wrap: wrap; gap: var(--v-3); list-style: none; margin: var(--v-4) 0 0; padding: 0; }
.vaata-ka__read .nupp { white-space: normal; text-align: center; }

.loe-veel ul { list-style: none; margin: var(--v-3) 0 0; padding: 0; }
.loe-veel li { display: grid; gap: var(--v-1); padding-block: var(--v-4); border-bottom: 1px solid var(--joon); }
.loe-veel a { font-family: var(--display); font-weight: 500; color: var(--tume); text-decoration: none; transition: color .2s var(--pehme); }
.loe-veel a:hover { color: var(--salvei); }
.loe-veel span { font-size: var(--k-s); color: var(--tume-2); }

/* --------------------------------------------------- artikkel ja test */

.lai-foto-ala { display: block; }
.lai-foto { margin: 0; }
.lai-foto img {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-radius: var(--lomp);
    box-shadow: var(--vari-2);
}
@media (max-width: 860px) { .lai-foto img { aspect-ratio: 4 / 3; } }

.paber { max-width: 920px; margin: 0; }
.paber img { width: 100%; border-radius: var(--r-m); box-shadow: var(--vari-3); }

/* Artiklite lõpus: meedia ja podcastid kahe lombina. */
.plokk--lisad { padding-block: 0 var(--v-8); }
.lisad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--v-4); }
.lisa {
    display: block;
    padding: var(--v-6) var(--v-5);
    border-radius: var(--lomp);
    color: var(--tume);
    text-decoration: none;
    transition: box-shadow .3s var(--pehme);
}
.lisa:hover { box-shadow: var(--vari-2); }
.lisa--meedia { background: var(--roos); }
/* Roosal pinnal on salvei kontrast 4,19:1, mis jääb AA alla. Tumedam toon annab 5,54:1. */
.lisa--meedia .rida__edasi, .mull a { color: var(--salvei-tume); }
.lisa--pod {
    background:
        radial-gradient(60% 80% at 90% 10%, var(--salvei-helgim) 0%, transparent 70%),
        var(--salvei-hele);
}
.lisa__pealkiri { font-size: var(--k-xl); transition: color .25s var(--pehme); }
.lisa__tekst { margin-top: var(--v-3); max-width: 44ch; color: var(--tume-2); }
@media (max-width: 760px) {
    .lisad { grid-template-columns: minmax(0, 1fr); }
    .lisa { padding: var(--v-6) var(--v-5); }
}

/* ------------------------------------------------------------- kontakt */

/* Kontaktileht: ülaosa on kompaktsem, et registreerimisvormi kasti serv
   paistaks ka madalas aknas ja oleks näha, et allpool on veel midagi. */
.lehe-pais--kontakt { padding-block: var(--v-5) var(--v-6); }
.lehe-pais--kontakt .maja { max-width: 520px; margin-top: var(--v-5); }
.lehe-pais--kontakt .proosa--kitsas { margin-top: var(--v-5); }
.kontaktileht {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--v-8);
    align-items: start;
}
.proosa--kitsas { margin-top: var(--v-6); max-width: 52ch; font-size: var(--k-m); color: var(--tume-2); }

.kontaktikivi {
    padding: var(--v-7) var(--v-6);
    border-radius: var(--lomp);
    background:
        radial-gradient(70% 80% at 80% 10%, var(--aprikoos-hele) 0%, transparent 70%),
        var(--aprikoos);
}
.kontaktikivi__read { display: grid; gap: var(--v-4); margin: 0; }
.kontaktikivi__read dt { font-size: var(--k-xs); color: var(--tume-2); }
.kontaktikivi__read dd { margin: var(--v-1) 0 0; font-family: var(--display); font-size: var(--k-l); line-height: var(--rv-suur); }
.kontaktikivi__read a { display: inline-block; padding-block: var(--v-1); color: var(--salvei); overflow-wrap: anywhere; text-underline-offset: .2em; }
.kontaktikivi__nupud { margin-top: var(--v-6); }
.kontaktikivi__nupud .nupp { flex: 1 1 auto; }

/* Maja kaader on tekstiveerus lõikude all, umbes 640 px lai. */
.maja { position: relative; max-width: 640px; margin: var(--v-6) 0 0; }
.maja img {
    width: 100%;
    aspect-ratio: 1200 / 562;
    object-fit: cover;
    border-radius: var(--r-m);
    box-shadow: var(--vari-2);
}
/* Noole ots on täpselt sissepääsu kohal, protsendid on sama kaadri pealt
   mis WordPressis. Kui pilt vahetub, tuleb need ümber arvutada. */
.maja__mark {
    position: absolute;
    left: var(--mark-x); top: var(--mark-y);
    transform: translate(-50%, -100%);
    display: flex; flex-direction: column; align-items: center; gap: var(--v-1);
    color: var(--salvei);
    pointer-events: none;
}
.maja__silt {
    padding: var(--v-1) var(--v-4);
    background: var(--salvei); color: var(--pind);
    border-radius: var(--r-pill);
    font-family: var(--display); font-size: var(--k-s); font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--vari-2);
}
.maja__nool { width: 16px; height: 23px; }

@media (max-width: 860px) {
    /* Telefonis tulevad number ja e-post kohe pealkirja alla, tekst pärast. */
    .kontaktileht { grid-template-columns: minmax(0, 1fr); gap: var(--v-6); }
    .kontaktileht { row-gap: 0; }
    .kontaktileht__tekst { display: contents; }
    .kontaktikivi { order: 1; margin-top: var(--v-6); }
    .proosa--kitsas { order: 2; margin-top: var(--v-6); }
    .maja { order: 3; }
    .kontaktikivi { padding: var(--v-6) var(--v-5); }
    .maja__silt { padding: var(--v-1) var(--v-3); font-size: var(--k-xs); }
    .maja__nool { width: 13px; height: 19px; }
}

/* ---------------------------------------------------------- kontaktivorm
   Väljad on samad mis Janne vanal saidil. Vastuvõtja on /vorm.php.        */

.vorm-ala { padding-bottom: var(--v-9); }

.vorm-kast {
    max-width: 54rem;
    margin-inline: auto;
    padding: var(--v-8) var(--v-7);
    border-radius: var(--lomp);
    background:
        radial-gradient(60% 80% at 88% 8%, var(--salvei-helgim) 0%, transparent 70%),
        var(--salvei-hele);
}
/* Tarvo 24.09: vormi pealkiri ja juhatus keskel, tekst kasutab kogu laiust. */
.vorm-kast > .h2, .vorm-kast__juhis { text-align: center; }
.vorm-kast__juhis { margin-top: var(--v-4); max-width: none; font-size: var(--k-l); line-height: var(--rv-lead); color: var(--tume-2); }

.vorm {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v-5);
    margin-top: var(--v-7);
}
.valja { display: grid; gap: var(--v-2); margin: 0; }
.valja--lai, .vorm__jalus { grid-column: 1 / -1; }
.valja label { font-size: var(--k-s); color: var(--tume-2); }
.valja input, .valja textarea {
    width: 100%;
    padding: var(--v-3) var(--v-4);
    background: var(--pind);
    color: var(--tume);
    border: 1.5px solid transparent;
    border-radius: var(--r-s);
    box-shadow: var(--vari-1);
    font-family: var(--tekst);
    font-size: var(--k-m);
    line-height: var(--rv-tekst);
    transition: border-color .25s var(--pehme);
}
.valja textarea { min-height: 9rem; resize: vertical; }
.valja input:hover, .valja textarea:hover { border-color: color-mix(in srgb, var(--salvei) 35%, transparent); }
.valja input:focus-visible, .valja textarea:focus-visible { outline: 2px solid var(--salvei); outline-offset: 2px; }

/* Peibutusväli rämpsurobotile: inimene seda ei näe ega saa fookusesse. */
.aed { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vorm__jalus { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--v-5); }

/* Möödunud sündmus. */
.moodunud {
    display: flex; width: fit-content;
    margin-top: var(--v-3);
    padding: var(--v-1) var(--v-4);
    background: var(--joon);
    border-radius: var(--r-pill);
    font-size: var(--k-xs);
    color: var(--tume-2);
}

@media (max-width: 720px) {
    .vorm { grid-template-columns: minmax(0, 1fr); gap: var(--v-4); }
    .vorm-kast { padding: var(--v-6) var(--v-5); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .nupp, .nupp:hover { transform: none; transition: none; }
}

/* ---------------------------------------------------------------------------
   Küpsiste nõusolek (08.10.2026). Valge kaart nagu vorm-kast, süsteemi raadius
   ja vari. Nupud on sama kaaluga: keeldumine ei tohi olla peidetum kui nõustumine.
   z-index 40: sisu kohal, aga päise (50) all, nii et avatud mobiilimenüü katab selle.
   --------------------------------------------------------------------------- */
.nousolek {
    position: fixed; z-index: 40;
    left: var(--v-4); right: var(--v-4);
    bottom: calc(var(--v-4) + env(safe-area-inset-bottom, 0px));
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-3) var(--v-5);
    max-width: 34rem;
    padding: var(--v-4) var(--v-5);
    background: var(--pind);
    border: 1px solid var(--joon);
    border-radius: var(--r-m);
    box-shadow: var(--vari-3);
}
.nousolek[hidden] { display: none; }
.nousolek__tekst { flex: 1 1 16rem; margin: 0; font-size: var(--k-s); line-height: var(--rv-tekst); color: var(--tume-2); }
.nousolek__nupud { display: flex; gap: var(--v-2); flex: 0 0 auto; }

.kupsiste-seaded {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--v-2);
    margin: 0; padding: 0 var(--v-4) var(--v-6);
}
.kupsiste-seaded__nupp {
    display: inline-flex; align-items: center;
    padding: var(--v-2) var(--v-3); min-height: 44px;
    background: none; border: 0; border-radius: var(--r-s);
    font: inherit; font-size: var(--k-s); color: var(--tume-2);
    text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.kupsiste-seaded__nupp:hover { color: var(--salvei); }

@media (max-width: 600px) {
    .nousolek { padding: var(--v-4); border-radius: var(--r-s); }
    .nousolek__nupud { width: 100%; }
    .nousolek__nupud .nupp { flex: 1 1 0; }
}