/* ─────────────────────────────────────────────────────────────
   Case "studio" layer for the classic data-driven cases (Lexiq, Spendly, Ailuna, nGrow, Hash Chat).
   Applied after render() by case-studio.js; every motion has a reduced-motion path.
   ───────────────────────────────────────────────────────────── */
.project[data-case="studio"]{ --st-ease:cubic-bezier(.22,1,.36,1); --st-ink:#F3EFE7; --st-soft:rgba(243,239,231,.66); --st-faint:rgba(243,239,231,.38); --st-line:rgba(243,239,231,.1); }
.project[data-case="studio"] .project__eyebrow{ color:var(--st-acc); }
.project[data-case="studio"] .project__tags span{ border-color:color-mix(in srgb, var(--st-acc) 30%, transparent); }
.project[data-case="studio"] .project__next:hover strong{ color:var(--st-acc); }

/* reading progress under the bar */
.st-progress{ position:absolute; left:0; right:0; bottom:-1px; height:2px; background:transparent; z-index:3; pointer-events:none; }
.st-progress i{ display:block; height:100%; width:100%; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg,var(--st-acc),var(--st-acc2)); }

/* hero cover: plain rounded media, slow push-in + scroll parallax (no extra frame) */
.project[data-case="studio"] .project__cover{ border-radius:16px; overflow:hidden; }

.project[data-case="studio"] .project__cover > img{ transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1)); transition:transform .25s linear; }
.project[data-case="studio"] .project__cover.st-in > img{ animation:st-push 1.6s var(--st-ease) both; }
@keyframes st-push{ from{ opacity:0; scale:1.08; filter:blur(10px); } to{ opacity:1; scale:1; filter:none; } }

/* chapters */
.st-ch{ position:relative; padding-top:clamp(3rem,8vw,5.5rem); }
.st-ch + .st-ch{ border-top:1px solid var(--st-line); margin-top:clamp(2.5rem,6vw,4rem); }
.st-ch__head{ display:grid; grid-template-columns:auto 1fr; align-items:end; gap:clamp(1rem,3vw,2rem); margin-bottom:clamp(1.4rem,3vw,2.2rem); }
.st-ch__no{ font-family:var(--display); font-weight:600; font-size:clamp(3.2rem,9vw,6.4rem); line-height:.8; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.5px color-mix(in srgb, var(--st-acc) 70%, transparent); }
.st-ch__title{ font-family:var(--display); font-weight:500; font-size:clamp(1.7rem,4.6vw,3rem) !important; letter-spacing:-.025em !important; line-height:1.02; margin:0 !important; }
.st-ch__title .st-w{ display:inline-block; opacity:0; transform:translateY(.45em); transition:opacity .7s var(--st-ease), transform .9s var(--st-ease); transition-delay:calc(var(--i) * 45ms); }
.st-ch.is-in .st-ch__title .st-w{ opacity:1; transform:none; }
.st-ch p{ max-width:62ch !important; color:var(--st-soft) !important; font-size:clamp(1.02rem,2.6vw,1.18rem) !important; line-height:1.7 !important; }
.st-ch p b{ color:var(--st-ink); font-weight:600; }

/* "•" lists become a card grid */
.st-points{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.7rem; }
.st-points li{ position:relative; padding:1.05rem 1.15rem 1.05rem 3.1rem; border-radius:18px; background:rgba(255,255,255,.035); border:1px solid var(--st-line); color:var(--st-soft); line-height:1.5; font-size:1rem;
  opacity:0; transform:translateY(16px); transition:opacity .7s var(--st-ease), transform .8s var(--st-ease), border-color .4s; transition-delay:calc(var(--i) * 70ms); }
.st-points li::before{ content:""; position:absolute; left:1.15rem; top:1.3rem; width:.9rem; height:.9rem; border-radius:50%; background:linear-gradient(135deg,var(--st-acc),var(--st-acc2)); box-shadow:0 0 14px color-mix(in srgb, var(--st-acc) 60%, transparent); }
.st-points li b{ display:block; color:var(--st-ink); font-weight:600; margin-bottom:.15rem; }
.is-in .st-points li{ opacity:1; transform:none; }
@media (hover:hover){ .st-points li:hover{ border-color:color-mix(in srgb, var(--st-acc) 45%, transparent); } }
@media (min-width:760px){ .st-points{ grid-template-columns:1fr 1fr; } }

/* media: plain, rounded — no extra frames */
.project[data-case="studio"] .project__figure{ margin:clamp(1.8rem,4vw,2.8rem) 0 !important; }
.project[data-case="studio"] .project__figure:has(> .st-browser){ overflow:visible !important; background:none !important; padding:0 !important; border-radius:0 !important; }
/* animated media (lottie / video) must never be clipped, faded or transformed — WebKit stops painting them */
/* animated media: no clip / contain / layer hacks on the player itself (WebKit stops painting lottie) —
   the figure clips it with its own radius, exactly like the original site did */
.project[data-case="studio"] .project__figure > lottie-player, .project[data-case="studio"] .project__figure > video{ display:block; }

/* results */
.project[data-case="studio"] .project__results .r b{ background:linear-gradient(90deg,var(--st-acc),var(--st-acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

@media (prefers-reduced-motion:reduce){
  .project[data-case="studio"] .project__cover.st-in > *{ animation:none; }
  .st-ch__title .st-w, .st-points li{ opacity:1; transform:none; transition:none; }
  .project[data-case="studio"] .project__figure > *{ clip-path:none; opacity:1; transform:none; transition:none; }
}

/* footer: elsewhere links */
.st-elsewhere{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.st-elsewhere a{ display:inline-flex; align-items:center; gap:.55rem; padding:.7rem 1.1rem; border-radius:999px; border:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:.92rem; transition:border-color .3s, background .3s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.st-elsewhere a:hover{ border-color:var(--gold); background:rgba(233,162,59,.08); transform:translateY(-2px); }
.st-elsewhere a span{ opacity:.55; font-size:.8rem; }

/* ── Homepage rhythm: one section spacing, one head→content gap ── */
:root{ --sec-top:clamp(5.5rem,12vh,9rem); --head-gap:clamp(3rem,6vh,4.5rem); }
.section{ padding-top:var(--sec-top); }
.latest-posts{ padding-top:var(--sec-top); }
.newsletter, .contact{ padding-top:var(--sec-top); }
.expertise__head, .work__head, .latest-posts__head{ margin-bottom:var(--head-gap); }
.latest-posts__head{ display:grid !important; grid-template-columns:1fr auto; align-items:end; column-gap:2rem; }
.latest-posts__head .section__index{ grid-column:1 / -1; margin-bottom:0; }
.latest-posts__head .section__title{ grid-column:1; text-align:left; margin-top:1.5rem; }
.latest-posts__head .latest-posts__view-all{ grid-column:2; align-self:end; }
@media (max-width:760px){ .latest-posts__head{ grid-template-columns:1fr; row-gap:1.5rem; } .latest-posts__head .latest-posts__view-all{ grid-column:1; justify-self:start; } }

/* browser window for web screenshots */
.st-browser{ border-radius:14px; overflow:hidden; background:#0A0F0C; box-shadow:0 2rem 3.6rem -1.6rem rgba(0,0,0,.85);
  clip-path:inset(10% 5% 10% 5% round 18px); opacity:.2; transform:scale(1.03); transition:clip-path 1.2s var(--st-ease), opacity .9s var(--st-ease), transform 1.4s var(--st-ease); }
.project__figure.is-in > .st-browser{ clip-path:inset(0 0 0 0 round 14px); opacity:1; transform:none; }
.st-browser__bar{ height:2.2rem; display:flex; align-items:center; gap:.45rem; padding:0 1rem; background:#141a16; border-bottom:1px solid rgba(255,255,255,.06); }
.st-browser__bar i{ width:.7rem; height:.7rem; border-radius:50%; background:#3a403c; }
.st-browser__bar i:nth-child(1){ background:#ff5f57; } .st-browser__bar i:nth-child(2){ background:#febc2e; } .st-browser__bar i:nth-child(3){ background:#28c840; }
.st-browser__bar span{ flex:1; height:1.2rem; margin:0 18% 0 1rem; border-radius:99px; background:rgba(255,255,255,.06); }
.st-browser__body{ padding:clamp(1.6rem,5vw,4.5rem); }
.st-browser__body img{ display:block; width:100%; height:auto; border-radius:0; }
@media (prefers-reduced-motion:reduce){ .st-browser{ clip-path:none; opacity:1; transform:none; transition:none; } }

/* case window header: compact, close button in the top-right corner */
.project__bar{ padding:.75rem .9rem .75rem 1.4rem !important; gap:1.1rem; }
.project__mark{ order:0; margin-left:0 !important; }
.project__index{ order:1; margin-left:auto; }
.project__close{ order:2; }