/* ═══════════════════════════════════════════════════════════════════════
   ŠALINAČKI LUG — Spomenik prirode
   Duboka šumska paleta, ivory tekst, bronza samo u detaljima. Mnogo
   prostora, velika fotografija, mirna i precizna tipografija.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── fontovi (lokalno, bez Google Fonts) ─────────────────────────────────
   Naslovi: Newsreader (varijabilan, optička veličina) — privremena zamena
   za Season Mix (Displaay), font sa Seasats sajta, koji je komercijalan.
   Kad se licenca kupi: dodati @font-face "Season Mix" (primer na dnu
   bloka) i naslovi ga preuzimaju sami, jer je prvi u --serif.
   Ime Luga: Cormorant Garamond, kao u logotipu. Tekst: Manrope.       */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/newsreader-latin-opsz-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/newsreader-latin-ext-opsz-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url(../fonts/newsreader-latin-opsz-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url(../fonts/newsreader-latin-ext-opsz-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(../fonts/manrope-latin-300-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(../fonts/manrope-latin-ext-300-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/manrope-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/manrope-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/manrope-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/manrope-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Season Mix, kad bude licenciran:
@font-face { font-family: 'Season Mix'; font-weight: 300; font-display: swap; src: url(../fonts/season-mix-light.woff2) format('woff2'); }
@font-face { font-family: 'Season Mix'; font-weight: 400; font-display: swap; src: url(../fonts/season-mix-regular.woff2) format('woff2'); }
*/

:root {
  --olive: #11160e;          /* ulaz: tamna maslinasto-šumska, ne crna (malo potamnjeno) */
  --bg-deep: #0b0e09;
  --moss-900: #1a2217;
  --moss-800: #222c1e;
  --moss-700: #2e3a27;
  --ivory: #efe7d6;
  --ivory-2: rgb(239 231 214 / 0.74);
  --ivory-3: rgb(239 231 214 / 0.58);   /* najtiši tekst; 5,8:1 na podlozi sajta (sa 0,46 je bilo 4,0:1, a sav taj tekst je sitan) */
  --hair: rgb(239 231 214 / 0.15);
  --paper: #ebe3d1;
  --sand: #e0d5bd;
  --ink: #1c2318;
  --ink-2: rgb(28 35 24 / 0.72);
  --ink-hair: rgb(28 35 24 / 0.16);
  --bronze: #b08d57;
  --bronze-deep: #8c6d41;
  --bronze-lit: #d3ac6c;     /* bronza koja svetli: sledeće poglavlje i strelica „dalje“ na kraju strane */

  --serif: 'Season Mix', 'Newsreader', Georgia, serif;
  --roman: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Manrope', 'Helvetica Neue', Arial, sans-serif;

  --gut: clamp(1.25rem, 4.4vw, 5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: dark;
}

/* ── osnova ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* Dvoprsti pokret ulevo/udesno na touchpadu inače vraća pregledač na prethodnu
   stranu usred skrolovanja — sajt nema vodoravni skrol, pa se to gasi. */
html, body { overscroll-behavior-x: none; }
html { -webkit-text-size-adjust: 100%; background: var(--olive); }
body {
  margin: 0;
  background: var(--olive);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.is-loading { cursor: progress; }
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, figcaption, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: normal; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 1px solid var(--bronze); outline-offset: 4px; }
::selection { background: var(--bronze); color: var(--olive); }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* bez trake za skrol na telefonu (kliznog pokazivača uz desnu ivicu): sajt ima svoje pokazivače, a ona samo smeta; na računaru ostaje */
@media (hover: none) and (pointer: coarse) {
  html, body, .menu { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar, .menu::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; -webkit-appearance: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: 1rem; z-index: 200; padding: .7rem 1rem; background: var(--ivory); color: var(--ink); transform: translateY(-200%); }
.skip:focus { transform: none; }
/* posle prelaska na drugu stranu fokus se skripta vraća na vrh dokumenta (js/router.js, arrived): bez okvira oko cele strane */
body:focus, body:focus-visible { outline: none; }

/* film grain preko svega — veoma tiho, da slika ne bude plastična */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 96;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
/* telefon: zrno stoji. Preko mirne svetle slike (Četiri godišnja doba) ceo ekran zrna koji skače šest puta u sekundi
   izgleda kao podrhtavanje slike, a na telefonu je to i najskuplji sloj za crtanje */
@media (max-width: 800px), (pointer: coarse) { body::after { animation: none; } }

/* ── tipografija ────────────────────────────────────────────────────────── */
.display-xl, .display-l, .display-m, .menu__list a {
  font-family: var(--serif);
  font-weight: 300;
  font-optical-sizing: auto;
  letter-spacing: -0.022em;
}
.display-xl { font-size: clamp(3rem, 7.6vw, 8.6rem); line-height: 0.98; }
.display-l { font-size: clamp(2.5rem, 5.4vw, 6rem); line-height: 1; }
.display-m { font-size: clamp(2rem, 3.5vw, 3.7rem); line-height: 1.04; }
.lead {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.body { font-size: clamp(0.95rem, 1.02vw, 1.04rem); line-height: 1.78; max-width: 36rem; opacity: 0.86; }
.body--quiet { opacity: 0.62; }
.eyebrow {
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.eyebrow span { color: var(--bronze); margin-right: 1.1em; }
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding-bottom: 0.55em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  background-color: transparent;
  opacity: 0.9;
  transition: background-size 0.6s var(--ease), opacity 0.3s;
}
.link i { font-style: normal; display: inline-block; transition: transform 0.6s var(--ease); }
.link:hover i { transform: translateX(0.4em); }
.link:hover { opacity: 1; }
.button {
  display: inline-block;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
  padding: 1.15rem 2.1rem;
  border: 1px solid rgb(239 231 214 / 0.5);
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s;
}
.button:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }

/* ── napredak kroz „film“: kraj svake strane i Home-a ─────────────────────────
   Red od deset crtica (00–09): viđeno je svetlo, sledeće poglavlje svetli bronzom, ostalo je prigušeno; ispod je rečenica koliko
   ih je još. Blok pravi _pages/build.mjs (podstrane), a na Home-u je upisan u index.html. */
.next__prog { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-bottom: 0.3rem; text-align: center; }
.next__ticks { display: flex; align-items: flex-end; gap: 0.62rem; height: 1.3rem; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.55)); }
.next__ticks i { display: block; width: 2px; height: 0.8rem; background: rgb(239 231 214 / 0.88); }
.next__ticks i.is-later { background: rgb(239 231 214 / 0.3); }
.next__ticks i.is-next { height: 1.3rem; background: var(--bronze-lit); box-shadow: 0 0 10px rgb(211 172 108 / 0.8); animation: nextTick 2.6s var(--ease-io) infinite; }
.next__prog small { font-size: clamp(0.6rem, 0.5rem + 0.18vw, 0.72rem); font-weight: 500; letter-spacing: 0.3em; line-height: 1.7; text-transform: uppercase; color: rgb(239 231 214 / 0.82); text-shadow: 0 1px 8px rgb(0 0 0 / 0.6); text-wrap: balance; }
.next__prog b { font-weight: 600; color: var(--bronze-lit); }
/* telefon na široko (nizak ekran): ostaju samo crtice, da blok ne uđe u zaglavlje */
@media (max-height: 520px) { .next__prog small { display: none; } }
/* „Upoznajte Lug →“ (i dugmad na strani Podrži Lug, .button--solid): isti okvir kao „Nastavi“ na ostalim stranama (css/pages.css, .next__copy a.link) */
.close__copy .button, .button--solid {
  display: inline-flex;
  align-items: center;
  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;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #fff;
  box-shadow: 0 0 0 4px rgb(239 231 214 / 0.08);
}
.close__copy .button:hover, .button--solid:hover { background-color: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.close__copy .button i, .button--solid i { display: inline-block; margin-left: 0.9em; font-size: 1.15em; font-style: normal; color: var(--bronze-lit); animation: nextNudge 2.4s var(--ease-io) infinite; }
.close__copy .button:hover i, .button--solid:hover i { color: var(--ink); animation: none; transform: translateX(0.4em); }
@media (max-width: 800px) { .close__copy .button, .button--solid { min-height: 3rem; padding: 0.8rem 1.6rem; font-size: 0.72rem; letter-spacing: 0.26em; text-indent: 0.26em; box-shadow: 0 0 0 3px rgb(239 231 214 / 0.07); } }
@keyframes nextTick { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes nextNudge { 0%, 55%, 100% { transform: translateX(0); } 28% { transform: translateX(0.5em); } }
@media (prefers-reduced-motion: reduce) { .next__ticks i.is-next, .close__copy .button i, .button--solid i, .menu__cta i { animation: none; } }

/* znak (godovi) kao maska — boja dolazi od teksta oko njega */
.mark {
  display: inline-block;
  background: currentColor;
  -webkit-mask: url(../assets/brand/symbol.svg) center / contain no-repeat;
  mask: url(../assets/brand/symbol.svg) center / contain no-repeat;
}

/* ── otkrivanja ─────────────────────────────────────────────────────────── */
.reveal-line { display: block; overflow: hidden; padding: 0.1em 0 0.16em; margin: -0.1em 0 -0.16em; }
.reveal-line > span { display: block; will-change: transform; text-wrap: balance; }   /* lomljenje u dva reda ravnomerno: ne ostaje jedna reč sama u redu */
/* 112% + rotacija je bilo dovoljno za uzak red, ali na širokom naslovu
   (npr. "Šuma starija") rotacija podigne gornji ugao kutije nazad u vidljivu
   zonu — vrh slova (kvačica na Š, tačke na i/j) je virio i kad je red
   potpuno "skriven". Izmereno i potvrđeno pre popravke: 145% + manja
   rotacija čisti taj ugao sa rezervom, na najširem naslovu na sajtu. */
html.js:not(.no-motion) .reveal-line > span { transform: translate3d(0, 145%, 0) rotate(1deg); }

/* ═══ ULAZ ═══════════════════════════════════════════════════════════════
   Daska sa već urezanim znakom izranja iz tame. Srž znaka je na 51,1% /
   41,8% slike; pozornica se postavlja tako da srž uvek stoji na --py ekrana,
   a sve u drvetu (ime, žlebovi) meri se širinom daske (cqw), pa ostaje
   urezano na istom mestu bez obzira na ekran. */
.door { display: none; }
html.js .door {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: block;
  background: var(--olive);
  overflow: hidden;
  --w: min(106svh, 150vw);
  --py: 40svh;
  /* prolaz: rupa se otvara iz srca znaka, ivica je meka kao kroz objektiv */
  --hole: 0px;
}
/* Maska (rupa) postoji SAMO tokom prolaza (klasa is-passing, js/intro.js). Dok vrata čekaju, maske nema: na iPhone-u se element sa maskom koji u
   sebi ima WebGL platno uopšte ne iscrtava, pa su vrata bila nevidljiva i videlo se samo prvi kadar filma (Gordan, 2. 10. 2026).
   U Safari-ju (iPhone i Mac) se prolaz uopšte radi bez maske, pretapanjem (is-passing se tamo ne dodaje). */
html.js .door.is-passing {
  -webkit-mask-image: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), transparent calc(var(--hole) - 7vmin), #000 var(--hole));
  mask-image: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), transparent calc(var(--hole) - 7vmin), #000 var(--hole));
}
html.no-motion .door { display: none; }
/* Početna iz menija (?uvod): bez vrata — v. js/main.js */
html.skip-door .door { display: none !important; }

/* svetlo koje diše, iza drveta */
.door__breath {
  position: absolute;
  left: 50%;
  top: var(--py);
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  background: radial-gradient(closest-side, rgb(214 178 122 / 0.15), rgb(206 190 146 / 0.05) 42%, transparent 74%);
  animation: breathe 6.8s var(--ease-io) infinite;
  pointer-events: none;
}
@keyframes breathe {
  0%, 100% { transform: scale(0.86); opacity: 0.5; }
  50% { transform: scale(1.04); opacity: 1; }
}

.door__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%;
}

/* živo drvo (WebGL): platno pokriva ceo ekran, ali je unutar pozornice, pa se
   urezano ime stapa sa njim i prolaz uvećava oboje oko srži. Položaj mu
   postavlja skripta (tačno na ekran). Rezervni CSS slojevi ispod koriste se
   samo kad WebGL nije dostupan. */
.door__gl { position: absolute; display: none; }
.door.is-gl .door__gl { display: block; }
.door.is-gl .door__wood, .door.is-gl .door__breath { display: none; }

/* drvo: samo krug svetla oko znaka i imena, ivice tonu u tamu */
.door__wood {
  position: absolute;
  inset: 0;
  opacity: 0;
  isolation: isolate;
  /* krug svetla (prvi sloj) preseca se sa utapanjem ivica same fotografije,
     pa se pravougaonik slike nikad ne vidi, koliko god krug bio širok */
  -webkit-mask-image: radial-gradient(ellipse 58% 66% at 51% 48%, #000 22%, rgb(0 0 0 / 0.78) 42%, rgb(0 0 0 / 0.42) 64%, rgb(0 0 0 / 0.14) 84%, transparent 100%), linear-gradient(to right, transparent, #000 13%, #000 87%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent);
  mask-image: radial-gradient(ellipse 58% 66% at 51% 48%, #000 22%, rgb(0 0 0 / 0.78) 42%, rgb(0 0 0 / 0.42) 64%, rgb(0 0 0 / 0.14) 84%, transparent 100%), linear-gradient(to right, transparent, #000 13%, #000 87%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent);
  -webkit-mask-composite: source-in, source-in;
  mask-composite: intersect;
}
.door__live {
  position: absolute;
  inset: 0;
  --sweep: 100%;
  animation: wood-breath 6.8s var(--ease-io) infinite;
}
@keyframes wood-breath {
  0%, 100% { opacity: 0.86; }
  50% { opacity: 1; }
}
.door__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* pre nego što ga svetlo pronađe: drvo je tamno i ravno, urez se jedva vidi */
.door__img--flat { filter: brightness(0.44) contrast(0.6) saturate(0.86) blur(1.1px); }
/* svetlo prelazi koso preko drveta; iza njegove ivice urez dobija dubinu */
.door__lit {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(112deg, #000 42%, transparent 58%);
  mask-image: linear-gradient(112deg, #000 42%, transparent 58%);
  -webkit-mask-size: 320% 100%;
  mask-size: 320% 100%;
  -webkit-mask-position: var(--sweep) 0;
  mask-position: var(--sweep) 0;
  filter: brightness(0.92) saturate(0.92);
}
.door__sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 43%, rgb(255 206 140 / 0.34) 50%, transparent 57%);
  background-size: 320% 100%;
  background-position: var(--sweep) 0;
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
}

/* ime, urezano u istu dasku */
.door__name {
  /* centrirano na srž znaka (51.1% pozornice), ne na 50% — inače stoji
     par piksela levo od stvarnog centra kruga godova */
  position: absolute;
  left: 51.1%;
  top: 64.5%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6cqw;
}
.carve {
  position: relative;
  margin: 0;
  font-family: var(--roman);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.carve > span { display: block; opacity: 0; }
.carve > span + span { position: absolute; inset: 0; }
/* svetlo je gore levo: gornja ivica ureza baca senku, donja hvata svetlo */
.carve__sh { color: rgb(10 5 1 / 0.86); transform: translate(-0.026em, -0.034em); mix-blend-mode: multiply; filter: blur(0.6px); }
.carve__hl { color: rgb(255 220 165 / 0.5); transform: translate(0.018em, 0.026em); mix-blend-mode: screen; }
.carve__ink { color: rgb(40 21 7 / 0.86); mix-blend-mode: multiply; }
/* na kamenu: urez tamnozelen, ivica bleda kao lišaj */
.door[data-mat="stone"] .door__word .carve__ink { color: rgb(12 18 8 / 0.9); }
.door[data-mat="stone"] .door__word .carve__hl { color: rgb(222 236 200 / 0.3); }
.door[data-mat="stone"] .door__kind .carve__hl { color: rgb(222 236 200 / 0.42); }
.door[data-mat="stone"] .door__quiet { color: rgb(12 18 8 / 0.95); text-shadow: 0 1px 0 rgb(222 236 200 / 0.3); }
.door__word { font-size: 6cqw; letter-spacing: 0.13em; text-indent: 0.13em; }
/* tanak Cormorant se na drvetu gubi: podnaslov je u Newsreaderu, jačeg reza */
.door__kind { font-family: var(--serif); font-size: 2.2cqw; font-weight: 620; letter-spacing: 0.36em; text-indent: 0.36em; }
/* mesingani umetak: sedište u drvetu (senka gore, svetla ivica dole), a preko
   njega mesing po kome prelazi odsjaj (--shine) */
.door__kind .carve__sh { color: rgb(8 4 1 / 0.92); transform: translate(-0.025em, -0.035em); text-shadow: 0 0 0.06em rgb(8 4 1 / 0.9), 0.04em 0.05em 0.02em rgb(8 4 1 / 0.6); }
.door__kind .carve__hl { color: rgb(255 228 180 / 0.55); transform: translate(0.03em, 0.045em); }
.carve__brass {
  /* krajnje trećine su miran antički mesing; srednja je odsjaj koji povremeno
     pređe preko slova (--shine 100% → 0%) */
  /* nikad ispod srednjeg zlata, čak ni van prolaska sjaja — inače se na
     mahovini gubi kao i mastilo */
  background: linear-gradient(105deg, #b8945a 0%, #cca873 12%, #e8c98c 24%, #fff2c8 38%, #e8c98c 52%, #cca873 64%, #b8945a 76%, #cca873 88%, #e8c98c 100%);
  background-size: 300% 100%;
  background-position: var(--shine, 100%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.carve__brass i { background: linear-gradient(90deg, #6e4d1c, #e0bf7c 50%, #6e4d1c); }
.door__kind i { display: inline-block; width: 4.6cqw; height: 0.1em; margin: 0 1.3em 0 0.8em; background: currentColor; vertical-align: 0.34em; }
.door__kind i:last-child { margin: 0 0 0 1.3em; }

.door__gate {
  /* isto kao .door__name: centrirano na srž (51.1%), ne na 50% stranice */
  position: absolute;
  left: 51.1%;
  top: 86%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), visibility 0s linear 0.8s;
}
.door__gate.is-open { opacity: 1; visibility: visible; transform: translateX(-50%); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), visibility 0s; }
.door__enter, .door__quiet { text-transform: uppercase; padding: 0.8em 1.3em; }
.door__enter {
  position: relative;
  font-weight: 400;
  font-size: clamp(0.72rem, 0.84vw, 0.84rem);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--ivory);
}
.door__enter::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.35em;
  width: 2.2rem;
  height: 1px;
  margin-left: -1.1rem;
  background: var(--bronze);
  transition: transform 0.7s var(--ease);
}
.door__enter:hover::after { transform: scaleX(2.4); }
.door.is-gl .door__enter {
  padding: 1em 1.9em;
  color: var(--ivory);
  background: rgb(22 16 9 / 0.78);
  border: 1px solid rgb(214 180 118 / 0.45);
  box-shadow: 0 0.6em 1.8em -0.8em rgb(10 6 2 / 0.7);
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
}
.door.is-gl .door__enter::after { bottom: -1px; }
.door.is-gl .door__enter:hover { background: rgb(14 10 5 / 0.92); border-color: rgb(214 180 118 / 0.8); }
.door.is-gl .door__quiet { margin-top: 0.3rem; color: rgb(236 228 200 / 0.88); font-weight: 600; text-shadow: 0 1px 2px rgb(8 12 5 / 0.7); }
.door.is-gl .door__quiet:hover { color: rgb(255 246 222); }
.door__quiet { font-size: clamp(0.64rem, 0.7vw, 0.72rem); letter-spacing: 0.3em; text-indent: 0.3em; color: var(--ivory-3); transition: color 0.3s; }
.door__quiet:hover { color: var(--ivory-2); }
/* izbor jezika na vratima: gore desno, kao natpisi u zaglavlju koje se pojavi tek posle ulaza (pravi ga _pages/build.mjs kad postoji en/) */
.door__lang {
  position: absolute; z-index: 6; 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; text-decoration: none;
  color: var(--ivory); opacity: 0.85; text-shadow: 0 0 7px rgb(0 0 0 / 0.55), 0 0 2px rgb(0 0 0 / 0.4);
  animation: doorLangIn 1.4s var(--ease) 1.4s backwards; transition: opacity 0.3s;
}
.door__lang:hover, .door__lang:focus-visible { opacity: 1; }
@keyframes doorLangIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .door__lang { animation: none; } }
/* uspravan ekran: daska je šira od ekrana, pa se vidi samo njena sredina —
   kompozicija se spušta na sredinu ekrana, a gornja i donja ivica svetla
   se razlivaju duže, da svetlo ne izgleda kao traka */
@media (orientation: portrait) {
  html.js .door { --py: 44svh; }
  .door__wood {
    -webkit-mask-image: radial-gradient(ellipse 58% 66% at 51% 48%, #000 22%, rgb(0 0 0 / 0.78) 42%, rgb(0 0 0 / 0.42) 64%, rgb(0 0 0 / 0.14) 84%, transparent 100%), linear-gradient(to right, transparent, #000 13%, #000 87%, transparent), linear-gradient(to bottom, transparent, #000 15%, #000 82%, transparent);
    mask-image: radial-gradient(ellipse 58% 66% at 51% 48%, #000 22%, rgb(0 0 0 / 0.78) 42%, rgb(0 0 0 / 0.42) 64%, rgb(0 0 0 / 0.14) 84%, transparent 100%), linear-gradient(to right, transparent, #000 13%, #000 87%, transparent), linear-gradient(to bottom, transparent, #000 15%, #000 82%, transparent);
  }
}

/* ═══ ZAGLAVLJE ══════════════════════════════════════════════════════════ */
.chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.1rem, 2.4vw, 2rem) var(--gut);
  color: var(--ivory);
  transition: color 0.6s var(--ease), opacity 1s var(--ease), transform 1s var(--ease);
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }
html.js:not(.no-motion) body:not(.is-in) .chrome { opacity: 0; transform: translateY(-10px); }
body[data-tone='light'] .chrome { color: var(--ink); }
.brand { display: inline-flex; align-items: center; gap: 0.85rem; }
.brand__mark { width: 30px; height: 30px; }
.brand__name {
  font-family: var(--roman);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.chrome__right { display: flex; align-items: center; gap: clamp(1.2rem, 2.6vw, 2.4rem); }
.sound, .menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 0.6rem 0;
}
.sound__rings { position: relative; width: 16px; height: 16px; }
.sound__rings i {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.55;
}
.sound__rings i:nth-child(1) { width: 16px; height: 16px; }
.sound__rings i:nth-child(2) { width: 10px; height: 10px; }
.sound__rings i:nth-child(3) { width: 4px; height: 4px; background: currentColor; opacity: 0.9; }
.sound[aria-pressed='true'] .sound__rings i:nth-child(1) { animation: ripple 2.6s var(--ease) infinite; }
.sound[aria-pressed='true'] .sound__rings i:nth-child(2) { animation: ripple 2.6s var(--ease) 0.5s infinite; }
@keyframes ripple {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0.15; }
}
html.no-webaudio .sound { display: none; }   /* v. createSound u js/sound.js */
.menu-btn i { display: block; width: 22px; height: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }

/* ═══ POTPIS ═════════════════════════════════════════════════════════════
   "Website by Gordan Horvat / SmartArt Digital": stalno na ekranu, dole desno; CEO tekst
   je jedan link (smartart.agency), ne samo drugi deo. Uspravan je i stoji uz samu ivicu,
   u prostoru izvan sadržaja, pa ne dolazi na koordinate, tekst ni dugmad (na telefonu bi
   vodoravan red bio širi od pola ekrana). Iznad je vrata i menija, ispod zavese prelaza. */
.credit {
  position: fixed;
  right: clamp(0.45rem, 0.9vw, 0.9rem);
  bottom: clamp(1.2rem, 3.2vh, 2.2rem);
  z-index: 110;
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);           /* čita se odozdo naviše */
  white-space: nowrap;
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0.78;
  /* mekana senka, da se čita i preko svetlog neba na slikama */
  text-shadow: 0 0 7px rgb(0 0 0 / 0.55), 0 0 2px rgb(0 0 0 / 0.4);
  transition: opacity 0.4s var(--ease), color 0.6s var(--ease);
}
.credit:hover { opacity: 1; }
body[data-tone='light'] .credit { color: var(--ink); }
/* na vrlo niskom prozoru uspravan red ne staje */
@media (max-height: 460px) { .credit { display: none; } }

/* ═══ MENI ═══════════════════════════════════════════════════════════════ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--olive);
  color: var(--ivory);
  clip-path: circle(0% at calc(100% - var(--gut) - 1.4rem) 2.4rem);
  /* krug iz hamburgera: ekran je pokriven za ~0,35 s (bilo ~0,55 s, uz dug spor rep dok se pokriva
     udaljeni ugao), a krivulja meko kreće, ravnomerno prolazi i meko staje — isto kao krug prelaza (js/shell.js) */
  transition: clip-path 0.55s cubic-bezier(0.33, 0, 0.1, 1);
  will-change: clip-path;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu.is-open { clip-path: circle(150% at calc(100% - var(--gut) - 1.4rem) 2.4rem); }
/* dok je meni otvoren (i dok se otvara/zatvara) strana ispod ne prima klikove; v. menu() u js/shell.js */
html.menu-open main, html.menu-open main *, html.menu-open .footer, html.menu-open .footer *, html.menu-open .brand, html.menu-open .sound { pointer-events: none !important; }
/* Meni je za oko 10% manji nego ranije, a veličina slova zavisi i od VISINE
   ekrana (6,3vh), pa cela lista od deset stavki (00 Početna + devet strana) uvek
   stane bez skrola — i na niskom prozoru laptopa. Na velikom ekranu važi samo 10% manje. */
.menu__inner {
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 3rem;
  /* ceo meni (spisak i podaci sa strane) je podignut za 2 cm — bio je spušten uz donju ivicu; na niskom ekranu
     podizanje se smanjuje (9vh), da lista i dalje stane bez skrola */
  padding: clamp(4.4rem, 11vh, 7rem) var(--gut) calc(clamp(1.4rem, 4vh, 3rem) + min(2cm, 9vh));
}
.menu__list a {
  display: inline-flex;
  align-items: baseline;
  gap: 1.15rem;
  font-size: clamp(1.7rem, min(3.78vw, 5.85vh), 3.96rem);
  line-height: 1.1;
  transition: transform 0.7s var(--ease), color 0.4s;
}
.menu__list a span { font-family: var(--sans); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.2em; color: var(--bronze); }
.menu__list a:hover { transform: translateX(0.35em); }
.menu__list a:hover span { color: var(--ivory); }
/* Podrži Lug: nije poglavlje, nego poziv — odvojen od spiska tankom linijom, na dnu, kao dugme (bronza, kao „sledeće →“).
   Spisak je zato malo niži (5,85vh umesto 6,3vh), da sve i dalje stane bez skrola i na niskom prozoru laptopa. */
.menu__main { display: flex; flex-direction: column; align-items: flex-start; }
.menu__cta { margin-top: clamp(0.9rem, 3vh, 2.2rem); padding-top: clamp(0.9rem, 2.6vh, 1.8rem); border-top: 1px solid var(--hair); min-width: min(24rem, 100%); }
.menu__cta a { display: inline-flex; align-items: center; gap: 1em; padding: 0.95rem 1.5rem; border: 1px solid rgb(211 172 108 / 0.62); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.3em; text-indent: 0.3em; line-height: 1; text-transform: uppercase; color: var(--bronze-lit); transition: background-color 0.4s, color 0.4s, border-color 0.4s; }
.menu__cta i { display: inline-block; font-style: normal; font-size: 1.15em; animation: nextNudge 2.4s var(--ease-io) infinite; }
.menu__cta a:hover { background: var(--bronze-lit); border-color: var(--bronze-lit); color: var(--ink); }
.menu__cta a:hover i { animation: none; transform: translateX(0.35em); }
.menu__cta a[aria-current='page'] { background: rgb(211 172 108 / 0.14); }
/* nizak prozor laptopa: poziv je bliže spisku, a dodatno podizanje menija manje, da i sa pozivom sve stane bez skrola (_qa/tests/menu-fit.mjs) */
@media (max-height: 700px) and (min-width: 801px) {
  .menu__inner { padding-bottom: calc(clamp(1.4rem, 4vh, 3rem) + min(2cm, 4vh)); }
  .menu__cta { margin-top: 1.6vh; padding-top: 1.6vh; }
  .menu__cta a { padding: 0.7rem 1.3rem; }
}
.menu__side { display: flex; flex-direction: column; gap: 1.4rem; font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ivory-2); text-align: right; }
/* oznaka sledećeg poglavlja: film je zamišljen da se gleda redom, a meni je mesto gde se redosled preskače */
.menu__next { align-self: center; margin-left: 0.5rem; padding: 0.55em 0.95em; border: 1px solid rgb(211 172 108 / 0.6); font-family: var(--sans); font-style: normal; font-size: 0.56rem; font-weight: 500; letter-spacing: 0.26em; line-height: 1; text-transform: uppercase; white-space: nowrap; color: var(--bronze-lit); transition: border-color 0.4s, background-color 0.4s; }
.menu__list a:hover .menu__next { border-color: var(--bronze-lit); background: rgb(211 172 108 / 0.12); }
.menu__coords { font-family: var(--serif); font-size: 1.26rem; letter-spacing: 0; color: var(--ivory); }
.menu__lang span[title] { opacity: 0.5; }
/* SR · EN: veliko i vidljivo (bio je sitan tekst). Aktivni jezik je ispunjen, drugi je okvir koji se vidi kao dugme; tačka između je nevidljiva */
.menu__lang { font-size: 0; margin-top: 0.4rem; }
.menu__lang > span, .menu__lang > a {
  display: inline-block;
  min-width: 4rem;
  padding: 0.75rem 1.2rem;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-align: center;
  border: 1px solid rgb(239 231 214 / 0.55);
}
.menu__lang > * + * { margin-left: -1px; }
.menu__lang > [aria-current] { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.menu__lang > a { color: var(--ivory); transition: background-color 0.4s, border-color 0.4s; }
.menu__lang > a:hover { background: rgb(239 231 214 / 0.16); border-color: var(--ivory); }
.menu__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;
}


/* ═══ SCENE ══════════════════════════════════════════════════════════════
   Home nije niz sekcija nego jedna priča. Svaka scena je platno preko
   celog ekrana koje stoji (sticky) dok se skroluje kroz nju. Sledeća scena
   počinje PRE nego što se prethodna završi (negativna margina), pa su neko
   vreme obe zakucane jedna preko druge — tada se nova pretapa preko stare
   (dubina / fade) ili se otvara kroz urezane godove (organska maska).

   --len  koliko se skroluje kroz scenu, u "jedinicama" (--u)
   --in   koliki deo početka je pretapanje preko prethodne scene
   Jedna jedinica = 75% visine ekrana skrola; vremenska linija svake scene
   meri se u istim jedinicama, pa se broj u JS-u i broj u CSS-u slažu.     */
.scene {
  --u: 75svh;
  position: relative;
  height: calc(var(--len) * var(--u) + 100svh);
}
.scene + .scene { margin-top: calc(-100svh - var(--in) * var(--u)); }
/* Sledeća scena počinje ispod prethodne (negativna margina), pa bi njena
   prazna kutija hvatala klikove namenjene linkovima scene koja se još vidi.
   Klik prima samo vidljiva pozornica (skrivena, visibility: hidden, ne). */
.scene { pointer-events: none; }
.scene__stage { pointer-events: auto; }
.scene__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--bg-deep);
  isolation: isolate;
}
/* scena koja se pretapa ne sme da se vidi dok klizi odozdo, pre nego što
   stane — pojavljuje se tek kad je zakucana */
html.js:not(.no-motion) .scene[data-enter] .scene__stage { opacity: 0; visibility: hidden; }
/* prolaz kroz godove: scena se vidi samo kroz organski obris koji raste */
.scene__stage.is-masked {
  -webkit-mask-image: url(../assets/brand/mask-organic.svg);
  mask-image: url(../assets/brand/mask-organic.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--m, 0px) var(--m, 0px);
  mask-size: var(--m, 0px) var(--m, 0px);
  -webkit-mask-position: calc(var(--ox, 50vw) - var(--m, 0px) / 2) calc(var(--oy, 50svh) - var(--m, 0px) / 2);
  mask-position: calc(var(--ox, 50vw) - var(--m, 0px) / 2) calc(var(--oy, 50svh) - var(--m, 0px) / 2);
}

.layer { position: absolute; inset: 0; }
.layer img, .layer video, .layer picture { width: 100%; height: 100%; }
.layer img, .layer video { object-fit: cover; }
.photo img { will-change: transform; }

/* "cover" kutija: slika koja pokriva ekran, a tačke na njoj (natpisi, pin)
   stoje u procentima SAME slike — pa ostaju na mestu pri svakom zumu */
.cover {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, calc(100svh * var(--ar)));
  aspect-ratio: var(--ar);
  transform: translate(-50%, -50%);
}
/* zum i pomeraj idu na unutrašnji sloj — spoljni samo centrira, pa se
   centriranje i kretanje kamere nikad ne otimaju oko istog transforma */
.cover__in { position: absolute; inset: 0; will-change: transform; }
.cover img { width: 100%; height: 100%; object-fit: cover; }

/* velovi: tama je deo kadra (kao u filmu), ne pravougaonik iza teksta */
/* 0 je ostavljalo naslov filma bez ikakve pomoći pozadine dok se prvi put
   pojavljuje — sad ima blago zatamnjenje od samog starta (hero ga potom
   sam podigne do 0.42 dok se čita), a "Mrtvo drvo" i dalje sam postavlja
   svoju vrednost pa ovo za njega ne menja ništa. */
.shade { background: #080b07; opacity: 0.22; }
.veil { pointer-events: none; }
.veil--low { background: linear-gradient(to top, rgb(9 12 8 / 0.82) 0%, rgb(9 12 8 / 0.35) 38%, transparent 64%), linear-gradient(to right, rgb(9 12 8 / 0.45), transparent 55%); }
.veil--canvas { background: linear-gradient(to top, rgb(9 12 8 / 0.78), rgb(9 12 8 / 0.1) 55%, rgb(9 12 8 / 0.25)), radial-gradient(ellipse at 70% 40%, transparent 30%, rgb(9 12 8 / 0.35) 100%); }
.veil--plate { background: linear-gradient(to top, rgb(9 12 8 / 0.8) 0%, transparent 42%), linear-gradient(to bottom, rgb(9 12 8 / 0.4), transparent 22%); }
.veil--map { background: radial-gradient(ellipse at 50% 50%, transparent 35%, rgb(9 12 8 / 0.65) 100%), linear-gradient(to right, rgb(9 12 8 / 0.62), transparent 48%); }
.veil--center { background: radial-gradient(ellipse at center, rgb(9 12 8 / 0.42), rgb(9 12 8 / 0.74)); }

/* tekst kao deo scene: bez pozadine, u praznom delu kadra */
.copy {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 2.4vh, 1.6rem);
  max-width: min(40rem, 88vw);
}
.copy--low { left: var(--gut); bottom: clamp(3.5rem, 11vh, 7.5rem); }
.copy--left { left: var(--gut); top: 50%; translate: 0 -50%; }
.copy .lead { max-width: 32ch; }
.copy .link { margin-top: 0.4rem; }
html.js:not(.no-motion) .reveal-soft { opacity: 0; visibility: hidden; }

/* zaglavlje uvek stoji na slici: tanak tamni prelaz ispod njega */
.chrome::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 150%;
  background: linear-gradient(to bottom, rgb(9 12 8 / 0.42), transparent);
  pointer-events: none;
  z-index: -1;
}

/* ── 01 · film ─────────────────────────────────────────────────────────── */
.film video { will-change: transform; }
.film__title {
  position: absolute;
  z-index: 3;
  left: var(--gut);
  bottom: clamp(6.5rem, 21vh, 13rem);
  color: var(--ivory);
  text-shadow: 0 2px 40px rgb(0 0 0 / 0.25);
}
/* prolaz: urezani godovi preko filma, kamera ulazi do srži (50% / 69%) */
.passage { z-index: 4; opacity: 0; visibility: hidden; }
.passage img { object-position: 50% 69%; transform-origin: 50% 69%; will-change: transform; }
.film__ui {
  position: absolute;
  left: var(--gut);
  right: var(--gut);
  bottom: clamp(1.2rem, 3.2vh, 2.2rem);
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ivory-2);
}
html.js:not(.no-motion) body:not(.is-in) .film__ui { opacity: 0; }
.film__coords { justify-self: end; font-variant-numeric: tabular-nums; }
.film__cue { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.film__cue i { width: 1px; height: 38px; background: linear-gradient(var(--ivory), transparent); transform-origin: top; animation: cue 2.4s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ── 03 · brojevi: jedno platno ─────────────────────────────────────────── */
.canvas__bg { will-change: opacity; }
.canvas__bg img { will-change: transform; }
html.js:not(.no-motion) .canvas__bg:not(:first-child) { opacity: 0; visibility: hidden; }
.canvas__eyebrow { position: absolute; z-index: 3; left: var(--gut); top: clamp(6rem, 15vh, 9rem); color: var(--ivory-2); }
.canvas__facts {
  position: absolute;
  z-index: 3;
  left: var(--gut);
  bottom: clamp(4.5rem, 12vh, 8rem);
  width: min(52rem, 88vw);
  height: clamp(15rem, 44vh, 27rem);
}
.cfact { position: absolute; left: 0; right: 0; bottom: 0; }
html.js:not(.no-motion) .cfact:not(:first-child) { opacity: 0; visibility: hidden; }
.cfact__num {
  font-family: var(--serif);
  font-weight: 250;
  font-optical-sizing: auto;
  font-size: clamp(6.5rem, 18vw, 18rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  font-variant-numeric: lining-nums;
  text-shadow: 0 4px 60px rgb(0 0 0 / 0.3);
}
.cfact__num small { font-size: 0.24em; font-weight: 300; letter-spacing: 0; color: var(--ivory-2); }
.cfact__num--word { font-style: italic; font-size: clamp(4.6rem, 11vw, 12rem); letter-spacing: -0.035em; }
.cfact__label { margin-top: clamp(1.2rem, 2.6vh, 2rem); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze); }
.cfact__sub { margin-top: 0.6rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.5vw, 1.45rem); color: var(--ivory-2); max-width: 30ch; }
.canvas__progress {
  position: absolute;
  z-index: 3;
  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;
}
.canvas__progress i { display: block; width: 7rem; height: 1px; background: var(--hair); }
.canvas__progress b { display: block; height: 100%; background: var(--bronze); transform-origin: left; transform: scaleX(0.25); }

/* pin na karti: tačka i ime, bez nacrtanih krugova */
.pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  translate: -7px -50%;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.2vw, 1.2rem);
  color: var(--ivory);
  white-space: nowrap;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.6);
}
.pin i { width: 14px; height: 14px; 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); }
.pin b { font-weight: 300; }

/* ── 05 · mrtvo drvo ───────────────────────────────────────────────────── */
.photo--deep img { object-position: var(--fx) var(--fy); transform-origin: var(--fx) var(--fy); }
.shade--deep { background: radial-gradient(circle at 47% 64%, transparent 0%, rgb(5 7 4 / 0.6) 45%, rgb(5 7 4 / 0.92) 100%); }

/* ── 06 · izložba ──────────────────────────────────────────────────────── */
.plate { position: absolute; inset: 0; margin: 0; }
.plate img { width: 100%; height: 100%; object-fit: cover; will-change: transform, opacity; }
html.js:not(.no-motion) .plate:not(:first-of-type) { opacity: 0; visibility: hidden; }
.plate__cap {
  position: absolute;
  z-index: 3;
  left: var(--gut);
  bottom: clamp(3.5rem, 10vh, 7rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(34rem, 86vw);
}
html.js:not(.no-motion) .plate__cap { opacity: 0; visibility: hidden; }
.plate__n { font-weight: 500; font-size: 0.64rem; letter-spacing: 0.26em; color: var(--bronze); font-variant-numeric: tabular-nums; }
.plate__name { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 5.4vw, 6rem); line-height: 1; letter-spacing: -0.022em; margin-top: 0.3rem; }
.plate__latin { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 1.3vw, 1.25rem); color: var(--ivory-2); }
.plate__line { margin-top: 0.5rem; font-size: clamp(0.95rem, 1.02vw, 1.04rem); line-height: 1.7; max-width: 36ch; opacity: 0.86; }
.plate:nth-of-type(1) .plate__cap, .life__intro { z-index: 4; }
.life__intro { position: absolute; left: var(--gut); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 1.2rem; }
.life__link { position: absolute; z-index: 5; right: var(--gut); bottom: clamp(1.6rem, 4vh, 2.6rem); }
.veil--plate { z-index: 2; }
figure.plate figcaption { margin: 0; opacity: 1; }

/* ── 07 · godišnja doba: vodoravno ─────────────────────────────────────── */
.track { position: absolute; inset: 0; width: 400%; display: flex; will-change: transform; }
.season { position: relative; flex: 0 0 25%; height: 100%; overflow: hidden; }
/* bez preleta: cela fotografija, onako kako je uslikana — dubinski pomeraj
   kod prelaza je zato isključen u JS-u (bio bi golim ivicama bez rezerve) */
.season__img { position: absolute; inset: 0; will-change: transform; }
.season__img img { width: 100%; height: 100%; object-fit: cover; }
.season::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
/* svako doba svoj ton — ne isti kadar prebojen, nego drugo svetlo */
.season--spring .season__img img { filter: saturate(1.05) brightness(0.92); }
.season--spring::after { background: linear-gradient(to top, rgb(12 22 10 / 0.8), transparent 55%), linear-gradient(120deg, rgb(120 160 90 / 0.12), transparent 60%); }
.season--summer .season__img img { filter: saturate(1.08) brightness(0.95) contrast(1.03); }
.season--summer::after { background: linear-gradient(to top, rgb(20 16 6 / 0.78), transparent 55%), linear-gradient(200deg, rgb(230 190 110 / 0.14), transparent 55%); }
.season--autumn .season__img img { filter: saturate(1.1) brightness(0.86) sepia(0.12); }
.season--autumn::after { background: linear-gradient(to top, rgb(26 12 4 / 0.82), transparent 55%), radial-gradient(ellipse at 70% 30%, rgb(200 110 40 / 0.14), transparent 60%); }
.season--winter .season__img img { filter: saturate(0.55) brightness(0.9) contrast(1.05); }
.season--winter::after { background: linear-gradient(to top, rgb(8 12 16 / 0.82), transparent 55%), linear-gradient(to bottom, rgb(180 200 220 / 0.12), transparent 50%); }
.season__txt { position: absolute; z-index: 2; left: var(--gut); bottom: clamp(4.5rem, 13vh, 9rem); max-width: min(38rem, 86vw); }
.season__n { font-family: var(--roman); font-style: italic; font-size: clamp(1rem, 1.3vw, 1.3rem); color: var(--bronze); }
.season__name { font-family: var(--serif); font-weight: 300; font-size: clamp(4.2rem, 13vw, 14rem); line-height: 0.9; letter-spacing: -0.035em; margin: 0.3rem 0 1.2rem; }
.season__txt p { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.4vw, 1.4rem); color: var(--ivory-2); max-width: 30ch; }
.seasons__head { position: absolute; z-index: 4; left: var(--gut); top: clamp(6rem, 15vh, 9rem); color: var(--ivory-2); }
.seasons__nav {
  position: absolute;
  z-index: 4;
  right: var(--gut);
  top: clamp(6rem, 15vh, 9rem);
  display: flex;
  gap: 1.6rem;
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.seasons__nav li { opacity: 0.38; transition: opacity 0.6s var(--ease); }
.seasons__nav li.is-on { opacity: 1; }
.seasons__link { position: absolute; z-index: 4; right: var(--gut); bottom: clamp(1.6rem, 4vh, 2.6rem); }

/* ── 08 · umetnička karta ──────────────────────────────────────────────── */
.map { background: #10150d; }
.map__label {
  position: absolute;
  translate: -50% -50%;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.9rem, 1.1vw, 1.1rem);
  letter-spacing: 0.04em;
  color: var(--ivory-2);
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.7);
}
.map__aerial { opacity: 0; visibility: hidden; }
.map__info {
  position: absolute;
  z-index: 4;
  left: var(--gut);
  top: 50%;
  translate: 0 -46%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  max-width: min(30rem, 86vw);
}
.map__info > * { opacity: 0; visibility: hidden; }
.map__notes { display: grid; gap: 0; width: 100%; margin-top: 0.4rem; }
.map__notes li {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.8rem 0;
  border-top: 1px solid var(--hair);
  font-size: 0.86rem;
  color: var(--ivory-2);
}
.map__notes li:last-child { border-bottom: 1px solid var(--hair); }
.map__notes b { font-family: var(--serif); font-weight: 300; font-size: 1.15rem; color: var(--ivory); }
.map__links { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; }

/* ── 09 · pod zaštitom: godina urezana u drvo ──────────────────────────── */
/* cela fotografija, bez sečenja: umesto da ispuni ceo ekran (i time
   odseca ivice), staje unutar njega — tamna pozadina scene postaje mek
   okvir oko nje, kao izložen primerak, ne tapeta preko celog ekrana */
.guard__wood img { object-fit: contain; object-position: 50% 50%; }
.guard__wood { transform-origin: 50% 50%; will-change: transform; }
.guard__wood picture { position: absolute; inset: 0; }
.carved {
  /* sidri se za DESNU ivicu (ne centriranjem oko tačke) — širina "1971."
     menja se sa sadržajem, pa ovako nikad ne može da iscuri preko ekrana
     na širim prozorima */
  position: absolute;
  z-index: 2;
  right: clamp(4%, 8vw, 12%);
  top: 50%;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
}
/* Urezano, ne nalepljeno: slovo je tamnije drvo (množenje sa drvetom ispod),
   sa svetlom ivicom dole-desno i senkom gore-levo — kao rez u kori. Ivica
   mora da bude jača nego na sitnom tekstu drugde, jer se ovde takmiči sa
   dosta izraženom teksturom drveta. */
.carved__small, .carved__od, .carved__year > span {
  font-family: var(--roman);
  font-weight: 500;
  line-height: 1;
}
.carved__small, .carved__od {
  /* PUNA boja, bez množenja sa teksturom ispod — dosadašnja "urezana"
     tehnika je bila suviše fina i gubila se u svetlijim mrljama drveta.
     Ovde tekst mora nedvosmisleno da se pročita pre bilo čega drugog. */
  position: relative;
  color: rgb(255 240 208 / 0.98);
  text-shadow: 0 0.05em 0.1em rgb(10 5 1 / 0.9), 0 0 0.6em rgb(0 0 0 / 0.5);
}
.carved__small {
  margin-bottom: 0.2em;
  font-size: clamp(1.3rem, 2.3vw, 2.15rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
}
/* "od": mala spona koja visi između natpisa i godine — manja, kurzivom,
   bez razmaka teksta, kao da vodi pogled naniže ka "1971." */
.carved__od {
  margin-bottom: -0.02em;
  font-size: clamp(1.7rem, 2.9vw, 2.6rem);
  font-style: italic;
  font-weight: 500;
}
/* mek, širok oreol iza celog natpisa — nije oblik nalik nalepnici, nego
   rasplinuta senka koja natpisu daje pozadinu bez obzira šta je ispod */
.carved::before {
  content: '';
  position: absolute;
  inset: -12% -30%;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, rgb(8 4 1 / 0.5), transparent 72%);
  z-index: -1;
  pointer-events: none;
}
.carved__year { position: relative; display: block; font-size: clamp(5.2rem, 10.4vw, 12rem); letter-spacing: 0.02em; transform: translate(1cm, -1cm); }
.carved__year > span { display: block; }
.carved__year > span + span { position: absolute; inset: 0; }
.carved__sh { color: rgb(20 10 2 / 0.7); transform: translate(-0.012em, -0.014em); mix-blend-mode: multiply; filter: blur(0.6px); }
.carved__hl { color: rgb(255 236 200 / 0.5); transform: translate(0.01em, 0.012em); mix-blend-mode: screen; }
.carved__ink { color: rgb(62 36 14 / 0.92); mix-blend-mode: multiply; }
.copy--guard { max-width: min(34rem, 86vw); }

/* ── 10 · najava strane Podrži Lug: kora starog hrasta, dve rečenice, jedan link ── */
.copy--support { max-width: min(58rem, 88vw); }
.support__second > span { font-style: italic; color: var(--ivory-2); }

/* ── 10 · zatvaranje ───────────────────────────────────────────────────── */
.close__copy {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 0 var(--gut);
  text-align: center;
}
.close__mark { width: 52px; height: 52px; margin-bottom: 0.8rem; color: var(--ivory); opacity: 0.9; }
.close__copy .button { margin-top: 1.4rem; }
/* ═══ PODNOŽJE ═══════════════════════════════════════════════════════════ */
.footer {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  padding: clamp(4rem, 11vh, 7rem) var(--gut) 1.8rem;
  background: var(--bg-deep);
  color: var(--ivory-2);
  border-top: 1px solid var(--hair);
}
/* pravi logo-fajl (zvanični lockup, ne live ikona+tekst) — v. README,
   "Logo: zvanični lockup" */
.footer__brand { display: flex; align-items: center; }
.footer__lockup { display: block; height: 2.6rem; width: auto; }
/* broj kolona prati broj vidljivih (kolona „Pratite Lug“ je skrivena dok nema adresa mreža), pa desno ne ostaje prazan prostor */
.footer__cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2rem; }
.footer__cols > div { display: flex; flex-direction: column; gap: 0.7rem; font-size: 0.86rem; }
.footer__cols a { transition: color 0.3s; }
.footer__cols a:hover { color: var(--ivory); }
/* društvene mreže bez adrese ostaju u strani, ali se ne vide (v. _pages/build.mjs, applySocial): hidden mora da pobedi display iz drugih pravila */
.social[hidden], .social-dot[hidden], [data-social-group][hidden] { display: none !important; }
.footer__h { font-weight: 500; font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze); margin-bottom: 0.4rem; }
.footer__base {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hair);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ivory-3);
}
.footer__base a:hover { color: var(--ivory); }

/* ── poruka "u izradi" ─────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  z-index: 120;
  padding: 0.9rem 1.4rem;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ivory);
  background: rgb(17 22 14 / 0.84);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hair);
  transform: translate(-50%, 1rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ═══ PRELAZ IZMEĐU STRANA ═══════════════════════════════════════════════
   JEDAN krug, TAČNO JEDNOM, uvek iz hamburgera (gore desno): organski obris preseka
   debla (ista maska kao prelazi na Home-u), tamniji od menija i od svake strane,
   raste iz hamburgera dok ne pokrije ekran. Nova strana stiže u toj tami i samo se
   brzo pretopi — bez drugog kruga, bez zatvaranja kruga nazad i bez znaka u sredini.
   Tačku (--cx, --cy) postavlja js/shell.js; ovde je ista kao kod kruga menija (.menu). */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 125;
  background: #070a06;
  visibility: hidden;
  pointer-events: none;
  --m: 0px;
  --cx: calc(100vw - var(--gut) - 1.4rem);
  --cy: 2.4rem;
}
/* znak u sredini je bio drugi krug pri otvaranju strane; više ga nema */
.curtain__mark { display: none; }
.curtain.is-on { visibility: visible; pointer-events: auto; }
/* podstrana stiže pokrivena, dok je skripta ne otkrije */
html.js:not(.no-motion) body[data-page]:not(.is-opened) .curtain { visibility: visible; pointer-events: auto; }
/* isto i Home bez vrata (?uvod): stiže pokriven, pa se otkriva čim je prvi kadar filma tu */
html.js:not(.no-motion).skip-door body:not(.is-opened) .curtain { visibility: visible; pointer-events: auto; }
html:not(.js) .curtain, html.no-motion .curtain:not(.is-on) { display: none; }
/* Obris je ista organska ivica kao mask-organic.svg, ali kao gotova providna slika (1024 px):
   krug se samo uvećava, pa se vektor sa mekom ivicom ne iscrtava iznova u svakoj sličici —
   prelaz je zato glatkiji. */
.curtain.is-closing {
  -webkit-mask: url(../assets/brand/mask-organic-curtain.webp) no-repeat;
  mask: url(../assets/brand/mask-organic-curtain.webp) no-repeat;
  -webkit-mask-size: var(--m) var(--m);
  mask-size: var(--m) var(--m);
  -webkit-mask-position: calc(var(--cx) - var(--m) / 2) calc(var(--cy) - var(--m) / 2);
  mask-position: calc(var(--cx) - var(--m) / 2) calc(var(--cy) - var(--m) / 2);
}
/* zvuk je bio uključen na prethodnoj strani: čeka prvi dodir */
.sound.is-waiting .sound__rings i:nth-child(1) { animation: ripple 2.6s var(--ease) infinite; }
.sound.is-waiting .sound__rings i:nth-child(2) { animation: ripple 2.6s var(--ease) 0.5s infinite; }
.menu__list a[aria-current='page'] { color: var(--bronze); }

/* ═══ POKAZIVAČ ══════════════════════════════════════════════════════════
   Ivory prsten koji kasni nekoliko sličica za mišem (kao na sajtu GORDAN
   HORVAT); nad kontrolom se širi i dobija bronzanu ivicu, ne puni se. */
html.has-cursor body, html.has-cursor body * { cursor: none; }
.cursor { position: fixed; top: 0; left: 0; z-index: 130; pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease); will-change: transform; mix-blend-mode: normal; }
.cursor--on { opacity: 1; }
.cursor--out { opacity: 0; }
.cursor i {
  display: block;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border: 1px solid var(--ivory);
  border-radius: 50%;
  transition: width 0.38s var(--ease), height 0.38s var(--ease), margin 0.38s var(--ease), background-color 0.38s var(--ease), border-color 0.38s var(--ease), transform 0.2s var(--ease);
}
body[data-tone='light'] .cursor i { border-color: var(--ink); }
.cursor--live i { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-color: var(--bronze); background: rgb(176 141 87 / 0.1); }
body[data-tone='light'] .cursor--live i { border-color: var(--bronze-deep); }
.cursor--press i { transform: scale(0.84); }


/* ═══ TELEFON ════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  .brand__name { font-size: 0.74rem; letter-spacing: 0.2em; }
  /* natpis uz zvuk se na telefonu ne vidi, ali ostaje za čitače ekrana (display:none bi dugmetu oduzeo ime) */
  .sound__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* Žiža fotografije na uspravnom telefonu: vidi se samo središnjih ~26% širine slike, pa uz sliku stoji style="--px:NN%"
     (vodoravni položaj motiva, 0% levo … 100% desno) i kadar prati motiv (sova, jež, pčelarica…), ne sredinu */
  img[style*="--px"] { object-position: var(--px) 50%; }

  .film__title { bottom: clamp(7rem, 24svh, 12rem); font-size: clamp(2.8rem, 12vw, 4.6rem); }
  .film__ui { grid-template-columns: 1fr auto; }
  .film__place { grid-column: 1 / -1; order: 2; margin-top: 0.6rem; }
  .film__cue { order: 1; }
  .film__coords { display: none; }

  .copy--low { bottom: clamp(2.5rem, 8svh, 4rem); }
  .copy .body { font-size: 0.92rem; line-height: 1.65; }
  .veil--low { background: linear-gradient(to top, rgb(9 12 8 / 0.9) 0%, rgb(9 12 8 / 0.5) 45%, transparent 75%); }

  .canvas__facts { height: 46svh; bottom: 4.5rem; }
  .cfact__num { font-size: clamp(5.4rem, 28vw, 9rem); }
  .cfact__num--word { font-size: clamp(3.6rem, 17vw, 6rem); }
  .canvas__progress { left: var(--gut); right: auto; }
  .pin b { display: none; }

  .copy--left { top: auto; bottom: clamp(2.5rem, 8svh, 4rem); translate: none; }

  .life__intro { top: auto; bottom: 30svh; translate: none; }
  .life__link { left: var(--gut); right: auto; }
  .plate__cap { bottom: clamp(4.5rem, 12svh, 6.5rem); }

  .seasons__nav { top: auto; bottom: 1.8rem; left: var(--gut); right: auto; gap: 1rem; font-size: 0.58rem; }
  .seasons__link { display: none; }
  .season__txt { bottom: clamp(5rem, 14svh, 7rem); }

  .map__info { top: auto; bottom: clamp(2rem, 6svh, 3rem); translate: none; gap: 1rem; }
  .map__notes li { grid-template-columns: 7.2rem 1fr; padding: 0.55rem 0; font-size: 0.8rem; }
  .map__notes b { font-size: 1rem; }
  .veil--map { background: linear-gradient(to top, rgb(9 12 8 / 0.92) 0%, rgb(9 12 8 / 0.55) 50%, rgb(9 12 8 / 0.2) 100%); }

  /* "contain" (cela fotografija) ovde ostavlja sitnu traku na sredini
     visokog uskog ekrana, sa dosta praznine gore/dole — na telefonu se zato
     vraća pun kadar (cover), samo blaže zumiran nego pre */
  .guard__wood img { object-fit: cover; object-position: 50% 66%; }
  .carved { right: auto; left: 50%; top: 24%; translate: -50% -50%; }
  .carved__small { font-size: clamp(1rem, 3.4vw, 1.2rem); }
  .carved__od { font-size: clamp(1.5rem, 5.6vw, 1.8rem); }
  /* 2cm/-1cm pomeraj (desktop) je na uskom ekranu mnogo veći deo širine —
     secao je "1971." i preklapao ga sa "od" iznad */
  .carved__year { font-size: clamp(4.4rem, 26vw, 8rem); transform: none; }
  .guard__wood { transform-origin: 50% 60%; }
  /* „Pod zaštitom od 1971.“ na telefonu se slabo videlo (Gordan, 2. 10. 2026): tamno urezana godina na tamnijem drvetu i svetao natpis na
     svetlom delu. Zato je ovde ceo natpis svetao sa tamnom senkom (kao „Pod zaštitom“ i „od“), krupniji, na jačoj tamnoj podlozi.
     Na računaru ostaje urezano kao ranije. */
  .carved { width: max-content; max-width: 94vw; }   /* inače se „Pod zaštitom“ lomi u dva reda na užem telefonu (širina je do 50% ekrana) */
  .carved::before { inset: -22% -45%; background: radial-gradient(ellipse 60% 56% at 50% 46%, rgb(8 4 1 / 0.78), rgb(8 4 1 / 0.45) 55%, transparent 80%); }
  .carved__small { font-size: clamp(1.1rem, 4.1vw, 1.45rem); }
  .carved__od { font-size: clamp(1.7rem, 6.2vw, 2.1rem); }
  .carved__year { font-size: clamp(4.8rem, 29vw, 8.6rem); }
  .carved__ink { color: rgb(255 242 214); mix-blend-mode: normal; }
  .carved__sh { color: rgb(8 4 1 / 0.9); mix-blend-mode: normal; transform: translate(0.018em, 0.03em); filter: blur(1.2px); }
  .carved__hl { display: none; }

  .footer { grid-template-columns: 1fr; }
  .footer__cols { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .menu__inner { grid-template-columns: 1fr; align-items: start; }
  .menu__side { text-align: left; }
}

/* ═══ BEZ SKRIPTE / BEZ POKRETA ══════════════════════════════════════════
   Stranica mora da stoji i bez animacija: scene jedna ispod druge, svaka
   preko celog ekrana, sve vidljivo i čitljivo. */
html:not(.js) .scene, html.no-motion .scene { height: auto; margin-top: 0; }
html:not(.js) .scene__stage, html.no-motion .scene__stage { position: relative; height: 100svh; }
html:not(.js) .passage, html.no-motion .passage { display: none; }
html:not(.js) .film__title .reveal-line > span, html.no-motion .film__title .reveal-line > span { transform: none; }
html:not(.js) .canvas__facts, html.no-motion .canvas__facts { height: auto; display: flex; gap: 2.4rem; flex-wrap: wrap; }
html:not(.js) .cfact, html.no-motion .cfact { position: relative; }
html:not(.js) .cfact__num, html.no-motion .cfact__num { font-size: clamp(3.6rem, 9vw, 7rem); }
html:not(.js) [data-scene-static-hide], html.no-motion [data-scene-static-hide] { display: none; }
html:not(.js) .scene[data-sc='life'] .scene__stage, html.no-motion .scene[data-sc='life'] .scene__stage { height: auto; }
html:not(.js) .plate, html.no-motion .plate { position: relative; height: 100svh; }
html:not(.js) .plate__cap, html.no-motion .plate__cap { opacity: 1; visibility: visible; }
html:not(.js) .life__intro, html.no-motion .life__intro { position: relative; top: auto; translate: none; padding: 6rem var(--gut) 3rem; }
html:not(.js) .scene[data-sc='seasons'] .scene__stage, html.no-motion .scene[data-sc='seasons'] .scene__stage { overflow-x: auto; }
html:not(.js) .map__info > *, html.no-motion .map__info > * { opacity: 1; visibility: visible; }
html:not(.js) .map__aerial, html.no-motion .map__aerial { opacity: 1; visibility: visible; }
html:not(.js) .carved, html.no-motion .carved { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}