/* Holistic Nutri, pravac 1: Terakota, "Dnevnik". Her notebook, opened. */
:root{
  --terra:#974316; --cream:#F5EFE3; --sand:#E3D7C4; --rose:#D88269; --brick:#C14D36; --olive:#5F5D3A;
  --disp:'Gambarino', Georgia, serif;
  --body:'Hedvig Letters Sans', ui-sans-serif, system-ui, sans-serif;
  --mono:'Xanh Mono', ui-monospace, 'Courier New', monospace;
  --pad:clamp(20px, 4.4vw, 72px);
  --hh:64px;
  --rh-bg:var(--terra); --rh-fg:var(--cream);
}
@media (max-width:899px){ :root{ --hh:56px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
body{
  margin:0; background:var(--cream); color:var(--terra);
  font-family:var(--body); font-size:19px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; overflow-x:clip;
}
img{ display:block; max-width:100%; height:auto }
figure{ margin:0 }
h1,h2,h3,h4,p,ol,ul{ margin:0 }
ol,ul{ padding:0; list-style:none }
a{ color:inherit }
::selection{ background:var(--terra); color:var(--cream) }
.t-terra ::selection, .t-brick ::selection{ background:var(--cream); color:var(--terra) }
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{ position:absolute; left:-999px; top:8px; z-index:100; background:var(--cream); color:var(--terra); padding:8px 12px }
.skip:focus{ left:8px }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px }

/* grounds */
section{ position:relative }
.t-terra{ background:var(--terra); color:var(--cream) }
.t-cream{ background:var(--cream); color:var(--terra) }
.t-sand { background:var(--sand);  color:var(--terra) }
.t-brick{ background:var(--brick); color:var(--cream) }

/* notebook devices */
.entry{ font-family:var(--mono); font-style:italic; font-size:15px; letter-spacing:.01em; line-height:1.3 }
.folio{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; opacity:.72 }
.note{ font-family:var(--mono); font-size:15px }
.ph{ display:inline-block; font-family:var(--mono); font-style:italic; font-size:14px; line-height:1.2;
  padding:.35em .75em; border:1px dashed currentColor; letter-spacing:.02em; opacity:.9 }
.ph-lg{ font-size:clamp(17px, 1.7vw, 26px) }
.ph-line{ display:block; height:.62em; margin:.95em 0; background:currentColor; opacity:.13; width:100% }
.ph-line-s{ width:58% }
.potpis{ display:block; aspect-ratio:3285/627; width:clamp(190px, 22vw, 360px); background-color:currentColor;
  -webkit-mask:url(/assets/logo/potpis.png) no-repeat left center / contain; mask:url(/assets/logo/potpis.png) no-repeat left center / contain }
.potpis-lg{ width:clamp(230px, 30vw, 500px) }
.lnk{ display:inline-block; font-family:var(--disp); font-size:clamp(20px, 1.6vw, 26px); text-decoration:none;
  padding-bottom:4px; background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 100% 1px; transition:background-size .5s }
.lnk:hover{ background-size:0 1px; background-position:100% 100% }

/* ================= RUNNING HEAD ================= */
.rh{ position:fixed; inset:0 0 auto 0; height:var(--hh); z-index:50; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:2vw; padding:0 var(--pad); background:var(--rh-bg); color:var(--rh-fg);
  transition:background-color .45s ease, color .45s ease }
.rh::after{ content:""; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px; background:currentColor; opacity:.28 }
.rh-logo{ display:block; height:30px }
.rh-logo img{ height:30px; width:auto }
.rh .on-cream{ display:none }
.rh.light .on-terra{ display:none } .rh.light .on-cream{ display:block }
.rh-index{ justify-self:center; display:flex; gap:clamp(14px, 2.2vw, 40px); font-family:var(--mono); font-size:15px }
.rh-index a{ text-decoration:none; white-space:nowrap; position:relative }
.rh-index a i{ font-style:italic; opacity:.55; margin-right:.5em }
.rh-index a::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s }
.rh-index a:hover::after{ transform:scaleX(1) }
.rh-end{ display:flex; align-items:center; gap:22px }
.rh-folio{ font-family:var(--mono); font-size:15px; white-space:nowrap }
.rh-folio b{ font-weight:400; display:inline-block; min-width:2ch }
.rh-cta{ font-family:var(--disp); font-size:19px; text-decoration:none; padding:7px 16px 8px; background:var(--rh-fg); color:var(--rh-bg); transition:background-color .45s, color .45s }
.rh-cta:hover{ opacity:.88 }
.rh-menu{ display:none; font:inherit; font-family:var(--mono); font-size:15px; color:inherit; background:none; border:1px solid currentColor; padding:6px 12px; cursor:pointer }
@media (max-width:1080px){ .rh-index{ display:none } }
@media (max-width:899px){
  .rh{ grid-template-columns:1fr auto; gap:12px }
  .rh-logo, .rh-logo img{ height:24px }
  .rh-cta{ display:none }
  .rh-menu{ display:inline-block }
  .rh-folio{ font-size:13px }
}

/* split words: masked by clip-path so the line box keeps its tight leading */
.w{ display:inline-block; clip-path:inset(-.4em -.15em -.3em -.15em) }
.wi{ display:inline-block }
.rh.force-dark{ --rh-bg:var(--terra) !important; --rh-fg:var(--cream) !important }
.rh.force-dark .on-terra{ display:block !important } .rh.force-dark .on-cream{ display:none !important }

/* mobile table of contents */
.toc{ position:fixed; inset:0; z-index:45; background:var(--terra); color:var(--cream); padding:calc(var(--hh) + 6vh) var(--pad) 90px; overflow:auto }
.toc[hidden]{ display:none }
.toc-label{ font-family:var(--mono); font-style:italic; font-size:15px; opacity:.7; margin-bottom:3vh }
.toc-list a{ display:flex; align-items:baseline; gap:10px; text-decoration:none; padding:12px 0; border-bottom:1px solid rgba(245,239,227,.22) }
.toc-list span{ font-family:var(--disp); font-size:clamp(30px, 8.6vw, 54px); line-height:1.05 }
.toc-list em{ flex:1; border-bottom:1px dotted rgba(245,239,227,.5); transform:translateY(-6px) }
.toc-list i{ font-family:var(--mono); font-size:13px; white-space:nowrap }
.toc-cta{ display:inline-block; margin-top:5vh; font-family:var(--disp); font-size:26px; background:var(--cream); color:var(--terra); padding:10px 20px; text-decoration:none }
.toc-sig{ margin-top:6vh; width:220px; color:var(--cream) }
body.toc-open{ overflow:hidden }

/* ================= 01 HERO ================= */
.s-hero{ min-height:100svh; padding:calc(var(--hh) + 5.5vh) var(--pad) 7vh; overflow:hidden;
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); grid-template-rows:auto 1fr auto; column-gap:2vw }
.hero-sym{ position:absolute; width:min(86vw, 1300px); left:-24vw; bottom:-42vw; opacity:.14; z-index:0; pointer-events:none }
.hero-note{ grid-column:1 / 5; grid-row:1; position:relative; z-index:2; display:flex; align-items:center; gap:14px }
.hero-note::after{ content:""; width:12vw; height:1px; background:currentColor; opacity:.5 }
.hero-h{ grid-column:1 / 11; grid-row:2; align-self:center; position:relative; z-index:3;
  font-family:var(--disp); font-weight:400; font-size:clamp(66px, 13.2vw, 244px); line-height:.84; letter-spacing:-.028em; margin:2vh 0 .2em -.04em }
.hero-h .ln{ display:block; clip-path:inset(-.35em -.2em -.28em -.2em) }
.hero-h .ln > span{ display:block }
.hero-h .ln:nth-child(2){ padding-left:1.15em }
.hero-fig{ position:absolute; z-index:2; right:var(--pad); top:calc(var(--hh) + 4vh); width:clamp(260px, 27vw, 470px); aspect-ratio:3/4; overflow:hidden }
.hero-fig img{ width:100%; height:100%; object-fit:cover; object-position:50% 30% }
.hero-lead{ grid-column:1 / 6; grid-row:3; position:relative; z-index:3; font-size:clamp(19px, 1.45vw, 23px); line-height:1.5; max-width:31ch; margin-top:5vh }
.hero-lead .lnk{ margin-top:22px }
.hero-folio{ position:absolute; right:var(--pad); bottom:4vh; z-index:2 }
@media (max-width:899px){
  .s-hero{ display:block; min-height:0; padding-bottom:12vh }
  .hero-h{ font-size:clamp(58px, 19vw, 120px); margin-top:5vh }
  .hero-h .ln:nth-child(2){ padding-left:.6em }
  .hero-fig{ position:relative; right:auto; top:auto; width:74vw; margin:4vh 0 0 auto; z-index:1 }
  .hero-lead{ margin-top:5vh }
  .hero-sym{ width:150vw; left:-60vw; bottom:-40vw }
  .hero-folio{ bottom:3vh }
}

/* ================= 02 OPEN SPREAD ================= */
.s-spread{ display:grid; grid-template-columns:minmax(0,1.05fr) 1px minmax(0,.95fr); column-gap:clamp(26px, 5vw, 96px);
  padding:16vh var(--pad) 12vh }
.page{ position:relative; padding-bottom:64px }
.page .folio{ position:absolute; bottom:0 }
.page-l .folio{ left:0 } .page-r .folio{ right:0 }
.page-l .entry{ margin-bottom:6vh }
.spread-q{ font-family:var(--disp); font-size:clamp(34px, 4.5vw, 82px); line-height:1.02; letter-spacing:-.015em; max-width:13ch }
.spine{ background:currentColor; opacity:.28; position:relative }
.spine::before,.spine::after{ content:""; position:absolute; left:-3px; width:7px; height:7px; border-radius:50%; background:currentColor }
.spine::before{ top:0 } .spine::after{ bottom:0 }
.page-r{ padding-top:15vh }
.spread-p{ font-size:clamp(19px, 1.45vw, 22px); line-height:1.62; max-width:34ch; margin-bottom:1.2em }
.drop::first-letter{ font-family:var(--disp); float:left; font-size:5.1em; line-height:.78; margin:.06em .1em 0 0 }
.marg-note{ display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:15px; margin-top:7vh; opacity:.85 }
.marg-note .hair{ width:56px; height:1px; background:currentColor }
@media (max-width:899px){
  .s-spread{ grid-template-columns:1fr; padding:11vh var(--pad) 9vh }
  .spine{ height:1px; margin:6vh 0 }
  .spine::before{ left:0; top:-3px } .spine::after{ left:auto; right:0; bottom:-3px }
  .page-r{ padding-top:0 }
  .page{ padding-bottom:44px }
}

/* ================= 03 WORD WALL ================= */
.s-wall{ padding:18vh 0 13vh; overflow:hidden }
.wall-pre{ margin:0 var(--pad) 7vh 52%; font-size:clamp(19px, 1.6vw, 25px); line-height:1.45; max-width:28ch }
.wall-h{ font-family:var(--disp); font-weight:400; font-size:clamp(54px, 14.2vw, 290px); line-height:.8; letter-spacing:-.035em; white-space:nowrap }
.wall-h span{ display:block; will-change:transform }
.wall-a{ padding-left:calc(var(--pad) - .04em) }
.wall-b{ text-align:right; padding-right:var(--pad) }
.wall-def{ display:grid; grid-template-columns:1fr 1.25fr; gap:4vw; padding:9vh var(--pad) 0; align-items:start }
.wall-def p{ font-family:var(--disp); font-size:clamp(26px, 2.8vw, 48px); line-height:1.1; max-width:20ch }
.wall-folio{ position:absolute; left:var(--pad); bottom:4vh }
@media (max-width:899px){
  .wall-pre{ margin:0 var(--pad) 6vh }
  .wall-h{ font-size:clamp(46px, 14vw, 90px) }
  .wall-def{ grid-template-columns:1fr; gap:18px }
  .s-wall{ padding-bottom:14vh }
}

/* ================= 04 STAIRCASE ================= */
.s-stairs{ padding:16vh var(--pad) 14vh; min-height:100vh }
.stairs{ position:relative; z-index:2 }
.stairs li{ font-family:var(--disp); font-size:clamp(32px, 4.35vw, 82px); line-height:1.04; letter-spacing:-.012em;
  border-top:1px solid rgba(151,67,22,.3); padding:.32em 0 .18em }
.stairs li:nth-child(2){ margin-left:9vw }
.stairs li:nth-child(3){ margin-left:18vw }
.stairs li:nth-child(4){ margin-left:27vw }
/* photo sits low-left, beside the note, so no staircase line ever runs over it */
.stairs-fig{ position:absolute; left:var(--pad); bottom:13vh; width:clamp(150px, 17vw, 300px); aspect-ratio:4/5; overflow:hidden; z-index:1 }
.stairs-fig img{ width:100%; height:100%; object-fit:cover }
.stairs-note{ margin:11vh 0 0 46%; max-width:36ch; font-size:clamp(19px, 1.5vw, 23px); line-height:1.6 }
.stairs-note .potpis{ margin-top:30px; width:clamp(200px, 21vw, 340px) }
.stairs-entry{ position:absolute; left:var(--pad); top:9vh }
.stairs-folio{ position:absolute; left:var(--pad); bottom:5vh }
@media (max-width:899px){
  .s-stairs{ min-height:0; padding-top:14vh }
  .stairs li{ font-size:clamp(28px, 8.4vw, 46px) }
  .stairs li:nth-child(2){ margin-left:5vw } .stairs li:nth-child(3){ margin-left:10vw } .stairs li:nth-child(4){ margin-left:15vw }
  .stairs-fig{ position:relative; right:auto; top:auto; left:auto; bottom:auto; width:58vw; margin:8vh 0 0 auto }
  .stairs-note{ margin:6vh 0 0 0 }
  .stairs-entry{ top:6vh }
}

/* ================= 05 ZAMISLI ================= */
.s-zamisli{ overflow:hidden }
.z-pin{ position:relative; min-height:100vh; padding:calc(var(--hh) + 6vh) var(--pad) 6vh; display:flex; flex-direction:column }
.z-top{ display:grid; grid-template-columns:minmax(120px, 15vw) 1fr; gap:2vw; align-items:start; margin-bottom:5vh }
.z-h{ font-family:var(--disp); font-weight:400; font-size:clamp(20px, min(2.15vw, 3.6vh), 38px); line-height:1.15; letter-spacing:.035em; max-width:30ch }
.z-not li{ position:relative; display:block; width:max-content; max-width:100%; font-family:var(--disp);
  font-size:clamp(24px, min(3.05vw, 5.2vh), 58px); line-height:1.16; letter-spacing:-.01em; margin:.08em 0; white-space:nowrap }
.z-not li span{ position:relative; z-index:1; transition:opacity .4s }
.strike{ position:absolute; z-index:2; left:-1.5%; width:103%; top:50%; height:.62em; transform:translateY(-38%); overflow:visible; pointer-events:none }
.strike path{ fill:none; stroke:var(--rose); stroke-width:11; stroke-linecap:round; stroke-dasharray:1 2 }
.z-yes{ display:grid; grid-template-columns:minmax(120px, 15vw) 1fr; gap:2vw; margin-top:5.5vh }
.z-instead{ font-family:var(--mono); font-style:italic; font-size:16px; padding-top:.35em }
.z-yes ol{ columns:2; column-gap:4vw; counter-reset:z }
.z-yes li{ break-inside:avoid; font-family:var(--disp); font-size:clamp(18px, min(1.75vw, 3vh), 31px); line-height:1.2; padding:.28em 0 .28em 2em; position:relative; counter-increment:z }
.z-yes li::before{ content:counter(z, lower-roman) "."; position:absolute; left:0; font-family:var(--mono); font-style:italic; font-size:14px; top:.75em; opacity:.75 }
.z-goal{ margin:auto 0 0 calc(15vw + 2vw); padding-top:4vh; font-family:var(--disp); font-size:clamp(24px, min(2.6vw, 4.4vh), 46px) }
.z-folio{ position:absolute; right:var(--pad); bottom:4vh }
/* desktop, pinned: every line sized from the window height and kept at least 96px off the bottom even mid-reveal (the pill lives there) */
@media (min-width:900px){
  .z-pin{ padding:calc(var(--hh) + 4vh) var(--pad) max(118px, 13vh) }
  .z-top{ margin-bottom:3.5vh }
  .z-h{ font-size:clamp(18px, min(2.15vw, 3.2vh), 38px) }
  .z-not li{ font-size:clamp(22px, min(3.05vw, 4.6vh), 58px) }
  .z-yes{ margin-top:4vh }
  .z-yes li{ font-size:clamp(16px, min(1.75vw, 2.7vh), 31px) }
  .z-goal{ padding-top:3vh; font-size:clamp(22px, min(2.6vw, 3.9vh), 46px); line-height:1.2 }
  .z-folio{ top:calc(var(--hh) + 4vh); bottom:auto }
}
@media (max-width:899px){
  .z-top, .z-yes{ grid-template-columns:1fr; gap:14px }
  .z-not li{ white-space:normal; width:auto; font-size:clamp(25px, 7.2vw, 40px); margin:.3em 0 }
  .z-not li span{ background:linear-gradient(var(--rose), var(--rose)) no-repeat 0 62% / var(--sx, 100%) 4px }
  .strike{ display:none }
  .z-yes ol{ columns:1 }
  .z-goal{ margin-left:0 }
}

/* ================= 06 STEPS 1-3 ================= */
.s-steps{ padding:15vh var(--pad) 12vh }
.steps-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:2vw; margin-bottom:9vh; align-items:end }
.steps-h{ font-family:var(--disp); font-weight:400; font-size:clamp(40px, 5.6vw, 104px); line-height:.92; letter-spacing:-.02em; max-width:12ch }
.steps{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:2vw }
.steps-num{ position:sticky; top:calc(var(--hh) + 3vh); align-self:start; font-family:var(--disp); line-height:.8; display:flex; align-items:flex-start; gap:12px }
.num-roll{ display:block; overflow:hidden; font-size:clamp(160px, 27vw, 480px); letter-spacing:-.04em }
.num-roll span{ display:block }
.steps-num small{ font-family:var(--mono); font-size:15px; margin-top:1.4em; white-space:nowrap }
.step{ border-top:1px solid rgba(151,67,22,.3); padding:5vh 0 9vh }
.step h3{ font-family:var(--disp); font-weight:400; font-size:clamp(30px, 3.3vw, 60px); line-height:1.02; margin-bottom:4vh; max-width:16ch }
.step p{ max-width:40ch; margin-bottom:1em }
.step .step-lead{ font-size:clamp(22px, 1.95vw, 31px); line-height:1.38; max-width:28ch; margin-bottom:1.1em }
.step-seq{ counter-reset:sq; margin-top:4vh; max-width:44ch }
.step-seq li{ counter-increment:sq; position:relative; padding:14px 0 14px 54px; border-top:1px solid rgba(151,67,22,.18) }
.step-seq li::before{ content:counter(sq, lower-roman); position:absolute; left:0; top:14px; font-family:var(--mono); font-style:italic; font-size:15px }
.step-tags{ display:flex; flex-wrap:wrap; margin:.4em 0 1.6em; font-family:var(--disp); font-size:clamp(22px, 1.9vw, 32px); line-height:1.25 }
.step-tags li{ padding:.1em .7em .1em 0; margin-right:.7em; border-right:1px solid rgba(151,67,22,.35) }
.step-tags li:last-child{ border-right:0 }
.steps-folio{ position:absolute; left:var(--pad); bottom:4vh }
@media (max-width:899px){
  .steps-head, .steps{ grid-template-columns:1fr }
  .steps-num{ display:none }
  .steps-head{ margin-bottom:5vh }
}

/* ================= 07 DIARY (step 4) ================= */
.s-diary{ overflow:hidden; padding:17vh var(--pad) 16vh; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:2vw; min-height:110vh }
.diary-num{ position:absolute; left:-5vw; top:-14vh; font-family:var(--disp); font-size:clamp(420px, 70vw, 1250px); line-height:.8; opacity:.12; pointer-events:none; z-index:0 }
.diary-text{ grid-column:6 / 13; position:relative; z-index:1 }
.diary-text .entry{ margin-bottom:4vh }
.diary-h{ font-family:var(--disp); font-weight:400; font-size:clamp(36px, 4.8vw, 88px); line-height:.96; letter-spacing:-.015em; margin-bottom:6vh; max-width:12ch }
.diary-p{ font-size:clamp(23px, 2.15vw, 35px); line-height:1.5; max-width:30ch;
  background-image:repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.5em - 1px), rgba(245,239,227,.17) calc(1.5em - 1px), rgba(245,239,227,.17) 1.5em) }
.diary-fig{ grid-column:1 / 5; grid-row:1; align-self:end; position:relative; z-index:1; overflow:hidden; aspect-ratio:5/4; margin-bottom:-4vh }
.diary-fig img{ width:100%; height:100%; object-fit:cover }
.diary-folio{ position:absolute; right:var(--pad); bottom:4vh }
@media (max-width:899px){
  .s-diary{ display:block; min-height:0; padding-top:13vh }
  .diary-num{ font-size:120vw; left:-12vw; top:-6vh }
  .diary-fig{ margin:7vh 0 0; width:80% }
}

/* ================= 08 STEPS 5-7: titles in the margin, vertical ================= */
.s-margin{ padding:15vh var(--pad) 12vh }
.mg-entry{ margin-bottom:8vh }
.mg-row{ display:grid; grid-template-columns:minmax(70px, 8vw) minmax(0, 44ch) 1fr; column-gap:4vw; align-items:start; margin-bottom:11vh }
.mg-row-b{ margin-left:9vw }
.mg-row-c{ margin-left:3vw; margin-bottom:10vh }
.mg-title{ font-family:var(--disp); font-weight:400; font-size:clamp(24px, 2.05vw, 38px); line-height:1; writing-mode:vertical-rl; transform:rotate(180deg);
  border-left:1px solid rgba(151,67,22,.35); padding-left:.5em; justify-self:end; white-space:nowrap }
.mg-body{ font-size:clamp(19px, 1.45vw, 23px); line-height:1.6; padding-top:.2em }
.mg-body p + p{ margin-top:1em }
.mg-body p:first-child{ font-family:var(--disp); font-size:clamp(24px, 2.05vw, 36px); line-height:1.26 }
.mg-list{ margin:1.1em 0 1.2em; border-top:1px solid rgba(151,67,22,.25) }
.mg-list li{ font-family:var(--disp); font-size:clamp(22px, 1.9vw, 32px); padding:.32em 0; border-bottom:1px solid rgba(151,67,22,.25) }
.mg-fig{ width:clamp(160px, 17vw, 300px); aspect-ratio:1; overflow:hidden; margin-top:12vh; justify-self:start }
.mg-fig img{ width:100%; height:100%; object-fit:cover }
.mg-close{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:30px; border-top:1px solid rgba(151,67,22,.35); padding-top:4vh; margin-left:calc(9vw + 4vw) }
.mg-price{ display:flex; flex-direction:column; gap:14px }
.mg-price .lab{ font-family:var(--mono); font-style:italic; font-size:15px }
.cta-ink{ font-family:var(--disp); font-size:clamp(22px, 1.9vw, 30px); background:var(--terra); color:var(--cream); text-decoration:none; padding:.45em 1.1em .5em; transition:background-color .3s }
.cta-ink:hover{ background:var(--brick) }
.mg-folio{ position:absolute; right:var(--pad); bottom:4vh }
@media (max-width:899px){
  .mg-row, .mg-row-b, .mg-row-c{ grid-template-columns:1fr; margin-left:0; row-gap:22px; margin-bottom:9vh }
  .mg-title{ writing-mode:horizontal-tb; transform:none; border-left:0; border-top:1px solid rgba(151,67,22,.35); padding:.4em 0 0; justify-self:start; max-height:none }
  .mg-fig{ margin-top:2vh; width:62vw }
  .mg-close{ margin-left:0 }
}

/* ================= 09 STARTER LOOP ================= */
.s-loop{ padding:15vh var(--pad) 14vh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); column-gap:5vw; row-gap:6vh }
.loop-head{ grid-column:1 / -1 }
.loop-head .entry{ margin-bottom:3vh }
.loop-title{ font-family:var(--disp); font-weight:400; font-size:clamp(56px, 10.4vw, 190px); line-height:.86; letter-spacing:-.03em }
.loop-wrap{ position:relative; width:100%; max-width:640px; aspect-ratio:1; justify-self:center }
.loop-svg{ width:100%; height:100%; overflow:visible }
.loop-text{ font-family:var(--disp); font-size:30px; fill:var(--terra); letter-spacing:.01em }
.loop-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:52%; text-align:center;
  font-family:var(--disp); font-size:clamp(18px, 1.75vw, 29px); line-height:1.18 }
.loop-side{ align-self:center; display:flex; flex-direction:column; gap:1.2em; max-width:38ch }
.loop-side p{ font-size:clamp(19px, 1.45vw, 22px) }
.loop-side .loop-big{ font-family:var(--disp); font-size:clamp(26px, 2.5vw, 44px); line-height:1.14; margin-top:.8em }
.loop-folio{ position:absolute; left:var(--pad); bottom:4vh }
@media (max-width:899px){
  .s-loop{ grid-template-columns:1fr }
  .loop-wrap{ max-width:80vw }
  .loop-center{ width:56%; font-size:clamp(15px, 4.3vw, 20px) }
}

/* ================= 10 STRIP ================= */
.s-strip{ overflow:hidden }
.strip-pin{ display:flex; flex-direction:column; gap:6vh; padding:14vh 0 11vh }
.strip-text{ padding:0 var(--pad) }
.strip-text .entry{ margin-bottom:3vh }
.strip-q, .strip-end{ font-family:var(--disp); font-size:clamp(40px, 5.2vw, 100px); line-height:.94; letter-spacing:-.02em; max-width:16ch }
.strip-track{ display:flex; align-items:center; gap:3.4vw; padding:0 var(--pad); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--pad); scrollbar-width:none }
.strip-track::-webkit-scrollbar{ display:none }
.sf{ flex:0 0 auto; position:relative; overflow:hidden; scroll-snap-align:start }
.sf img{ width:100%; height:100%; object-fit:cover }
.sf-1{ width:min(30vw, 520px); aspect-ratio:4/5; align-self:flex-start }
.sf-2{ width:min(21vw, 380px); aspect-ratio:1; align-self:flex-end }
.sf-3{ width:min(36vw, 640px); aspect-ratio:5/4 }
.sf-4{ width:min(23vw, 400px); aspect-ratio:3/4; align-self:flex-start }
.sf-5{ width:min(26vw, 460px); aspect-ratio:3/4; align-self:flex-end }
.strip-after{ padding:0 var(--pad); display:flex; justify-content:space-between; align-items:flex-end; gap:4vw }
/* desktop, pinned: the words sit still in a top band, only the photos travel */
.s-strip.pinned .strip-pin{ height:100vh; padding:calc(var(--hh) + 4.5vh) 0 6vh; gap:4vh; position:relative }
.s-strip.pinned .strip-track{ overflow:visible; width:max-content; flex:1 1 auto; min-height:0; scroll-snap-type:none; padding-right:14vw }
.s-strip.pinned .sf{ width:auto; height:100% }
.s-strip.pinned .sf-2{ height:60% } .s-strip.pinned .sf-3{ height:78% } .s-strip.pinned .sf-4{ height:70% }
.s-strip.pinned .strip-after{ position:absolute; right:var(--pad); top:calc(var(--hh) + 4.5vh); padding:0; flex-direction:column; align-items:flex-end; text-align:right; gap:2vh }
@media (max-width:899px){
  .strip-pin{ padding:11vh 0 9vh; gap:5vh }
  .strip-track{ gap:4vw }
  .sf-1,.sf-2,.sf-3,.sf-4,.sf-5{ width:74vw; margin:0; align-self:center }
}

/* ================= 11 LEDGER ================= */
.s-ledger{ padding:15vh var(--pad) 13vh }
.ledger-head{ display:grid; grid-template-columns:minmax(120px, 15vw) 1fr; gap:2vw; margin-bottom:7vh; align-items:end }
.ledger-h{ font-family:var(--disp); font-weight:400; font-size:clamp(44px, 6.6vw, 124px); line-height:.9; letter-spacing:-.025em }
.ledger{ display:grid; grid-template-columns:1fr 1fr; column-gap:4vw; counter-reset:lg; border-top:1px solid rgba(151,67,22,.45) }
.ledger li{ counter-increment:lg; position:relative; padding:24px 0 24px 64px; border-bottom:1px solid rgba(151,67,22,.25);
  font-size:clamp(19px, 1.5vw, 24px); line-height:1.38 }
.ledger li::before{ content:counter(lg, lower-roman); position:absolute; left:0; top:27px; font-family:var(--mono); font-style:italic; font-size:15px; opacity:.8 }
.ledger-foot{ display:grid; grid-template-columns:1.2fr 1fr; gap:5vw; margin-top:9vh; align-items:end }
.ledger-yes{ font-family:var(--disp); font-size:clamp(28px, 3.2vw, 58px); line-height:1.06; max-width:18ch }
.ledger-small{ font-size:clamp(19px, 1.5vw, 23px); max-width:30ch }
.ledger-folio{ position:absolute; right:var(--pad); bottom:4vh }
@media (max-width:899px){
  .ledger-head, .ledger, .ledger-foot{ grid-template-columns:1fr }
  .ledger li{ padding-left:48px }
}

/* ================= 12 SHEETS ================= */
.s-sheets{ padding:15vh var(--pad) 18vh }
.sheets-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:4vw; row-gap:3vh; margin-bottom:9vh; align-items:end }
.sheets-head .entry{ grid-column:1 / -1 }
.sheets-h{ font-family:var(--disp); font-weight:400; font-size:clamp(58px, 11vw, 210px); line-height:.82; letter-spacing:-.03em }
.sheets-sub{ font-family:var(--disp); font-size:clamp(24px, 2.3vw, 40px); line-height:1.15; max-width:20ch }
.sheets-dob{ grid-column:1 / -1; font-family:var(--mono); font-style:italic; font-size:16px }
.sheet{ position:sticky; top:calc(var(--hh) + 2vh + var(--n) * 76px); min-height:54vh; background:var(--cream); color:var(--terra); border-top:1px solid rgba(151,67,22,.5) }
.sh-1{ --n:0 } .sh-2{ --n:1; background:#FFFFFF } .sh-3{ --n:2; background:var(--terra); color:var(--cream); border-top-color:var(--terra) }
.sh-4{ --n:3 } .sh-5{ --n:4; background:#FFFFFF } .sh-6{ --n:5; background:var(--terra); color:var(--cream); border-top-color:var(--terra); min-height:0 }
.sheet-in{ display:grid; grid-template-columns:minmax(120px, 22vw) minmax(0, 1fr); gap:3vw; padding:14px 3vw 6vh }
.sheet-n{ font-family:var(--disp); font-size:clamp(120px, 17vw, 300px); line-height:.8; letter-spacing:-.04em; margin-top:2vh }
.sheet h3{ font-family:var(--disp); font-weight:400; font-size:clamp(28px, 3vw, 54px); line-height:1.02; margin:0 0 4vh; min-height:40px; padding-top:4px }
.sheet p{ font-family:var(--disp); font-size:clamp(22px, 2.05vw, 36px); line-height:1.24; max-width:30ch }
.sheet-k{ margin-top:4vh; font-family:var(--mono); font-style:italic; font-size:16px !important }
.sheet-list{ display:flex; flex-wrap:wrap; gap:0; margin-top:12px; max-width:52ch }
.sheet-list li{ font-family:var(--disp); font-size:clamp(20px, 1.6vw, 27px); padding:.15em .8em .15em 0; margin-right:.8em; border-right:1px solid rgba(151,67,22,.35) }
.sheet-list li:last-child{ border-right:0 }
.sheets-folio{ position:absolute; left:var(--pad); bottom:5vh }
@media (min-width:900px) and (max-height:860px){ .sheet{ position:relative; top:auto } }
@media (max-width:899px){
  .sheets-head{ grid-template-columns:1fr }
  .sheet{ position:relative; top:auto; min-height:0 }
  .sheet-in{ grid-template-columns:1fr; padding:10px 18px 6vh }
  .sheet-n{ font-size:30vw; order:2; margin-top:3vh }
  .sheet h3{ font-size:clamp(24px, 6.6vw, 34px) }
}

/* ================= 13 RUN-IN ================= */
.s-runin{ padding:15vh var(--pad) 16vh }
.runin-h{ font-family:var(--mono); font-weight:400; font-size:16px; letter-spacing:.14em; margin:3vh 0 6vh; display:flex; align-items:center; gap:16px }
.runin-h::after{ content:""; flex:1; height:1px; background:currentColor; opacity:.3 }
.runin-pre{ font-size:clamp(22px, 1.9vw, 31px); line-height:1.35; max-width:34ch }
.runin-pre-b{ margin:.4em 0 6vh 22vw }
.runin{ font-family:var(--disp); font-size:clamp(34px, 4.75vw, 92px); line-height:1.1; letter-spacing:-.014em }
.runin .sep{ display:inline-block; width:.62em; height:.62em; margin:0 .32em; vertical-align:-.02em; opacity:.85 }
.runin .lw{ transition:color .3s }
.gs .runin .lw{ color:rgba(151,67,22,.2) }
.runin-folio{ position:absolute; right:var(--pad); bottom:5vh }
@media (max-width:899px){ .runin-pre-b{ margin-left:0 } }

/* ================= 14 PRICE ================= */
.s-price{ min-height:100vh; padding:calc(var(--hh) + 8vh) var(--pad) 9vh; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr auto auto; row-gap:4vh; overflow:hidden }
.pc{ font-size:clamp(19px, 1.5vw, 24px); line-height:1.42; max-width:24ch }
.pc-tl{ grid-column:1; grid-row:1 } .pc-tr{ grid-column:3; grid-row:1; justify-self:end; text-align:right }
.pc-bl{ grid-column:1; grid-row:3 } .pc-br{ grid-column:3; grid-row:3; justify-self:end; text-align:right }
.price-mid{ grid-column:1 / -1; grid-row:2; align-self:center; text-align:center }
.price-line{ display:inline-flex; align-items:baseline; gap:.35em; flex-wrap:wrap; justify-content:center }
.price-lab{ font-family:var(--mono); font-style:italic; font-size:clamp(16px, 1.3vw, 20px); align-self:flex-start; margin-top:2.2em }
.price-fig{ font-family:var(--disp); font-size:clamp(110px, 23vw, 440px); line-height:.82; letter-spacing:-.045em }
.price-cur{ font-family:var(--disp); font-size:clamp(30px, 4.2vw, 80px) }
.price-cta{ grid-column:1 / -1; grid-row:4; justify-self:center; text-align:center; font-family:var(--disp); font-size:clamp(22px, 2.15vw, 38px); line-height:1.2;
  color:var(--terra); background:var(--cream); text-decoration:none; padding:.55em 1.2em .6em; max-width:30ch; transition:background-color .3s, color .3s }
.price-cta:hover{ background:var(--sand) }
.price-entry{ position:absolute; left:var(--pad); top:calc(var(--hh) + 3vh) }
.price-folio{ position:absolute; right:var(--pad); top:calc(var(--hh) + 3vh) }
@media (max-width:899px){
  .s-price{ display:flex; flex-direction:column; gap:4vh; min-height:0; padding-top:calc(var(--hh) + 9vh) }
  .pc-tr, .pc-br{ text-align:left; align-self:flex-start }
  .price-mid{ text-align:left; margin:3vh 0 }
  .price-line{ justify-content:flex-start }
  .price-fig{ font-size:30vw }
  .price-cta{ text-align:left; align-self:flex-start }
}

/* ================= 15 LETTER ================= */
.s-letter{ padding:15vh var(--pad) 13vh; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); column-gap:6vw }
.letter-photos{ position:relative; min-height:110vh }
.lp-a{ position:sticky; top:calc(var(--hh) + 6vh); width:84%; aspect-ratio:4/5; overflow:hidden }
.lp-b{ position:absolute; right:0; top:62vh; width:44%; aspect-ratio:3/4; overflow:hidden; border:10px solid var(--cream); z-index:2 }
.lp-a img, .lp-b img{ width:100%; height:100%; object-fit:cover }
.lp-note{ position:absolute; left:0; bottom:0; font-style:italic; display:flex; gap:12px; align-items:center }
.lp-note::before{ content:""; width:48px; height:1px; background:currentColor }
.letter-text .entry{ margin-bottom:4vh }
.letter-h{ font-family:var(--disp); font-weight:400; font-size:clamp(46px, 6.4vw, 118px); line-height:.9; letter-spacing:-.025em; margin-bottom:6vh; max-width:9ch }
.letter-lead{ font-family:var(--disp); font-size:clamp(25px, 2.35vw, 41px); line-height:1.18; max-width:22ch; margin-bottom:5vh }
.letter-body{ column-count:2; column-gap:3.4vw; font-size:clamp(17px, 1.25vw, 20px); line-height:1.62 }
.letter-body p{ margin-bottom:1em; break-inside:avoid }
.letter-last{ font-family:var(--disp); font-size:1.3em; line-height:1.25 }
.letter-text .potpis{ margin-top:5vh }
.letter-folio{ position:absolute; right:var(--pad); bottom:4vh }
@media (max-width:1100px){ .letter-body{ column-count:1 } }
@media (max-width:899px){
  .s-letter{ grid-template-columns:1fr }
  .letter-photos{ min-height:0; height:auto; margin-bottom:8vh }
  .lp-a{ position:relative; top:auto; width:78% }
  .lp-b{ position:relative; top:auto; right:auto; width:48%; margin:-20vh 0 0 auto }
  .lp-note{ position:static; margin-top:4vh }
}

/* ================= 16 ZA FIRME ================= */
.s-firme{ padding:15vh var(--pad) 13vh; overflow:hidden }
.firme-entry{ margin-bottom:2vh }
.firme-h{ font-family:var(--disp); font-weight:400; font-size:clamp(90px, 24.5vw, 470px); line-height:.8; letter-spacing:-.045em; margin-left:-.04em; white-space:nowrap }
.firme-win{ display:inline-block; color:var(--terra) }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .firme-win{ color:transparent; -webkit-text-fill-color:transparent;
    background-image:linear-gradient(rgba(151,67,22,.42), rgba(151,67,22,.42)), url(/assets/img/seminar-900.webp);
    background-size:cover, 118% auto; background-position:center, 50% var(--bp, 40%); -webkit-background-clip:text; background-clip:text }
}
.firme-row{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:6vw; margin-top:7vh; align-items:end }
.firme-fig{ width:min(100%, 420px); aspect-ratio:4/5; overflow:hidden; justify-self:end }
.firme-fig img{ width:100%; height:100%; object-fit:cover }
.firme-ph{ max-width:520px; padding-bottom:2vh }
.firme-ph .ph{ margin-bottom:3vh }
.firme-ph .lnk{ margin-top:3vh }
.firme-folio{ position:absolute; right:var(--pad); top:9vh }
@media (max-width:899px){
  .firme-row{ grid-template-columns:1fr }
  .firme-fig{ justify-self:start; width:80% }
}

/* ================= 17 BLOG ================= */
.s-blog{ padding:15vh var(--pad) 14vh }
.blog-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:6vh; flex-direction:row-reverse }
.blog-h{ font-family:var(--disp); font-weight:400; font-size:clamp(70px, 13vw, 250px); line-height:.8; letter-spacing:-.04em }
.blog-list{ border-top:1px solid rgba(151,67,22,.5) }
.blog-list a{ display:grid; grid-template-columns:minmax(60px, 10vw) 1fr auto; align-items:center; gap:2vw; padding:4.2vh 0;
  border-bottom:1px solid rgba(151,67,22,.25); text-decoration:none; transition:padding .5s cubic-bezier(.2,.7,.2,1), background-color .4s }
.blog-list a:hover{ padding-left:2vw; background:rgba(227,215,196,.55) }
.b-n{ font-family:var(--mono); font-style:italic; font-size:16px }
.b-t .ph{ font-family:var(--disp); font-style:normal; font-size:clamp(28px, 3.6vw, 66px); padding:.06em .4em .14em; letter-spacing:-.01em; border-style:dashed; opacity:.82 }
.b-thumb{ display:none }
.b-go{ font-family:var(--mono); font-style:italic; font-size:15px; padding-right:1vw }
.blog-cursor{ position:fixed; left:0; top:0; width:clamp(200px, 19vw, 330px); aspect-ratio:4/5; overflow:hidden; pointer-events:none; z-index:40; opacity:0; transition:opacity .35s }
.blog-cursor img{ width:100%; height:100%; object-fit:cover }
.blog-cursor.on{ opacity:1 }
.blog-folio{ position:absolute; left:var(--pad); bottom:4vh }
@media (max-width:899px), (hover:none){
  .blog-cursor{ display:none }
  .blog-list a{ grid-template-columns:44px 1fr 84px; }
  .b-thumb{ display:block; width:84px; height:104px; object-fit:cover; grid-column:3; grid-row:1 }
  .b-go{ display:none }
  .b-t .ph{ font-size:clamp(22px, 6vw, 32px) }
}

/* ================= 18 FREE GUIDE ================= */
.s-guide{ padding:9vh var(--pad); display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:3vw; overflow:hidden }
.guide-h{ font-family:var(--disp); font-weight:400; font-size:clamp(46px, 7.2vw, 136px); line-height:.9; letter-spacing:-.025em }
.guide-sym{ width:clamp(70px, 8vw, 140px); height:auto }
.guide-folio{ position:absolute; right:var(--pad); bottom:2.4vh }
@media (max-width:899px){ .s-guide{ grid-template-columns:1fr auto; row-gap:3vh } .s-guide .entry{ grid-column:1 / -1 } .guide-h{ grid-column:1 / -1 } .s-guide .ph{ justify-self:start } }

/* ================= 19 END ================= */
.s-end{ padding:15vh var(--pad) 0; overflow:hidden }
.end-entry{ margin-bottom:5vh }
.end-q{ font-family:var(--disp); font-size:clamp(50px, 8.6vw, 168px); line-height:.9; letter-spacing:-.03em; max-width:13ch }
.end-grid{ display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:4vw; margin-top:12vh; padding-top:5vh; border-top:1px solid rgba(245,239,227,.3) }
.end-lab{ font-family:var(--mono); font-style:italic; font-size:15px; margin-bottom:2vh; opacity:.8 }
.end-col p + p{ margin-top:12px }
.end-col a{ font-family:var(--disp); font-size:clamp(22px, 1.8vw, 30px); text-decoration:none; border-bottom:1px solid rgba(245,239,227,.4) }
.end-col-sig{ align-self:end; justify-self:end }
.end-sig{ width:clamp(220px, 26vw, 440px); color:var(--cream) }
.colophon{ display:grid; grid-template-columns:auto 1fr auto; gap:4vw; align-items:end; margin-top:12vh; padding:6vh 0 120px; border-top:1px solid rgba(245,239,227,.3) }
.colo-logo{ width:clamp(130px, 12vw, 200px) }
.colo-nav{ display:flex; flex-wrap:wrap; gap:6px 28px; font-family:var(--mono); font-size:15px; justify-self:center }
.colo-nav a{ text-decoration:none; opacity:.85 }
.colo-nav a:hover{ opacity:1; text-decoration:underline }
@media (max-width:899px){
  .end-grid{ grid-template-columns:1fr; gap:5vh }
  .end-col-sig{ justify-self:start }
  .colophon{ grid-template-columns:1fr; gap:4vh }
  .colo-nav{ justify-self:start }
}

/* reduced motion: everything plain and visible */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}