/* A journal's page, in the colours of its own cover.
 *
 * The band is a soft wash of the cover's colour: the way back, the cover, the
 * name, what the journal is, its indexing and the one main action. The cover
 * stands on a line in the journal's colour (its lower part hangs below it);
 * beside the hanging part, the key facts. Under the line, on a ground with a
 * breath of the same colour: the tabs and their pane, and beside them, always
 * in view, a dark card in the journal's colour with the prices, the actions
 * and the editors' contacts. Only a trace of the mesh, in the band's corner:
 * the cover is the picture.
 */

.jdp {
  --cw: 17rem;                                  /* the cover's width */
  --pad: 2.5rem;                                /* band below the text */
  --hang: calc(var(--cw) * 410 / 300 * 0.45);   /* how far the cover hangs below the line */
  --wash: color-mix(in srgb, var(--jc) 26%, #f6f7f8);      /* the band */
  --ground: color-mix(in srgb, var(--jc) 6%, #f7f8f9);     /* under the line */
  --jc-text: color-mix(in srgb, var(--jc) 70%, #1b2024);   /* the colour, dark enough for text */
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--ground);
}
@media (max-width: 61.99rem) { .jdp { --cw: 12rem; --pad: 2rem; } }

/* ── the band ── */
.jdp__hero {
  position: relative;
  z-index: 2;
  border-bottom: 4px solid transparent;
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--jc) 16%, transparent), transparent 70%),
    var(--wash);
  color: var(--color-ink);
}
/* the least mesh on the site: a sparse trace in the band's top right corner,
   in the journal's colour, dying away towards the middle */
.jdp__trace {
  --mesh-signal: var(--jc);
  color: color-mix(in srgb, var(--jc) 55%, #6f7c88);
  opacity: 0.85;
  -webkit-mask-image: radial-gradient(85% 120% at 100% 0%, #000 15%, transparent 78%);
  mask-image: radial-gradient(85% 120% at 100% 0%, #000 15%, transparent 78%);
}
.jdp__hero-inner { position: relative; z-index: 1; padding-top: var(--space-lg); padding-bottom: var(--pad); }

.jdp__crumbs { margin-bottom: var(--space-md); }

/* the cover hangs from the line: its margin box ends where the band does */
.jdp__head { display: grid; grid-template-columns: var(--cw) minmax(0, 1fr); gap: var(--space-md) clamp(2rem, 4vw, 3.5rem); align-items: end; }
.jdp__cover-col { margin-bottom: calc(-1 * (var(--hang) + var(--pad))); }
.jdp__cover { display: block; width: 100%; line-height: 0; }
.jdp__cover img { display: block; width: 100%; height: auto; aspect-ratio: 300 / 410; object-fit: cover; }

.jdp__about { display: grid; gap: var(--space-md); justify-items: start; padding-top: var(--space-lg); }
.jdp__title { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); font-weight: 650; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.jdp__lead { margin: 0; max-width: 58ch; color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.5; text-wrap: pretty; }

/* the indexing marks: the card's coloured tags */
.jdp__marks { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.jdp__marks li { padding: 0.3rem 0.65rem; border-radius: 6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 16%, transparent); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--color-ink); }
.jdp__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-2xs); }
/* the actions: a plain button in the journal's colour, and beside it a link
   to the latest issue - no capsules, glows or round arrows */
.jdp__cta { display: grid; gap: var(--space-md); width: max-content; max-width: 100%; }
.jdp__cta .jdp__actions { align-items: center; gap: 0.75rem 1.75rem; margin: 0; }
.jdp__actions .pill-link { display: inline-flex; align-items: center; }
.jdp__publish.pill-link {
  gap: 0.75rem; min-height: 3rem; padding: 0 1.375rem;
  border-radius: 6px; background: var(--jc); color: var(--jc-ink);
  box-shadow: none; font-weight: 600;
  transition: background-color 0.2s ease;
}
.jdp__publish.pill-link::before { content: none; }
.jdp__publish .pill-link__go { width: auto; height: auto; border-radius: 0; background: none; color: inherit; overflow: visible; }
.jdp__publish .pill-link__go svg { width: 1.05rem; height: 1.05rem; }
.jdp__publish.pill-link:hover, .jdp__publish.pill-link:focus-visible { background: color-mix(in srgb, var(--jc) 82%, #000); color: var(--jc-ink); }
.jdp__publish.pill-link:hover .pill-link__go, .jdp__publish.pill-link:focus-visible .pill-link__go { background: none; color: inherit; }
.jdp__publish:focus-visible { outline-color: var(--jc); }
/* the latest issue: words and a number, the number underlined */
.jdp__latest { display: inline-flex; align-items: baseline; gap: 0.4rem; min-height: 2.75rem; align-self: center; padding: 0; color: var(--color-ink-2); font-weight: 500; }
.jdp__latest-label::after { content: ":"; }
.jdp__latest-issue { color: var(--color-ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--jc) 45%, transparent); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.2s ease; }
.jdp__latest { align-items: center; }
.jdp__latest:hover { color: var(--color-ink-2); }
.jdp__latest:hover .jdp__latest-issue { text-decoration-color: currentColor; }
.jdp__latest:focus-visible { outline: 2px solid var(--jc); outline-offset: 3px; border-radius: 3px; }

/* ── under the line ── */
.jdp__ground { position: relative; padding-bottom: var(--space-3xl); }

/* the key facts, beside the hanging cover */
.jdp__under { position: relative; z-index: 1; display: grid; grid-template-columns: var(--cw) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); align-content: start; min-height: calc(var(--hang) + var(--space-lg)); }
/* under the facts, the indexing */
.jdp__under .jdp__marks { grid-column: 2; gap: 0.5rem; margin-top: var(--space-lg); }
.jdp__under .jdp__marks li { display: inline-flex; align-items: center; min-height: 2rem; }
.jdp__facts { grid-column: 2; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-md) clamp(1.25rem, 2.5vw, 2.25rem); margin: 0; padding-top: var(--space-lg); }
/* every caption on one line and every value from the same height; a small
   second line (the editor's rank, the index's catalogue) under its value */
@media (max-width: 61.99rem) { .jdp__facts { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; } }
.jdp__facts div { display: grid; align-content: start; gap: 6px; }
.jdp__facts dt { font-size: 0.8125rem; color: var(--color-ink-2); white-space: nowrap; }
.jdp__facts dd { margin: 0; font-weight: 600; line-height: 1.35; color: var(--color-ink); }
.jdp__facts dd small { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 400; line-height: 1.35; color: var(--color-ink-2); }
.jdp__fact--wide { flex: 0 1 12rem; min-width: 11rem; }
.jdp__facts div:not(.jdp__fact--wide) dd { white-space: nowrap; }  /* a number or a short phrase stays whole; a fact that does not fit goes to the next row */
.jdp__num { font-variant-numeric: tabular-nums; }

/* ── the tabs and the card ── */
.jdp__body { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); align-items: start; margin-top: var(--space-xl); }
@media (min-width: 62rem) { .jdp__body { grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(2rem, 4vw, 3.5rem); } }

.jdp__tabs { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: var(--space-xl); padding: 0.25rem; border-radius: 999px; background: color-mix(in srgb, var(--jc) 10%, #fff); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05); }
.jdp__tabs a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.25rem; border-radius: 999px; color: var(--color-ink-2); font-weight: 600; white-space: nowrap; transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
.jdp__tabs a:hover { color: var(--color-ink); background: rgb(255 255 255 / 0.8); }
.jdp__tabs a.active { background: #fff; color: var(--color-ink); box-shadow: 0 8px 20px -12px rgb(6 30 38 / 0.45), inset 0 -2px 0 var(--jc); }
.jdp__tabs a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.jdp__tabs.has-slider { position: relative; isolation: isolate; }
.jdp__tabs.has-slider::before {
  content: ""; position: absolute; z-index: -1;
  left: var(--tab-left); right: var(--tab-right); top: var(--tab-top);
  height: var(--tab-height);
  border-radius: var(--tab-radius, 10px); background: #fff;
  box-shadow: 0 8px 20px -12px rgb(6 30 38 / 0.45), inset 0 -2px 0 var(--jc);
  transition: left .46s cubic-bezier(.22, 1, .36, 1), right .46s cubic-bezier(.22, 1, .36, 1), top .46s ease, height .46s ease;
  pointer-events: none;
}
.jdp__tabs.has-slider.is-morphing::before { animation: tab-soften .46s ease-in-out; }
@keyframes tab-soften {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.06, .93); }
}
.jdp__tabs.has-slider a.active, .jdp__tabs.has-slider a.active:hover { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .jdp__tabs.has-slider::before { transition: none; animation: none; } }

.jdp__pane { transition: opacity 0.2s ease; }
.jdp__pane.is-loading { opacity: 0.45; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .jdp__pane.is-entering > * { animation: jdp-in 0.55s var(--ease-out) both; }
  .jdp__pane.is-entering > :nth-child(2) { animation-delay: 50ms; }
  .jdp__pane.is-entering > :nth-child(3) { animation-delay: 100ms; }
  .jdp__pane.is-entering > :nth-child(n + 4) { animation-delay: 150ms; }
}
@keyframes jdp-in { from { opacity: 0; transform: translateY(12px); } }

.jdp__pane h2 { margin: 0 0 var(--space-md); font-family: var(--font-display); font-size: clamp(1.375rem, 1.15rem + 0.6vw, 1.75rem); font-weight: 650; line-height: 1.2; }
.jdp__pane > * + * { margin-top: var(--space-2xl); }

/* the latest issue: a white sheet, the number large, four articles */
.jdp__issue { padding: clamp(1.25rem, 2.5vw, 2rem); border-radius: 22px; background: #fff; box-shadow: 0 24px 50px -36px rgb(6 30 38 / 0.5); }
.jdp__issue-head { display: grid; gap: 0.15rem; margin-bottom: var(--space-md); }
.jdp__kicker { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--jc-text); }
.jdp__issue h2 { margin: 0; }
.jdp__issue h2 a { color: var(--color-ink); }
.jdp__issue h2 a:hover { color: color-mix(in srgb, var(--jc) 55%, var(--color-ink)); }
.jdp__articles { margin: 0; padding: 0; list-style: none; counter-reset: art; }
.jdp__articles li { counter-increment: art; display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--space-sm); padding: var(--space-md) 0; border-top: 1px solid var(--color-rule); }
.jdp__articles li::before { content: counter(art, decimal-leading-zero); grid-row: 1 / span 2; padding-top: 0.15rem; font-size: 0.8125rem; font-weight: 600; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.jdp__articles a { font-weight: 600; line-height: 1.35; color: var(--color-ink); text-wrap: pretty; }
.jdp__articles a:hover { color: color-mix(in srgb, var(--jc) 55%, var(--color-ink)); }
.jdp__articles span { margin-top: 0.25rem; font-size: 0.875rem; color: var(--color-ink-2); }
.jdp__more { display: inline-flex; margin-top: var(--space-sm); font-weight: 600; color: var(--jc-text); }
.jdp__more:hover { color: var(--color-ink); }

/* the topics: two quiet columns */
.jdp__topics .prose-body ul { columns: 2 16rem; column-gap: var(--space-2xl); margin: 0; padding-left: 1.1rem; }
.jdp__topics .prose-body li { break-inside: avoid; margin-bottom: 0.35rem; }

/* the long texts, folded: white rows that open */
.jdp__folds { display: grid; gap: var(--space-xs); }
.jdp details.more { border: 0; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04); transition: background-color 0.2s ease; }
.jdp details.more[open] { background: #fff; }
.jdp details.more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 3.5rem; padding: 0 var(--space-lg); font-weight: 600; cursor: pointer; list-style: none; }
.jdp details.more > summary::-webkit-details-marker { display: none; }
.jdp details.more > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 0 0; border: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: none; rotate: 45deg; transition: rotate 0.3s var(--ease-out), margin 0.3s var(--ease-out); }
.jdp details.more[open] > summary::after { transform: none; rotate: 225deg; margin-top: 4px; }
.jdp details.more > summary:hover { color: var(--color-ink); }
.jdp details.more > .prose-body { padding: 0 var(--space-lg) var(--space-lg); }


/* the authors' tab: four numbered cards */
.jdp .steps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-md); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.jdp .steps__list li { counter-increment: step; display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-lg); border-radius: 20px; background: #fff; box-shadow: 0 20px 40px -32px rgb(6 30 38 / 0.5); }
.jdp .steps__list li::before { content: counter(step); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: var(--space-2xs); border-radius: 50%; background: var(--jc); color: var(--jc-ink); font-weight: 700; }
.jdp .steps__list strong { font-family: var(--font-display); font-size: 1.125rem; }
.jdp .steps__list span { color: var(--color-ink-2); line-height: 1.5; }
.jdp .steps__list a { font-weight: 600; color: var(--jc-text); }

/* the archive: a row per year, the issues as round pills */
.jdp__archive { display: grid; gap: var(--space-sm); }
.jdp__year { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04); }
.jdp__year-num { margin: 0 !important; font-family: var(--font-display); font-size: 1.375rem !important; font-variant-numeric: tabular-nums; }
.jdp__issues { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.jdp .issue-tile { display: grid; place-items: center; min-width: 3.25rem; height: 2.5rem; padding: 0 0.85rem; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--jc) 8%, #fff); color: var(--color-ink); font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: none; transition: background-color 0.2s ease, color 0.2s ease; }
.jdp .issue-tile:hover { background: color-mix(in srgb, var(--jc) 20%, #fff); color: var(--color-ink); }
.jdp .issue-tile.current { background: var(--jc); color: var(--jc-ink); }

/* ── the card beside the tabs: dark, steeped in the journal's colour ── */
/* the same tone as the side cards (page.css .pcard); dark theme there too */
.jdp__card {
  --card-ink: var(--color-fg-default);
  --ink-2: color-mix(in srgb, var(--color-fg-default) 64%, transparent);
  --rule: color-mix(in srgb, var(--jc) 30%, transparent);
  --card-2: rgb(255 255 255 / 0.6);  /* the second button */
  display: grid;
  gap: var(--space-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: 16px;
  color: var(--card-ink);
  /* the journal's hue at one fixed lightness and a capped saturation: pale
     covers do not vanish into the page, bright ones do not shout, grey ones
     stay grey; a soft shadow lifts it off the page */
  background: color-mix(in srgb, var(--jc) 18%, var(--color-canvas-default));
  background: oklch(from var(--jc) 0.925 min(calc(c * 0.4), 0.06) h);
  box-shadow: 0 12px 30px -20px rgb(0 0 0 / 0.35);
}
[data-theme="dark"] .jdp__card {
  --card-2: rgb(255 255 255 / 0.08);
  background: oklch(from var(--jc) 0.3 min(calc(c * 0.4), 0.05) h);
  box-shadow: none;
}
@media (min-width: 62rem) { .jdp__card { position: sticky; top: calc(var(--header-h, 4rem) + var(--space-lg)); } }
/* the prices: a short list, the name left and the sum right - not three big figures */
.jdp__prices { display: grid; gap: var(--space-xs); margin: 0; }
.jdp__prices div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
.jdp__prices dt { font-size: 0.9375rem; color: var(--ink-2); }
.jdp__prices dd { margin: 0; font-size: 1.0625rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jdp__card-link { justify-self: start; margin-top: calc(-1 * var(--space-sm)); font-size: 0.875rem; font-weight: 600; color: var(--card-ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.25em; }
.jdp__card-link:hover { color: var(--card-ink); text-decoration-color: currentColor; }
.jdp__card-actions { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--rule); }
.jdp__card .jpop__go { justify-content: center; padding: 0 1.25rem; border-radius: 6px; background: var(--jc); color: var(--jc-ink); transition: background-color 0.2s ease; }
.jdp__card .jpop__go:hover { box-shadow: none; background: color-mix(in srgb, var(--jc) 84%, #000); color: var(--jc-ink); }
.jdp__subscribe { display: grid; place-items: center; min-height: 3rem; border-radius: 6px; background: var(--card-2); color: var(--card-ink); font-weight: 600; transition: background-color 0.2s ease; }
.jdp__subscribe:hover { background: color-mix(in srgb, var(--card-2), var(--color-canvas-default) 50%); color: var(--card-ink); }
.jdp__subscribe:focus-visible, .jdp__card a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.jdp__contacts { padding-top: var(--space-md); border-top: 1px solid var(--rule); }
.jdp__contacts h2 { margin: 0 0 var(--space-sm); font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.jdp__contacts ul { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.jdp__contacts a { font-weight: 600; color: var(--card-ink); }
.jdp__contacts a:hover { color: var(--card-ink); text-decoration: underline; }
.jdp__address { font-size: 0.875rem; color: var(--ink-2); line-height: 1.45; }
.jdp__contacts .prose-body { color: var(--ink-2); font-size: 0.9375rem; }

/* ── phones: the cover small beside the title, nothing hangs ── */
@media (max-width: 40rem) {
  .jdp { --cw: 7.5rem; --hang: 0px; }
  .jdp__head { grid-template-columns: var(--cw) minmax(0, 1fr); align-items: start; }
  .jdp__cover-col { margin-bottom: 0; }
  .jdp__about { display: contents; }
  .jdp__title { grid-column: 2; align-self: center; font-size: clamp(1.25rem, 5.5vw, 1.625rem); hyphens: auto; overflow-wrap: anywhere; }
  .jdp__lead, .jdp__actions, .jdp__cta { grid-column: 1 / -1; }
  .jdp__cta { width: auto; }
  .jdp__cta .jdp__actions { gap: 0.25rem; }
  .jdp__cta .jdp__publish { flex: 1 1 100%; justify-content: space-between; }
  .jdp__under { display: block; min-height: 0; }
  .jdp__facts { padding-top: var(--space-lg); }
  .jdp__tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .jdp__tabs a { padding: 0 0.95rem; }
  .jdp__tabs::-webkit-scrollbar { display: none; }
  .jdp__year { grid-template-columns: minmax(0, 1fr); }
}

/* the light ground runs straight into the footer */
body:has(.jdp) .site-footer { margin-top: 0; }

/* ── Phones: the tabs stay at hand ──
   "О журнале · Архив · Для авторов" stick at the top of the screen as the
   page scrolls. Once stuck (journal.js marks them), they move down with the
   header when it slides back and up with it when it goes, in the same time
   and easing, by transform - so they are never under it and do not shake. */
@media (max-width: 40rem) {
  .jdp__tabs {
    position: sticky; z-index: 20; top: calc(env(safe-area-inset-top) + 8px);
    width: 100%; justify-content: space-between;
    background: color-mix(in srgb, var(--jc) 8%, #fff);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05), 0 10px 24px -18px rgb(6 30 38 / 0.6);
  }
  .jdp__tabs a { flex: 1 1 auto; justify-content: center; }
  .jdp__tabs { transition: translate 0.38s cubic-bezier(0.5, 0, 0.75, 0.4); }
  html:has(.header-wrap:not(.is-tucked)) .jdp__tabs.is-stuck { translate: 0 57px; transition: translate 0.45s cubic-bezier(0.2, 0.85, 0.25, 1); }
}