/* ==========================================================================
   EDITION — Diatonica Photographic Edition layout language (V2).
   A curated-exhibition / magazine grammar: chapters, huge outlined numerals,
   offset editorial grids with overlap, a sticky reading spread, a blend-mode
   typographic interlude, and a colophon. Pure CSS (sticky/grid/blend) — no
   GSAP pins — so it behaves identically on every viewport and orientation.
   Uses only tokens.css custom properties. Reveal classes (r-words/r-fade/
   r-rise) and the lazy data-src mechanism come from the shared engine.
   ========================================================================== */

/* ---- shared plate (image frame) ---- */
.ed-plate { position: relative; overflow: hidden; background: var(--color-bg-raised); }
.ed-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-plate::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(245,244,242,0.06); pointer-events: none; }
.ed-cap { 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); }
.ed-cap b { font-weight: 500; color: var(--color-accent); }

/* ---- 0 · COVER — magazine front page ---- */
.ed-cover { position: relative; height: 100svh; min-height: 540px; overflow: hidden; background: var(--color-bg); }
.ed-cover__media { position: absolute; inset: 0; }
.ed-cover__media img { width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 40%; animation: edCoverZoom 26s ease-out forwards; }
@keyframes edCoverZoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ed-cover__media img { animation: none; } }
.ed-cover__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,17,18,0.55) 0%, rgba(14,17,18,0.15) 30%, rgba(14,17,18,0.2) 62%, rgba(14,17,18,0.88) 100%); }
.ed-cover__masthead { position: absolute; top: calc(var(--space-lg) + 34px); left: 0; right: 0; display: flex; justify-content: center; gap: 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); opacity: 0.9; }
.ed-cover__masthead em { font-style: normal; color: var(--color-accent-soft); }
.ed-cover__title { position: absolute; left: 0; right: 0; bottom: 18svh; padding-inline: var(--container-pad); text-align: center; }
.ed-cover__no { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem, 1.5vw, 1.5rem); letter-spacing: var(--tracking-widest); color: var(--color-accent-soft); margin-bottom: var(--space-2xs); }
.ed-cover__name { margin: 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-tight); line-height: 0.92; font-size: clamp(3.4rem, 11vw, 11.5rem); color: var(--color-ink); text-shadow: 0 4px 40px rgba(0,0,0,0.45); }
.ed-cover__sub { margin-top: var(--space-xs); font-size: var(--size-lead); color: var(--color-ink-dim); }
.ed-cover__meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-md); padding: var(--space-xs) var(--container-pad); border-top: 1px solid rgba(245,244,242,0.14); font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-dim); background: rgba(14,17,18,0.35); backdrop-filter: blur(6px); }
.ed-cover__meta b { color: var(--color-ink); font-weight: 500; }

/* ---- INDEX — exhibition manifest ---- */
.ed-index { padding-block: var(--space-section); text-align: center; }
.ed-index__label { font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); }
.ed-index__list { list-style: none; margin: var(--space-md) auto 0; padding: 0; display: inline-block; text-align: left; }
.ed-index__list li { display: flex; align-items: baseline; gap: var(--space-sm); padding-block: var(--space-2xs); border-bottom: 1px solid var(--color-line); font-family: var(--font-display); text-transform: uppercase; }
.ed-index__list li:last-child { border-bottom: 0; }
.ed-index__num { font-size: var(--size-small); letter-spacing: var(--tracking-widest); color: var(--color-accent); }
.ed-index__name { font-size: clamp(1.4rem, 1.2vw + 1rem, 2.2rem); font-weight: 600; letter-spacing: var(--tracking-tight); color: var(--color-ink); }
.ed-index__hint { font-family: var(--font-body); font-size: var(--size-small); text-transform: none; letter-spacing: 0; color: var(--color-ink-faint); margin-left: auto; padding-left: var(--space-md); }

/* ---- CHAPTER HEAD — huge outlined numeral + title ---- */
.ed-chapter { position: relative; padding: var(--space-section) var(--container-pad) var(--space-lg); max-width: var(--container-max); margin-inline: auto; }
.ed-chapter__no { position: absolute; top: calc(var(--space-section) - 0.18em); left: calc(var(--container-pad) - 0.04em); z-index: 0; font-family: var(--font-display); font-weight: 700; line-height: 1; font-size: clamp(7rem, 22vw, 20rem); color: transparent; -webkit-text-stroke: 1px var(--color-accent); opacity: 0.42; pointer-events: none; user-select: none; }
.ed-chapter__body { position: relative; z-index: 1; padding-top: clamp(3.5rem, 11vw, 10rem); }
.ed-chapter__kicker { font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2xs); }
.ed-chapter__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--size-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-ink); max-width: 16ch; }
.ed-chapter__lead { margin-top: var(--space-sm); max-width: 52ch; font-size: var(--size-lead); color: var(--color-ink-dim); }

/* ---- OFFSET EDITORIAL GRID (chapter 01) — overlap, asymmetry, air ---- */
.ed-offset { position: relative; padding-inline: var(--container-pad); max-width: var(--container-max); margin-inline: auto; margin-block: var(--space-lg) var(--space-section); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-2xs) var(--space-md); align-items: start; }
/* position:relative is REQUIRED here — .ed-vert inside is absolutely
   positioned and must anchor to THIS figure. Without it the caption anchors
   to the page and lands ~32px past the right viewport edge on 1366–1512px
   screens (caught by the responsive audit). */
.ed-offset__a { grid-column: 1 / span 8; grid-row: 1; position: relative; }
.ed-offset__a .ed-plate { aspect-ratio: 1979 / 1357; }
.ed-offset__b { grid-column: 8 / span 5; grid-row: 1; margin-top: clamp(4rem, 14vw, 14rem); z-index: 2; }
.ed-offset__b .ed-plate { aspect-ratio: 1980 / 1182; box-shadow: 0 30px 80px rgba(0,0,0,0.55); }
.ed-offset__c { grid-column: 3 / span 8; grid-row: 2; margin-top: var(--space-lg); }
.ed-offset__c .ed-plate { aspect-ratio: 1980 / 1141; }
@media (max-width: 860px) {
  .ed-offset { display: block; }
  .ed-offset__b { margin-top: var(--space-sm); }
  .ed-offset__c { margin-top: var(--space-sm); }
}

/* ---- STICKY SPREAD (chapter 02) — text stands still, plates flow past ---- */
.ed-spread { display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; gap: var(--space-xl); padding-inline: var(--container-pad); max-width: var(--container-max); margin-inline: auto; margin-block: var(--space-section); }
.ed-spread__text { position: sticky; top: 16svh; align-self: start; }
.ed-spread__kicker { font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2xs); }
.ed-spread__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--size-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-ink); }
.ed-spread__copy { margin-top: var(--space-sm); max-width: 40ch; font-size: var(--size-lead); color: var(--color-ink-dim); }
.ed-spread__stack { display: flex; flex-direction: column; gap: var(--space-xl); }
.ed-spread__stack figure { margin: 0; }
.ed-spread__stack .ed-plate { aspect-ratio: 1980 / 1220; }
.ed-spread__stack figure:nth-child(even) { width: 86%; align-self: flex-end; }
@media (max-width: 900px) {
  .ed-spread { display: block; }
  .ed-spread__text { position: static; margin-bottom: var(--space-md); }
  .ed-spread__stack { gap: var(--space-md); }
  .ed-spread__stack figure:nth-child(even) { width: 100%; }
}

/* ---- INTERLUDE — full-bleed plate with a huge blended word ---- */
/* The word reads as an inverted cut-out of the plate behind it — same effect
   mix-blend-mode: difference used to give, minus the color. difference against
   white returns the inverted BACKDROP, so warm tones came back as blue; here the
   letters are filled with the plate itself (background-clip: text) and then
   grayscale()+invert() run in that order, so the inversion happens on a
   desaturated source and the result is neutral.
   Two things must stay in lockstep or the illusion breaks: --scrim drives both
   the plate's darkening and the gradient layered into the text fill, and the
   text's background geometry (cover/center over inset:0) must match the img's
   object-fit: cover. --interlude-img is set per case in the HTML, since every
   case uses a different plate.
   Darkening is what buys legibility here: contrast is |2·luma − 1|, so it
   collapses in midtones and pushing the plate darker pulls it back.
   NOTE: never put r-words on this element — the split wraps every word in a
   span, and a bare `span` descendant rule here would restyle them all (that
   exact bug shipped once; sub-line is class-scoped since). */
.ed-interlude { --scrim: 0.45; position: relative; min-height: 82svh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ed-interlude__media { position: absolute; inset: 0; }
.ed-interlude__media img { width: 100%; height: 100%; object-fit: cover; }
.ed-interlude__media::after { content: ""; position: absolute; inset: 0; background: rgba(14,17,18,var(--scrim)); }
.ed-interlude__word { position: absolute; inset: 0; z-index: 1; margin: 0; padding-inline: var(--container-pad); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-tight); line-height: 1; font-size: clamp(3rem, 13vw, 13rem); text-align: center; background-image: linear-gradient(rgba(14,17,18,var(--scrim)), rgba(14,17,18,var(--scrim))), var(--interlude-img); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: grayscale(1) invert(1); }
.ed-interlude__sub { display: block; font-size: 0.16em; letter-spacing: var(--tracking-widest); font-weight: 400; margin-top: var(--space-2xs); }

/* ---- GOLD CHAPTER (03) — staggered duo on a warmed ground ---- */
.ed-gold { position: relative; background: linear-gradient(180deg, var(--color-bg) 0%, #171410 18%, #171410 82%, var(--color-bg) 100%); }
.ed-gold .ed-chapter__no { -webkit-text-stroke-color: var(--color-accent-soft); }
.ed-gold__duo { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-md); padding-inline: var(--container-pad); max-width: var(--container-max); margin-inline: auto; padding-bottom: var(--space-section); align-items: start; }
.ed-gold__duo figure { margin: 0; }
.ed-gold__duo figure:first-child { grid-column: 1 / span 6; }
.ed-gold__duo figure:last-child { grid-column: 7 / span 6; margin-top: clamp(3rem, 9vw, 9rem); }
.ed-gold__duo .ed-plate { aspect-ratio: 1980 / 1235; }
.ed-gold__rule { width: 64px; height: 2px; background: var(--color-accent); margin-bottom: var(--space-sm); }
@media (max-width: 860px) {
  .ed-gold__duo { display: block; }
  .ed-gold__duo figure:last-child { margin-top: var(--space-md); }
}

/* ---- PLATE ROW (chapter 04) — numbered triptych ---- */
.ed-plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); padding-inline: var(--container-pad); max-width: var(--container-max); margin-inline: auto; margin-block: var(--space-lg) var(--space-section); }
.ed-plates figure { margin: 0; }
.ed-plates .ed-plate { aspect-ratio: 1980 / 1200; }
.ed-plates figure:nth-child(2) { transform: translateY(clamp(1.5rem, 4vw, 4rem)); }
@media (max-width: 860px) {
  .ed-plates { grid-template-columns: 1fr; }
  .ed-plates figure:nth-child(2) { transform: none; }
}

/* ---- COLOPHON — the back page ---- */
.ed-colophon { padding: var(--space-section) var(--container-pad); text-align: center; border-top: 1px solid var(--color-line); }
.ed-colophon__fin { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 9vw, 8rem); line-height: 1; text-transform: uppercase; letter-spacing: var(--tracking-tight); color: transparent; -webkit-text-stroke: 1px var(--color-accent); }
.ed-colophon__list { list-style: none; margin: var(--space-lg) auto 0; padding: 0; max-width: 560px; }
.ed-colophon__list li { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-2xs); border-bottom: 1px solid var(--color-line); font-family: var(--font-display); font-size: var(--size-small); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.ed-colophon__list li span:first-child { color: var(--color-ink-faint); }
.ed-colophon__list li span:last-child { color: var(--color-ink); }
.ed-colophon__note { margin-top: var(--space-lg); font-size: var(--size-lead); color: var(--color-ink-dim); max-width: 46ch; margin-inline: auto; }
.ed-colophon__cta { margin-top: var(--space-md); }

/* ---- vertical caption (desktop flourish) ---- */
@media (min-width: 1100px) {
  .ed-vert { position: absolute; top: 0; right: calc(-1 * var(--space-sm)); writing-mode: vertical-rl; font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ink-faint); }
}
@media (max-width: 1099px) { .ed-vert { display: none; } }


/* ---- SLOGAN — a written line as a hero moment (text-only chapter body).
   Frames a slogan Diatonica authored as the seed of the whole story; no
   image, the words carry it. Dark ground, Oswald, gold payoff line. ---- */
.ed-slogan { padding: var(--space-md) var(--container-pad) var(--space-section); text-align: center; }
.ed-slogan__label { font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); }
.ed-slogan__line { margin: var(--space-md) auto 0; max-width: 22ch; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-tight); line-height: 1.02; font-size: clamp(2.4rem, 5.5vw, 5.75rem); color: var(--color-ink); }
.ed-slogan__line em { font-style: normal; color: var(--color-accent); }
.ed-slogan__note { margin: var(--space-lg) auto 0; max-width: 54ch; font-size: var(--size-lead); color: var(--color-ink-dim); }


/* ==========================================================================
   V2.1 additions (2026-07-21) — chapters 05 Kavarna / 06 Terasa / 07 Wellness
   Reuse the edition language: Kavarna = .ed-offset, Terasa = .ed-solo (new,
   single centered plate), Wellness = .ed-gold + .ed-well gradient override.
   ========================================================================== */

/* ---- SOLO PLATE (chapter 06 Terasa) — one full-width centered plate ---- */
.ed-solo { padding-inline: var(--container-pad); max-width: var(--container-max); margin-inline: auto; margin-block: var(--space-lg) var(--space-section); }
.ed-solo figure { margin: 0; }

/* ---- WELLNESS ground (chapter 07) — violet-warmed variant of .ed-gold.
   Must come AFTER .ed-gold in this file so the gradient override wins. ---- */
.ed-well { background: linear-gradient(180deg, var(--color-bg) 0%, #171219 18%, #171219 82%, var(--color-bg) 100%); }
.ed-well .ed-chapter__no { -webkit-text-stroke-color: var(--color-accent-soft); }
/* first of two stacked duos: tighten its bottom so the pairs read as one set */
.ed-well__duo-a { padding-bottom: var(--space-md); }
/* second duo: mirror the stagger (first plate drops, second stays up) */
.ed-well__duo-b figure:first-child { margin-top: clamp(3rem, 9vw, 9rem); }
.ed-well__duo-b figure:last-child { margin-top: 0; }
@media (max-width: 860px) {
  .ed-well__duo-b figure:first-child { margin-top: 0; }
  .ed-well__duo-b figure:last-child { margin-top: var(--space-md); }
}


/* ==========================================================================
   V2.2 additions (2026-07-21) — chapter 08 Splet: device mockup + CTA.
   CSS-only "Studio Display" + floating phone; no pins, no JS, reveal via
   the shared r-rise/r-fade primitives. Static composition = zero overflow
   risk (phone is absolutely positioned INSIDE the padded scene).
   ========================================================================== */
.ed-web { position: relative; padding-bottom: var(--space-section); }

.ed-web__scene { position: relative; z-index: 1; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
/* warm accent glow behind the devices */
.ed-web__scene::before { content: ""; position: absolute; inset: 8% 0 -4% 0; background: radial-gradient(62% 55% at 46% 55%, rgba(177,146,111,0.16), transparent 72%); pointer-events: none; z-index: 0; }

/* ---- devices — PRAVA mockup fotografija (licencirana, Freepik PSD →
   PNG z alfo, 2400×1600): zaslon računalnika + iPad + iPhone. iPad in
   iPhone imata posnetka strani zapečena v sliko (offline perspektivni
   warp). Zaslon velikega displaya je v PNG-ju IZREZAN (prozoren) — pod
   njim leži .ed-mock__stage z živim, animiranim posnetkom strani,
   poravnanim prek matrix3d homografije.
   POZOR: homografija je izračunana v dizajn-pikslih za 2400×1600 oder;
   assets/js/edition.js prek ResizeObserverja nastavlja --ms (rendered
   width / 2400). Če JS ne teče, je --ms:0 → zaslon je "ugasnjen" (skozi
   luknjo se vidi temno ozadje strani) — eleganten fallback. ---- */
.ed-mock { position: relative; width: 100%; overflow: hidden; --ms: 0; }
.ed-mock__base { position: relative; z-index: 2; display: block; width: 100%; height: auto; }
.ed-mock__stage { position: absolute; top: 0; left: 0; width: 2400px; height: 1600px; transform-origin: 0 0; transform: scale(var(--ms)); z-index: 1; }
/* element = bbox kvadra zaslona; matrix3d ga ukrivi na dejanski kvader
   (vogali: TL 0,0 · TR 1214.2,82.1 · BR 1213.5,748.3 · BL 0.8,758.9) */
.ed-mock__screen { position: absolute; left: 727.68px; top: 294.4px; width: 1214.24px; height: 758.88px; overflow: hidden; transform-origin: 0 0; transform: matrix3d(1.139070,0.076999,0,0.00011453, 0.001056,1.001336,0,0.00000176, 0,0,1,0, 0,0,0,1); background: #0e1112; }
.ed-mock__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }

/* stran v zaslonu se zapelje navzdol in nazaj, ko scena pride v pogled
   (main.js prek skupnega r-rise observerja doda .in-view).
   Tempo: hiter začetek (v ~2,9 s prevozi 38 % strani), nato umirjen tek
   do dna; alternate vožnja nazaj je zrcalna. */
@keyframes ed-web-scroll {
  0% { object-position: 50% 0%; animation-timing-function: cubic-bezier(0.2, 0.6, 0.45, 1); }
  18% { object-position: 50% 38%; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { object-position: 50% 100%; }
}
.ed-web__scene.in-view .ed-mock__screen img { animation: ed-web-scroll 16s 0.5s infinite alternate; }
@media (prefers-reduced-motion: reduce) { .ed-web__scene.in-view .ed-mock__screen img { animation: none; } }

/* ---- CTA under the scene ---- */
.ed-web__cta { position: relative; z-index: 1; margin: var(--space-lg) auto 0; text-align: center; }
.ed-web__note { margin: var(--space-sm) auto 0; text-align: center; font-family: var(--font-display); font-size: var(--size-label); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ink-faint); }



/* Podnaslov vmesnega odseka: 0,16 em velike besede je na telefonu 7,7 px — spodnja meja 12 px (7. 10. 2026). */
.ed-interlude__sub { font-size: max(0.16em, 0.75rem); }