/* ==========================================================================
   MUDDL. — case study layout (shared by ARDA and BUA)
   ========================================================================== */

/* --- Project head --------------------------------------------------------- */

.project-head {
  padding-block: clamp(8rem, 20vh, 15rem) clamp(2rem, 5vw, 4rem);
}

.project-head__index {
  display: block;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--fg-46);
}

.project-title {
  font-stretch: 108%;
}

.project-head__foot {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1rem;
  border-top: 1px solid var(--fg-14);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
}

/* --- Full-bleed plate ----------------------------------------------------- */

.bleed {
  width: 100%;
  margin: 0;
}

.bleed .media {
  width: 100%;
}

.bleed__caption {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-top: 0.9rem;
  color: var(--fg-46);
}

/* Hero plate carries the supplied frame's own proportion, uncropped. */
.media--hero {
  aspect-ratio: 2246 / 1108;
}

/* --- Chapters ------------------------------------------------------------- */

.chapter {
  padding-block: var(--band);
}

.chapter--tight {
  padding-block: var(--band-tight);
}

.chapter__grid {
  row-gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.chapter__label {
  grid-column: 1 / span 3;
  padding-top: 0.9rem;
  border-top: 1px solid var(--fg-14);
}

.chapter__body {
  grid-column: 5 / span 7;
}

.chapter__lede {
  margin-bottom: 1.5em;
}

.chapter__body .body:first-child {
  margin-top: 0;
}

/* Wide variant — copy running closer to full measure */
.chapter__body--wide {
  grid-column: 5 / span 8;
}

/* --- Attribute list (the four ARDA qualities) ----------------------------- */

.attrs {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--fg-14);
}

.attrs li {
  padding-block: clamp(0.85rem, 1.6vw, 1.35rem);
  border-bottom: 1px solid var(--fg-14);
  font-size: clamp(1.35rem, 2.6vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  transition: color var(--fast) linear;
}

/* --- Identity display ----------------------------------------------------- */

.identity {
  padding-block: var(--band) var(--band-tight);
}

.identity__grid {
  row-gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
}

.identity__copy {
  grid-column: 1 / span 4;
}

.identity__stage {
  grid-column: 6 / span 7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 7vw, 6rem);
  border: 1px solid var(--fg-14);
}

.identity__stage img,
.identity__stage svg {
  width: 100%;
  height: auto;
}

.identity__stage--symbol img {
  max-width: clamp(120px, 22vw, 300px);
}

.identity__row {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  row-gap: clamp(1.25rem, 2.5vw, 2rem);
}

.identity__cell {
  grid-column: span 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 4.5vw, 3.5rem);
  border: 1px solid var(--fg-14);
}

.identity__cell img,
.identity__cell svg {
  width: 100%;
  height: auto;
  max-width: 460px;
}

.identity__cell--tight svg {
  max-width: 340px;
}

/* --- Paired plates -------------------------------------------------------- */

.pair {
  padding-block: var(--band-tight);
}

.pair__grid {
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
}

.pair__item {
  grid-column: span 6;
}

.pair__item figcaption {
  color: var(--fg-46);
}

/* --- Offset plate (image + note) ------------------------------------------ */

.offset {
  padding-block: var(--band-tight);
}

.offset__grid {
  row-gap: clamp(2rem, 4vw, 3rem);
  align-items: end;
}

.offset__media {
  grid-column: 1 / span 8;
}

.offset__note {
  grid-column: 10 / span 3;
  padding-bottom: 0.5rem;
}

.offset--right .offset__media {
  grid-column: 5 / span 8;
}

.offset--right .offset__note {
  grid-column: 1 / span 3;
}

/* --- Opening plate: image, then the lockup on its own line ---------------- */

.opening {
  padding-block: var(--band-tight);
}

.opening__media {
  grid-column: 1 / span 8;
}

/* Starts back at column 1, so the grid drops it onto the next row. */
.opening__lockup {
  grid-column: 1 / span 4;
  margin-top: clamp(2rem, 4vw, 3.25rem);
  padding-top: clamp(1rem, 1.6vw, 1.5rem);
  border-top: 1px solid var(--fg-14);
}

.opening__lockup img {
  width: 100%;
  max-width: 300px;
  height: auto;
}

/* --- Palette (BUA) -------------------------------------------------------- */

.palette {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  row-gap: clamp(1.5rem, 3vw, 2rem);
}

.swatch {
  grid-column: span 3;
}

.swatch__chip {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--fg-14);
}

.swatch__name {
  margin-top: 0.85rem;
}

.swatch__hex {
  margin-top: 0.3rem;
  color: var(--fg-46);
  font-variant-numeric: tabular-nums;
}

/* --- Closing statement ---------------------------------------------------- */

.closing {
  padding-block: var(--band);
}

.closing__line {
  font-size: clamp(1.9rem, 5.2vw, 5.2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.042em;
  max-width: 22ch;
  text-wrap: balance;
}

.closing__line + .closing__line {
  margin-top: 0.22em;
  color: var(--fg-46);
  font-size: clamp(1.35rem, 2.9vw, 2.9rem);
  letter-spacing: -0.03em;
  max-width: 30ch;
}

/* --- Project pagination --------------------------------------------------- */

.pagination {
  padding-block: clamp(3rem, 7vw, 6rem);
  border-top: 1px solid var(--fg-14);
}

.pagination__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.pagination__next {
  text-align: right;
}

.pagination__name {
  display: block;
  margin-top: 0.6rem;
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 700;
  font-stretch: 106%;
  letter-spacing: -0.045em;
  line-height: 0.9;
  transition: color var(--mid) var(--ease);
}

.pagination__link:hover .pagination__name,
.pagination__link:focus-visible .pagination__name {
  color: var(--accent);
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (max-width: 1024px) {
  .chapter__label {
    grid-column: 1 / span 12;
  }

  .chapter__body,
  .chapter__body--wide {
    grid-column: 1 / span 10;
  }

  .identity__copy {
    grid-column: 1 / span 6;
  }

  .identity__stage {
    grid-column: 1 / span 12;
  }

  .offset__media {
    grid-column: 1 / span 10;
  }

  .offset--right .offset__media {
    grid-column: 3 / span 10;
  }

  .offset__note,
  .offset--right .offset__note {
    grid-column: 1 / span 6;
    padding-bottom: 0;
  }

  .swatch {
    grid-column: span 3;
  }

  .opening__media {
    grid-column: 1 / span 10;
  }

  .opening__lockup {
    grid-column: 1 / span 6;
  }
}

@media (max-width: 700px) {
  .opening__media,
  .opening__lockup {
    grid-column: 1 / span 12;
  }

  .opening__lockup img {
    max-width: 220px;
  }

  .chapter__body,
  .chapter__body--wide,
  .identity__copy,
  .offset__note,
  .offset--right .offset__note {
    grid-column: 1 / span 12;
  }

  .identity__cell {
    grid-column: 1 / span 12;
  }

  .pair__item {
    grid-column: 1 / span 12;
  }

  .swatch {
    grid-column: span 6;
  }

  .attrs li {
    padding-block: 0.85rem;
  }

  .pagination__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
  }

  .pagination__next {
    text-align: left;
  }
}

/* --- Verdantra surface (BUA's own ground, used inside its case study) ------ */

[data-surface='verdantra'] {
  --accent: var(--accent-on-dark);
  --fg: #fffcf2;
  --bg: #223631;
  --fg-70: rgba(255, 252, 242, 0.72);
  --fg-46: rgba(255, 252, 242, 0.56);
  --fg-14: rgba(255, 252, 242, 0.18);
  --fg-08: rgba(255, 252, 242, 0.09);
}

.identity__stage--glyph img {
  max-width: clamp(110px, 16vw, 220px);
}

.swatch__chip--verdantra { background: #223631; }
.swatch__chip--driftstone { background: #ccc5b9; }
.swatch__chip--seabhac { background: #fffcf2; }
.swatch__chip--ogham { background: #252422; }

/* --- Mobile: give the full-bleed plates real presence --------------------- */

@media (max-width: 700px) {
  .bleed .media--pano {
    aspect-ratio: 5 / 4;
  }

  /* hold the watch in frame when the panorama is cropped to portrait */
  .bleed .media--pano img {
    object-position: 38% 50%;
  }

  .bleed .media--hero {
    aspect-ratio: 4 / 5;
  }

  .bleed .media--hero img {
    object-position: 52% 42%;
  }

  .bleed .media[style*='2615'] {
    aspect-ratio: 4 / 3 !important;
  }
}

/* Same rule for consecutive chapters running on one ground. */
.chapter:not(.surface) + .chapter:not(.surface) {
  padding-top: calc(var(--band) * 0.5);
}