/*
Theme Name: SVC Art Exhibition v2
Theme URI: https://stvincents.nsw.edu.au
Author: SVC Art Exhibition
Description: Custom theme for the St Vincent's College Art Exhibition site. Classic-editor friendly, content controlled via metaboxes and a Site Settings page. Portfolio-only: no WooCommerce, no cart — artworks are browsed and enquired about via a pop-up form.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: svc-art-exhibition
Tags: custom-background, custom-logo, custom-menu, featured-images, translation-ready
*/

/* =========================================================
   SVC Art Exhibition — stylesheet
   Ported from the static HTML prototype (template/html/css/styles.css)
   Mobile-first. Breakpoints: 640px (tablet), 960px (desktop)
   ========================================================= */

:root {
  /* brand colours — from the SVC logo, used sparingly, plus complementary neutrals */
  --color-navy: #233c7c;       /* logo navy — primary dark colour */
  --color-navy-deep: #182a5c;  /* hover / darker navy */
  --color-gold: #c8972c;       /* logo gold — accent only, used sparingly */
  --color-gold-deep: #a97b1f;  /* hover / darker gold */
  --color-cream: #faf7f0;      /* warm off-white, complements navy + gold */
  --color-cream-muted: #f1e9d8;/* muted warm neutral for alternating sections */
  --color-navy-tint: #e4e9f5;  /* navy at ~12% strength over white — pale blue panel background (split hero) */

  --color-bg: var(--color-cream);
  --color-bg-muted: var(--color-cream-muted);
  --color-text: #1f2333;       /* near-black with a navy cast */
  --color-text-soft: #5c6178;
  --color-accent: var(--color-gold);
  --color-dark: var(--color-navy);
  --color-border: #e6ddc8;

  --font-heading: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --font-highlight: 'Playfair Display', Georgia, serif;
  --font-body: 'Montserrat', -apple-system, Helvetica, Arial, sans-serif;
  --max-width: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Visually hidden but still readable by screen readers / search engines —
   used for the homepage's real <h1> (the logo artwork already carries
   the wordmark visually, but the page still wants a genuine on-page
   heading for SEO/accessibility). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin: 0 0 .5em;
}
h2 {
  font-size: 2.4rem;
  text-align: center;
  margin: 0 0 1.75rem;
}
h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-gold);
  margin: .6rem auto 0;
}
.about-col h2::after { margin: .6rem 0 0; }

.eyebrow {
  display: block;
  font-family: var(--font-highlight);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--color-gold);
  margin-bottom: .35rem;
}
.eyebrow.centered { text-align: center; }
.eyebrow-light { color: var(--color-gold); }

p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.section { padding: 4rem 1.25rem; max-width: var(--max-width); margin: 0 auto; }

.btn {
  display: inline-block;
  padding: .75em 1.75em;
  border: 1px solid var(--color-dark);
  border-radius: 2px;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .2s, color .2s, border-color .2s;
  cursor: pointer;
  background: transparent;
}
.btn-dark { background: var(--color-dark); color: #fff; }
.btn-dark:hover { background: var(--color-navy-deep); color: #fff; }
.btn-outline { background: transparent; color: var(--color-dark); }
.btn-outline:hover { background: var(--color-dark); color: #fff; }
.btn-light { border-color: #fff; color: #fff; }
.btn-light:hover { background: #fff; color: var(--color-dark); }
/* Gold, bold — used for the "Buy Tickets" CTA to make it stand out
   against the navy-tinted split-hero (white text for contrast against
   the gold fill; navy text on gold reads too low-contrast). */
.btn-gold { background: var(--color-gold-deep); border-color: var(--color-gold-deep); color: #fff; font-weight: 700; }
.btn-gold:hover { background: var(--color-gold); border-color: var(--color-gold); color: #fff; }
.btn.centered { display: block; width: max-content; margin: 2rem auto 0; }

.placeholder-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  background: linear-gradient(135deg, #ddd6c8, #b9ac95);
  object-fit: cover;
}
.placeholder-img.round { aspect-ratio: 1/1; border-radius: 50%; width: 100%; max-width: 250px; height: auto; margin: 0 auto; }
/* Single-artist profile photo — the circle shape itself is forced by
   its wrapper, .artist-profile-photo (see SINGLE ARTIST PROFILE
   below); this modifier just makes the image fill that circle edge to
   edge instead of keeping the base rule's 4:3 box. */
.placeholder-img.profile-round { aspect-ratio: auto; height: 100%; border-radius: 0; }
.ph-1 { background: linear-gradient(135deg,#d8c9b0,#a68a5f); }
.ph-2 { background: linear-gradient(135deg,#c9d3d8,#7c94a0); }
.ph-3 { background: linear-gradient(135deg,#d9c7c7,#a06a6a); }
.ph-4 { background: linear-gradient(135deg,#cdd6c4,#7f9468); }
.ph-5 { background: linear-gradient(135deg,#dccfe0,#8f6ea3); }
.ph-6 { background: linear-gradient(135deg,#e0d5b8,#b39457); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 100;
}

/* HEADER OVERLAY — applied by assets/js/main.js only on the homepage
   (the only template with #split-hero). Takes the header out of normal
   flow and hides it above the viewport so the split-hero fills the
   whole first screen on load; it slides into view once the visitor
   scrolls (see main.js), and hides again if they scroll back to the
   very top. Desktop-only — see main.js for why. */
.site-header--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  transform: translateY(-100%);
  transition: transform .3s ease;
}
.site-header--overlay.is-visible { transform: translateY(0); }

.header-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem .75rem;
  text-align: center;
}
.logo a { display: block; }
.logo-img { height: 80px; width: auto; }
.logo-text { font-family: var(--font-heading); font-size: 1.6rem; letter-spacing: .04em; color: var(--color-navy); }
/* Wraps the icons list + the Buy Tickets button so the header-top row
   still only has two flex children (logo, header-actions) for its
   justify-content: space-between to work against — the button sits
   right next to the icons rather than needing its own slot. */
.header-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.1rem;
}
.header-icons {
  display: flex;
  gap: 1.1rem;
  justify-content: center;
}
.header-icons a { display: flex; color: var(--color-dark); position: relative; }
.cart-count {
  position: absolute; top: -8px; right: -10px;
  background: var(--color-gold); color: #fff;
  font-size: .62rem; font-weight: 700;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
/* Smaller than the standard .btn scale — sized to sit comfortably in
   the header row next to the icons rather than the full section-CTA
   size used elsewhere (hero, cards, etc). */
.btn-tickets { padding: .55em 1.3em; font-size: .78rem; }

.header-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--color-border);
}

/* Contain the header's own content (logo/icons row + nav/dates row)
   to the same width as page content (.section etc. all use
   --max-width + margin auto — see there). .site-header itself stays
   full-bleed for its background/border; only these two inner rows are
   capped and centred, so on wide desktop viewports the header lines
   up with the page content below it instead of stretching edge to
   edge. */
.header-top,
.header-bottom {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}
.exhibition-dates {
  font-size: .8rem;
  letter-spacing: .03em;
  color: var(--color-text-soft);
  white-space: nowrap;
}

.main-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
/* A fixed max-height clipped the last few items (Our Charity down to
   Contact) once the Catalogue/Artists submenus are both open in the DOM
   on mobile (sub-nav items are always visible there, not toggled) — the
   full list can run past 480px, especially with several catalogue years
   or the Artists submenu (mediums) both present. viewport-relative +
   a scroll fallback so it can't silently clip again on a taller menu or
   a short phone screen. */
.main-nav.is-open { max-height: 80vh; overflow-y: auto; }
.main-nav ul { display: flex; flex-direction: column; padding: .5rem 1.25rem 1rem; }
.main-nav li { border-top: 1px solid var(--color-border); }
.main-nav li:first-child { border-top: none; }
.main-nav a {
  display: block;
  padding: .7rem 0;
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.main-nav a.is-active { color: var(--color-gold); }
.main-nav a:hover { color: var(--color-gold); }
.main-nav .sub-nav { padding-left: 1rem; display: block; max-height: none; position: static; border: none; }
.main-nav .sub-nav li { border-top: none; }
.main-nav .sub-nav a { font-size: .78rem; font-weight: 500; color: var(--color-text-soft); padding: .4rem 0; }

.hamburger {
  width: 28px; height: 22px;
  background: none; border: none; cursor: pointer;
  padding: 0; display: flex; flex-direction: column; justify-content: space-between;
}
.hamburger span { display: block; height: 2px; background: var(--color-dark); border-radius: 1px; transition: transform .2s, opacity .2s; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

@media (min-width: 960px) {
  .header-top {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding: 1.1rem 2.5rem;
  }
  .header-actions { justify-content: flex-end; }
  .header-bottom { padding: .75rem 2.5rem; position: relative; }
  .hamburger { display: none; }
  .main-nav {
    position: static;
    max-height: none;
    overflow: visible;
    border: none;
  }
  .main-nav ul { flex-direction: row; gap: 2rem; padding: 0; }
  .main-nav li { border-top: none; position: relative; }
  .main-nav a { padding: 0; }
  .main-nav li:hover .sub-nav {
    display: block;
  }
  .main-nav .sub-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    padding: .5rem 1rem;
    min-width: 160px;
    z-index: 10;
  }
}

/* =========================================================
   HERO SLIDESHOW
   ========================================================= */
.hero-slideshow {
  position: relative;
  height: 78vh;
  min-height: 420px;
  overflow: hidden;
  color: #fff;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-slide::after {
  content: "";
  position: absolute; inset: 0;
  /* Bottom-anchored gradient, not a flat tint across the whole slide —
     just enough to keep the corner caption (bottom-left, see
     .hero-slide-caption) readable without darkening the artwork photo
     itself. Two stops, not one: solid for the first 5rem (the caption
     sits within this — see its margin-bottom + font-size below) so
     the larger text always has full contrast regardless of the
     artwork's own tone, then fades out over a further 16rem total.
     Fixed rem values rather than a % of the slide's height, so the
     darkened band stays a small, consistent size whether the slide is
     short (mobile, 60vh) or tall (desktop, fills the split-hero
     gallery column). */
  background: linear-gradient(to top, rgba(0,0,0,.6) 0, rgba(0,0,0,.6) 5rem, rgba(0,0,0,0) 16rem);
}
.hero-slide--photo::after {
  /* Darker, brand-navy tint over photo slides for text legibility
     (gradient-only slides keep the lighter neutral overlay above) —
     still just the bottom band, not the whole slide. */
  background: linear-gradient(to top, rgba(20,34,71,.8) 0, rgba(20,34,71,.8) 5rem, rgba(20,34,71,0) 16rem);
}

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.15); color: #fff; border: none;
  width: 42px; height: 42px; border-radius: 50%;
  font-size: 1.5rem; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.hero-prev { left: 1rem; }
.hero-next { right: 1rem; }
.hero-arrow:hover { background: rgba(255,255,255,.3); }

.hero-dots {
  position: absolute; bottom: 1.25rem; left: 0; right: 0;
  display: flex; justify-content: center; gap: .5rem; z-index: 2;
}
.hero-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.45); cursor: pointer; padding: 0;
}
.hero-dots button.is-active { background: #fff; }

/* =========================================================
   SPLIT HERO — homepage only

   Replaces a full-width text-and-image hero with a fixed "intro" column
   (logo + exhibition blurb, doesn't rotate) beside a full-bleed rotating
   gallery of artworks — leads with portfolio/branding rather than a
   sales message. True fullscreen on load: assets/js/main.js turns
   .site-header into a fixed overlay that starts hidden above the
   viewport and only slides into view once the visitor scrolls (see
   "HEADER OVERLAY" above), so nothing but the hero shows on first paint
   and the hero itself can just be 100vh instead of subtracting a header
   height.

   The intro column is split into two panels — logo, and everything else
   (blurb/meta/CTAs) — with the gallery in between them in the HTML
   source. On mobile that source order is used as-is (logo, gallery,
   details). From the 960px desktop breakpoint up, CSS Grid areas
   re-arrange the same three pieces into the usual 1/4 + 3/4 split —
   logo and details stacked in the left column, gallery filling the
   right one — regardless of source order. */
.split-hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.split-hero-panel {
  padding: 2rem 1.75rem;
  text-align: center;
  background: var(--color-navy-tint);
}
/* Hidden on mobile/tablet entirely — the header above already carries
   the site name/logo, so this second logo block just ate space before
   the slideshow without adding anything new. Re-shown at the 960px
   desktop breakpoint below, where it becomes its own grid column
   rather than stacking in the flow. Source order stays logo, slideshow,
   details either way — only visibility changes here. */
.split-hero-panel--logo { display: none; padding-bottom: 1rem; }
.split-hero-panel--details {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
/* Mobile: centered, capped at 60% of the column so it doesn't dominate
   the stacked layout. Widens to fill the column at the 960px desktop
   breakpoint below — the logo artwork already carries the "St Vincent's
   College" script and "Art Exhibition" wordmark, so there's no separate
   heading text to size around here either way. */
.split-hero-logo { display: block; max-width: 60%; margin: 0 auto; }
.split-hero-panel--details h2 { font-size: 1.9rem; margin: 0 0 .75rem; }
.split-hero-panel--details h2::after { margin: .5rem auto 0; }
.split-hero-panel--details .split-hero-tagline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .02em;
  color: var(--color-navy);
  max-width: 420px;
  margin: 0 0 1rem;
}
.split-hero-panel--details p { color: var(--color-text-soft); max-width: 420px; margin: 0; }
.split-hero-panel--details p a { color: var(--color-navy); text-decoration: underline; }
.split-hero-meta {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  width: 100%;
  max-width: 320px;
  font-size: .82rem;
  color: var(--color-text-soft);
  padding: 1rem 0;
  /* navy at low opacity rather than the sitewide tan --color-border,
     since that reads warm/off against this panel's blue tint */
  border-top: 1px solid rgba(35,60,124,.18);
  border-bottom: 1px solid rgba(35,60,124,.18);
}
.split-hero-meta strong { color: var(--color-text); font-weight: 600; }
.split-hero-ctas { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

.split-hero-slideshow {
  position: relative;
  height: 60vh;
  min-height: 360px;
  overflow: hidden;
  color: #fff;
}
/* Reuses .hero-slide / .hero-arrow / .hero-dots from the slideshow above —
   only the caption treatment differs (small corner credit line instead of
   a big centered headline, since the intro column already carries that). */
.split-hero-slideshow .hero-slide { justify-content: flex-start; align-items: flex-end; text-align: left; }
.hero-slide-caption {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
  /* Lifts the caption up off the very bottom edge of the slide,
     separate from the left/right padding above — sits within the
     solid part of the .hero-slide::after gradient (see there). */
  margin-bottom: 1.5rem;
  font-family: var(--font-body);
}
.hero-slide-caption strong { display: block; font-size: 1.3rem; font-weight: 600; color: #fff; }
.hero-slide-caption span { font-size: 1rem; color: rgba(255,255,255,.85); }

@media (min-width: 960px) {
  .split-hero {
    display: grid;
    grid-template-columns: 25% 75%;
    /* minmax(0, 1fr), not bare 1fr — a bare 1fr track can't shrink below
       its content's natural size, so on a narrow desktop width the
       details column's copy could force this whole section taller than
       100vh and push content up behind the logo/header. minmax(0, 1fr)
       plus the overflow-y below on the details panel keeps that
       contained to a small internal scroll in the rare case content
       still doesn't fit, instead of breaking the layout above it. */
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "logo gallery" "details gallery";
    height: 100vh;
  }
  .split-hero-panel {
    text-align: left;
    padding: 3rem 2.5rem;
    border-right: 1px solid rgba(35,60,124,.18);
  }
  .split-hero-panel--logo { display: block; grid-area: logo; padding-bottom: 1.5rem; }
  .split-hero-panel--details {
    grid-area: details;
    align-items: flex-start;
    /* margin-top:auto on the heading below does the "push to the bottom
       of the column" job instead of justify-content:flex-end. flex-end
       has a sharp edge: if the copy in this column is ever taller than
       the space available (a short/narrow desktop window), it overflows
       in the flex-start direction, which flexbox can't scroll to — so
       the top of the block (the heading) gets silently clipped
       off-screen. margin-top:auto degrades gracefully instead: it just
       collapses to 0 and the block falls back to sitting under the
       logo, top-aligned, rather than losing content. overflow-y is a
       last-resort safety net for the rare case it still doesn't fit —
       it lets that scroll internally instead of breaking the page. */
    justify-content: flex-start;
    padding-top: 1.5rem;
    overflow-y: auto;
    max-height: 100%;
  }
  .split-hero-panel .eyebrow.centered { text-align: left; }
  /* Narrow 25%-width column: the sitewide h2 size (built for full-width
     centered section headers) wraps to three lines here and pushes the
     bottom-aligned block tall enough to run up under the header once it
     slides in on scroll. Smaller size + tighter stack gap keeps the
     whole block comfortably clear of both the logo above and the header
     overlay. */
  .split-hero-panel--details { gap: 1rem; }
  .split-hero-panel--details h2 { text-align: left; font-size: 1.5rem; margin: auto 0 .4rem; }
  .split-hero-panel--details h2::after { margin: .4rem 0 0; }
  .split-hero-logo { max-width: none; width: 100%; margin: 0; }
  .split-hero-panel--details p,
  .split-hero-panel--details .split-hero-tagline { max-width: none; }
  .split-hero-meta { max-width: none; }
  .split-hero-ctas { justify-content: flex-start; }
  .split-hero-slideshow { grid-area: gallery; height: 100%; min-height: 0; }
}

/* =========================================================
   FEATURED WORKS / MEET THE ARTISTS (shared grid pattern)
   ========================================================= */
/* Homepage placement only — noticeably wider than the sitewide 1200px
   .section cap, so the "Meet the Artists" grid (moved here, right after
   the hero) reads much closer to full screen without going fully
   edge-to-edge. */
.meet-artists { max-width: 1800px; }

.works-grid, .artists-grid {
  display: grid;
  /* minmax(0, 1fr), not bare 1fr — bare 1fr is shorthand for
     minmax(auto, 1fr), which can't shrink a column below its content's
     natural size. The artist avatar's fixed circle width (.placeholder-img.round,
     250px) hit this: around ~1140px wide, 3 columns of "auto" tracks
     could add up to more than the available row width and bleed off
     screen instead of shrinking. minmax(0, 1fr) lets the tracks actually
     share the space evenly. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
}
.artist-card { display: block; text-align: center; min-width: 0; }
.artist-card .artist-name {
  display: block; margin-top: .75rem; font-family: var(--font-body); font-weight: 600; font-size: 1rem;
}
.artist-card .artist-medium {
  display: block; font-size: .82rem; color: var(--color-text-soft); margin-top: .15rem;
}

.work-card {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: .5rem;
  grid-template-areas:
    "image  image"
    "title  price"
    "artist artist"
    "status status";
  text-align: left;
}
.work-card .work-card-image { grid-area: image; }
.work-card-image {
  position: relative;
  width: 100%;
  /* Square tile, same idea as the single artwork page's own crop fix
     (2026-08-31) — the container's shape is fixed for a tidy grid, but
     the artwork itself is never cropped to fill it (see object-fit:
     contain below). */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 3px;
}
.work-card-image .placeholder-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: contain;
  /* Override the base .placeholder-img / .ph-1 mat-like gradient — with
     object-fit: contain, that gradient shows through as a visible
     letterboxed backdrop behind any non-square artwork photo, which
     reads as an unstyled gap rather than an intentional mat. Flat and
     transparent instead, so the card's own background shows through. */
  background: none;
}
.work-card .work-title {
  grid-area: title;
  margin-top: .75rem; font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  text-align: left;
}
.work-card .work-artist {
  grid-area: artist;
  font-size: .82rem; color: var(--color-text-soft); margin-top: .15rem;
  text-align: left;
}

@media (min-width: 640px) {
  .works-grid, .artists-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .works-grid, .artists-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   EVENT DETAILS (standalone, full width)
   ========================================================= */
.event-col {
  background: var(--color-bg-muted);
  border-radius: 4px;
  padding: 2rem;
  width: 100%;
}
.event-col h3 { margin-bottom: 1rem; text-align: center; }
.event-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-top: 1px solid var(--color-border);
  font-size: .88rem;
}
.event-list li:first-child { border-top: none; }
.event-list strong { color: var(--color-text-soft); font-weight: 500; }
.event-col .btn { margin-top: 1.5rem; }

@media (min-width: 768px) {
  .event-list-row {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
  }
  .event-list-row li {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    text-align: center;
    padding: 0 1rem;
    border-top: none;
    border-left: 1px solid var(--color-border);
  }
  .event-list-row li:first-child { border-left: none; }
}

/* =========================================================
   TWO-COLUMN EVENT CARDS
   ========================================================= */
.event-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .event-two-col { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   OUR CHARITY — single column, on white
   ========================================================= */
.charity-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  width: 100%;
}
.charity-card h2 { margin-bottom: 0; }
.charity-logo { max-width: 200px; height: auto; margin-top: .5rem; }
.charity-card p { max-width: 760px; margin: 0 auto; }
.charity-card .work-detail-actions,
.charity-card .charity-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: .5rem; }

.impact-stats { text-align: center; }
.impact-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 640px;
  margin: 2rem auto 0;
}
@media (min-width: 640px) {
  .impact-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.impact-stat .stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--color-gold-deep);
}
.impact-stat .stat-label {
  display: block;
  margin: .5rem auto 0;
  max-width: 220px;
  font-size: .85rem;
  color: var(--color-text-soft);
}

.program-card p { margin-bottom: 1rem; }
.program-card p:last-of-type { margin-bottom: 0; }

.story-feature {
  background: var(--color-bg-muted);
  border-left: 3px solid var(--color-gold);
  border-radius: 4px;
  padding: 2.5rem;
  max-width: 800px;
  margin: 0 auto;
}
.story-feature .story-quote {
  font-family: var(--font-highlight);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--color-navy);
  margin-bottom: 1.25rem;
}
.story-feature p { margin-bottom: 1rem; }
.story-feature p:last-of-type { margin-bottom: 0; }
.story-note { max-width: 800px; margin: 1rem auto 0; font-size: .78rem; color: var(--color-text-soft); text-align: center; }

.become-sponsor, .charity-cta {
  text-align: center;
  background: var(--color-bg-muted);
  border-radius: 4px;
  padding: 3rem 1.5rem;
}
.become-sponsor h2, .charity-cta h2 { margin-bottom: .5rem; }
.become-sponsor p, .charity-cta p { max-width: 520px; margin: 0 auto 1.5rem; }
.charity-cta .charity-actions { justify-content: center; }

.charity-fine-print {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  font-size: .78rem;
  color: var(--color-text-soft);
}

/* =========================================================
   ABOUT EXHIBITION (wide, centered text)
   ========================================================= */
.about-exhibition-wide { background: var(--color-bg-muted); max-width: none; }
.wide-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.wide-inner p:last-child { margin-bottom: 0; }

/* =========================================================
   SPONSORS — infinite-loop marquee
   ========================================================= */
.sponsors-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sponsors-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: sponsors-scroll 28s linear infinite;
}
.sponsors-marquee:hover .sponsors-track { animation-play-state: paused; }
.sponsor-logo {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1.5rem 2rem;
  text-align: center;
  color: var(--color-text-soft);
  font-size: .85rem;
  letter-spacing: .03em;
  white-space: nowrap;
  flex: none;
}
.sponsor-logo img { max-height: 46px; width: auto; }
@keyframes sponsors-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .sponsors-track { animation: none; }
  .sponsors-marquee { overflow-x: auto; }
}

/* =========================================================
   SPONSORS PAGE — tiered grid
   ========================================================= */
.sponsor-tier { text-align: center; }
.sponsor-tier + .sponsor-tier { margin-top: 3.5rem; }
.sponsor-tier .eyebrow { display: block; }
.sponsor-tier h2 { margin-bottom: 2rem; }

.sponsor-tier-grid {
  display: grid;
  justify-content: center;
  margin: 0 auto;
}

.sponsor-logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  text-align: center;
  color: var(--color-text-soft);
  letter-spacing: .03em;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.sponsor-logo-tile:hover { border-color: var(--color-dark); box-shadow: 0 4px 14px rgba(35,60,124,.08); }
.sponsor-logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }

.sponsor-tier-platinum .eyebrow { color: #7d8493; }
.sponsor-tier-platinum .sponsor-tier-grid {
  max-width: 780px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}
.sponsor-tier-platinum .sponsor-logo-tile {
  min-height: 150px;
  padding: 2rem;
  font-size: 1.05rem;
  font-weight: 700;
  border-width: 1.5px;
}

.sponsor-tier-gold .eyebrow { color: var(--color-gold-deep); }
.sponsor-tier-gold .sponsor-tier-grid {
  max-width: 940px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.5rem;
}
.sponsor-tier-gold .sponsor-logo-tile {
  min-height: 105px;
  padding: 1.4rem;
  font-size: .9rem;
  font-weight: 600;
}

.sponsor-tier-silver .eyebrow { color: #9aa0ad; }
.sponsor-tier-silver .sponsor-tier-grid {
  max-width: 1100px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
}
.sponsor-tier-silver .sponsor-logo-tile {
  min-height: 72px;
  padding: .9rem;
  font-size: .76rem;
  font-weight: 500;
}

.become-sponsor {
  text-align: center;
  background: var(--color-bg-muted);
  border-radius: 4px;
  padding: 3rem 1.5rem;
}
.become-sponsor h2 { margin-bottom: .5rem; }
.become-sponsor p { max-width: 520px; margin: 0 auto 1.5rem; }

@media (min-width: 960px) {
  .works-grid-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
}

/* =========================================================
   INSTAGRAM FEED
   ========================================================= */
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.insta-post {
  position: relative;
  display: block;
  overflow: hidden;
  /* The square div itself — matches the Exhibition Gallery's cropped
     tiles. Forced on the wrapper rather than the image (see
     .insta-post .placeholder-img below): WordPress prints width/height
     HTML attributes on the <img> reflecting whatever size the source
     photo happened to fall back to if 'svc-gallery-tile' hadn't been
     generated yet for it, which can fight an aspect-ratio set on the
     image itself (the same issue hit and fixed once already on the
     artist profile photo — see SINGLE ARTIST PROFILE). Squaring the
     wrapper and absolutely filling it with the image sidesteps that
     entirely, regardless of the photo's own intrinsic size. */
  aspect-ratio: 1/1;
}
.insta-post .placeholder-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
  transition: transform .3s ease;
}
.insta-post:hover .placeholder-img { transform: scale(1.05); }
.insta-badge { position: absolute; top: .6rem; right: .6rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
@media (min-width: 640px) { .instagram-grid { grid-template-columns: repeat(6, 1fr); gap: .75rem; } }
/* Handle heading links out to the real Instagram profile — same colour
   as the plain heading text (h2 has none of its own, so this just keeps
   the inherited body colour), a touch darker on hover via a brightness
   filter rather than a second named colour, so it works whatever the
   inherited colour happens to be. */
.instagram-feed h2 a { color: inherit; text-decoration: none; }
.instagram-feed h2 a:hover { filter: brightness(0.75); }

/* =========================================================
   EXHIBITION GALLERY
   Grid of real event photos (template-exhibition.php) + the shared
   lightbox overlay it opens into. The overlay markup/behaviour mirrors
   .flipbook-overlay further down (same dark full-screen treatment,
   same close/nav button styling) for visual consistency, but is a
   separate, simpler component — no page-flip library involved.
   ========================================================= */
.exhibition-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
@media (min-width: 640px) {
  .exhibition-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 960px) {
  .exhibition-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.exhibition-gallery-item {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
}
.exhibition-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: transform .3s ease;
}
.exhibition-gallery-item:hover img,
.exhibition-gallery-item:focus-visible img { transform: scale(1.05); }

.svc-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #141414;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.svc-lightbox.is-open { display: flex; }
.svc-lightbox-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.svc-lightbox-img {
  max-width: 100%;
  max-height: 82vh;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .5);
}
.svc-lightbox-counter { color: #cfc7ae; margin-top: 1rem; font-size: .85rem; letter-spacing: .04em; }
.svc-lightbox-close,
.svc-lightbox-nav {
  position: absolute;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .12);
  color: #f2ede0;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: background .2s, color .2s;
}
.svc-lightbox-close:hover, .svc-lightbox-nav:hover { background: var(--color-gold); color: #1c1c1c; }
.svc-lightbox-close { top: 1.25rem; right: 1.25rem; }
.svc-lightbox-prev { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.svc-lightbox-next { right: 1.25rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .svc-lightbox-prev, .svc-lightbox-next { width: 36px; height: 36px; font-size: 1.1rem; }
}

/* Follow Along tiles: small note + secondary link shown only while real
   exhibition photos are standing in for the (not yet connected) live
   Instagram feed — see template-home.php. */
.instagram-feed-note {
  text-align: center;
  color: var(--color-text-soft);
  font-size: .85rem;
  margin: -.5rem 0 1.5rem;
}
.link-secondary {
  display: block;
  text-align: center;
  margin-top: .75rem;
  font-size: .85rem;
  color: var(--color-navy);
  text-decoration: underline;
}
.link-secondary:hover { color: var(--color-gold-deep); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--color-dark);
  color: #d8d3c8;
  padding: 3rem 1.25rem 1.5rem;
}
.footer-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.footer-col h4 {
  color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 1rem;
}
.footer-col li { padding: .3rem 0; font-size: .88rem; }
.footer-col a:hover { color: #fff; }

.footer-insta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  font-size: .88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.footer-insta:hover { color: #fff; }
.footer-insta + .footer-insta { margin-left: 1.5rem; }

.footer-event-list li { font-size: .85rem; padding: .55rem 0; border-top-color: rgba(255,255,255,.12); }
.footer-event-list strong { color: rgba(255,255,255,.6); }
.footer-event-list span { color: #fff; text-align: right; }
.footer-contact { margin-top: 1rem; }
.footer-contact li { padding: .2rem 0; }

.footer-col-school {
  text-align: right;
}
.footer-col-school .footer-crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: #fff;
  border-radius: 4px;
}
.footer-crest img { width: 140px; height: auto; }
.footer-bottom {
  max-width: var(--max-width);
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .78rem;
  color: #a39c8c;
}
.footer-bottom .disclaimer { margin-top: .4rem; }

.footer-col-event { order: -1; }

@media (min-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 2fr 1fr; }
  .footer-col-event { order: 0; }
}

/* =========================================================
   PAGE HERO
   ========================================================= */
.page-hero {
  background: linear-gradient(135deg, #1a2c5e, var(--color-navy));
  color: #fff;
  text-align: center;
  padding: 3.5rem 1.25rem;
}
.page-hero h1 { color: #fff; font-size: 2.4rem; margin-bottom: .5rem; }
.page-hero p { max-width: 560px; margin: 0 auto; color: #dfe4f2; font-size: 1rem; }

@media (min-width: 640px) {
  .page-hero h1 { font-size: 3rem; }
}

/* =========================================================
   DIRECTORY FILTERS (Artists / Categories / Exhibition Archive)
   ========================================================= */
.filter-label {
  display: block;
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-soft);
  margin-bottom: .5rem;
}
.filter-label:not(:first-child) { margin-top: 1.5rem; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: 0 auto 1rem;
  max-width: 860px;
}
.filter-btn {
  border: 1px solid var(--color-dark);
  background: transparent;
  color: var(--color-dark);
  padding: .5em 1.3em;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.filter-btn:hover { background: var(--color-cream-muted); }
.filter-btn.is-active { background: var(--color-dark); color: #fff; }

.filter-count {
  text-align: center;
  font-size: .82rem;
  color: var(--color-text-soft);
  margin: 0 0 2.5rem;
}

.artists-grid.artists-grid-directory {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .artists-grid.artists-grid-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .artists-grid.artists-grid-directory { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.works-grid.works-grid-directory {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .works-grid.works-grid-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .works-grid.works-grid-directory { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.artist-card .artist-bio {
  display: block;
  font-size: .82rem;
  color: var(--color-text-soft);
  margin-top: .5rem;
  line-height: 1.5;
}

.no-results {
  display: none;
  text-align: center;
  color: var(--color-text-soft);
  padding: 3rem 0;
}
.no-results.show { display: block; }

/* =========================================================
   BREADCRUMB
   ========================================================= */
.breadcrumb {
  max-width: var(--max-width);
  margin: 1.25rem auto 0;
  padding: 0 1.25rem;
  font-size: .8rem;
  color: var(--color-text-soft);
}
.breadcrumb a:hover { color: var(--color-navy); }
.breadcrumb .sep { margin: 0 .4rem; }

/* =========================================================
   PAGINATION
   Shared by every WP_Query pagination call in the theme — currently
   the Exhibition Artworks archive (archive-artwork.php) and the
   default blog index (index.php); both output the standard WordPress
   .page-numbers markup (paginate_links() / the_posts_pagination()),
   so styling that one class covers both without extra markup.
   ========================================================= */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem;
  /* Padding between the pagination row and the content above it. */
  margin-top: 3rem;
}
.pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 .4rem;
  border-radius: 50%;
  border: 1px solid var(--color-dark);
  color: var(--color-dark);
  font-size: 1rem;
  font-weight: 600;
  background: transparent;
  transition: background .2s, color .2s, border-color .2s;
}
/* The "…" gap span between distant page numbers — not a real link,
   so no circle/border, just plain text sitting inline with the rest. */
.pagination .page-numbers.dots {
  border: none;
  min-width: auto;
  height: auto;
  color: var(--color-text-soft);
  background: none;
}
/* Hover and "current page" share the same reversed treatment (filled
   navy, white text) rather than two different looks. */
.pagination a.page-numbers:hover,
.pagination .page-numbers.current {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: #fff;
}
/* Current page also reads larger than the rest, still centered
   (flex above keeps the number itself centered in the bigger circle
   too, not just the circle's outer size). */
.pagination .page-numbers.current {
  min-width: 52px;
  height: 52px;
  font-size: 1.15rem;
}
/* Prev/Next as chevrons (‹ ›, matching .hero-arrow's characters
   elsewhere) rather than the default "« Previous" / "Next »" text —
   set via prev_text/next_text in the paginate_links()/
   the_posts_pagination() calls; sized up here since the glyph reads
   small at the same font-size as a two-digit page number. */
.pagination .prev.page-numbers,
.pagination .next.page-numbers {
  font-size: 1.4rem;
  line-height: 1;
}

/* =========================================================
   SINGLE ARTIST PROFILE
   ========================================================= */
.artist-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 3rem;
}
.artist-profile-photo {
  /* Mobile: a real portrait-sized photo rather than a small avatar —
     fills most of the section's content width instead of a fixed
     180px, so it actually reads as a photo on a phone screen.
     The circle is forced on this wrapper (aspect-ratio + border-radius
     + overflow:hidden) rather than on the <img> itself — WordPress
     prints width/height attributes on the image tag, and relying on
     the img's own aspect-ratio to override that intrinsic ratio was
     rendering as an oval in some cases. Squaring the wrapper first and
     just having the image fill it removes that dependency entirely. */
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  flex: none;
}
.artist-profile-info h1 { margin-bottom: .4rem; }
.artist-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.artist-profile-tag {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: .3em 1em;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-soft);
}
.artist-profile-bio {
  /* No max-width — runs the full width of its containing column
     (bio, mobile; the 3/4 info column, desktop) rather than capping
     at a fixed reading-width measure. */
  color: var(--color-text-soft);
}
.artist-profile-social {
  display: flex;
  gap: .9rem;
  justify-content: center;
  margin-top: 1rem;
}
.artist-profile-social a { color: var(--color-dark); }

@media (min-width: 768px) {
  /* 1/4 photo : 3/4 bio, same split-percentage convention as the
     homepage split-hero (grid-template-columns: 25% 75% there too).
     align-items: start (not the base rule's center) tops the photo
     against the start of the bio column instead of centering it
     against the bio's full height. */
  .artist-profile {
    display: grid;
    grid-template-columns: 25% 75%;
    align-items: start;
    text-align: left;
    gap: 2.5rem;
  }
  .artist-profile-photo { width: 100%; max-width: none; margin: 0; }
  .artist-profile-info { min-width: 0; }
  .artist-profile-tags { justify-content: flex-start; }
  .artist-profile-social { justify-content: flex-start; }
}

/* Previous/Next Artist — sits on the same row as "Back to All Artists"
   (see single-artist.php). Plain text links, not buttons, per Ant's
   ask. Mobile stacks them centered above/below the All Artists button;
   desktop puts Previous on the left and Next on the right of it via a
   3-column grid, using an empty placeholder <span> in the PHP when
   there's no previous/next (first/last artist alphabetically) so the
   All Artists button stays centered either way instead of drifting
   toward whichever side still has a link. */
.artist-profile-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
}
.artist-profile-nav-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--color-dark);
  font-weight: 600;
  font-size: .95rem;
}
.artist-profile-nav-link:hover { text-decoration: underline; }
.artist-profile-nav-arrow { font-size: 1.3rem; line-height: 1; color: var(--color-gold); }
@media (min-width: 768px) {
  .artist-profile-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
  }
  .artist-profile-nav-prev { justify-self: start; }
  .artist-profile-nav-next { justify-self: end; }
  .artist-profile-nav > .btn { justify-self: center; }
}

.work-card .work-price {
  grid-area: price;
  margin-top: .75rem;
  font-weight: 700;
  font-size: .92rem;
  color: var(--color-navy);
  text-align: right;
  white-space: nowrap;
}
.work-card .work-status {
  grid-area: status;
  display: inline-block;
  margin-top: .4rem;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-gold-deep);
}

/* =========================================================
   SINGLE WORK (PRODUCT) PAGE
   ========================================================= */
.work-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 768px) {
  .work-detail { grid-template-columns: 1fr 1fr; }
}
.work-detail-image .placeholder-img {
  /* The single artwork page shows one piece for a buyer/enquirer to
     evaluate, so it must never be cropped. The shared .placeholder-img
     rule (used for grid thumbnails elsewhere) forces a fixed
     aspect-ratio + object-fit: cover, which crops any artwork photo
     that isn't exactly that ratio — a real problem for actual artwork
     photography (portraits, landscapes, square canvases, sculpture
     shots all vary). Override both here so the image renders at its
     own natural aspect ratio, fully visible, just scaled to fit the
     column width (with a sensible cap so a very tall portrait shot
     doesn't tower over the page). */
  aspect-ratio: auto;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
}
.work-detail-info .eyebrow { margin-bottom: .5rem; }
.work-detail-info h1 { margin-bottom: .3rem; }
.work-detail-artist {
  display: inline-block;
  margin-bottom: 1.25rem;
  font-size: .95rem;
  color: var(--color-text-soft);
}
.work-detail-artist a { color: var(--color-navy); font-weight: 600; }
.work-detail-artist a:hover { text-decoration: underline; }
.work-detail-price {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  letter-spacing: .02em;
  color: var(--color-navy);
  margin-bottom: 1.5rem;
}
.work-detail-specs {
  margin-bottom: 1.75rem;
}
.work-detail-specs li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-top: 1px solid var(--color-border);
  font-size: .88rem;
}
.work-detail-specs li:first-child { border-top: none; }
.work-detail-specs strong { color: var(--color-text-soft); font-weight: 500; }
.work-detail-desc { margin-bottom: 1.75rem; }
.work-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.work-detail-actions .btn { margin: 0; }
.work-detail-status {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-gold-deep);
}

/* =========================================================
   CATALOGUE HUB
   ========================================================= */
.catalogue-years {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  max-width: 900px;
  margin: 0 auto;
}
.catalogue-year-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
  padding: 3rem 1.5rem;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
.catalogue-year-card h3 { margin-bottom: 0; }
.catalogue-year-card p { color: var(--color-text-soft); max-width: 340px; }
.catalogue-year-card .btn { margin-top: .5rem; }
.catalogue-year-card.is-soon { opacity: .75; }
.catalogue-year-card .status-tag {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
}
@media (min-width: 640px) {
  .catalogue-years { grid-template-columns: 1fr 1fr; }
}

.coming-soon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
  max-width: 560px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
.coming-soon-card .year {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  color: var(--color-gold);
  letter-spacing: .04em;
  line-height: 1;
}
.coming-soon-card p { color: var(--color-text-soft); max-width: 420px; }
.coming-soon-card .btn { margin-top: 1rem; }

/* =========================================================
   CATALOGUE FLIPBOOK
   ========================================================= */
.flipbook-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2.5rem;
}
.flipbook-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}
.flipbook-page {
  background: var(--color-cream);
}
.flipbook-page img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  box-shadow: 0 25px 50px rgba(35, 60, 124, .18);
}
.flipbook-controls {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.flipbook-nav-btn {
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  color: var(--color-navy);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}
.flipbook-nav-btn:hover:not(:disabled) { background: var(--color-dark); color: #fff; }
.flipbook-nav-btn:disabled { opacity: .35; cursor: default; }
.flipbook-skip-btn {
  width: auto;
  height: auto;
  padding: .5rem 1rem;
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.flipbook-page-indicator {
  font-family: var(--font-body);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--color-text-soft);
  min-width: 90px;
  text-align: center;
}
.flipbook-hint {
  margin-top: .75rem;
  font-size: .78rem;
  color: var(--color-text-soft);
  letter-spacing: .02em;
}
.flipbook-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.flipbook-empty {
  text-align: center;
  color: var(--color-text-soft);
  padding: 2rem 1rem 3rem;
}
.flipbook-loading {
  width: 100%;
  text-align: center;
  color: var(--color-text-soft);
  font-size: .85rem;
  letter-spacing: .02em;
  padding: 3rem 1rem;
}

.catalogue-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  max-width: var(--max-width);
  margin: 1.25rem auto 0;
  padding: 0 1.25rem;
}
.catalogue-toolbar .breadcrumb { margin: 0; padding: 0; }
.catalogue-toolbar .flipbook-actions { justify-content: flex-end; }
@media (max-width: 480px) {
  .catalogue-toolbar .flipbook-actions { width: 100%; justify-content: center; }
}
.flipbook-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  cursor: pointer;
  background: transparent;
  font-family: var(--font-body);
}
.flipbook-fullscreen-btn svg { flex-shrink: 0; }

.flipbook-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #141414;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.flipbook-overlay.is-open { display: flex; }
.flipbook-overlay-stage {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flipbook-overlay .flipbook-page {
  background: transparent;
}
.flipbook-overlay .flipbook-page img {
  box-shadow: 0 25px 60px rgba(0, 0, 0, .5);
}
.flipbook-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .12);
  color: #f2ede0;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: background .2s, color .2s;
}
.flipbook-close:hover { background: var(--color-gold); color: #1c1c1c; }
.flipbook-overlay .flipbook-controls { margin-top: 1.25rem; flex-shrink: 0; }
.flipbook-overlay .flipbook-nav-btn {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .3);
  color: #f2ede0;
}
.flipbook-overlay .flipbook-nav-btn:hover:not(:disabled) { background: var(--color-gold); color: #1c1c1c; }
.flipbook-overlay .flipbook-page-indicator { color: #cfc7ae; }
.flipbook-overlay .flipbook-hint { color: #a89f88; margin-bottom: 0; }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 3fr 2fr; gap: 2.5rem; }
}

.contact-form-card,
.contact-info-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-muted);
  border-radius: 4px;
  padding: 2rem;
  width: 100%;
  height: 100%;
}

.contact-form { display: flex; flex-direction: column; flex: 1; }
.form-notice { padding: .9rem 1.1rem; border-radius: 4px; margin-bottom: 1.25rem; font-size: .88rem; }
.form-notice.success { background: #e4efe1; color: #2f5c2a; }
.form-notice.error { background: #f6e2e0; color: #7a2c24; }

.contact-info-list { display: flex; flex-direction: column; flex: 1; margin-top: 1.5rem; }
.contact-card-heading { text-align: left; font-size: 1.9rem; margin-bottom: 1.5rem; }
.contact-card-heading::after { margin: .6rem 0 0; }

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 560px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

.form-group { margin-bottom: 1.25rem; }
.form-group:last-of-type { margin-bottom: 1.5rem; }
.form-group label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-soft);
  margin-bottom: .4rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .75em .9em;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.5;
}
.form-group textarea { resize: vertical; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(35, 60, 124, .12);
}
.contact-form .btn { width: 100%; text-align: center; border: none; cursor: pointer; margin-top: auto; }
@media (min-width: 560px) {
  .contact-form .btn { width: auto; padding-left: 2.5em; padding-right: 2.5em; }
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .9rem 0;
  border-top: 1px solid var(--color-border);
  font-size: .9rem;
}
.contact-info-item:first-child { border-top: none; padding-top: 0; }
.contact-info-item svg { flex-shrink: 0; margin-top: .15rem; color: var(--color-gold); }
.contact-info-item strong {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-soft);
  margin-bottom: .2rem;
}
.contact-info-item a:hover { color: var(--color-navy); }

.contact-info-social { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.contact-info-social-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-soft);
  margin-bottom: .75rem;
}

.contact-map-section .wide-inner { margin-bottom: 2rem; }
.contact-map-frame { aspect-ratio: 16/6; border-radius: 4px; overflow: hidden; }
.contact-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 768px) {
  .contact-map-frame { aspect-ratio: 21/6; }
}

/* =========================================================
   PORTFOLIO WORK CARD
   Replaces the old single-<a> WooCommerce card: the image/title/artist
   area is one link to the artwork, with a separate small "Enquire"
   button beside it that opens the pop-up (inc/enquiries.php) without
   navigating away — so it can't be nested inside the card's own <a>.
   ========================================================= */
.work-card-portfolio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.work-card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.work-card-link .work-title {
  margin-top: .75rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
}
.work-card-link .work-artist {
  font-size: .82rem;
  color: var(--color-text-soft);
  margin-top: .15rem;
}
.work-card-link .work-dimensions {
  font-size: .78rem;
  color: var(--color-text-soft);
  margin-top: .1rem;
}
.work-card-enquire {
  margin-top: .6rem;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-navy);
  cursor: pointer;
  text-decoration: underline;
}
.work-card-enquire:hover { color: var(--color-navy-deep); }

/* =========================================================
   ENQUIRE NOW — pop-up form
   Printed once in the footer (inc/enquiries.php), toggled by
   assets/js/enquiry.js. Reuses .contact-form/.form-row/.form-group/
   .form-notice from the Contact page styles above.
   ========================================================= */
.svc-enquiry-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.svc-enquiry-modal.is-open { display: block; }
body.svc-modal-open { overflow: hidden; }

.svc-enquiry-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 35, 51, .55);
}
.svc-enquiry-modal-dialog {
  position: relative;
  background: var(--color-bg);
  width: calc(100% - 2.5rem);
  max-width: 480px;
  margin: 6vh auto;
  padding: 2.5rem 2rem 2rem;
  border-radius: 6px;
  max-height: 88vh;
  overflow-y: auto;
}
.svc-enquiry-modal-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-text-soft);
  cursor: pointer;
}
.svc-enquiry-modal-close:hover { color: var(--color-text); }
.svc-enquiry-modal-artwork {
  font-size: .9rem;
  color: var(--color-text-soft);
  margin: 0 0 1.5rem;
}
.svc-enquiry-modal-dialog h2 { text-align: left; margin: 0 0 .3rem; }
.svc-enquiry-modal-dialog h2::after { margin: .5rem 0 0; }
@media (min-width: 640px) {
  .svc-enquiry-modal-dialog { padding: 3rem 2.5rem 2.5rem; }
}