/* Existing EN/RU indicator, now links with native keyboard and focus behavior. */
.locale{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.locale a{color:var(--caption,#989898);text-decoration:none}
.locale a[aria-current]{color:var(--text,#111)}
.locale a:hover{text-decoration:underline;text-underline-offset:4px}
.case-header-actions .locale{font-size:20px}
.case-header-actions{gap:24px}
html[lang=ru] .hero-intro-line{white-space:normal}
html[lang=ru] .case-card h2{white-space:normal}
html[lang=ru] .how-capsule{white-space:normal;text-align:center;max-width:90%}
html[lang=ru] .hero-meta{max-width:980px}
/* Reserve separator space in the flex gap. Hiding a line-start bullet must
   not change widths and move the translated label back to the previous row. */
.metadata-row{column-gap:22px}
/* A fixed gap reserves separator space without changing wrapping when hidden. */
.case-meta-row{display:flex;flex-wrap:wrap;column-gap:20px}
.case-meta-item{position:relative;flex:0 0 auto;max-width:100%;overflow-wrap:break-word}
.case-meta-item+.case-meta-item::before{content:'·';position:absolute;left:-13px}
.case-meta-item.line-start::before{visibility:hidden}
.project-meta .case-meta-list{flex-basis:100%}
.case-tags .metadata-row{column-gap:26px}
.metadata-row span+span,.metadata-row span.line-start{padding-left:0}
.metadata-row span+span::before,.hero-meta .metadata-row span+span::before,.case-tags .metadata-row span+span::before{left:-14px}
@media(max-width:1100px){.case-tags .metadata-row{column-gap:22px}}
@media(width > 760px) and (max-width:1000px){
  .portfolio-case .availability{font-size:16px}
  .case-header-actions{gap:16px}
  .case-header-actions .locale,.case-nav{font-size:16px}
  .case-nav{gap:16px}
}
@media(max-width:760px){.case-header-actions .locale{font-size:15px}}
@media(max-width:600px){
  html[lang=ru] .hero h1{font-size:32px;line-height:1.3}
  .case-header-actions .locale{display:none}
  .mobile-case-controls .locale a{color:var(--caption,#989898)}
  .mobile-case-controls .locale a[aria-current]{color:var(--text,#111)}
  .metadata-row,.case-tags .metadata-row{column-gap:24px}
}
@media(max-width:360px){html[lang=ru] .hero h1{font-size:clamp(26px,calc(10vw - 4px),32px)}}
/* Geometric dots sit at the midpoint of each reserved gap and line box. */
.metadata-row{--metadata-gap:22px}
.case-tags .metadata-row{--metadata-gap:26px}
.metadata-row>span{position:relative}
.metadata-row span+span::before,.hero-meta .metadata-row span+span::before,.case-tags .metadata-row span+span::before{
  content:'';position:absolute;width:.18em;height:.18em;top:.5lh;
  left:calc(var(--metadata-gap) * -.5);transform:translate(-50%,-50%);
  border-radius:50%;background:currentColor;margin:0;
}
@media(max-width:1100px){.case-tags .metadata-row{--metadata-gap:22px}}
@media(max-width:600px){.metadata-row,.case-tags .metadata-row{--metadata-gap:24px}}

.numeric-range{white-space:nowrap}

/* Figma1080:63543:64px type at1440, proportional ratios.
   Below720 preserve a readable32px minimum and allow natural reflow. */
@media(min-width:601px){
  html[lang=ru] .hero{--ru-unit:clamp(.5px,.069444444vw,1px)}
  html[lang=ru] .hero h1{font-size:calc(64 * var(--ru-unit));line-height:calc(87 * var(--ru-unit));letter-spacing:.013em}
  html[lang=ru] .hero-intro-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:calc(8.337891 * var(--ru-unit));row-gap:0;white-space:normal}
  html[lang=ru] .hero-person{display:inline-flex;align-items:center;gap:calc(16.662109 * var(--ru-unit));white-space:nowrap}
  html[lang=ru] .hero-role{white-space:nowrap}
  /* The reveal wrapper must not restore the authored desktop line break. */
  html[lang=ru] .hero h1 br{display:none}
  html[lang=ru] .hero-description{display:block;margin-top:calc(8 * var(--ru-unit));text-wrap:wrap}
  html[lang=ru] .hero-photo-slot{width:calc(58 * var(--ru-unit));height:calc(87 * var(--ru-unit));margin:0;flex:none;vertical-align:initial}
  html[lang=ru] .hero-photo-slot img{left:calc(-14.283203 * var(--ru-unit));top:calc(2 * var(--ru-unit));width:calc(85.240234 * var(--ru-unit));height:calc(113.780029 * var(--ru-unit))}
}

/* The minimum type size needs balanced reflow in the narrow tablet range. */
@media(min-width:601px) and (max-width:719px){html[lang=ru] .hero-description{text-wrap:balance}}