/* Provenance page (provenance.html): olive hero with a wall of five framed artworks over an ink floor, "What is
   provenance?", the four-step artwork journey on a gold line, what Artcestry preserves (ink, Friedrich's Monk by
   the Sea behind), who holds the record (olive), the Night Watch call to action, then the shared membership block.
   Design source: Figma "Provenance v1.2" (1440 wide; sizes below are the design's at that width, fluid under it).
   Tokens come from styles.css; the page is not a .site-page (its header stays olive, continuing the hero). */

.provenance-page { background: var(--cream); color: var(--text); }
.prov-hero, .prov-preserve, .prov-who, .prov-start { --focus: var(--gold-light); }

/* Header: olive, continuing the hero; cream call to action; the current item carries a gold rule. */
.provenance-page .site-header,
.provenance-page .site-header--scrolled,
.provenance-page .site-header--menu-open { background: var(--olive); box-shadow: 0 1px 0 rgba(251, 243, 220, .12); -webkit-backdrop-filter: none; backdrop-filter: none; }
.provenance-page .site-header__cta { background: var(--cream); color: var(--olive); }
.provenance-page .site-header__cta:hover { background: #fff8e6; }
.provenance-page .site-header__link[aria-current="page"] { color: var(--on-dark); }
.provenance-page .site-header__link[aria-current="page"]::after { transform: scaleX(1); background: var(--gold-light); }
.provenance-page main { padding-top: 80px; }
html:not(.js) .provenance-page .site-header:not(.site-header--js) { position: relative; }
html:not(.js) .provenance-page .site-header:not(.site-header--js) + main { padding-top: 0; }
.provenance-page .site-footer { margin-top: 0; }

/* Shared pieces ---------------------------------------------------------- */

/* Centred label flanked by two short gold rules (design: 12px semibold caps, 2.88px tracking, 40px rules). */
.prov-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font: 600 12px/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}
.prov-eyebrow::before, .prov-eyebrow::after { content: ""; flex: none; width: 40px; height: 1px; background: var(--gold-2); }
.prov-eyebrow--olive { color: var(--olive); }
.prov-eyebrow--olive::before, .prov-eyebrow--olive::after { display: none; }

/* Page buttons: the design sets them in 15px medium sentence case, 54px tall. */
.prov-btn { min-height: 54px; padding: 0 32px; font: 500 15px/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
.btn--gold { background: var(--gold-2); color: var(--ink); }
.btn--gold:hover { background: #c79d36; }
.prov-hero .btn--outline-light, .prov-start .btn--outline-light { border-color: rgba(251, 243, 220, .45); }
.prov-hero .btn--outline-light:hover, .prov-start .btn--outline-light:hover { border-color: var(--on-dark); }

/* Hero ------------------------------------------------------------------- */

.prov-hero { background: var(--olive); color: var(--on-dark); padding-top: 108px; overflow: hidden; }
.prov-hero__inner { text-align: center; }
.prov-hero__title {
  max-width: 1034px;
  margin: 32px auto 0;
  /* The design's 100.8px is set in Noto Serif Light; the site ships Regular, which is wider, so 94px keeps the
     design's two lines ("history. Give it a future." measures 992px at 94px, under the 1034px column). */
  font: 400 clamp(40px, 6.5vw, 94px)/1 var(--serif);
  letter-spacing: -.025em;
  color: var(--on-dark);
}
.prov-hero__lede {
  max-width: 556px;
  margin: 32px auto 0;
  font: 400 clamp(17px, 1.67vw, 24px)/1.24 var(--sans);
  color: rgba(251, 243, 220, .86);
}
.prov-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 47px; }

/* Wall: five framed paintings hung on a gold rail, their bottoms resting on the ink floor below. Widths and
   gaps are the design's shares of 1440 (frames 170, 200, 259, 200 and 230 wide, 43px apart, 104px margins);
   each frame's lift above the row's bottom edge is also a share of the width, so the hang scales. */
.prov-wall {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3%;
  margin: 106px 0 -90px;
  padding: 0 7.2%;
}
.prov-wall::before { content: ""; position: absolute; left: 0; right: 0; top: 50.8%; height: 1px; background: rgba(184, 145, 46, .7); z-index: -1; }
.prov-wall__frame {
  flex: 0 1 auto;
  display: grid;
  padding: 10px;
  background: var(--ink);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}
.prov-wall__frame--gold { background: var(--gold-2); }
.prov-wall__frame img { width: 100%; height: 100%; object-fit: cover; }
.prov-wall__frame--1 { width: 11.8%; aspect-ratio: 170 / 207.5; margin-bottom: 1.1%; }
.prov-wall__frame--2 { width: 13.9%; aspect-ratio: 200 / 236; margin-bottom: 2.85%; }
.prov-wall__frame--3 { width: 18%; aspect-ratio: 259 / 319; margin-bottom: 2%; }
.prov-wall__frame--4 { width: 13.9%; aspect-ratio: 200 / 260; margin-bottom: 1.3%; }
.prov-wall__frame--5 { width: 16%; aspect-ratio: 230 / 160; margin-bottom: 2%; }

.prov-hero__band { background: var(--ink); padding: 150px var(--gutter) 56px; text-align: center; }
.prov-hero__quote { font: 400 clamp(20px, 1.8vw, 26px)/1.38 var(--serif); color: var(--on-dark); }

/* What is provenance? ---------------------------------------------------- */

.prov-what { background: var(--cream); padding: 140px 0; }
.prov-what__inner { max-width: calc(920px + 2 * var(--gutter)); text-align: center; }
.prov-what__title {
  margin-top: 32px;
  font: 400 clamp(30px, 4vw, 58px)/1.16 var(--serif);
  letter-spacing: -.015em;
  color: var(--ink);
}
.prov-what__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 90px;
  margin-top: 55px;
  padding-top: 40px;
  border-top: 1px solid rgba(32, 30, 29, .16);
  text-align: left;
  font: 400 clamp(18px, 1.67vw, 24px)/1.19 var(--serif);
  color: rgba(32, 30, 29, .78);
}
.prov-what__column--olive { color: var(--olive); }

/* Journey ---------------------------------------------------------------- */

.prov-journey { background: var(--cream); padding: 121px 0 140px; }
.prov-journey__inner { max-width: calc(1120px + 2 * var(--gutter)); }
.prov-journey__title {
  text-align: center;
  font: 400 clamp(32px, 4.4vw, 64px)/1.36 var(--serif);
  letter-spacing: -.015em;
  color: var(--ink);
}
.prov-journey__accent { color: var(--olive); }
.prov-journey__steps { position: relative; display: grid; row-gap: 96px; margin-top: 82px; }
.prov-journey__steps::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--gold-2); }
.prov-step { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: start; }
.prov-step__figure { grid-column: 1; grid-row: 1; }
.prov-step--flip .prov-step__figure { grid-column: 3; }
.prov-step__img { width: 100%; aspect-ratio: 512 / 384; object-fit: cover; }
.prov-step__caption { display: flex; flex-wrap: wrap; gap: 0 4px; margin-top: 12px; font: 400 13px/17px var(--serif); color: var(--ink); }
.prov-step__work, .prov-step__year { color: rgba(32, 30, 29, .62); }
.prov-step__num {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-top: 175px;
  border: 1px solid var(--gold-2);
  border-radius: 50%;
  background: var(--cream);
  font: 400 18px/1 var(--serif);
  color: var(--olive);
}
.prov-step__text { grid-column: 3; grid-row: 1; padding-top: 136px; }
.prov-step--flip .prov-step__text { grid-column: 1; text-align: right; }
.prov-step__label { font: 600 12px/17px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.prov-step__heading { margin-top: 11px; font: 400 clamp(26px, 2.5vw, 36px)/1.2 var(--serif); color: var(--olive); }
.prov-step__copy { max-width: 380px; margin-top: 11px; font: 400 clamp(17px, 1.4vw, 20px)/1.36 var(--sans); color: rgba(32, 30, 29, .78); }
.prov-step--flip .prov-step__copy { margin-left: auto; }

/* What Artcestry helps you preserve -------------------------------------- */

.prov-preserve { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--on-dark); padding: 140px 0; }
.prov-preserve__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.prov-preserve__inner {
  display: grid;
  grid-template-columns: minmax(0, 458px) minmax(0, 686px);
  justify-content: space-between;
  gap: 48px 96px;
  padding-inline: calc(var(--gutter) + 36px);
}
.prov-preserve__title { font: 400 clamp(34px, 4.2vw, 60px)/1.1 var(--serif); letter-spacing: -.015em; }
.prov-preserve__list { border-top: 1px solid rgba(251, 243, 220, .2); }
.prov-preserve__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 277px) minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
  padding: 28px 0 30px;
  border-bottom: 1px solid rgba(251, 243, 220, .2);
}
.prov-preserve__num { padding-top: 8px; font: 400 15px/20px var(--serif); color: var(--gold); }
.prov-preserve__heading { font: 400 24px/30px var(--serif); color: var(--on-dark); }
.prov-preserve__copy { padding-top: 6px; font: 400 18px/24.8px var(--sans); color: rgba(251, 243, 220, .75); }

/* Who holds the record --------------------------------------------------- */

.prov-who { background: var(--olive); color: var(--on-dark); padding: 140px 0; }
.prov-who__head { max-width: 820px; margin-inline: auto; text-align: center; }
.prov-who__title { font: 400 clamp(34px, 4.2vw, 60px)/1.1 var(--serif); letter-spacing: -.015em; }
.prov-who__title-line { display: inline-block; }   /* "shared responsibility" wraps as one unit: the design's two lines */
.prov-who__lede { margin-top: 20px; font: 400 clamp(18px, 1.67vw, 24px)/1.24 var(--serif); color: rgba(251, 243, 220, .85); }
.prov-who__lede-strong { color: var(--on-dark); }
.prov-who__roles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 80px 36px 0;
  border-top: 1px solid rgba(251, 243, 220, .25);
  border-bottom: 1px solid rgba(251, 243, 220, .25);
}
.prov-who__role { padding: 44px 33px 54px; border-left: 1px solid rgba(251, 243, 220, .25); }
.prov-who__role:first-child { padding-left: 0; border-left: 0; }
.prov-who__role-title { font: 400 clamp(24px, 2.1vw, 30px)/1.37 var(--serif); }
.prov-who__role-text { max-width: 277px; margin-top: 18px; font: 400 clamp(17px, 1.4vw, 20px)/1.1 var(--sans); color: rgba(251, 243, 220, .82); }

/* Start (The Night Watch) ------------------------------------------------ */

.prov-start {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--on-dark);
  padding: 165px 0;
  text-align: center;
}
.prov-start__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* The design's radial gradient: rgba(32,30,29,.72) at the centre out to .96, an ellipse 864 by 488 at 1440. */
.prov-start::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 50%, rgba(32, 30, 29, .72), rgba(32, 30, 29, .96)); }
.prov-start__inner { max-width: calc(980px + 2 * var(--gutter)); }
.prov-start__title { max-width: 900px; margin-inline: auto; font: 400 clamp(36px, 5.3vw, 76px)/1.08 var(--serif); letter-spacing: -.02em; }
.prov-start__lede { margin-top: 30px; font: 400 18px/1.65 var(--sans); color: rgba(251, 243, 220, .86); }
.prov-start__line { margin-top: 10px; font: 400 clamp(19px, 1.67vw, 24px)/1.17 var(--serif); }
.prov-start__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 48px; }
.prov-start__actions .prov-btn { min-height: 56px; padding: 0 36px; }
.prov-start__credit { position: absolute; right: 36px; bottom: 28px; margin: 0; font: 400 12px/17px var(--sans); color: rgba(251, 243, 220, .65); }
.prov-start__credit-artist { color: var(--on-dark); }
.prov-start__credit-work { font-family: var(--serif); }

/* Narrower screens ------------------------------------------------------- */

@media (max-width: 1100px) {
  .prov-preserve__inner { grid-template-columns: minmax(0, 1fr); padding-inline: var(--gutter); }
  .prov-preserve__title { max-width: 560px; }
  .prov-who__roles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; }
  .prov-who__role { padding: 36px 28px 40px; }
  .prov-who__role:nth-child(odd) { padding-left: 0; border-left: 0; }
  .prov-who__role:nth-child(n + 3) { border-top: 1px solid rgba(251, 243, 220, .25); }
}

@media (max-width: 768px) {
  .provenance-page main { padding-top: 64px; }
  .prov-hero { padding-top: 72px; }
  .prov-hero__actions { margin-top: 36px; }
  .prov-wall { margin-top: 64px; }
  .prov-wall__frame { padding: 6px; box-shadow: 0 16px 32px rgba(0, 0, 0, .4); }
  .prov-hero__band { padding: 110px var(--gutter) 48px; }
  .prov-what, .prov-journey, .prov-preserve, .prov-who { padding-block: 88px; }
  .prov-what__columns { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; padding-top: 32px; }
  .prov-journey__steps { row-gap: 64px; margin-top: 48px; }
  .prov-journey__steps::before { display: none; }
  .prov-step { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .prov-step__figure, .prov-step--flip .prov-step__figure { grid-column: 1; grid-row: 3; }
  .prov-step__num { grid-column: 1; grid-row: 1; justify-self: start; margin-top: 0; width: 48px; height: 48px; font-size: 15px; }
  .prov-step__text, .prov-step--flip .prov-step__text { grid-column: 1; grid-row: 2; padding-top: 0; text-align: left; }
  .prov-step--flip .prov-step__copy { margin-left: 0; }
  .prov-preserve__row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; padding: 22px 0 24px; }
  .prov-preserve__num { padding-top: 5px; }
  .prov-preserve__copy { grid-column: 2; padding-top: 0; font-size: 16px; line-height: 1.45; }
  .prov-who__roles { margin-top: 48px; }
  .prov-start { padding: 110px 0 96px; }
  .prov-start__actions { margin-top: 36px; }
  .prov-start__credit { right: var(--gutter); bottom: 20px; }
}

@media (max-width: 560px) {
  .prov-wall { gap: 5%; padding: 0 8.5%; }
  .prov-wall__frame--1, .prov-wall__frame--5 { display: none; }
  .prov-wall__frame--2, .prov-wall__frame--4 { width: 24%; }
  .prov-wall__frame--3 { width: 30%; }
  .prov-who__roles { grid-template-columns: minmax(0, 1fr); }
  .prov-who__role { padding: 28px 0 32px; border-left: 0; }
  .prov-who__role:nth-child(n + 2) { border-top: 1px solid rgba(251, 243, 220, .25); }
}

@media (prefers-reduced-motion: no-preference) {
  .prov-wall__frame { transition: transform .35s var(--ease-out); }
  .prov-wall__frame:hover { transform: translateY(-4px); }
}

@media print {
  .prov-hero, .prov-preserve, .prov-who, .prov-start, .prov-hero__band, .prov-wall__frame { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .prov-preserve__bg, .prov-start__bg { display: none; }
}