/* Локальный слой портфолио. Палитра, шрифты и общая шапка — /assets/site.css. */
.cv-nav{display:flex;flex-wrap:wrap;gap:0 24px;padding-block:12px;border-bottom:1px solid var(--line)}
.cv-nav a{display:inline-flex;align-items:center;min-height:44px;font:12px/1.5 var(--font-mono);color:var(--soft)}
.cv-nav a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:5px}
#main{width:min(100%,var(--maxw));margin-inline:auto;padding-inline:40px;overflow-wrap:anywhere}
#main :is(h1,h2,h3,p,dl,dd,ul){margin:0}
#main :is(ul,dl){padding:0}
#main :is(h1,h2,h3){font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:-.045em;text-wrap:balance}
#main :is(a,code){overflow-wrap:anywhere}
#main p a{text-decoration:underline;text-underline-offset:4px}
#main code{font:.85em/1.5 var(--font-mono);color:var(--accent)}
.cv-register{display:flex;flex-wrap:wrap;gap:6px 14px}
.cv-register .sep{color:var(--muted)}
.hero{padding-block:32px 56px}
.hero h1{margin-top:28px!important;max-width:22ch;padding-bottom:28px;border-bottom:1px solid var(--line);font-size:clamp(56px,7.5vw,108px);line-height:1.06}
.hero h1 .soft{display:block;margin-top:24px;font:italic 400 .45em/1.35 var(--font-read);text-transform:none;letter-spacing:-.045em;color:var(--accent)}
.hero-sub{margin-top:30px!important;max-width:74ch;color:var(--soft);font-size:clamp(16px,1.35vw,19px)}

/* Крупные заголовки не рвём посреди слова: на 390px overflow-wrap:anywhere
   ломал «ИНСТРУМЕНТЫ» на «ИНСТРУМЕНТ / Ы». Перенос — только по пробелам. */
.hero h1,.scene-h,.band-h,.spot-h,.contact-q{overflow-wrap:normal;word-break:normal;hyphens:none}
@media (max-width:640px){
  .hero h1{font-size:clamp(38px,11.2vw,108px);line-height:1.02}
}

.hero-sub strong{color:var(--ink);font-weight:600}
.hero-cta{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(240px,1fr);gap:24px;margin-top:32px}
.cta-main,.cta-ghost{display:flex;align-items:center;justify-content:space-between;gap:16px;font:12px/1.5 var(--font-mono)}
.cta-blog{min-height:116px;padding:20px 26px;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent)}
.cta-label{display:flex;flex-direction:column;gap:6px}
.cta-label small::before{content:"01 / кейсы"}
.cta-label b{font:600 clamp(28px,3.2vw,40px)/1.05 var(--font-display);text-transform:uppercase;letter-spacing:-.045em}
.cta-arrow{font:42px/1 var(--font-ui)}
.cta-blog:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.cta-secondary{display:flex;flex-direction:column;justify-content:end}
.cta-ghost{min-height:58px;padding:15px 0;border-block:1px solid var(--strong);color:var(--ink);font:500 19px/1.3 var(--font-ui)}
.cta-ghost small{margin-right:20px;color:var(--muted);font:11px/1.5 var(--font-mono)}
.cta-ghost small::before{content:"02"}
.cta-ghost>span:last-child{color:var(--accent);font:25px/1 var(--font-ui)}
.cta-ghost:hover{color:var(--ink)}
.cta-ghost:hover>span:first-child{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:5px}
.hero-loc{margin-top:30px!important;padding-block:12px;border-block:1px solid var(--strong);font:11px/1.7 var(--font-mono);color:var(--muted)}
.scene{padding-block:56px;border-top:1px solid var(--line)}
.scene-h,.contact-q{margin-top:16px!important;max-width:24ch;font-size:clamp(34px,4.4vw,56px);line-height:1.15}
.scene-lead,.contact-note{margin-top:24px!important;max-width:68ch;color:var(--soft);font-size:clamp(16px,1.35vw,19px)}
.contact-note b{color:var(--ink)}
.data-rows,.timeline{margin-top:32px!important}
.data-row,.tl-row{display:grid;grid-template-columns:minmax(140px,.28fr) minmax(0,1fr);gap:32px;padding-block:26px;border-top:1px solid var(--line)}
.data-row:last-child,.tl-row:last-child{border-bottom:1px solid var(--line)}
.data-row dt,.tl-when{font:12px/1.7 var(--font-mono);color:var(--muted)}
.data-row dt{color:var(--accent)}
.data-row dd,.tl-body{color:var(--soft);max-width:68ch}
.timeline{counter-reset:experience}
.tl-row{position:relative;grid-template-columns:56px minmax(140px,.28fr) minmax(0,1fr) 34px;counter-increment:experience}
.tl-row::before{content:counter(experience,decimal-leading-zero);padding-top:3px;font:12px/1.7 var(--font-mono);color:var(--muted)}
.tl-row::after{content:"↗";padding-top:1px;color:var(--muted);font:28px/1 var(--font-ui)}
.tl-row:hover::before,.tl-row:hover::after{color:var(--accent)}
.tl-row:hover .tl-co{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:6px}
.tl-co{font-size:clamp(28px,3vw,40px);line-height:1.15}
.tl-role{margin-top:12px!important;color:var(--accent);font:12px/1.7 var(--font-mono)}
.tl-body{margin-top:16px!important}
.band{position:relative;margin-top:32px;padding-block:24px;border-top:1px solid var(--line)}
.band-ghost{margin-bottom:16px;font:12px/1.5 var(--font-mono);color:var(--muted)}
.band-content{max-width:74ch}
.band-tag,.spot-index{font:11px/1.7 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.band-h,.spot-h{margin-top:12px!important;font-size:clamp(28px,3.3vw,42px);line-height:1.2}
.band-p,.spot-body{margin-top:20px!important;color:var(--soft);max-width:68ch}
.band-list{margin-top:24px!important;list-style:none}
.band-list li{padding-block:14px;border-top:1px solid var(--line);color:var(--soft)}
.band-list li:last-child{border-bottom:1px solid var(--line)}
.cases-list{margin-top:32px;display:flex;flex-direction:column}
.spot{display:grid;grid-template-columns:100px minmax(0,1fr) 34px;gap:24px;padding-block:30px;border-top:1px solid var(--line)}
.spot::after{content:"↗";padding-top:2px;color:var(--muted);font:28px/1 var(--font-ui)}
.spot:hover .spot-index,.spot:hover::after{color:var(--accent)}
.spot:hover .spot-h{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:6px}
.spot-h{margin-top:0!important;max-width:32ch}
.spot-meta{margin-top:14px!important;font:12px/1.7 var(--font-mono);color:var(--muted)}
.spot-specs{margin-top:24px;padding-left:18px;border-left:1px solid var(--strong)}
.spec-lead{font-size:clamp(18px,2vw,25px);line-height:1.4;color:var(--ink)}
.spec-rest{margin-top:14px!important;list-style:none;font:12px/1.7 var(--font-mono);color:var(--muted)}
.spec-rest li+li{margin-top:8px}
.group-mark{display:flex;align-items:center;gap:16px;margin-block:32px 20px!important;font:12px/1.7 var(--font-mono);text-transform:uppercase;color:var(--muted)}
.group-mark::after{content:"";height:1px;flex:1;background:var(--line)}
.contact-list{margin-top:32px!important;list-style:none}
.contact-list a,.contact-list .static{display:grid;grid-template-columns:150px minmax(0,1fr) auto;align-items:baseline;gap:16px;min-height:56px;padding-block:18px;border-top:1px solid var(--line)}
.contact-list a::after{content:"↗";color:var(--accent);font-size:24px}
.contact-list a:hover .c-val{text-decoration:underline;text-underline-offset:5px}
.contact-list li:last-child>:is(a,.static){border-bottom:1px solid var(--line)}
.c-key{font:11px/1.7 var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.c-val{min-width:0;font-size:clamp(18px,2.5vw,30px);line-height:1.4}
.static .c-val{color:var(--soft)}
@media(max-width:760px){
  #main{padding-inline:22px}
  .data-row{grid-template-columns:1fr;gap:10px}
  .tl-row{grid-template-columns:42px minmax(0,1fr) 24px;gap:12px}
  .tl-when{grid-column:2}
  .tl-row>div{grid-column:2}
  .tl-row::after{grid-column:3;grid-row:1;font-size:24px}
  .spot{grid-template-columns:minmax(0,1fr) 24px;gap:14px}
  .spot-index{grid-column:1}
  .spot>div:not(.spot-index){grid-column:1}
  .spot::after{grid-column:2;grid-row:1;font-size:24px}
}
@media(max-width:600px){
  #main{padding-inline:18px}
  .cv-nav{gap:0 18px}
  .hero{padding-block:24px 36px}
  .hero h1{font-size:clamp(56px,16vw,64px);padding-bottom:22px}
  .hero h1 .soft{font-size:28px}
  .scene{padding-block:36px}
  .hero-cta{grid-template-columns:1fr;gap:16px}
  .cta-blog{min-height:102px;padding:18px 20px}
  .cta-label b{font-size:32px}
  .contact-list a,.contact-list .static{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .c-key{grid-column:1/-1}
  .c-val{font-size:20px}
}
@media print{
  .cv-nav,.hero-cta{display:none}
  #main{width:100%;padding:0}
  .hero,.scene{padding-block:24px}
  .hero h1{font-size:48px}
  .spot,.tl-row,.data-row{break-inside:avoid}
}