/* Fine-art gallery and painting detail pages. The shared site chrome remains page-owned. */

.gallery-main,
.painting-main{
  position:relative;
  z-index:1;
  background:transparent;
}

.section-anchor{
  display:block;
  position:relative;
  top:-96px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Featured In strip is shared by the Originals overview and generated painting pages. */
.featured.footer-divider{
  padding:30px 6vw;
  background:rgba(0,0,0,0.72);
  border-top:1px solid rgba(201,162,39,0.2);
  text-align:center;
}
.featured .logo-row-inline{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:60px;
}
.featured .logo-row-inline .section-eyebrow{margin:0;}
.featured .logo-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:32px;
}
.featured .logo-row img{height:48px; width:auto; opacity:.92;}
.featured .logo-row img.tall{height:62px;}
.featured .logo-row img.cbc{height:27px;}

.gallery-intro{
  position:relative;
  min-height:48vh;
  display:grid;
  place-items:center;
  padding:190px 6vw 100px;
  text-align:center;
  background:rgba(8,8,10,0.34);
}
.gallery-intro-inner{max-width:760px;}
.dimension-toggle-row{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:flex-end;
  padding:0 6vw;
  margin-top:-40px;
}
.dimension-toggle-row .dimension-toggle{margin-top:0;}
.gallery-kicker,
.painting-kicker{
  display:block;
  margin-bottom:18px;
  color:var(--gold-antique);
  font-family:'Cinzel', serif;
  font-size:clamp(11px,1.1vw,13px);
  font-weight:600;
  letter-spacing:0.24em;
  text-transform:uppercase;
}
.gallery-intro h1{
  color:var(--cream);
  font-size:clamp(52px,8vw,96px);
  line-height:0.98;
}
.gallery-intro-line{
  width:68px;
  height:1px;
  margin:32px auto 0;
  background:var(--gold-antique);
  opacity:0.7;
}

.selected-paintings{
  padding:10px 6vw 140px;
  scroll-margin-top:96px;
  background:rgba(8,8,10,0.2);
}
.gallery-work{
  /* Shrink-wrap to the painting so the caption (width:0 + min-width:100%
     below) is exactly as wide as the image from first paint, with no JS. */
  display:flex;
  flex-direction:column;
  align-items:center;
  width:fit-content;
  margin:0 auto;
}
.gallery-featured{max-width:900px; text-align:center;}
.gallery-image-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  background:#070708;
  box-shadow:0 26px 72px rgba(0,0,0,0.45);
}
.gallery-image-link:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:8px;
}
.gallery-image-link img{
  width:auto;
  max-width:100%;
  height:auto;
  object-fit:contain;
}
.gallery-featured .gallery-image-link img{max-height:min(76vh,900px);}
.gallery-caption{
  max-width:720px;
  margin:28px auto 0;
  text-align:left;
  width:0;
  min-width:100%;
}
.gallery-caption h2{
  color:var(--cream);
  font-size:clamp(29px,4vw,48px);
  line-height:1.05;
  text-wrap:balance;
}
.gallery-subtitle{
  margin-top:8px;
  color:var(--cream);
  font-size:clamp(18px,2vw,22px);
  font-style:italic;
  opacity:0.82;
}
.gallery-meta{
  margin-top:12px;
  color:var(--gold-antique);
  font-family:'Cinzel',serif;
  font-size:clamp(10px,1vw,12px);
  font-weight:600;
  line-height:1.65;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.gallery-introduction{
  max-width:58ch;
  margin-top:16px;
  color:var(--cream);
  font-size:clamp(17px,1.45vw,20px);
  line-height:1.5;
  opacity:.84;
}
.artwork-dimension{visibility:hidden;}
html[data-artwork-dimensions-ready] .artwork-dimension{visibility:visible;}
.dimension-toggle{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
  margin-top:24px;
  color:var(--gold-antique);
  font-family:'Cinzel',serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.dimension-toggle button{
  min-height:36px;
  padding:7px 10px;
  border:1px solid rgba(201,162,39,.28);
  background:rgba(8,8,10,.34);
  color:var(--cream);
  font:inherit;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.dimension-toggle button[aria-pressed="true"]{border-color:var(--gold-antique); color:var(--gold); background:rgba(201,162,39,.12);}
.dimension-toggle button:hover{border-color:var(--gold); color:var(--gold);}
.dimension-toggle button:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.gallery-view-link,
.back-to-gallery,
.painting-inquiry-link,
.painting-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--cream);
  font-family:'Cinzel',serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.gallery-view-link{
  justify-content:center;
  gap:10px;
  min-height:46px;
  margin-top:18px;
  padding:11px 20px;
  border:1px solid var(--gold);
  background:rgba(8,8,10,.48);
  box-shadow:0 0 0 1px rgba(201,162,39,.18),0 0 16px rgba(201,162,39,.12);
  color:var(--cream);
  line-height:1;
  white-space:nowrap;
  transition:border-color .2s ease,box-shadow .2s ease,color .2s ease,background .2s ease;
}
.gallery-view-link::after,
.back-to-gallery::before{
  content:'→';
  color:var(--gold);
  transition:transform .2s ease;
}
.back-to-gallery::before{content:'←'; margin:0 10px 0 0;}
.gallery-view-link:hover,
.gallery-view-link:focus-visible,
.back-to-gallery:hover,
.back-to-gallery:focus-visible,
.painting-nav a:hover,
.painting-nav a:focus-visible{color:var(--gold);}
.gallery-view-link:hover,
.gallery-view-link:focus-visible{
  border-color:var(--blue-electric);
  background:rgba(8,8,10,.82);
  box-shadow:0 0 16px rgba(79,184,255,.82),0 0 34px rgba(79,184,255,.42);
  color:var(--gold);
}
.gallery-view-link:hover::after,
.gallery-view-link:focus-visible::after{transform:translateX(4px);}
.gallery-view-link:focus-visible,
.back-to-gallery:focus-visible,
.painting-nav a:focus-visible{outline:1px solid var(--gold); outline-offset:4px;}

.gallery-pair{
  /* Flex (not a fixed 2-col grid) so a third, odd card — e.g. a later
     landscape-oriented painting — wraps onto its own centered row instead
     of stranding an empty grid cell beside it. Two cards still render as
     an even pair since 2 × flex-basis(460px) fits the max-width. */
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:start;
  gap:clamp(58px,8vw,118px);
  max-width:1180px;
  margin:clamp(130px,16vw,220px) auto 0;
}
.gallery-pair .gallery-work{flex:0 1 auto; max-width:520px; text-align:center;}
.gallery-pair .gallery-image-link img{max-height:min(66vh,760px);}
.gallery-pair .gallery-caption{max-width:510px; margin-top:24px;}
.gallery-pair .gallery-caption h2{font-size:clamp(27px,3vw,40px);}

/* Painting pages */
.painting-main{padding:145px 6vw 110px;}
.painting-shell{max-width:1380px; margin:0 auto;}
.back-to-gallery{margin-bottom:44px;}
.painting-hero{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,0.75fr);
  align-items:center;
  gap:clamp(52px,7vw,110px);
}
.painting-image-column{text-align:center; min-width:0;}
.painting-open-viewer{
  display:inline-flex;
  max-width:100%;
  padding:0;
  border:0;
  background:#070708;
  color:inherit;
  cursor:zoom-in;
  box-shadow:0 28px 80px rgba(0,0,0,0.52);
}
.painting-open-viewer:focus-visible{outline:2px solid var(--gold); outline-offset:8px;}
.painting-open-viewer img{
  width:auto;
  max-width:100%;
  max-height:min(78vh,980px);
  object-fit:contain;
}
.viewer-instruction{
  margin-top:16px;
  color:var(--cream);
  font-family:'Cinzel',serif;
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  opacity:0.54;
}
.painting-heading{min-width:0;}
.painting-heading h1{
  color:var(--cream);
  font-size:clamp(46px,5.8vw,82px);
  line-height:0.98;
  text-wrap:balance;
}
.painting-heading h1.long-title{font-size:clamp(42px,4vw,60px);}
.painting-subtitle{
  margin-top:16px;
  color:var(--gold-antique);
  font-size:clamp(21px,2.2vw,27px);
  font-style:italic;
}
.painting-facts{
  display:grid;
  gap:14px;
  margin-top:34px;
  padding-top:28px;
  border-top:1px solid rgba(201,162,39,0.25);
}
.painting-fact dt{
  margin-bottom:4px;
  color:var(--gold-antique);
  font-family:'Cinzel',serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.painting-fact dd{color:var(--cream); font-size:18px; line-height:1.45;}
.acquisition-jump{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  margin-top:18px;
  color:var(--cream);
  font-family:'Cinzel',serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.acquisition-jump:hover,.acquisition-jump:focus-visible{color:var(--gold);}
.acquisition-jump:focus-visible{outline:1px solid var(--gold); outline-offset:4px;}

.painting-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,360px);
  align-items:start;
  gap:clamp(64px,9vw,140px);
  max-width:1120px;
  margin:clamp(100px,12vw,160px) auto 0;
}
.painting-description{max-width:70ch;}
.painting-description h2,
.acquisition-panel h2{
  margin-bottom:28px;
  color:var(--cream);
  font-size:clamp(30px,3.5vw,44px);
}
.painting-description p{
  margin-bottom:1.35em;
  color:var(--cream);
  font-size:clamp(18px,1.5vw,21px);
  line-height:1.78;
  opacity:0.9;
}
.painting-description p:last-child{margin-bottom:0;}
.acquisition-panel{
  position:sticky;
  top:120px;
  padding:34px 0;
  border-top:1px solid rgba(201,162,39,0.35);
  border-bottom:1px solid rgba(201,162,39,0.35);
}
.acquisition-panel{scroll-margin-top:120px;}
.acquisition-panel p{
  color:var(--cream);
  font-size:18px;
  line-height:1.65;
  opacity:0.84;
}
.acquisition-panel .acquisition-note{
  margin-top:12px;
  color:var(--cream);
  font-size:15px;
  line-height:1.5;
  opacity:.7;
}
.acquisition-price{
  display:block;
  margin-bottom:14px;
  color:var(--gold);
  font-family:'Fjalla One',sans-serif;
  font-size:clamp(27px,2.4vw,36px);
  letter-spacing:0.02em;
}
.painting-inquiry-link{
  justify-content:center;
  width:100%;
  margin-top:26px;
  padding:13px 18px;
  border:1px solid var(--gold-antique);
  color:var(--gold);
  text-align:center;
  transition:background .2s ease,color .2s ease;
}
.painting-inquiry-link:hover,
.painting-inquiry-link:focus-visible{background:var(--gold); color:var(--black);}
.painting-inquiry-link:focus-visible{outline:2px solid var(--cream); outline-offset:4px;}
.painting-nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  max-width:1120px;
  margin:clamp(90px,11vw,150px) auto 0;
  padding-top:36px;
  border-top:1px solid rgba(201,162,39,0.22);
}
.painting-nav a{line-height:1.45;}
.painting-nav a:last-child{justify-content:flex-end; text-align:right;}

/* Accessible full-screen viewer */
.artwork-viewer{
  width:100vw;
  max-width:none;
  height:100vh;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  background:rgba(4,4,5,0.98);
  color:var(--cream);
}
.artwork-viewer::backdrop{background:rgba(0,0,0,0.92);}
.artwork-viewer[open]{display:grid; grid-template-rows:auto 1fr;}
.viewer-toolbar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:14px 18px;
  border-bottom:1px solid rgba(201,162,39,0.22);
  background:rgba(8,8,10,0.96);
}
.viewer-toolbar button{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(201,162,39,0.45);
  background:transparent;
  color:var(--cream);
  font:600 20px/1 'Cinzel',serif;
  cursor:pointer;
}
.viewer-toolbar button:hover{border-color:var(--gold); color:var(--gold);}
.viewer-toolbar button:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.viewer-stage{
  position:relative;
  display:grid;
  place-items:center;
  min-height:0;
  overflow:hidden;
  touch-action:none;
  cursor:grab;
}
.viewer-stage.is-panning{cursor:grabbing;}
.viewer-stage img{
  width:auto;
  max-width:calc(100vw - 32px);
  max-height:calc(100vh - 92px);
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  transform-origin:center;
  will-change:transform;
}
.viewer-status{
  position:absolute;
  left:18px;
  bottom:14px;
  padding:7px 10px;
  background:rgba(0,0,0,0.72);
  color:var(--cream);
  font-family:'Cinzel',serif;
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  pointer-events:none;
}

@media (max-width:900px){
  .gallery-intro{min-height:44vh; padding:150px 6vw 80px;}
  .selected-paintings{padding:10px 7vw 100px;}
  .gallery-pair{gap:44px; margin-top:120px;}
  .painting-main{padding:125px 7vw 85px;}
  .painting-hero{grid-template-columns:1fr; gap:54px;}
  .painting-heading{max-width:720px;}
  .painting-body{grid-template-columns:1fr; gap:70px; margin-top:100px;}
  .acquisition-panel{position:static; max-width:620px;}
}

@media (max-width:680px){
  .featured.footer-divider{padding:12px 6vw 30px;}
  .featured .logo-row-inline{gap:10px;}
  .featured .logo-row{gap:5.5vw; flex-wrap:nowrap;}
  .featured .logo-row img{height:6vw;}
  .featured .logo-row img.tall{height:7.7vw;}
  .featured .logo-row img.cbc{height:3.4vw;}
  .featured .section-eyebrow{font-size:11px;}
  .gallery-intro{min-height:0; padding:132px 7vw 70px;}
  .gallery-intro h1{font-size:clamp(48px,16vw,68px);}
  .dimension-toggle-row{padding:0 7vw; margin-top:-30px;}
  .selected-paintings{padding:0 7vw 84px;}
  .gallery-caption{margin-top:22px;}
  .gallery-caption h2{font-size:clamp(28px,10vw,40px);}
  .gallery-view-link{width:100%; padding-inline:18px;}
  .gallery-pair{flex-direction:column; gap:92px; margin-top:105px;}
  .gallery-pair .gallery-work,
  .gallery-pair .gallery-caption{max-width:100%;}
  .gallery-pair .gallery-image-link img{max-height:none;}
  .painting-main{padding:96px 7vw 72px;}
  .back-to-gallery{margin-bottom:32px;}
  .painting-hero{gap:34px;}
  .painting-open-viewer{width:100%; background:transparent; box-shadow:none;}
  .painting-open-viewer img{width:100%; height:auto; max-height:none;}
  .painting-heading h1{font-size:clamp(42px,14vw,62px);}
  .painting-heading h1.long-title{font-size:clamp(40px,13vw,56px);}
  .painting-body{margin-top:82px; gap:58px;}
  .painting-description p{font-size:18px; line-height:1.72;}
  .painting-nav{grid-template-columns:1fr; gap:12px; margin-top:80px;}
  .painting-nav a:last-child{justify-content:flex-start; text-align:left;}
  .viewer-toolbar{padding:10px 12px;}
  .viewer-stage img{max-width:calc(100vw - 18px); max-height:calc(100vh - 78px);}
  .viewer-status{left:10px; bottom:10px;}
}

@media (prefers-reduced-motion:reduce){
  .gallery-view-link::after{transition:none;}
}

/* Open Edition prints: cross-link from the Originals cards, and the Prints
   section below Originals on artwork.html (generated by
   scripts/build_art_print_pages.py from scripts/art_prints.py). */
.gallery-print-link{
  display:flex;
  align-items:center;
  width:fit-content;
  min-height:44px;
  margin-top:6px;
  color:var(--gold);
  font-family:'Cinzel',serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:color .2s ease,text-shadow .2s ease;
}
.gallery-print-link:hover,
.gallery-print-link:focus-visible{color:var(--blue-electric); text-shadow:0 0 8px rgba(79,184,255,.7);}
.gallery-print-link:focus-visible{outline:1px solid var(--gold); outline-offset:4px;}

/* Open Edition print cross-link on each painting detail page (generated by
   scripts/build_artwork_pages.py): a clear outlined button, matching
   shop.html's "Shop All" Featured-header button (gold border/text, filling
   gold with red text on hover/focus). "Acquisition details ↓"
   (.acquisition-jump) stays a plain text link, unstyled by this rule.
   The heading is a flex column so the button sits directly under the
   Imperial/Metric toggle and the acquisition link follows it (the markup
   order is toggle, acquisition link, button). */
.painting-heading{display:flex; flex-direction:column;}
.painting-heading > .dimension-toggle,
.painting-heading > .acquisition-jump,
.painting-heading > .painting-print-btn{align-self:flex-start;}
.painting-heading > .acquisition-jump{order:2; margin-top:0;}
.painting-print-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  min-height:44px;
  order:1;
  /* 30.6px = measured visible gap from the dimensions text to the toggle
     (24px toggle margin + line-box leading below the 18px text); keep in
     sync with .dimension-toggle margin-top and .painting-fact dd. */
  margin-top:30.6px;
  padding:10px 22px;
  border:1.5px solid var(--gold);
  color:var(--gold);
  font-family:'Cinzel',serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  background:transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.painting-print-btn:hover,
.painting-print-btn:focus-visible{background:var(--gold); color:var(--red-blood);}
.painting-print-btn:focus-visible{outline:1px solid var(--gold); outline-offset:4px;}

.print-section{
  padding:40px 6vw 150px;
  scroll-margin-top:96px;
  text-align:center;
  background:rgba(8,8,10,0.2);
}
.print-section-heading{max-width:760px; margin:0 auto clamp(56px,7vw,86px);}
.print-section-heading h2{
  color:var(--cream);
  font-size:clamp(46px,6.5vw,80px);
  line-height:0.98;
}
.print-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(40px,5vw,72px);
  max-width:1180px;
  margin:0 auto;
}
.print-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:0 1 340px;
  max-width:340px;
  color:var(--cream);
  transition:transform .25s ease;
}
.print-card:hover{transform:translateY(-4px);}
.print-card:focus-visible{outline:2px solid var(--gold); outline-offset:8px;}
.print-card-image{display:block; width:100%;}
.print-card-image img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; transition:opacity .5s ease;}
.print-card-title{
  margin-top:18px;
  font-family:'Fjalla One',sans-serif;
  font-size:clamp(22px,2vw,27px);
  line-height:1.1;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.print-card-edition{
  margin-top:8px;
  color:var(--gold-antique);
  font-family:'Cinzel',serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.print-card-price{
  margin-top:8px;
  color:var(--gold);
  font-family:'Cinzel',serif;
  font-size:16px;
  letter-spacing:.04em;
}
@media (max-width:680px){
  .print-section{padding:24px 7vw 96px;}
  .print-card{flex-basis:100%; max-width:420px;}
}

/* 2026-09-24: light download deterrents for painting images only (Originals
   overview cards, each painting-detail hero image, and the full-screen zoom
   viewer image plus its [data-viewer-stage] container). This only covers
   what markup/CSS can: -webkit-touch-callout blocks iOS/iPadOS's long-press
   "Save Image" menu, and -webkit-user-drag is Safari's native drag-disable.
   Ordinary dragging is disabled everywhere via the draggable="false"
   attribute on these same images, and the right-click context menu is
   blocked by image-protect.js (same selector, plus [data-viewer-stage] to
   also cover the viewer's own background/padding around the image). None of
   this touches links, buttons, text selection, keyboard navigation, or any
   other image on the site (product photos, logos, etc.). */
.gallery-work img,
.painting-image-column img,
[data-viewer-image],
[data-viewer-stage]{
  -webkit-touch-callout:none;
  -webkit-user-drag:none;
}

/* 2026-10-02: sensitive artwork (paintings with nudity). sensitive-media.css
   draws the overlay; these rules only keep each wrapper hugging its image so
   layouts are unchanged. See PROJECT_NOTES.md "Sensitive artwork (nudity blur)".
   Originals order: Seeing Into the Aether alone at featured size, the pair,
   then Terencendental Coronation alone at featured size. */
.gallery-sensitive,
.painting-sensitive{display:inline-flex; max-width:100%; vertical-align:top;}
.gallery-pair + .gallery-featured{margin-top:clamp(130px,16vw,220px);}
.dimension-toggle-row{flex-wrap:wrap; align-items:center; gap:14px;}
.dimension-toggle-row .sensitive-show-all{margin-right:auto;}
/* Print cards: the wrapper takes the card's place in .print-grid so the
   overlay (a sibling of the card's link, never inside it) can sit over the
   square image. */
.print-card-item{position:relative; flex:0 1 340px; max-width:340px;}
.print-card-item > .print-card{max-width:none;}
.print-card-item .sensitive-overlay{inset:0 0 auto 0; aspect-ratio:1/1;}
.print-card-item.sensitive-media:not(.is-revealed) .print-card:hover{transform:none;}
@media (max-width:680px){
  .gallery-pair + .gallery-featured{margin-top:105px;}
  .painting-sensitive{display:flex; width:100%;}
  .print-card-item{flex-basis:100%; max-width:420px;}
}