:root {
  --page-bg: rgb(221, 214, 201);
  --frame-grey-20: rgba(153, 153, 153, 0.20);
  --title-blue: rgb(58, 88, 104);
  --gold: rgb(213, 163, 104);
  --text-40: rgba(0,0,0,0.40);
  --text-20: rgba(0,0,0,0.20);
  --button-fill: rgba(153,153,153,0.20);
  --button-stroke: rgba(0,0,0,0.20);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--page-bg); }
body { color: var(--text-40); font-family: Manrope, Avenir, Helvetica, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.site-page { position: relative; width: 1440px; margin: 0 auto; background: var(--page-bg); border: none; outline: none; overflow: hidden; }
.pale-frame { position: absolute; left: 36.5px; top: 58px; width: 1367px; background: var(--page-bg); }
.outer-line { position: absolute; left: 36.5px; top: 58px; width: 1367px; border: 8px solid var(--frame-grey-20); pointer-events: none; }
.title-band { position: absolute; left: 182px; top: 135px; width: 1076px; height: 176px; background: var(--title-blue); border: 1px solid var(--gold); display:flex; align-items:center; justify-content:center; }
.title-band h1 { margin:0; color: #ffffff; -webkit-text-stroke: 1px var(--gold); text-shadow: none; font-family: Castellar, Cinzel, Georgia, serif; font-size: 54px; font-weight: 400; letter-spacing: 15px; line-height: 1; }
.subtitle { position:absolute; left: 390px; top: 380px; width: 660px; text-align:center; color: var(--text-20); font-size: 36pt; font-weight: 700; letter-spacing: 3px; }
.button { position:absolute; top:480px !important; height:40px; width:215px; border-radius: 10px; border: 1px solid var(--button-stroke); background: var(--button-fill); color: var(--text-40); display:flex; align-items:center; justify-content:center; font-size: 12pt; font-weight: 400; letter-spacing: 1.2px; white-space: nowrap; }
.button.disabled { opacity: .35; pointer-events: none; }
.thumb { position:absolute; width:260px; height:180px; object-fit: cover; display:block; }
.thumb-title { position:absolute; width:260px; color: var(--text-40); font-size:12pt; font-weight:400; line-height:18px; text-align:left; }
.thumb-title.left { text-align:left; }
.thumb-title.right { text-align:left; }
.body-text { position:absolute; left:340px; top:700px; width:760px; color: var(--text-40); font-size:17pt; line-height:28px; letter-spacing: .4px; }
.body-text p { margin: 0 0 28px 0; }
.placeholder-note { position:absolute; left:340px; top:700px; width:760px; font-size:17pt; line-height:28px; }

/* V5 test: quiet full artwork page. No title band, no grey frame, viewport-centred artwork. */
.site-page.artwork-page { min-height: 100vh; height: auto; overflow: visible; }
.artwork-nav { position:absolute; left: 0; top: 98px; width: 1440px; height: 40px; display:flex; justify-content:center; gap: 62px; z-index: 10; }
.artwork-nav .button { position: static !important; top: auto !important; left: auto !important; }
.artwork-view { min-height: 100vh; padding-top: 250px; padding-bottom: 80px; display:flex; align-items:center; justify-content:center; }
.artwork-inner { display:flex; flex-direction:column; align-items:flex-start; }
.full-artwork-image { display:block; max-width: 900px; max-height: calc(100vh - 360px); width:auto; height:auto; object-fit:contain; }
.meta { margin-top: 120px; width: 100%; color: var(--text-40); font-size:14px; line-height:22px; letter-spacing:.2px; }
.meta .title { font-weight: 400; }

.home-image { position:absolute; left:270px; top:700px; width:900px; height:auto; display:block; }
.home-text { position:absolute; left:340px; top:1500px; width:760px; color: var(--text-40); font-size:17pt; line-height:28px; letter-spacing:.4px; }
.home-text p { margin: 0 0 28px 0; }

@media (max-width: 1460px) {
  .site-page:not(.artwork-page) { transform: scale(calc((100vw - 20px) / 1440)); transform-origin: top center; margin-bottom: calc((1 - ((100vw - 20px) / 1440)) * -10000px); }
  .site-page.artwork-page { width: 100vw; }
  .artwork-nav { width: 100vw; }
  .full-artwork-image { max-width: 72vw; }
}


/* V6 home page and full artwork navigation refinements */
.site-page.home-page { min-height: 100vh; height: auto; overflow: visible; border: none; outline: none; background: var(--page-bg); }
.home-page .pale-frame, .home-page .outer-line { display: none; }
.home-title-band { top: 40px; }
.home-nav { position: absolute; left: 0; top: 270px; width: 1440px; height: 40px; display: flex; justify-content: center; gap: 30px; z-index: 10; }
.home-nav .button { position: static !important; top: auto !important; left: auto !important; }
.home-view { min-height: 100vh; padding-top: 320px; padding-bottom: 60px; display: flex; align-items: center; justify-content: center; }
.home-hero-image { display: block; width: auto; max-width: 900px; max-height: calc(100vh - 420px); object-fit: contain; }
.home-text-v6 { width: 760px; margin: 70px auto 180px auto; color: var(--text-40); font-size: 17pt; line-height: 28px; letter-spacing: .4px; }
.home-text-v6 p { margin: 0 0 28px 0; }

@media (max-width: 1460px) {
  .site-page.home-page { width: 100vw; transform: none !important; margin-bottom: 0 !important; }
  .home-title-band { left: calc(50vw - 538px); }
  .home-nav { width: 100vw; }
  .home-hero-image { max-width: 72vw; }
}


/* V7 Adrian Mellon page */
.about-main-image { position:absolute; left:270px; top:700px; width:900px; height:auto; display:block; }
.about-text { position:absolute; left:340px; width:760px; color: var(--text-40); font-size:17pt; line-height:28px; letter-spacing:.4px; }
.about-text p { margin:0 0 22px 0; }
.about-text h2 { margin:0 0 22px 0; font-size:17pt; line-height:28px; font-weight:700; color: var(--text-40); }
.about-text.block1 { top:1440px; }
.about-text.block2 { top:2456px; }
.about-text.block3 { top:2678px; }
.portrait-row { position:absolute; left:435px; top:2050px; width:570px; display:flex; gap:8px; justify-content:center; align-items:center; }
.portrait-row img { width:136px; height:96px; object-fit:cover; display:block; }
.about-signature { position:absolute; left:340px; top:3296px; width:480px; height:auto; display:block; opacity:.82; }
.about-contact { position:absolute; left:340px; top:3530px; width:760px; color: var(--text-40); font-size:17pt; line-height:30px; letter-spacing:.4px; }
.about-contact p { margin:0 0 8px 0; }


/* V8 navigation, Adrian Mellon corrections, and Short Stories */
.home-nav { justify-content: flex-start; gap: 72px; left: 182px; width: 1076px; }

.artwork-nav { gap: 34px; }
.artwork-nav .button { width: 215px; }

.about-text.block2 { top: 2456px; }
.portrait-row { left: 0; top: 2190px; width: 1440px; gap: 8px; justify-content: center; align-items: center; }
.portrait-row img { width: auto; height: 105px; object-fit: contain; display:block; }
.about-signature { opacity: 1; }
.about-contact { line-height:30px; }
.about-contact .contact-label { font-weight:700; }

.story-index-button { position:absolute; left:410px; width:620px; height:117px; border-radius: 22px; border:1px solid var(--gold); background: rgba(58,88,104,.70); color: var(--page-bg); display:flex; align-items:center; justify-content:center; font-size:17pt; font-weight:400; letter-spacing:1.1px; text-align:center; }
.story-page { min-height:100vh; height:auto; overflow:visible; }
.story-title { position:absolute; left:320px; top:380px; width:800px; text-align:center; font-size:36pt; line-height:44pt; font-weight:700; color: rgba(153,153,153,.70); letter-spacing: .8px; }
.story-nav { position:absolute; left:0; top:480px; width:1440px; height:40px; display:flex; justify-content:center; gap:62px; z-index:10; }
.story-nav .button { position:static !important; top:auto !important; left:auto !important; }
.story-frame { width:900px; margin:650px auto 180px auto; border:4px solid rgba(153,153,153,.70); padding:70px 46px 90px 46px; }
.story-text { width:800px; margin:0 auto; color:var(--text-40); font-size:17pt; line-height:26pt; letter-spacing:.25px; }
.story-text p { margin:0 0 12pt 0; }
.story-text p.emphasis-break { margin: 22pt 0 22pt 0; }

@media (max-width:1460px) {
  .story-page { width:100vw; transform:none !important; margin-bottom:0 !important; }
  .story-page .title-band { left: calc(50vw - 538px); }
  .story-title { left: calc(50vw - 400px); }
  .story-nav { width:100vw; }
  .story-frame { max-width: 90vw; }
  .story-text { max-width: calc(90vw - 92px); }
}

/* V9 open reading / presence page standard
   Landing and selection pages remain framed.
   Reading, about, and story text pages are open: no visible inner frame, but centred discipline remains. */

/* Adrian Mellon page: open-page standard, homepage title/button height logic */
.site-page.about-page {
  min-height: 100vh;
  height: auto;
  overflow: visible;
  border: none;
  outline: none;
  background: var(--page-bg);
}
.about-page .pale-frame,
.about-page .outer-line {
  display: none;
}
.about-page .title-band {
  top: 40px;
}
.about-nav {
  position:absolute;
  left:0;
  top:270px;
  width:1440px;
  height:40px;
  display:flex;
  justify-content:center;
  gap:62px;
  z-index:10;
}
.about-nav .button {
  position:static !important;
  top:auto !important;
  left:auto !important;
}

/* Adrian Mellon V9 portrait correction: a little higher and 75% larger than V8. */
.about-page .portrait-row {
  left:0;
  top:2120px;
  width:1440px;
  gap:14px;
  justify-content:center;
  align-items:center;
}
.about-page .portrait-row img {
  width:auto;
  height:184px;
  object-fit:contain;
  display:block;
}

/* Short story pages: open reading standard, no frame. */
.story-page .title-band {
  top:40px;
}
.story-nav {
  top:270px;
}
.story-frame {
  width:800px;
  margin:650px auto 180px auto;
  border:none;
  padding:0;
}
.story-text {
  width:800px;
  margin:0 auto;
}
@media (max-width:1460px) {
  .story-page .title-band { left: calc(50vw - 538px); }
  .story-frame { max-width: 80vw; }
  .story-text { max-width: 80vw; }
  .about-page { width:100vw; transform:none !important; margin-bottom:0 !important; }
  .about-page .title-band { left: calc(50vw - 538px); }
  .about-nav { width:100vw; }
}



/* V9.1 correction: open pages use homepage vertical logic without overlap. */

/* Short story pages: stacked open reading layout, removing absolute-overlap risk. */
.site-page.story-page {
  min-height: 100vh;
  height: auto;
  overflow: visible;
  border: none;
  outline: none;
  background: var(--page-bg);
}
.story-page .pale-frame,
.story-page .outer-line {
  display: none;
}
.story-page .title-band {
  position: relative;
  left: auto;
  top: auto;
  margin: 40px auto 0 auto;
  z-index: 3;
}
.story-nav {
  position: relative;
  left: auto;
  top: auto;
  width: 1440px;
  height: 40px;
  margin: 54px auto 0 auto;
  display: flex;
  justify-content: center;
  gap: 62px;
  z-index: 3;
}
.story-nav .button {
  position: static !important;
  top: auto !important;
  left: auto !important;
}
.story-title {
  position: relative;
  left: auto;
  top: auto;
  width: 800px;
  margin: 70px auto 0 auto;
  text-align: center;
  z-index: 1;
}
.story-frame {
  width: 800px;
  margin: 126px auto 180px auto;
  border: none;
  padding: 0;
}
.story-text {
  width: 800px;
  margin: 0 auto;
}

/* Adrian Mellon page: move the whole image/content body upward toward homepage standard. */
.about-page .about-main-image {
  top: 420px;
}
.about-page .about-text.block1 {
  top: 1160px;
}
.about-page .portrait-row {
  top: 1840px;
}
.about-page .about-text.block2 {
  top: 2176px;
}
.about-page .about-text.block3 {
  top: 2398px;
}
.about-page .about-signature {
  top: 3016px;
}
.about-page .about-contact {
  top: 3250px;
}

@media (max-width:1460px) {
  .story-page { width:100vw; transform:none !important; margin-bottom:0 !important; }
  .story-page .title-band { left:auto; }
  .story-nav { width:100vw; }
  .story-title { width: min(800px, 80vw); }
  .story-frame { width: min(800px, 80vw); max-width:80vw; }
  .story-text { width: min(800px, 80vw); max-width:80vw; }
}


/* V10: Collections landing page and final story source insertion. */
.collection-index-button { left:410px; }
.collection-index-button.disabled-collection { opacity: .72; }
.collection-index-button.disabled-collection:hover { cursor: default; }
.story-text p.emphasis-break { margin-top: 34pt; margin-bottom: 34pt; }
.story-text p + p.emphasis-break { margin-top: 34pt; }
.story-text p.emphasis-break + p { margin-top: 0; }

/* V10.3: Writing on Water landing subtitle raised within the framed landing module, so it breathes visually between title band and button row. */
.subtitle { top: 360px; }


/* V10.2: Writing on Water About the Work follows the open text-page standard.
   Text / reading / presence pages are open; landing / selection pages remain framed. */
.site-page.open-text-page {
  min-height: 100vh;
  height: auto !important;
  overflow: visible;
  border: none;
  outline: none;
  background: var(--page-bg);
  padding-bottom: 180px;
}
.open-text-page .pale-frame,
.open-text-page .outer-line {
  display: none;
}
.open-text-page .title-band {
  position: relative;
  left: auto;
  top: auto;
  margin: 40px auto 0 auto;
  z-index: 3;
}
.open-text-nav {
  position: relative;
  left: auto;
  top: auto;
  width: 1440px;
  height: 40px;
  margin: 54px auto 0 auto;
  display: flex;
  justify-content: center;
  gap: 62px;
  z-index: 3;
}
.open-text-nav .button {
  position: static !important;
  top: auto !important;
  left: auto !important;
}
.open-text-body {
  width: 800px;
  margin: 126px auto 180px auto;
  color: var(--text-40);
  font-size: 17pt;
  line-height: 28px;
  letter-spacing: .4px;
}
.open-text-body p {
  margin: 0 0 28px 0;
}
@media (max-width:1460px) {
  .open-text-page {
    width:100vw;
    transform:none !important;
    margin-bottom:0 !important;
  }
  .open-text-page .title-band {
    left:auto;
  }
  .open-text-nav {
    width:100vw;
  }
  .open-text-body {
    width: min(800px, 80vw);
    max-width:80vw;
  }
}


/* V10.3: Adrian Mellon signature recoloured to Faded Shutter Blue 70%, matching the large landing-page buttons.
   Uses the existing transparent signature PNG as a mask so no new image asset is required. */
.about-signature-blue {
  background: rgba(58,88,104,.70);
  -webkit-mask: url("assets/about/Signature_gold_v8.png") center / contain no-repeat;
  mask: url("assets/about/Signature_gold_v8.png") center / contain no-repeat;
}


/* V11: signature repair carried forward from V10.3. Keeps the real PNG visible and tints it toward Faded Shutter Blue rather than using the failed mask-only div. */
.about-signature.signature-faded-blue {
  width: 480px;
  height: auto;
  opacity: .72;
  filter: sepia(1) saturate(.65) hue-rotate(156deg) brightness(.72);
}

/* V11: Red Time division page uses the open text-page module with four navigation buttons. */
.red-time-nav { gap: 34px; }
.red-time-nav .button { width: 215px; }

/* V11: Red Time grid pages use the framed landing/selection module. */
.red-time-grid-page .subtitle { top: 360px; }


/* V12: Mali-Bleu uses the Red Time two-part division pattern. */
.mali-nav { gap: 34px; }
.mali-nav .button { width: 215px; }
.mali-grid-page .subtitle { top: 360px; }
.mali-inline-image-wrap { width: 100%; display: flex; justify-content: center; margin: 92px 0 92px 0; }
.mali-inline-image { display:block; width: 220px; height:auto; opacity: .95; }
.mali-note-heading { margin-top: 10px !important; }

/* V12.2: Full artwork module spacing correction.
   Carries forward the V12.1 portrait/square visibility fix, but restores breathing space.
   The artwork sits lower and calmer beneath the buttons, metadata is no longer glued to the image,
   and portrait, square, and landscape formats share a stricter visual field. */
.site-page.artwork-page {
  min-height: 100vh;
  height: auto;
  overflow: visible;
  background: var(--page-bg);
}
.artwork-view {
  min-height: 100vh;
  padding-top: 215px;
  padding-bottom: 74px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.artwork-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  max-width: min(74vw, 900px);
}
.full-artwork-image {
  display: block;
  max-width: min(74vw, 900px);
  max-height: calc(100vh - 360px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.meta {
  margin-top: 26px;
  width: 100%;
  color: var(--text-40);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: .2px;
}
@media (max-width: 1460px) {
  .site-page.artwork-page {
    width: 100vw;
  }
  .artwork-nav {
    width: 100vw;
  }
  .artwork-view {
    padding-top: 205px;
    padding-bottom: 66px;
  }
  .artwork-inner {
    max-width: min(74vw, 900px);
  }
  .full-artwork-image {
    max-width: min(74vw, 900px);
    max-height: calc(100vh - 350px);
  }
}
@media (max-height: 840px) {
  .artwork-view {
    padding-top: 190px;
    padding-bottom: 54px;
  }
  .full-artwork-image {
    max-height: calc(100vh - 330px);
  }
  .meta {
    margin-top: 22px;
  }
}

/* V12.4: Okavango single-collection grid page. */
.okavango-grid-page .subtitle { top: 360px; }

/* V12.6: Apple & Eve single-collection grid page. */
.apple-and-eve-grid-page .subtitle { top: 360px; }

/* V12.7: Blossoms single-collection grid page. */
.blossoms-grid-page .subtitle { top: 360px; }


/* V12.8: Sculptural Objects section.
   Landing page remains the framed grid rule.
   Object pages use an Adrian Mellon-derived open presence page: title band, navigation, main image, secondary views, metadata and text. */
.objects-grid-page .subtitle { top: 360px; }
.objects-grid-page .thumb { object-fit: contain; background: transparent; }
.object-page {
  min-height: 100vh;
  height: auto;
  overflow: visible;
  border: none;
  outline: none;
  background: var(--page-bg);
  padding-bottom: 180px;
}
.object-page .pale-frame,
.object-page .outer-line { display: none; }
.object-page .title-band {
  position: relative;
  left: auto;
  top: auto;
  margin: 40px auto 0 auto;
  z-index: 3;
}
.object-nav {
  position: relative;
  left: auto;
  top: auto;
  width: 1440px;
  height: 40px;
  margin: 54px auto 0 auto;
  display: flex;
  justify-content: center;
  gap: 34px;
  z-index: 3;
}
.object-nav .button { position: static !important; top: auto !important; left: auto !important; width: 215px; }
.object-content {
  width: 900px;
  margin: 126px auto 180px auto;
  color: var(--text-40);
}
.object-main-image-wrap { width: 100%; display: flex; justify-content: center; }
.object-main-image {
  display: block;
  max-width: 900px;
  max-height: 620px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.object-secondary-images {
  width: 900px;
  margin: 70px auto 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 26px;
}
.object-secondary-images img {
  display: block;
  max-width: 325px;
  max-height: 238px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.object-meta {
  width: 800px;
  margin: 76px auto 0 auto;
  color: var(--text-40);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .2px;
}
.object-meta div { margin: 0 0 4px 0; }
.object-text {
  width: 800px;
  margin: 42px auto 0 auto;
  color: var(--text-40);
  font-size: 17pt;
  line-height: 28px;
  letter-spacing: .4px;
}
.object-text p { margin: 0 0 28px 0; }
@media (max-width:1460px) {
  .object-page { width:100vw; transform:none !important; margin-bottom:0 !important; }
  .object-nav { width:100vw; }
  .object-content { width: min(900px, 86vw); }
  .object-main-image { max-width: min(900px, 86vw); max-height: 58vh; }
  .object-secondary-images { width: min(900px, 86vw); margin-top: 64px; }
  .object-meta, .object-text { width: min(800px, 80vw); }
}


/* V12.8.1: Sculptural Objects correction pass.
   More space between main image and secondary images; more space before metadata/text.
   Secondary images enlarged by 125 percent from V12.8 sizing.
   Eye Eye and Trojan Deer image selections corrected in their HTML pages. */


/* V12.8.1 patch 2: Object-page refinements.
   Eye Eye secondary views are reduced to sit in one row and ordered left / forward / right.
   Paddler / Rower secondary views are normalised to one visual height. */
.eye-eye-secondary {
  flex-wrap: nowrap;
  gap: 24px;
}
.eye-eye-secondary img {
  height: 180px;
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
.paddler-secondary {
  align-items: center;
}
.paddler-secondary img {
  height: 238px;
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
@media (max-width: 980px) {
  .eye-eye-secondary {
    flex-wrap: wrap;
  }
  .eye-eye-secondary img {
    max-width: min(280px, 80vw);
    height: auto;
  }
  .paddler-secondary img {
    max-width: min(420px, 80vw);
    height: auto;
  }
}


/* V12.8.1 patch 3: Kayak secondary views normalised to one visual height. */
.kayak-secondary {
  align-items: center;
}
.kayak-secondary img {
  height: 238px;
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
@media (max-width: 980px) {
  .kayak-secondary img {
    max-width: min(420px, 80vw);
    height: auto;
  }
}


/* V12.8.2: Adrian Mellon signature returned to basic black 40%. */
.about-signature.signature-faded-blue {
  opacity: .40;
  filter: brightness(0) saturate(100%);
}