@import url("../fonts/onest/onest.css");

/* ==========================================================================
   Sura design system, v2.
   Replaces the flattened OceanWP + Elementor bundle (454 KB) with a
   hand-written system. Everything is driven by the tokens below, so the
   day and night themes never drift apart.
   ========================================================================== */

/* --------------------------------------------------------- 1. Tokens ---- */
:root {
  /* day */
  --surface:     #FFFFFF;
  --surface-alt: #F4F8FB;
  --paper:       #FFFFFF;
  --ink:         #0C2033;
  --ink-soft:    #4A6982;
  --steel:       #1E7DBC;
  --steel-deep:  #10557E;
  --oxide:       #A64B28;
  --line:        #DCE6EE;
  --line-soft:   #EDF2F6;
  --hatch-op:    .30;

  /* Filled surfaces always carry white text; the fill stays dark enough that
     white clears WCAG AA (~5.9:1) in both themes. */
  --fill:    #17699F;
  --link:    #17699F;
  --fill-hi: #10557E;
  --on-fill: #FFFFFF;

  --font:  "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;

  --wrap:  1180px;
  --gut:   clamp(20px, 5vw, 64px);
  --radius: 6px;

  --step: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:     #0B1826;
    --surface-alt: #101F2E;
    --paper:       #0F1F2E;
    --ink:         #E8F0F6;
    --ink-soft:    #9BB4C6;
    --steel:       #4BA3DC;
    --steel-deep:  #7CC2EC;
    --oxide:       #D9784D;
    --line:        #244054;
    --line-soft:   #1A3145;
    --hatch-op:    .38;
    --fill:        #1B6FA8;
    --link:        #4BA3DC;
    --fill-hi:     #2585C4;
  }
}

:root[data-theme="dark"] {
  --surface:     #0B1826;
  --surface-alt: #101F2E;
  --paper:       #0F1F2E;
  --ink:         #E8F0F6;
  --ink-soft:    #9BB4C6;
  --steel:       #4BA3DC;
  --steel-deep:  #7CC2EC;
  --oxide:       #D9784D;
  --line:        #244054;
  --line-soft:   #1A3145;
  --hatch-op:    .38;
  --fill:        #1B6FA8;
  --link:        #4BA3DC;
  --fill-hi:     #2585C4;
}

/* ---------------------------------------------------- 2. Base + type ---- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p { margin: 0; }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; }

/* Digits line up in columns wherever they are compared. */
.s-num, .s-dims b, .s-stat__value, .s-spec b { font-variant-numeric: tabular-nums; }

::selection { background: var(--steel); color: #fff; }

:focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 3px;
  border-radius: 2px;
}

.s-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.s-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oxide);
  margin-bottom: 18px;
}

.s-lede { color: var(--ink-soft); font-size: clamp(16px, 1.5vw, 18px); max-width: 46ch; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.s-skip:focus {
  position: fixed; inset-inline-start: 12px; inset-block-start: 12px;
  z-index: 100; width: auto; height: auto; clip-path: none;
  background: var(--fill); color: var(--on-fill); padding: 10px 16px; border-radius: 4px;
}

/* ------------------------------------------------------- 3. Buttons ----- */
.s-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1.5px solid transparent;
  border-radius: 4px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s var(--step), background-color .15s var(--step), border-color .15s var(--step);
}
.s-btn--primary { background: var(--fill); color: var(--on-fill); }
.s-btn--primary:hover { background: var(--fill-hi); transform: translateY(-1px); }
.s-btn--ghost { border-color: var(--line); color: var(--ink); }
.s-btn--ghost:hover { border-color: var(--steel); transform: translateY(-1px); }

.s-btn__icon {
  width: 15px; height: 15px; flex: none;
  background: currentColor;
  -webkit-mask: var(--dl) center / contain no-repeat;
  mask: var(--dl) center / contain no-repeat;
  --dl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1v9m0 0 3.5-3.5M8 10 4.5 6.5M2 12.5v1A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5v-1'/%3E%3C/svg%3E");
}

.s-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* -------------------------------------------------------- 4. Header ----- */
.s-head {
  position: static;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
}
/* Brand and navigation sit together on the left; the language and theme
   controls are the only things pushed to the right edge. */
.s-head__inner { display: flex; align-items: center; gap: 22px; min-height: 72px; }

.s-brand { display: flex; align-items: center; flex: none; }
/* The supplied logo is solid white (it was drawn for the old dark blue header),
   so it vanishes on a light background. Painting it through a mask lets the one
   asset take the theme's ink colour: dark by day, light by night.
   161x111 native, so 42px tall keeps the exact proportions at 61px wide. */
.s-brand__mark {
  display: block;
  width: 61px;
  height: 42px;
  background: var(--ink);
  -webkit-mask: url("../images/Sura_logo4.png") center / contain no-repeat;
  mask: url("../images/Sura_logo4.png") center / contain no-repeat;
  transition: background-color .15s var(--step);
}

.s-nav { margin-inline-start: 4px; }
.s-lang { margin-inline-start: auto; }
.s-nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.s-nav a {
  display: block; padding: 6px 0;
  font-size: 14.5px; text-decoration: none; color: var(--ink-soft);
  border-bottom: 1.5px solid transparent;
  transition: color .15s var(--step), border-color .15s var(--step);
}
.s-nav a:hover,
.s-nav .current-menu-item > a,
.s-nav .current_page_item > a { color: var(--ink); border-bottom-color: var(--steel); }

/* ---- Продукция dropdown --------------------------------------------- */
.s-nav__has-sub { position: relative; display: flex; align-items: center; gap: 4px; }
.s-nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0;
  background: none; border: 0; border-radius: 5px;
  color: var(--ink-soft); cursor: pointer;
  transition: color .15s var(--step), transform .2s var(--step);
}
.s-nav__has-sub:hover .s-nav__toggle,
.s-nav__toggle:focus-visible { color: var(--ink); }
.s-nav__toggle[aria-expanded="true"] { transform: rotate(180deg); }

.s-nav .s-subnav {
  position: absolute; z-index: 40; inset-block-start: calc(100% + 10px); inset-inline-start: -14px;
  display: grid; gap: 2px;
  min-width: 268px; padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 14px 34px -18px rgb(12 32 51 / .34), 0 2px 6px -2px rgb(12 32 51 / .12);
  list-style: none; margin: 0;
  /* Closed by default; @starting-style makes the open state animate in on
     browsers that support it, and simply appear on those that do not. */
  opacity: 0; transform: translateY(-4px); visibility: hidden;
  transition: opacity .16s var(--step), transform .16s var(--step), visibility .16s;
}
.s-nav .s-nav__has-sub:hover > .s-subnav,
.s-nav .s-nav__has-sub:focus-within > .s-subnav,
.s-nav .s-nav__toggle[aria-expanded="true"] + .s-subnav {
  opacity: 1; transform: translateY(0); visibility: visible;
}
.s-nav .s-subnav a {
  padding: 7px 10px; border-bottom: 0; border-radius: 7px;
  font-size: 13.5px; line-height: 1.35; color: var(--ink-soft);
}
.s-nav .s-subnav a:hover { background: var(--surface-alt); color: var(--ink); border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .s-nav .s-subnav { transition: none; }
  .s-nav__toggle { transition: none; }
}

/* language + theme controls share one visual family */
.s-lang { display: flex; gap: 2px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; margin-inline-start: auto; }
.s-lang button {
  border: 0; background: transparent; font: inherit; cursor: pointer;
  padding: 4px 7px; border-radius: 3px; color: var(--ink-soft);
  transition: color .15s var(--step), background-color .15s var(--step);
}
.s-lang button:hover { color: var(--ink); }
.s-lang button[aria-pressed="true"] { background: var(--fill); color: var(--on-fill); }

/* The i18n plugin injects its switcher into .s-lang; give it this theme's look
   rather than the floating pill it uses when no slot exists. */
.s-lang, .s-lang * { list-style: none; }
.s-lang .sura-language-switcher-item { display: flex; margin: 0; padding: 0; }
.s-lang .sura-language-switcher { display: flex; gap: 2px; background: none; border: 0; padding: 0; box-shadow: none; position: static; backdrop-filter: none; }
.s-lang .sura-language-switcher__button {
  border: 0; background: transparent; font: inherit; cursor: pointer;
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  padding: 4px 7px; border-radius: 3px; color: var(--ink-soft); height: auto; min-width: 0;
  text-decoration: none; opacity: 1;
  transition: color .15s var(--step), background-color .15s var(--step);
}
.s-lang .sura-language-switcher__button:hover { color: var(--ink); background: none; transform: none; }
.s-lang .sura-language-switcher__button.is-active {
  background: var(--fill); color: var(--on-fill); text-decoration: none;
}

.s-theme {
  display: inline-flex; align-items: center; gap: 1px; flex: none;
  padding: 2px; border: 1px solid var(--line); border-radius: 100px;
  cursor: pointer; /* нажимается вся пилюля, включая рамку и промежуток */
}
.s-theme button {
  display: grid; place-items: center;
  width: 28px; height: 24px; padding: 0;
  border: 0; border-radius: 100px; background: transparent;
  color: var(--ink-soft); cursor: pointer;
  transition: color .15s var(--step), background-color .15s var(--step);
}
.s-theme button:hover { color: var(--ink); }
.s-theme button.is-on { background: var(--fill); color: var(--on-fill); }
.s-theme svg { display: block; }

.s-burger {
  display: none; flex: none;
  width: 42px; height: 38px; padding: 0;
  border: 1px solid var(--line); border-radius: 4px;
  background: transparent; color: var(--ink); cursor: pointer;
}

/* --------------------------------------------------------- 5. Hero ------ */
.s-hero { padding: clamp(28px, 3.6vw, 46px) 0 clamp(22px, 2.8vw, 34px); }
.s-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
.s-hero__title { font-size: clamp(32px, 5vw, 56px); }
.s-hero__title em { font-style: normal; color: var(--steel); }
.s-hero__copy .s-lede { margin-top: 22px; }

/* technical drawing */
.s-figure { margin: 0; display: grid; place-items: center; }
.s-figure svg { width: 100%; max-width: 430px; height: auto; overflow: visible; }
.s-fig__hatch { stroke: var(--steel); stroke-width: .7; opacity: var(--hatch-op); }
.s-fig__outer { fill: none; stroke: var(--steel); stroke-width: 2.4; }
.s-fig__inner { fill: var(--surface); stroke: var(--steel-deep); stroke-width: 1.7; }
.s-fig__dim   { stroke: var(--ink-soft); stroke-width: .9; fill: none; }
.s-fig__arrow { fill: var(--ink-soft); }
.s-fig__label { font-family: var(--mono); font-size: 12px; fill: var(--ink-soft); }
.s-fig__axis line {
  stroke: var(--ink-soft); stroke-width: .7;
  stroke-dasharray: 20 3.5 2.5 3.5; opacity: .85;
}

/* -------------------------------------------------------- 6. Strip ------ */
.s-strip { background: var(--surface-alt); border-block: 1px solid var(--line); }
.s-strip__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.s-stat {
  display: grid; gap: 5px;
  padding: 20px 0 20px 22px;
  border-inline-start: 1px solid var(--line);
}
.s-stat:first-child { border-inline-start: 0; padding-inline-start: 0; }
.s-stat__label { font-size: 12.5px; color: var(--ink-soft); }
.s-stat__value { font-size: clamp(20px, 2.3vw, 26px); font-weight: 700; letter-spacing: -0.02em; }
.s-stat__value small { font-size: 14px; font-weight: 500; color: var(--ink-soft); }

/* ------------------------------------------------------ 7. Sections ----- */
.s-section { padding: clamp(28px, 3.2vw, 42px) 0; }
.s-section--alt { background: var(--surface-alt); border-block: 1px solid var(--line-soft); }
.s-section__head { max-width: 62ch; margin-bottom: clamp(16px, 1.9vw, 24px); }
.s-section__head h2 { font-size: clamp(25px, 3.2vw, 36px); }
.s-section__head p { margin-top: 14px; color: var(--ink-soft); max-width: 58ch; }

/* material families */
/* Bordered cards rather than a gap-and-background grid: with 4 cards in a
   3-column row the old trick painted the grid's own background into the empty
   trailing cell, which read as a large blank block. */
.s-families {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}
/* Seven material groups. Seven is prime, so some row is always short; four
   columns gives 4 + 3, where auto-fit's three columns would give 3 + 3 + 1 and
   strand a single card beside two empty cells. */
@media (min-width: 1080px) {
  .s-families { grid-template-columns: repeat(4, 1fr); }
}
.s-family {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s var(--step), transform .18s var(--step), background-color .18s var(--step);
}
.s-family:hover {
  border-color: var(--steel);
  background: color-mix(in srgb, var(--steel) 4%, var(--paper));
  transform: translateY(-2px);
}
.s-family h3 { transition: color .15s var(--step); }
.s-family:hover h3 { color: var(--steel); }
.s-family h3 { font-size: 17px; }
.s-family__std { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); line-height: 1.55; }
.s-grades { display: flex; flex-wrap: wrap; gap: 6px; }
.s-grades span {
  font-family: var(--mono); font-size: 11px;
  padding: 3px 8px; border: 1px solid var(--line);
  border-radius: 3px; color: var(--ink-soft);
}
.s-dims {
  display: flex; gap: 20px; margin-top: auto;
  padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink-soft);
}
.s-dims b { display: block; font-size: 15px; color: var(--ink); font-weight: 600; }

/* simple cards */
.s-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.s-card {
  display: block;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
  text-decoration: none; color: inherit;
  transition: border-color .18s var(--step), transform .18s var(--step), background-color .18s var(--step);
}
.s-card:hover {
  border-color: var(--steel);
  background: color-mix(in srgb, var(--steel) 4%, var(--paper));
  transform: translateY(-2px);
}
.s-card h3 { font-size: 17px; margin-bottom: 10px; transition: color .15s var(--step); }
.s-card:hover h3 { color: var(--steel); }
.s-card p { color: var(--ink-soft); font-size: 14.5px; }

/* closing call to action */
.s-cta { background: var(--surface-alt); border-block: 1px solid var(--line); padding: clamp(24px, 2.8vw, 36px) 0; }
.s-cta__inner { display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.s-cta h2 { font-size: clamp(21px, 2.6vw, 28px); }
.s-cta p { color: var(--ink-soft); margin-top: 8px; max-width: 54ch; }
.s-cta .s-actions { margin-top: 0; }

/* -------------------------------------------------------- 8. Footer ----- */
.s-foot { background: #0C2033; color: #DCE8F0; padding: clamp(32px, 3.8vw, 48px) 0 24px; }
.s-foot__grid { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.s-foot h3 {
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #7FA3BC; margin-bottom: 13px;
}
.s-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; }
.s-foot a { color: #DCE8F0; text-decoration: none; }
.s-foot a:hover { text-decoration: underline; }
.s-foot__note {
  margin-top: 34px; padding-top: 19px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: 13px; color: #7FA3BC;
}

/* ------------------------------------------------- 9. Scroll to top ----- */
.s-top {
  position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 25;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--paper); color: var(--ink); cursor: pointer;
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--step), visibility .25s var(--step), border-color .15s var(--step);
}
.s-top.is-shown { opacity: 1; visibility: visible; }
.s-top:hover { border-color: var(--steel); }

/* ------------------------------------------------------- 10. Motion ----- */
/* Sections rise gently into view. Decorative only, so no JS fallback. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (animation-range: entry 0% entry 40%) {
    .s-section, .s-cta, .s-strip {
      animation: s-rise ease both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    @keyframes s-rise { from { opacity: .001; transform: translateY(14px); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------- 11. Responsive ---- */
@media (max-width: 900px) {
  .s-hero__grid { grid-template-columns: 1fr; }
  .s-figure { order: -1; max-width: 340px; }
}

@media (max-width: 820px) {
  /* На телефоне шапка едет вместе со страницей вниз и возвращается, стоит
     двинуться вверх: экран узкий, и постоянно занятые 72px дороже, чем один
     жест. Sticky, а не fixed — место в потоке сохраняется, ничего не прыгает. */
  .s-head { position: sticky; top: 0; z-index: 60; transition: transform .25s ease; }
  .s-head.is-tucked { transform: translateY(-100%); }
  /* Открытое меню и поиск живут внутри шапки — прятать её в этот момент нельзя. */
  body.s-menu-open .s-head, body.s-search-open .s-head { transform: none; }
  .s-burger { display: grid; place-items: center; margin-inline-start: auto; }
  .s-nav { order: 10; width: 100%; margin-inline-start: 0; display: none; }
  body.s-menu-open .s-nav { display: block; }
  .s-nav ul { flex-direction: column; gap: 0; padding-block: 8px; }
  .s-nav a { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }

  /* In the burger menu the dropdown expands inline. Left floating, it covers
     Инновации, Публикации and Контакты — the items directly beneath it. */
  .s-nav a { text-align: center; }
  /* The caret is taken out of the flow so the label centres against the whole
     row. In a two-column grid it would centre against the column instead, and
     Продукция would sit visibly left of every other item. */
  .s-nav__has-sub { position: relative; display: block; }
  .s-nav__toggle {
    position: absolute; inset-inline-end: 0; inset-block-start: 0;
    width: 44px; height: 44px;
  }
  .s-nav .s-subnav {
    grid-column: 1 / -1;
    /* display:none rather than visibility, or a closed dropdown would still
       reserve its full height in the flow and push the menu apart. */
    display: none; position: static; min-width: 0; margin: 0 0 8px;
    box-shadow: none; background: var(--surface-alt);
    opacity: 1; transform: none; visibility: visible;
  }
  .s-nav .s-subnav a { padding: 10px 12px; border-bottom: 0; }
  /* Hover does not exist on touch, so only the caret opens it here. */
  .s-nav .s-nav__has-sub:hover > .s-subnav,
  .s-nav .s-nav__has-sub:focus-within > .s-subnav { display: none; }
  .s-nav .s-nav__toggle[aria-expanded="true"] + .s-subnav { display: grid; }
  /* ---- header: logo left; theme, search, burger right, in that order ----
     Source order is brand, burger, nav, search, lang, theme — chosen for the
     desktop layout and for the tab order. Flex `order` rearranges the row on
     small screens without moving anything in the markup. */
  .s-head__inner { flex-wrap: wrap; gap: 10px; padding-block: 10px; }
  .s-brand        { order: 0; margin-inline-end: auto; }
  .s-theme        { order: 1; }
  .s-searchtoggle { order: 2; }
  .s-burger       { order: 3; margin-inline-start: 0; }
  .s-nav          { order: 10; }

  /* The language switcher belongs in the menu on mobile: three more controls
     on the top row crowds it, and the row wrapped to two lines. It cannot be
     reparented in CSS, so it is hidden until the burger opens and then shown
     directly beneath the navigation — which is where it reads as being. */
  .s-lang {
    order: 11; display: none;
    width: 100%; margin-inline-start: 0;
    justify-content: center; gap: 6px;
    padding-block: 12px 4px;
  }
  body.s-menu-open .s-lang { display: flex; }
  .s-lang button { min-width: 54px; padding: 9px 14px; }

  /* ---- everything centred ------------------------------------------- */
  .s-hero__copy,
  .s-page-head,
  .s-section__head,
  .s-cta__inner { text-align: center; }
  .s-hero__copy .s-lede,
  .s-page-head .s-lede,
  .s-section__head p { margin-inline: auto; }

  .s-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .s-actions .s-btn { width: 100%; max-width: 320px; justify-content: center; }

  .s-cta__inner { flex-direction: column; align-items: center; }

  .s-stat { padding-inline-start: 0; border-inline-start: 0; text-align: center; }
  .s-strip__grid { text-align: center; }
  .s-stat__label, .s-stat__value { justify-content: center; }
}

/* ==========================================================================
   12. Inner pages
   ========================================================================== */

/* page header band */
.s-page-head {
  padding: clamp(24px, 2.9vw, 38px) 0 clamp(18px, 2vw, 26px);
  border-bottom: 1px solid var(--line-soft);
}
.s-page-head h1 { font-size: clamp(28px, 4.2vw, 46px); }
.s-page-head .s-lede { margin-top: 18px; max-width: 60ch; }

/* running text */
.s-prose { max-width: 68ch; display: grid; gap: 18px; color: var(--ink); }
/* When .s-prose is also the page container, the wrap's auto margins would
   centre the 68ch column in the viewport. Keep the container full width and
   constrain its children instead, so text stays aligned with the headings. */
.s-wrap.s-prose { max-width: var(--wrap); }
.s-wrap.s-prose > * { max-width: 68ch; }
.s-prose p { text-wrap: pretty; }
.s-prose--after { margin-top: 24px; }
.s-h3 { font-size: 19px; margin-top: 10px; }
.s-list { margin: 0; padding-inline-start: 22px; display: grid; gap: 10px; }
.s-list li { text-wrap: pretty; }
.s-note-inline {
  font-size: 14px; color: var(--ink-soft);
  border-inline-start: 2px solid var(--line);
  padding-inline-start: 14px;
}

/* supply matrix (О нас) */
.s-supply { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 14px; }
.s-supply__item {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; display: grid; gap: 10px; align-content: start;
}
.s-supply__item h3 { font-size: 16px; }
.s-supply__std { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); line-height: 1.6; }

/* director — now a section inside О нас */
.s-bio { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(26px, 4vw, 52px); align-items: start; }
.s-bio__name { font-size: clamp(21px, 2.4vw, 26px); letter-spacing: -.015em; margin: 0; }
.s-bio__role { color: var(--ink-soft); margin: 6px 0 0; }
.s-bio__body > .s-bio__role { margin-top: -18px; }
.s-bio__portrait { margin: 0; }
.s-bio__portrait img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); display: block; }
.s-bio__body { display: grid; gap: 26px; }
.s-facts { margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.s-facts > div { background: var(--paper); padding: 14px 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.s-facts dt { color: var(--ink-soft); font-size: 14px; }
.s-facts dd { margin: 0; font-weight: 600; }

/* contacts */
.s-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 32px; }
.s-contacts__title { font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.s-contacts__title + .s-contacts__list + .s-contacts__title { margin-top: 26px; }
.s-contacts__list { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 8px; font-size: 17px; }
.s-contacts__list a { text-decoration: none; }
.s-contacts__list a:hover { color: var(--steel); }
.s-contacts__addr { font-style: normal; line-height: 1.7; color: var(--ink); }

.s-maps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.s-map { margin: 0; display: grid; gap: 10px; }
.s-map__cap { font-size: 13.5px; color: var(--ink-soft); order: 2; }
.s-map iframe { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius); display: block; }

/* products page */
.s-prod { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.s-prod__nav { position: sticky; top: 20px; }
.s-prod__navtitle { font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin-bottom: 12px; }
.s-prod__nav ul { list-style: none; margin: 0; padding: 0; display: grid; }
.s-prod__nav a {
  display: block; text-decoration: none; font-size: 14px; padding: 8px 0 8px 13px;
  color: var(--ink-soft); border-inline-start: 2px solid var(--line);
  transition: color .15s var(--step), border-color .15s var(--step);
}
.s-prod__nav a:hover { color: var(--ink); border-inline-start-color: var(--steel); }
/* Scrollspy: the group being read is marked as the reader moves down the page.
   Set by ui.js; without JS the list is still a plain set of anchor links. */
.s-prod__nav a.is-current {
  color: var(--ink); font-weight: 600;
  border-inline-start-color: var(--steel);
  background: linear-gradient(90deg, var(--surface-alt), transparent 70%);
}

.s-stock {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--surface-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 24px; margin-bottom: 36px;
}
.s-stock > div { flex: 1 1 240px; }
.s-stock h2 { font-size: 17px; margin-bottom: 4px; }
.s-stock p { font-size: 13.5px; color: var(--ink-soft); }

.s-matgroup { margin-bottom: 32px; scroll-margin-top: 20px; }
.s-matgroup__title {
  font-size: 13px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--oxide); font-weight: 700;
  padding-bottom: 10px; border-bottom: 2px solid var(--line);
}
.s-matgroup__note { font-size: 14px; color: var(--ink-soft); margin-top: 12px; }
.s-item { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.s-item__head { display: flex; gap: 14px; align-items: baseline; }
.s-item__idx { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); flex: none; min-width: 2ch; }
.s-item h3 { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.s-item__std { font-family: var(--mono); font-size: 12px; color: var(--steel-deep); margin-top: 5px; }
.s-spec {
  display: flex; flex-wrap: wrap; gap: 12px 30px; margin: 14px 0 0 calc(14px + 2ch);
  padding: 11px 16px; background: var(--surface-alt); border-radius: 4px; width: fit-content;
}
.s-spec > div { display: grid; gap: 2px; }
.s-spec dt { font-size: 12px; color: var(--ink-soft); }
.s-spec dd { margin: 0; font-size: 15px; font-weight: 600; }

/* anodes: advantages, comparison, price table */
.s-advantages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.s-adv { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 10px; align-content: start; }
.s-adv__figure { font-size: 26px; font-weight: 700; color: var(--steel); letter-spacing: -0.02em; }
.s-adv p { font-size: 14.5px; color: var(--ink-soft); }
.s-adv b { color: var(--ink); }

.s-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; margin: 6px 0; }
.s-compare__side { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--paper); }
.s-compare__side--ours { border-color: var(--steel); }
.s-compare__side h3 { font-size: 16px; margin-bottom: 8px; }
.s-compare__spec { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; }
.s-compare dl { margin: 0; display: grid; gap: 8px; }
.s-compare dl > div { display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.s-compare dt { font-size: 13.5px; color: var(--ink-soft); }
.s-compare dd { margin: 0; font-weight: 700; }

.s-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.s-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.s-table th, .s-table td { padding: 11px 16px; text-align: start; }
.s-table thead th { background: var(--surface-alt); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.s-table tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.s-table tbody tr:hover td { background: color-mix(in srgb, var(--steel) 4%, transparent); }

/* emulgator */
.s-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.s-benefit { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.s-benefit h3 { font-size: 16px; margin-bottom: 10px; }
.s-benefit p { font-size: 14.5px; color: var(--ink-soft); text-wrap: pretty; }

.s-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.s-gallery figure { margin: 0; }
.s-gallery img {
  width: 100%; height: 100%; object-fit: contain;
  background: var(--surface-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px; display: block;
}

/* inline CTA reused across inner pages */
.s-cta--inline {
  margin-top: 28px; padding: 22px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface-alt);
  display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.s-cta--inline h2 { font-size: 19px; }
.s-cta--inline p { color: var(--ink-soft); font-size: 14.5px; margin-top: 6px; }
.s-cta--inline .s-actions { margin-top: 0; }

.s-cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

@media (max-width: 900px) {
  .s-prod, .s-bio { grid-template-columns: 1fr; }
  .s-prod__nav { position: static; }
  .s-prod__nav ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .s-prod__nav a { border-inline-start: 0; border: 1px solid var(--line); border-radius: 100px; padding: 7px 13px; }
  /* width: 100% обязательна: auto-поля делают элемент grid сжатым по
     содержимому, а картинка внутри задана в процентах — портрет схлопывался. */
  .s-bio__portrait { width: 100%; max-width: 300px; margin-inline: auto; }
}
@media (max-width: 620px) {
  .s-spec { margin-inline-start: 0; }
  /* На телефоне две пилюли в первой строке и по одной дальше читались как
     сбой вёрстки. Одна колонка, ширина по содержимому — не растягиваются. */
  .s-prod__nav ul { display: grid; grid-template-columns: 1fr; justify-items: start; }
}

/* ==========================================================================
   13. Publications
   ========================================================================== */
.s-pubpage { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: start; }

.s-author { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; position: sticky; top: 20px; }
.s-author__portrait { width: 100%; border-radius: 4px; display: block; margin-bottom: 15px; border: 1px solid var(--line-soft); }
.s-author__name { font-size: 17.5px; }
.s-author__role { color: var(--ink-soft); font-size: 13.5px; margin-top: 7px; }
.s-author__facts { margin: 15px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); display: grid; gap: 8px; }
.s-author__facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.s-author__facts dt { color: var(--ink-soft); }
.s-author__facts dd { margin: 0; font-weight: 600; }
.s-author__more { margin-top: 14px; font-size: 14px; }
.s-author__more a { color: var(--link); }

.s-pub-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.s-chip {
  font: inherit; font-size: 13px; padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 100px;
  color: var(--ink-soft); background: transparent; cursor: pointer;
  transition: border-color .15s var(--step), color .15s var(--step), background-color .15s var(--step);
}
.s-chip:hover { border-color: var(--steel); color: var(--ink); }
.s-chip[aria-pressed="true"] { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }

.s-pub {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px;
  padding: 20px 0; border-top: 1px solid var(--line-soft);
}
.s-pub:last-child { border-bottom: 1px solid var(--line-soft); }
.s-pub[hidden] { display: none; }
.s-pub__title { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.s-pub__venue { margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.s-pub__venue--alt { margin-top: 4px; }
.s-pub__pending { font-style: italic; color: color-mix(in srgb, var(--oxide) 80%, var(--ink-soft)); }
.s-pub__doi { margin-top: 6px; font-family: var(--mono); font-size: 12px; }
.s-pub__doi a { color: var(--link); text-decoration: none; }
.s-pub__doi a:hover { text-decoration: underline; }
.s-pub__abstract { margin-top: 10px; font-size: 14px; color: var(--ink-soft); max-width: 70ch; text-wrap: pretty; }
.s-pub__tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.s-tag {
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600;
  padding: 2px 7px; border-radius: 3px;
  background: color-mix(in srgb, var(--steel) 13%, transparent); color: var(--steel-deep);
}
.s-tag--topic { background: color-mix(in srgb, var(--oxide) 12%, transparent); color: var(--oxide); text-transform: none; letter-spacing: 0; }

.s-pub__side { display: grid; gap: 10px; justify-items: end; align-content: start; }
.s-pub__year { font-family: var(--mono); font-size: 13px; color: var(--oxide); font-weight: 600; }
.s-pub__pdf {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; text-decoration: none; color: var(--steel-deep);
  border: 1px solid var(--line); border-radius: 4px; padding: 8px 13px; white-space: nowrap;
  transition: border-color .15s var(--step), background-color .15s var(--step);
}
.s-pub__pdf:hover { border-color: var(--steel); background: color-mix(in srgb, var(--steel) 8%, transparent); }
/* An external link sits beside the PDF button, quieter than it — the file is
   the thing we host, the link is where the paper actually lives. */
.s-pub__link {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 8px; padding: 7px 13px;
  font-size: 13px; text-decoration: none; white-space: nowrap;
  color: var(--link); border: 1px solid var(--line); border-radius: 8px;
  transition: border-color .15s var(--step), background .15s var(--step);
}
.s-pub__link:hover { border-color: var(--steel); background: color-mix(in srgb, var(--steel) 8%, transparent); }
.s-pub__empty { color: var(--ink-soft); }

@media (max-width: 900px) {
  .s-pubpage { grid-template-columns: 1fr; }
  .s-author { position: static; }
  .s-author__portrait { max-width: 260px; margin-inline: auto; }
}
@media (max-width: 620px) {
  .s-pub { grid-template-columns: 1fr; }
  .s-pub__side { justify-items: start; }
}

/* ==========================================================================
   14. Search
   ========================================================================== */
.s-results { display: grid; gap: 14px; }
.s-result {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s var(--step), transform .18s var(--step), background-color .18s var(--step);
}
.s-result:hover {
  border-color: var(--steel);
  background: color-mix(in srgb, var(--steel) 4%, var(--paper));
  transform: translateY(-2px);
}
.s-result__title { font-size: 17px; font-weight: 700; transition: color .15s var(--step); }
.s-result:hover .s-result__title { color: var(--steel); }
.s-result__excerpt { margin-top: 8px; font-size: 14.5px; color: var(--ink-soft); text-wrap: pretty; }
.s-result__more {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 600; color: var(--link);
}
.s-results__note { color: var(--ink-soft); max-width: 70ch; text-wrap: pretty; }

.s-searchform { display: flex; gap: 10px; flex-wrap: wrap; max-width: 620px; }
.s-searchform__field {
  flex: 1 1 260px;
  font: inherit; font-size: 15px;
  padding: 12px 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color .15s var(--step);
}
.s-searchform__field::placeholder { color: var(--ink-soft); opacity: .8; }
.s-searchform__field:focus-visible { border-color: var(--steel); outline-offset: 1px; }
.s-searchagain__title { font-size: 17px; margin-bottom: 14px; }

/* The header magnifier reveals the same form inline. */
.s-searchtoggle {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: none;
  padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: color .15s var(--step), background-color .15s var(--step);
}
.s-searchtoggle:hover { color: var(--ink); background: var(--surface-alt); }
.s-searchtoggle[aria-expanded="true"] { color: var(--on-fill); background: var(--fill); }

.s-headsearch {
  display: none;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-alt);
}
body.s-search-open .s-headsearch { display: block; }
.s-headsearch .s-searchform { max-width: none; padding-block: 14px; }

@media (prefers-reduced-motion: reduce) {
  .s-head { transition: none; }
}