/* Layout: свиток. Узкая колонка текста, слева вертикальная «тропа» с иероглифами разделов, справа поле. Кейсы — отдельные страницы-статьи по хешу. */
/* Весь сайт в одной тёмной гамме: графит + приглушённое золото, как первый экран */
:root{
  --paper:#15171C; --paper-2:#1C1F25; --paper-3:#22262D;
  --ink:#F2F2F0; --ink-soft:#A3A6AD; --line:#2A2D33;
  --moss:#D8B25C; --seal:#C2412F;
  --f-display:"Montserrat","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-body:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --f-kanji:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  color-scheme:dark;
  --gutter:clamp(16px, 5.5vw, 80px); --content:1180px;
}
*{box-sizing:border-box}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--moss); outline-offset:3px; border-radius:2px}

.wrap{
  max-width:calc(var(--content) + 2 * var(--gutter)); margin:0 auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Шапка */
.top{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:5;
  background:color-mix(in srgb, #16181D 92%, transparent); color:var(--h-fg);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--h-line);
}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:10; background:#16181D}
.top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--f-display); font-weight:600; font-size:14px; letter-spacing:.02em}
.hanko{
  display:inline-grid; place-items:center; width:30px; height:30px;
  background:var(--seal); color:#F6EFE6; border-radius:4px;
  font-family:var(--f-kanji); font-weight:700; font-size:18px; line-height:1;
  transform:rotate(-4deg);
}
.nav{display:flex; gap:30px; font-family:var(--f-display); font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase; flex-wrap:wrap}
.nav a{text-decoration:none; color:var(--h-soft)}
.nav a:hover{color:var(--h-acc)}
.burger{display:none; width:42px; height:42px; margin-right:-8px; border:0; background:transparent; color:var(--h-fg); cursor:pointer; position:relative}
.burger i{position:absolute; left:10px; right:10px; height:1.5px; background:currentColor; transition:transform .25s, opacity .2s}
.burger i:nth-child(1){top:14px} .burger i:nth-child(2){top:20px} .burger i:nth-child(3){top:26px}
.top.open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.top.open .burger i:nth-child(2){opacity:0}
.top.open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:720px){
  .burger{display:block}
  .nav{position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0; padding:8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px));
    background:#16181D; border-bottom:1px solid var(--h-line); font-size:13px;
    visibility:hidden; opacity:0; transform:translateY(-8px); transition:opacity .2s, transform .2s, visibility 0s .2s}
  .nav a{padding:16px 0; border-top:1px solid var(--h-line); color:var(--h-fg)}
  .nav a:first-child{border-top:0}
  .top.open .nav{visibility:visible; opacity:1; transform:none; transition:opacity .2s, transform .2s}
  .top .wrap{padding-block:10px}
}

/* Секции с «тропой» */
.section{display:grid; grid-template-columns:72px minmax(0,1fr); gap:24px; padding-block:96px; border-bottom:1px solid var(--line); scroll-margin-top:60px}
.trail{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px}
.trail .k{font-family:var(--f-kanji); font-weight:700; font-size:34px; line-height:1; color:var(--moss)}
.trail .lbl{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); writing-mode:vertical-rl; transform:rotate(180deg)}
.trail::after{content:""; flex:1; width:1px; background:var(--line); min-height:40px}
@media (max-width:640px){
  .section{grid-template-columns:minmax(0,1fr); gap:0; padding-block:56px}
  .trail{display:none}
  h2{margin-bottom:24px}
}
h2{font-family:var(--f-display); font-weight:800; font-size:clamp(30px,4.2vw,48px); line-height:1.08; margin:0 0 36px; text-wrap:balance; letter-spacing:-.02em}
h2 .acc{color:var(--moss)}
.eyebrow-s{display:flex; align-items:center; gap:14px; margin:0 0 16px; font-family:var(--f-display); font-weight:600; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--moss)}
.eyebrow-s::before{content:""; width:36px; height:1px; background:var(--moss)}

/* Hero: графит, объёмный свет, один акцент — приглушённое золото */
:root{--h-bg:#15171C; --h-bg-2:#1C1F25; --h-fg:#F2F2F0; --h-soft:#A3A6AD; --h-line:#2E3138; --h-acc:#D8B25C}
.hero{background:var(--h-bg); color:var(--h-fg); position:relative; overflow:hidden; isolation:isolate}
.hero::before{content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(32% 52% at 72% 45%, rgba(200,206,218,.085), transparent 70%),
    radial-gradient(80% 90% at 70% 60%, rgba(40,44,54,.9), transparent 75%),
    linear-gradient(160deg, #1B1E24 0%, var(--h-bg) 55%, #101216 100%)}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, transparent 78%, var(--paper) 100%), radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(0,0,0,.45) 100%)}
.beams{position:absolute; inset:-20% -10% -20% 35%; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(115deg, transparent 0 46px, rgba(255,255,255,.022) 46px 92px);
  -webkit-mask-image:radial-gradient(50% 55% at 55% 50%, #000, transparent 75%); mask-image:radial-gradient(50% 55% at 55% 50%, #000, transparent 75%)}
.hero-in{max-width:calc(var(--content) + 2 * var(--gutter)); margin:0 auto; display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:clamp(24px,3.5vw,56px); align-items:end; min-height:min(860px, calc(100svh - 64px));
  padding-left:max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right:max(var(--gutter), env(safe-area-inset-right, 0px)); padding-block:24px 0}
.hero-text{align-self:center; padding-block:48px 72px; position:relative; z-index:3}
.hello{display:flex; align-items:center; gap:14px; margin:0 0 22px; font-family:var(--f-display); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--h-acc)}
.hello .dash{width:36px; height:1px; background:var(--h-acc)}
.hero h1{font-family:var(--f-display); font-weight:800; font-size:clamp(44px,6.2vw,84px); line-height:1; letter-spacing:-.02em; margin:0; text-shadow:0 8px 40px rgba(0,0,0,.35)}
.hero h1 .acc{color:var(--h-acc); display:block; font-size:.62em; letter-spacing:-.01em; margin-bottom:.06em}
.lead-h{font-size:16px; line-height:1.75; color:var(--h-soft); max-width:40ch; margin:26px 0 36px}
.lead-h b{color:var(--h-fg); font-weight:500}
.btn-h{display:inline-flex; align-items:center; padding:15px 26px; font-family:var(--f-display); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; border:1px solid transparent; border-radius:0}
.btn-h.primary{background:var(--h-acc); color:#15171C}
.btn-h.primary:hover{background:#E4C276}
.btn-h.ghost{border-color:rgba(255,255,255,.18); color:var(--h-fg)}
.btn-h.ghost:hover{border-color:var(--h-acc); color:var(--h-acc)}
.mini{display:grid; grid-template-columns:repeat(3,auto); justify-content:start; margin:52px 0 0; padding-top:24px; border-top:1px solid var(--h-line); max-width:470px}
.mini div{padding:0 28px; border-left:1px solid var(--h-line)}
.mini div:first-child{padding-left:0; border-left:0}
.mini dt{font-family:var(--f-display); font-weight:700; font-size:26px; font-variant-numeric:tabular-nums}
.mini dd{margin:6px 0 0; font-size:12px; color:var(--h-soft); max-width:15ch; line-height:1.4}
.hero-photo{position:relative; align-self:end; display:flex; justify-content:flex-end; padding-top:120px; min-width:0}
.hero-photo::before{content:""; position:absolute; left:50%; bottom:0; width:85%; aspect-ratio:1; transform:translate(-50%,12%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.07), transparent); z-index:-1}
.socials{position:absolute; left:max(24px, env(safe-area-inset-left, 0px)); bottom:28px; display:flex; gap:18px}
.socials a, .scroll{color:var(--h-soft); text-decoration:none}
.socials a:hover, .scroll:hover{color:var(--h-acc)}
.scroll{position:absolute; right:max(24px, env(safe-area-inset-right, 0px)); bottom:28px; display:flex; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--f-display); font-size:10px; font-weight:600; letter-spacing:.3em; text-transform:uppercase}
.scroll span{writing-mode:vertical-rl}
.scroll i{width:1px; height:44px; background:linear-gradient(var(--h-acc), transparent)}
@media (max-width:1280px){ .socials,.scroll{display:none} }
@media (max-width:1000px){
  .hero-in{min-height:0; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:8px}
  .hero-text{padding-block:56px 64px}
  .mini div{padding:0 14px} .mini dt{font-size:21px} .mini dd{font-size:11px}
}
@media (max-width:640px){
  .hero-in{grid-template-columns:1fr; gap:0; padding-block:8px 0}
  .hero-photo{order:-1; justify-content:center; padding-top:56px}
  .hero-text{padding:0 0 48px; margin-top:4px}
  .hello{font-size:10px; letter-spacing:.16em; line-height:1.6}
  .bg-chart{opacity:.45}
  .hero h1{font-size:clamp(44px,13vw,60px)}
  .lead-h{margin:20px 0 28px; max-width:none}
  .cta{display:grid; grid-template-columns:1fr auto}
  .btn-h{justify-content:center}
  .mini{margin-top:36px; max-width:none; grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:no-preference){
  .hero-text > *{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .hero-text > *:nth-child(2){animation-delay:.07s} .hero-text > *:nth-child(3){animation-delay:.14s}
  .hero-text > *:nth-child(4){animation-delay:.21s} .hero-text > *:nth-child(5){animation-delay:.28s}
  .btn-h{transition:background .2s, border-color .2s, color .2s}
}
@keyframes rise{from{transform:translateY(16px)} to{transform:none}}


/* моргание */
.blink .lid{transform-box:fill-box; transform-origin:50% 0; transform:scaleY(0); animation:blink 6.5s infinite}
@keyframes blink{
  0%,93%{transform:scaleY(0)} 95%{transform:scaleY(1)} 97%{transform:scaleY(0)}
  97.6%{transform:scaleY(0)} 98.6%{transform:scaleY(1)} 99.6%,100%{transform:scaleY(0)}
}
@media (prefers-reduced-motion:reduce){ .blink{display:none} }

/* Фон первого экрана: едва заметный дашборд — сетка, столбики, растущая кривая ROAS */
.bg-layers{position:absolute; inset:0; z-index:-1; pointer-events:none}
.bgl{position:absolute; inset:0; width:100%; height:100%}
.bg-chart .grid path{stroke:rgba(255,255,255,.018); stroke-width:1}
.bg-chart .bars rect{fill:rgba(255,255,255,.012)}
.bg-chart .c1{fill:none; stroke:rgba(216,178,92,.2); stroke-width:2.5}
.bg-chart .c2{fill:none; stroke:rgba(255,255,255,.055); stroke-width:2; stroke-dasharray:8 10}
.bg-chart .dots circle{fill:#15171C; stroke:rgba(216,178,92,.28); stroke-width:2}
.bg-chart .tk text{font-family:var(--f-mono); font-size:13px; fill:rgba(255,255,255,.07); letter-spacing:.06em}
.bg-chart{-webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,.2) 0%, #000 50%); mask-image:linear-gradient(90deg, rgba(0,0,0,.2) 0%, #000 50%)}

/* Аватар + манга-эффекты */
:root{--fx:#E6BE5E; --fx-2:#EDEBE4}
.avatar{position:relative; flex:none; width:min(100%, clamp(380px, min(50vw, calc(100svh - 255px)), 660px)); height:auto; aspect-ratio:1100/1107; margin-right:-1%}
.avatar img{position:absolute; z-index:1; display:block; max-width:none;
  left:-1.4545%; top:-1.4453%; width:102.9091%; height:102.8907%;
  filter:drop-shadow(1.4px 0 0 var(--fx)) drop-shadow(-1.4px 0 0 var(--fx)) drop-shadow(0 -1.4px 0 var(--fx)) drop-shadow(0 1.4px 0 var(--fx));
  -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 95%); mask-image:linear-gradient(180deg,#000 76%,transparent 95%)}
.fx{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.fx-back{z-index:0} .fx-front{z-index:2}
#em-left,#em-right{transition:opacity .25s}
.rays path{opacity:.42}
.rays .slash{opacity:.85}
.lbl{font-family:"Permanent Marker","Marker Felt","Comic Sans MS",cursive; font-size:74px}
.lbl.sm{font-size:58px} .lbl.xs{font-size:50px} .lbl.xl{font-size:110px}
@media (prefers-reduced-motion:no-preference){
  .draw{stroke-dasharray:1; stroke-dashoffset:1; animation:draw .7s cubic-bezier(.4,0,.2,1) forwards; animation-delay:var(--d,0s)}
  .pop .draw{animation-delay:calc(var(--d,0s) + .05s)}
  .pop{transform-box:fill-box; transform-origin:center; animation:pop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay:var(--d,0s)}
  .pop.float{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both, bob var(--f,5s) ease-in-out infinite; animation-delay:var(--d,0s), calc(var(--d,0s) + .6s)}
  .rays path{stroke-dasharray:1; stroke-dashoffset:1; animation:draw .5s ease-out forwards; animation-delay:calc(.15s + var(--d,0s))}
  .spark path{transform-box:fill-box; transform-origin:center; animation:twinkle 2.6s ease-in-out infinite; animation-delay:var(--d,0s)}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(.4) rotate(var(--r,0deg))} to{transform:scale(1) rotate(0deg)}}
@keyframes bob{0%,100%{translate:0 0} 50%{translate:0 -10px}}
@keyframes twinkle{0%,100%{scale:1; opacity:1} 50%{scale:.55; opacity:.5}}
@media (max-width:1000px){
  .avatar{height:auto; width:100%; max-width:520px; margin:0}
  .hero-photo{padding-top:90px; align-self:center}
}
@media (max-width:640px){
  .avatar{width:min(78vw, 360px)}
  .lbl{font-size:66px} .lbl.sm{font-size:54px} .lbl.xs{font-size:50px}
}


.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 20px; border-radius:2px; font-weight:600; font-size:15px; text-decoration:none; border:1px solid var(--ink); cursor:pointer; font-family:var(--f-display); font-size:12px; letter-spacing:.14em; text-transform:uppercase; border-radius:0}
.btn.primary{background:var(--moss); border-color:var(--moss); color:#15171C}
.btn.ghost{background:transparent; color:var(--ink); border-color:rgba(255,255,255,.18)}
.btn.ghost:hover{border-color:var(--moss); color:var(--moss)}
/* Галерея в «Обо мне» */


/* Лендинги (заглушки) */
.ld-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.ld-card{display:flex; flex-direction:column; gap:14px}
.ld-browser{border:1px solid var(--line); background:var(--paper-2); overflow:hidden; transition:border-color .25s}
.ld-card:hover .ld-browser{border-color:rgba(216,178,92,.5)}
.ld-bar{display:flex; align-items:center; gap:6px; padding:9px 12px; border-bottom:1px solid var(--line); background:var(--paper-3)}
.ld-bar i{width:8px; height:8px; border-radius:50%; background:var(--line)}
.ld-bar span{margin-left:10px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 10px; border-radius:4px; background:var(--paper); font-family:var(--f-mono); font-size:10.5px; color:var(--ink-soft)}
.ld-screen{aspect-ratio:16/11; padding:7% 8%; display:flex; flex-direction:column; gap:7%; background:linear-gradient(160deg, #1E2229, var(--paper) 75%)}
.sk{background:rgba(255,255,255,.06); border-radius:3px}
.sk-nav{height:5%; width:100%; background:rgba(255,255,255,.04)}
.sk-h1{height:9%; width:70%; margin-top:4%; background:rgba(255,255,255,.1)}
.sk-h2{height:5%; width:48%; margin-top:-3%}
.sk-btn{height:9%; width:30%; background:rgba(216,178,92,.45)}
.sk-row{display:grid; grid-template-columns:repeat(3,1fr); gap:6%; flex:1}
.sk-tile{height:100%}
.ld-meta{display:flex; flex-direction:column; gap:4px}
.ld-meta b{font-family:var(--f-display); font-weight:700; font-size:18px}
.ld-meta span{font-size:13px; color:var(--ink-soft)}
@media (max-width:900px){ .ld-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .ld-grid{grid-template-columns:1fr; gap:24px} }

/* Playable Ads */
.pa-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2.2vw,28px)}
/* на главной: 4 плейбла на ПК, 3 на телефоне; на странице «Все плейблы» — все */
@media (min-width:761px){ .more.only-mobile{display:none} }
@media (max-width:760px){ #pa-list > .pa-card:nth-child(n+4){display:none} #all-inner .pa-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.pa-card{display:flex; flex-direction:column; gap:14px}
.pa-phone{position:relative; aspect-ratio:9/16; width:100%; border-radius:22px; border:1px solid var(--line); background:
  linear-gradient(160deg, var(--paper-3), var(--paper) 70%); display:grid; place-items:center; overflow:hidden}
.pa-phone::before{content:""; position:absolute; top:10px; left:50%; width:28%; height:5px; transform:translateX(-50%); border-radius:3px; background:var(--line)}
.pa-play{width:58px; height:58px; border-radius:50%; border:1.5px solid var(--moss); position:relative; transition:background .25s}
.pa-play::after{content:""; position:absolute; left:23px; top:18px; border-left:16px solid var(--moss); border-top:11px solid transparent; border-bottom:11px solid transparent}
.pa-card:hover .pa-play{background:rgba(216,178,92,.12)}
.pa-meta{display:flex; flex-direction:column; gap:4px}
.pa-meta b{font-family:var(--f-display); font-weight:700; font-size:18px}
.pa-meta span{font-size:13px; color:var(--ink-soft)}
@media (max-width:760px){ #pa-list{grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px} .pa-phone{border-radius:14px} .pa-meta b{font-size:14px} .pa-meta span{font-size:11.5px} .pa-play{width:42px; height:42px} .pa-play::after{left:16px; top:12px; border-left-width:13px; border-top-width:9px; border-bottom-width:9px} }

/* «Без катаны»: бенто-сетка */
.offduty{margin-top:56px}
.offduty-note{margin:0 0 22px; font-family:var(--f-display); font-weight:800; font-size:clamp(20px,2.2vw,28px); line-height:1.15; letter-spacing:-.015em; color:var(--ink); text-wrap:balance}
.offduty-note span{display:inline-block; font-family:"Caveat","Marker Felt","Comic Sans MS",cursive; font-weight:700; font-size:1.45em; line-height:.8; letter-spacing:0; color:var(--moss); transform:rotate(-3deg) translateY(.04em); margin-left:.12em; position:relative}
.offduty-note span::after{content:""; position:absolute; left:2%; right:2%; bottom:-.06em; height:.09em; background:var(--moss); border-radius:2px; transform:rotate(-1deg); opacity:.85}
.bento{display:grid; grid-template-columns:1.25fr 1fr 1fr 1fr; grid-template-rows:repeat(2, minmax(210px, 17vw)); gap:8px}
.tile{position:relative; margin:0; overflow:hidden; background:#0E0F12; isolation:isolate}
.tile.big{grid-row:span 2}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; filter:saturate(.6); transition:transform .6s cubic-bezier(.2,.8,.2,1), filter .4s, opacity .4s}
.tile:hover img{transform:scale(1.04); opacity:1; filter:saturate(1.05)}
@media (hover:none){ .tile img{opacity:.85; filter:saturate(.85)} }
@media (max-width:900px){
  .bento{grid-template-columns:1fr 1fr; grid-template-rows:none; grid-auto-rows:clamp(170px, 42vw, 260px)}
  .tile.big{grid-column:1/-1; grid-row:span 2}
}
@media (max-width:640px){
  .offduty{margin-top:40px}
  .bento{gap:8px}
      }

/* Цифры */
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:2px solid var(--ink)}
.stat{padding:22px 20px 4px 0}
.stat + .stat{padding-left:20px; border-left:1px solid var(--line)}
.stat .v{font-family:var(--f-display); font-weight:600; font-size:clamp(30px,4.6vw,50px); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.stat .v small{font-size:.45em; font-weight:400; color:var(--ink-soft); margin-left:4px}
.stat .d{margin-top:10px; font-size:14px; color:var(--ink-soft); max-width:22ch}
@media (max-width:620px){ .stats{grid-template-columns:1fr} .stat+.stat{padding-left:0; border-left:0; border-top:1px solid var(--line)} }

/* Каналы: плитки-арсенал */
.channels{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.ch{position:relative; background:var(--paper); padding:30px 24px 26px; display:flex; flex-direction:column; gap:10px; min-height:150px; overflow:hidden; transition:background .25s}
.ch::before{content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--moss); transition:width .35s cubic-bezier(.2,.7,.2,1)}
.ch:hover{background:var(--paper-2)} .ch:hover::before{width:100%}
.ch b{font-family:var(--f-display); font-weight:700; font-size:clamp(20px,2.2vw,26px); letter-spacing:-.01em; margin-top:auto}
.ch span{font-family:var(--f-body); font-size:13px; line-height:1.4; color:var(--ink-soft)}
.ch i{position:absolute; right:16px; bottom:14px; font-style:normal; font-family:var(--f-kanji); font-weight:700; font-size:20px; line-height:1; color:var(--line)}
.ch:hover i{color:var(--moss)}
.ch-lead{max-width:56ch; color:var(--ink-soft); margin:-18px 0 36px; font-size:16.5px}
@media (max-width:760px){ .channels{grid-template-columns:repeat(2,minmax(0,1fr))} .ch{min-height:116px; padding:18px 16px 16px} .ch span{font-size:12px} .ch-lead{margin:-10px 0 28px; font-size:15.5px} }

/* Кейсы */
.cases{display:flex; flex-direction:column}
.case{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:20px; align-items:baseline; padding:26px 0; border-top:1px solid var(--line); text-decoration:none}
.case:last-child{border-bottom:1px solid var(--line)}
.case .n{font-family:var(--f-kanji); font-weight:700; font-size:30px; color:var(--moss); line-height:1}
.case h3{font-family:var(--f-display); font-weight:600; font-size:clamp(19px,2.4vw,24px); margin:0 0 8px; line-height:1.2; text-wrap:balance}
.case p{margin:0; color:var(--ink-soft); font-size:15.5px; max-width:60ch}
.tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px}
.tag{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; padding:3px 8px; border:1px solid var(--line); border-radius:2px; color:var(--ink-soft)}
.tag.draft{border-color:var(--seal); color:var(--seal)}
.case .go{font-family:var(--f-mono); font-size:13px; color:var(--ink-soft); white-space:nowrap}
.case:hover h3{color:var(--moss)}
.case:hover .go{color:var(--moss)}
@media (max-width:640px){ .case{grid-template-columns:28px minmax(0,1fr); gap:12px; padding:22px 0} .case .n{font-size:22px} .case .go{grid-column:2} .case p{font-size:15px} }

/* Обо мне */
.about p{max-width:none; font-size:18px; margin:0; text-align:justify; hyphens:auto; -webkit-hyphens:auto}
@media (max-width:640px){ .about p{font-size:16px; line-height:1.65} }

/* Контакты */
.contacts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.contact{border:1px solid var(--line); padding:22px; display:flex; flex-direction:column; gap:12px; background:var(--paper-2)}
.contact .t{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.contact .val{font-family:var(--f-display); font-size:clamp(17px,2.4vw,22px); font-weight:600; user-select:all; word-break:break-all}
.contact .row{display:flex; gap:10px; flex-wrap:wrap}
.contact .btn{padding:9px 14px; font-size:14px}
@media (max-width:640px){ .contacts{grid-template-columns:1fr} .contact{padding:20px} .contact .row{display:grid; grid-template-columns:1fr 1fr} .contact .row .btn{justify-content:center; padding:12px 10px; letter-spacing:.08em} .contact .row .btn:only-child{grid-column:1/-1} }
.copied{font-size:13px; color:var(--moss); align-self:center}

footer{padding-block:40px; font-family:var(--f-mono); font-size:12px; color:var(--ink-soft); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* Статья-кейс */
.article{max-width:720px; margin:0 auto; padding-block:56px 80px}
.back{font-family:var(--f-mono); font-size:13px; text-decoration:none; color:var(--ink-soft)}
.back:hover{color:var(--moss)}
.article .meta{display:flex; gap:8px; flex-wrap:wrap; margin:28px 0 18px}
.article h1{font-family:var(--f-display); font-weight:800; font-size:clamp(30px,5.4vw,52px); line-height:1.05; letter-spacing:-.02em; margin:0 0 20px; text-wrap:balance}
.lead{font-size:20px; color:var(--ink-soft); margin:0 0 36px}
.kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:2px solid var(--ink); border-bottom:1px solid var(--line); margin-bottom:44px}
.kpis div{padding:18px 14px 18px 0}
.kpis div+div{padding-left:14px; border-left:1px solid var(--line)}
.kpis b{display:block; font-family:var(--f-display); font-size:clamp(22px,3.4vw,32px); font-variant-numeric:tabular-nums}
.kpis span{font-size:13px; color:var(--ink-soft)}
@media (max-width:520px){ .kpis{grid-template-columns:1fr} .kpis div+div{padding-left:0; border-left:0; border-top:1px solid var(--line)} }
.article h2{font-size:clamp(20px,2.8vw,26px); margin:44px 0 14px; display:flex; gap:14px; align-items:baseline}
.article h2 .k{font-family:var(--f-kanji); color:var(--moss); font-size:.9em}
.article p{margin:0 0 16px}
.hint{border-left:3px solid var(--seal); background:var(--paper-2); padding:14px 18px; font-size:15px; color:var(--ink-soft); margin:0 0 16px}
.hint b{color:var(--ink); font-weight:600}
.next{margin-top:56px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

@media (prefers-reduced-motion:no-preference){
  .btn{transition:transform .15s ease}
  .case h3,.case .go{transition:color .15s ease}
}
/* Ссылки «смотреть все», пустые состояния, страницы «все …» */
.more{display:inline-flex; align-items:center; gap:8px; margin-top:28px; font-family:var(--f-display); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--moss); text-decoration:none}
.more:hover{text-decoration:underline; text-underline-offset:4px}
.empty-note{grid-column:1/-1; margin:0; padding:28px; border:1px dashed var(--line); color:var(--ink-soft); font-size:15px}
.all{padding-block:56px 96px}
.all-h{font-family:var(--f-display); font-weight:800; font-size:clamp(32px,5vw,56px); letter-spacing:-.02em; margin:24px 0 36px}
.article .cover{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; margin:0 0 36px; border:1px solid var(--line)}
a.ld-card, a.pa-card{text-decoration:none; color:inherit}
.ld-meta em{font-style:normal; font-size:12px; font-family:var(--f-display); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--moss); margin-top:4px}
.ld-shot{padding:0; display:block; overflow:hidden}
.ld-shot img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0; transition:object-position 6s linear}
.ld-card:hover .ld-shot img{object-position:50% 100%}
.pa-phone img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pa-phone img + .pa-play{position:relative; z-index:1; background:rgba(21,23,28,.55); backdrop-filter:blur(2px)}
.footer-adm{color:var(--ink-soft); text-decoration:none; margin-right:10px}
.footer-adm:hover{color:var(--moss)}

/* ===== Страница кейса v2: на всю ширину, в стилистике панели ===== */
.case-page{padding-block:40px 96px; max-width:1040px; margin-inline:auto}
.cs-head{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px 40px; align-items:end; padding:24px 0 28px; border-bottom:1px solid var(--line)}
.cs-head h1{grid-column:1/-1; font-family:var(--f-display); font-weight:800; font-size:clamp(23px,2.3vw,32px); line-height:1.18; letter-spacing:-.015em; margin:0; max-width:none; text-wrap:pretty}
.cs-head .eyebrow-s{grid-column:1/-1; margin:0}
.cs-lead{margin:0; max-width:64ch; font-size:17px; line-height:1.6; color:var(--ink-soft)}
.cs-tags{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.cs-tags span{font-family:var(--f-display); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:7px 11px; border:1px solid var(--line); color:var(--ink-soft)}
.cs-kpis{display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:10px; margin:24px 0}
.cs-kpi{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:12px 18px; background:var(--paper-2); border:1px solid var(--line)}
.cs-kpi:first-child{box-shadow:inset 0 2px 0 var(--moss); border-color:rgba(216,178,92,.55)}
.cs-kpi b{font-family:var(--f-display); font-weight:600; font-size:clamp(18px,1.7vw,22px); line-height:1; letter-spacing:0; font-variant-numeric:tabular-nums; white-space:nowrap}
.cs-kpi:first-child b{color:var(--moss)}
.cs-kpi span{font-family:var(--f-display); font-weight:500; font-size:12.5px; line-height:1.25; letter-spacing:0; color:var(--ink-soft); text-align:right}
.cs-cover{margin:0 0 32px; border:1px solid var(--line); background:var(--paper-2)}
.cs-cover img{display:block; width:100%; aspect-ratio:21/9; object-fit:cover}
.cs-body{display:grid; grid-template-columns:200px minmax(0,1fr); gap:28px; align-items:start}
.cs-nav{position:sticky; top:calc(env(safe-area-inset-top, 0px) + 84px); display:flex; flex-direction:column; gap:2px; padding-top:4px}
.cs-nav p{margin:0 0 10px; font-family:var(--f-display); font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}
.cs-nav button{display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; background:none; border:0; border-left:2px solid var(--line); color:var(--ink-soft); font:500 14px var(--f-body); text-align:left; cursor:pointer}
.cs-nav button .k{font-family:var(--f-kanji); font-weight:700; color:var(--line); font-size:15px; width:16px}
.cs-nav button:hover, .cs-nav button.on{color:var(--ink); border-left-color:var(--moss)}
.cs-nav button:hover .k, .cs-nav button.on .k{color:var(--moss)}
.cs-secs{display:flex; flex-direction:column; gap:12px; min-width:0}
.cs-sec{background:var(--paper-2); border:1px solid var(--line); padding:clamp(20px,2.4vw,28px) clamp(18px,2.8vw,34px); scroll-margin-top:90px}
.cs-sec header{display:flex; align-items:center; gap:12px; min-height:32px; margin-bottom:18px}
.cs-sec header .k{display:grid; place-items:center; width:32px; height:32px; flex:none; line-height:1; border:1px solid rgba(216,178,92,.5); font-family:var(--f-kanji); font-weight:700; font-size:18px; color:var(--moss)}
.cs-sec header .n{margin-left:auto; flex:none; font-family:var(--f-display); font-weight:600; font-size:11px; line-height:1; letter-spacing:.16em; color:var(--ink-soft)}
.cs-sec h2{margin:0; min-width:0; font-family:var(--f-display); font-weight:700; font-size:clamp(17px,1.5vw,20px); line-height:1.2; letter-spacing:-.005em}
.cs-text{max-width:74ch; font-size:16px; line-height:1.75; color:#D9DADC}
.cs-text p{margin:0 0 14px} .cs-text p:last-child{margin-bottom:0}
.cs-text ul{margin:0 0 14px; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.cs-text li{position:relative; padding-left:22px}
.cs-text li::before{content:""; position:absolute; left:2px; top:.72em; width:7px; height:7px; background:var(--moss); transform:rotate(45deg)}
.cs-next{display:flex; align-items:center; gap:10px; width:fit-content; max-width:100%; margin:28px 0 0 auto; padding:10px 16px; border:1px solid var(--line); text-decoration:none; color:var(--ink); font-family:var(--f-display); font-size:13px; line-height:1; white-space:nowrap; transition:border-color .2s}
.cs-next:hover{border-color:var(--moss)}
.cs-next span{color:var(--ink-soft); font-weight:500; flex:none}
.cs-next b{font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis}
.cs-next i{font-style:normal; font-size:14px; line-height:1; color:var(--moss); flex:none; transition:transform .2s}
.cs-next:hover i{transform:translateX(3px)}
.cs-foot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:20px}
@media (max-width:900px){
  .cs-body{grid-template-columns:1fr; gap:16px}
  .cs-nav{position:static; flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px}
  .cs-nav p{display:none}
  .cs-nav button{width:auto; flex:none; border-left:0; border:1px solid var(--line); padding:8px 12px; white-space:nowrap}
  .cs-nav button.on{border-color:var(--moss)}
}
@media (max-width:640px){
  .case-page{padding-block:24px 64px}
  .cs-head{grid-template-columns:1fr; padding:20px 0 28px}
  .cs-tags{justify-content:flex-start}
  .cs-kpis{grid-template-columns:1fr; gap:8px; margin:20px 0}
  .cs-kpi{padding:13px 16px}
  .cs-kpi b{font-size:19px}
  .cs-cover img{aspect-ratio:16/10}
  .cs-text{font-size:16px; line-height:1.7}
  .cs-next{padding:9px 12px; margin-left:0}
  .cs-next span{display:none}
}

/* Картинки внутри разделов кейса */
.cs-fig{margin:18px 0; max-width:100%}
.cs-fig img{display:block; width:100%; height:auto; border:1px solid var(--line); background:var(--paper)}
.cs-fig figcaption{margin-top:8px; font-size:13px; color:var(--ink-soft)}
.cs-text .cs-fig:first-child{margin-top:0} .cs-text .cs-fig:last-child{margin-bottom:0}