/* ============================================================
   pages-art.css — Seats of Hope + The Art of the Wild
   Page-specific styles only. Shared system lives in the other
   sheets and is not edited.
   ============================================================ */

/* ============================================================
   SHARED — chrome adjustments scoped to these pages
   ============================================================ */
/* spec §11: on mobile the Give CTA is the sticky bottom bar, not the
   header pill — below 900px the pill wraps and collides with the brand */
@media (max-width: 899px) {
  .site-header .btn-give { display: none; }
}

/* ============================================================
   SHARED — photo-hero variants
   ============================================================ */
/* the meta line is a flex sibling of the content; without wrapping it
   steals width from the H1 on mobile */
.photo-hero { flex-wrap: wrap; }

.photo-hero--tall { min-height: 70svh; }
@media (min-width: 900px) {
  .photo-hero--tall { min-height: 86svh; }
}
.photo-hero--tall .photo-hero__img::after {
  background: linear-gradient(to top,
    rgba(6, 24, 28, .94) 0%,
    rgba(6, 24, 28, .46) 55%,
    rgba(6, 24, 28, .5) 100%);
}
.photo-hero--tall .photo-hero__content { text-shadow: 0 1px 28px rgba(6, 24, 28, .6); }
.photo-hero--tall .lede { max-width: 34ch; text-wrap: balance; }

.photo-hero__meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lichen);
  padding: 0 var(--pad-x) calc(var(--tile) * 1.25);
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
}
@media (min-width: 900px) {
  .photo-hero--tall .photo-hero__content { padding-bottom: calc(var(--tile) * 4); }
  .photo-hero__meta {
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    text-align: right;
    padding-bottom: calc(var(--tile) * 1.5);
  }
}

/* margin-note + offset body — the asymmetric intro register */
.margin-note {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lichen);
  line-height: 2.1;
  margin-bottom: calc(var(--tile) * 1.5);
}
.surface-light .margin-note { color: var(--text-on-light-mute); }
.margin-note .rule {
  display: block;
  width: 48px;
  border-top: 1px solid var(--rule-dark);
  margin-block: 10px;
}
.surface-light .margin-note .rule { border-top-color: var(--rule-light); }
.offset-body { grid-column: 1 / -1; }
.offset-body p {
  font-size: var(--lede);
  line-height: 1.45;
  max-width: 58ch;
}
.offset-body p + p { margin-top: 1.1em; }
@media (min-width: 900px) {
  .margin-note { grid-column: 1 / 4; align-self: start; margin-bottom: 0; }
  .offset-body { grid-column: 5 / 12; }
}

/* ============================================================
   SEATS OF HOPE — the bench spreads
   Full-width alternating editorial rows. Ghost numeral + label.
   ============================================================ */
.bench-spread { align-items: end; }
.bench-spread + .bench-spread { margin-top: calc(var(--tile) * 4.5); }

.bench-spread__photo { grid-column: 1 / -1; }
.bench-spread__aside { grid-column: 1 / -1; margin-top: calc(var(--tile) * 1.25); }

.bench-num {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-weight: 300;
  font-size: clamp(4.5rem, 9vw, 8.5rem);
  line-height: .78;
  letter-spacing: -.03em;
  color: rgba(237, 238, 234, .13);
  margin-bottom: -.12em;
  user-select: none;
}

.bench-story {
  margin-top: 18px;
  font-size: var(--small);
  line-height: 1.65;
  color: var(--text-on-dark-mute);
  max-width: 42ch;
}

@media (min-width: 900px) {
  .bench-spread__photo { grid-column: 1 / 8; grid-row: 1; }
  .bench-spread__aside { grid-column: 9 / 13; grid-row: 1; align-self: end; margin-top: 0; }

  .bench-spread--flip .bench-spread__photo { grid-column: 6 / 13; }
  .bench-spread--flip .bench-spread__aside { grid-column: 1 / 5; align-self: start; padding-top: calc(var(--tile) * 2); }

  /* let the page breathe unevenly — each spread lands differently */
  .bench-spread--wide .bench-spread__photo { grid-column: 1 / 9; }
  .bench-spread--flip.bench-spread--wide .bench-spread__photo { grid-column: 5 / 13; }
  .bench-spread--flip.bench-spread--wide .bench-spread__aside { grid-column: 1 / 4; }
}

/* ============================================================
   SEATS OF HOPE — the artist
   Pull-quote-scale name. No invented quotes.
   ============================================================ */
.artist-section .eyebrow { margin-bottom: 18px; }

.artist-name {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-weight: 300;
  font-size: clamp(2.75rem, 7.5vw, 6.75rem);
  line-height: .96;
  letter-spacing: -.02em;
  color: var(--ink-deep);
  max-width: 10ch;
}

.artist-meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-on-light-mute);
  margin-top: 22px;
  line-height: 2;
}

.artist-grid { margin-top: calc(var(--tile) * 2.5); align-items: start; }
.artist-grid__portrait { grid-column: 1 / -1; }
.artist-grid__body { grid-column: 1 / -1; margin-top: calc(var(--tile) * 1.5); }
.artist-grid__body p { max-width: 52ch; }
.artist-grid__body p + p { margin-top: 1.1em; }
.artist-grid__body .lede { color: var(--text-on-light); }

@media (min-width: 900px) {
  .artist-grid__portrait { grid-column: 1 / 6; grid-row: 1; }
  .artist-grid__body { grid-column: 7 / 12; grid-row: 1; margin-top: 0; align-self: center; }
}

/* the craft — two detail photographs, diagonal flow */
.artist-craft { margin-top: calc(var(--tile) * 2.5); align-items: start; }
.artist-craft__a { grid-column: 1 / -1; }
.artist-craft__b { grid-column: 1 / -1; margin-top: calc(var(--tile) * 1.25); }
@media (min-width: 900px) {
  .artist-craft { margin-top: calc(var(--tile) * 3.5); }
  .artist-craft__a { grid-column: 2 / 7; margin-top: 0; }
  .artist-craft__b { grid-column: 8 / 13; margin-top: calc(var(--tile) * 3.5); }
}

/* ============================================================
   SEATS OF HOPE — how it works. A line, not three cards.
   ============================================================ */
.process-grid { align-items: center; }
.process-grid__copy { grid-column: 1 / -1; }
.process-grid__photo { grid-column: 1 / -1; margin-top: calc(var(--tile) * 2); }
@media (min-width: 900px) {
  .process-grid__copy { grid-column: 1 / 8; }
  .process-grid__photo { grid-column: 9 / 13; margin-top: 0; }
  .process-line { flex-wrap: nowrap; font-size: .8125rem; }
}
.process-grid__copy .h2 { margin-block: 16px 0; max-width: 14ch; }

.process-line {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: calc(var(--tile) * 2.25);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(.75rem, 1.4vw, .9375rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-deep);
}
.process-line .dash {
  flex: 1 1 28px;
  min-width: 20px;
  border-top: 1px solid var(--rule-light);
  margin-top: .6em;
}
.process-step small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .75rem;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--text-on-light-mute);
  margin-top: 8px;
  max-width: 20ch;
}

/* ============================================================
   SEATS OF HOPE — sponsorship (#sponsor)
   ============================================================ */
.sponsor-grid { align-items: start; row-gap: calc(var(--tile) * 2.5); }
.sponsor-grid__ask { grid-column: 1 / -1; }
.sponsor-grid__form { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .sponsor-grid__ask { grid-column: 1 / 7; }
  .sponsor-grid__form { grid-column: 8 / 13; }
}

.sponsor-grid__ask .h2 { margin-block: 16px 20px; max-width: 16ch; }
.sponsor-grid__ask .lede { color: var(--text-on-dark-mute); max-width: 48ch; }

.benefit-kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lichen);
  margin-top: calc(var(--tile) * 2);
}
.benefit-list {
  list-style: none;
  padding: 0;
  margin-top: 12px;
  max-width: 54ch;
}
.benefit-list li {
  border-top: 1px solid var(--rule-dark);
  padding-block: 13px;
  font-size: var(--small);
  line-height: 1.6;
  color: var(--chalk);
}
.benefit-list li:last-child { border-bottom: 1px solid var(--rule-dark); }

.sponsor-grid__ask .footnote { margin-top: calc(var(--tile) * 1.75); }

/* the pack — the big download */
.pack-cta {
  margin-top: calc(var(--tile) * 2);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 40px);
  max-width: 54ch;
}
.pack-cta__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-weight: 400;
  font-size: var(--h2);
  line-height: 1.1;
}
.pack-cta__meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lichen);
  margin-top: 12px;
}
.pack-cta .btn { margin-top: 24px; }

/* the enquiry form */
.sponsor-form__title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lichen);
  margin-bottom: 22px;
}
.sponsor-form .btn { width: 100%; min-height: 56px; }
.sponsor-form__fine {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--lichen);
  text-align: center;
}

/* ============================================================
   SEATS OF HOPE — the empty fifth slot, closing ask
   ============================================================ */
.fifth-grid { align-items: end; row-gap: calc(var(--tile) * 2); }
.fifth-grid__head { grid-column: 1 / -1; }
.fifth-grid__card { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .fifth-grid__head { grid-column: 1 / 6; align-self: center; }
  .fifth-grid__card { grid-column: 7 / 13; }
}
.fifth-grid .seat-card { width: 100%; }
.fifth-grid__head .display-l { max-width: 12ch; }
.fifth-grid__head p { margin-top: 20px; color: var(--text-on-dark-mute); max-width: 38ch; }

/* ============================================================
   THE ART OF THE WILD — split hero
   ============================================================ */
.art-hero {
  padding-top: calc(76px + var(--space-section) * .55);
  padding-bottom: calc(var(--space-section) * .6);
}
.art-hero .grid { align-items: end; }
.art-hero__copy { grid-column: 1 / -1; }
.art-hero__photo { grid-column: 1 / -1; margin-top: calc(var(--tile) * 2); }
@media (min-width: 900px) {
  .art-hero__copy { grid-column: 1 / 7; grid-row: 1; padding-bottom: calc(var(--tile) * 1.5); }
  .art-hero__photo { grid-column: 8 / 13; grid-row: 1; margin-top: 0; }
}
.art-hero .eyebrow { margin-bottom: 20px; }
.art-hero .lede {
  margin-top: 24px;
  color: var(--text-on-dark-mute);
  max-width: 44ch;
}

/* ============================================================
   THE ART OF THE WILD — the three strands, an editorial sequence
   ============================================================ */
.strand { align-items: center; padding-block: calc(var(--space-section) * .55); }
.strand + .strand { border-top: 1px solid var(--rule-light); }

.strand__label {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-on-light-mute);
  margin-bottom: 18px;
}
.strand__copy { grid-column: 1 / -1; }
.strand__photo { grid-column: 1 / -1; margin-top: calc(var(--tile) * 1.5); }
.strand__copy .h2 { max-width: 16ch; }
.strand__copy p { margin-top: 18px; max-width: 46ch; color: var(--text-on-light-mute); }
.strand__copy .link {
  display: inline-block;
  margin-top: 22px;
  font-weight: 500;
  font-size: var(--small);
}

@media (min-width: 900px) {
  .strand__label { grid-column: 1 / 3; grid-row: 1; align-self: start; margin-bottom: 0; padding-top: 6px; }
  .strand--photoleft .strand__photo { grid-column: 3 / 8; grid-row: 1; margin-top: 0; }
  .strand--photoleft .strand__copy { grid-column: 9 / 13; grid-row: 1; }
  .strand--photoright .strand__copy { grid-column: 3 / 8; grid-row: 1; }
  .strand--photoright .strand__photo { grid-column: 9 / 13; grid-row: 1; margin-top: 0; }
}

/* the Wild Art strand carries no photo — the type does the work */
.strand--statement .strand__copy { grid-column: 1 / -1; }
.strand--statement .strand__copy p:first-child {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-weight: 400;
  font-size: var(--h2);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink-deep);
  margin-top: 0;
  max-width: 26ch;
}
.strand--statement .strand__note {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-on-light-mute);
  margin-top: calc(var(--tile) * 1.5);
}
@media (min-width: 900px) {
  .strand--statement .strand__copy { grid-column: 4 / 12; grid-row: 1; }
}

/* ============================================================
   THE ART OF THE WILD — competition archive (past tense)
   ============================================================ */
.comp-grid { align-items: start; row-gap: calc(var(--tile) * 2); }
.comp-grid__copy { grid-column: 1 / -1; }
.comp-grid__card { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .comp-grid__copy { grid-column: 1 / 6; }
  .comp-grid__card { grid-column: 7 / 13; }
}
.comp-grid__copy .h2 { margin-block: 16px 20px; max-width: 14ch; }
.comp-grid__copy p { color: var(--text-on-dark-mute); max-width: 44ch; }
.comp-grid__copy p + p { margin-top: 1em; }
.comp-grid__copy .btn { margin-top: calc(var(--tile) * 1.5); }

.comp-card {
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 44px);
  font-family: var(--font-mono);
  font-size: var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.comp-card__status {
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--chalk);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-dark);
}
.comp-card__rows { margin-top: 4px; }
.comp-card__rows div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 13px;
  color: var(--lichen);
  line-height: 1.7;
}
.comp-card__rows div + div { border-top: 1px solid var(--rule-dark); }
.comp-card__rows dt { flex: 0 0 auto; }
.comp-card__rows dd { margin: 0; text-align: right; color: var(--chalk); }
.comp-card__next {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-dark);
  font-style: italic;
  text-transform: none;
  letter-spacing: .04em;
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-size: 1.0625rem;
  color: var(--lichen);
}