/* ════════════════════════════════════════════════════════════════════════
   css/project-page.css — stranica projekta (project.php)

   Motiv je luk: hero slika se otvara kroz luk koji se skrolom širi preko
   cijelog ekrana, a isti oblik se ponavlja u paleti materijala, u slici
   kuhinje, u pregledu indeksa i u najavi sljedećeg projekta.

   Boja stranice prati sekciju na sredini ekrana (data-pd-theme na <body>).
   --pd-bg / --pd-fg / --pd-accent su registrovane (@property), pa se
   pozadina, tekst i linije pretapaju umjesto da skaču.
   ════════════════════════════════════════════════════════════════════════ */


/* Prelaz između dvije stranice projekta: preglednik drži posljednji kadar stare
   stranice (slika preko cijelog ekrana) dok nova ne nacrta istu sliku, pa ih
   pretopi. Druge stranice sajta ovo nemaju, pa prelaz važi samo ovdje. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
}

/* overflow-x: hidden na html/body (kritični CSS sajta) pravi od body-ja
   kontejner za skrol i ubija position: sticky. clip seče isto, a ne pravi
   kontejner. */
html.pd-html,
html.pd-html body { overflow-x: clip; }
html.pd-html { background: #0e0b09; scroll-behavior: auto; }

body.pd-body {
  --pd-bg: #0e0b09;
  --pd-fg: #eee6da;
  --pd-accent: #d7b584;
  --pd-ease: cubic-bezier(.16, 1, .3, 1);
  --pd-ease-io: cubic-bezier(.76, 0, .24, 1);
  --pd-gut: clamp(20px, 5vw, 80px);
  --pd-col: clamp(14px, 1.6vw, 28px);
  --pd-max: 1680px;
  --pd-serif: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;
  --pd-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --pd-dim: color-mix(in srgb, var(--pd-fg) 62%, transparent);
  --pd-faint: color-mix(in srgb, var(--pd-fg) 42%, transparent);
  --pd-line: color-mix(in srgb, var(--pd-fg) 15%, transparent);
  margin: 0;
  background: var(--pd-bg);
  color: var(--pd-fg);
  font-family: var(--pd-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color 1.1s var(--pd-ease-io);
}
body.pd-body[data-pd-theme="paper"] { --pd-bg: #eee7dc; --pd-fg: #1c1612; --pd-accent: #86683f; }
body.pd-body[data-pd-theme="umber"] { --pd-bg: #1f150f; --pd-fg: #f1e5d4; --pd-accent: #d9a877; }
body.pd-body[data-pd-theme="verde"] { --pd-bg: #141a15; --pd-fg: #e8e6d8; --pd-accent: #c3c79f; }

body.pd-body::before { display: none; }              /* svijetla podloga ostalih stranica */
body.pd-body #vpaa-shell { background: var(--pd-bg); transition: background-color 1.1s var(--pd-ease-io); }

.pd {
  position: relative;
  background: var(--pd-bg);
  color: var(--pd-fg);
  overflow-x: clip;
  transition: background-color 1.1s var(--pd-ease-io), color .9s var(--pd-ease-io);
}
.pd *, .pd *::before, .pd *::after { box-sizing: border-box; }
/* :where() drži reset na nultoj specifičnosti, pa ga pobijedi svako pravilo sa klasom. */
:where(.pd, .pd-lb) :where(p, h1, h2, h3, figure, blockquote, dl, dd, ol, ul) { margin: 0; }
:where(.pd) :where(img) { display: block; max-width: 100%; }
:where(.pd) :where(button) { font: inherit; color: inherit; }
.pd ::selection { background: var(--pd-accent); color: var(--pd-bg); }
.pd :focus-visible,
.pd-lb :focus-visible,
.pd-rail :focus-visible { outline: 1px solid var(--pd-accent); outline-offset: 5px; }

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

/* ── Plutajuće zaglavlje: staklo u boji sekcije ─────────────────────────── */
body.pd-body .h2-top.is-floating {
  background: color-mix(in srgb, var(--pd-bg) 80%, transparent) !important;
  border-bottom-color: color-mix(in srgb, var(--pd-fg) 9%, transparent) !important;
  box-shadow: none !important;
}
body.pd-body .h2-top.is-floating a,
body.pd-body .h2-top.is-floating .h2-search-btn span,
body.pd-body .h2-top.is-floating .h2-search-btn svg,
body.pd-body .h2-top.is-floating .h2-login-btn svg,
body.pd-body .h2-top.is-floating .h2-burger,
body.pd-body .h2-top.is-floating .h2-register,
body.pd-body .h2-top.is-floating .h2-lang-current {
  color: var(--pd-fg) !important;
  border-color: color-mix(in srgb, var(--pd-fg) 38%, transparent) !important;
}
body.pd-body .h2-top.is-floating .nav-svg-logo { color: color-mix(in srgb, var(--pd-fg) 80%, transparent); }
body.pd-body .h2-top.is-floating .h2-search-btn,
body.pd-body .h2-top.is-floating .h2-login-btn,
body.pd-body .h2-top.is-floating .h2-register { background: color-mix(in srgb, var(--pd-fg) 5%, transparent) !important; }
body.pd-body .h2-top.is-floating .h2-register:hover { background: var(--pd-fg) !important; color: var(--pd-bg) !important; }
body.pd-body .h2-top:not(.is-floating) { border-bottom-color: transparent; }

/* ── Zajednička tipografija ─────────────────────────────────────────────── */
.pd-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 500 10px/1 var(--pd-sans);
  letter-spacing: .34em;
  text-transform: uppercase;
}
.pd-label-num {
  color: var(--pd-accent);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.pd-label-num::after {
  content: "";
  width: clamp(28px, 3vw, 54px);
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.pd-label-txt { color: var(--pd-dim); }

.pd-h2 {
  font: 300 clamp(46px, 7.4vw, 132px)/.9 var(--pd-serif);
  letter-spacing: -.022em;
  text-wrap: balance;
}
.pd-lede {
  font: 300 clamp(16px, 1.25vw, 20px)/1.65 var(--pd-sans);
  color: var(--pd-dim);
  max-width: 30em;
  text-wrap: pretty;
}
.pd-text {
  font: 300 clamp(15px, 1.05vw, 17px)/1.8 var(--pd-sans);
  color: var(--pd-dim);
  max-width: 34em;
  text-wrap: pretty;
}
.pd-say {
  font: 300 clamp(24px, 2.3vw, 40px)/1.22 var(--pd-serif);
  letter-spacing: -.005em;
  text-wrap: pretty;
}

/* Riječi izlaze iz maske */
.pd-words .m {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .06em .02em .14em;
  margin: -.06em -.02em -.14em;
}
.pd-words .m > span {
  display: inline-block;
  transition: transform 1.3s var(--pd-ease);
  transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0ms));
}
.js .pd-words:not(.is-in) .m > span { transform: translate3d(0, 108%, 0); }

/* Blag uspon */
.pd-rise {
  transition: opacity 1.2s var(--pd-ease), transform 1.5s var(--pd-ease);
  transition-delay: var(--d, 0s);
}
.js .pd-rise:not(.is-in) { opacity: 0; transform: translate3d(0, 34px, 0); }

/* ── Slike ──────────────────────────────────────────────────────────────── */
.pd-fig { position: relative; }
.pd-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 4 / 3);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  background: color-mix(in srgb, var(--pd-fg) 7%, transparent);
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
.pd-media-inner {
  position: absolute;
  inset: -7% 0;
  display: block;
  will-change: transform;
}
.pd-media picture { display: block; width: 100%; height: 100%; }
.pd-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 2.2s var(--pd-ease), filter 1.2s var(--pd-ease);
}
.js .pd-media { clip-path: inset(100% 0 0 0); transition: clip-path 1.6s var(--pd-ease-io); }
.js .pd-media.is-in { clip-path: inset(0 0 0 0); }
.js .pd-media:not(.is-in) img { transform: scale(1.22); }
.pd-media.is-in:hover img { transform: scale(1.035); transition-duration: 1.4s; }
.pd-media--arch { border-radius: 999px 999px 0 0; }
.js .pd-media--arch { clip-path: inset(100% 0 0 0 round 999px 999px 0 0); }
.js .pd-media--arch.is-in { clip-path: inset(0 0 0 0 round 999px 999px 0 0); }

.pd-cap {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-top: 16px;
  font: 400 11px/1.55 var(--pd-sans);
  letter-spacing: .06em;
  color: var(--pd-faint);
}
.pd-cap-num { font-variant-numeric: tabular-nums; letter-spacing: .22em; color: var(--pd-accent); flex: none; }
.pd-cap-txt i { font-style: normal; opacity: .6; padding: 0 .2em; }

/* ════════════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════════════ */
.pd-hero {
  position: relative;
  height: 250vh;
  background: #0e0b09;
  color: #efe7db;
}
.pd-hero-pin {
  --aw: clamp(300px, 27vw, 560px);
  --ah: min(69vh, calc(var(--aw) * 1.9));
  --acy: 53.5%;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 46% 58% at 50% var(--acy), rgba(122, 78, 46, .26), rgba(122, 78, 46, 0) 70%),
    radial-gradient(ellipse 90% 80% at 50% 100%, rgba(58, 38, 24, .35), rgba(58, 38, 24, 0) 70%),
    #0e0b09;
}
/* Film grain: blago, samo u heroju */
.pd-hero-pin::after {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 6;
  will-change: transform;
  pointer-events: none;
  opacity: .075;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: pd-grain 1.4s steps(7) infinite;
}
@keyframes pd-grain {
  0%, 100% { transform: translate3d(0, 0, 0); }
  15% { transform: translate3d(-4%, 3%, 0); }
  30% { transform: translate3d(3%, -5%, 0); }
  45% { transform: translate3d(-6%, -2%, 0); }
  60% { transform: translate3d(5%, 4%, 0); }
  75% { transform: translate3d(-2%, 6%, 0); }
  90% { transform: translate3d(6%, -3%, 0); }
}

/* Mjerni okvir luka: JS čita njegove dimenzije, CSS ih zadaje na jednom mjestu. */
.pd-hero-archbox {
  position: absolute;
  left: 50%;
  top: var(--acy);
  width: var(--aw);
  height: var(--ah);
  transform: translate(-50%, -50%);
  visibility: hidden;
  pointer-events: none;
}

.pd-hero-word {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--acy) - 50%);
  height: 100%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  pointer-events: none;
  font-family: var(--pd-serif);
  font-weight: 300;
  font-size: min(calc(132vw / var(--len, 2)), 62vw, 104vh);
  line-height: .78;
  letter-spacing: -.045em;
  white-space: nowrap;
  text-align: center;
  will-change: transform;
  color: #efe7db;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  transform-origin: 50% 50%;
}
.pd-hero-line-row { display: block; }
.pd-hero-word .pd-cm {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .04em .03em .1em;
  margin: -.04em -.03em -.1em;
}
.pd-hero-word .pd-cm > span {
  display: inline-block;
  transition: transform 1.7s var(--pd-ease);
  transition-delay: calc(.5s + var(--i, 0) * 90ms);
}
.pd-hero-word .pd-cs { display: inline-block; width: .22em; }
html.pd-boot .pd-hero-word .pd-cm > span { transform: translate3d(0, 104%, 0); }

.pd-hero-word--line {
  z-index: 3;
  color: transparent;
  -webkit-text-stroke: 1.15px rgba(244, 238, 229, .92);
}

.pd-hero-media {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(calc(var(--acy) - var(--ah) / 2) calc(50% - var(--aw) / 2) calc(100% - var(--acy) - var(--ah) / 2) calc(50% - var(--aw) / 2) round calc(var(--aw) / 2) calc(var(--aw) / 2) 0 0);
  will-change: clip-path;
}
html.pd-boot .pd-hero-media { clip-path: inset(100% 50% 0 50%); }
html.pd-enter-full .pd-hero-media { clip-path: inset(0 0 0 0) !important; }

.pd-hero-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #17110d;
  cursor: pointer;
}
.pd-hero-img picture { display: block; width: 100%; height: 100%; }
.pd-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  transform-origin: 50% var(--acy);
  will-change: transform;
}
html.pd-enter-full .pd-hero-img img { transform: none; }
.pd-hero-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(10, 7, 5, .58) 0%, rgba(10, 7, 5, 0) 38%),
    linear-gradient(to bottom, rgba(10, 7, 5, .35) 0%, rgba(10, 7, 5, 0) 22%);
}
.pd-hero-cap {
  position: absolute;
  left: var(--pd-gut);
  bottom: max(28px, 4.5vh);
  z-index: 4;
  font: 400 11px/1.4 var(--pd-sans);
  letter-spacing: .12em;
  color: rgba(244, 238, 229, .82);
  opacity: 0;
}
.pd-hero-cap span { color: #d7b584; letter-spacing: .24em; margin-right: 10px; }

.pd-hero-arch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.pd-hero-arch path {
  fill: none;
  stroke: rgba(239, 231, 219, .34);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.2s var(--pd-ease-io) .1s;
}
html.pd-boot .pd-hero-arch path { stroke-dashoffset: 1; }

.pd-hero-ui {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  padding: calc(clamp(92px, 10vh, 124px) + env(safe-area-inset-top, 0px)) var(--pd-gut) calc(max(26px, 4.2vh) + env(safe-area-inset-bottom, 0px));
  font: 500 10px/1.7 var(--pd-sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(239, 231, 219, .74);
}
.pd-hero-ui > *,
.pd-hero-foot > * {
  transition: opacity 1.3s var(--pd-ease), transform 1.6s var(--pd-ease);
  transition-delay: var(--d, 0s);
}
html.pd-boot .pd-hero-kicker,
html.pd-boot .pd-hero-place,
html.pd-boot .pd-hero-foot > * { opacity: 0; transform: translate3d(0, 18px, 0); }
.pd-hero-kicker { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 6px; }
.pd-hero-no { color: #d7b584; }
.pd-hero-place { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; display: flex; flex-direction: column; gap: 6px; }
.pd-hero-foot {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
}
.pd-hero-rest {
  font: italic 300 clamp(36px, 3.6vw, 64px)/.95 var(--pd-serif);
  letter-spacing: -.012em;
  text-transform: none;
  color: #f4eee5;
  margin-bottom: 14px;
}
.pd-hero-sub { max-width: 34ch; color: rgba(239, 231, 219, .62); letter-spacing: .26em; }
.pd-hero-area { justify-self: end; text-align: right; }
.pd-hero-cue {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 9px;
  letter-spacing: .4em;
}
.pd-hero-cue-line {
  position: relative;
  width: 1px;
  height: 58px;
  overflow: hidden;
  background: rgba(239, 231, 219, .18);
}
.pd-hero-cue-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #efe7db;
  transform: translate3d(0, -100%, 0);
  animation: pd-cue 2.4s var(--pd-ease-io) infinite;
}
@keyframes pd-cue {
  0% { transform: translate3d(0, -100%, 0); }
  55% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 100%, 0); }
}

/* ════════════════════════════════════════════════════════════════════════
   01 · KONCEPT
   ════════════════════════════════════════════════════════════════════════ */
.pd-intro { position: relative; padding: clamp(110px, 15vw, 250px) 0 clamp(90px, 11vw, 190px); }
.pd-intro-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pd-col);
  row-gap: clamp(56px, 7vw, 120px);
}
.pd-intro .pd-label { grid-column: 1 / span 3; padding-top: .95em; align-self: start; }
.pd-statement {
  grid-column: 4 / -1;
  font: 300 clamp(31px, 4.25vw, 76px)/1.06 var(--pd-serif);
  letter-spacing: -.016em;
  text-wrap: pretty;
  --p: 1;
}
.pd-statement .w {
  opacity: clamp(.12, calc((var(--p) * (var(--n) + 9) - var(--i)) / 6), 1);
}
.pd-intro-body {
  grid-column: 4 / span 4;
  font: 300 clamp(15px, 1.08vw, 17.5px)/1.8 var(--pd-sans);
  color: var(--pd-dim);
  text-wrap: pretty;
}
.pd-facts {
  grid-column: 9 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--pd-line);
}
.pd-facts > div { padding: 17px 0 19px; border-bottom: 1px solid var(--pd-line); min-width: 0; }
.pd-facts > div:nth-child(odd) { padding-right: 18px; }
.pd-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pd-facts dt {
  font: 500 9.5px/1 var(--pd-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--pd-faint);
  margin-bottom: 11px;
}
.pd-facts dd { font: 400 clamp(19px, 1.5vw, 25px)/1.2 var(--pd-serif); }
.pd-facts--wide { grid-column: 4 / -1; grid-template-columns: repeat(3, 1fr); }
.pd-facts--wide > div:nth-child(odd) { padding-right: 0; }
.pd-facts--wide > div { padding-right: 18px; }
.pd-facts--wide > div:last-child:nth-child(odd) { grid-column: auto; }

/* ════════════════════════════════════════════════════════════════════════
   POGLAVLJA
   ════════════════════════════════════════════════════════════════════════ */
.pd-chapter { position: relative; padding: clamp(80px, 10vw, 170px) 0; }
.pd-chapter--flow { padding: clamp(40px, 5vw, 90px) 0; }
.pd-chapter--flow > * + * { margin-top: clamp(80px, 10vw, 170px); }
.pd-chapter-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pd-col);
  align-items: end;
  margin-bottom: clamp(56px, 7vw, 120px);
}
.pd-chapter-head .pd-label { grid-column: 1 / -1; margin-bottom: clamp(26px, 3vw, 44px); }
.pd-chapter-head .pd-h2 { grid-column: 1 / span 8; }
.pd-chapter-head .pd-lede { grid-column: 9 / -1; padding-bottom: .5em; }
.pd-chapter-head--tight { margin-bottom: clamp(48px, 6vw, 96px); }

.pd-bleed .pd-media--bleed { height: clamp(420px, 96vh, 1120px); aspect-ratio: auto; }
/* Puna širina se ne otkriva odozdo nego se raširi od margina do ivica (JS, prema skrolu). */
.js .pd-media[data-pd-widen] { transition: none; clip-path: inset(0 var(--pd-gut) 0 var(--pd-gut) round 2px); }
.pd-bleed .pd-cap { padding-top: 18px; }

.pd-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pd-col);
  align-items: end;
  margin-top: clamp(90px, 11vw, 190px);
}
.pd-split > .pd-fig { grid-column: 1 / span 8; }
.pd-split-text { grid-column: 10 / -1; padding-bottom: clamp(40px, 5vw, 90px); }
.pd-split--left > .pd-fig { grid-column: 5 / -1; grid-row: 1; }
.pd-split--left .pd-split-text { grid-column: 1 / span 3; grid-row: 1; }

.pd-pair {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pd-col);
  align-items: start;
}
.pd-pair-a { grid-column: 1 / span 6; }
.pd-pair-b { grid-column: 8 / -1; margin-top: clamp(80px, 14vw, 260px); }

.pd-offset {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pd-col);
}
.pd-offset--right > .pd-fig { grid-column: 4 / -1; }
.pd-offset--left > .pd-fig { grid-column: 1 / span 9; }

/* ── Kuhinja: slika u luku ──────────────────────────────────────────────── */
.pd-arch { padding: clamp(100px, 12vw, 210px) 0; }
.pd-arch-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pd-col);
  align-items: start;
}
.pd-arch-main { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.pd-arch-main .pd-media { aspect-ratio: 4 / 5.3; }
.pd-arch-frame { position: relative; --g: clamp(10px, 1.2vw, 20px); }
/* Linija luka kao na crtežu: odmaknuta od slike, bez donje ivice, izlazi odozdo. */
.pd-arch-line {
  position: absolute;
  top: calc(var(--g) * -1);
  left: calc(var(--g) * -1);
  right: calc(var(--g) * -1);
  bottom: calc(var(--g) * -1);
  border: 1px solid color-mix(in srgb, var(--pd-fg) 28%, transparent);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  pointer-events: none;
  transition: clip-path 2.4s var(--pd-ease-io) .35s;
}
.js .pd-arch-line { clip-path: inset(100% 0 0 0); }
.js .pd-arch-frame:has(.pd-media.is-in) .pd-arch-line { clip-path: inset(0 0 0 0); }
.pd-arch-text { grid-column: 8 / -1; grid-row: 1; padding-top: clamp(20px, 7vw, 140px); }
.pd-arch-text .pd-label { margin-bottom: clamp(26px, 3vw, 44px); }
.pd-arch-text .pd-h2 { margin-bottom: clamp(28px, 3vw, 48px); }
.pd-quote {
  margin-top: clamp(40px, 5vw, 84px);
  padding-top: clamp(22px, 2.2vw, 34px);
  border-top: 1px solid var(--pd-line);
}
.pd-quote p {
  font: italic 300 clamp(30px, 3.1vw, 56px)/1.04 var(--pd-serif);
  letter-spacing: -.012em;
  color: var(--pd-accent);
}
.pd-arch-second { grid-column: 9 / -1; grid-row: 2; margin-top: clamp(56px, 7vw, 120px); }

/* ── Dvije uspravne ─────────────────────────────────────────────────────── */
.pd-duo-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--pd-col);
  align-items: start;
}
.pd-duo-a { grid-column: 1 / span 5; }
.pd-duo-b { grid-column: 7 / -1; margin-top: clamp(100px, 16vw, 300px); }

/* ════════════════════════════════════════════════════════════════════════
   PALETA MATERIJALA
   ════════════════════════════════════════════════════════════════════════ */
.pd-materials { position: relative; padding: clamp(70px, 8vw, 130px) 0 clamp(80px, 9vw, 150px); overflow: clip; }
.pd-marquee {
  font: italic 300 clamp(70px, 12vw, 210px)/1.02 var(--pd-serif);
  letter-spacing: -.02em;
  white-space: nowrap;
  margin-bottom: clamp(60px, 7vw, 120px);
  color: color-mix(in srgb, var(--pd-fg) 88%, transparent);
  user-select: none;
}
.pd-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: .32em;
  padding-left: .32em;
  animation: pd-marquee 46s linear infinite;
  will-change: transform;
}
.pd-marquee i { font-style: normal; font-size: .38em; color: var(--pd-accent); transform: translateY(-.12em); }
.pd-materials.is-still .pd-marquee-track { animation-play-state: paused; }
@keyframes pd-marquee { to { transform: translate3d(-50%, 0, 0); } }

.pd-swatches {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 48px clamp(20px, 4.2vw, 76px);
  align-items: flex-start;
}
.pd-swatch { flex: 0 1 190px; min-width: 150px; }
.pd-swatch:nth-child(even) { margin-top: clamp(28px, 3.5vw, 64px); }
.pd-swatch-arch {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: var(--c, #3a3028);
  isolation: isolate;
}
.pd-swatch-arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.8s var(--pd-ease);
}
.pd-swatch-arch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  pointer-events: none;
}
.pd-swatch:hover .pd-swatch-arch img { transform: scale(1.06); }
/* Uzorak u ruci: blag nagib prema kursoru i odsjaj na površini. */
.pd-swatch-arch[data-pd-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .9s var(--pd-ease);
  will-change: transform;
}
.pd-swatch-arch[data-pd-tilt].is-tilting { transition-duration: .18s; }
.pd-swatch-arch[data-pd-tilt]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 244, 228, .22), rgba(255, 244, 228, 0) 55%);
  opacity: 0;
  transition: opacity .6s var(--pd-ease);
}
.pd-swatch-arch[data-pd-tilt].is-tilting::before { opacity: 1; }
.pd-swatch-idx {
  margin-top: 22px;
  font: 500 9.5px/1 var(--pd-sans);
  letter-spacing: .3em;
  color: var(--pd-accent);
}
.pd-swatch-name { font: 400 clamp(21px, 1.6vw, 28px)/1.05 var(--pd-serif); margin: 10px 0 8px; letter-spacing: -.01em; }
.pd-swatch-note { font: 300 12.5px/1.6 var(--pd-sans); color: var(--pd-dim); max-width: 18em; }

/* ════════════════════════════════════════════════════════════════════════
   INDEKS PRIKAZA
   ════════════════════════════════════════════════════════════════════════ */
.pd-index { position: relative; padding: clamp(100px, 12vw, 200px) 0 clamp(80px, 10vw, 160px); }
.pd-index-list { list-style: none; padding: 0; border-top: 1px solid var(--pd-line); }
.pd-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(3.2em, 1fr) minmax(0, 5fr) minmax(0, 4fr) 44px;
  align-items: center;
  column-gap: var(--pd-col);
  width: 100%;
  padding: clamp(20px, 2.1vw, 34px) 0;
  border: 0;
  border-bottom: 1px solid var(--pd-line);
  background: none;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
.pd-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--pd-fg) 5%, transparent);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .7s var(--pd-ease);
}
.pd-row:hover::before,
.pd-row:focus-visible::before { transform: scaleY(1); }
.pd-row-num { font: 500 10px/1 var(--pd-sans); letter-spacing: .3em; color: var(--pd-accent); font-variant-numeric: tabular-nums; padding-left: 4px; }
.pd-row-title {
  font: 300 clamp(30px, 3.9vw, 68px)/1 var(--pd-serif);
  letter-spacing: -.018em;
  transition: transform .9s var(--pd-ease);
}
.pd-row:hover .pd-row-title { transform: translate3d(clamp(10px, 1.4vw, 24px), 0, 0); font-style: italic; }
.pd-row-desc { font: 300 14px/1.5 var(--pd-sans); color: var(--pd-dim); }
.pd-row-thumb { display: none; }
.pd-row-go { width: 30px; height: 30px; justify-self: end; margin-right: 4px; opacity: .45; transition: transform .7s var(--pd-ease), opacity .4s; }
.pd-row-go svg { width: 100%; height: 100%; }
.pd-row:hover .pd-row-go { opacity: 1; transform: rotate(45deg); }

.pd-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  width: clamp(220px, 19vw, 340px);
  aspect-ratio: 3 / 4;
  pointer-events: none;
  will-change: transform;
}
.pd-preview-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 999px 999px 0 0;
  opacity: 0;
  transform: scale(.72);
  transition: opacity .45s var(--pd-ease), transform .8s var(--pd-ease);
  background: #17110d;
}
.pd-preview.is-on .pd-preview-inner { opacity: 1; transform: scale(1); }
.pd-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.18);
  transition: opacity .55s var(--pd-ease), transform 1.2s var(--pd-ease);
}
.pd-preview img.is-on { opacity: 1; transform: scale(1); }

/* ════════════════════════════════════════════════════════════════════════
   SLJEDEĆI PROJEKAT
   ════════════════════════════════════════════════════════════════════════ */
.pd-next { position: relative; padding: clamp(60px, 7vw, 120px) 0 clamp(36px, 4vw, 56px); overflow: clip; }
.pd-next-link {
  --nw: clamp(230px, 23vw, 420px);
  display: grid;
  justify-items: center;
  text-align: center;
  color: inherit;
  text-decoration: none;
  padding: 0 var(--pd-gut);
}
.pd-next-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font: 500 10px/1 var(--pd-sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--pd-dim);
}
.pd-next-eyebrow .pd-label-num::after { display: none; }
.pd-next-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: calc(var(--nw) * 1.42 + 12vh);
  margin: clamp(28px, 4vw, 60px) 0 clamp(20px, 2.5vw, 36px);
}
.pd-next-media {
  position: relative;
  z-index: 2;
  display: block;
  width: var(--nw);
  aspect-ratio: 3 / 4.25;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: #17110d;
  transition: width 1.1s var(--pd-ease-io);
}
.pd-next-media picture, .pd-next-media img { display: block; width: 100%; height: 100%; }
.pd-next-media img { object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--pd-ease); }
.pd-next-link:hover .pd-next-media { width: calc(var(--nw) * 1.28); }
.pd-next-link:hover .pd-next-media img { transform: scale(1); }
.pd-next-title {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  font: 300 clamp(64px, 12.5vw, 250px)/.8 var(--pd-serif);
  letter-spacing: -.04em;
  white-space: nowrap;
  pointer-events: none;
  color: var(--pd-fg);
  font-feature-settings: "lnum" 1;
}
.pd-next-title--line {
  z-index: 3;
  color: transparent;
  -webkit-text-stroke: 1.1px rgba(244, 238, 229, .95);
}
.pd-next-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pd-next-meta { font: 500 10px/1.6 var(--pd-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--pd-dim); }
.pd-next-foot {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(70px, 9vw, 150px);
  padding-top: 26px;
  border-top: 1px solid var(--pd-line);
}
.pd-inquiry { margin-top: 48px; display: flex; flex-direction: column; gap: 24px; }
.pd-inquiry-services { display: flex; flex-wrap: wrap; gap: 20px 32px; }
.pd-inquiry .pd-back { line-height: 1.8; }
.pd-back {
  font: 500 10px/1 var(--pd-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--pd-dim);
  text-decoration: none;
  transition: color .4s;
}
.pd-back:hover { color: var(--pd-fg); }

/* ════════════════════════════════════════════════════════════════════════
   POGLAVLJA SA STRANE, KURSOR, ZAVJESA
   ════════════════════════════════════════════════════════════════════════ */
.pd-rail {
  position: fixed;
  right: clamp(12px, 1.5vw, 26px);
  top: 50%;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 13px;
  transform: translate3d(0, -50%, 0);
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--pd-ease), visibility .6s;
  color: #fff;
  mix-blend-mode: difference;
}
.pd-rail.is-on { opacity: 1; visibility: visible; }
.pd-rail a {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 9px/1 var(--pd-sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  opacity: .42;
  transition: opacity .4s;
}
.pd-rail a::after {
  content: "";
  width: 12px;
  height: 1px;
  background: currentColor;
  transition: width .6s var(--pd-ease);
}
.pd-rail a .t {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width .7s var(--pd-ease), opacity .4s;
}
.pd-rail a.is-active { opacity: 1; }
.pd-rail a.is-active::after { width: 30px; }
.pd-rail:hover a { opacity: .75; }
.pd-rail:hover a .t { max-width: 16em; opacity: 1; }
.pd-rail a:hover { opacity: 1; }

.pd-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10500;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  display: grid;
  place-items: center;
  pointer-events: none;
  will-change: transform;
}
.pd-cursor-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #f1eadf;
  transform: scale(0);
  transition: transform .55s var(--pd-ease);
}
.pd-cursor-label {
  position: relative;
  font: 500 9.5px/1 var(--pd-sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #17110d;
  opacity: 0;
  transition: opacity .25s;
  white-space: nowrap;
}
.pd-cursor.is-on .pd-cursor-disc { transform: scale(1); }
.pd-cursor.is-on .pd-cursor-label { opacity: 1; transition-delay: .12s; }
html.pd-fine [data-cursor] { cursor: none; }

.pd-curtain {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: #0e0b09;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  pointer-events: none;
}
html.pd-leaving .pd-curtain { transform: scaleY(1); transition: transform .8s var(--pd-ease-io); }
.pd-fly {
  position: fixed;
  z-index: 11900;
  overflow: hidden;
  pointer-events: none;
  background: #17110d;
}
.pd-fly img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ════════════════════════════════════════════════════════════════════════
   GALERIJA PREKO CIJELOG EKRANA
   ════════════════════════════════════════════════════════════════════════ */
.pd-lb {
  position: fixed;
  inset: 0;
  z-index: 11000;
  color: #efe7db;
  font-family: var(--pd-sans);
  overscroll-behavior: contain;
  touch-action: none;
}
.pd-lb[hidden] { display: none; }
.pd-lb-bg {
  position: absolute;
  inset: 0;
  background: #0b0907;
  opacity: 0;
  transition: opacity .7s var(--pd-ease);
}
.pd-lb.is-shown .pd-lb-bg { opacity: 1; }
.pd-lb-stage { position: absolute; inset: 0; overflow: hidden; }
.pd-lb-img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity;
}
.pd-lb-bar,
.pd-lb-foot {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(20px, 3.4vw, 56px);
  opacity: 0;
  transition: opacity .6s var(--pd-ease) .15s;
}
.pd-lb.is-shown .pd-lb-bar,
.pd-lb.is-shown .pd-lb-foot { opacity: 1; }
.pd-lb-bar { top: 0; height: clamp(64px, 9vh, 92px); }
.pd-lb-foot { bottom: 0; height: clamp(76px, 12vh, 118px); align-items: center; }
.pd-lb-count { font: 500 10px/1 var(--pd-sans); letter-spacing: .3em; color: rgba(239, 231, 219, .55); font-variant-numeric: tabular-nums; }
.pd-lb-cur { color: #d7b584; }
.pd-lb-close {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 12px 12px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: 500 10px/1 var(--pd-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
}
.pd-lb-close span { font-size: 13px; transition: transform .6s var(--pd-ease); }
.pd-lb-close:hover span { transform: rotate(90deg); }
.pd-lb-cap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pd-lb-title { font: 300 clamp(22px, 2vw, 32px)/1.05 var(--pd-serif); }
.pd-lb-desc { font: 300 12.5px/1.4 var(--pd-sans); color: rgba(239, 231, 219, .58); }
.pd-lb-nav { display: flex; gap: 10px; flex: none; }
.pd-lb-nav button {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(239, 231, 219, .22);
  background: none;
  color: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .4s, border-color .4s, color .4s;
}
.pd-lb-nav button:hover { background: #efe7db; color: #17110d; border-color: #efe7db; }
.pd-lb-nav svg { width: 18px; height: 18px; }
html.pd-lb-open, html.pd-lb-open body { overflow: hidden; }

/* ════════════════════════════════════════════════════════════════════════
   TABLET I TELEFON
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .pd-rail { display: none; }
  .pd-swatches { row-gap: 48px; }
  .pd-swatch:nth-child(even) { margin-top: 0; }
  .pd-swatch:nth-child(3n+2) { margin-top: clamp(36px, 6vw, 70px); }
}

@media (max-width: 900px) {
  .pd-hero { height: 205vh; }
  .pd-hero-pin { --aw: min(50vw, 330px); --ah: min(54vh, calc(var(--aw) * 2)); --acy: 50%; }
  .pd-hero-word { font-size: min(calc(190vw / var(--len, 2)), 97vw, 60vh); letter-spacing: -.055em; }
  .pd-hero-ui { grid-template-columns: 1fr auto; padding-top: calc(84px + env(safe-area-inset-top, 0px)); letter-spacing: .26em; }
  .pd-hero-foot { grid-template-columns: 1fr auto; }
  .pd-hero-cue { display: none; }
  .pd-hero-rest { font-size: clamp(30px, 8vw, 44px); margin-bottom: 10px; }
  .pd-hero-sub { max-width: 24ch; }

  .pd-intro-grid,
  .pd-chapter-head,
  .pd-split,
  .pd-pair,
  .pd-offset,
  .pd-arch-grid,
  .pd-duo-grid { grid-template-columns: minmax(0, 1fr); }
  .pd-intro .pd-label,
  .pd-statement,
  .pd-intro-body,
  .pd-facts,
  .pd-facts--wide,
  .pd-chapter-head .pd-label,
  .pd-chapter-head .pd-h2,
  .pd-chapter-head .pd-lede,
  .pd-split > .pd-fig,
  .pd-split-text,
  .pd-split--left > .pd-fig,
  .pd-split--left .pd-split-text,
  .pd-pair-a, .pd-pair-b,
  .pd-offset--right > .pd-fig,
  .pd-offset--left > .pd-fig,
  .pd-arch-main, .pd-arch-text, .pd-arch-second,
  .pd-duo-a, .pd-duo-b { grid-column: 1 / -1; grid-row: auto; }
  .pd-intro { padding-bottom: 70px; }
  .pd-chapter { padding: 70px 0; }
  .pd-arch { padding: 84px 0; }
  .pd-intro-grid { row-gap: 44px; }
  .pd-intro .pd-label { padding-top: 0; }
  .pd-facts--wide { grid-template-columns: 1fr 1fr; }
  .pd-chapter-head .pd-lede { margin-top: 26px; }
  .pd-split { margin-top: 64px; }
  .pd-split-text { padding: 30px 0 0; }
  .pd-pair { row-gap: 56px; }
  .pd-pair-b, .pd-duo-b { margin-top: 0; }
  .pd-duo-grid { row-gap: 56px; }
  .pd-duo-b { width: 86%; justify-self: end; }
  .pd-arch-text { padding-top: 56px; }
  .pd-arch-second { margin-top: 56px; width: 82%; justify-self: end; }
  .pd-bleed .pd-media--bleed { height: 74vh; }

  .pd-swatches {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pd-gut);
    gap: 16px;
    margin: 0 calc(var(--pd-gut) * -1);
    padding: 0 var(--pd-gut) 8px;
    scrollbar-width: none;
  }
  .pd-swatches::-webkit-scrollbar { display: none; }
  .pd-swatch { flex: 0 0 40vw; min-width: 0; scroll-snap-align: start; }
  .pd-swatch:nth-child(n) { margin-top: 0; }

  .pd-row { grid-template-columns: 2.4em minmax(0, 1fr) 64px; row-gap: 6px; }
  .pd-row-num { grid-row: 1 / span 2; align-self: start; padding-top: .9em; }
  .pd-row-title { grid-column: 2; }
  .pd-row-desc { grid-column: 2; font-size: 13px; }
  .pd-row-thumb { display: block; grid-column: 3; grid-row: 1 / span 2; width: 64px; height: 80px; overflow: hidden; border-radius: 999px 999px 0 0; }
  .pd-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .pd-row-go { display: none; }
  .pd-row:hover .pd-row-title { transform: none; font-style: normal; }
  .pd-preview { display: none; }

  .pd-next-link { --nw: min(62vw, 360px); }
  .pd-next-link:hover .pd-next-media { width: var(--nw); }
  .pd-next-foot { flex-direction: column; align-items: flex-start; gap: 22px; }

  .pd-lb-foot { height: auto; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); align-items: flex-end; }
  .pd-lb-nav button { width: 46px; height: 46px; }
}

@media (max-width: 560px) {
  .pd-hero-ui { font-size: 9px; }
  .pd-facts { grid-template-columns: 1fr 1fr; }
  .pd-facts--wide { grid-template-columns: 1fr 1fr; }
  .pd-hero-area { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   MANJE POKRETA
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pd-hero { height: auto; }
  .pd-hero-pin { position: relative; }
  .pd-hero-pin::after,
  .pd-hero-cue-line::after,
  .pd-marquee-track { animation: none; }
  .pd-hero-img img { transform: none; }
  .pd *, .pd-lb *, .pd-cursor, .pd-curtain { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .pd-media, .js .pd-media--arch { clip-path: none; }
  .js .pd-media:not(.is-in) img { transform: none; }
  .js .pd-rise:not(.is-in) { opacity: 1; transform: none; }
  .js .pd-words:not(.is-in) .m > span { transform: none; }
  .pd-statement .w { opacity: 1; }
}