/* feature.html: the Heavyweight Issue, set like a magazine on black */
.issue { background: var(--bg); }
.issue__cover {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh; padding: calc(var(--header-h) + 40px) var(--gutter) clamp(40px, 7vh, 80px);
  display: grid; align-content: end; gap: 18px;
}
.issue__video {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: grayscale(1) contrast(1.15); transition: opacity 1.6s var(--ease-out);
}
.issue__video.is-playing { opacity: .5; }
.issue__cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, #000 100%); }
.issue__line { margin: 0; font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; color: var(--muted); }
.issue__title {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(3.6rem, 1rem + 11vw, 13rem); line-height: .86; letter-spacing: -.035em; max-width: 9ch;
}
.issue__dek { max-width: 46ch; font-size: var(--fs-2); color: var(--fg); margin: 0; }
.issue__scroll { justify-self: start; font-weight: 700; padding: 10px 0; }

.issue__chapters { padding: clamp(64px, 9vw, 140px) var(--gutter) 0; display: grid; gap: clamp(96px, 14vw, 200px); }
.chapter {
  max-width: var(--max); width: 100%; margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.5vw, 40px); align-items: center;
}
.chapter__big { grid-column: 1 / span 7; grid-row: 1 / span 2; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface); border-radius: var(--radius-img); }
.chapter__big a, .chapter__small a { display: block; height: 100%; }
.chapter__big img, .chapter__small img { width: 100%; height: 100%; object-fit: cover; }
.chapter__text { grid-column: 9 / span 4; display: grid; justify-items: start; gap: 18px; }
.chapter__small { grid-column: 9 / span 3; margin: 32px 0 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); border-radius: var(--radius-img); }
.chapter--flip .chapter__big { grid-column: 6 / span 7; }
.chapter--flip .chapter__text { grid-column: 1 / span 4; grid-row: 1; }
.chapter--flip .chapter__small { grid-column: 2 / span 3; grid-row: 2; }
.chapter__no { margin: 0; font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; color: var(--lit); }
.chapter__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.6rem, 1rem + 4vw, 5.4rem); line-height: .92; letter-spacing: -.02em; }
.chapter__dek { margin: 0; font-size: var(--fs-2); color: var(--muted); max-width: 32ch; }
.chapter__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 4px 0 8px; width: 100%; border-top: 1px solid var(--line); padding-top: 16px; }
.chapter__facts dt { font-size: var(--fs-0); color: var(--muted); }
.chapter__facts dd { margin: 2px 0 0; font-weight: 700; }

.issue__fabric {
  max-width: var(--max); margin: clamp(96px, 14vw, 200px) auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center;
}
.issue__fabric-copy { display: grid; justify-items: start; gap: 16px; }
.issue__fabric-copy p:not(.issue__line) { color: var(--muted); max-width: 44ch; margin: 0; }
.issue__h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2.4rem, 1rem + 3.6vw, 4.8rem); line-height: .95; }
.issue__fabric-media { margin: 0; }
.issue__fabric-media video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--surface); filter: grayscale(1); }
.issue__fabric-media figcaption { margin-top: 8px; font-size: .75rem; color: var(--muted); }

.issue__shop { max-width: var(--max); margin: clamp(96px, 14vw, 200px) auto 0; padding: 0 var(--gutter) clamp(72px, 10vw, 140px); }
.issue__shop .issue__h2 { margin-bottom: clamp(28px, 4vw, 48px); }
.issue__more { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 4vw, 56px); }

@media (max-width: 899px) {
  .chapter, .chapter--flip { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 24px; }
  .chapter__big, .chapter--flip .chapter__big { grid-column: 1 / -1; grid-row: auto; }
  .chapter__text, .chapter--flip .chapter__text { grid-column: 1 / -1; grid-row: auto; }
  .chapter__small, .chapter--flip .chapter__small { grid-column: 3 / -1; grid-row: auto; margin: 0; }
  .issue__fabric { grid-template-columns: 1fr; }
}

/* chapters without model photos yet: the studio shots fill the frame like the cards do (their 682x875
   shape is within 3% of the frame's 4:5, so almost nothing is cropped) */
.chapter--studio .chapter__big, .chapter--studio .chapter__small { background: var(--frame, #f2f2f2); }