/* Design layer for «Радиотехника».
 *
 * Loaded after site.css and tokens.css, so it overrides them in one place.
 * Direction: a quiet, precise reading surface (Literata for everything the
 * publisher writes, system sans for the interface). Everything is deliberately
 * plain; the home page carries the brand.
 */

:root {
  --serif: var(--font-display);
}

/* ── Type ───────────────────────────────────────────────────────────── */

h1, h2, h3 { text-wrap: balance; }

/* The interface labels were small tracked capitals. They are ordinary
   sentence-case text now: capitals are kept for the publisher's own data. */
.sc {
  font-size: var(--text-meta);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}

/* section subheads inside an article are headings, not tags */
.article-body h2.sc {
  font-family: var(--serif);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-fg-default);
  margin: 2.5rem 0 0.75rem;
}
.article-body > h2.sc:first-child { margin-top: 0; }

.article-pager span, .spec-list dt {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-meta);
}
.spec-list dt { font-weight: 500; }
.rubric-title {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

/* long reading: Literata, a comfortable measure, a little more leading than sans */
.article-abstract,
.journal-main .prose-body,
.book-detail .article-abstract,
.prose .prose-body {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 68ch;
}
.article-abstract p, .journal-main .prose-body p { margin: 0 0 1em; }
.reference-list { font-size: 0.9375rem; line-height: 1.7; max-width: 72ch; }
.article-title { font-family: var(--serif); font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }

/* meta lines built from spans instead of "a · b · c" strings */
.meta-list { display: flex; flex-wrap: wrap; gap: 0 1.25em; margin: 0; padding: 0; list-style: none; }

/* ── Motion ─────────────────────────────────────────────────────────── */

/* pages no longer slide up on load; navigation uses the cross-fade
   (view transitions, site.css) */
main { animation: none !important; }
.stat-strip .stat:hover { transform: none; }

/* ── Journals-at-a-glance index (journal page) ──────────────────────── */


/* link-style “see all” without a trailing arrow */
.home-more { text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 3px; }
.home-more:hover { text-decoration-color: currentColor; }

}

.author-facts { display: flex; flex-wrap: wrap; gap: 0 1.25em; }
.search-heading .count { color: var(--color-fg-subtle); font-weight: 500; margin-left: 0.25em; }

/* Phones: the header and its menu live in site.css ("The phone's header"). */

/* The journals page lives in journals.css (with stand.css). */


/* A journal's page lives in journal.css (with stand.css). */

/* folded blocks (the page for authors; the journal page restyles them) */
details.more, details.group { border-top: 1px solid var(--color-border-default); }
details.more { border-bottom: 1px solid var(--color-border-default); }
details.more > summary, details.group > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg);
  padding: var(--space-md) 0; font-family: var(--serif); font-size: 1.125rem; font-weight: 600;
}
details.more > summary::-webkit-details-marker, details.group > summary::-webkit-details-marker { display: none; }
details.more > summary::after, details.group > summary::after {
  content: ""; flex: none; align-self: center; width: 9px; height: 9px;
  border-right: 2px solid var(--color-fg-muted); border-bottom: 2px solid var(--color-fg-muted);
  transform: rotate(45deg); transition: transform var(--dur-short) ease;
}
details.more[open] > summary::after, details.group[open] > summary::after { transform: rotate(-135deg); }
details.more > summary:hover, details.group > summary:hover { color: var(--jc-text); }
details.more > .prose-body { padding-bottom: var(--space-lg); }
.journal-empty { color: var(--color-fg-muted); }


/* The page for authors lives in page.css. */

/* ── Book cards (search results; the catalogue itself is books.css) ──── */

.books { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); }
@media (min-width: 40rem) { .books { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); } }
@media (min-width: 62rem) { .books { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.books--wide { margin-bottom: var(--space-xl); }
@media (min-width: 62rem) { .books--wide { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.books__empty { grid-column: 1 / -1; color: var(--color-fg-muted); padding: var(--space-xl) 0; }

.book-card { display: flex; flex-direction: column; gap: var(--space-3xs); height: 100%; color: var(--color-fg-default); }
/* every cover sits on the same plate, standing on its lower edge */
.book-card__plate {
  display: flex; align-items: flex-end; justify-content: center;
  aspect-ratio: 3 / 4; padding: 7% 8% 0; margin-bottom: var(--space-xs); overflow: hidden;
  background: var(--color-canvas-subtle); border-radius: var(--radius-cover);
}
.book-card__obj { height: 86%; margin-bottom: 7%; }
.book-card__cover { display: block; height: 100%; width: auto; }
.book-card__blank {
  align-self: stretch; flex: 1; margin-bottom: 7%; display: grid; place-items: center; padding: var(--space-sm);
  background: var(--color-accent-emphasis); color: var(--color-btn-fg); text-align: center; font-family: var(--serif); font-size: var(--text-meta); line-height: 1.3;
}
.book-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-family: var(--serif); font-size: 0.9375rem; font-weight: 650; line-height: 1.3; }
.book-card__authors { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--text-meta); color: var(--color-fg-muted); line-height: 1.4; }
.book-card__meta { margin-top: auto; padding-top: var(--space-xs); display: grid; gap: var(--space-3xs); font-size: var(--text-meta); font-variant-numeric: tabular-nums; color: var(--color-fg-subtle); }
.book-card__price { color: var(--color-fg-default); font-size: 0.9375rem; font-weight: 650; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .book-card:hover { color: var(--color-fg-default); }
  .book-card:hover .book-card__title { color: var(--color-accent-fg); }
  .book-card:hover .book-card__obj { translate: 0 -6px; }
}

/* ── A cover, finely lit ────────────────────────────────────────────────
   Flat, but never dead: a layered soft shadow, a hairline of light round the
   edge (and a faint dark one, so a white cover keeps its outline), a crease by
   the spine, and a sheen — a band of light across the paper that sweeps over
   once when the cover is shown or pointed at. The shadow is neutral, never tinted. */
.cover {
  --glow: rgb(0 0 0 / 0.38);
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  line-height: 0;  /* no stray line box under the cover */
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.07),
    0 1px 2px rgb(0 0 0 / 0.22),
    0 10px 20px -8px rgb(0 0 0 / 0.3),
    0 34px 54px -26px var(--glow);
  transition: translate 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.cover img { display: block; border-radius: inherit; }
.cover::before, .cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
/* the crease by the spine and a rim of light round the edge */
.cover::before {
  background: linear-gradient(90deg, rgb(0 0 0 / 0.24), rgb(255 255 255 / 0.15) 1.3%, rgb(0 0 0 / 0.07) 3.4%, transparent 7.5%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), inset 0 1px 0 rgb(255 255 255 / 0.3);
}
/* the sheen: a band of light that crosses the cover when its link is pointed
   at, narrow and crisp like a lamp in gloss paper. static/js/sheen.js runs it
   from the side the pointer came in (left or right, --sheen-a sets the slant)
   and keeps it hidden at rest; without the script it crosses left to right. */
.cover::after {
  background: linear-gradient(var(--sheen-a, 112deg), transparent 43%, rgb(255 255 255 / 0.12) 47%, rgb(255 255 255 / 0.42) 50%, rgb(255 255 255 / 0.08) 53%, transparent 57%);
  background-size: 260% 100%;
  background-position: 100% 50%;
  mix-blend-mode: soft-light;
  opacity: 0.9;
}
.js-sheen .cover::after { opacity: 0; }
html:not(.js-sheen) :is(.cover.is-lit, a:hover > * > .cover)::after { background-position: 0 50%; transition: background-position 1.1s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .cover, .cover::after { transition: none !important; } }