/* Hedl Ranč — shared design system
   Layout: full-bleed cinematic photographs and sticky, stacked chapters on warm night;
   an editorial serif carries the voice, giant compressed caps name the chapters, mono carries the facts.
   No colour accent (the farm, Oct 28: no orange): the wordmark is bone on dark; marks, hovers and focus use the
   section's own --fg / --bg / --muted, so they work on night and on paper alike.
   Motion: transform/opacity only; one easing family (--ease out, --ease-io in-out); nothing waits on
   an observer to become visible except text masks, which have a sweep + timeout fallback in site.js. */

/* metric-matched fallbacks: local faces scaled to the web fonts' widths and line metrics (measured in Chrome),
   so lines break in the same places before and after the swap and nothing shifts when the fonts arrive */
@font-face { font-family: "Cond Fallback"; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"); font-weight: 100 900; size-adjust: 71.5%; ascent-override: 125.9%; descent-override: 42%; line-gap-override: 0%; }
@font-face { font-family: "Cond Fallback B"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 100 900; size-adjust: 52.5%; ascent-override: 171.4%; descent-override: 57.1%; line-gap-override: 0%; }
@font-face { font-family: "Serif Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); size-adjust: 83.6%; ascent-override: 118.4%; descent-override: 37.1%; line-gap-override: 0%; }
@font-face { font-family: "Serif Fallback"; font-style: italic; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"); size-adjust: 93.2%; ascent-override: 106.2%; descent-override: 33.3%; line-gap-override: 0%; }
@font-face { font-family: "Sans Fallback"; src: local("Arial"), local("ArialMT"), local("Roboto"); size-adjust: 101.9%; ascent-override: 95.2%; descent-override: 24.5%; line-gap-override: 0%; }
@font-face { font-family: "Mono Fallback"; src: local("Consolas"); size-adjust: 109.1%; ascent-override: 92.6%; descent-override: 27.5%; line-gap-override: 0%; }
@font-face { font-family: "Mono Fallback B"; src: local("Menlo Regular"), local("Menlo-Regular"), local("Courier New"), local("CourierNewPSMT"); size-adjust: 100%; ascent-override: 101%; descent-override: 30%; line-gap-override: 0%; }

:root {
  --night: #0f0d0b;
  --night-2: #181512;
  --night-3: #231f1a;
  --bone: #ece6da;
  --paper: #efebe3;
  --paper-2: #e3ded3;
  --ink: #17140f;
  --smoke: #9a9285;
  --stone: #645d53;
  --line-d: rgba(236, 230, 218, .14);
  --line-l: rgba(23, 20, 15, .14);

  --serif: "Instrument Serif", "Serif Fallback", "Times New Roman", serif;
  --sans: "Instrument Sans", "Sans Fallback", Arial, sans-serif;
  --mono: "Geist Mono", "Mono Fallback", "Mono Fallback B", ui-monospace, monospace;
  --cond: "Sofia Sans Extra Condensed", "Cond Fallback", "Cond Fallback B", Impact, sans-serif;

  --g: clamp(16px, 2.4vw, 36px);
  --sec: clamp(104px, 13vw, 210px);
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --t-reveal: 1.2s;
  --logo: url("foto/6bhpLlfhr0rZntw4CxaZHA6yFug-2400.webp");
}

/* themes: a page or a section picks one */
.t-dark  { --bg: var(--night); --fg: var(--bone); --muted: var(--smoke); --line: var(--line-d); --surface: var(--night-2); --strong: rgba(236,230,218,.42); color-scheme: dark; }
.t-light { --bg: var(--paper); --fg: var(--ink);  --muted: var(--stone); --line: var(--line-l); --surface: var(--paper-2); --strong: rgba(23,20,15,.4); color-scheme: light; }
section.t-dark, section.t-light, footer.t-dark, div.t-dark, div.t-light { background: var(--bg); color: var(--fg); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html.site { scrollbar-gutter: stable; } /* menu/drawer lock scroll without the page jumping sideways */
html.site:has(> body.menu-open), html.site:has(> body.drawer-open) { background: var(--night); } /* the reserved gutter matches the dark panels */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
body.menu-open, body.drawer-open { overflow: hidden; }
img { display: block; max-width: 100%; }
:where(.site) img { transition: opacity .7s var(--ease-out); } /* images fade in when decoded (site.js) */
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, h4, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { background: var(--fg); color: var(--bg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* keyboard users can jump past the navigation */
.skip { position: fixed; z-index: 400; left: 12px; top: 12px; padding: 12px 18px; border-radius: 999px; background: var(--bone); color: var(--ink); font-family: var(--mono); font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; transform: translateY(-160%); transition: transform .3s var(--ease); }
.skip:focus-visible { transform: none; }
main:focus { outline: none; }

/* film grain: one static, viewport-sized texture (no animation → no per-frame compositing work) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px 200px;
}

/* ───────── type ───────── */
.wrap { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--g); }
.mono { font-family: var(--mono); font-size: .75rem; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; line-height: 1.5; }
.muted { color: var(--muted); }
.mega {
  font-family: var(--cond); font-weight: 800; text-transform: uppercase; letter-spacing: -.012em;
  font-size: clamp(4.6rem, 19.5vw, 21rem); line-height: .79;
}
/* the two long names: their first line sets the size; on a phone KULINARIČNO does, and the name takes three lines. More air than .mega, because Č and Ž reach into the line above */
.mega--name { font-size: calc((100vw - 2 * var(--g)) / 4.35); line-height: .92; }
@media (min-width: 641px) { .mega--name { font-size: calc((100vw - 2 * var(--g)) / 8.3); } }
.serif-xxl { font-family: var(--serif); font-weight: 400; font-size: clamp(3.2rem, 8.6vw, 9rem); line-height: .93; letter-spacing: -.025em; text-wrap: balance; }
.serif-xl  { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 5.4vw, 5.6rem); line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.serif-l   { font-family: var(--serif); font-weight: 400; font-size: clamp(1.95rem, 3.3vw, 3.4rem); line-height: 1.06; letter-spacing: -.012em; text-wrap: pretty; }
.serif-m   { font-family: var(--serif); font-weight: 400; font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.18; letter-spacing: -.005em; }
.serif-xxl em, .serif-xl em, .serif-l em, .serif-m em { font-style: italic; }
.ember { color: var(--muted); }   /* the small label above a title (the name is from the orange days) */
.body { color: var(--muted); max-width: 54ch; text-wrap: pretty; }
.body + .body { margin-top: 1em; }
.stack { display: grid; gap: clamp(20px, 2.4vw, 34px); align-content: start; }

/* ───────── actions ───────── */
.cta {
  display: inline-flex; align-items: center; gap: 16px; padding: 0; border: 0; background: none; color: inherit; text-decoration: none;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; line-height: 1.3; text-align: left;
}
.cta__dot {
  flex: none; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--strong, currentColor);
  display: grid; place-items: center;
  transition: background .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), translate .5s var(--ease);
}
.cta__dot::before {
  content: ""; width: 15px; height: 15px; background: currentColor; transition: transform .6s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cta--down .cta__dot::before { transform: rotate(90deg); }
.cta--out .cta__dot::before { transform: rotate(-45deg); }
.cta:hover .cta__dot, .cta:focus-visible .cta__dot { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.cta:hover .cta__dot::before { transform: rotate(-45deg); }
.cta--down:hover .cta__dot::before { transform: rotate(90deg) translateX(2px); }
.cta:focus-visible { outline: none; }
.cta:focus-visible .cta__dot { outline: 2px solid currentColor; outline-offset: 4px; }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px;
  border-radius: 999px; border: 1px solid var(--fg); background: var(--fg); color: var(--bg); text-decoration: none; white-space: nowrap;
  font-family: var(--mono); font-size: .75rem; letter-spacing: .03em; text-transform: uppercase;
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), translate .5s var(--ease);
}
.pill:hover { background: transparent; border-color: var(--fg); color: var(--fg); }
.pill--line { background: transparent; color: var(--fg); border-color: var(--strong); }
.pill--line:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.pill--sm { min-height: 42px; padding: 0 18px; }
.pill--block { width: 100%; white-space: normal; text-align: center; }
.pill:disabled { cursor: progress; opacity: .7; }
.pill:disabled:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.textlink { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; color: inherit; border: 0; border-radius: 0; padding: 0 0 3px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease); }
.textlink:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ───────── reveal system ─────────
   [data-split]  words rise inside padded masks (padding = room for č/š/ž carons, descenders, italic overhang)
   [data-reveal] blocks settle 1.6rem upward — transform only, so they are never invisible
   [data-settle] media: the box is always there; the photo eases from 1.12 to 1 */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .26em .08em .16em; margin: -.26em -.08em -.16em; }
.js [data-split] .wi { display: inline-block; transform: translate3d(0, calc(100% + .44em), 0); transition: transform var(--t-reveal) var(--ease); transition-delay: calc(var(--i, 0) * 26ms + var(--d, 0ms)); }
.js [data-split].in .wi { transform: none; }
.js [data-reveal] { transform: translate3d(0, 1.6rem, 0); transition: transform var(--t-reveal) var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].in { transform: none; }
.js [data-settle] img { scale: 1.12; }
.js [data-settle].in img { scale: 1; }
.js .now, .js .now *, .js .now::before { transition: none !important; }

/* media boxes: blurred 64 px placeholder underneath, full image fades in once decoded */
.media { position: relative; overflow: hidden; border-radius: 3px; background: var(--surface); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .9s var(--ease-out), scale 1.8s var(--ease); }
.has-lq { isolation: isolate; }
.has-lq::before {
  content: ""; position: absolute; inset: -6%; z-index: -1; pointer-events: none;
  background: var(--lq) center / cover no-repeat; filter: blur(18px); transform: scale(1.06);
  transition: opacity 1s var(--ease-out);
}
.has-lq.is-ready::before { opacity: 0; }
.has-lq.lq-done::before { content: none; }
.js img.lq { opacity: 0 !important; }
[data-speed] { will-change: transform; }
.media > img[data-speed] { height: 118%; margin-top: -9%; }

/* ───────── curtain (page transitions): cover .45s, lift .75s, both on the compositor ───────── */
.curtain {
  position: fixed; inset: 0; z-index: 250; background: var(--night); color: var(--bone);
  display: grid; place-items: center; will-change: transform;
  transition: transform .75s cubic-bezier(.55, 0, .15, 1);
  animation: curtain-failsafe 0s 4s forwards;
}
.curtain.is-up { transform: translate3d(0, -100%, 0); }
.curtain.from-below { transform: translate3d(0, 100%, 0); transition: none; }
.curtain.is-covering { transform: none; transition: transform .45s cubic-bezier(.65, 0, .35, 1); }
.curtain__mark { width: min(62vw, 540px); aspect-ratio: 1534 / 399; background: var(--bone); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.curtain__count { position: absolute; left: var(--g); bottom: var(--g); font-family: var(--mono); font-size: .75rem; color: var(--smoke); }
.curtain__place { position: absolute; right: var(--g); bottom: var(--g); font-family: var(--mono); font-size: .75rem; color: var(--smoke); text-transform: uppercase; }
html:not(.js) .curtain { display: none; }
@keyframes curtain-failsafe { to { visibility: hidden; } }
.curtain.is-up, .curtain.from-below, .curtain.is-covering { animation: none; }

/* ───────── nav ───────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px var(--g); color: var(--fg); transition: transform .8s var(--ease), background-color .5s var(--ease), color .4s;
}
.nav.is-hidden { transform: translate3d(0, -110%, 0); }
.nav.is-solid { background-color: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav.on-media { color: var(--bone); }
.nav__menu { justify-self: start; display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 10px 0; font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.burger { width: 26px; height: 9px; position: relative; }
.burger i { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .6s var(--ease), top .6s var(--ease); }
.burger i:first-child { top: 0; } .burger i:last-child { top: 8px; }
.menu-open .burger i:first-child { top: 4px; transform: rotate(45deg); }
.menu-open .burger i:last-child { top: 4px; transform: rotate(-45deg); }
.nav__logo { display: block; width: clamp(92px, 8vw, 118px); aspect-ratio: 1534 / 399; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.nav__end { justify-self: end; display: flex; align-items: center; gap: 22px; }
.nav__cart { background: none; border: 0; padding: 10px 0; font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; display: inline-flex; gap: 8px; align-items: center; }
.nav__cart b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: currentColor; font-weight: 400; font-size: .6875rem; color: var(--bg); }
.nav.on-media .nav__cart b, .menu-open .nav__cart b { color: var(--night); }
.nav .pill { min-height: 42px; padding: 0 20px; background: transparent; color: currentColor; border-color: currentColor; }
.nav .pill:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.menu-open .nav { color: var(--bone); background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 640px) {
  .nav__menu span:not(.burger) { display: none; }
  .nav__cart .txt { display: none; }
  .nav__end { gap: 14px; }
  .nav .pill { padding: 0 16px; min-height: 40px; }
}

/* ───────── full-screen menu: a wipe made of two opposite translations (compositor only) ───────── */
.menu {
  position: fixed; inset: 0; z-index: 80; overflow: hidden; background: var(--night); color: var(--bone);
  visibility: hidden; transform: translate3d(0, -100%, 0);
  transition: transform .9s var(--ease-io), visibility 0s .9s;
}
.menu__in {
  height: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: minmax(0, 1fr) auto; gap: var(--g);
  padding: 110px var(--g) var(--g); transform: translate3d(0, 100%, 0); transition: transform .9s var(--ease-io);
}
.menu.is-open { visibility: visible; transform: none; transition: transform .9s var(--ease-io), visibility 0s; }
.menu.is-open .menu__in { transform: none; }
.menu__links { display: grid; align-content: center; gap: 2px; }
.menu__links a {
  display: flex; align-items: baseline; gap: 18px; text-decoration: none; width: fit-content;
  font-family: var(--cond); font-weight: 800; text-transform: uppercase; font-size: clamp(2.9rem, min(8.4vw, 10.5vh), 8rem); line-height: .86;
  color: rgba(236,230,218,.32); transition: color .5s var(--ease);
}
.menu__links a small { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; font-size: clamp(1.1rem, 1.6vw, 1.5rem); letter-spacing: 0; color: var(--smoke); opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.menu__links a:hover, .menu__links a:focus-visible, .menu__links a[aria-current="page"] { color: var(--bone); }
.menu__links a:hover small, .menu__links a:focus-visible small, .menu__links a[aria-current="page"] small { opacity: 1; transform: none; }
.menu__links a:focus-visible { outline-offset: 6px; }
.menu__links a .w { display: inline-block; overflow: hidden; padding: .26em .06em .16em; margin: -.26em -.06em -.16em; }
.menu__links a .wi { display: inline-block; transform: translate3d(0, calc(100% + .44em), 0); transition: transform 1s var(--ease); transition-delay: calc(.2s + var(--i) * 55ms); }
.menu.is-open .menu__links a .wi { transform: none; }
.menu__media { position: relative; border-radius: 3px; overflow: hidden; background: var(--night-2); }
.menu__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease), transform 1.6s var(--ease); }
.menu__media img.is-on { opacity: 1; transform: none; }
.menu__media img[src*="ranc-hero"] { object-position: 30% 50%; } /* keep the farmhouse of the 3D poster in frame */
.menu__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; padding-top: 20px; border-top: 1px solid var(--line-d); color: var(--smoke); }
.menu__foot a { text-decoration: none; color: var(--bone); }
.menu__foot a:hover { color: var(--smoke); }
@media (max-width: 820px) {
  .menu__in { grid-template-columns: 1fr; padding-top: 96px; }
  .menu__media { display: none; }
}

/* ───────── hero ───────── */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: #000; color: var(--bone); }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; transition: opacity .9s var(--ease-out); }
.js .hero__media img.zoom { transform: scale(1.14); transition: transform 2.6s var(--ease), opacity .9s var(--ease-out); }
.is-loaded .hero__media img.zoom { transform: scale(1); }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,6,.55) 0%, rgba(10,8,6,0) 24%, rgba(10,8,6,0) 46%, rgba(10,8,6,.86) 100%); }
.hero__content { position: absolute; inset: auto 0 0 0; padding: 0 var(--g) var(--g); display: grid; gap: clamp(18px, 2.4vw, 32px); }
.hero__meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.hero__meta > :last-child { text-align: right; }
.wordmark { width: 100%; aspect-ratio: 1534 / 399; background: var(--bone); -webkit-mask: var(--logo) center / 100% 100% no-repeat; mask: var(--logo) center / 100% 100% no-repeat; }
.js .hero .wordmark { clip-path: inset(0 0 100% 0); transform: translateY(12%); transition: clip-path 1.5s var(--ease-io) .1s, transform 1.5s var(--ease) .1s; }
.is-loaded .hero .wordmark { clip-path: inset(0 0 0 0); transform: none; }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; }
.scroll-cue i { width: 1px; height: 44px; background: rgba(236,230,218,.25); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; inset: 0; background: var(--bone); animation: cue 2.4s var(--ease-io) infinite; }
.hero.is-off .scroll-cue i::after { animation-play-state: paused; }
@keyframes cue { 0% { transform: translateY(-100%); } 50% { transform: none; } 100% { transform: translateY(100%); } }
.hero__title { display: grid; gap: 16px; }
@media (max-width: 760px) {
  .hero__meta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero__meta > :last-child { text-align: left; }
  .hero__meta .scroll-cue { display: none; }
  .hero__media img.pos-r { object-position: 82% 45%; }
}

/* ───────── generic section rhythm ───────── */
.sec { padding-block: var(--sec); }
.sec--tight { padding-block: calc(var(--sec) * .6); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px) var(--g); }
.grid12 > * { min-width: 0; }
.rule { border-top: 1px solid var(--line); }
.label-row { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 22px; }

/* manifesto: words light up as you read (opacity written per frame by site.js, no transition) */
.manifesto [data-words] { font-family: var(--serif); font-size: clamp(2.3rem, 5.1vw, 5.4rem); line-height: 1.04; letter-spacing: -.02em; max-width: 22ch; }
.manifesto .mw { opacity: .4; }   /* dim, but still 3:1 for large text */
.manifesto em { font-style: italic; }

/* marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(14px, 1.6vw, 24px); }
.marquee__track { display: flex; width: max-content; animation: marq 46s linear infinite; will-change: transform; }
.marquee.is-off .marquee__track { animation-play-state: paused; }
.marquee__track span { font-family: var(--cond); font-weight: 200; text-transform: uppercase; font-size: clamp(3.2rem, 8.4vw, 8rem); line-height: .9; white-space: nowrap; padding-right: .3em; }
.marquee__track b { flex: none; align-self: center; width: .13em; height: .13em; margin-right: .3em; border-radius: 50%; background: var(--muted); font-size: clamp(3.2rem, 8.4vw, 8rem); }
@keyframes marq { to { transform: translate3d(-50%, 0, 0); } }

/* stacked doors: each one holds still for a beat (margin) before the next slides over it */
.doors { position: relative; display: flow-root; }
.door { position: sticky; top: 0; height: 100svh; min-height: 600px; margin-bottom: 32svh; overflow: hidden; background: #000; color: var(--bone); }
.door:last-child { margin-bottom: 0; } /* the last one is never covered, it simply scrolls on */
.door__inner { position: absolute; inset: 0; transform-origin: 50% 0; will-change: transform; overflow: hidden; background: #000; }
.door__inner img { width: 100%; height: 100%; object-fit: cover; transition: opacity .9s var(--ease-out); }
.door__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,6,.5) 0%, rgba(10,8,6,0) 30%, rgba(10,8,6,.15) 55%, rgba(10,8,6,.88) 100%); }
.door__dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; will-change: opacity; }
.door__top { position: absolute; inset: 0 0 auto 0; padding: 96px var(--g) 0; display: flex; justify-content: space-between; gap: 20px; }
.door__content { position: absolute; inset: auto 0 0 0; padding: 0 var(--g) var(--g); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: end; gap: 24px 48px; }
.door__side { display: grid; gap: 26px; padding-bottom: clamp(6px, 1.4vw, 22px); }
.door__link { position: absolute; inset: 0; z-index: 1; }
.door__link:focus-visible { outline-offset: -8px; }
.door__content, .door__top { z-index: 2; pointer-events: none; }
.door__content a, .door__content button { pointer-events: auto; }
@media (max-width: 860px) { .door__content { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .door__top { flex-direction: column; gap: 6px; } }
/* two columns: the longest title (DOŽIVETJA ≈ 3.2em) must fit beside the 440 px side column */
@media (min-width: 861px) { .door .mega { font-size: min(clamp(4.6rem, 19.5vw, 21rem), calc((100vw - 2 * var(--g) - 500px) / 3.25)); } }
/* the bakery's title takes two lines: BREZGLUTENSKA (≈ 5.15em) sets the size, on a phone and beside the side column */
.door__shade--high { background: linear-gradient(180deg, rgba(10,8,6,.5) 0%, rgba(10,8,6,0) 30%, rgba(10,8,6,.34) 50%, rgba(10,8,6,.9) 100%); } /* the second line lifts the title onto a white plate */
.door .mega--two { font-size: min(19.5vw, calc((100vw - 2 * var(--g)) / 5.2)); }
@media (min-width: 861px) { .door .mega--two { font-size: min(clamp(4.6rem, 19.5vw, 21rem), calc((100vw - 2 * var(--g) - 500px) / 5.2)); } }

/* quote */
.quote { position: relative; min-height: 115svh; display: grid; place-items: center; overflow: hidden; text-align: center; background: #000; color: var(--bone); }
.quote > .media { position: absolute; inset: 0; border-radius: 0; background: #000; }
.quote > .media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(10,8,6,.5), rgba(10,8,6,.85)); }
.quote__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(26px, 3vw, 44px); padding: var(--sec) var(--g); max-width: 1300px; }

/* credentials */
.creds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.creds > div { display: grid; gap: 10px; padding: 24px 24px 0 0; align-content: start; }
.creds > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
/* the same marks as on Naša zgodba, small: real logos where they exist, a typographic seal where they don't */
.creds__mark { width: 64px; height: 64px; margin-bottom: 6px; }
img.creds__mark { object-fit: contain; }
span.creds__mark { border-radius: 50%; border: 1px solid var(--bone); box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px rgba(236,230,218,.5); display: grid; place-content: center; justify-items: center; gap: 2px; color: var(--bone); }
span.creds__mark b { font-family: var(--cond); font-weight: 800; font-size: 1.2rem; line-height: .8; text-transform: uppercase; letter-spacing: .02em; }
span.creds__mark small { font-family: var(--mono); font-size: .45rem; letter-spacing: .14em; text-transform: uppercase; }
span.creds__mark--gold { border-color: #fff; color: #fff; box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px #fff; }
@media (max-width: 900px) { .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .creds > div:nth-child(3) { border-left: 0; padding-left: 0; } .creds > div { padding-bottom: 24px; } }
@media (max-width: 520px) { .creds { grid-template-columns: 1fr; } .creds > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } .creds > div { padding-bottom: 22px; } }

/* dates table */
.dates { border-top: 1px solid var(--line); }
.date-row {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 3fr) minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 16px 28px; align-items: center;
  padding-block: clamp(20px, 2vw, 30px); border-bottom: 1px solid var(--line);
}
.date-row::before { content: ""; position: absolute; inset: 0 calc(-1 * clamp(8px, 1.2vw, 18px)); z-index: -1; border-radius: 3px; background: var(--surface); opacity: 0; transition: opacity .5s var(--ease); }
.date-row > * { transition: translate .6s var(--ease); }
.date-row:hover::before { opacity: 1; }
.date-row:hover > :first-child { translate: 6px 0; }
.date-row__d { display: flex; align-items: baseline; gap: 14px; }
.date-row__d b { font-family: var(--cond); font-weight: 800; text-transform: uppercase; font-size: clamp(2.4rem, 3.6vw, 3.6rem); line-height: .85; }
/* no dates announced: each row leads with the evening itself, the status sits small beside it */
.dates--tbd .date-row__d b { font-size: clamp(2rem, 2.9vw, 2.9rem); letter-spacing: .005em; }
.dates__note { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 22px; line-height: 1.7; }
.dates__note a { color: var(--fg); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.dates__empty { padding-block: 28px; border-bottom: 1px solid var(--line); }
@media (max-width: 860px) {
  .date-row { grid-template-columns: minmax(0, 1fr) auto; }
  .date-row > :nth-child(3), .date-row > :nth-child(4) { grid-column: 1; }
  .date-row > .pill { grid-row: 1 / span 2; grid-column: 2; }
}
/* next-date status next to the booking buttons */
.next { display: inline-flex; align-items: center; gap: 10px; }
.next::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; }
.next--open::before { background: currentColor; }

/* sequence steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); border-top: 1px solid var(--line); }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps > div { display: grid; gap: 14px; padding-top: 26px; align-content: start; }
.steps .num { font-family: var(--cond); font-weight: 200; font-size: clamp(3.6rem, 5vw, 5.4rem); line-height: .8; color: var(--fg); }
@media (max-width: 900px) { .steps, .steps--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps, .steps--3 { grid-template-columns: 1fr; } }

/* scrollytelling (meso) */
.tale { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g); }
.tale__media { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; }
.tale__frame { position: relative; height: 80svh; border-radius: 3px; overflow: hidden; background: var(--surface); }
.tale__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1s var(--ease), transform 2s var(--ease); }
.tale__frame img.is-on { opacity: 1; transform: none; }
.tale__count { position: absolute; left: 20px; bottom: 18px; z-index: 1; color: var(--bone); }
.tale__steps > div { min-height: 100svh; display: grid; align-content: center; gap: 22px; padding-right: clamp(0px, 4vw, 80px); }
.tale__steps img { display: none; }
@media (max-width: 860px) {
  .tale { grid-template-columns: 1fr; }
  .tale__media { display: none; }
  .tale__steps > div { min-height: 0; padding-block: 56px; }
  .tale__steps img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; background: var(--surface); }
}

/* forms */
.f { display: grid; gap: 8px; min-width: 0; }
.f > span { font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.f input, .f select, .f textarea {
  width: 100%; min-height: 54px; padding: 10px 0; background: transparent; border: 0; border-bottom: 1px solid var(--strong);
  border-radius: 0; font-size: 1.125rem; color: var(--fg); transition: border-color .3s;
}
.f__fixed { display: flex; align-items: center; min-height: 54px; border-bottom: 1px solid var(--line); font-size: 1.125rem; }
.f textarea { min-height: 88px; resize: vertical; }
.f select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; background-size: 12px; padding-right: 28px; }
.f select option { background: var(--night-2); color: var(--bone); }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-bottom-color: var(--fg); }
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible { box-shadow: 0 1px 0 0 var(--fg); border-bottom-color: var(--fg); }
.f input::placeholder, .f textarea::placeholder { color: var(--muted); opacity: .7; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 28px; }
.fgrid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .fgrid { grid-template-columns: 1fr; } }
.togs { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.togs legend { padding: 0; margin-bottom: 12px; font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.tog { position: relative; }
.tog input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.tog span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--strong); border-radius: 999px; font-size: .9375rem; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.tog:hover span { border-color: var(--fg); }
.tog input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.tog input:focus-visible + span { outline: 2px solid currentColor; outline-offset: 3px; }
.fine { font-size: .875rem; color: var(--muted); }
.form-msg { font-size: .9375rem; line-height: 1.45; color: var(--muted); }
.form-msg.is-err { color: var(--fg); padding-left: 12px; border-left: 2px solid currentColor; }
.ok { display: grid; gap: 10px; }

/* ───────── footer ───────── */
.foot { padding-top: var(--sec); overflow: hidden; }
.foot__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px var(--g); }
.foot__top > * { min-width: 0; }
.foot__hello { grid-column: 1 / span 7; display: grid; gap: 40px; align-content: start; }
.foot__news { grid-column: 9 / span 4; display: grid; gap: 18px; align-content: start; }
.contact { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 14px 28px; }
.contact dt { color: var(--smoke); padding-top: .35em; }
.contact dd { font-size: 1.0625rem; }
.contact a { text-decoration: none; transition: color .3s; }
.contact a:hover { color: var(--smoke); }
.news { display: flex; align-items: center; border-bottom: 1px solid var(--strong); transition: border-color .3s; }
.news:focus-within { border-bottom-color: var(--fg); }
.news input { flex: 1; min-width: 0; min-height: 56px; border: 0; background: none; font-size: 1.125rem; color: var(--fg); }
.news input:focus { outline: none; }
.news input::placeholder { color: var(--muted); }
.news button { background: none; border: 0; font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; min-height: 56px; transition: color .3s; }
.news button:hover { color: var(--muted); }
.foot__links { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: clamp(64px, 8vw, 120px); padding-block: 22px; border-block: 1px solid var(--line); }
.foot__links a { text-decoration: none; transition: color .3s; }
.foot__links a:hover { color: var(--smoke); }
.foot__eu { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-block: 24px; color: var(--smoke); font-size: .875rem; }
.foot__eu img { height: 46px; width: auto; background: #fff; padding: 6px 10px; border-radius: 2px; }
.foot__eu a { color: var(--bone); }
.foot .wordmark { margin-top: clamp(32px, 4vw, 64px); }
.foot__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-block: 18px calc(20px + env(safe-area-inset-bottom, 0px)); color: var(--smoke); }
@media (max-width: 900px) { .foot__hello, .foot__news { grid-column: 1 / -1; } }

/* ───────── drawer ───────── */
.drawer { position: fixed; inset: 0; z-index: 150; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(8,7,5,.6); opacity: 0; transition: opacity .6s var(--ease); }
.drawer__panel {
  position: absolute; inset: 0 0 0 auto; width: min(580px, 100%); background: var(--night-2); color: var(--bone);
  display: grid; grid-template-rows: auto minmax(0, 1fr); transform: translate3d(100%, 0, 0); transition: transform .8s var(--ease);
  --fg: var(--bone); --bg: var(--night-2); --muted: var(--smoke); --line: var(--line-d); --strong: rgba(236,230,218,.4); --surface: var(--night-3);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; gap: 16px; padding: 22px var(--g); padding-top: calc(22px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--line-d); }
.drawer__head p { margin-right: auto; color: var(--smoke); }
.drawer__head button { background: none; border: 0; padding: 8px 0; font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bone); transition: color .3s; }
.drawer__head button:hover { color: var(--smoke); }
.drawer__body { overflow-y: auto; padding: clamp(28px, 4vw, 48px) var(--g) calc(48px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
.view { display: grid; gap: 28px; }
.view h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: .98; letter-spacing: -.02em; }
.view h2:focus { outline: none; }
.view h2 em { font-style: italic; }
.choices { display: grid; border-top: 1px solid var(--line-d); }
.choice {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; align-items: center; width: 100%;
  padding: 14px 0; background: none; border: 0; border-bottom: 1px solid var(--line-d); text-align: left; text-decoration: none; color: var(--bone);
}
.choice::before { content: ""; position: absolute; inset: 0 -12px; z-index: -1; border-radius: 3px; background: var(--night-3); opacity: 0; transition: opacity .45s var(--ease); }
.choice > * { transition: translate .55s var(--ease); }
.choice:hover::before, .choice:focus-visible::before { opacity: 1; }
.choice:hover > :last-child, .choice:focus-visible > :last-child { translate: 4px 0; color: var(--bone); }
.choice img { width: 76px; height: 76px; object-fit: cover; border-radius: 2px; background: var(--night-3); transition: opacity .5s var(--ease-out); }
.choice b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.05; }
.choice small { display: block; margin-top: 4px; color: var(--smoke); font-size: .875rem; line-height: 1.4; }
.choice .mono { color: var(--smoke); white-space: nowrap; }
.lines { display: grid; border-top: 1px solid var(--line-d); }
.line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding-block: 12px; border-bottom: 1px solid var(--line-d); }
.line img { width: 56px; height: 56px; object-fit: cover; border-radius: 2px; background: var(--night-3); transition: opacity .5s var(--ease-out); }
.line b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.1; transition: color .3s; }
.line small { font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; color: var(--smoke); }
.line.has-qty b { color: #fff; }
.line.has-qty .qty { border-color: var(--fg); }
.qty { display: inline-grid; grid-template-columns: 38px 28px 38px; align-items: center; border: 1px solid var(--strong); border-radius: 999px; }
.qty button { height: 38px; background: none; border: 0; font-size: 1.05rem; color: inherit; border-radius: 999px; transition: color .3s; }
.qty button:hover { color: var(--muted); }
.qty output { text-align: center; font-family: var(--mono); font-size: .8125rem; }
.sum { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.sum b { font-family: var(--serif); font-weight: 400; font-size: 2.8rem; line-height: 1; }
.secure { display: flex; gap: 10px; align-items: center; color: var(--smoke); font-size: .8125rem; }
.done__mark { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--fg); display: grid; place-items: center; color: var(--fg); font-size: 1.6rem; }

/* toast + cart bar */
.toast {
  position: fixed; left: 50%; top: 84px; z-index: 140; transform: translate(-50%, -20px); opacity: 0; pointer-events: none;
  padding: 12px 20px; border-radius: 999px; background: var(--bone); color: var(--ink); font-size: .9375rem; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
  transition: opacity .5s var(--ease), transform .5s var(--ease); max-width: calc(100% - 32px); text-align: center;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.cartbar {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 95; transform: translate(-50%, 180%);
  display: flex; align-items: center; gap: 18px; padding: 7px 7px 7px 24px; border-radius: 999px; background: var(--night); color: var(--bone);
  border: 1px solid var(--line-d); box-shadow: 0 30px 60px -24px rgba(0,0,0,.7); transition: transform .8s var(--ease); max-width: calc(100% - 24px);
}
.cartbar.is-on { transform: translate(-50%, 0); }
.cartbar .mono { white-space: nowrap; }
.cartbar .pill { --fg: var(--bone); --bg: var(--night); min-height: 46px; }
.drawer-open .cartbar { transform: translate(-50%, 180%); }
@media (max-width: 560px) {
  .cartbar { left: 12px; right: 12px; justify-content: space-between; gap: 10px; padding-left: 18px; transform: translateY(180%); max-width: none; }
  .cartbar.is-on { transform: none; }
  .drawer-open .cartbar { transform: translateY(180%); }
  .cartbar .pill { padding: 0 16px; }
}

/* custom cursor label (desktop): the outer box follows the pointer, the disc scales in */
.cursor { position: fixed; left: 0; top: 0; z-index: 110; width: 0; height: 0; pointer-events: none; transform: translate3d(-300px, -300px, 0); will-change: transform; }
.cursor > span {
  position: absolute; left: -52px; top: -52px; width: 104px; height: 104px; border-radius: 50%;
  background: var(--bone); color: var(--ink); display: grid; place-items: center;
  font-family: var(--mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .03em;
  transform: scale(0); transition: transform .5s var(--ease);
}
.cursor.is-on > span { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-split] .wi, .js [data-reveal], .js .hero .wordmark, .js .hero__media img.zoom { transform: none !important; clip-path: none !important; }
  .js [data-settle] img { scale: none !important; }
  .js img.lq { opacity: 1 !important; }
  .curtain { display: none; }
}

/* inline grid placements collapse to one column on small screens */
@media (max-width: 860px) { .grid12 > * { grid-column: 1 / -1 !important; } }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fine a { color: inherit; text-underline-offset: 3px; }