/* ═══════════════════════════════════════════════════════════════════════
   ŠALINAČKI LUG — podstrane.
   Isti svet kao Home (main.css): iste boje, slova, scene preko celog
   ekrana i dva jezika prelaza. Ovde je samo ono što je novo — zajednički
   delovi podstrana, pa posebni trenuci svake strane redom.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── uvodni kadar ─────────────────────────────────────────────────────── */
.opener__copy {
  position: absolute;
  z-index: 3;
  left: var(--gut);
  bottom: clamp(6.5rem, 20vh, 12.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.1rem, 2.6vh, 1.8rem);
  max-width: min(66rem, 90vw);
}
.opener__copy .eyebrow { color: var(--ivory-2); }
.opener__copy .lead { max-width: 34ch; color: var(--ivory-2); }
.opener__copy h1 { text-shadow: 0 2px 40px rgb(0 0 0 / 0.25); }
[data-media] { will-change: transform; }
[data-media] img, [data-media] video { will-change: transform; }

/* ── tekst u kadru ────────────────────────────────────────────────────── */
.copy--wide { max-width: min(62rem, 88vw); }
.copy--top { left: var(--gut); top: clamp(6rem, 15vh, 9rem); }
.copy--right { left: auto; right: var(--gut); top: 50%; translate: 0 -50%; }
.copy--center { left: 50%; top: 50%; translate: -50% -50%; align-items: center; text-align: center; max-width: min(50rem, 88vw); }
.latin { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 1.25vw, 1.2rem); color: var(--ivory-2); }
.note { font-size: 0.7rem; letter-spacing: 0.06em; color: var(--ivory-3); }
.veil--left { background: linear-gradient(to right, rgb(9 12 8 / 0.72), rgb(9 12 8 / 0.25) 48%, transparent 70%), linear-gradient(to top, rgb(9 12 8 / 0.55), transparent 36%); }
/* jače: za svetle, zasićene fotografije (npr. Poseti Lug, "Dobro je znati") */
.veil--left-deep { background: linear-gradient(to right, rgb(9 12 8 / 0.9) 0%, rgb(9 12 8 / 0.8) 32%, rgb(9 12 8 / 0.46) 54%, transparent 78%), linear-gradient(to top, rgb(9 12 8 / 0.5), transparent 36%); }
.veil--right { background: linear-gradient(to left, rgb(9 12 8 / 0.76), rgb(9 12 8 / 0.3) 46%, transparent 68%), linear-gradient(to top, rgb(9 12 8 / 0.45), transparent 34%); }
.veil--deep { background: rgb(9 12 8 / 0.58); }
.veil--frame { background: linear-gradient(to bottom, rgb(9 12 8 / 0.62), transparent 34%), linear-gradient(to top, rgb(9 12 8 / 0.7), transparent 40%); }

/* redovi podataka: kao na karti Home-a, tanke linije, bez kutija */
.rows { display: grid; width: 100%; }
.rows li {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 1.2rem;
  align-items: baseline;
  padding: 0.85rem 0;
  border-top: 1px solid var(--hair);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ivory-2);
}
.rows li:last-child { border-bottom: 1px solid var(--hair); }
.rows b { font-family: var(--serif); font-weight: 300; font-size: 1.15rem; line-height: 1.3; color: var(--ivory); }
.rows .social-line { justify-self: start; }
.rows a, .rows .social { justify-self: start; color: var(--ivory); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 0.1em; }
.todo { color: var(--ivory-3); font-style: italic; }

/* ── utisnuto u materijal ─────────────────────────────────────────────────
   Tekst koji stoji na drvetu nije nalepljen preko njega: to je urez.
   Gornja ivica baca senku, dno je tamnije drvo (množi se sa teksturom),
   donja ivica hvata svetlo. Isti postupak kao ime na vratima Home-a. */
.inset { position: relative; display: block; font-family: var(--roman); font-weight: 500; line-height: 1; }
.inset > span { display: block; }
.inset > span + span { position: absolute; inset: 0; }
.inset__sh { color: rgb(10 5 1 / 0.82); transform: translate(-0.022em, -0.03em); mix-blend-mode: multiply; filter: blur(0.5px); }
.inset__hl { color: rgb(255 226 180 / 0.46); transform: translate(0.016em, 0.022em); mix-blend-mode: screen; }
.inset__ink { color: rgb(44 23 8 / 0.9); mix-blend-mode: multiply; }

/* ── daska (ista kao na vratima) ──────────────────────────────────────── */
.plank {
  position: absolute;
  /* jedna traka daske, razvučena duž vlakana (v. assets/_build-pages.sh) */
  background: url(../assets/img/tex-plank.webp) center / 100% 100% no-repeat;
  filter: brightness(0.86) saturate(0.88);
  box-shadow: 0 2.4rem 4rem -2rem rgb(0 0 0 / 0.8), 0 -1px 0 rgb(255 230 190 / 0.08) inset;
}
/* svetlo koje klizi preko drveta */
.plank__light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 34% 90% at var(--lx, 30%) 42%, rgb(255 214 150 / 0.34), transparent 72%);
  mix-blend-mode: soft-light;
}

/* ── vodoravna traka ──────────────────────────────────────────────────── */
.strip {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: clamp(2.4rem, 6vw, 7rem);
  /* dno je malo više od vrha: natpis ispod fotografije ne sme da dođe do brojača u uglu */
  padding: 0 14vw 10svh var(--gut);
  will-change: transform;
}
.strip__intro { flex: 0 0 auto; width: min(34rem, 38vw); display: flex; flex-direction: column; gap: 1.3rem; }
.strip__item { position: relative; flex: 0 0 auto; margin: 0; height: var(--h, 64svh); width: calc(var(--h, 64svh) * var(--ar, 1.5)); }
.strip__frame { position: absolute; inset: 0; overflow: hidden; background: var(--moss-900); }
.strip__frame img, .strip__frame video { position: absolute; inset: 0 -6%; width: 112%; max-width: none; height: 100%; object-fit: cover; will-change: transform; }
.strip__cap { position: absolute; left: 0; top: calc(100% + 1.1rem); width: min(28rem, 100%); display: flex; flex-direction: column; gap: 0.35rem; }
.strip__cap p { font-family: var(--serif); font-style: italic; font-size: clamp(0.98rem, 1.2vw, 1.15rem); line-height: 1.45; color: var(--ivory-2); }
.strip__name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 2.6vw, 2.6rem); line-height: 1.05; letter-spacing: -0.015em; }
.strip__name + .latin { margin-top: -0.1rem; }
.strip__end { flex: 0 0 auto; width: min(30rem, 60vw); }
.strip__count {
  position: absolute;
  z-index: 4;
  right: var(--gut);
  bottom: clamp(1.6rem, 4vh, 2.6rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: var(--ivory-2);
  font-variant-numeric: tabular-nums;
}
.strip__count i { display: block; width: 7rem; height: 1px; background: var(--hair); }
.strip__count b { display: block; height: 100%; background: var(--bronze); transform-origin: left; transform: scaleX(0); }

/* ── sledeće poglavlje ────────────────────────────────────────────────── */
.next__copy {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
  padding: 0 var(--gut);
  text-align: center;
}
.next__copy .eyebrow { color: var(--ivory-2); }
/* „Nastavi“ je pravo dugme (Gordanov zahtev, 1. 10. 2026: neka film vodi dalje): isti jezik kao dugme na vratima — tamna ploča, tanka
   linija, bronzana strelica koja se pomera; na telefonu preko cele širine, da se lako pogodi prstom. Ranije je to bio samo podvučen
   tekst (11 px, površina za dodir 91 × 21 px). */
.next__copy a.link, .strip__end a.link {
  background-image: none;
  background-color: rgb(9 12 8 / 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgb(239 231 214 / 0.8);
  padding: 1.15rem 2.3rem;
  min-height: 3.6rem;
  gap: 1.1em;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #fff;
  opacity: 1;
  box-shadow: 0 0 0 4px rgb(239 231 214 / 0.08);
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s;
}
.next__copy a.link { margin-top: 0.9rem; }
.next__copy a.link i, .strip__end a.link i { color: var(--bronze-lit); font-size: 1.15em; animation: nextNudge 2.4s var(--ease-io) infinite; }
.next__copy a.link:hover, .strip__end a.link:hover { background-color: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.next__copy a.link:hover i, .strip__end a.link:hover i { color: var(--ink); animation: none; transform: translateX(0.4em); }
@media (prefers-reduced-motion: reduce) { .next__copy a.link i, .strip__end a.link i { animation: none; } }
/* telefon: dugme je kompaktno (ne preko cele širine), ali i dalje dovoljno veliko za prst (≥ 48 px visoko) */
@media (max-width: 800px) {
  .next__copy a.link { align-self: center; min-height: 3rem; padding: 0.8rem 1.6rem; gap: 0.9em; margin-top: 0.7rem; font-size: 0.72rem; letter-spacing: 0.26em; text-indent: 0.26em; box-shadow: 0 0 0 3px rgb(239 231 214 / 0.07); }
}
/* kraj Galerije: blok je levo, uz rečenicu, a dugme ispod nje */
.strip__end .next__prog { align-items: flex-start; margin-bottom: 1.5rem; text-align: left; }
.strip__end a.link { margin-top: 1.1rem; white-space: nowrap; }   /* na telefonu je dugme šire od bloka: prelazi u desnu belinu trake, ne lomi tekst */
/* uža traka na telefonu: dugme sa dužim engleskim natpisom („Info and Contact“) ne sme da dođe do potpisa uz desnu ivicu */
@media (max-width: 800px) { .strip__end a.link { min-height: 3rem; padding: 0.8rem 1.4rem; gap: 0.9em; font-size: 0.72rem; letter-spacing: 0.22em; text-indent: 0.22em; box-shadow: 0 0 0 3px rgb(239 231 214 / 0.07); } }
/* na dasci sa urezanim znakom (Poseti Lug → Čuvari Luga) tekst ispod crtica bi se izgubio u rezbariji: ostaju samo crtice */
.next--wood .next__prog small { display: none; }
/* Linkovi su samo naslov i "Nastavi". Ranije je preko cele scene stajao
   razvučen link, pa je svaki dodir/klik u toj sceni (i dodir kojim se zaustavlja
   skrol na telefonu) odvodio na sledeću stranu. */

/* ═══ 01 · O LUGU ══════════════════════════════════════════════════════ */
.dist {
  position: absolute;
  z-index: 3;
  left: var(--gut);
  right: var(--gut);
  bottom: clamp(1.8rem, 6vh, 3.4rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(1.8rem, 4.4vw, 4.6rem);
}
.dist li { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 500; font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ivory-2); }
.dist b { font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 2.7vw, 2.8rem); line-height: 1; letter-spacing: -0.01em; text-transform: none; color: var(--ivory); }
html.js:not(.no-motion) .dist li { opacity: 0; visibility: hidden; }

.names { position: absolute; z-index: 3; left: 0; right: 0; top: 54%; translate: 0 -50%; display: flex; flex-direction: column; gap: clamp(0.8rem, 2.6vh, 1.8rem); pointer-events: none; }
.names__row { white-space: nowrap; width: max-content; will-change: transform; }
.names__row--big { font-family: var(--serif); font-weight: 300; font-size: clamp(3.6rem, 9.4vw, 10.5rem); line-height: 1.02; letter-spacing: -0.03em; }
.names__row--big i { font-style: normal; color: var(--bronze); margin: 0 0.32em; font-size: 0.42em; vertical-align: 0.42em; }
.names__row--small { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.5vw, 2.5rem); color: var(--ivory-2); }
.names__row--small i { font-style: normal; color: var(--bronze); margin: 0 0.6em; }
.names__end { position: absolute; z-index: 3; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--gut); text-align: center; }
html.js:not(.no-motion) .names__end { opacity: 0; visibility: hidden; }

/* 1988: kadar dobija crne trake filmskog formata */
.reel__img img { filter: saturate(0.55) sepia(0.18) contrast(1.08) brightness(0.92); }
.reel__bar { position: absolute; left: 0; right: 0; z-index: 2; height: clamp(14svh, calc((100svh - 100vw / 2.39) / 2), 30svh); background: #050604; transform: scaleY(0); }
.reel__bar--top { top: 0; transform-origin: top; }
.reel__bar--bot { bottom: 0; transform-origin: bottom; }
.reel__top, .reel__bot { position: absolute; z-index: 3; left: var(--gut); right: var(--gut); height: clamp(14svh, calc((100svh - 100vw / 2.39) / 2), 30svh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; }
.reel__top { top: 0; }
.reel__bot { bottom: 0; }
.reel__year { font-family: var(--roman); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.6rem); letter-spacing: 0.3em; text-indent: 0.3em; color: var(--ivory); }
.reel__line { font-family: var(--serif); font-weight: 300; font-size: clamp(1.1rem, 1.9vw, 1.9rem); line-height: 1.3; max-width: 40ch; }
.reel__src { font-size: 0.66rem; letter-spacing: 0.08em; color: var(--ivory-3); }
html.js:not(.no-motion) .reel__top, html.js:not(.no-motion) .reel__bot { opacity: 0; visibility: hidden; }

.years { --yh: clamp(17rem, 50svh, 30rem); position: absolute; z-index: 2; left: 0; top: calc(55% - var(--yh) / 2); height: var(--yh); display: flex; will-change: transform; padding: 0 30vw 0 max(44vw, 26rem); }
.years .plank { left: 0; right: 0; top: 0; height: 58%; }
.year { position: relative; flex: 0 0 auto; width: clamp(17rem, 30vw, 30rem); margin-right: clamp(3rem, 9vw, 9rem); }
.year__num { position: absolute; left: 0; top: 29%; translate: 0 -50%; font-size: clamp(4.2rem, 8.6vw, 9rem); letter-spacing: 0.02em; }
.year__txt { position: absolute; left: 0; top: 66%; max-width: 30ch; font-family: var(--serif); font-weight: 300; font-size: clamp(1.02rem, 1.3vw, 1.28rem); line-height: 1.45; color: var(--ivory-2); }
.year__txt b { display: block; margin-bottom: 0.35rem; font-family: var(--sans); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bronze); }
.years__head { z-index: 3; }
/* natpisi koji klize uz desnu ivicu bledi pre stalnog potpisa, da se ne seku sa njim: edgeFade (js/pages/kit.js) upisuje --edge, a klasu
   .is-edge ima samo natpis koji je baš kod potpisa (inače bez maske); isto za natpise ispod fotografija na trakama */
.year__txt.is-edge, .strip__cap.is-edge {
  --fade: 3rem;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--edge) - var(--fade)), transparent var(--edge));
  mask-image: linear-gradient(90deg, #000 calc(var(--edge) - var(--fade)), transparent var(--edge));
}

/* ═══ 02 · HRASTOVI ════════════════════════════════════════════════════ */
/* 168: broj je prozor u šumu. Crni sloj sa belim ciframa "množi" se sa
   filmom ispod: gde je belo, vidi se šuma; gde je crno, ostaje tama. */
.knock { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: #0b0e09; color: #fff; mix-blend-mode: multiply; }
.knock__num { font-family: var(--serif); font-weight: 400; font-size: min(44vw, 74svh); line-height: 0.8; letter-spacing: -0.05em; font-variant-numeric: lining-nums; transform: translateY(-4%); }
.knock__label { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(2.6rem, 9vh, 5.6rem); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.knock__label .cfact__label { margin: 0; }
.knock__after { z-index: 3; }
html.js:not(.no-motion) .knock__after, html.js:not(.no-motion) [data-knock-veil], html.js:not(.no-motion) .knock__label { opacity: 0; visibility: hidden; }

/* stub: kamera se penje uz deblo, od korena do krošnje — slika je šira od
   ekrana ili bar kvadratna, pa je (3:4) uvek viša od njega */
.layer .tilt__img { position: absolute; left: 50%; top: 0; width: max(100vw, 100svh); margin-left: calc(max(100vw, 100svh) / -2); height: auto; max-width: none; object-fit: fill; will-change: transform; }
.measure { position: absolute; z-index: 3; right: var(--gut); top: 50%; translate: 0 -50%; width: min(26rem, 40vw); display: flex; flex-direction: column; gap: 0; }
.measure li { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 0; border-top: 1px solid var(--hair); }
.measure li:last-child { border-bottom: 1px solid var(--hair); }
.measure b { font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 3.8vw, 3.8rem); line-height: 1; letter-spacing: -0.02em; }
.measure span { font-weight: 500; font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ivory-2); }
.measure .note { padding-top: 1rem; border: 0; }
html.js:not(.no-motion) .measure > * { opacity: 0; visibility: hidden; }
.tilt__head { z-index: 3; }

/* ═══ 03 · FLORA I FAUNA ═══════════════════════════════════════════════ */
.stack__layer { position: absolute; inset: 0; }
html.js:not(.no-motion) .stack__layer:not(:first-child) { opacity: 0; visibility: hidden; }
.stack__layer img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.when { position: absolute; z-index: 3; right: var(--gut); bottom: clamp(2rem, 6vh, 3.4rem); display: flex; gap: 1.6rem; font-weight: 500; font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; }
.when li { opacity: 0.36; transition: opacity 0.6s var(--ease); }
.when li.is-on { opacity: 1; }
.focus__cap { position: absolute; z-index: 3; left: var(--gut); bottom: clamp(3.4rem, 10vh, 7rem); display: flex; flex-direction: column; gap: 0.5rem; max-width: min(36rem, 86vw); }
html.js:not(.no-motion) .focus__cap { opacity: 0; visibility: hidden; }
.focus__name { font-family: var(--serif); font-weight: 300; font-size: clamp(2.8rem, 6vw, 6.6rem); line-height: 1; letter-spacing: -0.025em; }
.focus__line { margin-top: 0.4rem; font-size: clamp(0.95rem, 1.02vw, 1.04rem); line-height: 1.7; max-width: 38ch; opacity: 0.86; }
.focus__n { font-weight: 500; font-size: 0.64rem; letter-spacing: 0.26em; color: var(--bronze); font-variant-numeric: tabular-nums; }
.dusk { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgb(4 7 12 / 0.9), rgb(6 9 10 / 0.96)); opacity: 0; pointer-events: none; }

/* ═══ 04 · ČETIRI GODIŠNJA DOBA ════════════════════════════════════════ */
.cine { position: absolute; inset: 0; z-index: 1; clip-path: inset(23% 29% 23% 29%); will-change: clip-path; }
.cine video { width: 100%; height: 100%; object-fit: cover; }
.cine__t { position: absolute; z-index: 3; top: 50%; translate: 0 -50%; font-family: var(--serif); font-weight: 300; font-size: clamp(2.2rem, 4.6vw, 5rem); line-height: 1; letter-spacing: -0.025em; }
.cine__t--l { right: calc(71% + 2.2vw); text-align: right; }
.cine__t--r { left: calc(71% + 2.2vw); }
.cine__head { z-index: 3; }
.cine__ui { position: absolute; z-index: 4; left: var(--gut); right: var(--gut); bottom: clamp(1.4rem, 4vh, 2.4rem); display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; }
.cine__ui .when { position: static; }
.cine__sound { display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.95rem 1.5rem; border: 1px solid rgb(239 231 214 / 0.45); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; background: rgb(9 12 8 / 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.5s var(--ease), color 0.5s var(--ease); }
.cine__sound:hover, .cine__sound[aria-pressed='true'] { background: var(--ivory); color: var(--ink); }
.cine__sound i { display: block; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.cine__sound[aria-pressed='true'] i { width: 8px; height: 9px; border: 0; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
html.js:not(.no-motion) .cine__ui { opacity: 0; visibility: hidden; }

.sname { position: absolute; z-index: 3; left: var(--gut); bottom: clamp(3.2rem, 10vh, 6.6rem); display: grid; }
.sname > p { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 0.5rem; }
html.js:not(.no-motion) .sname > p { opacity: 0; visibility: hidden; }
.sname i { font-family: var(--roman); font-size: clamp(1rem, 1.3vw, 1.3rem); color: var(--bronze); }
.sname b { font-family: var(--serif); font-weight: 300; font-size: clamp(4.4rem, 12.5vw, 13.5rem); line-height: 0.9; letter-spacing: -0.035em; }
/* svako doba svoje svetlo, preko istog kadra */
/* Svako doba ima svoj sloj boje; smena je pretapanje providnosti (lako za browser). Ranije se menjala sama boja pozadine
   (transition: background) preko mešanja soft-light, što se na telefonu crtalo iznova na svakoj sličici i slika je podrhtavala
   baš dok se doba smenjuju (v. _qa/perf/seasons-jank.mjs). Na telefonu je mešanje obično, pa su boje slabije (--k). */
.tint { --k: 1; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; }
.tint i { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.tint i.is-on { opacity: 1; }
.tint i:nth-child(1) { background: rgb(170 210 120 / calc(0.16 * var(--k))); }   /* proleće */
.tint i:nth-child(2) { background: rgb(250 205 120 / calc(0.14 * var(--k))); }   /* leto */
.tint i:nth-child(3) { background: rgb(225 120 45 / calc(0.2 * var(--k))); }     /* jesen */
.tint i:nth-child(4) { background: rgb(150 185 230 / calc(0.26 * var(--k))); }   /* zima */
@media (max-width: 800px), (pointer: coarse) { .tint { --k: 0.55; mix-blend-mode: normal; } }
/* front godišnjeg doba koji prelazi preko istog stabla: novo doba ulazi sa
   leve strane, a na njegovoj ivici ide mek pojas svetla */
.wipe { position: absolute; inset: 0; overflow: hidden; }
.wipe__layer { position: absolute; inset: 0; }
.wipe__layer img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.front { --w: -20%; -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--w) - 14%), transparent calc(var(--w) + 14%)); mask-image: linear-gradient(90deg, #000 calc(var(--w) - 14%), transparent calc(var(--w) + 14%)); }
html:not(.js) .front, html.no-motion .front { --w: 120%; }
.wipe__edge { position: absolute; top: 0; bottom: 0; left: -20%; width: 26vw; margin-left: -13vw; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent, rgb(255 236 200 / 0.2) 50%, transparent); mix-blend-mode: soft-light; }
/* Lakši front (telefon, dodir): front se otkriva isečkom (clip-path), ne maskom sa promenljivom --w, a običan pojas svetla
   na ivici daje mekoću. Maska preko celog ekrana, sa blendom i okvirom koji se stalno uvećava, crtala se na telefonu iznova na
   svakoj sličici (pretapanje je bilo 3–6 puta sporije). Klasu dodaje js/pages/godisnja-doba.js. */
.wipe--clip .front { -webkit-mask-image: none; mask-image: none; clip-path: inset(0 100% 0 0); }
.wipe--clip .wipe__edge { left: 0; width: 22vw; margin-left: -11vw; mix-blend-mode: normal; background: linear-gradient(90deg, transparent, rgb(255 238 206 / 0.3) 42%, rgb(255 247 228 / 0.55) 50%, rgb(255 238 206 / 0.3) 58%, transparent); }

/* ═══ 05 · POSETI LUG ══════════════════════════════════════════════════ */
.route { position: absolute; z-index: 3; left: var(--gut); right: var(--gut); top: 58%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.route__line { position: absolute; left: 0; right: 0; top: 0.42rem; height: 1px; background: rgb(239 231 214 / 0.3); }
.route li { position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding-top: 2rem; }
.route li::before { content: ''; position: absolute; left: 0; top: 0; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--olive); border: 1px solid var(--ivory-2); }
.route li:last-child::before { background: var(--bronze); border-color: var(--bronze); box-shadow: 0 0 0 5px rgb(176 141 87 / 0.18), 0 0 24px rgb(176 141 87 / 0.5); }
.route b { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.5rem); line-height: 1; }
.route span { font-size: 0.86rem; line-height: 1.5; color: var(--ivory-2); max-width: 24ch; }
.route em { font-weight: 500; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze); }
html.js:not(.no-motion) .route li, html.js:not(.no-motion) .route__line { opacity: 0; }
.route__go { position: absolute; z-index: 3; left: var(--gut); bottom: clamp(1.8rem, 6vh, 3.4rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.4rem; }
html.js:not(.no-motion) .route__go { opacity: 0; visibility: hidden; }
/* omotač stanica i dugmeta: na računaru ne postoji (display: contents), na telefonu je to jedan blok (v. dole) */
.route__wrap { display: contents; }
/* telefon na široko (nizak ekran, ali širi od 800 px): isti raspored kao na uspravnom telefonu — stanice i dugme jedno ispod drugog, bez opisa */
@media (max-height: 520px) and (min-width: 801px) {
  .route__wrap { position: absolute; z-index: 3; left: var(--gut); right: var(--gut); bottom: clamp(1.2rem, 5svh, 2rem); display: flex; flex-direction: column; gap: 1.2rem; }
  .route { position: static; }
  .route li { padding-top: 1.6rem; }
  .route span { display: none; }
  .route__go { position: static; }
}

.board { position: absolute; z-index: 2; left: -4vw; right: -4vw; top: 50%; translate: 0 -54%; height: clamp(15rem, 46svh, 27rem); }
/* Daska s pravilima: svetlije i mirnije drvo (manje kontrasta u vlaknima), da se urezana slova ne gube u šari. */
.board .plank { inset: 0; filter: brightness(1.16) saturate(0.9) contrast(0.86); }
.board .plank__light { background: radial-gradient(ellipse 46% 100% at var(--lx, 30%) 45%, rgb(255 220 162 / 0.46), transparent 78%); }
/* bez CSS translate: GSAP ga pri pomeranju poništava, pa se položaj računa marginom */
.rule { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; height: clamp(15rem, 46svh, 27rem); margin-top: calc(clamp(15rem, 46svh, 27rem) * -0.54); display: grid; place-items: center; text-align: center; }
/* Pravilo se mora pročitati na prvi pogled, i na telefonu: krupna slova (do dva reda), deblji i tamniji urez,
   jača senka gornje ivice i svetla donja ivica, a drvo neposredno iza natpisa je svetlije i glatko. */
.rule::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 64%; translate: 0 -50%; pointer-events: none; background: radial-gradient(ellipse 66% 50% at 50% 50%, rgb(242 204 150 / 0.52), rgb(242 204 150 / 0.26) 62%, transparent 100%); }
/* bez padding-a: slojevi urezanog natpisa (v. .inset) su apsolutno postavljeni preko iste kutije, pa moraju da se lome na istom mestu */
.rule__txt { font-size: clamp(3.1rem, 8.6vw, 7.8rem); line-height: 1.04; letter-spacing: 0.015em; text-wrap: balance; max-width: calc(100% - 2 * var(--gut)); }
.rule .inset > span { mix-blend-mode: normal; -webkit-text-stroke-width: 0.026em; }
.rule .inset__ink { color: rgb(18 8 2 / 0.97); -webkit-text-stroke-color: rgb(18 8 2 / 0.97); }
.rule .inset__sh { color: rgb(4 1 0 / 0.95); -webkit-text-stroke-color: rgb(4 1 0 / 0.95); transform: translate(-0.03em, -0.042em); filter: blur(0.6px); }
.rule .inset__hl { color: rgb(255 232 192 / 0.8); -webkit-text-stroke-color: rgb(255 232 192 / 0.8); transform: translate(0.028em, 0.038em); }
.rule__sub { position: absolute; z-index: 3; left: 0; right: 0; margin: 1.6rem auto 0; top: calc(50% + clamp(15rem, 46svh, 27rem) * 0.46); width: min(40rem, 86vw); text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1.7vw, 1.6rem); line-height: 1.4; color: var(--ivory); }
html.js:not(.no-motion) .rule, html.js:not(.no-motion) .rule__sub { opacity: 0; visibility: hidden; }
/* „Šest pravila.“ (i brojač 01 / 06) je stajalo nisko i dodirivalo dasku (Gordan, 2. 10. 2026): podignuto, samo u ovoj sceni */
.scene[data-sc='pl-code'] .copy--top, .scene[data-sc='pl-code'] .rule__n { top: clamp(5rem, 11vh, 7.4rem); }
.rule__n { position: absolute; z-index: 3; right: var(--gut); top: clamp(6rem, 15vh, 9rem); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.2em; color: var(--ivory-2); font-variant-numeric: tabular-nums; }

@media (max-width: 800px) and (max-height: 640px) { .route span { display: none; } }

/* Poseti Lug, prvi kadar: tabla "Šalinački lug" zauzima levu dve trećine kadra, hrast desnu.
   Naslov je zato u jednom redu na dnu, ISPOD table (i pored njega kratak tekst), da ne
   prekrije urezani natpis. Slika se poravnava odozdo, da ispod table ostane mesta za naslov. */
.sign img { object-position: 50% 78%; }
.veil--floor { background: linear-gradient(to top, rgb(9 12 8 / 0.82) 0%, rgb(9 12 8 / 0.42) 18%, transparent 36%), linear-gradient(to bottom, rgb(9 12 8 / 0.5), transparent 20%); }
.opener__copy--sign {
  bottom: clamp(3.2rem, 8vh, 5.2rem);
  right: var(--gut);
  display: grid;
  grid-template-columns: auto minmax(0, min(25rem, 34vw));
  justify-content: space-between;
  align-items: end;
  gap: 0.4rem clamp(2rem, 5vw, 5rem);
  max-width: none;
}
.opener__copy--sign h1 { white-space: nowrap; }
.sign__side { display: flex; flex-direction: column; gap: 0.6rem; padding-bottom: 0.5em; }
.sign__side .lead { font-size: clamp(1rem, 1.25vw, 1.25rem); }

@media (orientation: portrait) {
  /* Na uspravnom ekranu ceo natpis na tabli ne može da stane u kadar preko celog ekrana
     (16:9 slika), pa je tabla okvir u gornjih ~2/3 ekrana, sa celim natpisom, koji se pri
     dnu utapa u tamnu boju; naslov je ispod njega, na tamnoj podlozi. */
  .sign { bottom: auto; height: 68%; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }
  .sign img { object-position: 33% 50%; }
  /* mala oznaka strane ide iznad naslova, kao na ostalim stranama */
  .opener__copy--sign { grid-template-columns: minmax(0, 1fr); justify-content: start; }
  .opener__copy--sign .sign__side { display: contents; }
  .opener__copy--sign .sign__side .eyebrow { order: -1; }
  .opener__copy--sign h1 { order: 0; }
  .opener__copy--sign .sign__side .lead { order: 1; }
}

/* Poseti Lug, poslednja scena: daska sa urezanim godovima. Znak (630×564 od 1448×1086) je spušten
   (object-position 6%) tako da mu je vrh ispod zaglavlja i da ceo stane; tekst je na dnu. */
.next--wood img { object-position: 50% 6%; }
.veil--wood { background: radial-gradient(ellipse 72% 62% at 50% 38%, rgb(9 12 8 / 0.12), rgb(9 12 8 / 0.6) 100%), linear-gradient(to top, rgb(9 12 8 / 0.72) 0%, rgb(9 12 8 / 0.3) 30%, transparent 52%); }
.next--wood .next__copy { justify-content: flex-end; padding-bottom: clamp(2.6rem, 8.5vh, 5.6rem); }
.next--wood .next__title { font-size: clamp(3rem, 6.4vw, 7rem); }
@media (orientation: portrait) {
  /* uspravni ekran: uža daska kao okvir sa znakom, koji se gore i dole utapa u tamnu boju sajta */
  .next--wood .scene__stage { background: var(--bg-deep); }
  .next--wood [data-media] picture { display: block; position: absolute; left: 0; right: 0; top: 6%; height: 72%; }
  .next--wood [data-media] img {
    object-position: 50% 30%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 64%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 64%, transparent 100%);
  }
}

/* ═══ 06 · ČUVARI LUGA ═════════════════════════════════════════════════ */
/* daska sa vrata Home-a (drvo), sada kao uvod ove strane: iste mere,
   srž znaka na 51,1% / 41,8% slike */
.guardian { background: var(--olive); --w: min(106svh, 150vw); --py: 42svh; }
.guardian__stage { position: absolute; left: calc(50% - var(--w) * 0.511); top: calc(var(--py) - var(--w) * 0.75 * 0.418); width: var(--w); aspect-ratio: 1448 / 1086; container-type: inline-size; transform-origin: 51.1% 41.8%; will-change: transform; }
.guardian__gl { position: absolute; display: block; }
.guardian__flat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.guardian.no-gl .guardian__flat { display: block; filter: brightness(0.86); -webkit-mask-image: radial-gradient(ellipse 58% 66% at 51% 48%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 58% 66% at 51% 48%, #000 30%, transparent 100%); }
.guardian__name { position: absolute; left: 51.1%; top: 64.5%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2.6cqw; }
.guardian__word { font-size: 6cqw; letter-spacing: 0.13em; text-indent: 0.13em; text-transform: uppercase; white-space: nowrap; }
.guardian__kind { font-family: var(--serif); font-size: 2.1cqw; font-weight: 620; letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; white-space: nowrap; }
.guardian__kind .inset__ink { color: transparent; background: linear-gradient(105deg, #b8945a 0%, #cca873 12%, #e8c98c 24%, #fff2c8 38%, #e8c98c 52%, #cca873 64%, #b8945a 76%, #cca873 88%, #e8c98c 100%) var(--shine, 100%) 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; mix-blend-mode: normal; }
html.js:not(.no-motion) .guardian__name > * { opacity: 0; }
.guardian__eyebrow { position: absolute; z-index: 3; left: var(--gut); top: clamp(6rem, 15vh, 9rem); color: var(--ivory-2); }

.specks { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.count { position: absolute; z-index: 3; right: var(--gut); bottom: clamp(3rem, 9vh, 6rem); display: grid; justify-items: end; text-align: right; }
.count__num { font-family: var(--serif); font-weight: 250; font-size: clamp(6rem, 15vw, 15rem); line-height: 0.82; letter-spacing: -0.045em; font-variant-numeric: lining-nums tabular-nums; }
.count__year { margin-top: 1.2rem; font-weight: 500; font-size: 0.74rem; letter-spacing: 0.3em; color: var(--bronze); }
.count__sub { margin-top: 0.5rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.4vw, 1.4rem); color: var(--ivory-2); }
.quote { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(1.8rem, 3.6vw, 3.8rem); line-height: 1.18; letter-spacing: -0.015em; max-width: 26ch; }
.quote + .note { margin-top: 1.4rem; }

/* ═══ 07 · MAPA I OKOLINA ══════════════════════════════════════════════ */
.tour__stop { position: absolute; z-index: 4; left: var(--gut); bottom: clamp(2.6rem, 8vh, 5rem); display: flex; flex-direction: column; gap: 0.6rem; max-width: min(34rem, 86vw); }
html.js:not(.no-motion) .tour__stop { opacity: 0; visibility: hidden; }
.tour__name { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 5.4vw, 5.8rem); line-height: 1; letter-spacing: -0.025em; }
.tour__line { font-size: clamp(0.95rem, 1.02vw, 1.04rem); line-height: 1.7; max-width: 40ch; opacity: 0.86; }
.tour__mark { position: absolute; z-index: 3; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--bronze); box-shadow: 0 0 0 5px rgb(176 141 87 / 0.18), 0 0 26px rgb(176 141 87 / 0.5); }
html.js:not(.no-motion) .tour__mark { opacity: 0; visibility: hidden; }
.topo-dim img { filter: brightness(0.62) blur(2px); }

.bear { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.bear__c { position: absolute; left: var(--bx, 50%); top: var(--by, 52%); translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center; }
.bear__c .pin { position: relative; translate: none; }
.bear__p { position: absolute; left: var(--bx, 50%); top: var(--by, 52%); width: var(--d); height: 1px; transform-origin: 0 50%; transform: rotate(var(--a)); }
.bear__p::before { content: ''; position: absolute; left: 3.2rem; right: 0; top: 0; height: 1px; background: linear-gradient(to right, rgb(239 231 214 / 0.05), rgb(239 231 214 / 0.5)); }
.bear__p span { position: absolute; left: 100%; top: 0; transform: rotate(calc(var(--a) * -1)) translate(var(--tx, 0.8rem), var(--ty, -50%)); transform-origin: 0 0; display: flex; flex-direction: column; gap: 0.2rem; white-space: nowrap; }
.bear__p b { font-family: var(--serif); font-weight: 300; font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1; }
.bear__p small { font-weight: 500; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze); }
html.js:not(.no-motion) .bear__p { opacity: 0; }
.bear__list { display: none; position: absolute; z-index: 3; left: var(--gut); right: var(--gut); bottom: clamp(2rem, 6svh, 3rem); }
.coords { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4.2vw, 4.4rem); line-height: 1.05; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.btns { display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; align-items: center; }

/* ═══ 08 · GALERIJA ════════════════════════════════════════════════════ */
.gal .strip { gap: clamp(2rem, 5vw, 6rem); padding: 0 20vw 0 var(--gut); }
/* Sve fotografije su ISTE veličine (16:9) u pravoj liniji — bez cik-cak rasporeda
   i bez većih i manjih kadrova. Do klika se vidi samo ovako uredan niz. */
.gal .strip__item { --h: 64svh; --ar: 1.7768; cursor: zoom-in; }
.gal .strip__frame img { inset: 0; width: 100%; transition: transform 1.2s var(--ease); }
.gal .strip__item:hover .strip__frame img { transform: scale(1.03); }
.gal__n { position: absolute; left: 0; top: calc(100% + 0.9rem); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.22em; color: var(--ivory-3); font-variant-numeric: tabular-nums; }
.gal__btn { position: absolute; inset: 0; z-index: 2; }

.viewer { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; background: rgb(8 10 7 / 0.97); opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s; }
.viewer[hidden] { display: none; }
.viewer.is-open { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease), visibility 0s; }
.viewer__img { max-width: calc(100vw - 2 * var(--gut) - 8rem); max-height: calc(100svh - 9rem); width: auto; height: auto; object-fit: contain; box-shadow: 0 2rem 5rem -2rem rgb(0 0 0 / 0.8); }
.viewer__bar { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(1.2rem, 3vh, 2rem); display: flex; justify-content: space-between; align-items: center; font-weight: 500; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ivory-2); font-variant-numeric: tabular-nums; }
.viewer__close { position: absolute; top: clamp(1.1rem, 2.4vw, 2rem); right: var(--gut); padding: 0.6rem 0; font-weight: 500; font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; }
.viewer__prev, .viewer__next { position: absolute; top: 50%; translate: 0 -50%; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; font-family: var(--serif); font-size: 1.6rem; color: var(--ivory-2); transition: color 0.3s; }
.viewer__prev { left: calc(var(--gut) - 1rem); }
.viewer__next { right: calc(var(--gut) - 1rem); }
.viewer__prev:hover, .viewer__next:hover { color: var(--ivory); }

/* ═══ 09 · INFO I KONTAKT ══════════════════════════════════════════════ */
.contact { position: absolute; z-index: 3; left: var(--gut); right: var(--gut); top: 50%; translate: 0 -46%; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 7rem); align-items: end; }
.contact__head { display: flex; flex-direction: column; gap: 1.3rem; align-items: flex-start; }

/* ═══ PODRŽI LUG ═══════════════════════════════════════════════════════
   Nije poglavlje „filma“ (00–09), nego poziv: u meniju stoji odvojeno, na dnu. Isti jezik kao ostale strane —
   bez kartica, paketa i tabela; ono malo podataka što postoji stoji na tankim linijama, kao na karti Home-a. */
/* 01 · uspon uz stablo: slika (9:16) je preko cele širine i viša od ekrana; stoji uz njegovo dno (kora), a skrol je
   spušta dok se ne vidi krošnja (js/pages/podrzi-lug.js). Kamera se za to vreme odmiče od kore, oko dna ekrana. */
.climb__cam { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; }
.layer .climb__img { position: absolute; left: 50%; top: auto; bottom: 0; width: max(100vw, 56.25svh); height: auto; margin-left: calc(max(100vw, 56.25svh) / -2); max-width: none; object-fit: fill; will-change: transform; }
.veil--climb { background: linear-gradient(to top, rgb(9 12 8 / 0.8) 0%, rgb(9 12 8 / 0.32) 40%, transparent 66%), linear-gradient(to right, rgb(9 12 8 / 0.5), transparent 58%), linear-gradient(to bottom, rgb(9 12 8 / 0.4), transparent 22%); }

/* 02 · jedan hrast, pa njegov profil: slika se povuče u okvir (clip-path), a pored nje stoji profil */
.oak { position: absolute; inset: 0; z-index: 1; overflow: hidden; will-change: clip-path; }
.oak__pan { position: absolute; inset: 0; will-change: transform; }
.oak__layer { position: absolute; inset: 0; }
.oak__layer img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
html.js:not(.no-motion) .oak__layer:not(:first-child) { opacity: 0; visibility: hidden; }
.opener__copy--pd { bottom: clamp(3.4rem, 10vh, 6.4rem); }
.opener__copy .lead--strong { color: var(--ivory); font-size: clamp(1.45rem, 2.2vw, 2.2rem); max-width: 36ch; }
.opener__copy .lead { text-shadow: 0 1px 18px rgb(0 0 0 / 0.5); }
.opener__copy .lead:not(.lead--strong) { color: rgb(239 231 214 / 0.9); max-width: 40ch; }
.copy--wide .lead { max-width: 40ch; color: rgb(239 231 214 / 0.9); }
.veil--oak { z-index: 2; background: linear-gradient(to top, rgb(9 12 8 / 0.92) 0%, rgb(9 12 8 / 0.72) 26%, rgb(9 12 8 / 0.3) 50%, transparent 68%), linear-gradient(to right, rgb(9 12 8 / 0.55), transparent 60%); }
.oak__future > span { font-style: italic; color: var(--ivory-2); }
.profile { position: absolute; z-index: 3; left: 56vw; right: var(--gut); top: 50%; translate: 0 -44%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; max-width: 36rem; }
html.js:not(.no-motion) .profile, html.js:not(.no-motion) .profile [data-pf] { opacity: 0; visibility: hidden; }
.profile__kicker { font-weight: 500; font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze); }
.profile__name { margin-top: 0.3rem; font-family: var(--serif); font-weight: 300; font-size: clamp(3rem, 6vw, 6.6rem); line-height: 0.95; letter-spacing: -0.03em; }
.profile__name b { font-weight: 300; font-variant-numeric: lining-nums tabular-nums; }
.profile__rows { width: 100%; margin-top: 1.2rem; display: grid; }
.profile__rows > div { display: grid; grid-template-columns: minmax(8.5rem, 12rem) 1fr; gap: 1.2rem; align-items: baseline; padding: 0.7rem 0; border-top: 1px solid var(--hair); }
.profile__rows > div:last-child { border-bottom: 1px solid var(--hair); }
.profile__rows dt { font-weight: 500; font-size: 0.6rem; letter-spacing: 0.22em; line-height: 1.5; text-transform: uppercase; color: var(--ivory-3); }
.profile__rows dd { font-family: var(--serif); font-weight: 300; font-size: clamp(1rem, 1.2vw, 1.18rem); line-height: 1.35; color: var(--ivory); }
.profile__partner dd em { color: var(--bronze-lit); }
.profile__seasons { display: flex; flex-wrap: wrap; gap: 0.1rem 1rem; }
.profile__seasons li { opacity: 0.34; transition: opacity 0.6s var(--ease); }
.profile__seasons li.is-on { opacity: 1; }
.profile__what { max-width: 40ch; font-size: 0.82rem; line-height: 1.55; color: var(--ivory-2); }
.profile__note { margin-top: 0.9rem; max-width: 42ch; font-size: 0.8rem; line-height: 1.6; color: var(--ivory-3); }

/* 04 · Partner Luga: reči i poziv levo, šta partner dobija tiho desno */
.veil--partner { background: linear-gradient(to right, rgb(9 12 8 / 0.88) 0%, rgb(9 12 8 / 0.7) 46%, rgb(9 12 8 / 0.5) 100%), linear-gradient(to top, rgb(9 12 8 / 0.5), transparent 40%); }
.partner { position: absolute; z-index: 3; left: var(--gut); right: var(--gut); top: 50%; translate: 0 -46%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2.4rem, 7vw, 8rem); align-items: end; }
.partner__head { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1rem, 2.4vh, 1.5rem); }
.partner__head .lead { max-width: 34ch; color: var(--ivory-2); }
.partner__cta { margin-top: 0.8rem; }
.partner__gets { padding-bottom: 0.3rem; }
.partner__h { margin-bottom: 0.9rem; font-weight: 500; font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bronze); }
.partner__gets li { padding: 0.62rem 0; border-top: 1px solid var(--hair); font-size: 0.86rem; line-height: 1.5; color: var(--ivory-2); }
.partner__gets li:last-child { border-bottom: 1px solid var(--hair); }
html.js:not(.no-motion) .partner [data-pt] { opacity: 0; visibility: hidden; }

/* 05 · predveče: velika fotografija, skoro ništa drugo */
.veil--end { background: radial-gradient(ellipse 62% 52% at 50% 50%, rgb(9 12 8 / 0.7), rgb(9 12 8 / 0.5) 72%, rgb(9 12 8 / 0.38) 100%), linear-gradient(to top, rgb(9 12 8 / 0.5), transparent 46%); }
.pd-end .lead, .pd-end h2 { text-shadow: 0 1px 24px rgb(0 0 0 / 0.45); }
.pd-end { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.3rem; padding: 0 var(--gut); text-align: center; }
.pd-end .lead { max-width: 32ch; color: rgb(239 231 214 / 0.86); }
.pd-end__cta { margin-top: 1rem; }

/* sledeći korak: izbor „Zanima me“ preko cele strane (isto kao prikazivač fotografija na Galeriji: tamna ploča, tanke linije) */
.ask { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; background: rgb(8 10 7 / 0.97); opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s; }
.ask[hidden] { display: none; }
.ask.is-open { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease), visibility 0s; }
.ask__panel { width: min(34rem, calc(100vw - 2 * var(--gut))); max-height: 100svh; overflow-y: auto; padding: clamp(4.4rem, 11vh, 6rem) 0 clamp(2rem, 6vh, 3rem); }
.ask__close { position: fixed; top: clamp(1.1rem, 2.4vw, 2rem); right: var(--gut); padding: 0.6rem 0; font-weight: 500; font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; }
.ask__form { display: flex; flex-direction: column; gap: 1.1rem; }
.ask__opts { display: grid; margin-top: 0.4rem; }
.ask__opt { display: flex; align-items: center; gap: 1rem; padding: 0.95rem 0; border-top: 1px solid var(--hair); font-family: var(--serif); font-weight: 300; font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.3; color: var(--ivory-2); transition: color 0.4s; }
.ask__opt:last-child { border-bottom: 1px solid var(--hair); }
.ask__opt input { appearance: none; flex: 0 0 auto; width: 0.95rem; height: 0.95rem; margin: 0; border: 1px solid rgb(239 231 214 / 0.55); border-radius: 50%; transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s; }
.ask__opt:hover, .ask__opt:has(input:checked) { color: var(--ivory); }
.ask__opt input:checked { background: var(--bronze-lit); border-color: var(--bronze-lit); box-shadow: 0 0 0 4px rgb(211 172 108 / 0.18); }
.ask__opt input:focus-visible, .ask__field input:focus-visible, .ask__field textarea:focus-visible { outline: 1px solid var(--bronze-lit); outline-offset: 4px; }
.ask__hint { font-size: 0.82rem; color: var(--bronze-lit); }
.ask__field { display: flex; flex-direction: column; gap: 0.4rem; }
.ask__field span { font-weight: 500; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ivory-3); }
.ask__field input, .ask__field textarea { width: 100%; padding: 0.55rem 0; background: transparent; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; font: inherit; font-size: 1rem; color: var(--ivory); resize: none; }
html.has-cursor .ask input, html.has-cursor .ask textarea { cursor: text; }
.ask__send { align-self: flex-start; margin-top: 0.8rem; }
.ask__sent { font-size: 0.86rem; line-height: 1.6; color: var(--ivory-2); }
.ask__direct { font-size: 0.86rem; line-height: 1.6; color: var(--ivory-2); }
.ask__direct a { color: var(--ivory); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 0.1em; }
.ask__to { font-size: 0.74rem; line-height: 1.6; color: var(--ivory-3); }

/* uspravan ili uzak ekran: okvir hrasta je gore, profil ispod njega (isti uslov kao stacked() u js/pages/podrzi-lug.js) */
@media (max-width: 800px), (orientation: portrait) {
  /* profil stoji uz DNO pozornice (100svh), a okvir sa slikom se računa da stane iznad njega (js/pages/podrzi-lug.js, FRAME): na kratkom
     telefonu se profil više ne seče pri dnu. */
  .profile { left: var(--gut); right: var(--gut); top: auto; bottom: max(1.1rem, env(safe-area-inset-bottom)); translate: none; gap: 0.3rem; max-width: none; }
  .profile__name { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .profile__rows { margin-top: 0.6rem; }
  .profile__rows > div { grid-template-columns: 7.6rem 1fr; gap: 0.8rem; padding: 0.42rem 0; }
  .profile__rows dt { font-size: 0.54rem; letter-spacing: 0.18em; }
  .profile__rows dd { font-size: 0.95rem; }
  .profile__note { margin-top: 0.5rem; font-size: 0.74rem; }
  .profile .latin { display: none; }
  .partner { grid-template-columns: 1fr; top: auto; bottom: clamp(2rem, 6svh, 3rem); translate: none; gap: 1.6rem; }
  .partner__gets li { padding: 0.45rem 0; font-size: 0.8rem; }
}
@media (max-height: 700px) and (max-width: 800px), (max-height: 700px) and (orientation: portrait) {
  .profile { gap: 0.2rem; }
  .profile__what { font-size: 0.76rem; line-height: 1.45; }
  .profile__name { font-size: clamp(2rem, 9vw, 2.6rem); }
  .profile__rows { margin-top: 0.3rem; }
  .profile__rows > div { padding: 0.3rem 0; }
  .profile__rows dd { font-size: 0.88rem; line-height: 1.3; }
}
@media (max-height: 800px) and (max-width: 800px), (max-height: 800px) and (orientation: portrait) { .profile__note { display: none; } }

/* ═══ TELEFON ══════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  .opener__copy { bottom: clamp(7rem, 22svh, 11rem); }
  .opener__copy--sign { bottom: clamp(7rem, 21svh, 11rem); grid-template-columns: 1fr; gap: 0.9rem; }
  .opener__copy--sign h1 { font-size: clamp(2.6rem, 11.5vw, 3.6rem); }
  .sign__side { padding-bottom: 0; }
  .copy--right { left: var(--gut); right: auto; top: auto; bottom: clamp(2.5rem, 8svh, 4rem); translate: none; }
  .copy--m-top { top: clamp(5.4rem, 13svh, 7rem); bottom: auto; translate: none; }
  .veil--left, .veil--left-deep, .veil--right { background: linear-gradient(to top, rgb(9 12 8 / 0.9) 0%, rgb(9 12 8 / 0.5) 45%, transparent 75%); }
  .veil--m-top { background: linear-gradient(to bottom, rgb(9 12 8 / 0.88) 0%, rgb(9 12 8 / 0.45) 42%, transparent 64%), linear-gradient(to top, rgb(9 12 8 / 0.7), transparent 34%); }
  .rows li { grid-template-columns: 1fr; gap: 0.2rem; padding: 0.7rem 0; font-size: 0.84rem; }
  .rows b { font-size: 1.05rem; }

  .strip__intro { width: 78vw; }
  .strip__item { --h: 46svh; }
  .strip__count { left: var(--gut); right: auto; }
  /* fotografije u galeriji su 16:9: na uskom ekranu ih (bez ovoga) ima samo uzak isečak.
     Niže su, pa se vidi veći deo kadra; klik ih otvara preko celog ekrana. */
  .gal .strip__item { --h: 40svh; }
  /* uže fotografije = kraća traka: scena se skraćuje da tempo skrola ostane isti kao na računaru */
  .scene.gal { --len: 19.7 !important; }

  .dist { gap: 0.9rem 1.6rem; }
  .dist b { font-size: 1.5rem; }
  .names__row--big { font-size: clamp(3rem, 15vw, 5rem); }
  .reel__line { font-size: 1.05rem; }
  /* „1988.“ je stajalo visoko, uz zaglavlje (Gordan, 2. 10. 2026): na telefonu je gornja traka visoka, pa se godina spušta ka fotografiji */
  .reel__top { padding-top: 12svh; }
  .years { --yh: 52svh; padding-left: 12vw; top: calc(58% - var(--yh) / 2); }
  .year { width: 74vw; margin-right: 10vw; }
  .year__num { font-size: clamp(3.6rem, 19vw, 5.4rem); }

  .measure { right: auto; left: var(--gut); top: auto; bottom: clamp(2rem, 6svh, 3rem); translate: none; width: calc(100vw - 2 * var(--gut)); display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.2rem; }
  .measure li { padding: 0.6rem 0; }
  .measure b { font-size: 1.9rem; }
  .measure .note { grid-column: 1 / -1; }

  .when { left: var(--gut); right: auto; gap: 1rem; font-size: 0.58rem; }
  .cine { clip-path: inset(30% 8% 30% 8%); }
  .cine__t { top: auto; translate: none; font-size: clamp(2rem, 9vw, 3rem); text-align: left; }
  .cine__t--l { left: var(--gut); right: auto; top: 21svh; }
  .cine__t--r { left: var(--gut); bottom: 16svh; }
  .cine video { object-fit: contain; background: #050604; }
  .sname b { font-size: clamp(3.8rem, 20vw, 6rem); }

  /* Put do Luga na telefonu: stanice i dugme su jedno ispod drugog u istom bloku uz donju ivicu, pa se ne mogu preklopiti ni na niskom
     ekranu (ranije je dugme bilo prikovano uz dno, a stanice uz 44 % visine: na ekranima nižim od oko 700 px „Otvori u mapama“ je
     prelazilo preko stanice „još 10 km · Šalinac“). Na jako niskom ekranu ostaju samo naziv i udaljenost, bez opisa. */
  .route__wrap { position: absolute; z-index: 3; left: var(--gut); right: var(--gut); bottom: clamp(1.4rem, 5svh, 3rem); display: flex; flex-direction: column; gap: 1.5rem; }
  .route { position: static; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; }
  .route li { padding-top: 1.7rem; gap: 0.3rem; }
  .route b { font-size: clamp(1.35rem, 6vw, 1.7rem); }
  .route span { font-size: 0.8rem; line-height: 1.4; }
  .route__line { display: none; }
  .route__go { position: static; gap: 0.9rem 1.6rem; }
  .route__go .button { padding: 0.9rem 1.5rem; }
  .rule__txt { font-size: clamp(3.1rem, 13vw, 4.6rem); }

  .count__num { font-size: clamp(5rem, 26vw, 8rem); }
  .quote { font-size: clamp(1.5rem, 7vw, 2.2rem); }

  .bear__p { display: none; }
  .bear__list { display: grid !important; }
  .viewer__img { max-width: 100vw; max-height: calc(100svh - 8rem); }
  .viewer__prev, .viewer__next { top: auto; bottom: 3.6rem; translate: none; }
  /* strelica ne sme da zađe pod uspravni potpis uz desnu ivicu (css/main.css, .credit) */
  .viewer__next { right: calc(var(--gut) + 0.5rem); }
  .contact { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ── Info i kontakt: na telefonu i niskom ekranu strana teče uz skrol ───────────────────────────────────────────────
   Blok (naslov, uvod i deset redova od „Upravljač“ do „Stručni saradnik“) je viši od ekrana, pa zakucan u jedan kadar gubi gornje redove ispod
   zaglavlja (Gordan, 2. 10. 2026: ne vidi se Upravljač i Telefon). Pozornica zato raste sa sadržajem (najmanje ceo ekran), slika je i dalje u
   pozadini, a redovi su u dve kolone (naziv levo, vrednost desno), pa na većini telefona stane skoro sve odjednom.
   Proba: _qa/tests/contact-fit.mjs. */
@media (max-width: 800px), (max-height: 760px) {
  .scene[data-sc='kt-main'] { height: auto !important; }
  .scene[data-sc='kt-main'] .scene__stage { position: relative; height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }
  .contact { position: relative; left: auto; right: auto; top: auto; bottom: auto; translate: none; margin: 0 var(--gut); padding: clamp(6.2rem, 15svh, 8rem) 0 clamp(2.4rem, 6svh, 3.4rem); }
}
/* strana teče uz skrol, pa tekst prolazi ispod zaglavlja: čim se krene sa skrolom, iza zaglavlja dolazi tamna podloga (js/pages/kontakt.js, klasa
   kt-scrolled); na vrhu se ne vidi, da prvi kadar ostane isti */
@media (max-width: 800px), (max-height: 760px) {
  body[data-page='kontakt'] .chrome::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 1.2rem); z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease); background: linear-gradient(to bottom, rgb(9 12 8 / 0.96) 0%, rgb(9 12 8 / 0.92) 70%, transparent 100%); }
  html.kt-scrolled body[data-page='kontakt'] .chrome::after { opacity: 1; }
}
@media (max-width: 800px) {
  .contact .rows li { grid-template-columns: minmax(6.2rem, 7.6rem) 1fr; gap: 0.15rem 0.9rem; align-items: baseline; padding: 0.55rem 0; }
  .contact .rows b { font-size: 0.98rem; line-height: 1.25; }
}

/* ═══ SMANJENJE POKRETA ══════════════════════════════════════════════════
   Scene i dalje vode skrol (js/scenes.js, calm()), ali bez zuma, paralakse i
   širenja maske. Ovde je ono što bi bez pokreta ostalo zaglavljeno u
   početnom stanju. */
html.reduced .cine { clip-path: none; }
html.reduced .reel__bar { transform: none; }
html.reduced .names { top: 48%; gap: 1.6rem; }
html.reduced .names__row { white-space: normal; width: auto; max-width: 100%; padding: 0 var(--gut); }
html.reduced .names__row--big { font-size: clamp(1.8rem, 3.6vw, 3.4rem); line-height: 1.14; }
html.reduced .names__row--small { font-size: clamp(1.05rem, 1.7vw, 1.6rem); }

/* ═══ BEZ SKRIPTE / BEZ POKRETA ══════════════════════════════════════════ */
html:not(.js) .strip, html.no-motion .strip { position: relative; overflow-x: auto; height: 100%; }
html:not(.js) .stack__layer, html.no-motion .stack__layer { position: relative; }
html:not(.js) .guardian__name > *, html.no-motion .guardian__name > * { opacity: 1; }