/* ==========================================================================
   N°011 »Trgopek — Odtis« (Brand Edition) — slog casa (predpona tp-)
   Uvid: kruh si zapomni košaro — vsak hlebec nosi spiralo košare, v kateri je
   vzhajal. Spirala (navoj košare) je maska dveh prehodov: uvod naslovnice in
   negativ → pozitiv. Lupina (glava, naslovnica, noga) je Diatonicina edicija;
   Trgopekova oranžna je samo v njegovem gradivu.
   Pripenjanje je CSS sticky, JS bere samo napredek (main.js). Brez gibanja:
   mirne različice vsake izkušnje.
   ========================================================================== */

/* ---- osnova ---- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--color-bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-ink); font: 400 1rem/1.75 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
button { font: inherit; }
.wrap { max-width: 1400px; margin: 0 auto; padding-inline: var(--container-pad); }
.label { font: 500 var(--size-label)/1.4 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); }
.txt { max-width: 42em; color: var(--color-ink-dim); }
.nw { white-space: nowrap; }
html.has-motion .rv { will-change: opacity, transform; }

/* plošča: slika v okvirju, ki se ob prihodu tiho odpre (main.js) */
.ed-plate img { transform-origin: 50% 50%; }
.ed-cap span { color: var(--color-ink-dim); }

/* ==========================================================================
   NASLOVNICA — spirala košare odvije prvi kader
   Tipografija je edicijska (.ed-cover__*), oder je naš: fotografija, nad njo
   temna tančica (SVG), v kateri spirala izreže luknjo. Brez gibanja tančice ni.
   ========================================================================== */
.tp-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #050607; }
.tp-hero__media { position: absolute; inset: 0; }
.tp-hero__media picture { display: contents; }
.tp-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; transform-origin: 50% 56%; }
.tp-hero__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(14, 17, 18, 0.5) 0%, rgba(14, 17, 18, 0.1) 30%, rgba(14, 17, 18, 0.18) 60%, rgba(14, 17, 18, 0.9) 100%); }
.tp-hero__veil { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
html:not(.has-motion) .tp-hero__veil { display: none; }
.tp-hero .ed-cover__masthead, .tp-hero .ed-cover__title, .tp-hero .ed-cover__meta { z-index: 2; }
html.has-motion .tp-hero .ed-cover__masthead, html.has-motion .tp-hero .ed-cover__title, html.has-motion .tp-hero .ed-cover__meta { opacity: 0; }
.tp-hero__cue { position: absolute; z-index: 2; left: 50%; bottom: 5.2rem; bottom: calc(100lvh - 100svh + 5.2rem); transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 0.8rem; font: 500 var(--size-label)/1 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ink-dim); opacity: 0; }
.tp-hero__cue span { position: relative; width: 1px; height: 1.8rem; overflow: hidden; background: rgba(245, 244, 242, 0.18); }
.tp-hero__cue span::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--color-accent); animation: tpKaplja 2.2s var(--ease-in-out) infinite; }
@keyframes tpKaplja { 0% { top: -40%; } 70%, 100% { top: 100%; } }
html:not(.has-motion) .tp-hero__cue { display: none; }
@media (max-width: 700px) { .tp-hero .ed-cover__meta span:nth-child(n + 3) { display: none; } }
@media (max-height: 500px) { .tp-hero .ed-cover__name { font-size: 3.6rem; } .tp-hero .ed-cover__title { bottom: 22svh; } .tp-hero__cue { display: none; } }

/* ---- dejstva (01) ---- */
.tp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--space-sm) var(--space-md); max-width: var(--container-max); margin: 0 auto var(--space-lg); padding: var(--space-md) var(--container-pad) 0; border-top: 0; }
.tp-facts > div { position: relative; padding-top: var(--space-2xs); border-top: 1px solid var(--color-line); }
.tp-facts dt { font: 500 var(--size-label)/1.4 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); }
.tp-facts dd { margin-top: 0.4rem; font: 600 clamp(1.4rem, 1.4vw + 0.8rem, 2.2rem)/1.1 var(--font-display); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-ink); }
.tp-facts dd small { display: block; margin-top: 0.3rem; font: 400 var(--size-small)/1.5 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--color-ink-dim); }

/* ---- film v okviru, ki se med drsenjem razpre (snippet »okvir se odpre«) ---- */
.okvir { position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-height: 100vh; width: 100%; background: #050607; }
.okvir video, .okvir .okvir__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.okvir .okvir__poster { z-index: 0; }
.okvir video { z-index: 1; opacity: 0; transition: opacity 0.9s ease; }
.okvir.is-predvaja video { opacity: 1; }
.okvir__play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; align-items: center; gap: 0.9rem; min-height: 48px; padding: 0 1.4rem; white-space: nowrap; border: 1px solid rgba(245, 244, 242, 0.5); border-radius: 0; background: rgba(7, 8, 9, 0.55); color: #f5f4f2; font: 500 var(--size-label)/1 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; cursor: pointer; }
.okvir.is-dotik .okvir__play { display: inline-flex; }
.okvir.is-predvaja .okvir__play { display: none; }
.okvir__cap { position: absolute; z-index: 2; left: var(--container-pad); right: var(--container-pad); bottom: clamp(1.2rem, 4svh, 2.4rem); display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-items: baseline; font-family: var(--font-display); text-transform: uppercase; pointer-events: none; }
.okvir__cap b { font-weight: 500; font-size: var(--size-label); letter-spacing: var(--tracking-widest); color: var(--color-accent-soft); }
.okvir__cap span { font-weight: 500; font-size: 0.92rem; letter-spacing: 0.06em; color: #f5f4f2; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }   /* literalno: na papirju bi bila črka temna */
.okvir__cap i { font-style: normal; font-size: var(--size-label); letter-spacing: var(--tracking-wide); color: rgba(245, 244, 242, 0.78); }
.okvir::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5, 6, 7, 0) 52%, rgba(5, 6, 7, 0.78) 100%); }
.tp-bleed { position: relative; margin-block: var(--space-lg) var(--space-section); }
.tp-bleed .okvir { aspect-ratio: 16 / 9; max-height: 92vh; }
@media (max-aspect-ratio: 1/1) { .tp-bleed .okvir { aspect-ratio: 4 / 5; } }

/* ==========================================================================
   PODPISNI TRENUTEK — negativ → pozitiv (spirala nariše hlebec čez košaro)
   ========================================================================== */
.tp-odtis { position: relative; height: 100vh; height: 100lvh; }
html.has-motion .tp-odtis { height: 300vh; height: 300lvh; }
.tp-odtis__sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); grid-template-rows: minmax(0, 1fr); gap: var(--space-lg); align-items: center; max-width: 1400px; margin: 0 auto; padding: clamp(5.5rem, 12svh, 8rem) var(--container-pad) clamp(2rem, 7svh, 4rem); }
.tp-odtis__stage { align-self: stretch; min-height: 0; display: flex; align-items: center; justify-content: center; }
.tp-odtis__frame { position: relative; width: min(100%, 80svh); aspect-ratio: 1; }   /* košara kot prosojen izrez s senco na podlagi; kruh v krogu v njeni notranjosti (Mitja 8. 10.) */
.tp-odtis__kosara { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 34px 44px rgba(22, 24, 26, 0.3)); transform-origin: 50% 50%; }
.tp-odtis__krog { position: absolute; left: 50%; top: 47.6%; width: 54.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; background: transparent; }

.tp-odtis__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tp-odtis__b { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }   /* cel hlebec, ko so navoji narisani */
.tp-odtis__copy { min-width: 0; }
.tp-odtis__faze { display: flex; gap: 1.4rem; margin: 0 0 var(--space-sm); font: 500 var(--size-label)/1 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ink-faint); }
.tp-odtis__faze span { transition: color 0.5s ease; }
.tp-odtis__faze span.is-on { color: var(--color-accent); }
.tp-odtis__line { font: 700 clamp(2rem, 2.4vw + 0.8rem, 3.6rem)/1.08 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; }
.tp-odtis__line em { display: block; font-style: normal; color: var(--color-accent); }
.tp-odtis__txt { margin-top: var(--space-sm); max-width: 30ch; color: var(--color-ink-dim); }
.tp-odtis__meter { position: relative; margin-top: var(--space-md); height: 1px; background: var(--color-line); }
.tp-odtis__meter::after { content: ""; position: absolute; inset: 0; background: var(--color-accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.tp-odtis__mirno { display: none; }
html:not(.has-motion) .tp-odtis__sticky { display: none; }
html:not(.has-motion) .tp-odtis__mirno { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); max-width: 1400px; margin: 0 auto; padding: var(--space-lg) var(--container-pad); }
html:not(.has-motion) .tp-odtis__mirno .ed-plate { aspect-ratio: 1; background: transparent; } html:not(.has-motion) .tp-odtis__mirno .ed-plate::after { display: none; } html:not(.has-motion) .tp-odtis__mirno .ed-plate img { object-fit: contain; } html:not(.has-motion) .tp-odtis__mirno figure:last-child .ed-plate { border-radius: 50%; overflow: hidden; } html:not(.has-motion) .tp-odtis__mirno figure:last-child .ed-plate img { object-fit: cover; }
@media (max-width: 900px) and (min-height: 501px) {
  .tp-odtis__sticky { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-sm); padding-top: clamp(4.6rem, 10svh, 6rem); padding-bottom: 2.4rem; }
  .tp-odtis__frame { width: min(100%, 50svh); }
  .tp-odtis__line { font-size: 1.6rem; }
  .tp-odtis__faze { margin-bottom: 0.7rem; }
  .tp-odtis__txt { display: none; }
  .tp-odtis__meter { margin-top: 1.2rem; }
}
@media (max-height: 500px) {
  .tp-odtis__sticky { grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem); gap: var(--space-md); padding-top: 4.2rem; padding-bottom: 1.2rem; }
  .tp-odtis__line { font-size: 1.4rem; }
  .tp-odtis__txt { display: none; }
  .tp-odtis__meter { margin-top: 1rem; }
}

/* ---- 02 · pekarna: uredniška mreža (3 : 2 plošče) ---- */
.tp-pekarna .ed-offset__a .ed-plate, .tp-pekarna .ed-offset__b .ed-plate, .tp-pekarna .ed-offset__c .ed-plate { aspect-ratio: 3 / 2; }
.tp-pekarna .ed-offset__b { grid-column: 7 / span 6; }

/* ---- 03 · gravura: stena 75 posnetkov ---- */
.tp-wall { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-pad); }
.tp-wall__grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.tp-wall__t { position: relative; aspect-ratio: 1; overflow: hidden; background: #e9e6e0; cursor: default; }
.tp-wall__t img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.tp-wall__t span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 0.6rem 0.55rem; font: 500 0.68rem/1.2 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink); text-align: center; background: linear-gradient(180deg, rgba(14, 17, 18, 0) 0%, rgba(14, 17, 18, 0.72) 100%); opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.5s var(--ease-out); pointer-events: none; }
.tp-wall__t:hover img { transform: scale(1.08); }
.tp-wall__t:hover span { opacity: 1; transform: none; }
.tp-wall__foot { display: flex; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-2xs); font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ink-dim); }
.tp-wall__foot b { font-weight: 500; color: var(--color-accent); }
@media (max-width: 1100px) { .tp-wall__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tp-wall__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; } .tp-wall__t span { display: none; } }

/* ---- 04 · toplota: fotografija + rokavici, ki lebdita ---- */
.tp-duo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-md); max-width: var(--container-max); margin: var(--space-lg) auto var(--space-section); padding-inline: var(--container-pad); align-items: stretch; }
.tp-duo figure { margin: 0; }
.tp-duo .ed-plate { aspect-ratio: 16 / 9; }
.tp-duo__rokavici { position: relative; min-height: 22rem; overflow: hidden; background: var(--color-bg-raised); }
.tp-duo__rokavici::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(245, 244, 242, 0.06); pointer-events: none; }
.tp-duo__rokavici img { position: absolute; width: 58%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)); }
.tp-duo__rokavici img:nth-of-type(1) { left: 2%; top: 8%; }   /* nth-of-type: zadnji otrok je figcaption */
.tp-duo__rokavici img:nth-of-type(2) { right: 0; bottom: 4%; width: 62%; }
.tp-duo__rokavici figcaption { position: absolute; left: 1.2rem; bottom: 1rem; font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ink-dim); }
@media (max-width: 860px) { .tp-duo { grid-template-columns: minmax(0, 1fr); } .tp-duo__rokavici { min-height: 0; aspect-ratio: 4 / 3; } }   /* min-height + aspect-ratio bi širino vsilila čez stolpec */

/* ---- izdelek preleti zaslon (med poglavji; samo z miško/večji zasloni) ---- */
.tp-let { position: relative; height: 44vh; pointer-events: none; overflow: hidden; }   /* hidden: prelet ne sme širiti strani */
.tp-let img { position: absolute; left: 8vw; top: 0; width: clamp(220px, 30vw, 520px); height: auto; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55)); will-change: transform; }
.tp-let--desno img { left: auto; right: 8vw; }
html.is-phone .tp-let, html:not(.has-motion) .tp-let { display: none; }
@media (max-width: 640px) { .tp-let { display: none; } }

/* ==========================================================================
   05 · KATALOG — listanje z drsenjem (deset strani v odru)
   ========================================================================== */
.tp-flip { position: relative; height: calc(10 * 52svh + 100svh); }
.tp-flip__sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); grid-template-rows: minmax(0, 1fr); gap: var(--space-lg); align-items: center; max-width: 1400px; margin: 0 auto; padding: clamp(5.5rem, 12svh, 8rem) var(--container-pad) clamp(1.6rem, 5svh, 3.6rem); }
.tp-flip__stage { position: relative; align-self: stretch; min-height: 0; display: flex; align-items: center; justify-content: center; perspective: 2600px; }
.tp-flip__page { position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1190 / 842; background: #faf8f4; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55); transform-origin: 50% 50%; backface-visibility: hidden; opacity: 0; transform: translate(-50%, -50%) translateX(7%) rotateY(-16deg); transition: opacity 0.55s ease, transform 0.9s var(--ease-in-out); }
.tp-flip__page.is-on { z-index: 2; opacity: 1; transform: translate(-50%, -50%); }
.tp-flip__page.is-prej { z-index: 1; opacity: 0; transform: translate(-50%, -50%) translateX(-7%) rotateY(16deg) scale(0.98); }
.tp-flip__page img { width: 100%; height: 100%; object-fit: cover; }
.tp-flip__page::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(245, 244, 242, 0.08); pointer-events: none; }
.tp-flip__meta { min-width: 0; }
.tp-flip__st { display: flex; flex-direction: column; gap: 0.45rem; margin: 0 0 var(--space-md); font-family: var(--font-display); text-transform: uppercase; }
.tp-flip__ime { font-weight: 700; font-size: clamp(1.8rem, 2.2vw + 0.6rem, 3.2rem); line-height: 1.06; letter-spacing: var(--tracking-tight); color: var(--color-ink); }
.tp-flip__str { font-size: clamp(0.9rem, 0.5vw + 0.75rem, 1.15rem); letter-spacing: var(--tracking-wide); color: var(--color-accent); }
.tp-flip__list { list-style: none; margin: 0 0 var(--space-md); padding: 0; border-top: 1px solid var(--color-line); }
.tp-flip__chip { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 1rem; width: 100%; padding: 0.6rem 0; border-bottom: 1px solid var(--color-line); font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-dim); cursor: pointer; transition: color 0.4s ease, padding-left 0.55s var(--ease-out); }
.tp-flip__chip span { font-size: var(--size-label); letter-spacing: var(--tracking-widest); color: var(--color-ink-faint); transition: color 0.4s ease; }
.tp-flip__chip:hover, .tp-flip__chip.is-on { color: var(--color-ink); padding-left: 0.7rem; }
.tp-flip__chip.is-on span { color: var(--color-accent); }
.tp-flip__chip:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 3px; }
.tp-flip__cap { margin-top: 0; }
.tp-flip__mirno { display: none; }
html:not(.has-motion) .tp-flip { display: none; }
html:not(.has-motion) .tp-flip__mirno { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); max-width: 1400px; margin: 0 auto var(--space-section); padding-inline: var(--container-pad); }
html:not(.has-motion) .tp-flip__mirno .ed-plate { aspect-ratio: 1190 / 842; }

/* ==========================================================================
   06 · UNIBANN — ena košara, šest kruhov (vložek se zamenja med drsenjem)
   ========================================================================== */
.tp-uni { position: relative; height: calc(6 * 55svh + 100svh); }
.tp-uni__sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); grid-template-rows: minmax(0, 1fr); gap: var(--space-lg); align-items: center; max-width: 1400px; margin: 0 auto; padding: clamp(5.5rem, 12svh, 8rem) var(--container-pad) clamp(1.6rem, 5svh, 3.6rem); }
.tp-uni__stage { position: relative; align-self: stretch; min-height: 0; display: grid; place-items: center; }
.tp-uni__stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(70%, 62svh); aspect-ratio: 1; transform: translate(-50%, -46%); border-radius: 50%; background: radial-gradient(closest-side, rgba(177, 146, 111, 0.16), rgba(177, 146, 111, 0) 72%); pointer-events: none; }
.tp-uni__img { grid-area: 1 / 1; width: min(100%, 72svh); height: auto; opacity: 0; transform: scale(0.94) translateY(14px); transition: opacity 0.6s ease, transform 1s var(--ease-out); filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.55)); }
.tp-uni__img.is-on { opacity: 1; transform: none; }
.tp-uni__meta { min-width: 0; }
.tp-uni__st { display: flex; flex-direction: column; gap: 0.45rem; margin: 0 0 var(--space-md); font-family: var(--font-display); text-transform: uppercase; }
.tp-uni__ime { font-weight: 700; font-size: clamp(1.8rem, 2.2vw + 0.6rem, 3.2rem); line-height: 1.06; letter-spacing: var(--tracking-tight); color: var(--color-ink); }
.tp-uni__kruh { font-size: clamp(0.9rem, 0.5vw + 0.75rem, 1.15rem); letter-spacing: var(--tracking-wide); color: var(--color-accent); }
.tp-uni__list { list-style: none; margin: 0 0 var(--space-md); padding: 0; border-top: 1px solid var(--color-line); }
.tp-uni__chip { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 1rem; width: 100%; padding: 0.6rem 0; border-bottom: 1px solid var(--color-line); font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-dim); cursor: pointer; transition: color 0.4s ease, padding-left 0.55s var(--ease-out); }
.tp-uni__chip span { font-size: var(--size-label); letter-spacing: var(--tracking-widest); color: var(--color-ink-faint); transition: color 0.4s ease; }
.tp-uni__chip:hover, .tp-uni__chip.is-on { color: var(--color-ink); padding-left: 0.7rem; }
.tp-uni__chip.is-on span { color: var(--color-accent); }
.tp-uni__chip:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 3px; }
.tp-uni__txt { max-width: 28ch; color: var(--color-ink-dim); }
.tp-uni__mirno { display: none; }
html:not(.has-motion) .tp-uni { display: none; }
html:not(.has-motion) .tp-uni__mirno { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); max-width: 1400px; margin: 0 auto var(--space-section); padding-inline: var(--container-pad); }
html:not(.has-motion) .tp-uni__mirno figure { margin: 0; text-align: center; }
html:not(.has-motion) .tp-uni__mirno figcaption { margin-top: var(--space-2xs); font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ink-dim); }
.tp-uni-kruh { max-width: var(--container-max); margin: var(--space-lg) auto var(--space-section); padding-inline: var(--container-pad); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-md); align-items: end; }
.tp-uni-kruh figure { margin: 0; grid-column: 1 / span 8; }
.tp-uni-kruh .ed-plate { aspect-ratio: 3 / 2; }
.tp-uni-kruh__txt { grid-column: 9 / span 4; padding-bottom: 2.4rem; color: var(--color-ink-dim); }
@media (max-width: 860px) { .tp-uni-kruh { display: block; } .tp-uni-kruh__txt { margin-top: var(--space-sm); padding-bottom: 0; } }

/* telefon in tablica pokonci (katalog + unibann): oder zgoraj, besedilo spodaj */
@media (max-width: 900px) and (min-height: 501px) {
  .tp-flip__sticky, .tp-uni__sticky { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-sm); padding-top: clamp(4.6rem, 10svh, 6rem); padding-bottom: 2.4rem; }
  .tp-flip__st, .tp-uni__st { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1rem; margin-bottom: 0.7rem; }
  .tp-flip__ime, .tp-uni__ime { font-size: 1.5rem; }
  .tp-flip__list, .tp-uni__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; margin-bottom: 0; }
  .tp-flip__chip, .tp-uni__chip { gap: 0.6rem; padding: 0.45rem 0; font-size: 0.78rem; }
  .tp-flip__chip:hover, .tp-flip__chip.is-on, .tp-uni__chip:hover, .tp-uni__chip.is-on { padding-left: 0.4rem; }
  .tp-flip__cap, .tp-uni__txt { display: none; }
  .tp-uni__img { width: min(100%, 44svh); }
  .tp-uni__stage::before { width: min(70%, 44svh); }
}
/* telefon na ležeče (zrcali telefonski CSS): stran ob strani, stisnjeno */
@media (max-height: 500px) {
  .tp-flip__sticky, .tp-uni__sticky { grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem); gap: var(--space-md); padding-top: 4.2rem; padding-bottom: 1.2rem; }
  .tp-flip__st, .tp-uni__st { margin-bottom: 0.6rem; }
  .tp-flip__ime, .tp-uni__ime { font-size: 1.35rem; }
  .tp-flip__list, .tp-uni__list { margin-bottom: 0; }
  .tp-flip__chip, .tp-uni__chip { padding: 0.28rem 0; font-size: 0.7rem; }
  .tp-flip__cap, .tp-uni__txt { display: none; }
  .tp-uni__img { width: min(100%, 78svh); }
}

/* ==========================================================================
   07 · ZBIRKA — 123 izdelkov, vsak odpre svojo stran na trgopek.si
   ========================================================================== */
.tp-zbirka { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-pad); }
.tp-zbirka__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem var(--space-md); align-items: baseline; margin-bottom: var(--space-2xs); padding-bottom: var(--space-2xs); border-bottom: 1px solid var(--color-line); font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ink-dim); }
.tp-zbirka__head b { font-weight: 500; color: var(--color-accent); }
.tp-zbirka__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr)); gap: 3px; }
.tp-zbirka__t { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--color-bg-raised); text-decoration: none; transition: background-color 0.5s ease; }
.tp-zbirka__t img { position: absolute; inset: 11%; width: 78%; height: 78%; object-fit: contain; transition: transform 0.8s var(--ease-out); }
.tp-zbirka__t span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 0.6rem 0.55rem; font: 500 0.66rem/1.25 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink); text-align: center; background: linear-gradient(180deg, rgba(21, 24, 26, 0) 0%, rgba(21, 24, 26, 0.9) 70%); opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.5s var(--ease-out); }
.tp-zbirka__t:hover, .tp-zbirka__t:focus-visible { background: #1d2124; outline: none; }
.tp-zbirka__t:hover img { transform: translateY(-6%) scale(1.06); }
.tp-zbirka__t:hover span, .tp-zbirka__t:focus-visible span { opacity: 1; transform: none; }
.tp-zbirka__t:focus-visible::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--color-accent); }
.tp-zbirka__foot { margin-top: var(--space-sm); display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); align-items: center; justify-content: space-between; }
.tp-zbirka__foot p { font-size: var(--size-small); color: var(--color-ink-faint); }
@media (max-width: 640px) { .tp-zbirka__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; } .tp-zbirka__t span { display: none; } }

/* ==========================================================================
   08 · VSAK STIK — splet v okviru (stran drsi v njem), telefoni, sejem, znak
   ========================================================================== */
.tp-splet { position: relative; height: 100vh; height: 100lvh; }
html.has-motion .tp-splet { height: 280vh; height: 280lvh; }
.tp-splet__sticky { position: sticky; top: 0; height: 100vh; height: 100lvh; display: flex; align-items: center; justify-content: center; padding: clamp(5.5rem, 12svh, 8rem) var(--container-pad) clamp(1.6rem, 5svh, 3.6rem); }
.tp-splet__frame { position: relative; width: min(100%, calc((100lvh - 12rem) * 1.6), 1400px); aspect-ratio: 16 / 10; background: #0a0b0c; box-shadow: 0 50px 110px rgba(0, 0, 0, 0.6); overflow: hidden; }
.tp-splet__frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(245, 244, 242, 0.1); pointer-events: none; }
.tp-splet__bar { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: clamp(1.6rem, 3.4%, 2.6rem); display: flex; align-items: center; gap: 0.45rem; padding-inline: 0.9rem; background: #15181a; border-bottom: 1px solid rgba(245, 244, 242, 0.08); font: 500 0.7rem/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-faint); }
.tp-splet__bar i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: rgba(245, 244, 242, 0.14); }
.tp-splet__bar em { font-style: normal; margin-left: 1rem; color: var(--color-ink-dim); letter-spacing: 0.08em; text-transform: none; }
.tp-splet__scroll { position: absolute; left: 0; right: 0; top: clamp(1.6rem, 3.4%, 2.6rem); bottom: 0; overflow: hidden; }
.tp-splet__scroll img { width: 100%; height: auto; will-change: transform; }
.tp-splet__cap { position: absolute; z-index: 2; left: var(--container-pad); right: var(--container-pad); bottom: calc(100lvh - 100svh + 0.6rem); display: flex; justify-content: space-between; gap: var(--space-sm); font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ink-dim); }
.tp-splet__cap b { font-weight: 500; color: var(--color-accent); }
@media (max-width: 900px) { .tp-splet__cap { display: none; } .tp-splet__frame { width: min(100%, calc((100lvh - 9rem) * 1.6)); } }
@media (max-height: 500px) { .tp-splet__sticky { padding-top: 4rem; padding-bottom: 1rem; } .tp-splet__frame { width: min(100%, calc((100lvh - 5rem) * 1.6)); } }

.tp-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); max-width: 1100px; margin: var(--space-section) auto; padding-inline: var(--container-pad); align-items: end; }
.tp-phone { margin: 0; }
.tp-phone__dev { position: relative; aspect-ratio: 780 / 1688; border-radius: clamp(1.4rem, 3vw, 2.6rem); background: #0a0b0c; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(245, 244, 242, 0.14); padding: 3.2%; overflow: hidden; }
.tp-phone__dev img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: clamp(1rem, 2.4vw, 2.1rem); }
.tp-phone:nth-child(2) { transform: translateY(clamp(-3rem, -5vw, -5.5rem)); }
.tp-phone figcaption { margin-top: var(--space-2xs); font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ink-dim); display: flex; justify-content: space-between; gap: 1rem; }
.tp-phone figcaption b { font-weight: 500; color: var(--color-accent); }
@media (max-width: 700px) { .tp-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); } .tp-phone:nth-child(3) { display: none; } .tp-phone:nth-child(2) { transform: translateY(-1.6rem); } }

.tp-stik { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-md); max-width: var(--container-max); margin: 0 auto var(--space-section); padding-inline: var(--container-pad); align-items: start; }
.tp-stik figure { margin: 0; }
.tp-stik__sejem { grid-column: 1 / span 8; }
.tp-stik__sejem .ed-plate { aspect-ratio: 16 / 10; }
.tp-stik__znak { grid-column: 9 / span 4; margin-top: clamp(3rem, 9vw, 9rem); }
.tp-stik__znak .ed-plate { aspect-ratio: 16 / 9; background: #f5f4f2; }
.tp-stik__znak .ed-plate img { object-fit: cover; }
@media (max-width: 860px) { .tp-stik { display: block; } .tp-stik__znak { margin-top: var(--space-md); } }

/* ---- zaključek ---- */
.tp-cta { min-height: 76svh; }
.tp-cta .c-cta__media img { object-position: 50% 40%; }
.ed-colophon { margin-top: 0; }

/* ==========================================================================
   02 · OBRNI — tri fotografije iste kretnje (primi · obrni · spusti), menjava
   z drsenjem. Namesto filma: Seedance je košaro spremenil v testo (8. 10.).
   ========================================================================== */
.tp-obrni { position: relative; height: calc(3 * 60svh + 100svh); margin-top: var(--space-lg); }
.tp-obrni__sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-sm); max-width: 1400px; margin: 0 auto; padding: clamp(5.5rem, 12svh, 8rem) var(--container-pad) clamp(1.6rem, 5svh, 3rem); }
.tp-obrni__stage { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; }
.tp-obrni__frame { position: relative; width: min(100%, calc((100svh - 15rem) * 16 / 9)); aspect-ratio: 16 / 9; background: var(--color-bg-raised); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5); overflow: hidden; }
.tp-obrni__frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(245, 244, 242, 0.06); pointer-events: none; }
.tp-obrni__f { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.7s ease; }
.tp-obrni__f img { width: 100%; height: 100%; object-fit: cover; }
.tp-obrni__f.is-on { opacity: 1; }
.tp-obrni__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm) var(--space-lg); align-items: end; width: min(100%, calc((100svh - 15rem) * 16 / 9)); margin: 0 auto; }
.tp-obrni__st { display: flex; align-items: baseline; gap: 1rem; font-family: var(--font-display); text-transform: uppercase; }
.tp-obrni__ime { font-weight: 700; font-size: clamp(1.8rem, 2.2vw + 0.6rem, 3rem); line-height: 1.04; letter-spacing: var(--tracking-tight); color: var(--color-ink); }
.tp-obrni__pod { font-size: var(--size-label); letter-spacing: var(--tracking-widest); color: var(--color-accent); }
.tp-obrni__list { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line); }
.tp-obrni__chip { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 0.6rem; padding: 0.7rem 1.4rem 0 0; font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-dim); cursor: pointer; transition: color 0.4s ease; }
.tp-obrni__chip span { font-size: var(--size-label); letter-spacing: var(--tracking-widest); color: var(--color-ink-faint); transition: color 0.4s ease; }
.tp-obrni__chip:hover, .tp-obrni__chip.is-on { color: var(--color-ink); }
.tp-obrni__chip.is-on span { color: var(--color-accent); }
.tp-obrni__chip:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 3px; }
.tp-obrni__mirno { display: none; }
html:not(.has-motion) .tp-obrni { display: none; }
html:not(.has-motion) .tp-obrni__mirno { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); max-width: 1400px; margin: var(--space-lg) auto 0; padding-inline: var(--container-pad); }
html:not(.has-motion) .tp-obrni__mirno .ed-plate { aspect-ratio: 16 / 9; }
@media (max-width: 700px) { .tp-obrni__meta { grid-template-columns: minmax(0, 1fr); } .tp-obrni__ime { font-size: 1.5rem; } .tp-obrni__chip { padding-right: 1rem; font-size: 0.75rem; } html:not(.has-motion) .tp-obrni__mirno { grid-template-columns: minmax(0, 1fr); } }
@media (max-height: 500px) { .tp-obrni__sticky { padding-top: 4.2rem; padding-bottom: 1rem; } .tp-obrni__frame, .tp-obrni__meta { width: min(100%, calc((100svh - 8rem) * 16 / 9)); } .tp-obrni__ime { font-size: 1.3rem; } }

/* ozki telefoni: izjave z dolgo besedo (»Petinsedemdeset«) se ne smejo preliti čez rob */
@media (max-width: 480px) { .c-statement__text { font-size: clamp(1.5rem, 7.2vw, 2.25rem); } .tp-odtis__line, .ed-slogan__line { font-size: clamp(1.5rem, 7.4vw, 2.4rem); } }

/* dejstva na telefonu v dveh stolpcih (en stolpec je predolg) */
@media (max-width: 640px) { .tp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-xs); } }
/* ležeči telefon: naslovnica ne sme biti višja od okna (min-height 560 je ime odrezala), rokavici ob fotografiji, seznam strani v dveh stolpcih */
@media (max-height: 500px) {
  .tp-hero { min-height: 0; }
  .tp-duo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .tp-duo__rokavici { aspect-ratio: auto; min-height: 0; }
  .tp-flip__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
}
/* pripeti odri se prižgejo šele, ko pridejo blizu (sicer rob strani ali košare štrli pred svoje poglavje) */
.tp-odtis__frame, .tp-splet__frame { transition: opacity 0.7s ease; }
/* cel oder (slika + besedilo + čipi) pride skupaj, ko je vrh odseka pri 45 % okna */
.tp-flip__sticky > *, .tp-obrni__sticky > *, .tp-uni__sticky > *, .tp-odtis__sticky > *, .tp-splet__sticky > * { transition: opacity 0.6s ease; }
html.has-motion .tp-flip:not(.is-blizu) .tp-flip__sticky > *, html.has-motion .tp-obrni:not(.is-blizu) .tp-obrni__sticky > *, html.has-motion .tp-uni:not(.is-blizu) .tp-uni__sticky > *, html.has-motion .tp-odtis:not(.is-blizu) .tp-odtis__sticky > *, html.has-motion .tp-splet:not(.is-blizu) .tp-splet__sticky > * { opacity: 0; }


/* ==========================================================================
   V2 »BELE STRANI« (8. 10. 2026) — telo casa na Trgopekovem papirju
   Lupina ostane Diatonicina temna (glava, naslovnica, CTA, podpis, kolofon,
   noga); od kazala do slogana je podlaga svetla, kot njihov katalog in splet.
   Žetoni se prepišejo samo znotraj .tp-papir; glava se nad papirjem preklopi
   v temno barvo (shell: body.ds-on-light, main.js ga vklaplja po drsenju).
   ========================================================================== */
.tp-papir { --color-bg: #f6f4f0; --color-bg-raised: #ffffff; --color-ink: #16181a; --color-ink-dim: #5f5e5a; --color-ink-faint: #8d8b86;
  --color-line: rgba(22, 24, 26, 0.14); --color-line-strong: rgba(22, 24, 26, 0.3); --color-overlay: rgba(246, 244, 240, 0.55);
  position: relative; background: #f6f4f0; color: #16181a; }
.tp-papir .ed-chapter__no { opacity: 0.5; }
.tp-papir .ed-index__list li { border-color: var(--color-line); }
.tp-papir .ed-plate { background: #ffffff; }
.tp-papir .ed-plate::after { box-shadow: inset 0 0 0 1px rgba(22, 24, 26, 0.06); }
.tp-papir .ed-offset__b .ed-plate, .tp-papir .tp-obrni__frame, .tp-papir .tp-flip__page, .tp-papir .tp-splet__frame { box-shadow: 0 30px 80px rgba(22, 24, 26, 0.16); }
.tp-papir .tp-obrni__frame::after, .tp-papir .tp-splet__frame::after, .tp-papir .tp-duo__rokavici::after { box-shadow: inset 0 0 0 1px rgba(22, 24, 26, 0.08); }
.tp-papir .tp-wall__grid { gap: 6px; }
.tp-papir .tp-wall__t { background: #fff; box-shadow: 0 1px 0 rgba(22, 24, 26, 0.06); }
.tp-papir .tp-wall__t span { color: #16181a; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 70%); }
.tp-papir .tp-zbirka__t { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(22, 24, 26, 0.06); }
.tp-papir .tp-zbirka__t:hover, .tp-papir .tp-zbirka__t:focus-visible { background: #fbfaf7; }
.tp-papir .tp-zbirka__t span { color: #16181a; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.94) 70%); }
.tp-papir .tp-splet__frame { background: #ffffff; }
.tp-papir .tp-splet__bar { background: #f1efea; color: #8d8b86; border-color: rgba(22, 24, 26, 0.08); }
.tp-papir .tp-splet__bar i { background: rgba(22, 24, 26, 0.12); }
.tp-papir .tp-phone__dev { background: #16181a; box-shadow: 0 40px 90px rgba(22, 24, 26, 0.22), inset 0 0 0 1px rgba(245, 244, 242, 0.14); }
.tp-papir .tp-uni__stage::before { background: radial-gradient(closest-side, rgba(177, 146, 111, 0.22), rgba(177, 146, 111, 0) 72%); }
.tp-papir .tp-uni__img, .tp-papir .tp-let img, .tp-papir .tp-duo__rokavici img { filter: drop-shadow(0 30px 40px rgba(22, 24, 26, 0.22)); }
.tp-papir .tp-duo__rokavici { background: #ffffff; }
.tp-papir .tp-stik__znak .ed-plate { background: #ffffff; }
.tp-papir .okvir { box-shadow: 0 30px 80px rgba(22, 24, 26, 0.18); }
.tp-papir .c-statement__text { color: var(--color-ink); }
.tp-papir .ed-slogan__line em, .tp-papir .c-statement__text em, .tp-papir .tp-odtis__line em { color: var(--color-accent); }   /* medenina na papirju: temnejši ton, da ostane berljiva */
.tp-papir .label, .tp-papir .ed-chapter__kicker, .tp-papir .ed-index__label, .tp-papir .ed-cap b, .tp-papir .tp-facts dt, .tp-papir .ed-slogan__label, .tp-papir .tp-wall__foot b, .tp-papir .tp-zbirka__head b, .tp-papir .tp-splet__cap b, .tp-papir .tp-phone figcaption b, .tp-papir .okvir__cap b { color: var(--color-accent); }
.tp-papir .tp-flip__chip.is-on span, .tp-papir .tp-uni__chip.is-on span, .tp-papir .tp-obrni__chip.is-on span, .tp-papir .tp-flip__str, .tp-papir .tp-uni__kruh, .tp-papir .tp-obrni__pod, .tp-papir .tp-odtis__faze span.is-on { color: var(--color-accent); }
.tp-papir .tp-odtis__meter::after, .tp-papir .ed-gold__rule { background: var(--color-accent); }
.tp-papir .c-btn { color: var(--color-ink); border-color: rgba(22, 24, 26, 0.35); }
.tp-papir .c-btn::before { background: var(--color-accent); }
.tp-papir .c-btn:hover, .tp-papir .c-btn:focus-visible { color: #ffffff; border-color: var(--color-accent); }
.tp-papir .tp-hero__cue { display: none; }
/* rob papirja: mehak prehod iz temne naslovnice in nazaj v temen zaključek */
.tp-papir::before, .tp-papir::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(22, 24, 26, 0.08); }
.tp-papir::before { top: 0; } .tp-papir::after { bottom: 0; }

/* ---- 02 · splet: kaj je notri (vrstica dejstev pod okvirjem) ---- */
.tp-notri { max-width: var(--container-max); margin: var(--space-md) auto var(--space-section); }

/* ---- 03 · stran izdelka: okvir drsi, pripisi desno se prižigajo po napredku ---- */
.tp-splet--anat .tp-splet__sticky { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 21rem); grid-template-rows: minmax(0, 1fr); gap: var(--space-lg); align-items: center; max-width: 1400px; margin: 0 auto; }
.tp-splet--anat .tp-splet__oder { align-self: stretch; min-height: 0; display: flex; align-items: center; justify-content: center; }
.tp-splet--anat .tp-splet__frame { width: min(100%, calc((100lvh - 12rem) * 1.25)); aspect-ratio: 5 / 4; }
.tp-anat__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line); }
.tp-anat__list li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.2rem 0.8rem; padding: 0.85rem 0; border-bottom: 1px solid var(--color-line); color: var(--color-ink-faint); transition: color 0.5s ease; }
.tp-anat__list li span { grid-row: 1 / span 2; font: 500 var(--size-label)/1.6 var(--font-display); letter-spacing: var(--tracking-widest); }
.tp-anat__list li b { font: 600 1rem/1.3 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-dim); transition: color 0.5s ease; }
.tp-anat__list li small { font-size: var(--size-small); line-height: 1.5; }
.tp-anat__list li.is-on { color: var(--color-ink-dim); }
.tp-anat__list li.is-on span { color: var(--color-accent); }
.tp-anat__list li.is-on b { color: var(--color-ink); }
.tp-anat__kicker { margin-bottom: var(--space-sm); font: 500 var(--size-label)/1.4 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); }
@media (max-width: 900px) and (min-height: 501px) {
  .tp-splet--anat .tp-splet__sticky { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-sm); }
  .tp-splet--anat .tp-splet__frame { width: min(100%, calc((100lvh - 18rem) * 1.25)); }
  .tp-anat__kicker { display: none; }
  .tp-anat__list li { padding: 0.45rem 0; }
  .tp-anat__list li small { display: none; }
}
@media (max-height: 500px) { .tp-splet--anat .tp-splet__sticky { grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem); } .tp-anat__list li small, .tp-anat__kicker { display: none; } .tp-anat__list li { padding: 0.3rem 0; } }

/* ---- od blizu: izrezi strani izdelka v 2× (pravi piksli, ne maketa) ---- */
.tp-blizu { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-md); max-width: var(--container-max); margin: var(--space-lg) auto var(--space-section); padding-inline: var(--container-pad); align-items: start; }
.tp-blizu figure { margin: 0; }
.tp-blizu .ed-plate img { height: auto; }                      /* izrez določa višino plošče (pravi piksli 2×) */
.tp-blizu__a { grid-column: 1 / span 7; }
.tp-blizu__b { grid-column: 8 / span 5; margin-top: clamp(2rem, 6vw, 6rem); }
.tp-blizu__c { grid-column: 1 / span 5; margin-top: calc(-1 * clamp(1rem, 3vw, 3rem)); }
.tp-blizu__d { grid-column: 6 / span 7; }
.tp-blizu__e { grid-column: 2 / span 10; }
.tp-blizu__trak { grid-column: 1 / -1; }
@media (max-width: 860px) { .tp-blizu { display: block; } .tp-blizu figure + figure { margin-top: var(--space-md); } .tp-blizu__d .ed-plate { max-height: none; } }

/* ---- 04 · pot kupca: tri strani ena za drugo ---- */
.tp-pot .ed-plates .ed-plate { aspect-ratio: 16 / 10; }
.tp-pot .ed-plates figure:nth-child(2) { transform: translateY(clamp(1.5rem, 4vw, 4rem)); }
.tp-pot .ed-plates figure:nth-child(3) { transform: translateY(clamp(3rem, 8vw, 8rem)); }
.tp-pot .ed-plates { margin-bottom: calc(var(--space-section) + clamp(3rem, 8vw, 8rem)); }
@media (max-width: 860px) { .tp-pot .ed-plates figure:nth-child(2), .tp-pot .ed-plates figure:nth-child(3) { transform: none; } .tp-pot .ed-plates { margin-bottom: var(--space-section); } }

/* ---- 06 · telefon: štirje zasloni ---- */
.tp-phones--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1300px; }
.tp-phones--4 .tp-phone:nth-child(2) { transform: translateY(clamp(-2.4rem, -4vw, -4.4rem)); }
.tp-phones--4 .tp-phone:nth-child(4) { transform: translateY(clamp(-2.4rem, -4vw, -4.4rem)); }
@media (max-width: 700px) { .tp-phones--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tp-phones--4 .tp-phone:nth-child(3) { display: block; } .tp-phones--4 .tp-phone:nth-child(2), .tp-phones--4 .tp-phone:nth-child(4) { transform: translateY(-1.4rem); } }

/* napisi pod posnetki spleta se lahko prelomijo (ozki zasloni) */
.tp-pot .ed-cap, .tp-blizu .ed-cap { flex-wrap: wrap; gap: 0.3rem 1rem; }

/* oder okvirja: polna širina, sicer se okvir z aspect-ratio v flex otroku stisne na nič */
.tp-splet__oder { width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.tp-splet--anat .tp-splet__oder { align-self: stretch; }

/* napisi pod telefoni: dve besedi se lahko prelomita; na telefonu brez desne oznake */
.tp-phone figcaption { flex-wrap: wrap; }
@media (max-width: 700px) { .tp-phone figcaption b { display: none; } }


/* ==========================================================================
   8. 10. 2026 zvečer (Mitja): temna podlaga do prve slike (film Konjice) — papir se začne s filmom;
   podpis v krogu brez okvirja; poglavje 02 z razlago ob okvirju; poglavje 03 = živi demo strani izdelka
   ========================================================================== */
.tp-papir > .tp-bleed:first-child { margin-top: 0; }
.tp-papir > .tp-bleed:first-child .okvir { clip-path: none; }




/* ==========================================================================
   V3 (8. 10. 2026 pozno, Mitja): »manj posnetkov zaslona, bolj agencijsko« —
   02 domača stran kot plošča, ki teče ob pripetem besedilu (edicijski spread),
   03 en izdelek, predstavljen v jeziku casa (izrez, dejstva, tipografska tabela),
   04 zbirka 24 (ne 123), 05 Unibann samo oder, 06 trije telefoni.
   ========================================================================== */
.tp-spread .ed-spread__stack figure .ed-plate { aspect-ratio: auto; background: #ffffff; }
.tp-spread .ed-spread__stack figure .ed-plate img { height: auto; }
.tp-spread .ed-spread__stack figure:nth-child(even) { width: 100%; }
.tp-spread .ed-spread__text { top: 14svh; }
.tp-spread__list { list-style: none; margin: var(--space-md) 0 0; padding: 0; border-top: 1px solid var(--color-line); max-width: 30rem; }
.tp-spread__list li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.1rem 0.8rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-line); }
.tp-spread__list li span { grid-row: 1 / span 2; font: 500 var(--size-label)/1.6 var(--font-display); letter-spacing: var(--tracking-widest); color: var(--color-accent); }
.tp-spread__list li b { font: 600 0.98rem/1.3 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink); }
.tp-spread__list li small { font-size: var(--size-small); line-height: 1.5; color: var(--color-ink-dim); }
.tp-spread .ed-plate { box-shadow: 0 30px 80px rgba(22, 24, 26, 0.14); }

/* 03 · en izdelek v jeziku casa */
.tp-izdelek { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-md) var(--space-lg); max-width: var(--container-max); margin: var(--space-lg) auto var(--space-section); padding-inline: var(--container-pad); align-items: start; }
.tp-izdelek__slika { grid-column: 1 / span 7; position: sticky; top: 12svh; margin: 0; }
.tp-izdelek__slika img { width: 100%; height: auto; filter: drop-shadow(0 40px 50px rgba(22, 24, 26, 0.28)); }
.tp-izdelek__slika figcaption { margin-top: var(--space-2xs); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; overflow-wrap: anywhere; font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ink-dim); }
.tp-izdelek__slika figcaption b { font-weight: 500; color: var(--color-accent); }
.tp-izdelek__opis { grid-column: 8 / span 5; }
.tp-izdelek__kicker { font: 500 var(--size-label)/1.4 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); }
.tp-izdelek__ime { margin-top: 0.6rem; font: 700 clamp(1.9rem, 2.2vw + 0.8rem, 3.2rem)/1.08 var(--font-display); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-ink); }
.tp-izdelek__lead { margin-top: var(--space-sm); color: var(--color-ink-dim); }
.tp-izdelek__lead em { font-style: normal; color: var(--color-ink); }
.tp-izdelek__dejstva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-sm); margin-top: var(--space-md); }
.tp-izdelek__dejstva div { padding-top: 0.6rem; border-top: 1px solid var(--color-line); }
.tp-izdelek__dejstva dt { font: 500 var(--size-label)/1.4 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); }
.tp-izdelek__dejstva dd { margin-top: 0.3rem; font: 600 1.25rem/1.2 var(--font-display); text-transform: uppercase; color: var(--color-ink); }
.tp-tabela { margin-top: var(--space-md); border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.tp-tabela caption { text-align: left; padding-bottom: 0.8rem; font: 500 var(--size-label)/1.4 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); }
.tp-tabela th { text-align: left; padding: 0.55rem 0.8rem 0.55rem 0; border-bottom: 1px solid var(--color-line-strong); font: 500 var(--size-label)/1.4 var(--font-display); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-dim); }
.tp-tabela td { padding: 0.45rem 0.8rem 0.45rem 0; border-bottom: 1px solid var(--color-line); font-size: 0.95rem; color: var(--color-ink-dim); }
.tp-tabela td:first-child { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; color: var(--color-ink); }
.tp-tabela th:last-child, .tp-tabela td:last-child { text-align: right; padding-right: 0; }
.tp-izdelek__sodi { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-sm); align-items: center; margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--color-line); }
.tp-izdelek__sodi img { width: 100%; height: auto; filter: drop-shadow(0 12px 16px rgba(22, 24, 26, 0.2)); }
.tp-izdelek__sodi b { display: block; font: 600 1rem/1.3 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink); }
.tp-izdelek__sodi small { display: block; margin-top: 0.2rem; font-size: var(--size-small); color: var(--color-ink-dim); }
.tp-izdelek__noga { margin-top: var(--space-md); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); }
.tp-izdelek__noga p { font-size: var(--size-small); color: var(--color-ink-faint); max-width: 32ch; }
@media (max-width: 900px) { .tp-izdelek { display: block; } .tp-izdelek__slika { position: static; max-width: 32rem; margin: 0 auto var(--space-md); } .tp-izdelek__opis { margin-top: var(--space-md); } }

/* 04 · zbirka 24: šest stolpcev */
.tp-zbirka--24 .tp-zbirka__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
@media (max-width: 900px) { .tp-zbirka--24 .tp-zbirka__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tp-zbirka--24 .tp-zbirka__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* zbirka brez belih ploščic: izrezi prosto na papirju s senco (Mitja 10. 10.) */
.tp-papir .tp-zbirka--24 .tp-zbirka__t, .tp-papir .tp-zbirka--24 .tp-zbirka__t:hover, .tp-papir .tp-zbirka--24 .tp-zbirka__t:focus-visible { background: transparent; box-shadow: none; }
.tp-zbirka--24 .tp-zbirka__grid { gap: var(--space-2xs) var(--space-xs); }
.tp-zbirka--24 .tp-zbirka__t img { filter: drop-shadow(0 16px 18px rgba(22, 24, 26, 0.16)); }
.tp-papir .tp-zbirka--24 .tp-zbirka__t span { background: none; padding-top: 0.4rem; }

/* telefoni: zaslon je absolutno vstavljen v ohišje — Safari pri aspect-ratio + padding + height:100% sliko raztegne čez spodnji rob (Mitja 10. 10.) */
.tp-phone__dev { padding: 0; isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); transform: translateZ(0); }
.tp-phone__dev img { position: absolute; left: 3.2%; top: 1.5%; width: 93.6%; height: 97%; object-fit: cover; object-position: top; }

/* stena gravur brez bele podlage: prosojni izrezi (macOS Vision) s senco na papirju (Mitja 10. 10.) */
.tp-papir .tp-wall__t, .tp-wall__t { background: transparent; box-shadow: none; overflow: visible; }
.tp-wall__t img { object-fit: contain; filter: drop-shadow(0 12px 14px rgba(22, 24, 26, 0.18)); }
.tp-papir .tp-wall__t span { background: none; }

/* katalog: gumb do celega PDF (Mitja 10. 10.) */
.tp-flip__pdf { margin-top: var(--space-sm); }
.tp-flip__pdf-mirno { display: none; max-width: 1400px; margin: calc(-1 * var(--space-lg)) auto var(--space-section); padding-inline: var(--container-pad); }
html:not(.has-motion) .tp-flip__pdf-mirno { display: block; }
@media (max-width: 900px) and (min-height: 501px) { .tp-flip__pdf { margin-top: 0.8rem; } }
@media (max-height: 500px) { .tp-flip__pdf { margin-top: 0.6rem; min-height: 0; padding-block: 0.5rem; } }

/* znak brez bele podlage (Mitja 10. 10.): prosojen logotip na papirju, brez okvirja */
.tp-papir .tp-stik__znak .ed-plate, .tp-stik__znak .ed-plate { background: transparent; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; }
.tp-stik__znak .ed-plate::after { display: none; }
.tp-stik__znak .ed-plate img { width: 82%; height: auto; object-fit: contain; }
.tp-flip__pdf { white-space: nowrap; }

/* krog = cela košara (spirala se odvije do roba košare, hlebec jo na koncu prekrije) */
.tp-odtis__krog { width: 90.5%; top: 50%; }

/* =====================================================================
   10. 10. 2026 (Mitja): uvod Unibann — logotip je naš, ime Trgopekovo.
   Jezik iz kataloga in sejemske stene: široki »u« kot velik oranžen lok ob levem robu, tanki krogi,
   navpičen logotip spodaj desno. Oranžna samo za znamko Unibann; vmesnik ostane zlat.
   ===================================================================== */
.tp-unizn { --unibann: #e49425; position: relative; overflow: hidden; overflow: clip; min-height: clamp(34rem, 86svh, 54rem); display: flex; align-items: center; padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 9vw, 8rem); }
.tp-unizn__lok { position: absolute; left: 0; top: clamp(1rem, 3vw, 3rem); width: clamp(20rem, 50vw, 54rem); height: auto; fill: var(--unibann); transform: translateX(-48%); pointer-events: none; }
.tp-unizn__krogi { position: absolute; left: clamp(-12rem, -9vw, -4rem); bottom: clamp(-12rem, -10vw, -5rem); width: clamp(16rem, 30vw, 30rem); height: auto; fill: none; stroke: var(--unibann); stroke-width: 0.5; opacity: 0.75; pointer-events: none; }
.tp-unizn__krogi circle { stroke-dasharray: var(--c) var(--c); stroke-dashoffset: 0; }   /* prave dolžine, brez pathLength (WebKit) */
.tp-unizn__in { position: relative; z-index: 1; width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--space-md); }
.tp-unizn__logo { grid-column: 4 / span 8; width: 100%; height: auto; fill: var(--unibann); overflow: visible; }
.tp-unizn__crka { transform-box: fill-box; transform-origin: 50% 100%; }
.tp-unizn__txt { grid-column: 6 / span 6; }
.tp-unizn__kicker { margin: 0 0 var(--space-2xs); font: 500 var(--size-label)/1.4 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); }
.tp-unizn__copy { margin: 0; max-width: 40ch; font-size: clamp(1.1rem, 0.35vw + 1rem, 1.3rem); line-height: 1.65; color: var(--color-ink-dim); }
.tp-unizn__dl { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--space-sm) clamp(2rem, 4vw, 4rem); margin: var(--space-md) 0 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-line); }
.tp-unizn__dl dt { font: 500 var(--size-label)/1.4 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ink-dim); }
.tp-unizn__dl dd { margin: 0.4rem 0 0; font: 600 clamp(1rem, 0.5vw + 0.85rem, 1.3rem)/1.25 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink); }
.tp-unizn__navp { position: absolute; right: var(--container-pad); bottom: clamp(2rem, 5vw, 4rem); width: auto; height: clamp(6.5rem, 10vw, 10rem); fill: var(--unibann); pointer-events: none; }
/* gibanje: lok pride od roba, črke se dvignejo ena za drugo, krogi se narišejo (prižge .is-blizu) */
html.has-motion .tp-unizn__lok { transition: transform 1.6s var(--ease-out), opacity 1s ease; }
html.has-motion .tp-unizn__crka { transition: transform 1s var(--ease-out), opacity 0.7s ease; transition-delay: calc(0.25s + var(--i) * 0.07s); }
html.has-motion .tp-unizn__krogi circle { transition: stroke-dashoffset 1.6s var(--ease-out); transition-delay: calc(0.2s + var(--i) * 0.08s); }
html.has-motion .tp-unizn__txt, html.has-motion .tp-unizn__navp { transition: opacity 0.9s ease 0.7s, transform 1.1s var(--ease-out) 0.7s; }
html.has-motion .tp-unizn:not(.is-blizu) .tp-unizn__lok { transform: translateX(-78%) rotate(-8deg); opacity: 0; }
html.has-motion .tp-unizn:not(.is-blizu) .tp-unizn__crka { transform: translateY(40%); opacity: 0; }
html.has-motion .tp-unizn:not(.is-blizu) .tp-unizn__krogi circle { stroke-dashoffset: var(--c); }
html.has-motion .tp-unizn:not(.is-blizu) .tp-unizn__txt { opacity: 0; transform: translateY(24px); }
html.has-motion .tp-unizn:not(.is-blizu) .tp-unizn__navp { opacity: 0; transform: translateY(24px); }
/* oder Unibann: mehka oranžna svetloba za košaro (barva znamke) */
.tp-papir .tp-uni__stage::before { background: radial-gradient(closest-side, rgba(228, 148, 37, 0.16), rgba(228, 148, 37, 0) 72%); }
@media (max-width: 860px) {
  .tp-unizn { display: block; min-height: 0; padding-top: clamp(13rem, 54vw, 22rem); padding-bottom: var(--space-lg); }
  .tp-unizn__lok { top: 0; width: clamp(15rem, 70vw, 30rem); transform: translateX(-42%); }
  .tp-unizn__krogi { display: none; }
  .tp-unizn__in { display: block; }
  .tp-unizn__logo { width: 100%; margin-bottom: var(--space-md); }
  .tp-unizn__dl { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .tp-unizn__navp { top: clamp(2rem, 8vw, 4rem); bottom: auto; height: clamp(5rem, 22vw, 7rem); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .tp-unizn { min-height: 0; padding-block: 2.5rem 3rem; }
  .tp-unizn__lok { top: 1rem; width: 34vw; transform: translateX(-48%); }
  html.has-motion .tp-unizn:not(.is-blizu) .tp-unizn__lok { transform: translateX(-78%) rotate(-8deg); }
  .tp-unizn__in { padding-left: max(var(--container-pad), 22vw); }
  .tp-unizn__logo { max-width: 30rem; }
  .tp-unizn__navp { display: none; }
}

/* domača stran: gumb do žive trgopek.si pod uvodom; stolpec stisnjen, da je med drsenjem posnetka ves v oknu */
.tp-spread__btn { margin-top: 1.6rem; }
.tp-spread .tp-spread__list { margin-top: 2rem; }
.tp-spread .tp-spread__list li { padding: 0.55rem 0; }
.tp-spread .ed-spread__text { top: 11svh; }

/* od filma Toplota do konca temna podlaga (Mitja 10. 10.): film začne temni del brez roba */
.tp-bleed--temna { margin-top: 0; }

/* Vsak stik na temnem: stojnica, vizitka (prosojen izrez), znak kot pečat pod njima */
.tp-stik__vizitka { grid-column: 9 / span 4; grid-row: 1; align-self: end; margin: 0; }
.tp-stik__vizitka img { display: block; width: 100%; height: auto; filter: drop-shadow(0 34px 40px rgba(0, 0, 0, 0.55)); }
.tp-stik__vizitka .ed-cap { margin-top: var(--space-xs); }
.tp-stik__znak { grid-column: 5 / span 4; grid-row: 2; margin-top: var(--space-lg); }
@media (max-width: 860px) {
  .tp-stik__vizitka { width: min(100%, 26rem); margin: var(--space-md) auto 0; }
  .tp-stik__znak { width: min(100%, 22rem); margin: var(--space-md) auto 0; }
}

/* podpis: senca kroga je ločen sloj (spreminja se samo prosojnost) — Safari ob sprotni box-shadow in povečavi s filtrom zatika */
.tp-odtis__senca { position: absolute; left: 50%; top: 50%; width: 90.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 34px 44px rgba(22, 24, 26, 0.3); opacity: 0; pointer-events: none; will-change: opacity; }
.tp-odtis__krog, .tp-odtis__kosara { will-change: opacity; }

/* Unibann oder na oranžni barvi znamke (Mitja 10. 10.: »malo kontrasta«). Besedilo temno (kontrast ≥ 7 : 1), bel tekst bi padel pod 4,5 : 1. */
.tp-papir .tp-uni, .tp-papir .tp-uni__mirno { background: #e49425; --color-ink: #ffffff; --color-ink-dim: rgba(255, 255, 255, 0.94); --color-ink-faint: rgba(255, 255, 255, 0.86); --color-line: rgba(255, 255, 255, 0.5); --color-accent: #ffffff; }
.tp-papir .tp-uni__stage::before { background: radial-gradient(closest-side, rgba(255, 238, 205, 0.42), rgba(255, 238, 205, 0) 72%); }
.tp-papir .tp-uni__img { filter: drop-shadow(0 12px 10px rgba(92, 40, 0, 0.34)) drop-shadow(0 46px 46px rgba(92, 40, 0, 0.42)); }   /* stik s podlago + mehka senca spodaj */
.tp-papir .tp-uni__kruh { color: #ffffff; }
.tp-papir .tp-uni__chip { font-weight: 500; }
.tp-papir .tp-uni__ime, .tp-papir .tp-uni__kruh { text-shadow: 0 1px 2px rgba(92, 40, 0, 0.18); }
html:not(.has-motion) .tp-papir .tp-uni__mirno { margin-bottom: 0; padding-block: var(--space-lg); }

.tp-unizn__dl dd { white-space: nowrap; }   /* »Katalog · splet · sejem« v eni vrsti (Mitja 10. 10.) */

/* Unibann se zaključi s fotografijo čez celo širino in besedilom na njej (Mitja 10. 10.) */
.tp-uni-kraj { position: relative; overflow: hidden; height: min(100svh, 62vw); min-height: 32rem; background: #e49425; }
.tp-uni-kraj__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; transform-origin: 50% 60%; }
.tp-uni-kraj::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 17, 18, 0) 30%, rgba(14, 17, 18, 0.5) 58%, rgba(14, 17, 18, 0.88) 100%); pointer-events: none; }
.tp-uni-kraj__txt { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad) clamp(1.6rem, 5svh, 3.4rem); }
.tp-uni-kraj__line { margin: 0; font: 700 clamp(2.4rem, 4.4vw + 0.6rem, 5.6rem)/1.02 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; color: #f5f4f2; }
.tp-uni-kraj__line em { font-style: normal; color: #e49425; }
.tp-uni-kraj__copy { max-width: 46ch; margin: var(--space-xs) 0 var(--space-sm); font-size: clamp(1.1rem, 0.35vw + 1rem, 1.3rem); line-height: 1.6; color: rgba(245, 244, 242, 0.92); }
.tp-papir .tp-uni-kraj__cap, .tp-uni-kraj__cap { margin: 0; color: rgba(245, 244, 242, 0.82); }
.tp-papir .tp-uni-kraj__cap b, .tp-uni-kraj__cap b { color: #e49425; }
@media (max-aspect-ratio: 1/1) { .tp-uni-kraj { height: auto; min-height: 0; aspect-ratio: 4 / 5; } .tp-uni-kraj__img { object-position: 22% 50%; } }
@media (max-height: 500px) and (orientation: landscape) { .tp-uni-kraj { height: 100svh; min-height: 0; } .tp-uni-kraj__line { font-size: 2rem; } .tp-uni-kraj__copy { margin-block: 0.5rem 0.6rem; font-size: 1rem; } }

/* stena gravur: samo polne vrste na vseh zaslonih (Mitja 10. 10.) — 10 stolpcev = 70, 6 in 4 stolpci = 72 */
.tp-wall__t:nth-child(n+71) { display: none; }
@media (max-width: 1100px) { .tp-wall__t:nth-child(n+71) { display: block; } .tp-wall__t:nth-child(n+73) { display: none; } }
.tp-papir .tp-uni-kraj__cap span, .tp-uni-kraj__cap span { color: rgba(245, 244, 242, 0.86); }

/* katalog: maketa čez celo širino nad listanjem, par maket pod njim (Mitja 10. 10., Nano Banana Pro) */
.tp-kat-hero { margin: 0 0 var(--space-lg); }
.tp-kat-hero .ed-plate { aspect-ratio: 2880 / 1222; }
.tp-kat-hero .ed-cap { max-width: var(--container-max); margin: var(--space-2xs) auto 0; padding-inline: var(--container-pad); }
@media (max-aspect-ratio: 1/1) { .tp-kat-hero .ed-plate { aspect-ratio: 4 / 3; } .tp-kat-hero .ed-plate img { object-position: 30% 50%; } }
.tp-kat-duo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-md); max-width: var(--container-max); margin: var(--space-lg) auto var(--space-section); padding-inline: var(--container-pad); align-items: end; }
.tp-kat-duo figure { margin: 0; }
.tp-kat-duo__a .ed-plate { aspect-ratio: 2400 / 1610; }
.tp-kat-duo__b .ed-plate { aspect-ratio: 4 / 5; }
@media (max-width: 860px) { .tp-kat-duo { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); } }

/* Vsak stik: stojnica in vizitka kot maketi (Nano Banana Pro), vizitka 4 : 5 ob stojnici 3 : 2 */
.tp-stik__sejem .ed-plate { aspect-ratio: 3 / 2; }
.tp-stik__vizitka .ed-plate { aspect-ratio: 1600 / 1986; }
.tp-stik__vizitka img { filter: none; }
.tp-stik__vizitka .ed-cap { margin-top: var(--space-2xs); }
@media (max-width: 860px) { .tp-stik__vizitka { width: auto; margin: var(--space-md) 0 0; } }

/* katalog na polici: višji kader 2 : 1 (Mitja 10. 10.) */
.tp-kat-hero .ed-plate { aspect-ratio: 2 / 1; }
.tp-kat-hero .ed-plate img { object-position: 42% 55%; }
@media (max-aspect-ratio: 1/1) { .tp-kat-hero .ed-plate { aspect-ratio: 4 / 3; } }

/* Vsak stik: stojnica + znak v vrsti, vizitka čez celo širino pod njima (Mitja 10. 10.: »bolj kot ne čez cel zaslon«) */
.tp-stik__znak { grid-column: 9 / span 4; grid-row: 1; align-self: center; margin-top: 0; }
.tp-viz-bleed { margin: 0 0 var(--space-section); }
.tp-viz-bleed .ed-plate { aspect-ratio: 16 / 9; }   /* brez max-height: pri aspect-ratio bi zožil tudi širino */
.tp-viz-bleed picture { display: block; width: 100%; height: 100%; }
.tp-viz-bleed .ed-cap { max-width: var(--container-max); margin: var(--space-2xs) auto 0; padding-inline: var(--container-pad); }
@media (max-aspect-ratio: 1/1) { .tp-viz-bleed .ed-plate { aspect-ratio: 1600 / 1986; max-height: none; } }
@media (max-width: 860px) { .tp-stik__znak { width: min(100%, 22rem); margin: var(--space-md) auto 0; } }

/* Fotografije iz mape TRG (Mitja 10. 10.) — »pot hlebca«: studio odtisi za podpisom, gravure v pekarni, rokavice v pekarni */
.tp-odtisi { max-width: var(--container-max); margin: 0 auto var(--space-lg); padding-inline: var(--container-pad); }
.tp-odtisi img { display: block; width: 100%; height: auto; }   /* Mitjeva montaža ima svojo senco */
.tp-odtisi .ed-cap { margin-top: var(--space-xs); }
.tp-par { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md); max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad) var(--space-section); align-items: start; }   /* odmik znotraj papirja */
.tp-par figure { margin: 0; }
.tp-par__a { grid-column: 1 / span 6; }
.tp-par__b { grid-column: 7 / span 6; margin-top: clamp(3rem, 8vw, 8rem) !important; }
.tp-par .ed-plate, .tp-pec .ed-plate { aspect-ratio: 3 / 2; }
.tp-duo { margin-bottom: var(--space-lg); }
.tp-pec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md); max-width: var(--container-max); margin: 0 auto var(--space-section); padding-inline: var(--container-pad); }
.tp-pec__f { grid-column: 4 / span 9; margin: 0; }
@media (max-width: 860px) {
  .tp-par, .tp-pec { display: block; }
  .tp-par__b { margin-top: var(--space-sm) !important; }
}

/* Na svetli podlagi (papir) poudarki v Trgopekovi oranžni, na temni ostane Diatonicina zlata (Mitja 10. 10.).
   Napisi filmov so na temni sliki, zato ostanejo zlati. */
.tp-papir { --color-accent: #e49425; --color-accent-soft: #e49425; }
.tp-papir .okvir__cap b { color: #c9ab86; }

/* katalog na polici: Mitjeva obdelava v Photoshopu — cel kader v izvirni višini, brez obreza, na vseh zaslonih (10. 10.) */
.tp-kat-hero .ed-plate { aspect-ratio: 3400 / 1950; }
.tp-kat-hero .ed-plate img { object-position: 50% 50%; }
@media (max-aspect-ratio: 1/1) { .tp-kat-hero .ed-plate { aspect-ratio: 3400 / 1950; } .tp-kat-hero .ed-plate img { object-position: 50% 50%; } }

/* =====================================================================
   GRAVURE KOT V KATALOGU 2025 (Mitja 10. 10.): ime EN, ime DE, koda, košara na oranžnem krogu; skupine SE · ME · LE · LXE.
   Manj v vrsti kot stena (6 / 4 / 3), bolj pregledno. Stara stena: STENA_V1 v zgradi.py, git oznaka trgopek-stena-gravur-v1.
   ===================================================================== */
.tp-gr { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-pad); }
.tp-gr__skupina + .tp-gr__skupina { margin-top: var(--space-lg); }
.tp-gr__naslov { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; margin: 0 0 var(--space-md); padding-bottom: var(--space-2xs); border-bottom: 1px solid var(--color-line); font-family: var(--font-display); text-transform: uppercase; }
.tp-gr__naslov b { font-weight: 700; font-size: clamp(1.3rem, 1vw + 0.9rem, 1.9rem); letter-spacing: 0.02em; color: var(--color-ink); }
.tp-gr__naslov span { font-weight: 400; font-size: clamp(1rem, 0.5vw + 0.85rem, 1.3rem); letter-spacing: 0.04em; color: var(--color-ink-dim); }
.tp-gr__naslov i { margin-left: auto; font-style: normal; font: 500 var(--size-label)/1 var(--font-display); letter-spacing: var(--tracking-widest); color: var(--color-accent); }
.tp-gr__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-md) var(--space-sm); }
.tp-gr__t { min-width: 0; }
.tp-gr__ime { margin: 0 0 0.7rem; font-family: var(--font-display); text-transform: uppercase; line-height: 1.15; }
.tp-gr__ime b { display: block; font-weight: 700; font-size: clamp(0.85rem, 0.35vw + 0.75rem, 1.05rem); letter-spacing: 0.02em; color: var(--color-ink); }
.tp-gr__ime span { display: block; font-weight: 400; font-size: clamp(0.8rem, 0.3vw + 0.72rem, 0.98rem); letter-spacing: 0.02em; color: var(--color-ink-dim); }
.tp-gr__ime em { display: block; margin-top: 0.15rem; font-style: normal; font-weight: 400; font-size: clamp(0.8rem, 0.3vw + 0.72rem, 0.98rem); letter-spacing: 0.04em; color: var(--color-accent); }
.tp-gr__ime em strong { font-weight: 700; }
.tp-gr__kos { position: relative; aspect-ratio: 1; }
.tp-gr__kos::before { content: ""; position: absolute; left: 0; top: 0; width: 80%; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); }
.tp-gr__kos img { position: absolute; left: 12%; top: 10%; width: 88%; height: auto; filter: drop-shadow(0 14px 16px rgba(22, 24, 26, 0.26)); transition: transform 0.7s var(--ease-out); }
.tp-gr__t:hover .tp-gr__kos img { transform: translate(-3%, -3%) rotate(-4deg); }
.tp-gr__foot { margin-top: var(--space-md); }
@media (max-width: 1100px) { .tp-gr__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tp-gr__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm) 0.8rem; } .tp-gr__ime b { font-size: 0.78rem; } .tp-gr__ime span, .tp-gr__ime em { font-size: 0.75rem; } }

/* =====================================================================
   KOMPOZICIJE IZ KATALOGA 2025 (Mitja 10. 10.): fotografija v ovalu, izrez spredaj, temna nalepka, velik bled napis, tanki krogi.
   Uporaba: košare z odtisi (01) in kup Unibann (05). Brez pokončnih črnih nalepk (Mitja).
   ===================================================================== */
.tp-oval { max-width: var(--container-max); margin: 0 auto var(--space-section); padding-inline: var(--container-pad); }
.tp-oval__oder { position: relative; aspect-ratio: 16 / 10; }
.tp-oval__napis { position: absolute; left: 50%; transform: translateX(-50%); font: 700 clamp(4rem, 12vw, 11rem)/0.82 var(--font-display); letter-spacing: 0.04em; color: rgba(22, 24, 26, 0.055); white-space: nowrap; pointer-events: none; user-select: none; }
.tp-oval__napis--zg { top: 0; }
.tp-oval__napis--sp { bottom: 0; }
.tp-oval__krogi { position: absolute; left: -3%; bottom: 4%; width: 24%; height: auto; fill: none; stroke: var(--color-accent); stroke-width: 0.45; opacity: 0.8; pointer-events: none; }
.tp-oval__foto { position: absolute; left: 12%; top: 9%; width: 76%; aspect-ratio: 2 / 1; border-radius: 999px; overflow: hidden; }
.tp-oval__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-oval__pill { position: absolute; z-index: 3; left: 4%; top: 4%; margin: 0; padding: 0.8em 2.4em 0.75em 2em; border-radius: 999px; background: #2a2b2c; box-shadow: 0 18px 34px rgba(22, 24, 26, 0.3); font-family: var(--font-display); text-transform: uppercase; line-height: 1.1; font-size: clamp(0.85rem, 0.9vw + 0.55rem, 1.55rem); }
.tp-oval__pill span { display: block; font-weight: 400; letter-spacing: 0.02em; color: #e49425; }
.tp-oval__pill b { display: block; font-weight: 700; letter-spacing: 0.02em; color: #e49425; }
.tp-oval__izrez { position: absolute; z-index: 2; left: 50%; bottom: 3%; width: 84%; height: auto; transform: translateX(-50%); filter: drop-shadow(0 26px 30px rgba(22, 24, 26, 0.2)); }
.tp-oval--odtisi .tp-oval__izrez { width: 86%; filter: none; }
.tp-oval__cap { margin-top: var(--space-xs); }
@media (max-width: 700px) {
  .tp-oval__oder { aspect-ratio: 1 / 1; }
  .tp-oval__foto { left: 0; top: 16%; width: 100%; }
  .tp-oval__izrez, .tp-oval--odtisi .tp-oval__izrez { width: 100%; bottom: 2%; }
  .tp-oval__krogi { width: 40%; bottom: 0; }
  .tp-oval__napis { font-size: 4.4rem; }
  .tp-oval__pill { top: 2%; left: 0; font-size: 0.85rem; padding: 0.7em 1.8em 0.65em 1.4em; }
}

/* Unibann · kako deluje (katalog str. 44–45): roke pridejo z roba zaslona, bled logotip v ozadju */
.tp-kako { position: relative; overflow: hidden; overflow: clip; min-height: 60vw; margin: 0 0 var(--space-lg); }
.tp-kako__napis { position: absolute; left: 50%; top: 52%; width: min(92vw, 1500px); transform: translate(-50%, -50%); opacity: 0.08; pointer-events: none; }
.tp-kako__r2 { position: absolute; right: 0; top: 2vw; width: 31vw; height: auto; filter: drop-shadow(0 30px 34px rgba(22, 24, 26, 0.18)); }
.tp-kako__r1 { position: absolute; left: 0; bottom: 0; width: 55vw; height: auto; filter: drop-shadow(0 34px 40px rgba(22, 24, 26, 0.2)); }
.tp-kako__in { position: relative; z-index: 1; max-width: var(--container-max); margin: 0 auto; padding: 27vw var(--container-pad) 4vw; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.tp-kako__txt { grid-column: 8 / span 4; }
.tp-kako__kicker { margin: 0 0 var(--space-2xs); font: 500 var(--size-label)/1.4 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); }
.tp-kako__naslov { margin: 0; font: 700 clamp(1.9rem, 2.2vw + 0.8rem, 3.2rem)/1.2 var(--font-display); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-ink); }
.tp-kako__naslov em { font-style: normal; color: var(--color-accent); }
.tp-kako__copy { margin: var(--space-sm) 0 0; max-width: 38ch; font-size: clamp(1.05rem, 0.3vw + 1rem, 1.2rem); line-height: 1.65; color: var(--color-ink-dim); }
.tp-kako__cap { margin-top: var(--space-sm); }
@media (max-width: 900px) {
  .tp-kako { min-height: 0; display: flex; flex-direction: column; }
  .tp-kako__r2 { position: relative; top: 0; align-self: flex-end; width: 64vw; }
  .tp-kako__in { display: block; padding: var(--space-sm) var(--container-pad) var(--space-md); }
  .tp-kako__r1 { position: relative; width: 96vw; }
  .tp-kako__napis { top: 40%; width: 140vw; }
}

/* oval: zgornji napis v celoti nad ovalom (Mitja 10. 10.: »daj višje, da se bo videlo«) */
.tp-oval { padding-top: clamp(3.5rem, 10vw, 9.5rem); }
.tp-oval__oder { --ot: 9%; }
.tp-oval__foto { top: var(--ot); }
.tp-oval__napis--zg { top: var(--ot); transform: translate(-50%, -96%); }
@media (max-width: 700px) { .tp-oval { padding-top: 4.2rem; } .tp-oval__oder { --ot: 16%; } }

/* rokavice v ovalu na temni podlagi: napis svetel, nalepka z robom, zlata (na temnem ostane Diatonicina zlata) */
.tp-oval--rok .tp-oval__oder { --ot: 11%; }
.tp-oval--rok .tp-oval__napis { color: rgba(245, 244, 242, 0.06); }
.tp-oval--rok .tp-oval__pill { background: #1f2122; box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(245, 244, 242, 0.08); }
.tp-oval--rok .tp-oval__pill span, .tp-oval--rok .tp-oval__pill b { color: #c9ab86; }
.tp-oval--rok .tp-oval__izrez { width: 74%; bottom: 2%; filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.55)); }
@media (max-width: 700px) { .tp-oval--rok .tp-oval__oder { --ot: 16%; } .tp-oval--rok .tp-oval__izrez { width: 96%; } }

/* stran izdelka: več zraka med košarami in napisom pod njimi (Mitja 10. 10.) */
.tp-izdelek__slika figcaption { margin-top: var(--space-md); }
/* košare z gravuro: brez zgornjega napisa (Mitja 10. 10.), zato manj prostora nad ovalom */
.tp-oval--odtisi { padding-top: var(--space-md); }

/* Mitja 10. 10.: krogi pri logotipu Unibann niso več odrezani spodaj; roke višje, senca rok ni odrezana */
.tp-unizn { overflow-x: clip; overflow-y: visible; }
.tp-unizn__krogi { bottom: clamp(1rem, 3vw, 3rem); }
.tp-kako { overflow-x: clip; overflow-y: visible; min-height: 0; padding-bottom: 4vw; }
.tp-kako__r1 { bottom: auto; top: 13vw; width: 55vw; }
.tp-kako__in { padding-top: 24vw; min-height: 52vw; }
@media (max-width: 900px) { .tp-kako { padding-bottom: var(--space-md); } .tp-kako__r1 { top: auto; } .tp-kako__in { min-height: 0; } }

/* gravure: samo ime (brez kode in nemščine); 6 v vrsti, na tablici in telefonu 3 — skupine 18 · 6 · 24 · 6 = vedno polne vrste (Mitja 10. 10.) */
@media (max-width: 1100px) { .tp-gr__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tp-gr__ime { margin-bottom: 0.9rem; }
/* rokavice v ovalu napovedo film Toplota (Mitja 10. 10.): temni del se začne z ovalom, film dobi običajen odmik */
.tp-bleed--temna { margin-top: var(--space-lg); }
.tp-oval--rok { margin-bottom: var(--space-lg); }

/* prave sence iz kataloških montaž in PSD (Mitja 10. 10.) — brez umetnih CSS senc, ki so bile mehke in nerealne */
.tp-izdelek__slika img, .tp-papir .tp-izdelek__slika img { filter: none; }
.tp-uni__img, .tp-papir .tp-uni__img { filter: none; }
.tp-zbirka--24 .tp-zbirka__t img, .tp-papir .tp-zbirka--24 .tp-zbirka__t img { filter: none; }
.tp-oval--kup .tp-oval__izrez { filter: none; }

/* gravure: senca ni več odrezana (Safari reže drop-shadow na robu slike) — okvir slike višji, slika na vrhu, senca pade znotraj (Mitja 10. 10.) */
.tp-gr__kos { aspect-ratio: 1 / 1.14; }
.tp-gr__kos::before { top: 0; }
.tp-gr__kos img { height: auto; aspect-ratio: 1 / 1.2; object-fit: contain; object-position: 50% 0; overflow: visible; }
.tp-kako img, .tp-oval__izrez { overflow: visible; }

/* rokavice: oranžna različica (Mitja 10. 10.: »oranžna«; napis GLOVES intenzivno oranžen kot Unibann) */
.tp-oval--rok .tp-oval__napis { color: #e49425; }
.tp-oval--rok .tp-oval__pill { background: #e49425; box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5); }
.tp-oval--rok .tp-oval__pill span { color: #16181a; }
.tp-oval--rok .tp-oval__pill b { color: #ffffff; }
.tp-oval--rok .tp-oval__krogi { stroke: #e49425; opacity: 1; }

/* gumb trgopek.si pod seznamom, oranžen; ob prehodu obrnjeno: obrobljen kot ostali gumbi (Mitja 10. 10.) */
.tp-spread__btn { margin-top: 2rem; }
.tp-papir .tp-spread__btn { color: #fff; border-color: var(--color-accent); }
.tp-papir .tp-spread__btn::before { transform: translateX(0); }
.tp-papir .tp-spread__btn:hover, .tp-papir .tp-spread__btn:focus-visible { color: var(--color-ink); border-color: rgba(22, 24, 26, 0.35); }
.tp-papir .tp-spread__btn:hover::before, .tp-papir .tp-spread__btn:focus-visible::before { transform: translateX(101%); }

/* stran izdelka »sodi zraven«: večja slika (prava senca iz kataloga), ožje besedilo (Mitja 10. 10.) */
.tp-izdelek__sodi { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-sm); }
.tp-izdelek__sodi img { filter: none; }
.tp-izdelek__sodi > div, .tp-izdelek__sodi > p { max-width: 17rem; }
@media (max-width: 520px) { .tp-izdelek__sodi { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); } }

/* zbirka na telefonu: dve v vrsti (24 = 12 polnih vrst) */
@media (max-width: 640px) { .tp-zbirka--24 .tp-zbirka__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); } }

/* domača stran: stolpec malo zgoščen, da ostane pripet tudi z gumbom pod seznamom */
.tp-spread .tp-spread__list li { padding: 0.45rem 0; }
.tp-spread .tp-spread__list { margin-top: 1.6rem; }

/* Unibann · kako deluje: leve roke višje, bližje krogom zgoraj; bled logotip Unibann pod rokami viden (Mitja 10. 10.). Desno nespremenjeno. */
@media (min-width: 901px) {
  .tp-kako__r1 { top: -1vw; }
  .tp-kako__napis { top: auto; bottom: 1.5vw; transform: translateX(-50%); opacity: 0.12; }
}
.tp-spread__btn { isolation: isolate; }   /* oranžna plast ostane v gumbu tudi na telefonu (stolpec ima ozadje) */

/* =====================================================================
   KONSTRUKCIJSKI LIST UNIBANN »PREREZ« (Mitja 10. 10.): u je košara v prerezu. Jezik lista S-Center (N°012):
   konstrukcija → predmet → kote → odkazila, na koncu se logotip napolni z oranžno. Pripeto na namizju.
   ===================================================================== */
.tp-ul { --unibann: #e49425; position: relative; }
.tp-ul__oder { min-height: 100svh; display: grid; align-items: center; padding: clamp(3rem, 8vh, 6rem) var(--container-pad); max-width: var(--container-max); margin-inline: auto; box-sizing: border-box; }
.tp-ul__mreza { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: clamp(2rem, 4.4vw, 4.6rem); align-items: center; }
.tp-ul__risba { margin: 0; contain: paint; }
.tp-ul__svg { display: block; width: 100%; height: auto; overflow: visible; max-width: min(100%, calc(84svh * 1380 / 1230)); margin-inline: auto; }
.tp-ul__svg path, .tp-ul__svg circle, .tp-ul__svg ellipse { fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tp-ul__svg .m { stroke: var(--color-ink); opacity: .16; stroke-width: 1.3; }
.tp-ul__svg .m.crta { stroke-dasharray: 18 8 3 8; }
.tp-ul__svg .k { stroke: var(--unibann); stroke-width: 2.4; }
.tp-ul__svg .k.tanka { stroke-width: 1.1; opacity: .7; }
.tp-ul__svg .obod { stroke-width: 1.6; }
.tp-ul__svg .srafura { stroke: var(--unibann); stroke-width: 1.4; opacity: .55; }
.tp-ul__svg .crke { stroke-width: 1.6; }
.tp-ul__svg .c { stroke: var(--color-ink); opacity: .55; }
.tp-ul__svg .c.tanka { opacity: .2; }
.tp-ul__svg .o { stroke: var(--unibann); opacity: .85; stroke-width: 1.5; }
.tp-ul__svg .t { fill: var(--color-ink); font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: .1em; }
.tp-ul__svg .t.napis { font-size: 20px; letter-spacing: .3em; fill: var(--color-ink-dim); }
.tp-ul__svg .t.koda { font-weight: 600; }
.tp-ul__svg .t.st { fill: var(--unibann); font-size: 20px; font-weight: 600; letter-spacing: 0; }
.tp-ul__barva { fill: var(--unibann); }
.tp-ul__svg .crka-u, .tp-ul__svg .crke { transition: fill 1.1s var(--ease-out), stroke 1.1s var(--ease-out); fill: transparent; }
.tp-ul__svg .srafura, .tp-ul__svg .obod { transition: opacity 1.1s var(--ease-out); }
.tp-ul.je-polna .tp-ul__svg .crka-u, .tp-ul.je-polna .tp-ul__svg .crke { fill: var(--unibann); stroke: transparent; }
.tp-ul.je-polna .tp-ul__svg .srafura { opacity: 0; }
.tp-ul.je-polna .tp-ul__svg .obod { opacity: .4; }
html.has-motion .tp-ul .tp-ul__svg .t, html.has-motion .tp-ul .tp-ul__trgopek, html.has-motion .tp-ul .tp-ul__barva { opacity: 0; transition: opacity .5s var(--ease-out); }
html.has-motion .tp-ul.je-izpisan .tp-ul__svg .t, html.has-motion .tp-ul.je-izpisan .tp-ul__trgopek, html.has-motion .tp-ul.je-izpisan .tp-ul__barva { opacity: 1; }
.tp-ul__kicker { margin: 0; font: 500 var(--size-label)/1.4 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); }
.tp-ul__naslov { margin: var(--space-2xs) 0 0; font: 700 clamp(1.9rem, 2.2vw + 0.8rem, 3.2rem)/1.06 var(--font-display); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-ink); text-wrap: balance; }
.tp-ul__lead { margin: var(--space-xs) 0 0; max-width: 40ch; font-size: clamp(1.05rem, 0.3vw + 1rem, 1.2rem); line-height: 1.6; color: var(--color-ink-dim); }
.tp-ul__opisi { list-style: none; margin: clamp(1.4rem, 3.4vh, 2.4rem) 0 0; padding: 0; display: grid; gap: .9rem; }
.tp-ul__opisi li { display: grid; gap: .25rem; padding-top: .7rem; border-top: 1px solid var(--color-line); }
html.has-motion .tp-ul__opisi li { opacity: 0; transform: translateY(12px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
html.has-motion .tp-ul__opisi li.je-viden { opacity: 1; transform: none; }
.tp-ul__opisi b { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink); display: flex; align-items: baseline; gap: .7rem; }
.tp-ul__opisi i { font-style: normal; color: var(--color-accent); }
.tp-ul__opisi span { font-size: 1rem; line-height: 1.55; color: var(--color-ink-dim); }
@media (max-width: 900px), (max-height: 560px) {
  .tp-ul__oder { min-height: 0; }
  .tp-ul__mreza { display: block; }
  .tp-ul__svg { max-width: 100%; }
  .tp-ul__zapis { margin-top: var(--space-md); }
  html.has-motion .tp-ul__opisi li { opacity: 1; transform: none; }
  .tp-ul__svg .t { font-size: 40px; }
  .tp-ul__svg .t.napis { font-size: 30px; }
  .tp-ul__svg .t.st { font-size: 34px; }
  .tp-ul__svg .krogec { r: 30px; }
}

/* fotografija: stavek na papirju */
.tp-foto { padding-top: 0; }
/* list: besedilo mora biti na pripetem odru vse vidno — širši stolpec, zbrane opombe, odmik od glave */
.tp-ul__oder { padding-top: clamp(5.5rem, 11svh, 7.5rem); padding-bottom: clamp(1.5rem, 4svh, 3rem); }
.tp-ul__mreza { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.tp-ul__opisi { gap: .55rem; margin-top: 1.3rem; }
.tp-ul__opisi li { padding-top: .5rem; }
.tp-ul__opisi span { line-height: 1.5; }
@media (max-width: 1024px), (max-height: 819px) { .tp-ul__oder { min-height: 0; } html.has-motion .tp-ul__opisi li { opacity: 1; transform: none; } html.has-motion .tp-ul .tp-ul__svg .t, html.has-motion .tp-ul .tp-ul__trgopek, html.has-motion .tp-ul .tp-ul__barva { opacity: 1; } }

/* Film Unibann v krogu (Mitja 10. 10.): oranžen pas pred odrom Unibann; film ima oranžno podlago, zato krog »plava« */
.tp-papir .tp-ufilm { background: #e49425; --color-ink: #ffffff; --color-ink-dim: rgba(255, 255, 255, 0.94); --color-accent: #ffffff; }
.tp-ufilm { padding-block: clamp(4rem, 9vw, 8rem) clamp(2rem, 5vw, 4rem); }
.tp-ufilm__in { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-pad); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-lg); align-items: center; }
.tp-ufilm__krog { margin: 0; aspect-ratio: 1; width: min(100%, 36rem); justify-self: center; border-radius: 50%; overflow: hidden; background: #e49425; box-shadow: 0 40px 70px rgba(92, 40, 0, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.25); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.tp-ufilm__krog video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-ufilm__kicker { margin: 0; font: 500 var(--size-label)/1.4 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: #ffffff; }
.tp-ufilm__line { margin: var(--space-2xs) 0 0; font: 700 clamp(2rem, 2.8vw + 0.8rem, 4rem)/1.04 var(--font-display); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: #16181a; text-wrap: balance; }
.tp-ufilm__line em { font-style: normal; color: #ffffff; }
.tp-ufilm__copy { margin: var(--space-sm) 0 0; max-width: 34ch; font-size: clamp(1.05rem, 0.35vw + 1rem, 1.25rem); line-height: 1.6; color: rgba(255, 255, 255, 0.96); }
@media (max-width: 860px) { .tp-ufilm__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } .tp-ufilm__krog { width: min(100%, 26rem); } }
/* krog filma je viden tudi na oranžni: tanek bel obroč na odmiku, kot leča */
.tp-ufilm__krog { outline: 1px solid rgba(255, 255, 255, 0.55); outline-offset: clamp(10px, 1.6vw, 18px); overflow: visible; }
.tp-ufilm__krog video { border-radius: 50%; }

/* Gravure: ime modela se ob miški obarva oranžno (Mitja 11. 10.) */
.tp-gr__ime b { transition: color 0.35s var(--ease-out); }
@media (hover: hover) { .tp-gr__t:hover .tp-gr__ime b { color: var(--color-accent); } }

/* Rokavice: GLOVES pred fotografijo, s senco spodaj za globino (Mitja 11. 10.); spodnji napis umaknjen */
.tp-oval--rok .tp-oval__napis--zg { z-index: 2; transform: translate(-50%, -86%); text-shadow: 0 0.035em 0.03em rgba(0, 0, 0, 0.45), 0 0.1em 0.16em rgba(0, 0, 0, 0.5), 0 0.22em 0.4em rgba(0, 0, 0, 0.35); }
@media (max-width: 700px) { .tp-oval--rok .tp-oval__pill { top: 27%; } }   /* telefon: nalepka na fotografiji, ne čez G */

/* Katalog: naslov avtorstva → listanje → dve maketi → polica na koncu (Mitja 11. 10.) */
.tp-kat-naslov { padding-bottom: var(--space-lg); }
.tp-kat-duo { margin-bottom: var(--space-lg); }
.tp-kat-hero { margin-bottom: var(--space-section); }

/* Unibann kup: brez sivega napisa (logotip je že zgoraj), nalepka na sredini zgornjega roba fotografije (Mitja 11. 10.) */
.tp-oval--kup { padding-top: var(--space-md); }
.tp-oval--kup .tp-oval__oder { --ot: 6%; }
.tp-oval--kup .tp-oval__pill { left: 50%; top: var(--ot); transform: translate(-50%, -50%); white-space: nowrap; text-align: center; }
@media (max-width: 700px) { .tp-oval--kup .tp-oval__oder { --ot: 14%; } .tp-oval--kup .tp-oval__pill { left: 50%; top: var(--ot); } }

/* Poglavja: vrstica avtorstva »Naše delo« (Mitja 11. 10.) */
.ed-chapter__delo { margin-top: var(--space-md); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.1rem; max-width: 60ch; font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-size: var(--size-label); line-height: 1.6; }
.ed-chapter__delo b { font-weight: 400; color: var(--color-accent); }
.ed-chapter__delo span { color: var(--color-ink); }
.tp-papir .ed-chapter__delo b { color: var(--color-accent); }
.tp-oval--odtisi { padding-top: clamp(3.5rem, 10vw, 9.5rem); }   /* GRAVURA nad fotografijo (Mitja 11. 10.) */
@media (max-width: 700px) { .tp-oval--odtisi { padding-top: 4.2rem; } }

/* Unibann: dva filma v dveh enakih krogih — levo prvi, desno pod besedilom drugi (Mitja 11. 10.) */
.tp-ufilm__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.tp-ufilm__krog { width: min(100%, 33rem); }
.tp-ufilm__desno { display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 5.5rem); min-width: 0; }
.tp-ufilm__txt { padding-top: clamp(0rem, 3vw, 3rem); }
.tp-ufilm__krog--2 { align-self: center; }
@media (max-width: 860px) { .tp-ufilm__in { grid-template-columns: minmax(0, 1fr); } .tp-ufilm__krog { width: min(100%, 26rem); } .tp-ufilm__txt { padding-top: 0; } .tp-ufilm__desno { gap: var(--space-lg); } }
@media (max-width: 700px) { .tp-oval--odtisi .tp-oval__pill { top: 27%; } }   /* telefon: nalepka ne prekriva napisa GRAVURA */

/* Konstrukcijski list znaka Trgopek »Klas, ki gori« (Mitja 11. 10.) — isti sistem kot Unibann, zrna se napolnijo s petimi toni */
.tp-ul--znak { padding-top: var(--space-lg); }
.tp-ul--znak .tp-ul__svg .zrno { stroke: var(--unibann); stroke-width: 2; fill: transparent; transition: fill 1.1s var(--ease-out), stroke 1.1s var(--ease-out); }
.tp-ul--znak.je-polna .tp-ul__svg .zrno { fill: var(--b); stroke: transparent; }
.tp-ul--znak .tp-ul__svg .crke--trgo { stroke: var(--color-ink); }
.tp-ul--znak.je-polna .tp-ul__svg .crke--trgo { fill: #2e2e2e; stroke: transparent; }
.tp-ul--znak .tp-ul__svg .vozel { stroke-width: 1.6; opacity: .8; }
.tp-ul--znak .tp-ul__svg .t.mala { font-size: 17px; letter-spacing: .06em; fill: var(--color-ink-dim); }
.tp-ul__ton { fill: var(--b); stroke: none; }
html.has-motion .tp-ul .tp-ul__ton { opacity: 0; transition: opacity .6s var(--ease-out); }
html.has-motion .tp-ul.je-izpisan .tp-ul__ton { opacity: 1; }
.tp-ul__svg .tp-ul__ton { fill: var(--b); stroke: none; }
.tp-ul--znak.je-polna .tp-ul__svg .zrno { fill-opacity: var(--o, 1); }
.tp-ul--znak .tp-ul__oder { padding-bottom: clamp(1rem, 3vh, 2rem); }   /* manj praznine do pogl. 02 (Mitja 11. 10.) */

/* ===== Kontrola 16. 10. 2026 (oblika, vsebina, splet) ===== */
/* velikosti po pravilih Diatonice: besedilo 17 px, sive opombe 15 px; svetlejša siva na temnem */
:root { --size-body: 1.0625rem; --size-small: 0.9375rem; --color-ink-faint: #8a8a87; }
.tp-papir { --color-ink-faint: #6f6d68; --tp-oranzna-mala: #a35f0a; }
.tp-ul__opisi span { font-size: 1.0625rem; }
/* drobne oznake na papirju: pečena oranžna (4,5 : 1); velika oranžna ostane za naslove in polnila */
.tp-papir :is(.ed-chapter__kicker, .ed-chapter__delo b, .ed-spread__kicker, .ed-cap b, figcaption b, .tp-izdelek__kicker,
  .tp-izdelek__dejstva dt, .tp-tabela caption, .tp-unizn__kicker, .tp-kako__kicker, .tp-ul__kicker, .tp-ul__opisi i,
  .tp-obrni__pod, .tp-obrni__chip span, .tp-gr__naslov i, .tp-gr__foot b, .ed-slogan__label, .tp-odtis__faze span,
  .tp-spread__list span, .tp-zbirka__head b) { color: var(--tp-oranzna-mala); }
.tp-papir .tp-uni-kraj__cap b, .tp-papir .tp-uni-kraj__cap span { color: #ffffff; }   /* na oranžni bela */
/* »Naše delo«: oznaka vedno nad seznamom */
.ed-chapter__delo { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
/* kazalo: povezave na poglavja, robovi na telefonu */
.ed-index { padding-inline: var(--container-pad); }
.ed-index__a { display: flex; align-items: baseline; gap: var(--space-sm); width: 100%; color: inherit; }
.ed-index__a:hover .ed-index__name, .ed-index__a:focus-visible .ed-index__name { color: var(--color-accent); }
/* naslovnica: N° in podnaslov na temnem */
.tp-hero__shade { background: linear-gradient(180deg, rgba(14, 17, 18, 0.5) 0%, rgba(14, 17, 18, 0.1) 28%, rgba(14, 17, 18, 0.42) 55%, rgba(14, 17, 18, 0.95) 100%); }
/* tehnična lista: oznake ≥ 12 px na namizju; na telefonu risba brez napisov (razlaga je v seznamu pod njo) */
.tp-ul__svg .t { font-size: 28px; }
.tp-ul__svg .t.napis { font-size: 24px; }
.tp-ul__svg .t.st { font-size: 22px; }
.tp-ul--znak .tp-ul__svg .t.mala { font-size: 21px; }
@media (max-width: 700px) { .tp-ul__svg .t { display: none; } }
/* telefon: vsi trije zasloni (besedilo pravi »trije«) */
@media (max-width: 700px) { .tp-phones:not(.tp-phones--4) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .tp-phones:not(.tp-phones--4) .tp-phone:nth-child(3) { display: block; }
  .tp-phones:not(.tp-phones--4) .tp-phone:nth-child(2) { transform: translateY(-1rem); } }
/* tabela in podnapisi: dolga povezava se lomi, kolofon na telefonu levo */
.tp-tabela caption, .ed-cap { overflow-wrap: anywhere; }
@media (max-width: 700px) { .ed-colophon__list li span { text-align: left; } .ed-colophon__list li span:last-child { text-align: right; } }
/* gravure na telefonu: imena se ne dotikajo */
@media (max-width: 640px) { .tp-gr__grid { column-gap: 1rem; } .tp-gr__ime b { overflow-wrap: anywhere; } }
/* tarče za prst ≥ 44 px */
@media (pointer: coarse) { .tp-uni__chip, .tp-flip__chip, .tp-obrni__chip { min-height: 44px; align-items: center; } }
body { font-size: var(--size-body); }   /* kontrola 16. 10.: 17 px (prej 1rem v vrstici 14) */
@media (max-width: 700px) {   /* kazalo na telefonu: namig pod imenom, nič širše od zaslona */
  .ed-index__list { display: block; width: 100%; }
  .ed-index__a { flex-wrap: wrap; column-gap: 0.8rem; row-gap: 0.1rem; }
  .ed-index__hint { flex-basis: 100%; margin-left: 0; padding-left: 2.2rem; }
}
@media (max-width: 420px) { .tp-phone figcaption, .tp-phone figcaption * { letter-spacing: 0.04em; overflow-wrap: anywhere; } }   /* trije zasloni na 320 px */

/* ===== Kontrola 16. 10. — 2. krog ===== */
.tp-papir .tp-obrni__chip.is-on span, .tp-papir .tp-odtis__faze span.is-on { color: var(--tp-oranzna-mala); }
:root { --size-lead: clamp(1.0625rem, 0.4vw + 0.95rem, 1.35rem); }
/* risbe: najmanj 12 px na zaslonu (--k iz main.js); kode barv in podnapisi šele od 1280 px */
.tp-ul__svg .t { font-size: max(28px, calc(14px * var(--k, 2))); }
.tp-ul__svg .t.napis { font-size: max(24px, calc(12.5px * var(--k, 2))); }
.tp-ul__svg .t.st { font-size: max(22px, calc(12.5px * var(--k, 2))); fill: #a35f0a; }
.tp-ul--znak .tp-ul__svg .t.mala { font-size: max(21px, calc(12.5px * var(--k, 2))); }
@media (max-width: 1279px) { .tp-ul__svg .t.napis, .tp-ul__svg .t.mala { display: none; } }
@media (max-width: 700px) { .tp-ul__svg .o { display: none; } }
/* podnapisi: lomi samo dolge povezave, ne števcev */
.ed-cap, .tp-tabela caption { overflow-wrap: break-word; }
.ed-cap b { white-space: nowrap; flex-shrink: 0; }
/* kolofon: oznake levo, vrednosti desno na vseh širinah */
.ed-colophon__list { max-width: 640px; }
.ed-colophon__list li span:first-child { text-align: left; }
.ed-colophon__list li span:last-child { text-align: right; }
/* gravure: brez lomljenja sredi besede */
.tp-gr__ime b { overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 380px) { .tp-gr__ime b { font-size: 12px; letter-spacing: 0; } .tp-gr__grid { column-gap: 0.6rem; } }
.tp-uni__kruh { text-wrap: balance; }
.tp-zbirka__t span { font-size: 0.75rem; }
/* naslovnica: N° in podnaslov berljiva tudi na svetlem ratanu */
.tp-hero__shade { background: linear-gradient(180deg, rgba(14, 17, 18, 0.5) 0%, rgba(14, 17, 18, 0.12) 26%, rgba(14, 17, 18, 0.65) 45%, rgba(14, 17, 18, 0.7) 70%, rgba(14, 17, 18, 0.95) 100%); }
.ed-cover__sub { color: #d6d6d3; }
.ed-cover__no { text-shadow: 0 1px 14px rgba(14, 17, 18, 0.8); }
.tp-tabela caption { overflow-wrap: anywhere; }   /* dolga povezava v tabeli (break-word ne zmanjša najmanjše širine tabele) */
@media (max-width: 400px) { .tp-izdelek__sodi { grid-template-columns: minmax(0, 1fr); } }   /* »Goes with this product« na najožjih telefonih pod sliko */

/* ===== Telefon, gladko drsenje (Mitja 16. 10.: »stran počaka, odsekano … predolga«) ===== */
/* sence gravur so vpete v slike (Skripte/gravure-senca.py) — brez filtra pri drsenju */
.tp-gr__kos img { filter: none; }
@media (max-width: 700px) {
  /* pripeti odseki krajši: ista vsebina, manj »čakanja« */
  html.has-motion .tp-odtis { height: 200vh; height: 200lvh; }
  .tp-uni { height: calc(6 * 30svh + 100svh); }
  .tp-obrni { height: calc(3 * 35svh + 100svh); }
  .tp-odtis__kosara { filter: none; }
  /* katalog: namesto pripetega listanja vodoravno drsenje s prstom */
  html.has-motion .tp-flip { display: none; }
  html.has-motion .tp-flip__mirno { display: flex; gap: 0.8rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 0 var(--space-lg); padding: 0 var(--container-pad) 0.6rem; scrollbar-width: none; }
  html.has-motion .tp-flip__mirno::-webkit-scrollbar { display: none; }
  html.has-motion .tp-flip__mirno figure { flex: 0 0 86%; margin: 0; scroll-snap-align: center; }
  html.has-motion .tp-flip__mirno .ed-plate { aspect-ratio: 1190 / 842; }
  html.has-motion .tp-flip__pdf-mirno { display: block; margin-top: 0; }
  /* gravure: vsaka skupina je ena vodoravna vrsta (brez osamljenih v zadnji vrsti, 3 zasloni krajše) */
  .tp-gr__grid { display: flex; grid-template-columns: none; gap: 0.8rem; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--container-pad)); padding: 0 var(--container-pad) 0.4rem; scrollbar-width: none; }
  .tp-gr__grid::-webkit-scrollbar { display: none; }
  .tp-gr__t { flex: 0 0 31%; scroll-snap-align: start; }
}
@media (max-width: 700px) { .tp-gr__grid, html.has-motion .tp-flip__mirno { scroll-padding-inline: var(--container-pad); } }   /* prva gravura ne ob robu */
.tp-gr__kos img { left: 1%; width: 110%; aspect-ratio: 600 / 576; }   /* slika ima 60 px rob za vpeto senco (480 → 600) */

/* Telefon: drugi del na gumb (Mitja 16. 10.) */
.tp-del2-skrij { display: none !important; }
.tp-del2 { margin: var(--space-lg) auto var(--space-section); max-width: var(--container-max); padding: var(--space-lg) var(--container-pad); border-top: 1px solid var(--color-line); text-align: left; }
.tp-del2__kicker { margin: 0; font: 500 var(--size-label)/1.4 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--tp-oranzna-mala, #a35f0a); }
.tp-del2__naslov { margin: var(--space-2xs) 0 0; font: 700 clamp(1.9rem, 7vw, 2.6rem)/1.05 var(--font-display); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-ink); }
.tp-del2__copy { margin: var(--space-sm) 0 0; color: var(--color-ink-dim); }
.tp-del2__slike { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0.5rem; margin: var(--space-md) 0; }
.tp-del2__slike img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.tp-del2__slike img:first-child { aspect-ratio: auto; height: 100%; }
.tp-del2__gumb { width: 100%; justify-content: center; }
.tp-papir .tp-del2__gumb { color: #16181a; border-color: #e49425; background: #e49425; }
@media (max-width: 700px) { .tp-del2 { margin-bottom: 0; padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom, 0px)); } }   /* gumb je zadnji na strani */

/* Telefon in tablica: tri deli (Mitja 16. 10.) — kartica je zadnja v delu, za njo nič */
.tp-del-skrij { display: none !important; }
.tp-del { margin: var(--space-lg) auto 0; max-width: var(--container-max); padding: var(--space-lg) var(--container-pad) calc(var(--space-xl) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--color-line); text-align: left; }
.tp-del__kicker { margin: 0; font: 500 var(--size-label)/1.4 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--tp-oranzna-mala, #a35f0a); }
.tp-del__naslov { margin: var(--space-2xs) 0 0; font: 700 clamp(1.9rem, 7vw, 3rem)/1.05 var(--font-display); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-ink); text-wrap: balance; }
.tp-del__copy { margin: var(--space-sm) 0 0; max-width: 46ch; color: var(--color-ink-dim); }
.tp-del__slike { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0.5rem; margin: var(--space-md) 0; max-width: 760px; }
.tp-del__slike img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: #ebe7df; }
.tp-del__gumb { width: 100%; max-width: 760px; justify-content: center; }
.tp-papir .tp-del__gumb { color: #16181a; border-color: #e49425; background: #e49425; }