@charset "UTF-8";
/* ==========================================================================
   Inštitut Tukaj in Zdaj — site.css
   --------------------------------------------------------------------------
   Koncept: KROŠNJA IN KORENINE.
   Svetle ploskve so krošnja (kar je vidno zdaj), temni pasovi so korenine
   (kar je pod površjem). Metafora ni okrasna — "globinska integrativna
   psihoterapija" je Majin dobesedni opis dela.

   Paleta je Majina izbira ("Globoka / sofisticirana", izmed treh predlogov):
   ivory, siva-zelena oliva, terakota, temna sliva. Temni pasovi so zato topla
   prst in ne gozd — kar je za korenine vsebinsko bolj točno.

   Podpis postavitve: ravni robovi (kot navpična obloga) + OBOKANE fotografije
   (kot krošnja, okno, portal).
   ========================================================================== */

/* --------------------------------------------------------------- 1. pisave */
/* Lasten podnabor (glej tools/subset-fonts.py): slovenska abeceda + Latin-1 +
   tipografska ločila v enem fajlu. Googlov par latin/latin-ext bi za
   slovenščino pomenil prenos obeh — 294 KB namesto 96 KB. */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-sl.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Commissioner';
  src: url('/assets/fonts/commissioner-sl.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- 2. tokeni */
:root {
  /* ---------------------------------------------------------------------
     Paleta "Globoka / sofisticirana" — Maja jo je izbrala izmed treh
     predlogov. Vrednosti so odčitane iz njenega dokumenta, ne ugibane.
     Njena opomba: zelena ne sme biti "wellness", terakota ne preveč oranžna.

     RGB tokeni obstajajo, ker so bile prosojnosti prej trdo zapisane
     (rgba(243,240,233,…) na 12 mestih). Ob prvi spremembi palete bi se
     razšle — natanko tako, kot se je razšel CSS na writency.si.
     --------------------------------------------------------------------- */

  /* --- ploskve --- */
  --lan:          #F3EEE4;      /* ivory, osnovno ozadje */
  --lan-rgb:      243 238 228;
  --lan-2:        #E8E0D0;      /* izmenični pas */
  --papir:        #FBF8F1;      /* dvignjene ploskve */
  --pesek:        #CFC4AE;      /* drobne oznake na temnem pasu (5,9:1) */

  /* --- oliva: siva-zelena, namenoma manj nasičena od žajblja --- */
  --oliva:        #6E7259;      /* grafika: znak, oznake seznamov (4,3:1) */
  --oliva-mehko:  rgb(110 114 89 / .14);
  /* Za BESEDILO je #6E7259 premalo: 4,3:1 na ivory in samo 3,8:1 na --lan-2,
     torej pade pod AA za drobno besedilo (.oko in aktivna navigacija sta
     13-15 px). Isti vzorec kot pri --glina / --glina-tekst. */
  --oliva-tekst:  #5F6350;      /* 5,4:1 na ivory, 4,7:1 na --lan-2 ✓ AA */

  /* --- drevo (faza 12) ---
     Ena sama barva za cel ornament. Uporabnikova zahteva je bila "tocno taksne
     barve" po referencni sliki: cista crna. Na --lan je 18,2:1; na temnem pasu
     se OBRNE v --lan (8,9:1) — glej razdelek 9b, ki to tudi utemeljuje.
     Ce bo #000 ob pogledu na zivo stran deloval pretrdo ob topli paleti, je
     popravek zamenjava te ene vrstice (npr. #1A1614) in nic drugega. */
  --drevo:        #000;

  /* --- glina: terakota --- */
  --glina:        #C08A63;      /* SAMO grafika — na ivory je 2,6:1 */
  --glina-mehko:  rgb(192 138 99 / .14);
  --glina-tekst:  #9A5A34;      /* zatemnjena za besedilo (4,7:1 ✓ AA) */
  --glina-svetlo: #D8A87E;      /* povezave na temnem pasu */

  /* --- sliva: edina temna v njeni paleti --- */
  --sliva:        #4B3D3E;      /* podlaga temnih pasov in noge */
  --sliva-rgb:    75 61 62;
  --temno:        #3E3132;      /* besedilo — odtenek globlji od pasu (10,8:1) */
  --temno-rgb:    62 49 50;
  --besedilo-2:   #6E5F5C;      /* sekundarno besedilo (5,3:1 ✓ AA) */
  --crta:         rgb(62 49 50 / .14);
  --crta-mocna:   rgb(62 49 50 / .24);

  /* --- pisavi --- */
  --f-naslov: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-telo:   'Commissioner', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- tipografska lestvica (fluid) --- */
  --t-hero: clamp(3rem,    2rem    + 5vw,   6rem);      /* 48 → 96 */
  --t-h1:   clamp(2.5rem,  1.9rem  + 3vw,   4.25rem);   /* 40 → 68 */
  --t-h2:   clamp(1.75rem, 1.45rem + 1.5vw, 2.625rem);  /* 28 → 42 */
  --t-h3:   clamp(1.25rem, 1.15rem + .5vw,  1.5rem);    /* 20 → 24 */
  --t-lead: clamp(1.1875rem, 1.12rem + .34vw, 1.375rem);/* 19 → 22 */
  --t-body: clamp(1.0625rem, 1.03rem + .18vw, 1.125rem);/* 17 → 18 */
  --t-sm:   clamp(.875rem, .85rem  + .12vw, .9375rem);  /* 14 → 15 */
  /* Dno dvignjeno z .75rem (12 px): --t-xs nosijo drobne oznake, ki so
     VELIKE TISKANE z razmikom (.oko, .objava__vrsta) — pri 12 px so na meji
     berljivosti, teh oznak pa je na domaci strani 15. */
  --t-xs:   clamp(.8125rem, .79rem + .1vw, .875rem);   /* 13 → 14 */

  /* --- prostor: osnova 8 px --- */
  --s1: 4px;  --s2: 8px;   --s3: 12px; --s4: 16px;  --s5: 24px;
  --s6: 32px; --s7: 48px;  --s8: 64px; --s9: 96px;  --s10: 128px;
  --sec-y: clamp(72px, 8.5vw, 128px);

  /* --- postavljena velikost strani --- */
  --rob:           clamp(20px, 5vw, 64px);
  --vsebnik:       1200px;
  --vsebnik-ozek:  720px;
  --vsebnik-sirok: 1440px;
  --mera:          66ch;   /* dolžina vrstice v prozi — Majina besedila so dolga */

  /* --- oblika --- */
  --r: 3px;                                  /* skoraj ravno, kot lesna obloga */
  --obok: 50% 50% 0 0 / 32% 32% 0 0;         /* maska za fotografije */
  --senca: 0 24px 60px rgb(var(--temno-rgb) / .13);
  --senca-mehka: 0 8px 24px rgb(var(--temno-rgb) / .08);

  --prehod: .45s cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------- 3. osnova */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;   /* fiksna glava ne sme prekriti sidra */
}

body {
  margin: 0;
  position: relative;         /* containing block za .veja */
  background: var(--lan);
  color: var(--temno);
  font-family: var(--f-telo);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Zrnavost: ena sama SVG tekstura čez celo stran, zelo šibka. Daje občutek
   papirja/prsti namesto ploske digitalne barve. Ne prestreza klikov. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ključno pri pravih fotografijah: brez max-width bi 1884 px slika razbila
   postavitev vodoravno. Obstoječi Writency demoti tega pravila nimajo, ker
   nimajo nobene slikovne datoteke. */
img, svg, video { display: block; max-width: 100%; height: auto; }

/* Plasti: krošnja (0) je ZA vsebino, vsebina (1) je nad njo, steblo (2) je
   nad ozadji sekcij — sicer bi v temnem pasu izginilo. Glava ostane pri 60. */
main, .noga { position: relative; z-index: 1; }

a { color: var(--sliva); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--glina); }

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

.preskoci {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--sliva); color: var(--lan);
  padding: var(--s3) var(--s5); border-radius: var(--r);
  font-size: var(--t-sm); text-decoration: none;
  transition: top .2s;
}
.preskoci:focus { top: var(--s4); color: var(--lan); }

/* ------------------------------------------------------------ 4. tipografija */
h1, h2, h3, h4 {
  font-family: var(--f-naslov);
  font-optical-sizing: auto;      /* Fraunces opsz se veže na font-size */
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.012em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.06; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.28; letter-spacing: -.004em; }

p { margin: 0 0 var(--s5); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; }

/* Oko — drobna oznaka nad naslovom sekcije */
.oko {
  display: block;
  font-family: var(--f-telo);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oliva-tekst);
  margin: 0 0 var(--s4);
}
.oko::after {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  margin-left: var(--s3); vertical-align: .34em;
  background: currentColor; opacity: .55;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--besedilo-2);
  max-width: 54ch;
}

/* Slogan v heroju. Terakota je vzeta z mockupa, ki ga je Maja potrdila, a
   zatemnjena: njena #C08A63 ima na ivory ozadju 2,6:1 in pade tudi pod
   najblažjo mejo 3:1. --glina-tekst drži isti vtis pri 4,7:1. */
.lead--slogan {
  color: var(--glina-tekst);
  font-size: clamp(1.25rem, 1.14rem + .48vw, 1.5rem);
  line-height: 1.44;
  max-width: 24ch;
  text-wrap: balance;
}

.proza { max-width: var(--mera); }
.proza > * + * { margin-top: var(--s5); }

.drobno { font-size: var(--t-sm); color: var(--besedilo-2); }

/* Izjava — tipografski predah med sekcijami */
.izjava {
  font-family: var(--f-naslov);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
  font-weight: 300;
  line-height: 1.34;
  letter-spacing: -.01em;
  max-width: 24ch;
  margin: 0;
  text-wrap: balance;
}

/* ------------------------------------------------------------- 5. postavitev */
.vsebnik {
  width: min(var(--vsebnik), 100% - 2 * var(--rob));
  margin-inline: auto;
}
.vsebnik--ozek  { width: min(var(--vsebnik-ozek),  100% - 2 * var(--rob)); }
.vsebnik--sirok { width: min(var(--vsebnik-sirok), 100% - 2 * var(--rob)); }

.sek { padding-block: var(--sec-y); }
.sek--tanka { padding-block: calc(var(--sec-y) * .58); }

/* Pasovi — krošnja (svetlo) proti koreninam (temno) */
.pas--papir { background: var(--papir); }
.pas--lan2  { background: var(--lan-2); }
.pas--korenine {
  background: var(--sliva);
  color: var(--lan);
}
.pas--korenine h1, .pas--korenine h2, .pas--korenine h3 { color: var(--lan); }
.pas--korenine .oko { color: var(--pesek); }
.pas--korenine .lead,
.pas--korenine .drobno { color: rgb(var(--lan-rgb) / .76); }
.pas--korenine a { color: var(--glina-svetlo); }
.pas--korenine a:hover { color: var(--lan); }

/* Asimetrična mreža — namenoma se izmenjuje, da stran ne bere kot niz
   enakih blokov. */
.mreza { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 860px) {
  .mreza--7-5 { grid-template-columns: 7fr 5fr; }
  .mreza--5-7 { grid-template-columns: 5fr 7fr; }
  .mreza--pol { grid-template-columns: 1fr 1fr; }
}

.glava-sekcije { max-width: 44ch; margin-bottom: clamp(40px, 5vw, 72px); }

/* Tri poti — hairline šivi namesto obrobljenih kartic. Kartica z obrobo bi
   iz treh enakovrednih poti naredila tri "izdelke"; šiv jih pusti kot deli
   iste ploskve. */
@media (min-width: 760px) { .mreza--tri { grid-template-columns: repeat(3, 1fr); } }
.mreza--tri { gap: 0; border-top: 1px solid var(--crta); }

.kartica {
  padding: var(--s7) 0 var(--s6);
  border-bottom: 1px solid var(--crta);
}
@media (min-width: 760px) {
  .kartica { padding: var(--s7) var(--s6) var(--s6); border-bottom: 0; border-left: 1px solid var(--crta); }
  .kartica:first-child { padding-left: 0; border-left: 0; }
  .kartica:last-child { padding-right: 0; }
}
.kartica h3 { margin-bottom: var(--s3); }
.kartica p { margin-bottom: var(--s5); }

.povezava-naprej {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-sm); font-weight: 500;
  color: var(--sliva); text-decoration: none;
  border-bottom: 1px solid var(--crta-mocna);
  padding-bottom: 2px;
  transition: color var(--prehod), border-color var(--prehod);
}
.povezava-naprej::after { content: '→'; transition: transform var(--prehod); }

/* Dotikalna povrsina se razsiri s psevdoelementom in NE s paddingom: podcrtaj
   (border-bottom) je tik pod besedilom in bi se s paddingom odmaknil.
   Izmerjeno 27 px -> 45 px. Samo na dotik, da na mizi ni nevidnih ovir. */
@media (pointer: coarse) {
  .povezava-naprej { position: relative; }
  .povezava-naprej::before {
    content: ''; position: absolute; inset: -9px -4px;
  }
}
.povezava-naprej:hover { color: var(--glina); border-color: var(--glina); }
.povezava-naprej:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------- hero */
.hero { padding-top: clamp(48px, 6vw, 88px); }

/* Pod 860 px hero slika zavzame ves stolpec — pri 859 px je to 773 CSS px,
   na retini 1546. Portret ima 902 px izvora, torej bi bil povecan 1,7-krat.
   Omejitev je hkrati boljsi dizajn: cez cel tablicni zaslon razlita fotografija
   dusi besedilo, ki je ob njej. */
@media (max-width: 859px) {
  /* Vrednost je bila podvojena: to pravilo je imelo 460 px, nizje v datoteki
     pa je drugi @media blok z 380 px prvega povozil. Zdruzeno tukaj. */
  .hero__slika { max-width: 380px; margin-inline: auto; width: 100%; }
}
.hero__mreza { align-items: center; }
.hero__naslov {
  font-size: var(--t-hero);
  font-weight: 300;
  line-height: .98;
  /* Verzalke po Majini zahtevi (faza 13) — vrnitev k prvotni zamisli iz plana.
     -.028em je bilo umerjeno za male crke Fraunces; pri 96 px verzalkah v
     font-weight 300 negativni razmik znake vidno zlepi. .005em je najmanjsa
     pozitivna vrednost, ki jih razpre, ne da bi naslov razpadel. */
  text-transform: uppercase;
  letter-spacing: .005em;
  margin-bottom: var(--s5);
}
.hero__dejanja {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  margin-top: var(--s7);
}
/* Začasno mesto za fotografijo (faza 3). */
.mesto-slike {
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgb(var(--temno-rgb) / .05) 11px 12px),
    linear-gradient(170deg, var(--oliva-mehko), var(--glina-mehko));
  border: 1px dashed var(--crta-mocna);
}
.mesto-slike__oznaka {
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--besedilo-2); text-align: center; line-height: 1.8;
}

/* --------------------------------------------------------------- 6. gumbi */
.gumb {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--f-telo);
  font-size: var(--t-sm); font-weight: 500;
  letter-spacing: .02em;
  padding: 14px var(--s6);
  border-radius: var(--r);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--prehod), color var(--prehod),
              border-color var(--prehod), transform .2s;
}
.gumb:active { transform: translateY(1px); }

.gumb--poln {
  background: var(--sliva); color: var(--lan); border-color: var(--sliva);
}
.gumb--poln:hover { background: var(--temno); border-color: var(--temno); color: var(--lan); }

.gumb--obris {
  background: transparent; color: var(--sliva); border-color: var(--crta-mocna);
}
.gumb--obris:hover { border-color: var(--sliva); background: var(--oliva-mehko); color: var(--sliva); }

.pas--korenine .gumb--poln { background: var(--lan); color: var(--sliva); border-color: var(--lan); }
.pas--korenine .gumb--poln:hover { background: #fff; color: var(--temno); }
.pas--korenine .gumb--obris { color: var(--lan); border-color: rgb(var(--lan-rgb) / .34); }
.pas--korenine .gumb--obris:hover { border-color: var(--lan); background: rgb(var(--lan-rgb) / .08); }

/* Puščica v gumbu se ob hoverju premakne */
.gumb svg { transition: transform var(--prehod); }
.gumb:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------- 7. obok (fotografije)
   Podpis strani. Ordinacija je ravna navpična obloga z ovalno mizico, elipsasto
   svetilko in okroglim drevesom — postavitev je zato pravokotna, fotografije pa
   obokane. */
.obok {
  position: relative;
  overflow: hidden;
  border-radius: var(--obok);
  background: var(--lan-2);
}
.obok picture { display: block; width: 100%; height: 100%; }
.obok img { width: 100%; height: 100%; object-fit: cover; }

/* Tanka linija ob oboku — kot okenski okvir */
.obok--okvir::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid rgb(var(--lan-rgb) / .28);
  border-radius: inherit;
  pointer-events: none;
}

.obok--visok  { aspect-ratio: 3 / 4; }
.obok--kvadr  { aspect-ratio: 1 / 1; }
.obok--sirok  { aspect-ratio: 4 / 3; }

/* -------------------------------------------- 7b. vsebinski gradniki
   Dodano v fazi 3, ko je prispela prava vsebina. Trije vzorci, ki se
   ponovijo na vec straneh: nastevanja, cenik in vtisi. */

/* Seznam — namesto pike drobna obokana oznaka. Obok je podpis te strani
   (maska fotografij), tu je isti motiv pri 7 px: nastevanje se s tem veze
   na ostalo stran, namesto da uvede novo obliko. */
.seznam { list-style: none; margin: 0; padding: 0; }
.seznam li {
  position: relative;
  padding-left: var(--s5);
  margin-bottom: var(--s4);
  line-height: 1.62;
}
.seznam li:last-child { margin-bottom: 0; }
.seznam li::before {
  content: '';
  position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px;
  background: var(--oliva);
  border-radius: 50% 50% 0 0 / 62% 62% 0 0;
}
.pas--korenine .seznam li::before { background: var(--glina-svetlo); }

/* Dvostolpcni pri daljsih nastevanjih. Pod 860 px en stolpec — dva stolpca
   po tri besede sta slabse berljiva kot en. */
@media (min-width: 860px) {
  .seznam--dvojni { columns: 2; column-gap: clamp(32px, 5vw, 72px); }
  .seznam--dvojni li { break-inside: avoid; }
}

/* Cenik — tipografske vrstice, ne kartice. Kartica z obrobo in gumbom bi iz
   terapevtske ure naredila paket; hairline vrstica je samo podatek. */
.cenik { list-style: none; margin: 0; padding: 0; max-width: 42rem; }
.cenik li {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s3) var(--s5);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--crta);
}
.cenik li:first-child { border-top: 1px solid var(--crta); }
.cenik__ime { flex: 1 1 16rem; }
.cenik__ime b { display: block; font-weight: 550; }
.cenik__ime span { display: block; font-size: var(--t-sm); color: var(--besedilo-2); margin-top: 2px; }
.cenik__cena {
  /* Pri 320 px cena zavije pod ime. Brez tega se poravna LEVO in par
     "storitev … cena" razpade; margin-left jo drzi desno tudi po prelomu. */
  margin-left: auto;
  font-family: var(--f-naslov);
  font-size: 1.5rem; font-weight: 400;
  letter-spacing: -.01em;
  color: var(--sliva);
  white-space: nowrap;
}
.pas--korenine .cenik__cena { color: var(--lan); }

/* Vtis — brez zvezdic, brez ocen, brez Review oznak. Samozbrane ocene
   zdravstvenega ponudnika so hkrati krsitev Googlove politike in eticni
   problem, zato je to navadno besedilo z navedbo vira. */
.vtis {
  margin: 0;
  max-width: 46rem;
  padding-left: clamp(20px, 3vw, 34px);
  border-left: 1px solid var(--crta-mocna);
}
.vtis p {
  font-family: var(--f-naslov);
  font-size: clamp(1.1875rem, 1.06rem + .55vw, 1.5rem);
  font-weight: 300;
  line-height: 1.46;
  letter-spacing: -.008em;
  color: var(--temno);
}
.pas--korenine .vtis { border-left-color: rgb(var(--lan-rgb) / .3); }
.pas--korenine .vtis p { color: var(--lan); }
.vtis__vir {
  display: block;
  margin-top: var(--s5);
  font-family: var(--f-telo);
  font-size: var(--t-sm);
  font-style: normal;
  color: var(--besedilo-2);
}
.pas--korenine .vtis__vir { color: var(--pesek); }

/* Nazivi pod imenom — vsak v svoji vrstici, ker so dolgi in okrajsani.
   V eni vrstici z vejicami se berejo kot nastevanje in se izgubijo. */
.nazivi { list-style: none; margin: 0 0 var(--s6); padding: 0; }
.nazivi li {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--besedilo-2);
  margin-bottom: var(--s2);
}
.nazivi li:last-child { margin-bottom: 0; }

/* ------------------------------------------- 7d. domaca stran (faza 4)
   Dva gradnika, ki nastopita samo tu. */

/* Portret ob predstavitvenem odstavku je NAMENOMA majhen: izvor ima 902 px,
   pri 220 px prikaza brskalnik izbere razlicico 451 (26 KB namesto 81 KB),
   hkrati pa portret ne tekmuje s fotografijo v heroju nad njim. */
.portret-mali { max-width: 220px; margin-bottom: var(--s6); }

/* Clanstva in izkusnje — tipografski pas s sivimi sivi, ne logotipi.
   Logotipov strokovnih zdruzenj brez njihovega dovoljenja ne objavljamo,
   ime pa pove enako. */
.reference { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.reference li { padding: var(--s5) 0; border-top: 1px solid var(--crta); }
.reference li:last-child { border-bottom: 1px solid var(--crta); }
@media (min-width: 760px) {
  .reference { grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--crta); }
  .reference li {
    padding: var(--s6) var(--s5) var(--s5);
    border-top: 0; border-bottom: 0;
    border-left: 1px solid var(--crta);
  }
  .reference li:first-child { padding-left: 0; border-left: 0; }
  .reference li:last-child { padding-right: 0; border-bottom: 0; }
}
.reference b {
  display: block;
  font-family: var(--f-naslov);
  font-size: var(--t-h3); font-weight: 400;
  letter-spacing: -.01em;
  color: var(--sliva);
}
.reference span {
  display: block;
  margin-top: var(--s2);
  font-size: var(--t-sm); line-height: 1.5;
  color: var(--besedilo-2);
}

/* ------------------------------------------------- 7c. objave (kronologija)
   Ena os: cas. Vrsta medija je metapodatek ob zapisu, ne locena skupina —
   pri 26 zapisih bi delitev na "radio / tisk / predavanja" razbila zgodbo
   o neprekinjeni prisotnosti od 2016 do danes na tri kratke sezname. */

.letnik { border-top: 1px solid var(--crta); padding-top: var(--s6); }
.letnik + .letnik { margin-top: var(--s7); }

@media (min-width: 860px) {
  .letnik { display: grid; grid-template-columns: 8rem 1fr; gap: clamp(32px, 4vw, 64px); }
}

.letnik__leto {
  font-family: var(--f-naslov);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--glina-tekst);
  margin: 0 0 var(--s5);
}
@media (min-width: 860px) {
  /* Letnica ostane ob zapisih, dokler traja njeno leto.
     align-self: start je NUJEN: privzeti stretch raztegne mrezni element cez
     vso visino vrstice, sticky pa potem nima kam potovati — element je ze tako
     visok kot obmocje. Videti je kot da sticky ne dela; v resnici dela, samo
     brez prostora. */
  .letnik__leto { position: sticky; top: 100px; align-self: start; margin-bottom: 0; }
}

.objave { list-style: none; margin: 0; padding: 0; }
.objava { padding-bottom: var(--s6); }
.objava + .objava { padding-top: var(--s6); border-top: 1px solid var(--crta); }

.objava__naslov {
  display: inline-flex; align-items: baseline; gap: var(--s2);
  font-family: var(--f-naslov);
  font-size: clamp(1.125rem, 1.06rem + .34vw, 1.3125rem);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -.008em;
  color: var(--temno);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--prehod), border-color var(--prehod);
}
.objava__naslov:hover { color: var(--glina-tekst); border-bottom-color: var(--glina); }
.objava__naslov svg { flex: none; opacity: .5; transition: transform var(--prehod), opacity var(--prehod); }
.objava__naslov:hover svg { opacity: 1; transform: translate(2px, -2px); }

/* Isti razlog kot pri .povezava-naprej. Na /objave je teh povezav 26 in vse
   so bile 26 px visoke. `.objava` dobi position, da se psevdoelement omeji
   nanjo in se sosednje tarce ne prekrivajo. */
@media (pointer: coarse) {
  .objava { position: relative; }
  .objava__naslov::before {
    content: ''; position: absolute; inset: -11px -4px;
  }
}

.objava__vir {
  margin: var(--s3) 0 0;
  font-size: var(--t-sm);
  color: var(--besedilo-2);
}
.objava__vrsta {
  display: inline-block;
  margin-right: var(--s3);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oliva-tekst);
}

/* Besedilo samo za bralnike zaslona — "odpre se v novem zavihku" mora biti
   napovedano, ne pa vidno ob vsakem od 26 zapisov. */
.samo-bralnik {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------------------------------------------- 7e. obrazec (faza 6)
   Tri polja in nic vec. Obrazec psihoterapevtke NE sme vabiti opisa tezav:
   to bi bili podatki po 9. clenu GDPR v nesifriranem e-mailu in v dnevniku
   deljenega gostovanja. Zato ni izbirnika "vrsta obravnave" in ni placeholderja
   "opisite, s cim se soocate" — oboje ima demo v studiu in oboje je tu napacno. */

.obrazec { display: grid; gap: var(--s5); max-width: 34rem; }

.polje { display: grid; gap: var(--s2); }
.polje > span {
  font-size: var(--t-sm); font-weight: 500;
  color: var(--besedilo-2);
}
.polje input,
.polje textarea {
  font-family: var(--f-telo);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--temno);
  background: var(--papir);
  border: 1px solid var(--crta-mocna);
  border-radius: var(--r);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--prehod), box-shadow var(--prehod);
}
.polje textarea { resize: vertical; min-height: 9rem; }
.polje input:focus-visible,
.polje textarea:focus-visible {
  outline: none;
  border-color: var(--oliva);
  box-shadow: 0 0 0 3px var(--oliva-mehko);
}

/* Vaba za robote. NE display:none in NE type=hidden — oboje spregledajo tudi
   roboti. Polje je v toku dokumenta, a odmaknjeno z zaslona in izvzeto iz
   tabulatorja; clovek ga ne more izpolniti, skripta pa ga izpolni vedno. */
.past {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* Opozorilo o zdravstvenih podatkih je NAD gumbom in vidno, ne skrito v
   povezavi: kdor ga prebere sele po oddaji, ga je prebral prepozno. */
.obvestilo {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--besedilo-2);
  border-left: 1px solid var(--crta-mocna);
  padding-left: var(--s4);
  margin: 0;
}

/* Stanje po oddaji. Ob napaki mora biti viden NEPOSREDEN e-naslov — obiskovalec
   ne sme ostati brez poti naprej. Besedilo v poljih se ob napaki ohrani. */
.stanje { margin: 0; font-size: var(--t-sm); line-height: 1.6; }
.stanje:empty { display: none; }
.stanje--ok    { color: var(--oliva-tekst); }
.stanje--fail  { color: var(--glina-tekst); }
.obrazec[data-poslano="1"] .polje,
.obrazec[data-poslano="1"] .obvestilo,
.obrazec[data-poslano="1"] button { display: none; }

/* -------------------------------------------------- 7f. klic v stiski
   Vsaka postavka je cela tarca, ne le stevilka: na telefonu se klice s
   palcem in v slabem stanju. Visina je zato >= 44 px po zasnovi, ne po
   naknadnem popravku. */
.stiska { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); max-width: 26rem; }
.stiska a {
  display: block;
  padding: var(--s4);
  background: var(--papir);
  border: 1px solid var(--crta-mocna);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--temno);
  transition: border-color var(--prehod), background var(--prehod);
}
.stiska a:hover,
.stiska a:focus-visible { border-color: var(--oliva-tekst); background: var(--lan); color: var(--temno); }
.stiska b {
  display: block;
  font-family: var(--f-naslov);
  font-size: var(--t-h3); font-weight: 400;
  letter-spacing: -.01em;
}
.stiska span {
  display: block; margin-top: 2px;
  font-size: var(--t-sm); line-height: 1.5;
  color: var(--besedilo-2);
}

/* --------------------------------------------------------------- 8. glava */
.glava {
  position: sticky; top: 0; z-index: 60;
  background: rgb(var(--lan-rgb) / .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--prehod), background var(--prehod);
  /* Faza 16b — znana iOS Safari napaka: position:sticky v kombinaciji z
     backdrop-filter obcasno med scrollom (posebej ob elasticnem odboju na
     vrhu strani) pusti vrzel med robom zaslona in glavo, ker brskalnik
     elementa ne sestavi v lasten kompozitni sloj zanesljivo. Prisilimo
     lasten sloj — to je standarden, nizko-tvegan popravek za ta razred
     napake, ne spremeni nobenega vidnega obnasanja. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
/* Faza 16 — IZMERJENA NAPAKA: prosojno (.88) + zamegljeno ozadje je bilo
   veljavno VES CAS RAZEN prvih 8 px scrolla (glej site.js:812), zato je
   temna sekcija (.pas--korenine) globlje na strani "prosevala" skozi glavo
   umazano-zamegljeno, z delno vidnim besedilom nad njo — potrjeno s
   posnetkom mobilne strani in ponovljeno na stagingu, piksel na piksel.
   Ko je uporabnik scrolnil (torej praktično vedno), glava zato dobi POLNO
   barvo brez alfa — prosojnost ostane samo v prvih 8 px nad heroji s
   fotografijo, kjer je namerna in izgleda dobro. */
.glava--drsi { border-bottom-color: var(--crta); background: var(--lan); }

.glava__vrsta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5);
  min-height: 76px;
}

.logo {
  display: inline-flex; align-items: center; gap: var(--s3);
  /* Pot domov je navigacijska kontrola, ne okras; izmerjena je bila 34 px. */
  min-height: 44px;
  color: var(--temno); text-decoration: none;
  transition: color var(--prehod);
}
.logo:hover { color: var(--oliva-tekst); }
.logo__znak { flex: none; color: var(--oliva); }
.logo__besedilo { display: flex; flex-direction: column; line-height: 1; }
.logo__nad {
  font-size: 10px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--besedilo-2);
  margin-bottom: 3px;
}
.logo__ime {
  font-family: var(--f-naslov);
  font-size: 1.2rem; font-weight: 400;
  /* Verzalke po Majini zahtevi (faza 13). Razmik je moral z -.01em na .04em:
     negativna vrednost je bila umerjena za male crke, verzalke pa so sirse in
     brez podaljskov, zato jih negativni razmik zlepi. Verzalke logo tudi
     RAZSIRIJO — navigacija gre v eno vrstico pri 862 px in ima le ~65 px
     rezerve, zato je bila po tej spremembi meritev ponovljena. */
  text-transform: uppercase;
  letter-spacing: .04em;
}

.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav__link {
  position: relative;
  font-size: var(--t-sm); font-weight: 450;
  color: var(--temno); text-decoration: none;
  padding-block: var(--s2);
  transition: color var(--prehod);
}
.nav__link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--prehod);
}
.nav__link:hover { color: var(--oliva-tekst); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link--aktivna { color: var(--oliva-tekst); }
.nav__link--aktivna::after { transform: scaleX(1); opacity: .5; }

.meni-gumb { display: none; }

@media (max-width: 859px) {
  .meni-gumb {
    display: inline-flex; align-items: center; gap: var(--s2);
    background: none; border: 0; padding: var(--s2);
    /* Izmerjeno 31 px. Najpogosteje uporabljen gumb na telefonu; nima
       podcrtaja, zato zadosca min-height. */
    min-height: 44px;
    font-family: var(--f-telo); font-size: var(--t-xs); font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--temno); cursor: pointer;
  }
  .meni-gumb__crte { display: grid; gap: 5px; width: 20px; }
  .meni-gumb__crte i { display: block; height: 1.5px; background: currentColor; transition: transform var(--prehod); }
  .meni-gumb[aria-expanded="true"] .meni-gumb__crte i:first-child { transform: translateY(3.25px) rotate(45deg); }
  .meni-gumb[aria-expanded="true"] .meni-gumb__crte i:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papir);
    border-block: 1px solid var(--crta);
    padding: var(--s3) var(--rob) var(--s6);
    display: none;

    /* IZMERJENA OKVARA: pri 844 x 390 (telefon obrnjen) je odprt meni segal
       167 px cez zaslon. .nav je absoluten znotraj LEPLJIVE glave, zato se ob
       scrollu ne premakne — postavki "Objave" in "Kontakt" sta bili
       nedosegljivi. Meni mora imeti svoj scroll.
       dvh in ne vh: na telefonih se brskalnikova letev skriva in kaze, vh pa
       meri najvecjo visino, kar bi spodnji rob spet potisnilo iz zaslona.
       overscroll-behavior prepreci, da bi scroll menija premaknil stran zadaj. */
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav--odprt { display: flex; }
  .nav__link { padding-block: var(--s4); border-bottom: 1px solid var(--crta); font-size: 1.0625rem; }
  .nav__link:last-child { border-bottom: 0; }
  .nav__link::after { display: none; }
}

/* ------------------------------------------------------------ 9. drevo (rail)
   Navpična hrbtenica strani. Vso geometrijo generira site.js iz dejanskih
   pozicij sekcij [data-veja]; tu so samo barve, debeline in prehodi.

   Pozicijo in širino stolpca nastavi JS (bere dejanski gutter), ker se morata
   prilagoditi širini okna — CSS calc() tega ne zna prebrati iz vsebnika.

   FAZA 12 (2026-09-01): ornamentalni filigran. Bistvena razlika od prejsnjih
   petih poskusov ni v barvah ali debelinah tu spodaj, ampak v RISARSKEM
   PRIMITIVU v site.js: vitice so <path fill="none" stroke> KONSTANTNE
   debeline z zaobljenimi kapami, ne polnjene oblike s spremenljivo debelino.
   Ce bi kdo tu spremenil stroke nazaj v fill, bi se drevo takoj vrnilo v
   "vejevat" videz, ne glede na vse ostalo. */

.veja {
  position: absolute;
  top: 0; left: 8px;
  width: 12px;
  pointer-events: none;
  z-index: 2;   /* nad ozadji sekcij, sicer v temnem pasu izgine */
  display: none;
}
/* Meja 1400 px, ne 1120: pri 1120 je gutter samo 56 px in vitica bi bila
   0,49 px — pod pol piksla, torej siva megla namesto filigrana (izmerjeno,
   glej obsirno opombo pri `polno` v site.js). Drevo je ali drevo ali pa ga ni.
   Ta vrednost MORA biti enaka matchMedia v zgradiDrevo(); JS gradnjo pod mejo
   tudi PRESKOCI, ne le skrije. */
@media (min-width: 1400px) { .veja { display: block; } }

.veja__risba { width: 100%; overflow: visible; }

/* Prosojnost je 1 in oblike se prekrivajo brez sledi, ker so vse ISTE barve
   znotraj ENE skupine. Prejsnje faze so imele .78 na skupini, ker sta bili
   krosnja in deblo LOCENA SVG-ja in je bilo treba njun stik zliti; od faze 12
   sta v isti risbi in ta cel razred problemov odpade. */

/* -------------------------------------------------- 9b. barva in barvni obrat
   Uporabnikova zahteva: "tocno taksne barve" — cista crna (#000).
   Vredno vedeti: paleta strani je topla (--lan #F3EEE4, --sliva #4B3D3E) in
   cista crna je edina hladna vrednost v njej; deluje kot tuj, oster element.
   To je natanko naroceno in je zamenjava ENEGA tokena, ce bo delovalo pretrdo.

   "Ena barva" ne sme pomeniti ene barvne VREDNOSTI povsod: drevo tece cez
   svetle IN temne (.pas--korenine, ozadje --sliva) pasove, crna na --sliva pa
   je izmerjeno 2,1:1 — neuporabna. Zato se barva OBRNE, isti mehanizem, ki ga
   .pas--korenine h1/h2/h3 ze uporablja za besedilo:
     na svetlem ozadju: --drevo  (#000 na --lan = 18,2:1)
     na temnem ozadju:  --lan    (8,9:1 na --sliva)
   Razred .v-obratu nosi ta preklop; site.js ga doda vsaki obliki, katere sidro
   pripada sekciji s .pas--korenine (glej jeVObratu).
   Deblo prehaja med pasovi znotraj ENE poti, zato ne more uporabiti razreda —
   tam site.js zgradi gradient z ostrimi prehodi (pasovniPreliv). */
.veja__risba stop { stop-color: var(--drevo); }
/* Razred zmaga nad zgornjim pravilom (visja specificnost) — edini nacin, da
   posamezen <stop> v pasovniPreliv() dobi drugacno barvo. */
.veja__risba stop.v-obratu { stop-color: var(--lan); }

.veja__deblo { fill: var(--drevo); }

/* VITICE: stroke, ne fill. Debelino nastavi JS na vsaki poti posebej (dve do
   tri vrednosti, ne zvezen razpon) — tu je samo barva. */
.veja__vitice path { fill: none; stroke: var(--drevo); }
/* Pri strokih je treba pokriti stroke, ne fill — to je edina vrstica, po
   kateri se mehanizem obrata razlikuje od faze 10. */
.veja__vitice path.v-obratu { stroke: var(--lan); }

.veja .rast-krog {
  r: 0;
  transition: r 1.35s cubic-bezier(.22,.61,.36,1);
}
.veja .rast-krog.zrasla { r: var(--r-konec, 150px); }

/* Listi so polnjeni mandlji (v referenci so polni, ne obrisi) in se razprejo
   iz svojega središča. */
.veja__listi path {
  fill: var(--drevo);
  opacity: 0;
  transform: scale(.1);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: opacity .5s ease var(--d, 0s),
              transform .8s cubic-bezier(.34,1.2,.64,1) var(--d, 0s);
}
.veja__listi path.zrasla { opacity: 1; transform: scale(1); }
.veja__listi path.v-obratu { fill: var(--lan); }
/* ------------------------------------------------------------- 10. razkritje */
/* Skrivanje je pogojeno z razredom .js, ki ga na <html> postavi vgrajena
   skripta v <head>. Brez tega pogoja bi ob izpadu site.js (blokiran JS,
   omrezna napaka, CSP) ostala VSA vsebina pri opacity 0 — stran bi bila
   prazna. Na /objave je to 37 od 40 elementov. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1) var(--d, 0s),
              transform .8s cubic-bezier(.22,.61,.36,1) var(--d, 0s);
}
.js [data-reveal].vidno { opacity: 1; transform: none; }

/* Obok se ob vstopu "odpre" od spodaj navzgor */
.js [data-reveal="obok"] { transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.22,.61,.36,1) var(--d, 0s), opacity .6s ease var(--d, 0s); }
.js [data-reveal="obok"].vidno { clip-path: inset(0 0 0 0); }

/* -------------------------------------------------------------- 11. noga */
.noga {
  background: var(--sliva);
  color: rgb(var(--lan-rgb) / .8);
  padding-block: var(--s9) var(--s6);
  font-size: var(--t-sm);
}
.noga a { color: rgb(var(--lan-rgb) / .86); text-decoration: none; border-bottom: 1px solid rgb(var(--lan-rgb) / .25); }
.noga a:hover { color: #fff; border-bottom-color: #fff; }

.noga__mreza {
  display: grid;
  gap: var(--s7);
  grid-template-columns: 1fr;
  padding-bottom: var(--s8);
  border-bottom: 1px solid rgb(var(--lan-rgb) / .16);
}
@media (min-width: 640px)  { .noga__mreza { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .noga__mreza { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.noga__znamka .logo__znak { color: rgb(var(--lan-rgb) / .72); margin-bottom: var(--s4); }
.noga__ime {
  font-family: var(--f-naslov); font-size: 1.3rem; color: var(--lan);
  /* Verzalke tudi tu, da se ime instituta pise enako v glavi in nogi. Stranski
     ucinek, ki je dobrodosel: glava je pisala "Tukaj in zdaj", noga pa
     "Tukaj in Zdaj" — verzalke to nedoslednost odpravijo same. */
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 var(--s2);
}
.noga__opis { color: rgb(var(--lan-rgb) / .62); max-width: 30ch; margin: 0; }

.noga__naslov {
  font-family: var(--f-telo);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pesek);
  margin: 0 0 var(--s4);
}
.noga__stolpec p { margin: 0 0 var(--s4); }
.noga__stolpec p:last-child { margin-bottom: 0; }
.noga__drobno { color: rgb(var(--lan-rgb) / .55); font-size: var(--t-xs); }

.noga__seznam { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }

/* Povezave v nogi so SAMOSTOJNE (seznam, ne tekoce besedilo), zato zanje
   izjema za vrsticne povezave ne velja — izmerjene so bile 19 px. Padding je
   tu v redu, ker nimajo podcrtaja tik pod besedilom. */
@media (pointer: coarse) {
  .noga__seznam a { display: inline-block; padding-block: 11px; }
  .noga__seznam { gap: 0; }
}

.noga__dno {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6);
  justify-content: space-between;
  padding-top: var(--s5);
  color: rgb(var(--lan-rgb) / .5);
  font-size: var(--t-xs);
}
.noga__dno p { margin: 0; }

/* --------------------------------------------------- 12. zmanjšano gibanje */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  /* Drevo je izrisano v celoti in mirno — JS maski nastavi polno višino. */
  .veja .rast-krog  { r: var(--r-konec, 400px) !important; }
  .veja__listi path { opacity: 1 !important; transform: scale(1) !important; }
}