/* ==========================================================================
   MENS SECTION LAYOUTS
   Three distinct options, all sharing the Lookbook design language.
   ========================================================================== */

/* --- Shared header ------------------------------------------------------- */
.mens-wrap { padding: 64px 32px 120px; border-top: 1px solid var(--line); }
.mens-head { max-width: 1600px; margin: 0 auto 48px; }
.mens-head__eyebrow {
  display: flex; gap: 10px; align-items: center;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px;
}
.mens-head__dot { opacity: .4; }
.mens-head__row {
  display: grid; grid-template-columns: 1fr auto; gap: 24px;
  align-items: end; padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.mens-head__title {
  font-size: clamp(56px, 8vw, 112px); font-weight: 500;
  letter-spacing: -.03em; line-height: .9; margin: 0;
}
.mens-head__switch {
  display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px; background: transparent;
}
.mens-head__opt {
  font-size: 12px; letter-spacing: .04em; padding: 8px 16px; border-radius: 999px;
  color: var(--ink); transition: background 150ms, color 150ms; white-space: nowrap;
}
.mens-head__opt:hover { background: var(--paper-2); }
.mens-head__opt.on { background: var(--ink); color: var(--paper); }
.mens-head__lede {
  font-size: 16px; max-width: 52ch; color: var(--ink); margin: 20px 0 0;
  line-height: 1.5;
}

/* common figure reset for all layouts */
.mens-wrap figure { margin: 0; cursor: zoom-in; position: relative; overflow: hidden; background: var(--paper-2); }
.mens-wrap figure img { transition: transform 700ms cubic-bezier(.2,.7,.2,1); width: 100%; height: 100%; object-fit: cover; display: block; }
.mens-wrap figure:hover img { transform: scale(1.02); }
.mens-wrap figcaption {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   OPTION 1 — EDITORIAL
   ========================================================================== */
.mens-ed { max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; gap: 72px; }

.mens-ed__hero {
  aspect-ratio: 4/5; max-height: 90vh; position: relative;
}
.mens-ed__hero img { filter: saturate(.95); }
.mens-ed__hero figcaption {
  position: absolute; left: 32px; bottom: 32px; color: #efe7d6;
  display: flex; flex-direction: column; gap: 6px; text-transform: none; letter-spacing: 0;
  mix-blend-mode: difference;
}
.mens-ed__heroLabel { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.mens-ed__heroTitle { font-size: clamp(28px, 3.5vw, 48px); font-weight: 500; letter-spacing: -.01em; line-height: 1; }

.mens-ed__stripe {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.mens-ed__stripe > div {
  padding: 18px 20px; display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--line);
}
.mens-ed__stripe > div:last-child { border-right: 0; }
.mens-ed__stripe .k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mens-ed__stripe .v { font-size: 14px; font-weight: 500; }

.mens-ed__pair {
  display: grid; grid-template-columns: 3fr 2fr; gap: 16px;
}
.mens-ed__pair--rev { grid-template-columns: 2fr 3fr; }
.mens-ed__lg { aspect-ratio: 4/5; }
.mens-ed__lg figcaption {
  position: absolute; bottom: 12px; left: 12px;
  background: var(--paper); padding: 6px 10px;
}
.mens-ed__sideCol { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.mens-ed__sideCol figure { aspect-ratio: 4/5; }
.mens-ed__sideCol figcaption {
  padding: 8px 12px 0; background: transparent; position: static;
}

.mens-ed__band { aspect-ratio: 21/9; }
.mens-ed__band figcaption {
  position: absolute; left: 32px; right: 32px; bottom: 24px;
  display: flex; justify-content: space-between; color: #efe7d6;
  mix-blend-mode: difference; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}

.mens-ed__trio {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.mens-ed__trio figure { aspect-ratio: 4/5; }
.mens-ed__trio figcaption {
  padding: 8px 0 0;
}

.mens-ed__runway { border-top: 1px solid var(--line); padding-top: 32px; }
.mens-ed__runwayHead {
  display: flex; justify-content: space-between; margin-bottom: 16px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.mens-ed__runwayRow {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
.mens-ed__runwayRow figure { aspect-ratio: 4/5; }
.mens-ed__runwayRow figcaption {
  position: absolute; top: 8px; left: 8px; background: var(--paper);
  padding: 3px 6px; font-size: 10px;
}

.mens-ed__details { border-top: 1px solid var(--line); padding-top: 32px; }
.mens-ed__detailsHead {
  display: flex; gap: 24px; align-items: baseline; margin-bottom: 20px;
}
.mens-ed__num { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mens-ed__details h3 { font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; margin: 0; letter-spacing: -.01em; }
.mens-ed__detailsGrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.mens-ed__detailsGrid figure { aspect-ratio: 1/1; }
.mens-ed__detailsGrid figcaption { padding: 8px 0 0; }

/* ==========================================================================
   OPTION 2 — CONTACT SHEET
   ========================================================================== */
.mens-cs { max-width: 1600px; margin: 0 auto; }

.mens-cs__meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.mens-cs__meta > div {
  padding: 16px 20px; display: flex; flex-direction: column; gap: 3px;
  border-right: 1px solid var(--line);
}
.mens-cs__meta > div:last-child { border-right: 0; }
.mens-cs__meta .k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mens-cs__meta .v { font-size: 13px; font-weight: 500; }

.mens-cs__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  grid-auto-flow: dense;
}
.mens-cs__frame { aspect-ratio: 4/5; }
.mens-cs__frame--tall { grid-row: span 1; aspect-ratio: 4/5; }
.mens-cs__frame--sq { aspect-ratio: 1/1; }
.mens-cs__frame--wide { grid-column: span 2; aspect-ratio: 21/9; }

.mens-cs__frame figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline;
  padding: 6px 8px; background: var(--paper);
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  border-top: 1px solid var(--line);
}
.mens-cs__n { font-weight: 600; color: var(--ink); }
.mens-cs__c { color: var(--accent); font-weight: 500; }
.mens-cs__l {
  color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-transform: none; letter-spacing: .02em;
}

/* ==========================================================================
   OPTION 3 — LOOKBOOK
   ========================================================================== */
.mens-lb { max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; gap: 120px; }

.mens-lb__spread { position: relative; padding-top: 16px; }
.mens-lb__pageno {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.mens-lb__pageno > span:first-child { font-size: 14px; font-weight: 500; color: var(--ink); }
.mens-lb__ofn { opacity: .6; }
.mens-lb__title {
  font-size: clamp(32px, 4vw, 56px); font-weight: 500;
  letter-spacing: -.02em; margin: 12px 0 24px; line-height: 1;
}

/* Cover spread */
.mens-lb__spread--cover {
  display: grid; grid-template-columns: 5fr 3fr; gap: 32px; align-items: end;
}
.mens-lb__spread--cover .mens-lb__pageno,
.mens-lb__spread--cover .mens-lb__title { grid-column: 2; }
.mens-lb__coverImg { grid-column: 1; grid-row: 1 / span 4; aspect-ratio: 4/5; max-height: 80vh; }
.mens-lb__coverMeta { grid-column: 2; }
.mens-lb__coverMeta p { font-size: 18px; line-height: 1.5; max-width: 34ch; margin: 0 0 16px; }
.mens-lb__credit { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mens-lb__coverEyebrow {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 20px;
}
.mens-lb__coverLede {
  font-size: 16px; max-width: 52ch; color: var(--ink);
  margin: 24px 0 0; line-height: 1.5;
}
.ladies-lb__opener .mens-lb__title,
.mens-lb__spread--cover .mens-lb__title {
  font-size: clamp(56px, 8vw, 112px); font-weight: 500;
  letter-spacing: -.03em; line-height: .9;
}

/* Diptych */
.mens-lb__dip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mens-lb__dip figure { aspect-ratio: 4/5; }

/* Diptych — mixed (portrait + square/landscape). Share a height baseline. */
.mens-lb__dip--mix { grid-template-columns: 4fr 5fr; align-items: stretch; gap: 16px; }
.mens-lb__dip--mix figure { aspect-ratio: auto; height: 68vh; max-height: 820px; }
.mens-lb__dip--mix figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.mens-lb__cap {
  font-size: 16px; max-width: 48ch; margin: 20px 0 0; color: var(--ink);
  line-height: 1.5; font-style: italic; font-weight: 400;
}

/* Triptych */
.mens-lb__tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mens-lb__tri--two { grid-template-columns: repeat(2, 1fr); }
.mens-lb__tri figure { aspect-ratio: 4/5; }

/* Away-studio merged spread — diptych then triptych, close-packed */
.mens-lb__spread--away-studio .mens-lb__dip { margin-bottom: 12px; }
.mens-lb__tri--tight { margin-top: 0; }

/* Walk-wash merged spread — wash study landscape on top, triptych beneath.
   Top image sits at its natural aspect inside the container; standard 12px
   margin (matching the triptych's internal gap) separates it from the row below. */
.mens-lb__spread--walk-wash .mens-lb__washTop {
  aspect-ratio: 1206 / 946;
  margin-bottom: 12px;
}
.mens-lb__spread--walk-wash .mens-lb__washTop img { object-fit: cover; }
.mens-lb__spread--walk-wash .mens-lb__tri--tight { margin-top: 0; }
.mens-lb__spread--walk-wash .mens-lb__tri--tight + .mens-lb__dip--tight { margin-top: 12px; }

/* Walking triptych: crop 10% off the bottom of the first photo.
   Figure keeps its 4/5 aspect; image is sized to 111.111% and anchored to the top
   so the bottom 10% falls off. */
.mens-lb__spread--walk-wash .mens-lb__tri--tight figure:first-child { overflow: hidden; }
.mens-lb__spread--walk-wash .mens-lb__tri--tight figure:first-child img {
  width: 100%;
  height: 111.111%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.mens-lb__dip--tight { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mens-lb__dip--tight figure { aspect-ratio: 4/5; }

/* Full-bleed */
.mens-lb__bleed { aspect-ratio: 16/10; }
.mens-lb__bleed--wide { aspect-ratio: 21/9; }
.mens-lb__bleed img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Weight & Color hero — show the portrait image at natural aspect, uncropped */
.ladies-lb .ladies-lb__wcHero { margin: 0; height: auto; }
.ladies-lb .ladies-lb__wcHero img {
  width: 100%; height: auto; max-height: 92vh;
  object-fit: contain; display: block; background: var(--paper-2);
}
/* Crop-top variant — match neighbor's aspect (w-51.jpg = 1206×1480), trim the top of the image */
.ladies-lb .ladies-lb__wcHero--cropTop { overflow: hidden; aspect-ratio: 1206 / 1480; }
.ladies-lb .ladies-lb__wcHero--cropTop img {
  width: 100%; height: 100%; max-height: none;
  object-fit: cover; object-position: center bottom;
}

/* New York frame — portrait, 15% side margins, whole image shown.
   Used standalone (legacy) and now nested inside the away-studio spread. */
.mens-lb__spread--bleed .mens-lb__bleed {
  aspect-ratio: 1206 / 1502;
  width: 70vw;
  margin-left: calc(50% - 35vw);
  max-height: none;
}
.mens-lb__spread--bleed .mens-lb__bleed img { object-fit: contain; background: var(--paper-2); }

/* Away-studio third row: NYC portrait + Cemetery portrait (crossover from Ladies).
   Two portraits share the 70vw band used by the standalone NY frame. */
.mens-lb__spread--away-studio .mens-lb__nyRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: none;
  margin-top: 12px;
}
.mens-lb__spread--away-studio .mens-lb__nyBleed {
  aspect-ratio: 1206 / 1502;
  width: 100%;
  margin: 0;
  max-height: none;
}
.mens-lb__spread--away-studio .mens-lb__nyBleed img {
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--paper-2);
  display: block;
}

/* Quart (2x2) — uniform version */
.mens-lb__quart { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mens-lb__quart figure { aspect-ratio: 4/5; }

/* Quart (2x2) — MIX: first is square, rest are portrait. Row heights match. */
.mens-lb__quart--mix { grid-template-rows: auto auto; gap: 12px; }
.mens-lb__quart--mix figure { aspect-ratio: auto; height: 46vh; max-height: 560px; }
.mens-lb__quart--mix figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Quart-mix 5-up: 3 across top, 2 across bottom. Used when Marks of Make has
   an extra folded-stack image. */
.mens-lb__quart--mix.mens-lb__quart--five {
  grid-template-columns: repeat(6, 1fr);
}
.mens-lb__quart--mix.mens-lb__quart--five figure:nth-child(1) { grid-column: span 2; height: 75vh; max-height: none; }
.mens-lb__quart--mix.mens-lb__quart--five figure:nth-child(2) { grid-column: span 2; height: 75vh; max-height: none; }
.mens-lb__quart--mix.mens-lb__quart--five figure:nth-child(3) { grid-column: span 2; height: 75vh; max-height: none; }
.mens-lb__quart--mix.mens-lb__quart--five figure:nth-child(1) img,
.mens-lb__quart--mix.mens-lb__quart--five figure:nth-child(2) img,
.mens-lb__quart--mix.mens-lb__quart--five figure:nth-child(3) img { object-position: bottom; }
/* Bottom-left: anchor to top so more of the jacket is visible within the same frame. */
.mens-lb__quart--mix.mens-lb__quart--five figure:nth-child(4) img { object-position: top; }
.mens-lb__quart--mix.mens-lb__quart--five figure:nth-child(4) { grid-column: span 3; height: 78vh; max-height: 946px; }
.mens-lb__quart--mix.mens-lb__quart--five figure:nth-child(5) { grid-column: span 3; height: 78vh; max-height: 946px; }
/* Bottom row was previously staggered; removed so both tiles sit on the same baseline. */
.mens-lb__quart--mix.mens-lb__quart--five { margin-bottom: 0; }
@media (max-width: 900px) {
  .mens-lb__quart--mix.mens-lb__quart--five { margin-bottom: 0; }
}

/* Quart-mix 6-up: 3 across top, 3 across bottom. */
.mens-lb__quart--mix.mens-lb__quart--six {
  grid-template-columns: repeat(3, 1fr);
}

/* Quart-mix 7-up: 3 across top, 4 across bottom (appendix). */
.mens-lb__quart--mix.mens-lb__quart--seven {
  grid-template-columns: repeat(12, 1fr);
}
.mens-lb__quart--mix.mens-lb__quart--seven figure:nth-child(1),
.mens-lb__quart--mix.mens-lb__quart--seven figure:nth-child(2),
.mens-lb__quart--mix.mens-lb__quart--seven figure:nth-child(3) {
  grid-column: span 4; height: 70vh; max-height: 820px;
}
.mens-lb__quart--mix.mens-lb__quart--seven figure:nth-child(4),
.mens-lb__quart--mix.mens-lb__quart--seven figure:nth-child(5),
.mens-lb__quart--mix.mens-lb__quart--seven figure:nth-child(6),
.mens-lb__quart--mix.mens-lb__quart--seven figure:nth-child(7) {
  grid-column: span 3; height: 58vh; max-height: 680px;
}
.mens-lb__quart--mix.mens-lb__quart--seven figure img { object-position: center; }
@media (max-width: 900px) {
  .mens-lb__quart--mix.mens-lb__quart--seven { grid-template-columns: 1fr; }
  .mens-lb__quart--mix.mens-lb__quart--seven figure { grid-column: span 1 !important; height: auto; aspect-ratio: 4/5; }
}

/* ---------------------------------------------------------------------------
   Studio line sheet — now uses the standard triptych pattern; no extra chrome.
--------------------------------------------------------------------------- */

/* Roll call — 5-up horizontal strip with numbered captions */
.mens-lb__roll { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.mens-lb__roll--one { grid-template-columns: minmax(0, 720px); justify-content: center; }
.mens-lb__roll--two { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mens-lb__roll--three { grid-template-columns: repeat(3, 1fr); }
.mens-lb__roll--four { grid-template-columns: repeat(4, 1fr); }
.mens-lb__roll figure { aspect-ratio: 4/5; }
.mens-lb__roll figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mens-lb__roll figcaption {
  position: absolute; top: 10px; left: 10px;
  background: var(--paper); padding: 3px 7px;
  font-size: 10px; font-weight: 600; letter-spacing: .12em;
  color: var(--ink);
}

/* ==========================================================================
   LADIES — denser spreads on top of mens-lb__* tokens.
   ========================================================================== */
.ladies-lb .mens-lb__pageno { justify-content: flex-start; gap: 8px; }

/* 01 — Opener: hero cover + two stacked portraits + meta column */
.ladies-lb__openerGrid {
  display: grid;
  grid-template-columns: 7fr 4fr 4fr;
  gap: 12px;
  align-items: stretch;
}
.ladies-lb__openerGrid figure { height: 78vh; max-height: 920px; }
.ladies-lb__openerGrid figure.ladies-lb__cover { height: auto; max-height: none; }
.ladies-lb__openerGrid figure.ladies-lb__cover img { object-fit: contain; height: auto; background: var(--paper-2); }
.ladies-lb__openerCol { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.ladies-lb__openerCol figure { height: auto; }

/* Solo variant — cover + meta only (no right-column portraits) */
.ladies-lb__openerGrid--solo { grid-template-columns: 8fr 4fr; }
.ladies-lb__openerMeta {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  padding-left: 4px;
}
.ladies-lb__openerMeta p {
  font-size: 17px; line-height: 1.5; margin: 0; color: var(--ink); max-width: 28ch;
}

/* Nine-up editorial grid */
.ladies-lb__nine {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.ladies-lb__nine figure { aspect-ratio: 4/5; }

/* Six-up grid */
.ladies-lb__six {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.ladies-lb__six figure { aspect-ratio: 4/5; }

/* Flatlay grid — 5×2 (currently holds 10 items) */
.ladies-lb__eight {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.ladies-lb__eight figure { aspect-ratio: 1/1; }

/* Masonry — uncropped flatlay layout. Each image keeps its natural aspect,
   packed into columns. */
.ladies-lb__masonry {
  column-count: 3;
  column-gap: 10px;
}
.ladies-lb__masonry figure {
  break-inside: avoid;
  margin: 0 0 10px 0;
  display: block;
  background: var(--paper-2);
}
.ladies-lb .ladies-lb__masonry figure img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 900px) {
  .ladies-lb__masonry { column-count: 2; }
}

/* Bento variant — one wide hero + mixed tiles. 6 cols, fixed row height. */
.ladies-lb__eight--bento {
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 180px;
  grid-auto-flow: dense;
  gap: 10px;
}
.ladies-lb__eight--bento figure {
  aspect-ratio: auto;
  grid-column: span 1; grid-row: span 1;
  height: 100%; margin: 0;
}
.ladies-lb__eight--bento figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ladies-lb__eight--bento .bento-hero {
  grid-column: span 3; grid-row: span 2;
}
/* Rhythm accents */
.ladies-lb__eight--bento figure:nth-of-type(5) { grid-column: span 2; grid-row: span 2; }
.ladies-lb__eight--bento figure:nth-of-type(9) { grid-column: span 3; }
.ladies-lb__eight--bento figure:nth-of-type(10) { grid-column: span 2; }
.ladies-lb__eight--bento figure:nth-of-type(11) { grid-column: span 2; }
@media (max-width: 900px) {
  .ladies-lb__eight--bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 130px; }
  .ladies-lb__eight--bento .bento-hero { grid-column: span 4; grid-row: span 2; }
  .ladies-lb__eight--bento figure:nth-of-type(5) { grid-column: span 2; grid-row: span 2; }
  .ladies-lb__eight--bento figure:nth-of-type(9) { grid-column: span 2; }
}

/* Print & Set: two side-by-side heroes */
.ladies-lb__printSet {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.ladies-lb__printSet figure { aspect-ratio: 4/5; max-height: 720px; }

/* Craft area — 3×2 asymmetric. Mix landscape + portraits. */
.ladies-lb__craft {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto auto;
  gap: 10px;
}
.ladies-lb__craft--a { grid-column: span 3; aspect-ratio: 4/5; }
.ladies-lb__craft--b { grid-column: span 3; aspect-ratio: 4/5; }
.ladies-lb__craft--c { grid-column: span 2; aspect-ratio: 4/5; }
.ladies-lb__craft--e { grid-column: span 4; aspect-ratio: 16/9; }
.ladies-lb__craft--d { grid-column: span 2; aspect-ratio: 4/5; }
.ladies-lb__craft--f { grid-column: span 2; aspect-ratio: 4/5; }
.ladies-lb__craft--wide { grid-column: span 6; aspect-ratio: 21/9; }

/* End sheet — single square, centered */
.ladies-lb__end {
  display: grid; grid-template-columns: minmax(0, 62%); justify-content: center; gap: 12px;
}
.ladies-lb__end--tall { aspect-ratio: 3/5; max-height: 92vh; }
.ladies-lb__end--sq { aspect-ratio: 1/1; }

/* ==========================================================================
   HERITAGE — detail-hero spread: wide macro on top, 4-up row below.
   ========================================================================== */
.heritage-lb__detailHero {
  aspect-ratio: 16/10; margin: 0;
}
.heritage-lb__detailHero img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.heritage-lb__detailRow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-top: 12px;
}
.heritage-lb__detailRow figure { aspect-ratio: 1/1; margin: 0; position: relative; }
.heritage-lb__detailRow figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.heritage-lb__detailRow figure:hover img { transform: scale(1.02); }
.heritage-lb__detailRow figcaption {
  position: absolute; top: 8px; left: 8px; background: var(--paper);
  padding: 3px 7px; font-size: 10px; font-weight: 600; letter-spacing: .12em;
  color: var(--ink);
}
@media (max-width: 900px) {
  .heritage-lb__detailRow { grid-template-columns: repeat(2, 1fr); }
  .heritage-lb__detailHero { aspect-ratio: 4/3; }
}

/* Heritage — combined Archive + Hardware spread.
   Diptych, a small gap, then triptych. Single caption below. */
.mens-lb__spread--archive .mens-lb__dip { margin-bottom: 0; }
.mens-lb__spread--archive .mens-lb__tri { margin-top: 0; }
.heritage-lb__triGap { margin-top: 14px; }

/* Heritage Campaigns spread — full-bleed, portrait-ish, no gaps.
   Override mens-lb__quart--mix (which constrains figures via aspect-ratio). */
.heritage-lb .mens-lb__spread--quart-mix .mens-lb__quart--mix {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  gap: 0;
  grid-template-columns: repeat(4, 1fr);   /* single row, all four side-by-side */
  grid-template-rows: auto;
}
.heritage-lb .mens-lb__spread--quart-mix .mens-lb__quart--mix figure {
  aspect-ratio: 4/5;
  height: auto;
  max-height: none;
  width: 100%;
}
.heritage-lb .mens-lb__spread--quart-mix .mens-lb__quart--mix figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 900px) {
  .heritage-lb .mens-lb__spread--quart-mix .mens-lb__quart--mix {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .mens-wrap { padding: 40px 20px 80px; }
  .mens-head__row { grid-template-columns: 1fr; gap: 16px; }
  .mens-head__switch { justify-self: start; flex-wrap: wrap; }
  .mens-ed__pair, .mens-ed__pair--rev { grid-template-columns: 1fr; }
  .mens-ed__stripe { grid-template-columns: repeat(2, 1fr); }
  .mens-ed__stripe > div:nth-child(2) { border-right: 0; }
  .mens-ed__trio { grid-template-columns: 1fr; }
  .mens-ed__runwayRow { grid-template-columns: repeat(3, 1fr); }
  .mens-ed__detailsGrid { grid-template-columns: repeat(2, 1fr); }
  .mens-cs__grid { grid-template-columns: repeat(3, 1fr); }
  .mens-cs__frame--wide { grid-column: span 2; }
  .mens-lb__spread--cover { grid-template-columns: 1fr; }
  .mens-lb__spread--cover .mens-lb__pageno,
  .mens-lb__spread--cover .mens-lb__title { grid-column: 1; }
  .mens-lb__coverImg { grid-column: 1; grid-row: auto; }
  .mens-lb__tri { grid-template-columns: 1fr; }
  .mens-lb__dip, .mens-lb__quart, .mens-lb__quart--mix { grid-template-columns: 1fr; }
  .mens-lb__dip--mix { grid-template-columns: 1fr; }
  .mens-lb__dip--mix figure { height: auto; aspect-ratio: 4/5; }
  .mens-lb__quart--mix figure { height: auto; aspect-ratio: 4/5; }
  .mens-lb__roll { grid-template-columns: repeat(2, 1fr); }
  .ladies-lb__openerGrid { grid-template-columns: 1fr; }
  .ladies-lb__openerGrid figure { height: auto; aspect-ratio: 4/5; }
  .ladies-lb__nine, .ladies-lb__six { grid-template-columns: repeat(2, 1fr); }
  .ladies-lb__eight { grid-template-columns: repeat(2, 1fr); }
  .ladies-lb__printSet { grid-template-columns: 1fr; }
  .ladies-lb__craft { grid-template-columns: repeat(2, 1fr); }
  .ladies-lb__craft--a, .ladies-lb__craft--b, .ladies-lb__craft--c,
  .ladies-lb__craft--d, .ladies-lb__craft--e, .ladies-lb__craft--f,
  .ladies-lb__craft--wide { grid-column: span 1; aspect-ratio: 4/5; }
  .ladies-lb__end { grid-template-columns: 1fr; }
  .ladies-lb__end--tall, .ladies-lb__end--sq { aspect-ratio: 4/5; max-height: none; }
}