/* Home: four screens — who we are, the journals, the books, how to reach us.
 *
 * The colours are the old radiotec.ru: a deep petrol bar, a steel-blue band and
 * a pale low-poly mesh behind the wordmark (tokens.css, --brand-*; the mesh is
 * static/js/mesh.js). On a large display each screen fills the window and one
 * scroll moves to the next (CSS scroll snap); on phones it is an ordinary page.
 */

:root { --header-h: 65px; }  /* measured by the page script */
html, body { overflow-x: clip; }
html:has(.home) { scroll-padding-top: var(--header-h); }  /* anchors land below the sticky header */
body:has(.home) .site-footer { margin-top: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Screens ────────────────────────────────────────────────────────── */

.screen {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  padding-block: var(--space-2xl);
}
.screen__inner { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: var(--space-xl); }

.screen__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-xs) var(--space-lg);
}
.screen__title {
  grid-column: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.screen__lede { grid-column: 1; margin: 0; max-width: 60ch; text-wrap: pretty; font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); }
.screen__more {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  white-space: nowrap;
}
/* a plain text link; a pill link (stand.css) keeps its own colours and spacing */
.screen__more:not(.pill-link) { gap: var(--space-xs); min-height: var(--target-min); color: var(--color-accent); }
.screen__more:not(.pill-link) span { transition: transform var(--dur-short) var(--ease-out); }
.screen__more:not(.pill-link):hover span, .screen__more:not(.pill-link):focus-visible span { transform: translateX(var(--space-2xs)); }
@media (max-width: 40rem) {
  .screen__head { grid-template-columns: minmax(0, 1fr); }
  .screen__more { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* the round "next" button at the bottom of the first screen */
.screen__next {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: var(--space-lg);
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: var(--target-min);
  height: var(--target-min);
  border: 1px solid var(--color-rule-cover);
  border-radius: 50%;
  color: var(--color-ink-2);
}
.screen__next span {
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  animation: nudge 2.4s var(--ease-in-out) infinite;
}
.screen__next:hover { color: var(--color-ink); border-color: var(--color-ink-2); }
@keyframes nudge { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 4px; } }

/* ── 1. Who we are ──────────────────────────────────────────────────── */

/* As on the old site: a petrol band with the mesh and the wordmark, a thin
   steel-blue line, then a light field for search and the two tiles. The band
   ends --band-pad below the wordmark (--band-h is measured by the page script). */
.hero {
  --band-pad: 2.5rem;  /* 5.5rem on wide screens, where the tiles rise into the band */
  --band: calc(var(--band-h, 18rem) + var(--band-pad));
  overflow: hidden;
  color: var(--color-ink);
  background:
    linear-gradient(to bottom,
      transparent var(--band),
      var(--brand) var(--band), var(--brand) calc(var(--band) + 4px),
      var(--brand-mist) calc(var(--band) + 4px)),
    radial-gradient(120% 90% at 85% 0%, var(--brand-deep-2), transparent 65%),
    var(--brand-deep);
  padding-bottom: calc(var(--space-2xl) + var(--space-xl));
}
/* the mesh fills the band only, fading towards the left */
.hero__mesh {
  height: var(--band);
  -webkit-mask-image: linear-gradient(100deg, transparent 8%, #000 50%);
  mask-image: linear-gradient(100deg, transparent 8%, #000 50%);
}

.hero__wrap { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--band-pad) + var(--space-xl)); }
.hero__inner { display: grid; gap: var(--space-2xl); align-items: center; }
@media (min-width: 60rem) { .hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

/* the old lockup: the bat, then ИЗДАТЕЛЬСТВО over a full-width РАДИОТЕХНИКА */
.hero__brand { display: flex; align-items: center; gap: clamp(var(--space-md), 2.5vw, var(--space-xl)); }
.hero__mark { flex: none; width: clamp(7rem, 15vw, 12rem); height: auto; filter: brightness(0) invert(1); }
.hero__wordmark { flex: 1; min-width: 0; margin: 0; }
.hero__wordmark img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }  /* the old petrol drawing, in white */
@media (max-width: 40rem) {
  .hero__brand { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .hero__wordmark { width: 100%; }
}

.hero__lede { max-width: 44ch; margin: 0; font-family: var(--font-display); font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.375rem); line-height: 1.5; color: var(--color-ink); text-wrap: pretty; }
/* the name in the accent, the two things we make underlined with a marker stroke */
.hero__name { font-weight: 600; color: var(--color-accent-fg); white-space: nowrap; }
.hero__lede mark {
  padding: 0 0.12em;
  margin: 0 -0.12em;
  color: inherit;
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--brand) 34%, transparent) 58%, color-mix(in srgb, var(--brand) 34%, transparent) 92%, transparent 92%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* the old site's white search field on the blue band */
.hero-search {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: #fff;
  color: #4a6670;
  box-shadow: 0 0 0 1px var(--color-rule), 0 14px 34px -16px rgb(16 50 60 / 0.35);
}
.hero-search:focus-within { box-shadow: 0 0 0 3px var(--brand), 0 14px 34px -16px rgb(16 50 60 / 0.35); }
.hero-search svg { flex: none; }
.hero-search input {
  flex: 1;
  min-width: 0;
  min-height: var(--target-min);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-lead);
  color: #12313b;
}
.hero-search input:focus { outline: none; }
.hero-search input::placeholder { color: #6b858e; }
.hero-search button {
  min-height: var(--target-min);
  padding: 0 var(--space-lg);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand-tile);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.hero-search button:hover { background: var(--brand-tile-hover); }
[data-theme="dark"] .hero-search { background: #0a1a1f; color: var(--on-brand-2); border: 1px solid rgb(255 255 255 / 0.14); }
[data-theme="dark"] .hero-search input { color: #fff; }
[data-theme="dark"] .hero-search input::placeholder { color: #7f9ea8; }

/* ── The search pill ────────────────────────────────────────────────────
   Folded: a small brand-blue pill, "find an article or a book". Pressed: the
   pill unrolls to full width and turns white, the hint types itself, "Найти"
   fades in. */
.hero-search {
  position: relative;
  width: min(100%, 32rem);
  transition:
    width 0.5s var(--ease-out),
    background-color 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease,
    scale 0.45s var(--press-spring, ease-out);
}
.hero-search__icon { position: relative; z-index: 1; transition: transform 0.4s var(--ease-out), color 0.35s ease; }
.hero-search input { transition: opacity 0.3s ease 0.2s, translate 0.45s var(--ease-out) 0.15s; }
.hero-search .hero-search__go { transition: opacity 0.25s ease 0.3s, scale 0.35s var(--ease-out) 0.25s, background-color var(--dur-micro) var(--ease-out); }

.hero-search .hero-search__open {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0 var(--space-lg) 0 calc(var(--space-md) + 18px + var(--space-sm));
  border-radius: inherit;
  background: none;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.2s ease, translate 0.3s var(--ease-out);
}
.hero-search .hero-search__open:hover { background: none; }
.hero-search .hero-search__open:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.hero-search.is-closed,
[data-theme="dark"] .hero-search.is-closed {
  width: 17.5rem;
  background: var(--brand-tile);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 30px -16px rgb(6 30 38 / 0.6);
}
.hero-search.is-closed:hover { background: var(--brand-tile-hover); }
.hero-search.is-closed input { opacity: 0; translate: 1.5rem 0; pointer-events: none; transition-delay: 0s; }
.hero-search.is-closed .hero-search__go { opacity: 0; scale: 0.6; pointer-events: none; transition-delay: 0s; }
.hero-search.is-closed .hero-search__icon { transform: rotate(-12deg); }
.hero-search:not(.is-closed) .hero-search__open { opacity: 0; translate: -1rem 0; pointer-events: none; }
/* the pill itself sinks when pressed (press.css handles the buttons) */
.hero-search.is-closed:has(.hero-search__open:active, .hero-search__open.is-pressed) { scale: 0.96; filter: brightness(0.94); }
.hero-search .hero-search__open:is(:active, .is-pressed) { scale: none; filter: none; }


@media (prefers-reduced-motion: reduce) {
  .hero-search, .hero-search input, .hero-search .hero-search__go, .hero-search .hero-search__open, .hero-search__icon { transition-duration: 0s; transition-delay: 0s; }
}


@media (max-width: 40rem) {
      }

/* the two big tiles of the old site */
/* the two square tiles of the old site: the name in bold capitals over a
   big white book; they stand on the line, half in the band */
.hero__doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
@media (min-width: 60rem) {
  /* Two rows: the band (a little over half the screen) with the lockup in its
     middle, then the light field. The tiles stand on the line between them,
     a good third of them up in the band, so the right side is theirs. */
  .screen.hero { align-items: stretch; padding-top: 0; padding-bottom: 0; }
  .hero { --band-pad: 0px; }
  .hero__wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(auto, 54fr) minmax(auto, 46fr);
    column-gap: var(--space-2xl);
    row-gap: 0;
  }
  .hero__brand { grid-column: 1 / -1; align-self: center; padding-block: var(--space-2xl); }
  .hero__inner { display: contents; }
  .hero__text { grid-column: 1; grid-row: 2; align-self: center; padding-block: var(--space-xl) calc(var(--space-2xl) + var(--space-lg)); }
  .hero__doors {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    width: min(100%, 33rem);
    padding-block: var(--space-xl) calc(var(--space-2xl) + var(--space-lg));
  }
  .door { border-radius: 26px; }
  .door__title { font-size: clamp(1.125rem, 0.6rem + 0.9vw, 1.5rem); }
}
@media (min-width: 60rem) and (max-height: 820px) {
  /* short screens: band and field share the height, and the "next" button goes */
  .hero__wrap { grid-template-rows: minmax(auto, 1fr) minmax(auto, 1fr); }
  .hero__brand { padding-block: var(--space-xl); }
  .hero__text, .hero__doors { padding-bottom: var(--space-xl); }
  .hero__doors { padding-top: var(--space-lg); }
  .hero .screen__next { display: none; }
}
/* A tile: the name and how many there are at the top left, and a fan of three
   real covers rising from the lower edge, cut off by it. Pointed at, the fan
   opens and the middle cover rises. */
.door {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  aspect-ratio: 1;
  padding: var(--space-lg) var(--space-lg) 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: 22px;
  background: radial-gradient(90% 70% at 50% 110%, rgb(255 255 255 / 0.14), transparent 70%), var(--brand-tile);
  color: #fff;
  box-shadow: 0 24px 40px -22px rgb(6 30 38 / 0.6), 0 8px 14px -10px rgb(6 30 38 / 0.35);
  transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
  container-type: inline-size;
}
.door:hover { color: #fff; background-color: var(--brand-tile-hover); }  /* only darkens: the covers are what moves */
.door:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.door__title {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 0.75rem + 0.75vw, 1.375rem);
  font-weight: 700;
  line-height: 1;
}

/* the fan: three covers on one pivot below the tile */
.door__fan { position: absolute; inset: auto 0 0; height: 70%; pointer-events: none; }
.door__cover {
  --spread: 13deg;
  --rot: calc((var(--k) - 1) * var(--spread));
  position: absolute;
  left: 50%;
  bottom: -16cqi;
  width: 50cqi;
  aspect-ratio: 300 / 410;
  margin-left: -25cqi;
  transform-origin: 50% 175%;
  rotate: var(--rot);
  translate: 0 calc(var(--lift, 0) * -1);
  border-radius: 3px;
  overflow: hidden;
  background: #e8eef0;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 10px 22px -8px rgb(4 20 26 / 0.55);
  /* soft, no overshoot: a long ease-out, the outer covers a touch behind the middle one */
  transition: rotate 0.9s cubic-bezier(0.22, 1, 0.36, 1), translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.door__cover:not(:nth-child(2)) { transition-delay: 40ms; }
.door__cover:nth-child(2) { z-index: 1; --lift: 0px; }
.door__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.door:hover .door__cover, .door:focus-visible .door__cover { --spread: 19deg; }
.door:hover .door__cover:nth-child(2), .door:focus-visible .door__cover:nth-child(2) { --lift: 5cqi; }

/* without three covers: the old site's pictures */
.door:has(.door__icon) { align-items: center; justify-content: center; padding-bottom: var(--space-lg); }
.door__icon { height: 40cqi; width: auto; max-width: 80%; margin-top: auto; margin-bottom: auto; overflow: visible; }
.door__icon .page { fill: #fff; }
.door__icon .edge { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* on arrival the fan opens once out of a stack (home.html takes .is-folded off
   a moment after load). It is the same transition a hover runs, not a separate
   animation, so a pointer arriving halfway just turns it smoothly */
.door.is-folded .door__cover { rotate: 0deg; translate: 0 18cqi; transition: none; }
.door.is-opening .door__cover { transition-delay: calc(var(--k) * 60ms); }

/* the first screen arrives once, on load */
@media (prefers-reduced-motion: no-preference) {
  .hero__brand, .hero__text > *, .hero__doors > * { animation: rise 0.9s var(--ease-out) both; }
  .hero__lede { animation-delay: 80ms; }
  .hero-search { animation-delay: 160ms; }
    .hero__doors > :nth-child(1) { animation-delay: 220ms; }
  .hero__doors > :nth-child(2) { animation-delay: 320ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

/* ── 2–3. Journals and new books: stands of covers ─────────────────── */

/* The journals: as on the first screen, a petrol band with the light mesh
   under the title and the pill, a thin steel-blue line, then the light ground
   with the grey mesh; the first row of covers stands on the line, half up in
   the band (--jband is measured by static/js/stand.js). The books: all light,
   the grey mesh across it. The meshes fade towards the left, so the text
   stays easy to read. */
.screen--stand {
  --stand-light: color-mix(in srgb, var(--brand-mist) 90%, var(--brand));
  overflow: hidden;
}
.screen--journals {
  --jb: var(--jband, 16rem);
  background:
    linear-gradient(to bottom,
      transparent var(--jb),
      var(--brand) var(--jb), var(--brand) calc(var(--jb) + 4px),
      var(--stand-light) calc(var(--jb) + 4px)),
    radial-gradient(120% 90% at 85% 0%, var(--brand-deep-2), transparent 65%),
    var(--brand-deep);
}
.screen--books { background: var(--stand-light); }
.screen--journals .screen__title { color: var(--on-brand); }
.screen--journals .stand__mesh--dark {
  height: var(--jb);
  -webkit-mask-image: linear-gradient(100deg, transparent 8%, #000 50%);
  mask-image: linear-gradient(100deg, transparent 8%, #000 50%);
}
.screen--journals .stand__mesh--light {
  top: calc(var(--jb) + 4px);
  height: calc(100% - var(--jb) - 4px);
}
.screen--stand .screen__inner { gap: calc(var(--space-xl) + var(--space-md)); }

/* short screens: the screen keeps to one window */
@media (min-width: 62rem) and (max-height: 820px) {
  .screen.screen--stand { padding-block: var(--space-lg); }
  .screen--stand .screen__inner { gap: var(--space-xl); }
}

/* covers arrive one after another when the screen comes into view */
@media (prefers-reduced-motion: no-preference) {
  .js-screens .jstand > li { transition: opacity 0.6s var(--ease-out), translate 0.8s var(--ease-out); transition-delay: calc(var(--i) * 45ms + 80ms); }
  .js-screens .screen--stand:not(.is-in) .jstand > li { opacity: 0; translate: 0 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .jstand__cover { transition: none; }
}

/* the books' screen keeps room at the bottom for the "next" arrow */
.screen.screen--books { padding-bottom: calc(var(--target-min) + 2 * var(--space-lg)); }

/* ── 4. About and contacts ──────────────────────────────────────────── */

.screen--about {
  overflow: hidden;
  color: var(--on-brand);
  background:
    radial-gradient(90% 80% at 10% 100%, var(--brand-deep-2), transparent 70%),
    var(--brand-deep);
}
.about__mesh { -webkit-mask-image: linear-gradient(250deg, #000 10%, transparent 60%); mask-image: linear-gradient(250deg, #000 10%, transparent 60%); }
.about { display: grid; gap: var(--space-2xl); }
@media (min-width: 60rem) { .about { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } }
.about__text { display: grid; justify-items: start; gap: var(--space-md); }
.about__text .screen__title { margin-bottom: var(--space-xs); }
.about__text .screen__more { grid-column: auto; grid-row: auto; margin-top: var(--space-xs); }
.about__text p { margin: 0; max-width: 54ch; color: var(--on-brand-2); line-height: 1.6; }
.about__text .about__lead { font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); line-height: 1.4; color: var(--on-brand); }
.screen--about .screen__more { color: var(--on-brand); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--on-brand) 35%, transparent); text-underline-offset: 4px; }

.home-contacts { list-style: none; margin: 0; padding: 0; display: grid; }
.home-contacts li { display: grid; gap: var(--space-2xs); padding-block: var(--space-lg); border-top: 1px solid color-mix(in srgb, var(--on-brand) 18%, transparent); }
.home-contacts li:first-child { padding-top: 0; border-top: 0; }
.home-contacts h3 { margin: 0; font-size: var(--text-body); font-weight: 600; color: var(--on-brand-2); }
.home-contacts p { margin: 0; font-size: var(--text-body); color: var(--on-brand-2); }
.home-contacts__value { justify-self: start; display: inline-flex; align-items: center; min-height: var(--target-min); font-family: var(--font-display); font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--on-brand); }
.home-contacts__value:hover { color: var(--brand); }

/* ── Dots: where you are, and a way to jump ─────────────────────────── */

.screens-nav {
  position: fixed;
  z-index: 30;
  right: var(--space-md);
  top: 50%;
  translate: 0 -50%;
  display: none;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-xs) var(--space-3xs);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-canvas-default) 72%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.screens-nav a { position: relative; display: grid; place-items: center; width: 28px; height: 28px; }
.screens-nav a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: var(--color-fg-subtle);
  transition: height var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.screens-nav a:hover::before { background: var(--color-fg-default); }
.screens-nav a[aria-current]::before { height: 20px; background: var(--brand); }
.screens-nav span {
  position: absolute;
  right: calc(100% + var(--space-xs));
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-border-muted);
  border-radius: 6px;
  background: var(--color-canvas-default);
  color: var(--color-fg-default);
  font-size: var(--text-meta);
  white-space: nowrap;
  opacity: 0;
  translate: 4px 0;
  pointer-events: none;
  transition: opacity var(--dur-micro) var(--ease-out), translate var(--dur-micro) var(--ease-out);
}
.screens-nav a:hover span, .screens-nav a:focus-visible span { opacity: 1; translate: 0 0; }

/* ── Large displays: a screen per scroll ────────────────────────────── */

@media (min-width: 64rem) and (min-height: 600px) {
  html:has(.home) { scroll-snap-type: y mandatory; }
  .screen { min-height: calc(100svh - var(--header-h)); scroll-snap-align: start; padding-block: var(--space-2xl); }
  .hero { padding-bottom: calc(var(--space-2xl) + var(--space-xl)); }
  body:has(.home) .site-footer { scroll-snap-align: end; }
}
/* the dots need a margin beside the content, or they sit on the tiles */
@media (min-width: 78rem) and (min-height: 600px) { .screens-nav { display: flex; } }
@media (prefers-reduced-motion: no-preference) {
  html:has(.home) { scroll-behavior: smooth; }
}
/* something else drives the scroll (a smooth-scroll extension): the page gives
   way - no snapping, no smoothing of its own - or the two fight and the page
   runs away to the bottom (home.html sets the class) */
html.is-free-scroll, html.is-free-scroll:has(.home) { scroll-snap-type: none; scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  .screen__next span { animation: none; }
  .door, .door__cover, .screen__more:not(.pill-link) span { transition: none; }
}

/* ── Phones: the stands as shelves to swipe ──
   On a phone fourteen covers in rows of three are screens of covers; here they
   stand in one row that the thumb swipes and flicks with the system's own
   momentum (no snapping), and the next one peeks in at the right so the row
   reads as going on. The row
   runs out to the screen's edges; the first cover lines up with the text. */
@media (max-width: 39.99rem) {
  .home .jstand {
    display: flex;
    gap: 14px;
    margin: -14px -24px -56px;
    padding: 20px 24px 76px;  /* a scrolling row clips: room for the covers' shadows (some 62px below), given back by the margins */
    overflow-x: auto;
    overscroll-behavior-x: contain;   /* no hop to the page or to "back"; the bounce at the ends stays */
    scroll-snap-type: none;           /* free: the thumb's own momentum carries the row as far as the flick goes;
                                         any snapping (mandatory, then proximity) cut it short on the phone */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .home .jstand::-webkit-scrollbar { display: none; }
  .home .jstand > li { flex: 0 0 40%; }
  .home .jstand--books > li { flex-basis: 42%; }
  .home .jstand__link:hover .jstand__cover { translate: none; }  /* a tap is not a hover */
}

/* ── Phones: one ground from screen to screen ──
   The screens follow each other without snapping here, so where one screen's
   mesh ended and the next one's began showed as a seam while scrolling. The
   meshes on the light ground now fade out towards their top and bottom, and
   the dark one under "Об издательстве" fades in at its top. */
@media (max-width: 720px) {
  .stand__mesh--light {
    -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgb(0 0 0 / 0.16) 38%, #000 74%), linear-gradient(transparent, #000 18%, #000 80%, transparent);
    mask-image: linear-gradient(90deg, transparent 4%, rgb(0 0 0 / 0.16) 38%, #000 74%), linear-gradient(transparent, #000 18%, #000 80%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .about__mesh {
    -webkit-mask-image: linear-gradient(250deg, #000 10%, transparent 60%), linear-gradient(transparent, #000 22%);
    mask-image: linear-gradient(250deg, #000 10%, transparent 60%), linear-gradient(transparent, #000 22%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}

/* Phones: the petrol band runs up under the see-through header (site.css), so
   the first screen is one piece from the top of the screen down */
@media (max-width: 720px) {
  .home .hero {
    --under: calc(57px + env(safe-area-inset-top));
    margin-top: calc(-1 * var(--under));
    padding-top: calc(var(--space-2xl) + var(--under));
  }
}

/* ── Phones: stillness while scrolling ──
   On a phone the page is one long scroll: covers rising into place as a
   screen comes in, and the bouncing "next screen" arrows (there is no
   snapping to screens here), read as twitching. The covers are simply there;
   the arrows go. The first screen still rises once, on arrival. */
@media (max-width: 720px) {
  .js-screens .screen--stand:not(.is-in) .jstand > li { opacity: 1; translate: none; }
  .js-screens .jstand > li { transition: none; }
  .screen__next { display: none; }
}