/* ============================================================
   Wendi Agosta | Dover Yard Fine Art
   Two-column architecture: left 25vw = text, right = content/images
   ============================================================ */

/*
@font-face {
  font-family: 'Univers';
  src: url('fonts/Univers-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Univers';
  src: url('fonts/Univers-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
*/


:root {
  --bg:         #dedede;
  --text:       #555;
  --text-hover: #111;
  --text-dim:   #999;

  --font:  'Univers', 'Univers LT Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* The column divider — used everywhere for consistency */
  --split:      25vw;
  --pad:        28px;   /* inner padding within each column */
  --pad-r:      36px;   /* right edge padding */
  --pad-bottom: 80px;
  --nav-h:      68px;

  --type-base:  16px;
  --type-small: 14px;
  --lh:         1.5;
  --tracking:   0.005em;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--type-base);
  line-height: var(--lh);
  letter-spacing: var(--tracking);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::after {
  content: '';
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: #0d00ff;
  z-index: 9999;
}

@view-transition { navigation: auto; }

@keyframes vt-fade-in  { from { opacity: 0; } }
@keyframes vt-fade-out { to   { opacity: 0; } }

::view-transition-old(root) { animation: 350ms ease both vt-fade-out; }
::view-transition-new(root) { animation: 400ms ease both vt-fade-in; }

a { color: inherit; text-decoration: none; transition: color 160ms ease; }
a:hover { color: #0d00ff; }
img { display: block; max-width: 100%; height: auto; }
/* Content images stay invisible until fully downloaded (script.js adds .is-loaded),
   so a half-drawn image is never shown */
main img, .lightbox img { opacity: 0; transition: opacity 200ms ease; }
main img.is-loaded, .lightbox img.is-loaded { opacity: 1; }

/* ============================================================
   Navigation
   Brand in left column (25vw), links in right column — both
   aligned to the same vertical rule that divides every page.
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  height: var(--nav-h);
  display: grid;
  grid-template-columns: var(--split) 1fr;
}

.nav .brand {
  display: flex;
  align-items: center;
  padding: 0 var(--pad);
  font-size: var(--type-base);
  letter-spacing: 0.01em;
  color: var(--text-hover);
  white-space: nowrap;
  overflow: hidden;
}
.nav .brand a { color: inherit; }
.brand-name    { font-weight: 700; text-transform: uppercase; }
.brand-gallery { font-weight: 700; text-transform: uppercase; color: #0d00ff; }

.nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0 var(--pad);
}
.nav li a {
  font-size: var(--type-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nav li a:hover  { color: #0d00ff; }
.nav li a.active { color: #0d00ff; }

/* ============================================================
   Page wrapper — transparent; structural work is per-section
   ============================================================ */
.page { margin: 0; padding: 0; }

/* ============================================================
   Split layout — artist & exhibition pages
   Left cell (sidebar) = 25vw, right cell (stream) = remainder.
   Matches nav columns exactly.
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: var(--split) 1fr;
  min-height: calc(100vh - var(--nav-h));
}

.split.full-bleed {
  background: linear-gradient(to right, #0d00ff var(--split), var(--bg) var(--split));
}

.sidebar {
  position: sticky;
  top: var(--nav-h);
  align-self: start;
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 24px var(--pad) var(--pad-bottom);
  font-size: var(--type-base);
  background: #0d00ff;
  color: #fff;
}

.split.full-bleed .sidebar {
  background: transparent;
}
.sidebar::-webkit-scrollbar { display: none; }

.sidebar a { color: #fff; }
.sidebar a:hover { color: rgba(255,255,255,0.7); }

.sidebar h1 {
  font-size: var(--type-base);
  font-weight: 400;
  margin: 0 0 18px;
  color: #fff;
}
.sidebar .meta { margin-bottom: 22px; color: rgba(255,255,255,0.7); }
.sidebar h2 {
  font-size: var(--type-small);
  font-weight: 400;
  margin: 22px 0 5px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sidebar p { margin: 0 0 1em; }
.sidebar ul.cv {
  list-style: none;
  margin: 0; padding: 0;
}
.sidebar ul.cv li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  margin-bottom: 4px;
  color: rgba(255,255,255,0.7);
}
.sidebar ul.cv li span,
.sidebar ul.cv li a { color: #fff; }
.sidebar ul.cv li a:hover { color: rgba(255,255,255,0.7); }

.stream {
  padding: 24px var(--pad-r) var(--pad-bottom) var(--pad);
  display: flex;
  flex-direction: column;
  gap: 72px;
}
.stream figure { margin: 0; }
.stream figure img { width: 100%; height: auto; }
.stream figcaption {
  margin-top: 10px;
  color: var(--text);
  font-size: var(--type-small);
}
.stream figcaption .row { display: block; }
.stream figcaption .title { font-style: italic; }
.stream figcaption .dim { color: var(--text-dim); }

/* ============================================================
   Artists index — names in right column, hover preview centre
   ============================================================ */
.index-grid {
  margin-left: var(--split);
  padding: 24px var(--pad-r) var(--pad-bottom) var(--pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 28px;
  row-gap: 6px;
  align-content: start;
}
.index-grid .item {
  display: block;
  padding: 4px 0;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.index-grid .item:hover { color: #0d00ff; }

/* ============================================================
   Exhibition detail page — sidebar + subnav + tab panels
   ============================================================ */
.exh-page {
  display: grid;
  grid-template-columns: var(--split) 1fr;
  grid-template-rows: auto 1fr;
  min-height: calc(100vh - var(--nav-h));
}
.exh-page > .sidebar  { grid-column: 1; grid-row: 1 / 3; }
.exh-page > .subnav   { grid-column: 2; grid-row: 1; }
.exh-page > .tab-panel {
  grid-column: 2;
  grid-row: 2;
  display: none;
}
.exh-page > .tab-panel.active { display: block; }

.subnav {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 var(--pad-r) 0 var(--pad);
  height: 32px;
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  background: var(--bg);
}
.subnav-btn {
  background: none; border: none; padding: 0;
  font-family: var(--font);
  font-size: var(--type-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  cursor: pointer;
  transition: color 160ms;
}
.subnav-btn.active { color: #0d00ff; }
.subnav-btn:hover  { color: #0d00ff; }

/* ============================================================
   Exhibitions index list
   ============================================================ */
.exh-list {
  margin-left: var(--split);
  padding: 24px var(--pad-r) var(--pad-bottom) var(--pad);
}
.exh-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--text);
  cursor: pointer;
}
.split .exh-list { margin-left: 0; }
.exh-item:first-child { border-top: 1px solid var(--rule); }
.exh-item-title { font-size: var(--type-base); transition: color 160ms; }
.exh-item:hover .exh-item-title { color: #0d00ff; }
.exh-item-artists { font-size: var(--type-small); color: var(--text-dim); margin-top: 2px; }
.exh-item-dates { font-size: var(--type-small); color: var(--text-dim); white-space: nowrap; }

@media (max-width: 860px) {
  .exh-list { margin-left: 0; padding: 20px; }
  .exh-item { grid-template-columns: 1fr; }
  .exh-item-dates { display: none; }
}

.hover-preview {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(42vw, 580px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: 10;
}
.hover-preview img { width: 100%; height: auto; object-fit: cover; }
.hover-preview.visible { opacity: 1; }

/* ============================================================
   Enquire button — appears in figcaptions and lightbox sidebar
   ============================================================ */
.enquire {
  display: inline-block;
  border: 1px solid currentColor;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  color: var(--text);
  text-decoration: none;
  margin-top: 8px;
  transition: background 160ms, color 160ms;
}
.enquire:hover { background: var(--text-hover); color: var(--bg); border-color: var(--text-hover); }

/* Variant on blue lightbox sidebar */
.lb-sidebar .enquire {
  color: rgba(255,255,255,0.8);
  margin-top: 16px;
}
.lb-sidebar .enquire:hover { background: #fff; color: #0d00ff; border-color: #fff; }

/* ============================================================
   Works — 2-col grid in right column, height-standardised
   ============================================================ */
.works-grid {
  margin-left: var(--split);
  padding: 24px var(--pad-r) var(--pad-bottom) var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 36px;
}
.split .works-grid   { margin-left: 0; }
.split .index-grid   { margin-left: 0; }
.exh-page .works-grid { margin-left: 0; }
.works-grid figure { margin: 0; cursor: zoom-in; }
.works-grid .img-wrap {
  height: clamp(340px, 54vh, 620px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.works-grid .img-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
  transition: opacity 160ms ease;
}
.works-grid figcaption {
  margin-top: 10px;
  font-size: var(--type-small);
}
.works-grid figcaption .title { font-style: italic; }
.works-grid figcaption .dim { color: var(--text-dim); }
.works-grid figcaption .enquire { display: block; margin-top: 8px; }

/* ============================================================
   Lightbox — split layout, mirrors artist/exhibition pages
   ============================================================ */
.lightbox {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0; bottom: 0;
  z-index: 500;
  display: none;
  grid-template-columns: 25vw 1fr;
  grid-template-rows: 1fr auto;
  background: var(--bg);
}
.lightbox.open { display: grid; }

.lb-sidebar {
  grid-row: 1 / 3;
  background: #0d00ff;
  color: #fff;
  padding: 24px 28px 80px;
  overflow-y: auto;
  scrollbar-width: none;
}
.lb-sidebar::-webkit-scrollbar { display: none; }
.lb-artist {
  display: block;
  color: rgba(255,255,255,0.7);
  font-size: var(--type-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
  text-decoration: none;
  transition: color 160ms;
}
.lb-artist:hover { color: #fff; }
.lb-title {
  font-size: var(--type-base);
  font-weight: 400;
  font-style: italic;
  color: #fff;
  margin: 0 0 14px;
}
.lb-dim {
  display: block;
  color: rgba(255,255,255,0.7);
  font-size: var(--type-small);
  margin-bottom: 4px;
}

.lb-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 36px 24px;
  cursor: pointer;
  overflow: hidden;
  min-height: 0;
}
.lb-stage .lb-img {
  max-width: 100%;
  max-height: calc(100vh - var(--nav-h) - 48px);
  object-fit: contain;
  display: block;
  transition: opacity 180ms ease;
  pointer-events: none;
}
.lb-stage .lb-img.fading { opacity: 0; }

.lb-stage {
  grid-column: 2;
  grid-row: 1;
}
.lb-overview {
  grid-column: 2;
  grid-row: 1;
  display: none;
  overflow-y: auto;
  padding: 24px 36px;
  align-content: start;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
}
.lightbox.overview .lb-stage   { display: none; }
.lightbox.overview .lb-overview { display: grid; }
.lb-ov-thumb {
  cursor: zoom-in;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg);
}
.lb-ov-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 160ms;
}
.lb-ov-thumb:hover img { opacity: 0.75; }

.lb-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 var(--pad-r) 0 var(--pad);
  height: 48px;
  font-size: var(--type-small);
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.lb-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}
.lb-mode-btn {
  background: none; border: none; padding: 0;
  font-size: var(--type-small); letter-spacing: 0.08em;
  text-transform: uppercase; font-family: var(--font);
  color: var(--text-dim); cursor: pointer;
  transition: color 160ms;
}
.lb-mode-btn.active { color: var(--text-hover); }
.lb-mode-btn:hover  { color: var(--text-hover); }
.lb-mode-sep { color: var(--text-dim); font-size: var(--type-small); }
.lb-nav button.lb-prev,
.lb-nav button.lb-next {
  background: none; border: none; padding: 0;
  font-size: 16px; color: var(--text-dim);
  cursor: pointer; font-family: var(--font);
  line-height: 1; transition: color 160ms;
}
.lb-nav button.lb-prev:hover,
.lb-nav button.lb-next:hover { color: var(--text-hover); }
.lb-counter { letter-spacing: 0.06em; font-size: var(--type-small); color: var(--text-dim); }

/* Exhibition list in artist sidebar */
.sidebar .exh-links { list-style: none; margin: 0; padding: 0; }
.sidebar .exh-links li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  margin-bottom: 4px;
  color: rgba(255,255,255,0.7);
}
.sidebar .exh-links a { color: #fff; }
.sidebar .exh-links a:hover { color: rgba(255,255,255,0.7); }

@media (max-width: 860px) {
  .lightbox.open {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto;
    overflow-y: auto;
  }
  /* Image first on mobile, tombstone below */
  .lb-stage   { grid-column: 1; grid-row: 1; padding: 20px 20px 12px; }
  .lb-sidebar { grid-column: 1; grid-row: 2; padding: 16px 20px 20px; }
  .lb-nav     { grid-column: 1; grid-row: 3; padding: 0 20px; }
  .lb-stage .lb-img { max-height: 55vh; }
}

/* ============================================================
   Landing — Dover Yard SVG full bleed
   ============================================================ */
.landing-svg {
  width: 100%;
  height: calc(100vh - var(--nav-h));
  background: url('/assets/dover-yard.png') center / cover no-repeat;
}


/* ============================================================
   Contact page text in right column
   ============================================================ */
.prose {
  margin-left: var(--split);
  padding: 32px var(--pad-r) var(--pad-bottom) var(--pad);
  max-width: 480px;
}
.prose p { margin: 0 0 1.1em; }
.prose .group { margin-bottom: 32px; }
.prose .label {
  color: var(--text-dim);
  display: block;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--type-small);
}

/* ============================================================
   Contact overlay — fixed, bottom corners, no background
   ============================================================ */
.c-overlay {
  position: fixed;
  bottom: 20px;
  font-size: var(--type-small);
  color: var(--bg);
  pointer-events: none;
  z-index: 90;
  letter-spacing: 0.01em;
}
.c-overlay.left  { left: 32px; }
.c-overlay.right { right: var(--pad-r); }

/* Mobile sidebar toggle — hidden on desktop, injected by JS */
.sidebar-toggle { display: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .index-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  :root { --split: 0px; --pad: 20px; }
  .nav { grid-template-columns: 1fr; height: auto; padding: 16px 20px; }
  .nav .brand { padding: 0; margin-bottom: 8px; }
  .nav ul { padding: 0; flex-wrap: wrap; gap: 14px; }
  .split { grid-template-columns: 1fr; }
  .stream { padding: 20px; }
  .index-grid { margin-left: 0; padding: 20px; grid-template-columns: 1fr 1fr; }
  .works-grid { margin-left: 0; padding: 20px; grid-template-columns: 1fr; }
  .prose { margin-left: 0; padding: 20px; }
  .hover-preview { display: none; }
  .c-overlay { display: none; }
  .sidebar { display: none; }
  .sidebar.open { display: block; }
  /* Full-bleed pages (publications): sidebar IS the whole page on mobile */
  .split.full-bleed .sidebar { display: block; }
  /* Artist/exhibition pages: always show the h1 (name/title) */
  .exh-page > .sidebar { display: block; padding: 14px 20px; }
  .exh-page > .sidebar > *:not(h1):not(.meta) { display: none; }
  .exh-page > .sidebar.open > * { display: block; }
  .exh-page > .sidebar.open { padding-bottom: 28px; }
  .sidebar-toggle {
    display: block;
    background: none;
    border: none;
    font-family: var(--font);
    font-size: var(--type-small);
    color: var(--text);
    cursor: pointer;
    padding: 14px 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    width: 100%;
  }
  .works-grid { padding-top: 40px; }
  .exh-page { grid-template-columns: 1fr; }
  .exh-page > .sidebar { grid-column: 1; grid-row: auto; }
  .exh-page > .subnav, .exh-page > .tab-panel { grid-column: 1; }
}

/* ============================================================
   Page transitions — content fades out then in between pages;
   the blue sidebar and the nav stay put (cross-document View
   Transitions: Chrome/Edge 126+, Safari 18.2+; others just navigate)
   ============================================================ */
@view-transition { navigation: auto; }

.nav     { view-transition-name: nav; }
.sidebar { view-transition-name: sidebar; }

::view-transition-old(root) { animation: vt-fade-out 200ms ease both; }
::view-transition-new(root) { animation: vt-fade-in 260ms ease 160ms both; }

/* Old and new snapshots cross-fade with plus-lighter blending, so the blue stays
   solid while the sidebar text swaps; the bar's size eases to the new page's */
::view-transition-group(nav),
::view-transition-group(sidebar) { animation-duration: 300ms; }

@keyframes vt-fade-out { to   { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}