/* ─── FONTS ─── */
@font-face{font-family:'Switzer';src:url('../assets/fonts/switzer-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../assets/fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../assets/fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Sentient';src:url('../assets/fonts/sentient-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Sentient';src:url('../assets/fonts/sentient-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Sentient';src:url('../assets/fonts/sentient-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Sentient';src:url('../assets/fonts/Sentient-VariableItalic.woff2') format('woff2');font-weight:200 700;font-style:italic;font-display:swap}
/* Cyrillic fallback (Switzer/Sentient are Latin-only) — Onest for sans, Source Serif 4 for serif */
@font-face{font-family:'Switzer';src:url('../assets/fonts/cyr-onest-400.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0400-04FF,U+0500-052F,U+2DE0-2DFF,U+A640-A69F}
@font-face{font-family:'Switzer';src:url('../assets/fonts/cyr-onest-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0400-04FF,U+0500-052F,U+2DE0-2DFF,U+A640-A69F}
@font-face{font-family:'Switzer';src:url('../assets/fonts/cyr-onest-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0400-04FF,U+0500-052F,U+2DE0-2DFF,U+A640-A69F}
@font-face{font-family:'Sentient';src:url('../assets/fonts/cyr-sourceserif-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0400-04FF,U+0500-052F,U+2DE0-2DFF,U+A640-A69F}
@font-face{font-family:'Sentient';src:url('../assets/fonts/cyr-sourceserif-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0400-04FF,U+0500-052F,U+2DE0-2DFF,U+A640-A69F}
@font-face{font-family:'Sentient';src:url('../assets/fonts/cyr-sourceserif-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0400-04FF,U+0500-052F,U+2DE0-2DFF,U+A640-A69F}
@font-face{font-family:'Sentient';src:url('../assets/fonts/cyr-sourceserif-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0400-04FF,U+0500-052F,U+2DE0-2DFF,U+A640-A69F}

/* ─── RESET ─── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --paper:#F5F2EC;
  --paper-2:#EBE7DE;
  --ink:#16140F;
  --ink-soft:#3A362E;
  --muted:#7C7669;
  --accent:#B83B1A;
  --line:rgba(22,20,15,.12);
}
html{font-size:16px;scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{
  font-family:'Switzer','Inter',-apple-system,sans-serif;
  background:var(--paper);color:var(--ink);
  font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;max-width:100%;
}
.serif{font-family:'Sentient','Times New Roman',serif;font-weight:400;letter-spacing:-.005em}
.mono{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.04em}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ─── NAV ─── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:24px 56px;
  background:rgba(245,242,236,.86);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.nav-back{font-size:.78rem;color:var(--ink-soft);transition:color .3s;text-transform:uppercase;letter-spacing:.04em;font-family:'JetBrains Mono',monospace}
.nav-back:hover{color:var(--accent)}
.nav-name{font-family:'Sentient','Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:0;font-size:1.16rem;justify-self:center}
.nav-num{justify-self:end;text-transform:uppercase;color:var(--muted)}
.nav-brand{display:flex;align-items:center;gap:11px;justify-self:center;text-decoration:none;color:inherit}
.nav-logo{height:25px;width:auto;display:block}
.nav-brand .nav-name{justify-self:auto;transition:color .3s}
.nav-brand:hover .nav-name{color:var(--accent)}

/* ─── CASE HERO ─── */
.case-hero{
  padding:180px 56px 80px;
  max-width:1200px;margin:0 auto;
}
.case-name{
  font-family:'Sentient','Times New Roman',serif;
  font-weight:400;
  font-size:clamp(3rem,9vw,8rem);
  line-height:.95;letter-spacing:-.03em;
  margin:0 0 .18em;
}
.case-kind{
  font-family:'Sentient','Times New Roman',serif;
  font-weight:400;
  font-size:clamp(1.4rem,3.4vw,3rem);
  line-height:1.05;letter-spacing:-.02em;
  color:var(--ink-soft);
  margin:0 0 80px;
  max-width:24ch;
}
.case-facts{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:18px 48px;
  max-width:760px;
  padding-top:32px;
  border-top:1px solid var(--line);
}
.case-facts dt{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
  padding-top:2px;
}
.case-facts dd{
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0;
  line-height:1.5;
}
/* legacy classes kept for backwards-compat */
.case-meta{
  display:flex;gap:32px;flex-wrap:wrap;
  color:var(--muted);text-transform:uppercase;margin-bottom:24px;
}
.case-meta span{display:inline-block}
.case-intro{
  font-family:'Sentient','Times New Roman',serif;
  font-weight:400;
  font-size:clamp(2rem,5.4vw,5.4rem);
  line-height:1.06;letter-spacing:-.025em;
  max-width:18ch;
}
.case-intro .opener{
  display:block;text-transform:uppercase;letter-spacing:0;
  margin-bottom:.2em;
}
.case-intro .body{
  display:block;color:var(--ink-soft);
  font-size:clamp(1.4rem,3.4vw,3.2rem);
  line-height:1.1;
  letter-spacing:-.018em;
  max-width:22ch;
}

/* ─── SLIDES — uniform-width collage blocks ─── */
/* Every .case-slides block is centered with the SAME max-width.
   Multi-photo blocks become an internal CSS-grid collage; the OUTER
   width never changes between cases. */
.case-slides{
  max-width:1200px;margin:0 auto;
  padding:40px 56px 24px;
  display:flex;flex-direction:column;gap:24px;
}
/* Typographic label above a slide block — used for categorised cases
   (e.g. Yuga: LIFESTYLE / PRINT / DIGITAL). Mono · uppercase · muted. */
.slide-label{
  max-width:1200px;
  margin:32px auto 0;
  padding:0 56px 6px;
  color:var(--muted);
  text-transform:uppercase;
}
.slide-label + .case-slides{padding-top:0}
.collage{
  display:grid;gap:14px;align-items:start;
  background:var(--paper-2);
  border:1px solid var(--line);
  padding:14px;
}
.collage figure{margin:0;background:var(--paper);overflow:hidden}
/* desktop + mobile shown as one slide — the two frames sit flush */
.collage.stack{gap:0}
.collage img{
  width:100%;height:auto;display:block;
  /* фото целиком, без кропа */
}
/* 1 photo — full width of block */
.collage.one{grid-template-columns:1fr}
/* 2 photos — side by side, equal width */
.collage.two{grid-template-columns:1fr 1fr}
/* 3 photos — three equal columns at outer block width */
.collage.three{grid-template-columns:1fr 1fr 1fr}
/* 4 photos — four equal columns (portrait key-visuals) */
.collage.four{grid-template-columns:1fr 1fr 1fr 1fr}

/* ─── VIDEO blocks inside .collage ─── */
.collage figure.video{
  position:relative;background:#0c0a07;
  aspect-ratio:16/9;overflow:hidden;
}
.collage figure.video video{
  width:100%;height:100%;display:block;
  object-fit:cover;background:#0c0a07;
}
/* Single-column video block — full width, natural height */
.collage.one figure.video{
  aspect-ratio:auto;height:auto;
}
.collage.one figure.video video{
  width:100%;height:auto;
  object-fit:contain;
}
.collage figure.video figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 16px 12px;
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(245,242,236,.86);
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 70%);
  pointer-events:none;
  opacity:.92;transition:opacity .3s;
}
.collage figure.video:hover figcaption{opacity:0}

/* ─── VIDEO embedded INTO the artwork of a slide (screen mock-up) ─── */
/* The slide image stays the layout; the clip is pinned over the screen
   area with inline percentage coordinates measured from the artwork. */
.collage figure.slide-embed{position:relative;background:var(--paper)}
.collage figure.slide-embed > img{width:100%;height:auto;display:block}
.collage figure.slide-embed video{
  position:absolute;display:block;
  object-fit:cover;background:#0c0a07;
  pointer-events:none;
}

/* legacy single-image slides (still used by sezar-future) */
.slide{
  background:var(--paper-2);
  overflow:hidden;
  border:1px solid var(--line);
}
.slide img{width:100%;height:auto;display:block}
.slide-caption{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;letter-spacing:.04em;
  color:var(--muted);text-transform:uppercase;
  padding:14px 20px 0;
}
.case-slides.two,
.case-slides.three{
  /* legacy two/three classes inherit the flex stacking above —
     no internal grid is applied at the outer level. Sezar Future keeps
     its untouched two-column row via the explicit grid block below. */
}
.case-slides.two:not(:has(.collage)){
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.case-slides.two:not(:has(.collage)) .slide-full{grid-column:1/-1}

/* placeholder for missing assets */
.slide-placeholder{
  background:var(--paper-2);
  border:1px dashed var(--muted);
  padding:80px 56px;
  text-align:center;
  color:var(--muted);
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
  max-width:1200px;margin:0 auto;
}

/* ─── NEXT CASE ─── */
.case-next{
  border-top:1px solid var(--line);
  padding:80px 56px;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  align-items:center;
  max-width:1600px;margin:0 auto;
}
.case-next .label{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;letter-spacing:.04em;color:var(--muted);
  text-transform:uppercase;margin-bottom:14px;
}
.case-next .next-link{
  display:block;
  text-align:right;
  transition:color .3s;
}
.case-next .next-link:hover .next-title{color:var(--accent)}
.next-title{
  font-family:'Sentient','Times New Roman',serif;
  font-size:clamp(1.8rem,4vw,3.4rem);
  line-height:1.05;letter-spacing:-.02em;font-weight:400;
  transition:color .3s;
}

/* ─── FEATURE (description below slides) ─── */
.case-text{
  max-width:760px;margin:0 auto;
  padding:40px 56px 80px;
}
.case-text p{
  font-size:1.05rem;line-height:1.65;color:var(--ink-soft);
  margin-bottom:1em;
}


/* ─── FOOTER (get in touch / studio, rotated edge labels · ref: lottanieminen.com) ─── */
footer{background:var(--paper);color:var(--ink);margin-top:0;border-top:1px solid var(--line)}
.foot-bottom{position:relative;padding:90px 56px 44px}
.foot-edge{position:absolute;top:90px;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);writing-mode:vertical-rl}
.foot-edge.left{left:20px;transform:rotate(180deg)}
.foot-edge.right{right:20px;background:none;border:0;padding:0;cursor:pointer;transition:color .25s}
.foot-edge.right:hover{color:var(--accent)}
.foot-cols{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.foot-col:nth-child(1){grid-column:1/7}
.foot-col:nth-child(2){grid-column:7/13}
.foot-lead{font-family:'Switzer','Inter',-apple-system,sans-serif;font-size:1.06rem;line-height:1.62;font-weight:400;letter-spacing:0;color:var(--ink);max-width:36ch}
.foot-lead a{border-bottom:1px solid var(--muted);transition:color .25s,border-color .25s}
.foot-lead a:hover{color:var(--accent);border-color:var(--accent)}
.foot-meta{margin-top:20px;font-size:.9rem;line-height:1.85;color:var(--ink-soft)}
.foot-meta a{transition:color .25s}.foot-meta a:hover{color:var(--accent)}
.foot-base{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-top:100px;padding-top:26px;border-top:1px solid var(--line)}
.foot-mark img{height:44px;width:auto;display:block;transition:opacity .3s}
.foot-mark:hover img{opacity:.55}
.foot-fine{display:flex;gap:26px;color:var(--muted);font-size:.7rem;letter-spacing:.04em}

@media (max-width:900px){
  .foot-bottom{padding:60px 20px 28px}
  .foot-cols{grid-template-columns:1fr;gap:36px}
  .foot-col{grid-column:1/-1!important}
  .foot-base{margin-top:56px}
  .foot-edge{display:none}
  .foot-mark img{height:38px}
  nav{padding:18px 20px;grid-template-columns:auto 1fr auto;gap:14px}
  .nav-name{font-size:.85rem}
  .case-hero{padding:130px 20px 50px}
  .case-name{font-size:clamp(2.6rem,11vw,4.4rem)}
  .case-kind{margin-bottom:48px;font-size:clamp(1.2rem,4.6vw,1.7rem)}
  .case-facts{grid-template-columns:1fr;gap:6px 0;padding-top:24px}
  .case-facts dt{padding-top:14px;font-size:.66rem}
  .case-facts dd{font-size:.74rem;padding-bottom:4px;border-bottom:1px solid var(--line)}
  .case-facts dd:last-child{border-bottom:0}
  .case-meta{gap:14px;margin-bottom:32px;flex-direction:column}
  .case-slides{padding:20px 20px 24px;gap:14px}
  .slide-label{padding:0 20px 4px;margin:20px auto 0}
  .case-slides.two:not(:has(.collage)){grid-template-columns:1fr}
  .case-slides.two:not(:has(.collage)) .slide-full{grid-column:1/-1}
  /* collage: collapse multi-column layouts to a single column on mobile, фото целиком */
  .collage.two,.collage.three{grid-template-columns:1fr;grid-template-rows:none;gap:10px;padding:10px}
  /* 4 portrait key-visuals: 2×2 on mobile */
  .collage.four{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:10px;padding:10px}
  .case-next{grid-template-columns:1fr;padding:60px 20px;text-align:center}
  .case-next .next-link{text-align:center}
  .foot-main{flex-direction:column;align-items:flex-start;gap:22px}
  .foot-contacts{text-align:left}
  footer{padding:60px 20px 24px}
}


/* ─── LANG SWITCH ─── */
.lang-switch{display:flex;align-items:center;gap:6px;font-size:.72rem;letter-spacing:.06em;justify-self:end}
.lang-switch button{background:none;border:0;padding:2px 0;color:var(--muted);cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:uppercase;transition:color .2s}
.lang-switch button:hover{color:var(--accent)}
.lang-switch button.active{color:var(--ink)}
.lang-switch .sep{color:var(--line)}

.nav-right{display:flex;align-items:center;gap:18px;justify-self:end}

/* AI-augmented marker — leads the Scope line on AI-assisted cases */
.case-facts dd .ai-marker{color:var(--accent);font-weight:500;letter-spacing:.01em;white-space:nowrap}
.slide-label .ai-marker{color:var(--accent);white-space:nowrap}

/* ─── SUB-TABS (one case, several projects — e.g. Oriflame) ─── */
.subtabs{
  max-width:1200px;margin:40px auto 0;padding:0 56px;
  display:flex;flex-wrap:wrap;gap:26px;
  border-bottom:1px solid var(--line);
}
.subtab{
  background:none;border:0;padding:12px 0;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
  position:relative;transition:color .25s;
}
.subtab:hover{color:var(--ink)}
.subtab:not(.active):hover::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--line)}
.subtab.active{color:var(--ink)}
.subtab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.subpanel{display:none}
.subpanel.active{display:block}
/* language label inside a KV block */
.kv-lang{
  max-width:1200px;margin:6px auto 0;padding:0 56px;
  font-family:'JetBrains Mono',monospace;font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}

/* ─── CASE LEAD (intro copy, e.g. Oriflame reach) ─── */
.case-lead{
  max-width:900px;margin:14px auto 0;padding:0 56px;
  font-family:'Sentient','Times New Roman',serif;
  font-size:clamp(1.2rem,2.1vw,1.7rem);line-height:1.38;
  color:var(--ink-soft);font-weight:400;letter-spacing:-.01em;
}
.case-lead em{font-style:italic;color:var(--accent)}
.case-lead .reach{
  display:block;margin-top:14px;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.case-lead .reach b{color:var(--ink);font-weight:500}

/* Hover preview on sub-tabs (like homepage work-thumb) */
.subtab-thumb{
  position:absolute; top:calc(100% + 14px); left:50%;
  width:260px; height:150px; overflow:hidden;
  transform:translate(-50%,8px); opacity:0; pointer-events:none;
  transition:opacity .3s, transform .45s cubic-bezier(.16,1,.3,1);
  box-shadow:0 24px 50px rgba(0,0,0,.22); z-index:30; background:var(--paper-2);
}
.subtab-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.subtab:hover .subtab-thumb{opacity:1; transform:translate(-50%,0)}
@media (hover:none){ .subtab-thumb{display:none} }

/* Regalia (awards) accent badge */
.regalia{color:var(--accent);font-weight:500;white-space:nowrap}

/* facts table moved below the sub-tab bar */
.facts-below{max-width:1200px;margin:0 auto;padding:0 40px}
@media(max-width:900px){.facts-below{padding:0 20px}}

/* merged cases (facts moved below tabs): trim hero bottom gap to match normal cases */
.case-hero.compact{padding-bottom:0}
.case-hero.compact + .subtabs, .case-hero.compact + .case-lead{margin-top:0}