.magazine-hero__head {
  position:relative;
  min-height:calc(100vh - 112px);
  overflow:hidden;
  background:var(--text);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column
}

.magazine-hero__head-img {
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat
}

.magazine-hero__head-grad {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(44,64,67,calc(.3 * var(--hero-dark,1))) 0%,rgba(44,64,67,calc(.55 * var(--hero-dark,1))) 55%,rgba(44,64,67,calc(.88 * var(--hero-dark,1))) 100%);
  pointer-events:none
}

.magazine-hero__head-in {
  position:relative;
  z-index:2;
  width:100%;
  padding:5rem 3rem 4rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  flex:1
}

.magazine-hero__kicker {
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
  margin-bottom:1.4rem;
  display:flex;
  align-items:center;
  gap:1rem
}

.magazine-hero__kicker::after {
  content:'';
  flex:0 0 60px;
  height:1px;
  background:var(--accent)
}

.magazine-hero__title {
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.6rem,6.4vw,5.4rem);
  line-height:1;
  letter-spacing:.01em;
  color:#fff;
  margin-bottom:1.4rem;
  max-width:18ch;
  text-wrap:balance
}

.magazine-hero__tag {
  font-family:var(--sans);
  font-style:normal;
  font-weight:400;
  font-size:clamp(1rem,1.4vw,1.25rem);
  line-height:1.55;
  color:var(--border);
  max-width:680px
}

@media(max-width:780px) {
  .magazine-hero__head {
    min-height:calc(100vh - 80px)
  }
  .magazine-hero__head-in {
    padding:3rem 1.2rem 2.5rem
  }
}

/* Compact mobile magazine hero. Keep AFTER the 780px rule. */
@media(max-width:880px) {
  .magazine-hero__head {
    min-height:52vh
  }
  .magazine-hero__head-in {
    padding:2.4rem 1.2rem 2.4rem
  }
  .magazine-hero__kicker {
    font-size:.56rem;
    letter-spacing:.22em;
    margin-bottom:.85rem;
    gap:.6rem
  }
  .magazine-hero__kicker::after {
    flex:0 0 22px
  }
  .magazine-hero__title {
    font-size:clamp(2.2rem,8vw,3rem);
    line-height:1.05;
    margin-bottom:.8rem;
    max-width:none
  }
  .magazine-hero__tag {
    font-size:.92rem;
    line-height:1.55
  }
}

/* Lead feature */
.lead-wrap {
  max-width:1280px;
  margin:3rem auto 0;
  padding:0 3rem
}

.lead {
  position:relative;
  min-height:520px;
  overflow:hidden;
  background:var(--text)
}

.lead-img {
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:saturate(1.05)
}

.lead-grad {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(44,64,67,.05) 0%,rgba(44,64,67,.2) 50%,rgba(44,64,67,.85) 100%);
  pointer-events:none
}

.lead-inner {
  position:relative;
  padding:3rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  color:#fff;
  z-index:2;
  min-height:520px
}

.lead-kicker {
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
  margin-bottom:1.4rem;
  display:flex;
  align-items:center;
  gap:1rem
}

.lead-kicker::after {
  content:'';
  flex:0 0 60px;
  height:1px;
  background:var(--accent)
}

.lead-title {
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem,4.4vw,3.6rem);
  line-height:1.02;
  letter-spacing:.005em;
  margin-bottom:1.4rem;
  max-width:18ch;
  text-wrap:balance
}

.lead-deck {
  font-family:var(--serif);
  font-style:normal;
  font-weight:400;
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.5;
  max-width:640px;
  color:var(--border);
  margin-bottom:1.8rem
}

.lead-byline {
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#CABFA3;
  font-weight:500;
  display:flex;
  flex-wrap:wrap;
  gap:.8rem 2.4rem;
  align-items:center
}

.lead-byline strong {
  color:#fff;
  font-weight:700
}

.lead-byline .sep {
  opacity:.4
}

.lead-cta {
  margin-top:1.2rem;
  align-self:flex-start
}

@media(max-width:980px) {
  .lead-wrap {
    margin-top:3rem;
    padding:0 1.2rem
  }
  .lead,.lead-inner {
    min-height:460px
  }
  .lead-inner {
    padding:2rem 1.5rem
  }
}

/* Article grid */
.issue-grid {
  max-width:1280px;
  margin:3rem auto 0;
  padding:0 3rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.5rem 1.8rem
}

@media(max-width:980px) {
  .issue-grid {
    grid-template-columns:repeat(2,1fr)
  }
}

@media(max-width:640px) {
  .issue-grid {
    grid-template-columns:1fr
  }
}

.article-card {
  display:flex;
  flex-direction:column;
  cursor:pointer;
  background:var(--bg);
  border:1px solid var(--text);
  text-decoration:none;
  color:inherit;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,opacity .7s ease
}

.article-card:hover {
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(44,64,67,.09);
  border-color:var(--text)
}

.article-card.is-hidden {
  display:none
}

.article-card__img {
  position:relative;
  overflow:hidden;
  background:var(--text);
  aspect-ratio:4/3;
  margin-bottom:1.1rem
}

.article-card__img img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s
}

.article-card:hover .article-card__img img {
  transform:scale(1.04)
}

.article-card__region {
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--accent-strong);
  font-weight:700;
  margin:0 1.2rem .5rem
}

.article-card h3 {
  font-family:var(--sans);
  font-weight:600;
  font-size:1.4rem;
  line-height:1.18;
  letter-spacing:-.012em;
  margin:0 1.2rem .6rem;
  color:var(--text);
  text-wrap:pretty
}

.article-card:hover h3 {
  color:var(--text-soft)
}

.article-card__deck {
  font-family:var(--serif);
  font-size:1rem;
  line-height:1.55;
  color:var(--text-soft);
  margin:0 1.2rem 1.1rem;
  max-width:46ch
}

.article-card__meta {
  margin-top:auto;
  padding:.85rem 1.2rem 1.1rem;
  border-top:1px solid rgba(44,64,67,.1);
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:600;
  display:flex;
  justify-content:space-between;
  gap:1rem
}

.article-card__meta strong {
  color:var(--text);
  font-weight:700
}

.journal-empty {
  max-width:1280px;
  margin:0 auto;
  padding:3rem;
  text-align:center;
  font-family:var(--serif);
  font-style:normal;
  color:var(--text-muted);
  font-size:1.05rem
}

.journal-empty.hidden {
  display:none
}

/* ─── Load more (stashed cards) ─── */
.load-more {
  max-width:1280px;
  margin:2.5rem auto 0;
  padding:0 3rem;
  display:flex;
  justify-content:center
}

.load-more.is-done {
  display:none
}

.load-more-btn[disabled] {
  opacity:.6;
  cursor:wait;
  pointer-events:none
}

.article-card.is-stash {
  display:none
}

.article-card.is-revealed {
  animation:articleCardFadeIn .5s ease both
}

@keyframes articleCardFadeIn {
  from {
    opacity:0;
    transform:translateY(14px)
  }
  to {
    opacity:1;
    transform:none
  }
}

/* ─── Region filter banner + empty state ─── */
.filter-banner {
  max-width:1280px;
  margin:3rem auto 1.4rem;
  padding:0 3rem;
  scroll-margin-top:1.4rem;
  display:none;
  align-items:center;
  gap:.7rem;
  flex-wrap:wrap
}

.filter-banner.is-on {
  display:flex
}

.filter-banner-tag {
  background:var(--text);
  color:#fff;
  padding:.55rem 1rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700
}

.filter-banner-tag strong {
  color:var(--accent);
  font-weight:700
}

.filter-banner-clear {
  background:transparent;
  border:1px solid var(--text);
  color:var(--text);
  padding:.55rem 1rem;
  cursor:pointer;
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  transition:background .2s,color .2s
}

.filter-banner-clear:hover {
  background:var(--text);
  color:#fff
}

.filter-empty {
  max-width:1280px;
  margin:0 auto 5rem;
  padding:3rem;
  text-align:center;
  font-family:var(--serif);
  font-style:normal;
  color:var(--text-muted);
  font-size:1.05rem;
  border:1px dashed rgba(44,64,67,.18);
  display:none
}

.filter-empty.is-visible {
  display:block
}

.issue-grid.is-filtering .article-card.is-stash {
  display:flex
}

.issue-grid.is-filtering .article-card.is-hidden {
  display:none
}

/* ─── Regions slider («По регионам») ─── */
.regions {
  max-width:1280px;
  margin:5rem auto;
  padding:0 3rem;
  border-top:3px solid var(--text);
  padding-top:2rem
}

.regions-h {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:1.5rem;
  flex-wrap:wrap;
  gap:1rem
}

.regions-h h3 {
  font-family:var(--sans);
  font-weight:600;
  font-size:1.4rem;
  letter-spacing:-.01em
}

.regions-h p {
  font-family:var(--serif);
  font-style:normal;
  color:var(--text-muted);
  font-size:.95rem
}

.regions-slider {
  position:relative
}

.regions-overflow {
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  -ms-overflow-style:none;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch
}

.regions-overflow::-webkit-scrollbar {
  display:none
}

.regions-grid {
  display:flex;
  gap:.6rem
}

.regions-grid .region-pill {
  flex:0 0 calc((100% - 5*.6rem)/6);
  scroll-snap-align:start
}

.regions-btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--accent);
  color:var(--text);
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  box-shadow:0 6px 18px rgba(44,64,67,.28);
  transition:background .25s,opacity .25s;
  opacity:0;
  pointer-events:none
}

.regions-btn:hover {
  background:#fff
}

.regions-prev {
  left:10px
}

.regions-next {
  right:10px
}

.regions-slider.has-prev .regions-prev, .regions-slider.has-next .regions-next {
  opacity:1;
  pointer-events:auto
}

.region-pill {
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  cursor:pointer;
  background:var(--text);
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  font:inherit;
  color:inherit;
  text-align:left;
  appearance:none;
  -webkit-appearance:none
}

.region-pill img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s,filter .3s;
  filter:saturate(.85) brightness(.85)
}

.region-pill:hover img {
  transform:scale(1.06);
  filter:saturate(1) brightness(1)
}

.region-pill .region-pill__grad {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(44,64,67,.2) 0%,rgba(44,64,67,.7) 100%)
}

.region-pill .region-pill__label {
  position:absolute;
  left:.8rem;
  bottom:.7rem;
  color:#fff;
  font-family:var(--sans);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:-.005em;
  line-height:1.1;
  z-index:2
}

.region-pill .region-pill__count {
  display:block;
  font-family:var(--sans);
  font-size:.55rem;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
  margin-top:.25rem;
  letter-spacing:.18em
}

.region-pill.is-active {
  outline:3px solid var(--accent);
  outline-offset:-3px
}

@media(max-width:980px) {
  .regions {
    padding-left:1.5rem;
    padding-right:1.5rem
  }
  .regions-grid .region-pill {
    flex:0 0 calc((100% - 2*.6rem)/3)
  }
}

@media(max-width:640px) {
  .regions {
    padding-left:1.2rem;
    padding-right:1.2rem
  }
  .regions-grid .region-pill {
    flex:0 0 calc((100% - .6rem)/2)
  }
  .load-more {
    padding:0 1.2rem
  }
  .filter-banner {
    padding:0 1.2rem
  }
}