.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;
  letter-spacing:-.005em
}

/* Region filter — light, on paper background */
.filters {
  max-width:1280px;
  margin:3rem auto 1.5rem;
  padding:0 3rem 1.2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  border-bottom:1px solid rgba(44,64,67,.12)
}

.filters-label {
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:700;
  display:flex;
  align-items:center;
  gap:.7rem;
  flex-shrink:0
}

.filters-label::before {
  content:'';
  display:inline-block;
  width:24px;
  height:1px;
  background:var(--accent-strong)
}

.filters-list {
  display:flex;
  flex-wrap:wrap;
  gap:.4rem
}

.filter-chip {
  font-family:var(--sans);
  font-size:.65rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  padding:.55rem 1rem;
  background:transparent;
  color:var(--text-soft);
  border:1px solid rgba(44,64,67,.18);
  cursor:pointer;
  transition:all .2s
}

.filter-chip:hover {
  border-color:var(--text);
  color:var(--text)
}

.filter-chip.is-on {
  background:var(--text);
  color:#fff;
  border-color:var(--text)
}

/* Region dropdown — desktop hides it (chips shown); mobile shows it instead of chips. */
.filters-select {
  display:none;
  width:100%;
  box-sizing:border-box;
  font-family:var(--sans);
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  padding:.55rem 2rem .55rem .9rem;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%232C4043'/%3E%3C/svg%3E") no-repeat right .8rem center;
  color:var(--text);
  border:1px solid rgba(44,64,67,.22);
  outline:none;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none
}

.filters-select option {
  color:var(--text)
}

@media(max-width:680px) {
  .filters {
    flex-wrap:nowrap;
    align-items:center;
    gap:.8rem
  }
  .filters-list {
    display:none
  }
  /* 16px keeps the native option list readable and stops iOS from zooming on focus;
     drop the wide uppercase tracking so the region name fits the control. */
  .filters-select {
    display:block;
    flex:1 1 auto;
    font-size:16px;
    letter-spacing:.04em;
    text-transform:none
  }
}

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

/* No filters bar (albums have no region terms): the grid follows the hero directly — restore the top gap the filters bar would have provided. */
.magazine-hero__head + .albums {
  margin-top:3rem
}

.album {
  display:flex;
  flex-direction:column;
  cursor:pointer;
  background:var(--bg);
  border:1px solid var(--text);
  padding:1rem 1.1rem 1.2rem;
  transition:transform .25s ease,box-shadow .25s ease;
  box-shadow:0 1px 2px rgba(44,64,67,.04);
  text-decoration:none;
  color:inherit
}

.album:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(44,64,67,.08)
}

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

.album__img img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s,filter .4s;
  filter:saturate(.98)
}

.album:hover .album__img img {
  transform:scale(1.04);
  filter:saturate(1.05)
}

.album__img::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(44,64,67,0) 55%,rgba(44,64,67,.45) 100%);
  pointer-events:none
}

.album__corner {
  position:absolute;
  left:.85rem;
  bottom:.85rem;
  color:#fff;
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-weight:700;
  z-index:2;
  display:flex;
  align-items:center;
  gap:.55rem
}

.album__corner .dot {
  display:inline-block;
  width:4px;
  height:4px;
  background:var(--accent);
  border-radius:50%
}

.album__region {
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--accent-strong);
  font-weight:700;
  margin-bottom:.5rem;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem
}

.album__region .dates {
  color:var(--text-muted);
  letter-spacing:.16em;
  font-weight:600;
  white-space:nowrap
}

.album h3 {
  font-family:var(--sans);
  font-weight:600;
  font-size:1.35rem;
  line-height:1.2;
  letter-spacing:-.012em;
  color:var(--text);
  text-wrap:pretty;
  margin-bottom:.7rem;
  transition:color .2s
}

.album:hover h3 {
  color:var(--accent-strong)
}

.album__meta {
  font-family:var(--sans);
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:600;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding-top:.6rem;
  border-top:1px solid rgba(44,64,67,.1);
  margin-top:auto
}

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

.album__meta .arrow {
  color:var(--text);
  font-size:.85rem;
  transition:transform .25s
}

.album:hover .album__meta .arrow {
  transform:translateX(4px);
  color:var(--accent-strong)
}

.album.is-hidden {
  display:none
}

.album.reveal {
  transition:transform .25s ease,box-shadow .25s ease,opacity .7s ease
}

/* Load-more + empty state */
.more-wrap {
  max-width:1280px;
  margin:0 auto 5rem;
  padding:0 3rem;
  display:flex;
  justify-content:center
}

.more-wrap.is-hidden {
  display:none
}

.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
}

.albums-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
}

@media(max-width:980px) {
  .magazine-hero__head {
    min-height:calc(100vh - 80px)
  }
  .magazine-hero__head-in {
    padding:3rem 1.2rem 2.5rem
  }
  .filters {
    padding:0 1.2rem 1.2rem;
    margin:2rem auto 1.2rem
  }
  .albums {
    grid-template-columns:1fr;
    gap:2.2rem;
    padding:0 1.2rem;
    margin:0 auto 3rem
  }
  .magazine-hero__head + .albums {
    margin-top:2rem
  }
}

@media(min-width:981px) and (max-width:1140px) {
  .albums {
    grid-template-columns:repeat(2,1fr)
  }
}

/* Compact mobile hero. Placed last so 52vh wins. */
@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
  }
}