/* ==========================================================================
   PETER WOCHNIAK FINE ART — MUSEUM DARK MODE STYLESHEET
   Typography: Monospace System (Nimbus Mono PS / SFMono-Regular / Menlo / Courier)
   Color Palette: Deep Charcoal (#121212), Graphite (#1E1E20), Platinum (#E2E8F0)
   ========================================================================== */

:root {
  --bg-primary: #121214;
  --bg-secondary: #1a1a1d;
  --bg-surface: #222226;
  --bg-overlay: rgba(18, 18, 20, 0.92);
  --border-subtle: #2d2d32;
  --border-focus: #4b4b52;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent-silver: #cbd5e1;
  --accent-highlight: #ffffff;
  --font-mono: 'Nimbus Mono PS', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   HEADER & NAVIGATION BAR (STICKY)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(18, 18, 20, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand-container {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
}

.brand-logo-img {
  height: 52px;
  width: auto;
  display: block;
}

.filter-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.filter-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.filter-btn.active {
  color: #000000;
  background-color: var(--accent-silver);
  border-color: var(--accent-silver);
  font-weight: 600;
}

.header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.header-action-link {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.header-action-link:hover {
  color: var(--accent-highlight);
}

.cart-icon {
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: #38bdf8;
  border-radius: 50%;
}

/* ==========================================================================
   HERO / STATEMENT SECTION
   ========================================================================== */
.hero-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 32px 32px;
  text-align: center;
}

.hero-subtitle {
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hero-title {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin-bottom: 16px;
  line-height: 1.3;
}

.hero-desc {
  max-width: 680px;
  margin: 0 auto;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ==========================================================================
   MASONRY GALLERY GRID
   ========================================================================== */
.gallery-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px;
}

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}

.artwork-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  cursor: pointer;
}

.artwork-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-focus);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
}

.artwork-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #141416;
}

.artwork-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  opacity: 0;
}

.artwork-img.loaded {
  opacity: 1;
}

.artwork-card:hover .artwork-img {
  transform: scale(1.03);
}

.artwork-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(18, 18, 20, 0.1) 0%, rgba(18, 18, 20, 0.85) 60%, rgba(18, 18, 20, 0.98) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.artwork-card:hover .artwork-overlay {
  opacity: 1;
  pointer-events: auto;
}

.artwork-category-badge {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: 6px;
}

.artwork-title {
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 4px;
  line-height: 1.3;
}

.artwork-location {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.artwork-finishes {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.4;
}

.artwork-actions {
  display: flex;
  gap: 10px;
}

.btn-acquire {
  flex: 1;
  background-color: var(--accent-silver);
  color: #000000;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 12px;
  text-align: center;
  border-radius: 2px;
  transition: var(--transition-smooth);
}

.btn-acquire:hover {
  background-color: #ffffff;
}

.btn-details {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 12px;
  text-align: center;
  border-radius: 2px;
  transition: var(--transition-smooth);
}

.btn-details:hover {
  border-color: var(--text-primary);
}

/* Static caption under each card */
.artwork-caption {
  padding: 14px 16px;
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.caption-title {
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}

.caption-cat {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   LOAD MORE & STATUS BAR
   ========================================================================== */
.pagination-container {
  text-align: center;
  padding: 48px 32px;
}

.btn-load-more {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 2px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-load-more:hover {
  background-color: var(--bg-surface);
  border-color: var(--accent-silver);
}

.pagination-status {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 12px;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   STANDARDS & PRINT MEDIUMS SPECIFICATION
   ========================================================================== */
.standards-section {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 80px 32px;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-label {
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.section-title {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.mediums-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.medium-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 32px 28px;
  border-radius: 2px;
}

.medium-title {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.medium-spec {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ==========================================================================
   ABOUT & ARTIST STATEMENT
   ========================================================================== */
.about-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 32px;
  line-height: 1.8;
}

.about-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background-color: #0b0b0d;
  border-top: 1px solid var(--border-subtle);
  padding: 48px 32px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.footer-link {
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  transition: var(--transition-smooth);
}

.footer-link:hover {
  color: #ffffff;
}

.footer-crosslink {
  margin-top: 16px;
  font-size: 11px;
  color: var(--text-muted);
}

.footer-crosslink a {
  color: var(--text-secondary);
  text-decoration: underline;
}

/* ==========================================================================
   LIGHTBOX MODAL & INQUIRE MODAL
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(10, 10, 12, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-backdrop.open {
  display: flex;
  opacity: 1;
}

.modal-content {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  max-width: 1040px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 2px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  padding: 4px 8px;
  transition: var(--transition-smooth);
}

.modal-close-btn:hover {
  color: #ffffff;
}

.modal-body {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 32px;
  padding: 32px;
}

.modal-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0d0d0f;
  border: 1px solid var(--border-subtle);
}

.modal-img {
  max-width: 100%;
  max-height: 70vh;
  display: block;
  object-fit: contain;
}

.modal-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.modal-meta-header {
  margin-bottom: 24px;
}

.modal-meta-cat {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: 6px;
}

.modal-meta-title {
  font-size: 20px;
  color: #ffffff;
  margin-bottom: 6px;
  line-height: 1.3;
}

.modal-meta-location {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.modal-ps-id {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-surface);
  display: inline-block;
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 20px;
}

.modal-specs-list {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.7;
}

.modal-specs-list li {
  margin-bottom: 8px;
  list-style: none;
  position: relative;
  padding-left: 16px;
}

.modal-specs-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

.modal-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-btn-buy {
  background-color: var(--accent-silver);
  color: #000000;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 20px;
  text-align: center;
  border-radius: 2px;
  transition: var(--transition-smooth);
}

.modal-btn-buy:hover {
  background-color: #ffffff;
}

.modal-btn-cart {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 20px;
  text-align: center;
  border-radius: 2px;
  transition: var(--transition-smooth);
}

.modal-btn-cart:hover {
  border-color: var(--accent-silver);
}

/* Inquire Form in Modal */
.inquire-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.inquire-input, .inquire-textarea {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 2px;
  width: 100%;
}

.inquire-input:focus, .inquire-textarea:focus {
  outline: none;
  border-color: var(--accent-silver);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .masonry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mediums-grid {
    grid-template-columns: 1fr;
  }
  .modal-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    padding: 16px 20px;
    align-items: center;
  }
  .header-actions {
    flex-direction: row;
    gap: 16px;
  }
  .masonry-grid {
    grid-template-columns: 1fr;
  }
  .hero-title {
    font-size: 20px;
  }
  .gallery-container {
    padding: 16px;
  }
}

/* Uniform grid (Technical Guru fix): same-size tiles, whole photo shown, no cropping */
.masonry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.masonry-grid .artwork-media { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background-color: #0c0c0d; }
.masonry-grid .artwork-img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 1024px) { .masonry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .masonry-grid { grid-template-columns: 1fr; } }

/* Prints / Products buy buttons (grid card + lightbox) */
.artwork-actions { flex-wrap: wrap; }
.artwork-actions .btn-acquire { flex: 1 1 0; min-width: 0; padding: 8px 6px; white-space: nowrap; }
.artwork-actions .btn-details { flex: 0 0 auto; }
.modal-buy-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-buy-pair .modal-btn-buy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 12px 10px; }
.btn-sub { font-size: 10px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: #333; line-height: 1.3; }
@media (max-width: 380px) { .modal-buy-pair { grid-template-columns: 1fr; } }

/* ==========================================================================
   MOBILE / ACCESSIBILITY FIXES (audit, applied Sep 30, 2026)
   Source: /workspace/mobile-audit-peterwochniak/REPORT.md P1-P9
   ========================================================================== */

/* F4 contrast: muted grey #64748b fails WCAG AA (3.3–3.9:1). #8b98ad = 5.4–6.7:1 on every background used */
:root { --text-muted: #8b98ad; }

/* F10 font stack: ui-monospace gives real SF Mono on iPhone/iPad/Mac (SFMono-Regular is not exposed to Safari web pages) */
:root { --font-mono: ui-monospace, 'SFMono-Regular', 'Nimbus Mono PS', Consolas, 'Liberation Mono', Menlo, 'Roboto Mono', Courier, monospace; }

/* desktop: CART / INQUIRE are stacked 18px-tall links 4px apart (fails WCAG 2.5.8 24px target size) */
.header-actions { gap: 6px; }
.header-action-link { padding-top: 4px; padding-bottom: 4px; }

/* F5 tap targets on touch screens / tablets / phones: 44px minimum (desktop mouse layout unchanged) */
@media (pointer: coarse), (max-width: 1024px) {
  .filter-btn, .header-action-link { min-height: 44px; }
  .header-action-link { padding: 0 10px; }
  .footer-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  .footer-crosslink a { display: inline-block; padding: 14px 4px; }
}
.modal-close-btn { width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center;
  top: 8px; right: 8px; font-size: 28px; line-height: 1; color: #fff; background: rgba(18,18,20,.7); border-radius: 50%; }

/* F8 iPad mini (768px) currently falls into the 1-column phone layout; start 1 column below 768 instead */
@media (min-width: 600px) and (max-width: 1024px) { .masonry-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

/* F6 iOS/iPadOS zooms the page when a form field under 16px is focused (all widths; harmless on desktop) */
.inquire-input, .inquire-textarea { font-size: 16px; }

/* F3 readable text on tablets too (iPad Air/Pro portrait use the same 14px/12px copy as desktop today) */
@media (max-width: 1024px) {
  body { font-size: 16px; }
  .hero-desc, .about-text, .medium-spec, .modal-specs-list, .modal-meta-location { font-size: 16px; }
  .hero-subtitle, .section-label, .pagination-status, .caption-cat, .artwork-category-badge, .btn-sub, .modal-ps-id { font-size: 12px; }
  .caption-title { font-size: 14px; }
}

/* ---------- PHONES & SMALL TABLETS (up to iPad mini portrait) ---------- */
@media (max-width: 768px) {
  /* F1 compact sticky header: logo + CART/INQUIRE on one row, filters on ONE horizontally-swipeable row.
     Height drops from 283px (30–44% of the screen) to ~110px, and it no longer grows when JS adds the counts (fixes CLS). */
  .site-header { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 6px 12px; gap: 4px 8px; }
  .brand-logo-img { height: 44px; }
  .header-actions { flex-direction: row; gap: 0; }
  .header-action-link { font-size: 13px; }
  .filter-nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 6px;
    margin: 0 -12px; padding: 0 12px 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .filter-nav::-webkit-scrollbar { display: none; }
  .filter-btn { flex: 0 0 auto; font-size: 13px; padding: 0 14px; border-color: var(--border-subtle); scroll-snap-align: start; white-space: nowrap; }

  /* F3 readable text: body copy 16px, labels >= 12px (see the 1024px block above) */
  .hero-section { padding: 28px 20px 8px; }
  .hero-title { font-size: 22px; }
  .site-footer, .footer-crosslink { font-size: 14px; }
  .standards-section, .about-section { padding: 48px 20px; }
  .medium-card { padding: 24px 20px; }

  /* F9 captions: 2 lines instead of cutting titles off with "…" */
  .artwork-caption { align-items: flex-start; gap: 8px; }
  .caption-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 72%; }

  #inquire-modal .modal-content > div { padding: 24px 20px !important; }

  /* F2 full-screen photo-first lightbox; buy buttons pinned at the bottom so they are always visible */
  .modal-backdrop { padding: 0; }
  .modal-content { max-height: 100vh; max-height: 100dvh; height: 100%; border: 0; border-radius: 0; }
  #inquire-modal .modal-content { height: auto; max-height: 100dvh; margin: auto 12px; border: 1px solid var(--border-subtle); }
  .modal-body { padding: 0; gap: 16px; }
  .modal-image-wrap { border: 0; background: #000; min-height: 40vh; }
  .modal-img { width: 100%; max-height: 62vh; max-height: 62dvh; }
  .modal-details { padding: 0 16px; }
  .modal-cta-wrap { position: sticky; bottom: 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: var(--bg-secondary); }
  .modal-meta-location:empty { display: none; }
  #lightbox-close { position: fixed; }   /* keep the X on screen while the details are scrolled */
  .modal-buy-pair { grid-template-columns: 1fr 1fr; gap: 8px; }   /* keep Prints | Products side by side (the 380px rule stacks them) */
  .modal-cta-wrap { gap: 8px; }
  .modal-cta-wrap .modal-btn-cart { padding: 10px 16px; }
}

/* lightbox prev/next buttons added by the proposed app.js patch */
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(18,18,20,.6); color: #fff; font-size: 22px; cursor: pointer; z-index: 5; }
.lb-prev { left: 8px; } .lb-next { right: 8px; }
.modal-image-wrap { position: relative; }
body.modal-open { overflow: hidden; }          /* F2 stop the page scrolling behind an open lightbox */
.modal-backdrop { overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* F2b CLS: before app.js fills the grid it is empty, so "Load More" and the finishes section paint near the top
   and then get shoved down by the cards (Lighthouse CLS 0.37 even after the header fix). Reserve the space: */
/* (:empty would not match: the div contains a comment + whitespace in index.html) */
.masonry-grid:not(:has(.artwork-card)) { min-height: 200vh; }

/* ==========================================================================
   SECOND-OPINION ADDITIONS (applied Sep 30, 2026)
   - filters collapse into a drawer below 900px (header stays one row)
   - 48px touch targets with 8px spacing
   - secondary text >= 14px on phones and tablets; card titles are h3
   ========================================================================== */
h3.caption-title { margin: 0; font-weight: 400; font-family: inherit; line-height: 1.35; }
p.artwork-title { margin-top: 0; }
.filter-toggle { display: none; }

@media (pointer: coarse), (max-width: 1024px) {
  .filter-btn, .header-action-link { min-height: 48px; }
  .filter-nav { gap: 8px; }
  .header-actions { gap: 8px; }
  .footer-links { gap: 8px; }
  .footer-link { min-height: 48px; }
  .footer-crosslink a { padding: 16px 4px; }
  .btn-load-more { min-height: 48px; }
  .modal-close-btn, .lb-nav { min-width: 48px; min-height: 48px; }
  .modal-buy-pair { gap: 8px; }
  .modal-btn-buy, .modal-btn-cart, .btn-acquire, .btn-details { min-height: 48px; }
}

@media (max-width: 1024px) {
  .hero-subtitle, .section-label, .pagination-status, .caption-cat, .artwork-category-badge, .btn-sub, .modal-ps-id,
  .artwork-location, .artwork-finishes, .modal-meta-cat { font-size: 14px; }
  .caption-cat { letter-spacing: 0.04em; }
  .caption-title { font-size: 16px; }
  .artwork-caption { flex-wrap: wrap; gap: 4px 8px; }
  .btn-load-more, .footer-link, .site-footer p, .footer-crosslink { font-size: 14px; }
  .btn-acquire, .btn-details { font-size: 13px; }
}
/* lightbox on tablets: cap the photo height and keep the buy buttons in view (portrait photos) */
@media (min-width: 769px) and (max-width: 1024px) {
  .modal-img { max-height: 55dvh; width: auto; max-width: 100%; margin: 0 auto; }
  .modal-cta-wrap { position: sticky; bottom: 0; z-index: 2; padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: var(--bg-secondary); }
}

@media (max-width: 900px) {
  .site-header { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 6px 12px; gap: 8px; }
  .brand-logo-img { height: 40px; }
  .brand-container { min-height: 48px; min-width: 48px; display: flex; align-items: center; }
  .header-action-link { font-size: 13px; }
  .header-actions { flex-direction: row; flex: 0 0 auto; gap: 8px; }
  .header-action-link { padding: 0 8px; display: inline-flex; align-items: center; }
  .filter-toggle { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; max-width: 260px; min-height: 48px;
    padding: 0 12px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-primary); background: transparent; border: 1px solid var(--border-subtle); border-radius: 2px; cursor: pointer; }
  .filter-toggle-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .filter-toggle::after { content: ""; margin-left: auto; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .filter-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .filter-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; order: initial; flex: none; margin: 0; overflow: visible;
    padding: 8px 12px 12px; gap: 8px; background: rgba(18, 18, 20, 0.98); border-bottom: 1px solid var(--border-subtle);
    -webkit-mask-image: none; mask-image: none; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5); }
  .site-header.filters-open .filter-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header.filters-open .filter-btn { width: 100%; min-width: 0; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; letter-spacing: 0.04em; padding: 0 6px; border-color: var(--border-subtle); }
}
@media (max-width: 380px) {
  .brand-logo-img { height: 36px; }
  .header-action-link { padding: 0 6px; font-size: 12px; }
  .filter-toggle { padding: 0 10px; font-size: 12px; }
}

/* Static crawler cards: hidden as soon as JS runs (app.js renders a fresh random shuffle); keep the grid's space reserved */
.js .artwork-card.is-static { display: none; }
.js .masonry-grid:not(:has(.artwork-card:not(.is-static))) { min-height: 200vh; }

/* Grid v3 (STAGED, awaiting Peter's approval): fixed cells, whole photos, no bands. Every cell is 4:3 in fixed columns; the
   photo is contained and centred at its natural ratio on the page background (no card fill, no border). */
.masonry-grid { align-items: start; }
.masonry-grid .artwork-card { min-width: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; }   /* min-width 0: long captions no longer widen a column */
.masonry-grid .artwork-card:hover { transform: none; box-shadow: none; border-color: transparent; }
.masonry-grid .artwork-media { position: relative; display: block; aspect-ratio: 4 / 3; background: transparent; overflow: visible; }
.masonry-grid .artwork-media picture { position: absolute; inset: 0; display: block; }
.masonry-grid .artwork-img { width: 100%; height: 100%; object-fit: contain; }
.masonry-grid .artwork-caption { background: transparent; border-top: 0; padding: 12px 0 0; }