/* Better One — showcase: four campaign spreads, four rhythms */

.show { padding-block: clamp(5rem, 11vw, 11rem) clamp(5rem, 10vw, 10rem); overflow: clip; }

.show__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); align-items: end; gap: 1.75rem var(--gutter);
  padding-inline: var(--gutter); margin-bottom: clamp(4rem, 9vw, 9rem);
}
.show__head .eyebrow { grid-column: 1 / -1; }
.show__head .display { max-width: 10.5ch; }
.show__intro { display: grid; gap: 1.1rem; padding-bottom: .6rem; }
.show__intro > p:first-child { font: 400 clamp(1.1rem, 1.5vw, 1.4rem)/1.36 var(--f-wide); letter-spacing: -.012em; }

/* ---------- shared spread anatomy ---------- */
.spread {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end;
  column-gap: clamp(1rem, 2vw, 2rem); padding-inline: var(--gutter); margin-top: clamp(5rem, 13vw, 14rem);
}
.show__head + .spread { margin-top: 0; }
.spread__text { position: relative; z-index: 1; display: grid; gap: 1.1rem; align-content: end; padding-bottom: clamp(.5rem, 2vw, 2rem); }
.spread__no {
  font: 900 clamp(4.5rem, 11vw, 11rem)/.78 var(--f-wide); font-stretch: 125%; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(237, 230, 215, .55);
}
.spread__arena { font: 500 .72rem/1 var(--f-mono); letter-spacing: .15em; text-transform: uppercase; color: var(--accent); }
.spread h3 { max-width: 11ch; font: 400 clamp(2.3rem, 4.7vw, 4.8rem)/.96 var(--f-serif); letter-spacing: -.022em; text-wrap: balance; }
.spread__line { max-width: 30ch; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.45; color: var(--muted); }
.js .spread .plate[data-reveal="plate"].is-in:hover > img { transform: scale(1.035); }

/* 01 · fashion: tall plate left, words right */
.spread--fashion .plate { grid-column: 1 / span 6; aspect-ratio: 4 / 5; }
.spread--fashion .spread__text { grid-column: 8 / span 5; }

/* 02 · product: ghost word behind a square plate */
.spread--product .plate { grid-column: 6 / span 7; grid-row: 1; aspect-ratio: 1; z-index: 1; }
.spread--product .spread__text { grid-column: 1 / span 4; grid-row: 1; }
.spread__ghost {
  position: absolute; left: var(--gutter); top: -.36em; z-index: 0; pointer-events: none; white-space: nowrap;
  font: 900 20.5vw/.8 var(--f-wide); font-stretch: 125%; letter-spacing: -.05em; text-transform: uppercase; color: var(--ink-3);
}

/* 03 · cinema: full-bleed letterbox with the words inside the frame */
.spread--cinema { display: block; padding-inline: 0; }
.spread--cinema .plate { width: 100%; aspect-ratio: 21 / 9; min-height: 30rem; }
.spread--cinema .plate::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(180deg, rgba(11, 10, 9, 0), rgba(11, 10, 9, .88)); }
.spread--cinema .plate__tag { top: calc(var(--gutter) * .6); bottom: auto; left: var(--gutter); }
.spread--cinema .spread__text {
  position: absolute; inset: auto var(--gutter) clamp(1.5rem, 3.4vw, 3.5rem); padding: 0;
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: .9rem;
}
.spread--cinema .spread__no { grid-row: 1 / span 2; }
.spread--cinema .spread__arena { grid-column: 2; align-self: end; }
.spread--cinema h3 { grid-column: 2; max-width: none; }
.spread--cinema .spread__line { grid-column: 3; grid-row: 2; color: rgba(237, 230, 215, .82); }

/* 04 · editorial: the cover, hung right */
.spread--editorial .spread__text { grid-column: 1 / span 5; }
.spread--editorial .plate { grid-column: 7 / span 5; aspect-ratio: 3 / 4; }

@media (max-width: 800px) {
  .show__head { grid-template-columns: minmax(0, 1fr); }
  .spread { row-gap: 1.75rem; }
  .spread--fashion .plate, .spread--product .plate, .spread--editorial .plate,
  .spread--fashion .spread__text, .spread--product .spread__text, .spread--editorial .spread__text { grid-column: 1 / -1; grid-row: auto; }
  .spread--editorial .plate { order: -1; }
  .spread--product .plate { margin-top: 9vw; }
  .spread__ghost { top: -.3em; font-size: 23vw; }
  .spread__no { font-size: 4rem; }
  .spread--cinema .plate { aspect-ratio: 4 / 5; min-height: 0; }
  .spread--cinema .plate > img { object-position: 70% 50%; }
  .spread--cinema .plate::after { display: none; }
  .spread--cinema .spread__text { position: relative; inset: auto; display: grid; grid-template-columns: minmax(0, 1fr); padding: 1.75rem var(--gutter) 0; }
  .spread--cinema .spread__no, .spread--cinema .spread__arena, .spread--cinema h3, .spread--cinema .spread__line { grid-column: 1; grid-row: auto; }
  .spread--cinema .spread__line { color: var(--muted); }
}