/* Fonts: Libre Baskerville and Lato, linked from the page head (templates/index.js) so they load alongside this file. */

/* ============================================================
   BACKWOODS GALLERY — public site
   One light ground. Small tracked-caps titles with a tab row, art first,
   three-column work grids with the cataloguing beneath each image.
   The look follows the gallery's own site; the tokens are the Pace house set.
   ============================================================ */

:root {
  --bg:        #FFFFFF;   /* white (back to black and white, Otto 2026-10-29); every white surface and white type uses it */
  --ink:       #000000;
  --grey:      #6B6459;
  --chalk:     #F2F2F2;
  --black:     #000000;   /* black: the menu drawer and the footer band; type stays ink */
  --accent:    #000000;   /* no third colour (Otto, 2026-10-27): black does the accent's jobs */
  --line:      rgba(0,0,0,0.12);
  --nav-h:     80px;      /* taller bar so Menu and Contact sit lower (Otto, 2026-10-27) */
  --gutter:    48px;
  --measure:   62ch;
  --caps:      'Lato', sans-serif;
  --body:      'Libre Baskerville', Georgia, serif;
  --display:   'Cormorant Garamond', serif;
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);     /* strong ease-out for anything entering or leaving */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);     /* drawer curve: quick off the mark, long settle */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body { font-family: var(--body); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* No-JS fallback: every element GSAP animates must be visible without JavaScript. */
.site-nav, .hero-img img, .page-head h1, [data-reveal] { opacity: 1; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--ink); color: var(--bg); padding: 8px 12px; font-family: var(--caps); font-size: 0.75rem; }
.skip:focus { left: 8px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
@media (pointer: fine) { html.has-cursor * { cursor: none !important; } }  /* only once the custom cursor is really running */
.site-cursor { position: fixed; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 99999; opacity: 0; transition: width 0.4s ease, height 0.4s ease; }
.site-cursor.is-over-image { width: 72px; height: 72px; }
.site-cursor.is-over-link:not(.is-over-image) { width: 22px; height: 22px; }

/* ============================================================
   TYPE ROLES
   caps: Lato tracked capitals for names, titles, labels and nav.
   meta: Lato small, normal case, for cataloguing lines.
   body: Baskerville for statements, biographies and texts.
   ============================================================ */
.caps, .nav-name, .page-title, .tabs a, .tabs button, .cap-title, .cap-artist, .section-label, .link-underline, .btn, .field-label, .footer-name, .footer-links a, .catalogue dt, .cv-heading, .ex-list-title, .nav-menu, .nav-side {
  font-family: var(--caps); font-weight: 400; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.5;
}
.cap-meta, .cap-inch, .cap-price, .cap-dates, .form-note, .form-status, .footer-line, .footer-copy, .footer-ack, .cv-year, .page-sub, .letter-nav a, .year-nav a { font-family: var(--caps); font-weight: 400; font-size: 0.78rem; line-height: 1.75; }
.lead-in { font-family: var(--caps); font-weight: 300; font-size: 1.35rem; line-height: 1.55; max-width: 34em; padding-left: 28px; border-left: 1px solid var(--ink); margin-bottom: 40px; }
.body-text, .measure p { font-family: var(--body); font-size: 0.95rem; line-height: 1.9; margin-bottom: 1.3em; }
.measure { max-width: var(--measure); }
em { font-style: italic; }

/* ============================================================
   NAVIGATION — always solid, always light
   ============================================================ */
/* Nav after the Melbourne Art Fair site (Byron, 2026-10-27): Menu on the left, the wordmark centred, one link on the right.
   The menu is a drawer from the left; the page behind it blurs. On the home page the bar sits over the hero until you scroll. */
.site-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 200; height: var(--nav-h); padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: var(--bg); color: var(--ink); transition: background-color 0.3s ease, color 0.3s ease; }
.nav-name { justify-self: center; position: relative; display: flex; align-items: center; gap: 14px; font-size: 0.82rem; letter-spacing: 0.3em; white-space: nowrap; font-weight: 700; color: inherit; }
.nav-pigeon { width: auto; height: 24px; transition: opacity 0.3s ease; }
.nav-pigeon--white { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
.nav-menu, .nav-side { font-family: var(--caps); font-weight: 700; font-size: 0.84rem; letter-spacing: 0.18em; text-transform: uppercase; color: inherit; background: none; border: none; padding: 8px 0; position: relative; cursor: pointer; }
.nav-menu { justify-self: start; }
.nav-side { justify-self: end; }
.nav-menu::after, .nav-side::after { content: ''; position: absolute; bottom: 4px; left: 0; width: 0; height: 1px; background: currentColor; transition: width 0.3s ease; }
.nav-menu:hover::after, .nav-side:hover::after, .nav-side.active::after { width: 100%; }
.has-hero main { padding-top: 0; }
/* The bar stays warm white over the hero too, sitting on top of the photo (Otto, 2026-10-27). */
/* The bar is 80px at the top of the page and 40px at the bottom, in step with the scroll (Otto, 2026-10-27). */
.site-nav { height: var(--bar-h, var(--nav-h)); }
@media (prefers-reduced-motion: reduce) { .site-nav { height: var(--nav-h); } }
.has-hero .home-hero--bleed .hero-img img { height: 88vh; }
/* The far left edge of the screen opens the menu too (Otto, 2026-10-27): a thin strip under the drawer's resting place. */
.edge-hit { position: fixed; top: 0; left: 0; width: 28px; height: 100vh; z-index: 300; background: none; border: none; padding: 0; cursor: pointer; }
.edge-hit:focus { outline: none; }
@media (hover: none) { .edge-hit { display: none; } }
.menu { position: fixed; inset: 0; z-index: 400; }
.menu[hidden] { display: none; }
.menu-scrim { position: absolute; inset: 0; background: transparent; }  /* click-to-close only; the page stays as it is (Otto, 2026-10-27: no blur) */
.menu-panel { position: absolute; top: 0; left: 0; height: 100%; width: 50vw; background: var(--black); color: var(--bg); padding: 20px var(--gutter) 40px; display: flex; flex-direction: column; overflow-y: auto; transform: translateX(-100%); transition: transform 0.28s var(--ease-out); }
/* The drawer follows the cursor: the nearer the left edge, past the Menu word, the further it comes out. Mouse pointers only. */
.menu.peek { pointer-events: none; }
.menu.peek .menu-panel { transition: transform 0.12s linear; }  /* while the cursor drives it, follow closely; letting go uses the normal slide back */
/* Opening uses the drawer curve and a little longer; closing is quicker, the same path back. */
.menu.open .menu-panel { transition-duration: 0.6s; transition-timing-function: var(--ease-drawer); }  /* slow enough to watch it meet the pictures on the right half */
.menu-links li { opacity: 0; transform: translateX(-12px); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.menu.open .menu-links li { opacity: 1; transform: none; }
.menu.open .menu-links li:nth-child(1) { transition-delay: 0.18s; }
.menu.open .menu-links li:nth-child(2) { transition-delay: 0.22s; }
.menu.open .menu-links li:nth-child(3) { transition-delay: 0.26s; }
.menu.open .menu-links li:nth-child(4) { transition-delay: 0.30s; }
.menu.open .menu-links li:nth-child(5) { transition-delay: 0.34s; }
.menu.open .menu-links li:nth-child(6) { transition-delay: 0.38s; }
.menu-foot { transition: opacity 0.3s var(--ease-out) 0.4s; opacity: 0; }
.menu.open .menu-foot { opacity: 1; }
.menu.open .menu-scrim { opacity: 1; }
/* Choosing a page fades the drawer away before the page changes, so there is no hard flash to white. */
.menu-panel { transition-property: transform, opacity; }
.menu.leaving .menu-panel { opacity: 0; transition: opacity 0.3s var(--ease-out); }
.menu.open .menu-panel { transform: none; }
.menu-close { align-self: flex-start; background: none; border: none; color: inherit; padding: 6px; margin: 0 0 56px -6px; }
.menu-links { list-style: none; }
.menu-links a { display: block; font-family: var(--caps); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.15; padding: 6px 0; color: inherit; transition: opacity 0.2s ease; }
.menu-links a:hover { opacity: 0.6; }
.menu-links a[aria-current] { text-decoration: underline; text-decoration-color: var(--bg); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.menu-foot { margin-top: auto; padding-top: 48px; }
.menu-social { display: flex; gap: 20px; margin-top: 18px; }
.social-icon { display: inline-flex; color: inherit; opacity: 0.85; transition: opacity 0.2s ease; }
.social-icon:hover { opacity: 1; }
.social-icon svg { display: block; }
.footer-social { display: flex; gap: 16px; margin-top: 14px; }
.menu-social a, .menu-label { font-family: var(--caps); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: inherit; }
.menu-label { display: block; margin-bottom: 12px; }
.mailing-mini { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; align-items: end; max-width: 440px; }
.mailing-mini .field { color: inherit; }
.mailing-mini .field { margin-bottom: 14px; }
.mailing-mini .field-name { grid-column: 1 / -1; }
.mailing-mini input { color: inherit; border-color: currentColor; background: none; font-family: var(--caps); font-size: 0.9rem; }
.mailing-mini input::placeholder { color: inherit; opacity: 0.6; }
.mailing-mini .btn { margin: 0 0 14px; padding: 9px 18px; background: none; border-color: currentColor; color: inherit; }
.mailing-mini .btn:hover { background: var(--bg); border-color: var(--bg); color: var(--black); }
.mailing-mini .form-status { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) {
  .menu.peek .menu-panel { transform: none; opacity: 0; }
  .menu-panel, .menu.open .menu-panel { transform: none; opacity: 0; transition: opacity 0.2s ease; }
  .menu.open .menu-panel { opacity: 1; }
  .menu-links li, .menu.open .menu-links li { transform: none; transition: none; transition-delay: 0s; opacity: 1; }
  .menu-foot { transition: none; opacity: 1; }
  .feature-media--pair img, .feature-media--one img, .feature-media--whole img { transition: none; }
}

/* ============================================================
   PAGE HEAD — title, one line of context, tab row
   ============================================================ */
main { padding-top: var(--nav-h); }
.page-head { padding: 56px var(--gutter) 28px; }
.page-title { font-size: 1.3rem; letter-spacing: 0.2em; font-weight: 700; line-height: 1.4; }
.page-title-sub { font-weight: 400; }
.page-title-sub a { border-bottom: 1px solid transparent; }
.page-title-sub a:hover { border-bottom-color: currentColor; }
.page-sub { margin-top: 10px; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.68rem; color: var(--grey); }
.page-sub-state { color: var(--grey); }   /* no extra fade: it fell under the contrast line (Lighthouse, 2026-11-04) */
.tabs { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 22px; }
.tabs a, .tabs button { font-size: 0.66rem; letter-spacing: 0.14em; padding-bottom: 3px; border-bottom: 1px solid transparent; background: none; border-top: 0; border-left: 0; border-right: 0; color: inherit; }
.tabs a:hover, .tabs button:hover { border-bottom-color: var(--line); }
.tabs a.on, .tabs button.on { border-bottom-color: var(--ink); font-weight: 700; }
.tabs--quiet { margin-top: 14px; }
.tabs--quiet a { color: var(--grey); letter-spacing: 0.1em; }
.tabs--quiet a:hover { color: var(--ink); }
.index-controls { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.letter-nav { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 22px; }
.letter-nav a { color: var(--grey); letter-spacing: 0.12em; }
.letter-nav a:hover { color: var(--ink); }

/* ============================================================
   SECTIONS AND GRIDS
   ============================================================ */
section { padding: 24px var(--gutter) 56px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.section-label { font-size: 0.68rem; letter-spacing: 0.2em; color: var(--ink); font-weight: 700; }
.section-head .cap-meta, .section-head .link-underline { color: var(--grey); }
.link-underline { font-size: 0.66rem; letter-spacing: 0.14em; position: relative; padding-bottom: 3px; white-space: nowrap; }
.link-underline::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; opacity: 0.4; transition: opacity 0.3s ease; }
.link-underline:hover::after { opacity: 1; }
.btn { display: inline-block; font-size: 0.66rem; letter-spacing: 0.16em; border: 1px solid var(--black); padding: 13px 26px; margin-top: 28px; background: var(--black); color: var(--bg); transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.btn:hover { background: var(--bg); color: var(--black); }
.status { color: var(--accent); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.two-col--text-first { grid-template-columns: 6fr 5fr; }
.inline-links { display: flex; flex-wrap: wrap; gap: 16px 36px; }
.back-link { padding-top: 0; }
.no-image { display: block; width: 100%; aspect-ratio: 4/5; background: var(--chalk); }

/* Captions: the lines under any image, grouped as the live site groups them: who and what, then materials, then size, then price */
.cap { display: flex; flex-direction: column; gap: 0; margin-top: 18px; }
.cap-artist, .cap-title { font-size: 0.7rem; letter-spacing: 0.14em; line-height: 1.7; }
.cap-artist, .work-details .cap-artist { font-weight: 700; }
.cap-title { margin-bottom: 8px; }
.cap-size { margin-top: 6px; }
.cap-title em { font-style: normal; }
.cap-meta { color: var(--ink); }
.cap-inch, .cap-dates { color: var(--grey); }
.cap-price { margin-top: 6px; font-weight: 400; }
.cap-under { margin-top: 10px; color: var(--grey); }
a.cap-title:hover, a.cap-artist:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.cap-title, a.cap-artist { display: inline-block; padding: 3px 0; margin: -3px 0; }   /* a 24px tap target without moving the caption */

/* Image grids (2026-10-29): justified rows. Every image is shown whole; the images in a row share one height and each takes the width
   its shape needs, so a landscape work spreads wider and a row can hold two, three or four. --ar on each item is width over height:
   the build fills it from the image's size, and script.js fills it in for images whose size the build did not know. Captions sit under
   the images, so they line up along a row. The last row keeps its natural size instead of stretching. */
.justified { --row-h: 320px; --gap-x: 40px; --gap-y: 64px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap-y) var(--gap-x); }
.justified > * { --ar: 1; flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row-h)); min-width: 150px; max-width: 100%; }
.justified::after { content: ''; flex-grow: 1000000; margin-top: calc(var(--gap-y) * -1); }
.justified img { display: block; width: 100%; height: auto; transition: transform 0.4s ease; }
.justified .no-image { display: block; aspect-ratio: 1; background: var(--chalk); }

/* Works */
.works-grid { --row-h: 320px; }
/* Artwork pictures grow whole on hover, frame and all, never clipped by their box (Otto, 2026-11-03). */
.work-card-img { display: block; }
.work-card:hover .work-card-img img { transform: scale(1.02); }

/* Exhibition cards: the lead image whole, title and dates beneath */
.ex-grid { --row-h: 300px; --gap-y: 56px; }
.ex-card-img { display: block; }
.ex-card:hover .ex-card-img img { transform: scale(1.02); }

/* Exhibitions index: one show per row, as the live site has it. Image whole on the left, title large on the right. */
.ex-rows li { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 0 0 56px; align-items: start; }
.ex-rows li + li { padding-top: 48px; border-top: 1px solid var(--line); }
/* Every show's image sits whole in the same box, centred, so rows line up whatever the picture's shape (Otto, 2026-10-28). */
.ex-row-img { display: flex; align-items: center; justify-content: center; height: 56vh; max-height: 560px; }
.ex-row-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform 0.4s ease; }
.ex-row:hover .ex-row-img img { transform: scale(1.01); }
.ex-row.no-img .ex-row-text { grid-column: 2; }   /* no picture: the text stays on the right and the left is left blank (Otto, 2026-10-29) */
.ex-row-text { padding-top: 4px; align-self: center; }
.ex-row-title { font-family: var(--caps); font-weight: 700; font-size: 1.45rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; margin-bottom: 14px; }
.ex-row-sub { display: block; }
.ex-row-text .cap-dates { display: block; color: var(--grey); margin-bottom: 20px; }
.ex-row-blurb { max-width: 52ch; margin-bottom: 20px; }
.ex-row-text .link-underline { color: var(--grey); }

/* Artists: a work shown whole, name beneath */
.artists-grid { --row-h: 340px; --gap-x: 32px; --gap-y: 48px; }
.artist-tile-img { display: block; }
.artists-group + .artists-group { margin-top: 48px; }
.artist-tile:hover .artist-tile-img img { transform: scale(1.02); }
.artist-tile .cap-title { display: block; margin-top: 12px; }
.artists-list { display: none; columns: 4; column-gap: 40px; }
.artists-index .section-head { margin-bottom: 36px; }
.artists-list li { padding: 7px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.artists-list a { font-family: var(--caps); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.artists-index[data-view="list"] .artists-grid { display: none; }
.artists-index[data-view="list"] .artists-list { display: block; }

/* ============================================================
   HOME
   ============================================================ */
.home-hero { padding: 0 var(--gutter); }
.home-hero .hero-img img { width: 100%; height: auto; max-height: 82vh; object-fit: cover; object-position: center 40%; }
.hero-cap { margin-top: 16px; }
.home-shows { padding-top: 48px; }
.home-intro { padding-bottom: 96px; }
/* Home as feature blocks (2026-10-27): edge-to-edge hero, then one split block per door into the site. Flat scroll, no reveals. */
.home-hero--bleed { padding: 0; }
.home-hero--bleed .hero-img img { height: 82vh; max-height: none; }
.home-hero--bleed .hero-cap { padding: 16px var(--gutter) 0; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; border-top: 1px solid var(--line); min-height: 64vh; }
.feature-text { padding: 72px var(--gutter); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.feature-title { font-family: var(--caps); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.2; margin-bottom: 20px; }
.feature-text .body-text { max-width: 44ch; }
.feature-media { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 64vh; }
.feature-media--pair a { position: relative; display: block; overflow: hidden; }
/* Artists slider: two portraits across, flick sideways, snaps to each. Arrows sit bottom right. */
.feature-media--slider { grid-template-columns: 1fr; position: relative; overflow: hidden; }
.slider { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; height: 64vh; }
.slider::-webkit-scrollbar { display: none; }
.slider:focus-visible { outline-offset: -3px; }
.slide { position: relative; flex: 0 0 50%; scroll-snap-align: start; overflow: hidden; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.slider-nav { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 2px; }
.slider-btn { font-family: var(--caps); font-size: 1rem; line-height: 1; width: 44px; height: 44px; background: var(--black); color: var(--bg); border: none; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .slider-btn:hover { background: var(--bg); color: var(--black); } .slide:hover img { transform: scale(1.02); } .slide:hover .feature-tag { background: var(--bg); color: var(--black); } }
@media (prefers-reduced-motion: no-preference) { .slider { scroll-behavior: smooth; } }
.feature-media--pair img, .feature-media--one img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.feature-tag { transition: background-color 0.2s ease, color 0.2s ease; }
.feature-media--one { overflow: hidden; }
.feature-media--whole img { transition: transform 0.4s ease; }
@media (hover: hover) and (pointer: fine) {
  .feature-media--pair a:hover img, .feature-media--one:hover img, .feature-media--whole:hover img { transform: scale(1.02); }
  .feature-tag { transition: background-color 0.2s ease, color 0.2s ease; }
  .feature-media--pair a:hover .feature-tag { background: var(--bg); color: var(--black); }
}
.feature-media--one { grid-template-columns: 1fr; }
.feature-tag { position: absolute; left: 16px; bottom: 16px; font-family: var(--caps); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; background: var(--black); color: var(--bg); padding: 8px 12px; }
.feature-media--whole { grid-template-columns: 1fr; padding: var(--gutter); align-content: center; justify-items: center; }  /* the same gap to the site edge as to the centre line */
.feature-media--whole img { max-width: 100%; max-height: 70vh; width: auto; height: auto; object-fit: contain; }
.feature-media--whole .cap { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 20px; }
.home-mailing { border-top: 1px solid var(--line); padding: 64px var(--gutter) 96px; }
@media (max-width: 900px) {
  .menu-panel { width: 100vw; }
  .nav-name { font-size: 0.72rem; letter-spacing: 0.22em; }
  .feature, .feature-media { grid-template-columns: 1fr; min-height: 0; }
  .feature-media--pair { grid-template-columns: 1fr 1fr; }
  .feature-media--pair a { aspect-ratio: 4 / 5; }
  .slider { height: 70vw; }
  .slide { flex-basis: 80%; }
  .feature-media--one img { aspect-ratio: 3 / 2; height: auto; }
  .feature-text { padding: 48px var(--gutter); }
  .home-hero--bleed .hero-img img { height: 60vh; }
  .home-mailing .two-col { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   ARTIST PAGE
   ============================================================ */
.artist-overview { padding-top: 8px; }
.artist-lead img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; object-position: left top; }
.artist-bio .measure { columns: 1; }
.artist-portrait img { max-width: 100%; max-height: 70vh; width: auto; height: auto; }
/* CV sections fold (Byron, 2026-10-28): each heading opens its own list, closed to start, the count beside it */
.cv-section { margin-bottom: 0; border-top: 1px solid var(--line); }
.cv-section:last-of-type { border-bottom: 1px solid var(--line); }
.cv-heading { display: flex; align-items: center; gap: 12px; font-size: 0.66rem; letter-spacing: 0.18em; margin: 0; padding: 14px 0; color: var(--ink); cursor: pointer; list-style: none; }
.cv-heading::-webkit-details-marker { display: none; }
.cv-heading::after { content: '+'; margin-left: auto; font-size: 0.9rem; font-weight: 300; color: var(--grey); }
.cv-section[open] > .cv-heading::after { content: '\2212'; }
.cv-n { color: var(--grey); letter-spacing: 0.08em; }
.cv-section .cv-list { padding-bottom: 20px; }
.cv-section .cv-list li:first-child { border-top: none; }
@media (hover: hover) { .cv-heading:hover { color: var(--grey); } }
.cv-list { max-width: 72ch; }
.cv-list li { display: grid; grid-template-columns: 60px 1fr; gap: 16px; padding: 7px 0; border-top: 1px solid var(--line); font-family: var(--caps); font-weight: 300; font-size: 0.8rem; line-height: 1.6; }
.cv-year { padding-top: 1px; }
.ex-list li { border-top: 1px solid var(--line); }
.ex-list li:last-child { border-bottom: 1px solid var(--line); }
.ex-list a { display: grid; grid-template-columns: 2fr 1.5fr 1fr; gap: 24px; padding: 14px 0; align-items: baseline; transition: padding-left 0.3s ease; }
.ex-list a:hover { padding-left: 8px; }
.ex-list-title { font-size: 0.7rem; letter-spacing: 0.14em; }
.ex-list .cap-dates { text-align: right; }
.artist-enquire { padding-top: 0; }

/* ============================================================
   EXHIBITION PAGE
   ============================================================ */
.ex-lead { padding-top: 8px; padding-bottom: 40px; }
.ex-lead img { width: auto; max-width: 100%; height: auto; max-height: 80vh; }
.ex-aside { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; }   /* the captioned work stays beside the essay as it scrolls */
.ex-aside img { max-width: 100%; max-height: 64vh; width: auto; height: auto; }
.ex-gallery-grid { --row-h: 400px; --gap-x: 32px; --gap-y: 32px; }
.ex-gallery-item { overflow: hidden; }
/* Download catalogue / Download essay (Byron's note, 2026-10-28): side by side under the Overview text */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* the bot trap in the forms */
.ex-docs { display: flex; flex-wrap: wrap; gap: 12px; }
.ex-docs .btn { margin-top: 28px; }
.ex-docs .btn + .btn { margin-left: 0; }
.ex-overview--docs { padding-top: 0; }
.ex-overview--docs .ex-docs .btn { margin-top: 0; }

/* ============================================================
   WORK PAGE
   ============================================================ */
.work-layout { display: grid; grid-template-columns: 7fr 4fr; gap: 72px; padding-top: 48px; align-items: start; }
.work-image { margin-bottom: 24px; display: flex; justify-content: flex-start; }
.work-image img { max-width: 100%; max-height: 86vh; width: auto; height: auto; object-fit: contain; }
.work-image { flex-wrap: wrap; }
.work-credit { flex: 1 1 100%; margin: 8px 0 0; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--grey-mid, #6B6459); }
.work-details { position: sticky; top: calc(var(--nav-h) + 48px); }
.work-details .cap-artist { display: block; margin-bottom: 10px; }
.work-title { font-family: var(--caps); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.6; margin-bottom: 28px; }
.work-title em { font-style: normal; }
.catalogue { border-top: 1px solid var(--line); }
.catalogue > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.catalogue dt { font-size: 0.62rem; letter-spacing: 0.18em; color: var(--grey); padding-top: 3px; }
.catalogue dd { font-family: var(--caps); font-weight: 300; font-size: 0.8rem; line-height: 1.65; }
.catalogue dd a { border-bottom: 1px solid var(--line); }
.catalogue dd a:hover { border-bottom-color: var(--ink); }
.work-ref { display: block; margin-top: 36px; color: var(--grey); opacity: 0.7; }
.work-more { padding-top: 0; }

/* ============================================================
   HISTORY, CONTACT, FORMS, 404
   ============================================================ */
.history-img img { width: 100%; height: auto; }
.field { display: block; margin-bottom: 22px; }
.field-label { display: block; font-size: 0.62rem; letter-spacing: 0.16em; color: var(--grey); margin-bottom: 6px; }
.field input, .field textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--ink); padding: 8px 0; font-family: var(--body); font-size: 0.95rem; color: inherit; border-radius: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form-note { margin-top: 16px; color: var(--grey); }
.form-status { margin-top: 12px; min-height: 1.2em; }
.form-status.err { color: var(--accent); }
.enquiry-form .section-label, .contact-details .section-label { display: block; margin-bottom: 20px; }
.req { color: var(--grey); font-weight: 400; }
.choice { border: none; padding: 0; }
.choice legend { display: block; margin-bottom: 10px; }
.choice label { display: inline-flex; align-items: center; gap: 8px; margin-right: 24px; font-family: var(--caps); font-size: 0.72rem; letter-spacing: 0.08em; }
.choice input { accent-color: var(--black); width: 16px; height: 16px; }
.artist-enquire { padding-bottom: 96px; }
.artist-enquire .section-head { border-top: none; padding-top: 0; }
.contact-links { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.contact-mailing { border-top: 1px solid var(--line); padding: 64px var(--gutter) 96px; }
.form-note--top { margin: -8px 0 24px; }
.notfound { min-height: 40vh; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { padding: 56px var(--gutter) 40px; background: var(--black); color: rgba(255,255,255,0.72); }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 40px; align-items: start; }
.footer-name { display: block; font-size: 0.66rem; letter-spacing: 0.22em; color: var(--bg); margin-bottom: 6px; }
.footer-line { display: block; font-size: 0.72rem; }
.footer-links { display: flex; flex-direction: column; gap: 6px; }
.footer-links a { font-size: 0.64rem; letter-spacing: 0.14em; }
.footer-links a:hover, .footer-line a:hover { color: var(--bg); }
.site-footer .footer-row { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 24px; }
.footer-ack { font-size: 0.68rem; max-width: 60ch; justify-self: end; }
.footer-row { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 32px; }
.footer-copy { font-size: 0.66rem; letter-spacing: 0.08em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .works-grid { --row-h: 260px; --gap-x: 32px; --gap-y: 48px; }
  .ex-grid { --row-h: 240px; }
  .artists-grid { --row-h: 280px; }
  .ex-gallery-grid { --row-h: 320px; }
  .artists-list { columns: 3; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-ack { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .site-nav { padding: 0 24px; }
  .page-head { padding-top: 40px; }
  section { padding: 24px var(--gutter) 48px; }
  .two-col, .two-col--text-first { grid-template-columns: 1fr; gap: 40px; }
  .work-layout { grid-template-columns: 1fr; gap: 40px; padding-top: 24px; }
  .work-details { position: static; }
  .ex-list a { grid-template-columns: 1fr; gap: 4px; }
  .ex-rows li { grid-template-columns: 1fr; gap: 20px; padding-bottom: 40px; }
  .ex-rows li + li { padding-top: 32px; }
  .ex-row-title { font-size: 1.1rem; }
  .ex-row.no-img .ex-row-text { grid-column: 1; }
  .ex-row-img { height: auto; max-height: none; aspect-ratio: 4 / 3; }
  .lead-in { font-size: 1.1rem; padding-left: 18px; }
  .ex-list .cap-dates { text-align: left; }
  .artists-list { columns: 2; }
}
@media (max-width: 600px) {
  .works-grid, .ex-grid { --row-h: 220px; --gap-x: 16px; --gap-y: 40px; }
  .artists-grid { --row-h: 200px; --gap-x: 16px; --gap-y: 32px; }
  .ex-gallery-grid { --row-h: 200px; --gap-x: 16px; --gap-y: 16px; }
  .justified > * { min-width: 120px; }
  .artists-list { columns: 1; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .footer-cols { grid-template-columns: 1fr; }
}

/* ── Audit fixes, 2026-10-28 ── */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nojs-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 14px var(--gutter) 0; font-family: var(--caps); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; }
.has-hero .nojs-nav { position: relative; z-index: 5; }
.menu-panel a:focus-visible, .menu-panel button:focus-visible, .menu-panel input:focus-visible { outline-color: var(--bg); }  /* the ring must show on the dark panel */
@media (max-width: 400px) {  /* the narrowest phones: side columns take their own width, the wordmark centres in what is left */
  .site-nav { grid-template-columns: auto 1fr auto; }
  .nav-name { font-size: 0.62rem; letter-spacing: 0.14em; gap: 8px; }
  .nav-pigeon { height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .work-card-img img, .ex-row-img img, .artist-tile-img img { transition: none; }
}

/* Artists page: strictly four across (2026-10-29). Each row is its own line of four whose widths follow the pictures' shapes, so the heights match and nothing is cropped.
   Under 900px the rows dissolve and the justified flow takes over. */
@media (min-width: 901px) {
  .artists-grid.justified { display: block; }
  .artists-grid.justified::after { display: none; }
  .artists-row { display: block; margin-bottom: 48px; }
  .row4 { display: flex; gap: 32px; align-items: flex-start; }
  .row4 > .artist-tile { flex: var(--ar) 1 0; min-width: 0; }
}
@media (max-width: 900px) {
  .artists-row, .row4 { display: contents; }
  .artists-grid .artist-tile { --ar: 1; flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row-h)); min-width: 120px; max-width: 100%; }
}

/* Home: the gallery line is a black band under the hero, centred; the exhibitions slider shows one picture at a time. */
.home-intro-band { background: var(--black); color: var(--bg); text-align: center; padding: 96px var(--gutter); display: flex; flex-direction: column; align-items: center; }
.home-intro-band .feature-title { margin-bottom: 24px; }
.home-intro-band .body-text { max-width: 62ch; color: inherit; }
.home-intro-band .btn { background: var(--bg); border-color: var(--bg); color: var(--black); }
.home-intro-band .btn:hover { background: var(--black); color: var(--bg); }
.slider--one .slide { flex: 0 0 100%; }
.home-mailing { text-align: center; }
.mailing-centre { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.mailing-centre .mailing-form { width: 100%; text-align: left; margin-top: 24px; }

/* Friends sit smaller than Family: six across where Family is four (2026-10-29). */
@media (min-width: 901px) { .artists-group--friends .row4 { gap: 24px; } .artists-group--friends .artists-row { margin-bottom: 36px; } }
.artists-group--friends { --row-h: 200px; }
@media (max-width: 900px) { .artists-group--friends { --row-h: 180px; } }
@media (max-width: 600px) { .artists-group--friends { --row-h: 140px; } }

/* Section tabs that stay with the page (2026-10-29): the row scrolls up to just under the nav bar's Menu word and stays there, so the artist page can always be navigated. */
.page-head--docked { padding-bottom: 0; }
.tabs--dock { position: sticky; top: calc(var(--bar-h, var(--nav-h)) - 14px); z-index: 150; background: var(--bg); margin-top: 0; padding: 14px var(--gutter) 12px; }   /* tucks 14px under the bar so the row sits close to the Menu word */
html:has(.tabs--dock) { scroll-padding-top: calc(var(--nav-h) + 48px); }
@media (max-width: 600px) { .tabs--dock { gap: 6px 16px; padding-left: 24px; padding-right: 24px; } }

/* Works headings on artist pages */
.works-group { font-family: var(--caps); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 48px 0 28px; }
.artist-works .works-group:first-of-type { margin-top: 32px; }
.works-type { font-family: var(--caps); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin: 40px 0 24px; }

/* Artist and exhibition works: four across, same height within a row (2026-10-29), as the Artists page. */
@media (min-width: 901px) {
  .works-grid.justified { display: block; }
  .works-grid.justified::after { display: none; }
  .works-row { display: block; margin-bottom: 64px; }
  .works-row .row4 { gap: 40px; }
  .row4 > .work-card { flex: var(--ar) 1 0; min-width: 0; }
}
@media (max-width: 900px) {
  .works-row { display: contents; }
  .works-grid .work-card { --ar: 1; flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row-h)); min-width: 120px; max-width: 100%; }
}

/* Artist page, Exhibitions at Backwoods, split 50/50 (2026-10-29): the list on the left, the image of the show under the pointer on the right. */
.ex-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.ex-split-panel { position: sticky; top: calc(var(--nav-h) + 24px); height: min(62vh, 560px); }
.ex-pic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.35s ease; }
.ex-pic.on { opacity: 1; }
.ex-pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ex-names li { border-top: 1px solid var(--line); }
.ex-names li:last-child { border-bottom: 1px solid var(--line); }
.ex-name { display: block; padding: 22px 0; transition: opacity 0.25s ease; }
.ex-name-title { display: block; font-family: var(--caps); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; }
.ex-name-sub { display: block; margin-top: 6px; }
.ex-name .cap-dates { display: block; margin-top: 4px; color: var(--grey); }
.ex-name-thumb { display: none; }
@media (hover: hover) and (pointer: fine) { .ex-names:hover .ex-name:not(:hover):not(:focus-visible) { opacity: 0.4; } }
@media (max-width: 900px) {
  .ex-split { grid-template-columns: 1fr; gap: 0; }
  .ex-split-panel { display: none; }
  .ex-name-thumb { display: block; margin-top: 14px; }
  .ex-name-thumb img { width: 100%; height: auto; }
}
@media (prefers-reduced-motion: reduce) { .ex-pic { transition: none; } }

.ex-split--text { grid-template-columns: 1fr; }

/* The whole exhibitions block is the size of one picture (Otto, 2026-10-29): the panel keeps the proportions of the Quarantine Series photo (about 3:2), the list is exactly as tall,
   and its type shrinks with the number of shows so they all fit. A few shows are stacked; more than eight go one per line. */
@media (min-width: 901px) {
  .ex-split--pic .ex-split-panel { height: auto; aspect-ratio: 1200 / 783; max-height: 62vh; width: 100%; }
  .ex-split--pic .ex-names { align-self: stretch; container-type: size; display: flex; flex-direction: column; overflow-y: auto; }
  .ex-split--pic .ex-names li { flex: 1 1 0; min-height: 0; }
  .ex-split--pic .ex-name { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0; }
  .ex-split--pic .ex-name-title { font-size: clamp(0.58rem, calc(100cqh / var(--n) * 0.34), 1.15rem); line-height: 1.15; letter-spacing: 0.08em; }
  .ex-split--pic .ex-name-sub, .ex-split--pic .ex-name .cap-dates { font-size: clamp(0.55rem, calc(100cqh / var(--n) * 0.22), 0.8rem); line-height: 1.15; margin-top: 2px; }
  .ex-split--dense .ex-name { flex-direction: row; align-items: center; gap: 16px; }
  .ex-split--dense .ex-name-title { flex: 1.6; min-width: 0; font-size: clamp(0.55rem, calc(100cqh / var(--n) * 0.42), 0.85rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ex-split--dense .ex-name-sub, .ex-split--dense .ex-name .cap-dates { flex: 1; min-width: 0; margin: 0; font-size: clamp(0.5rem, calc(100cqh / var(--n) * 0.38), 0.75rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Height cap for four-across rows: a row is no wider than its pictures need to stand --cap tall. The width is the shapes' sum times the cap, plus the gaps. */
@media (min-width: 901px) {
  .works-grid { --cap: 520px; }
  .artists-grid { --cap: 460px; }
  .artists-group--friends { --cap: 300px; }
  .row4 { --gap: 40px; max-width: calc(var(--sar, 4) * var(--cap, 520px) + (var(--rn, 4) - 1) * var(--gap)); }
  .artists-grid .row4 { --gap: 32px; }
  .artists-group--friends .row4 { --gap: 24px; }
}

/* Each picture sits whole in a box of its own shape, kept between 3:4 and 3:1 (Otto, 2026-10-29): a very tall sculpture is shown smaller inside its box, never stretched, cropped or turned into a sliver.
   The box has its shape before the picture loads, so the page does not jump as pictures arrive. */
.justified .work-card-img, .justified .artist-tile-img { aspect-ratio: var(--ar, 1); }
.justified .work-card-img img, .justified .artist-tile-img img { width: 100%; height: 100%; object-fit: contain; object-position: left bottom; }
.justified .work-card-img.is-empty { aspect-ratio: var(--ar, 1); }

/* Exhibitions on artist pages: title, artist line and dates on one line (Otto, 2026-10-29), not stacked. */
.ex-split .ex-name { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; padding: 18px 0; }
.ex-split .ex-name-title { flex: 1 1 auto; min-width: 0; font-size: 0.85rem; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-split .ex-name-sub, .ex-split .ex-name .cap-dates { margin: 0; min-width: 0; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-split .ex-name-sub { flex: 0 1 auto; max-width: 30%; }
.ex-split .ex-name .cap-dates { flex: 0 0 auto; text-align: right; }
.ex-split .ex-name-thumb { flex: 0 0 100%; }
@media (min-width: 901px) {
  .ex-split--pic .ex-name { flex-wrap: nowrap; align-items: center; }
  .ex-split--pic .ex-name-title { font-size: clamp(0.55rem, calc(100cqh / var(--n) * 0.42), 0.85rem); line-height: 1.2; }
  .ex-split--pic .ex-name-sub, .ex-split--pic .ex-name .cap-dates { font-size: clamp(0.5rem, calc(100cqh / var(--n) * 0.38), 0.75rem); line-height: 1.2; margin: 0; }
}
@media (max-width: 900px) { .ex-split .ex-name-title { flex: 1 1 100%; white-space: normal; } }

/* Artist page, Exhibitions at Backwoods: more room above the heading, and a rule closing the section (Otto, 2026-10-29). */
.artist-exhibitions .section-head { padding-top: 56px; }
.artist-exhibitions .ex-split { padding-bottom: 56px; border-bottom: 1px solid var(--line); }

/* Links at the bottom of an artist's Overview: their website and Instagram as buttons, then "Represented by" other galleries. Each shows only when filled in. */
.artist-links { margin-top: 32px; }
.artist-link-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.artist-link-buttons .btn { margin-top: 0; }
.artist-rep { margin-top: 20px; font-family: var(--caps); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); }
.artist-link-buttons + .artist-rep { margin-top: 24px; }
.artist-rep a { color: var(--ink); }
.artist-links .artist-rep, .artist-links .artist-rep a { font-family: var(--caps); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.6; }

/* Artist links sit in the bottom left corner of the Overview: the text column runs the height of the picture and the links are pushed to its foot. */
@media (min-width: 901px) {
  .artist-overview .two-col { align-items: stretch; }
  .artist-overview .measure { display: flex; flex-direction: column; }
  .artist-overview .artist-links { margin-top: auto; padding-top: 32px; }
}

/* Installation photos as a scroller above the Overview (2026-10-29): each picture whole at one height, side by side, with arrows. */
.ex-lead--scroller { padding: 8px 0 40px; }
.ex-scroller { display: block; min-height: 0; }
.ex-scroller .slider { height: min(64vh, 640px); gap: 16px; padding: 0 var(--gutter); scroll-padding-left: var(--gutter); }
.ex-scroller .slide { flex: 0 0 auto; height: 100%; aspect-ratio: var(--ar, 1.5); overflow: hidden; }
.ex-scroller .slide img { width: 100%; height: 100%; object-fit: contain; object-position: left center; display: block; }
.ex-scroller .slider-nav { right: var(--gutter); }
@media (max-width: 600px) { .ex-scroller .slider { height: 46vh; } }

/* Exhibitions list: every picture fills the whole left block, so all are the same width; a portrait picture makes its block taller (Otto, 2026-10-29). */
.ex-row-img { display: block; height: auto; max-height: none; }
.ex-row-img img { display: block; width: 100%; max-width: 100%; height: auto; max-height: none; }
@media (max-width: 900px) { .ex-row-img { aspect-ratio: auto; } }

/* Work page (2026-10-29): one picture at a time on the left, the other views as thumbnails under the Enquire button. */
.work-thumbs { display: none; }
.work-layout.is-gallery .work-image:not(.on) { display: none; }
.work-layout.is-gallery .work-thumbs { display: grid; grid-template-columns: repeat(auto-fill, 54px); gap: 8px; margin-top: 32px; }   /* half the first size */
.work-thumb { display: block; aspect-ratio: 1; padding: 7px;   /* the picture sits inside the box, clear of its edge */
   background: #fff; border: 1px solid var(--line); cursor: pointer; overflow: hidden; }
.work-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.work-thumb.on { border-color: var(--ink); }
.work-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Work page: every picture is centred in the same stage, so flicking through the thumbnails does not move or resize the block (Otto, 2026-10-29). */
.work-image { justify-content: center; }
.work-layout.is-gallery .work-image { display: none; align-items: center; height: min(86vh, 820px); margin-bottom: 0; }
.work-layout.is-gallery .work-image.on { display: flex; }
.work-layout.is-gallery .work-image img { max-width: 100%; max-height: 100%; }

/* Work page zoom: a magnifier over the picture, zoom buttons bottom left, and drag to move once zoomed. */
.work-images { position: relative; }
.work-image { position: relative; overflow: hidden; }
.work-image img { transform-origin: center; transition: transform 0.18s ease-out; will-change: transform; -webkit-user-drag: none; user-select: none; }
.work-images.is-dragging .work-image img { transition: none; }
.work-images.is-zoomed .work-image.on, .work-images.is-zoomed .work-image { cursor: grab; }
.work-images.is-dragging .work-image { cursor: grabbing; }
.zoom-lens { position: absolute; z-index: 5; border-radius: 50%; border: 1px solid var(--ink); background-color: #fff; background-repeat: no-repeat; box-shadow: 0 2px 14px rgba(0,0,0,0.25); pointer-events: none; }
.zoom-controls { position: absolute; left: 0; top: 0; z-index: 6; display: flex; align-items: center; gap: 2px; }
.zoom-controls button { font-family: var(--caps); font-size: 1rem; line-height: 1; min-width: 40px; height: 40px; padding: 0 12px; background: var(--black); color: var(--bg); border: none; cursor: pointer; }
.zoom-controls button[data-z="0"] { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; }
.zoom-controls button:hover { background: var(--bg); color: var(--black); outline: 1px solid var(--black); }
.zoom-level { font-family: var(--caps); font-size: 0.7rem; letter-spacing: 0.1em; margin-left: 12px; color: var(--grey); }
@media (prefers-reduced-motion: reduce) { .work-image img { transition: none; } }

html.lens-on .site-cursor { opacity: 0 !important; }
html.lens-on .work-images { cursor: none; }

/* Work page thumbnails: no border or padding, the picture fills the whole square (Otto, 2026-10-29). */
.work-thumb { padding: 0; border: 0; background: var(--chalk); }
.work-thumb img { object-fit: cover; }
.work-thumb.on { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Exhibition page: Installation views under the works. One large picture on the left, thumbnails on the right (Otto, 2026-10-29). */
.ex-install { padding: 0 var(--gutter) 80px; }
.ex-install-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.ex-install-layout:not(:has(.ex-install-thumbs)) { grid-template-columns: minmax(0, 1fr); }
.ex-install-stage { display: flex; align-items: flex-start; justify-content: center; height: min(78vh, 760px); }
.ex-install-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.ex-install-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; max-height: min(78vh, 760px); overflow-y: auto; align-content: start; }
.ex-install-thumb { display: block; aspect-ratio: 1; padding: 6px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.ex-install-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ex-install-thumb.on { border-color: var(--ink); }
.ex-install-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 900px) { .ex-install-layout { grid-template-columns: 1fr; gap: 20px; } .ex-install-stage { height: auto; } .ex-install-stage img { max-height: 70vh; } .ex-install-thumbs { max-height: none; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } }

/* Available artworks (Otto, 2026-10-29): four across, type tabs on top, a Filter and sort drawer from the right. */
.avail-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 22px; flex-wrap: wrap; }
.tabs--avail { margin-top: 0; }
.avail-filter-btn { font: inherit; font-family: var(--caps); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; background: none; border: 0; border-bottom: 1px solid var(--ink); color: inherit; padding: 0 0 3px; cursor: pointer; }
.avail { padding: 24px var(--gutter) 96px; }
.avail-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 32px; }
.avail-card[hidden] { display: none; }
.avail-img { display: flex; align-items: flex-end; aspect-ratio: 1; }
.avail-img img { width: 100%; height: 100%; object-fit: contain; object-position: left bottom; display: block; transition: transform 0.4s ease; }
.avail-img .no-image { display: block; width: 100%; height: 100%; background: var(--chalk); }
.avail-card:hover .avail-img img { transform: scale(1.02); }
.avail-empty { margin: 72px 0 96px; padding-top: 28px; border-top: 1px solid var(--line); max-width: 44ch; }
.avail-empty[hidden] { display: none; }
.avail-empty-title { font-family: var(--caps); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 14px; }
.avail-empty .body-text { margin: 0; }
.avail-empty .btn { cursor: pointer; margin-top: 24px; }
.avail-more { text-align: center; margin: 72px 0 0; }
.avail-more .btn[hidden] { display: none; }
@media (max-width: 1100px) { .avail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; } }
@media (max-width: 700px) { .avail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; } .avail { padding-top: 16px; } }
@media (prefers-reduced-motion: reduce) { .avail-img img { transition: none; } }

.fd { position: fixed; inset: 0; z-index: 400; }
.fd[hidden] { display: none; }
.fd-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.3s var(--ease-out); }
.fd-panel { position: absolute; top: 0; left: 0; height: 100%; width: min(420px, 100vw); background: var(--chalk); color: var(--ink); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.32s var(--ease-drawer); }
.fd.open .fd-scrim { opacity: 1; }
.fd.open .fd-panel { transform: none; }
.fd-x { align-self: flex-start; margin: 20px 0 0 36px; padding: 6px; background: none; border: 0; color: inherit; cursor: pointer; }
.fd-scroll { flex: 1; overflow-y: auto; padding: 8px 36px 24px; overscroll-behavior: contain; }
.fd-sec { margin-top: 28px; }
.fd-head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 0 10px; background: none; border: 0; border-bottom: 1px solid var(--ink); font: inherit; font-family: var(--caps); font-size: 0.8rem; letter-spacing: 0.08em; color: inherit; cursor: pointer; }
.fd-head svg { transition: transform 0.2s var(--ease-out); }
.fd-head[aria-expanded="false"] svg { transform: rotate(180deg); }
.fd-body { padding-top: 16px; display: grid; gap: 4px; }
.fd-opt { display: flex; align-items: center; gap: 12px; padding: 5px 0; cursor: pointer; font-family: var(--caps); font-size: 0.86rem; }
.fd-opt input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; }
.fd-box { flex: none; width: 16px; height: 16px; border: 1px solid var(--ink); background: transparent; position: relative; }
.fd-box--radio { border-radius: 50%; }
.fd-opt input:checked + .fd-box::after { content: ''; position: absolute; inset: 3px; background: var(--ink); }
.fd-opt input:focus-visible + .fd-box { outline: 2px solid var(--ink); outline-offset: 2px; }
.fd-n { color: var(--grey); font-size: 0.74rem; margin-left: 4px; }
.fd-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 36px 20px; border-top: 1px solid var(--line); background: var(--chalk); }
html.fd-lock { overflow: hidden; }
@media (max-width: 600px) { .fd-x { margin-left: 20px; } .fd-scroll, .fd-foot { padding-left: 20px; padding-right: 20px; } }
@media (prefers-reduced-motion: reduce) { .fd-scrim, .fd-panel, .fd-head svg { transition: none; } }

.fd-sec { margin-top: 24px; padding: 0; }
.fd-box--radio::after { border-radius: 50%; }
.fd-opt input:checked + .fd-box--radio::after { inset: 3px; }
.fd-foot .link-underline { background: none; border: 0; border-radius: 0; padding: 0 0 2px; font: inherit; font-family: var(--caps); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: inherit; cursor: pointer; border-bottom: 1px solid currentColor; }

/* Available artworks rows (Otto, 2026-10-29): four across, each row's pictures one height, widths follow the shapes; script.js builds the rows. */
.avail-grid.is-rows { display: block; }
.avail-row { margin-bottom: 56px; list-style: none; }
.avail-row-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; align-items: flex-start; }
.is-rows .avail-card { flex: var(--ar, 1) 1 0; min-width: 0; }
.is-rows .avail-img { aspect-ratio: var(--ar, 1); }
.is-rows .avail-img img { object-position: left bottom; }
@media (max-width: 1100px) { .avail-row { margin-bottom: 48px; } .avail-row-list { gap: 24px; } }
@media (max-width: 700px) { .avail-row { margin-bottom: 40px; } .avail-row-list { gap: 16px; } }

/* Filter and sort sits under the tabs, level with All, with a plus in front (Otto, 2026-10-29). */
.avail-bar { flex-direction: column; align-items: flex-start; gap: 18px; }
.avail-filter-btn { display: inline-flex; align-items: baseline; gap: 8px; border-bottom: 0; padding: 0; }
.avail-filter-btn .plus { font-size: 1rem; line-height: 1; font-weight: 400; }
.avail-filter-label { border-bottom: 1px solid var(--ink); padding-bottom: 3px; }

/* Filter and sort leads the same row as the tabs (Otto, 2026-10-29). */
.avail-bar { flex-direction: row; justify-content: flex-start; align-items: baseline; flex-wrap: wrap; gap: 6px 36px; }
.fd-opt[hidden] { display: none; }

/* Enquire under every artwork (Otto, 2026-10-29): a black text line with a solid underline, last line of the caption. */
.cap-enquire { align-self: flex-start; margin-top: 12px; color: var(--ink); font-weight: 400; }
.cap-enquire::after { opacity: 1; }

/* Footer search (replaces the mailing-list link) */
.footer-search { max-width: 360px; }
.footer-search-label { display: block; font-family: var(--caps); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }
.footer-search-row { display: flex; align-items: center; border-bottom: 1px solid currentColor; }
.footer-search-row input { flex: 1; min-width: 0; background: none; border: 0; border-radius: 0; color: inherit; font-family: var(--caps); font-size: 0.9rem; padding: 8px 0; outline: none; }
.footer-search-row input::placeholder { color: inherit; opacity: 0.6; }
.footer-search-row button { background: none; border: 0; color: inherit; cursor: pointer; padding: 6px 0 6px 12px; display: flex; }
.footer-search-row:focus-within { border-bottom-color: var(--bg); color: var(--bg); }
.footer-search-row button:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
/* Search page */
.search-page { padding: 8px var(--gutter, 24px) 96px; max-width: 900px; }
.search-form { display: flex; gap: 16px; align-items: end; border-bottom: 1px solid var(--ink); }
.search-form input { flex: 1; min-width: 0; border: 0; background: none; font-family: var(--caps); font-size: 1.1rem; padding: 12px 0; color: var(--ink); outline: none; border-radius: 0; }
.search-form .btn { margin-bottom: 8px; }
.search-status { margin: 14px 0 0; min-height: 1.4em; }
.search-group { margin-top: 40px; }
.search-n { font-weight: 400; opacity: 0.6; margin-left: 6px; }
.search-group ul { margin-top: 12px; }
.search-group li a { display: flex; justify-content: space-between; gap: 24px; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.12); }
.search-group li a:hover .search-t { text-decoration: underline; }
.search-t { font-family: var(--body); overflow-wrap: anywhere; }
.search-s { font-family: var(--caps); font-size: 0.78rem; opacity: 0.65; text-align: right; flex-shrink: 0; }
.search-group { padding: 0; margin-top: 32px; }
.search-form input::-webkit-search-cancel-button, .footer-search-row input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

/* Stress test 2026-11-05 */
/* The home's exhibition block shows each show's picture whole: it is usually a work, and works are never cropped (FUNDAMENTALS 23). */
.slider--one .slide img { object-fit: contain; background: var(--bg); }
/* On a phone the hero is the photo at its own shape, so the sign reads BACKWOODS, not ACKWOO. */
@media (max-width: 700px) {
  .home-hero--bleed .hero-img img, .has-hero .home-hero--bleed .hero-img img { height: auto; max-height: 80vh; object-fit: contain; }
  .home-hero--bleed { padding-top: var(--nav-h); }   /* the bar is solid on a phone, so the photo starts below it */
  /* Work page with several views: a square stage the width of the screen, so the caption and Enquire sit just below it. */
  .work-layout.is-gallery .work-image { height: min(calc(100vw - 2 * var(--gutter)), 70vh); }
}
/* Pinch to zoom on touch screens; the zoom buttons are for a mouse. */
@media (hover: none) { .zoom-controls { display: none !important; } }