/* v2 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Inter:wght@300;400;500&family=Montserrat:wght@200;800&display=swap');

:root {
  color-scheme: light; /* prevent UA dark-mode styles on form controls */
  --black: #0a0a0a;
  --white: #ffffff;
  --gray-100: #f5f5f5;
  --gray-200: #e8e8e8;
  --gray-400: #aaaaaa;
  --gray-600: #666666;
  --gray-800: #333333;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', Helvetica, sans-serif;
  /* ── Shared frosted-glass recipe ── */
  --glass-bg:     rgba(255,255,255,0.88);
  --glass-blur:   saturate(200%) blur(32px);
  --glass-border: 0.5px solid rgba(255,255,255,0.90);
  --glass-shadow: 0 2px 28px rgba(0,0,0,0.13), inset 0 1px 0 rgba(255,255,255,0.95);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: #f7f5f0;
  color: var(--black);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
}

/* ── Navigation — centered floating pill, Apple-style frosted glass ── */
nav {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translate(-50%, var(--nav-y, -80px));
  opacity: var(--nav-op, 0);
  visibility: var(--nav-vis, hidden);
  padding: 4px;
  border-radius: 10px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(200%) blur(32px);
  -webkit-backdrop-filter: saturate(200%) blur(32px);
  border: 0.5px solid rgba(255,255,255,0.90);
  box-shadow: 0 2px 28px rgba(0,0,0,0.13),
              inset 0 1px 0 rgba(255,255,255,0.95);
  z-index: 100;
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1),
              opacity 0.5s ease,
              visibility 0.5s ease;
}

nav.visible {
  --nav-y: 0px;
  --nav-op: 1;
  --nav-vis: visible;
}

/* On non-canvas pages, nav is always visible — keeps centered pill on desktop */
body:not(.page-canvas) nav {
  --nav-y: 0px;
  --nav-op: 1;
  --nav-vis: visible;
}

.nav-pill-menu {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-pill-menu li[hidden] {
  display: none !important;
}

.nav-logo-item {
  margin-right: 4px;
}

.nav-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 7px;
  color: var(--black);
  text-decoration: none;
  transition: background 0.2s ease;
}

.nav-logo-link:hover {
  background: rgba(0,0,0,0.06);
}

.nav-pill-menu li a,
.nav-pill-menu li button[data-page] {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  padding: 8px 14px;
  border-radius: 7px;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.nav-pill-menu li a:hover {
  color: var(--black);
  background: rgba(0,0,0,0.05);
}

.nav-pill-menu li a.active {
  color: var(--black);
  font-weight: 500;
}

.nav-lang-item {
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid rgba(0,0,0,0.1);
}

/* Language toggle */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 8px 10px;
}

.lang-btn {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}

.lang-btn.active { color: var(--black); font-weight: 600; }
.lang-btn:hover { color: var(--black); }

.lang-sep {
  color: var(--gray-200);
  font-size: 10px;
  pointer-events: none;
}

/* Mobile hamburger — only on non-canvas pages */
.nav-menu-icon { display: none; }

/* ── Mobile menu button (canvas gallery, ≤600px) ──────────────────────────── */
.nav-burger {
  display: none; /* shown via media query below */
  position: fixed;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 110;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(200%) blur(32px);
  -webkit-backdrop-filter: saturate(200%) blur(32px);
  border: 0.5px solid rgba(255,255,255,0.90);
  box-shadow: 0 2px 18px rgba(0,0,0,0.13);
  border-radius: 14px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.nav-burger:active { transform: scale(0.93); }
/* Two thin lines → morph to × on open */
.burger-line {
  display: block;
  width: 20px;
  height: 1.5px;
  background: #111;
  border-radius: 1px;
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), opacity 0.2s ease;
}
.nav-burger.open .burger-line:nth-child(1) {
  transform: translateY(4.25px) rotate(45deg);
}
.nav-burger.open .burger-line:nth-child(2) {
  transform: translateY(-4.25px) rotate(-45deg);
}


/* Category filters belong in the bottom floating selector, not inside burger nav. */
.nav-filter-section { display: none; }
.nav-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 2px 2px;
}
.nav-filter-pill {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black);
  background: transparent;
  border: 0.5px solid rgba(0,0,0,0.22);
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.nav-filter-pill:hover { background: rgba(0,0,0,0.06); }
.nav-filter-pill.active { background: var(--black); color: #fff; border-color: var(--black); }
.nav-filter-pill.active:hover { background: #333; }

/* ═══════════════════════════════════════════
   CANVAS GALLERY PAGE
═══════════════════════════════════════════ */

body.page-canvas {
  background: #f5f0eb;
  overflow: hidden;
}

/* Grid mode helper — only used when explicitly switching to grid */
body.page-canvas.grid-mode { overflow: auto; }
body.grid-mode .canvas-brand-wrap { display: none !important; }
body.grid-mode .zoom-hud      { display: none !important; }

body.page-canvas footer { display: none; }

/* ── Brand title — centered ghost behind canvas cards ── */
.canvas-brand-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  /* NOTE: no CSS animation here — JS drives the reveal to avoid
     forwards fill-mode blocking the ghost opacity transition */
}

@keyframes brandFadeIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* Shimmer keyframe — slow liquid-glass sweep like iPhone "Hello" */
@keyframes glassShimmer {
  0%   { background-position: 180% center; }
  50%  { background-position: -80% center; }
  100% { background-position: 180% center; }
}

.canvas-brand-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3.5rem, 9vw, 10rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  white-space: nowrap;
  /* Glass/water shimmer — deep navy-blacks for the dark stops so at ~0.26 opacity
     they render as visible warm grays on cream; lighter stops create the shimmer peak */
  background: linear-gradient(
    108deg,
    #0a0a1e 0%,
    #3a3a52 14%,
    #8888a8 24%,
    #12121e 36%,
    #080814 48%,
    #4a4a68 58%,
    #9090b0 66%,
    #181828 76%,
    #2e2e44 88%,
    #0a0a1e 100%
  );
  background-size: 260% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: glassShimmer 9s ease-in-out infinite;
}

.canvas-brand-title span {
  display: block;
}

.canvas-brand-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin: 0;
}

/* ── Canvas layout — z-index:10 so cards appear OVER brand title ── */
.canvas-wrap {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;          /* mouse drags must never select card titles */
  -webkit-user-select: none;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
}

.canvas-wrap:active { cursor: grabbing; }

/* Edge vignette — draws the eye toward center, like gallery lighting */
.canvas-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 88% 88% at center,
    transparent 28%,
    rgba(245,240,235,0.52) 100%);
  pointer-events: none;
  z-index: 15;
}

.canvas-wrap.revealed {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease;
}

.canvas-bounds {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.canvas-drag {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 60px 100px 80px;
  /* will-change managed dynamically by JS — only set during drag/zoom,
     removed when settled so the browser re-rasterizes at the new zoom level
     giving crisp text and images at any zoom */
  width: max-content;
  touch-action: none;
  transform-origin: 0 0;  /* required for correct zoom-to-point math */
}

/* ── Canvas rows ── */
.canvas-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 50px;
  min-width: max-content;
}

/* ── Artwork cards ── */
.artwork-card {
  width: var(--w, 260px);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  opacity: 0;
  /* Slide up + scale in + keep the artwork's unique tilt */
  transform: scale(0.93) translateY(22px) rotate(var(--rot, 0deg));
  transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22,1,0.36,1);
}

.artwork-card.visible {
  opacity: 1;
  transform: scale(1) translateY(0) rotate(var(--rot, 0deg));
}

.card-inner {
  width: 100%;
  height: var(--h, 380px);
  overflow: hidden;
  background: #e8e4de;
  position: relative;
  /* Painting-on-wall shadow */
  box-shadow: 0 6px 28px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.45s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}

.card-image-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* Images fill the card — cover eliminates whitespace bars.
   For artworks with physical dimensions, the card is already the correct
   aspect ratio so cover fills with zero crop. For others, gallery.js
   corrects --h after the image loads so cover still fills perfectly. */
.card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Sold badge — frosted glass pill */
.card-sold-badge {
  display: none;
  position: absolute;
  top: 10px; right: 10px;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.18);
  backdrop-filter: saturate(120%) blur(12px);
  -webkit-backdrop-filter: saturate(120%) blur(12px);
  border: 0.5px solid rgba(255,255,255,0.45);
  padding: 4px 10px;
  border-radius: 20px;
  pointer-events: none;
}
.artwork-card--sold .card-sold-badge { display: block; }
.artwork-card--sold .card-image-wrap img { filter: grayscale(25%) brightness(0.92); }

/* ── Card info overlay — frosted glass over the photo ── */
.card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 52px 14px 14px;
  background: linear-gradient(to top,
    rgba(8,8,14,0.72) 0%,
    rgba(8,8,14,0.22) 55%,
    transparent 100%);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.42s ease,
              transform 0.42s cubic-bezier(0.22,1,0.36,1),
              backdrop-filter 0.42s ease,
              -webkit-backdrop-filter 0.42s ease;
  pointer-events: none;
}

.card-overlay .card-title-text {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: rgba(255,255,255,0.96);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-overlay .card-meta-text {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
  margin-top: 4px;
}

/* Desktop hover: painting straightens up and lifts — like touching a tilted frame */
@media (hover: hover) {
  /* Card overlay hidden on canvas — titles show only in the modal */
  .canvas-wrap .artwork-card:hover .card-overlay { opacity: 0; }

  /* The card itself straightens its tilt on hover */
  .canvas-wrap .artwork-card.visible:hover {
    transform: scale(1.02) translateY(-3px) rotate(0deg);
    transition: transform 0.38s cubic-bezier(0.22,1,0.36,1) !important;
  }

  /* Deeper shadow as it "lifts off" the wall */
  .artwork-card:hover .card-inner {
    transform: translateY(0px) scale(1.00);
    box-shadow: 0 22px 64px rgba(0,0,0,0.22), 0 6px 20px rgba(0,0,0,0.12);
  }
}

/* Touch: no overlay on canvas — clean image, info in modal */
@media (hover: none) {
  .canvas-wrap .card-overlay { opacity: 0 !important; }
}

/* Hide overlay on canvas for all devices — paintings show as pure images */
.canvas-wrap .card-overlay { display: none; }

/* Touch tap feedback */
.mobile-card:active { opacity: 0.88; transition: opacity 0.1s ease; }

/* ── Filter bar — frosted glass pill ── */
/* ── Zoom level HUD ── */
.zoom-hud {
  position: fixed;
  bottom: 28px;
  right: 96px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--black);
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.zoom-hud.visible {
  opacity: 1;
  transform: translateY(0);
}

.canvas-filter-bar {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 80;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  padding: 5px 10px;
  border-radius: 40px;
}
.filter-pill {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-800);
  background: transparent;
  border: none;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.filter-pill:hover { color: var(--black); }
.filter-pill.active {
  color: #fff;
  background: var(--black);
}

/* ── Masonry grid (all devices — marvellco style) ── */
.mobile-grid {
  display: none;
  columns: 2;
  column-gap: 6px;
  padding: 68px 6px calc(env(safe-area-inset-bottom, 0px) + 80px);
  background: #f5f0eb;
  min-height: 100dvh;
}
/* Tablet: 3 columns */
@media (min-width: 601px) and (max-width: 900px) {
  .mobile-grid {
    columns: 3;
    column-gap: 8px;
    padding: 74px 8px calc(env(safe-area-inset-bottom, 0px) + 84px);
  }
}
/* Desktop: 3 columns */
@media (min-width: 901px) {
  .mobile-grid {
    columns: 3;
    column-gap: 10px;
    padding: 80px 12px calc(env(safe-area-inset-bottom, 0px) + 84px);
  }
}
/* Wide desktop: 4 columns */
@media (min-width: 1400px) {
  .mobile-grid {
    columns: 4;
    column-gap: 12px;
    padding: 84px 16px calc(env(safe-area-inset-bottom, 0px) + 84px);
  }
}
.mobile-card {
  break-inside: avoid;
  margin-bottom: 6px;
  cursor: pointer;
  position: relative;
  background: #e8e4de;
  overflow: hidden;
  border-radius: 2px;
  transition: opacity 0.15s ease;
}
.mobile-card:active { opacity: 0.85; }
.mobile-card img {
  width: 100%; height: auto; display: block;
}
/* Subtle gradient overlay — always visible on touch, hover-only on desktop */
.mobile-card .card-overlay {
  opacity: 1;
  transform: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: linear-gradient(to top,
    rgba(8,8,14,0.62) 0%,
    rgba(8,8,14,0.08) 48%,
    transparent 100%);
  padding: 32px 10px 10px;
}
.mobile-card .card-title-text { font-size: 11px; white-space: normal; line-height: 1.25; }
.mobile-card .card-meta-text  { font-size: 9px; margin-top: 2px; letter-spacing: 0.08em; }
/* Desktop: show overlay only on hover — cleaner, image-first like marvellco */
@media (hover: hover) and (min-width: 901px) {
  .mobile-card .card-overlay {
    opacity: 0;
    transition: opacity 0.28s ease;
  }
  .mobile-card:hover .card-overlay { opacity: 1; }
  .mobile-card { margin-bottom: 10px; }
  .mobile-card .card-title-text { font-size: 13px; }
  .mobile-card .card-meta-text  { font-size: 10px; }
}
/* Slight lift on hover (desktop) */
@media (hover: hover) and (min-width: 901px) {
  .mobile-card:hover { opacity: 0.94; transition: opacity 0.2s ease; }
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

/* ── Landscape phones: short viewport — force grid if height < 500px ── */
@media (max-height: 500px) and (orientation: landscape) {
  .mobile-grid { padding-top: 56px; columns: 3; column-gap: 8px; }
  body:not(.page-canvas) .page-content { padding-top: 52px; }
  .about-hero      { height: 70vh; min-height: 220px; }
  .about-hero-name { font-size: 28px; }
  .about-hero-text { padding: 32px 16px 14px; gap: 4px; }
  .about-hero-subtitle { font-size: 11px; }
  .modal-image-wrap { height: min(80vw, 340px); }
}

/* Landscape phones where width > 900px but screen is too short for canvas */
@media (max-height: 500px) and (min-width: 901px) and (orientation: landscape) {
  /* JS won't switch to grid-mode here (width > 900px), force canvas-brand small */
  .canvas-brand-title { font-size: clamp(1.5rem, 6vh, 3rem); }
}

/* ── Tablet / mobile responsive ─────────────────────────────────────────────── */

/* ≤ 900 px — modal stacks, buttons raised above each other */
@media (max-width: 900px) {
  /* Non-canvas pages: push content below fixed nav */
  body:not(.page-canvas) .page-content { padding-top: 52px; }
  /* (was: .about-hero margin-top: -52px — removed so the artist photo is
     no longer cropped behind the floating nav pill.) */
  nav { padding: 0 12px; }

  /* Modal: stack vertically */
  .modal-overlay { align-items: flex-start; }
  .modal-inner {
    flex-direction: column;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .modal-image-wrap {
    flex: none !important;
    width: 100%;
    height: min(62vh, 520px) !important;
    min-height: unset !important;
    max-height: none;
    /* Equal padding all sides — painting never touches the modal edge */
    padding: 16px;
    box-sizing: border-box;
  }
  .zoom-container img { max-height: 100%; }
  .modal-info {
    flex: none !important;
    width: 100%;
    overflow-y: visible !important;
    border-left: none;
    border-top: 1px solid #f0f0f0;
    padding: 24px 20px calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .modal-title { font-size: 26px; }
  /* Mobile: keep prev/next usable, as translucent taps over the image
     (swipe is the primary gesture — see gallery.js). Parent selector
     raises specificity so these win over the later base .modal-nav rule. */
  .modal-overlay .modal-nav {
    display: block;
    top: 30vh;
    font-size: 26px;
    opacity: 0.92;
    padding: 12px 15px;
    background: rgba(10,10,14,0.42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: 50%;
    line-height: 1;
  }
  .modal-overlay .modal-prev { left: 8px; }
  .modal-overlay .modal-next { right: 8px; }
  .modal-close { top: 12px; right: 16px; z-index: 10; }

  .about-hero      { height: clamp(360px, 62vh, 560px); }
  .about-hero-name { font-size: 44px; }
  .about-hero-text { padding: 48px 20px 22px; }
  .float-brand-sub { display: none; }
  /* Tablet ≤900px: abbreviated brand on all pages — use parent selector for specificity */
  .float-brand { padding: 7px 13px; }
  .float-brand .float-brand-full { display: none; }
  .float-brand .float-brand-short { display: inline; font-size: 13px; letter-spacing: 0.04em; }

  /* Filter bar shares the bottom row with the wishlist + WhatsApp FABs on
     touch screens, centered between them. Previously it floated 80px above
     them, which read as "stuck in the middle of the page". Now it sits on
     the same baseline at the very bottom: [♥ Fav]  [Filter chips…]  [WA]. */
  .canvas-filter-bar {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    /* Leave room for the two corner FABs (≈ 60px wide + 16-28px margin),
       so the centered filter bar never overlaps them on narrow viewports. */
    max-width: calc(100vw - 180px);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .canvas-filter-bar::-webkit-scrollbar { display: none; }
  .zoom-hud {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    right: 16px;
  }

  /* Wishlist / WhatsApp stay in their corners at the very bottom */
  .float-wishlist      { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .float-whatsapp-wrap { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* ≤ 768 px — touch overlay: lighter gradient, no blur; compact nav */
@media (max-width: 768px) {
  /* canvas brand title: stack words vertically, smaller font */
  .canvas-brand-title {
    font-size: clamp(2.2rem, 11vw, 5rem);
    white-space: normal;
    line-height: 1.0;
  }
  .canvas-brand-title span { display: block; }

  /* Slightly more compact nav pill on tablets */
  nav { padding: 3px; }
  .nav-pill-menu li a,
  .nav-pill-menu li button[data-page] {
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .lang-toggle { padding: 8px 8px; }

  .canvas-wrap .card-overlay {
    background: linear-gradient(to top,
      rgba(8,8,14,0.52) 0%,
      rgba(8,8,14,0.06) 50%,
      transparent 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ≤ 900 px — tablet + phone use burger nav; category filter stays at bottom */
@media (max-width: 900px) {
  /* Tighten nav so it fits on touch screens — hide lang on canvas (burger handles it) */
  .page-canvas .nav-lang-item { display: none; }
  .nav-pill-menu li a,
  .nav-pill-menu li button[data-page] {
    padding: 10px 9px;
    font-size: 11px;
    letter-spacing: 0;
  }

  /* ── Canvas page: replace pill nav with burger icon ── */
  .page-canvas nav {
    /* Start hidden; burger controls visibility */
    transform: translate(-50%, -20px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    top: 4.5rem;
    left: 50%;
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
                opacity 0.25s ease,
                visibility 0.25s ease;
  }
  .page-canvas nav.burger-open {
    transform: translate(-50%, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
  }
  .page-canvas nav.burger-open .nav-pill-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 160px;
  }
  .page-canvas nav.burger-open .nav-lang-item {
    display: flex !important;
    border-left: none;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 6px 4px 2px;
    margin-left: 0;
    justify-content: center;
  }
  .page-canvas nav.burger-open .nav-filter-section { display: none !important; }

  /* Show burger on ALL pages at tablet/mobile widths */
  .nav-burger { display: flex; }

  /* Non-canvas pages (About, Contact): hide nav pill and show on burger-open */
  body:not(.page-canvas) nav {
    transform: translate(-50%, -20px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    top: 4.5rem;
    left: 50%;
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1),
                opacity 0.25s ease,
                visibility 0.25s ease;
  }
  body:not(.page-canvas) nav.burger-open {
    transform: translate(-50%, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
  }
  body:not(.page-canvas) nav.burger-open .nav-pill-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 160px;
  }
  body:not(.page-canvas) nav.burger-open .nav-lang-item {
    display: flex !important;
    border-left: none;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 6px 4px 2px;
    margin-left: 0;
    justify-content: center;
  }
  /* Abbreviate brand name on non-canvas mobile */
  body:not(.page-canvas) .float-brand { padding: 7px 13px; }
  body:not(.page-canvas) .float-brand .float-brand-full { display: none; }
  body:not(.page-canvas) .float-brand .float-brand-short {
    display: inline;
    font-size: 12px;
    letter-spacing: 0.06em;
  }

  /* ── Show artist name logo (float-brand) on mobile canvas ── */
  .page-canvas .float-brand {
    display: flex !important;
    padding: 7px 13px;
    top: 1.2rem;
    left: 1.2rem;
  }
  .page-canvas .float-brand .float-brand-full { display: none; }
  .page-canvas .float-brand .float-brand-short {
    display: inline;
    font-size: 12px;
    letter-spacing: 0.06em;
  }

  /* Filter bar at the bottom row alongside the wishlist + WhatsApp FABs.
     Was raised 76px above the FAB row previously — now sits on the same
     baseline so visitors see one tidy bottom strip on small viewports.
     The .canvas-filter-bar rule in the ≤900px block already sets bottom:
     20px + safe-area; this override just tightens max-width on phone-size
     viewports where the corner FABs are closer to the center. */
  .page-canvas .canvas-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: calc(100vw - 160px);
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    justify-content: flex-start;
  }
  .page-canvas .canvas-filter-bar::-webkit-scrollbar { display: none; }

  /* ── Canvas brand background text — visible on mobile ── */
  .canvas-brand-wrap { display: block !important; }
  .canvas-brand-title {
    font-size: clamp(1.8rem, 10vw, 3.5rem);
    white-space: normal;
    line-height: 0.95;
    margin-bottom: 0;
  }
  .canvas-brand-title span { display: block; }

  /* Filter pills smaller */
  .filter-pill { padding: 5px 9px; font-size: 9px; }
  .zoom-hud    { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 10px; }

  /* Wishlist / WhatsApp — tuck into corners */
  .wishlist-drawer         { width: 100%; }
  .float-wishlist          { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 14px; padding: 10px 14px; }
  .float-whatsapp-wrap     { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); right: 14px; }

  /* ── Modal: full-scroll on phones (iOS Safari fix — no sticky, use scroll not auto) ── */
  .modal-overlay {
    overflow: hidden; /* overlay clips; inner does the scrolling */
    align-items: flex-start;
  }
  .modal-inner {
    height: 100dvh !important;
    overflow-y: scroll !important; /* scroll + !important overrides base overflow:hidden — iOS needs this */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    min-height: unset;
  }
  .modal-image-wrap {
    height: min(56vh, 460px) !important;
    min-height: unset !important;
    max-height: none !important;
    position: relative; /* NOT sticky — image scrolls with content */
    z-index: auto;
    /* Equal padding all sides — slightly tighter on narrow phones */
    padding: 12px;
    box-sizing: border-box;
  }
  .modal-info {
    padding: 20px 16px calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: visible !important;
    min-height: 50vh;
  }
  /* Keep close button accessible while scrolling */
  .modal-close {
    position: sticky;
    top: 12px;
    float: right;
    z-index: 10;
  }

  /* About */
  .about-hero      { height: 260px; }
  .about-hero-name { font-size: 28px; }
  .about-photos    { grid-template-columns: 1fr; gap: 20px; }

  /* Contact */
  .contact-wrap { margin-top: 20px; }

  /* iOS: prevent input zoom (Safari auto-zooms inputs < 16 px) */
  .form-group input,
  .form-group textarea,
  .modal-enquiry .form-group input,
  .modal-enquiry .form-group textarea { font-size: 16px; }
}

/* ≤ 480 px — small phones */
@media (max-width: 480px) {
  .about-bio   { padding: 0 16px; margin: 40px auto; }
  .contact-wrap{ padding: 0 16px; }
  .modal-info  { padding: 20px 16px calc(60px + env(safe-area-inset-bottom, 0px)) !important; }
  .modal-title { font-size: 22px; }
  .contact-wrap h1 { font-size: 32px; }
}

/* ≤ 400 px — very small phones */
@media (max-width: 400px) {
  .nav-pill-menu li a,
  .nav-pill-menu li button[data-page] { padding: 10px 7px; font-size: 10px; }
  .contact-wrap h1 { font-size: 28px; }
}

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.modal-inner {
  background: #ffffff;
  border-radius: 2px;
  max-width: 1160px;
  width: 94vw;
  max-height: 92vh;
  display: flex;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
  transform: scale(0.97);
  transition: transform 0.3s ease;
}

.modal-overlay.open .modal-inner {
  transform: scale(1);
}

.modal-image-wrap {
  flex: 1 1 58%;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 62vh;
  max-height: 92vh;
  /* Comfortable whitespace on ALL four sides so the painting never touches
     the modal edge — equal top/bottom AND left/right. object-fit: contain
     on the img/.zoom-container guarantees no cropping; the painting just
     renders proportionally smaller within the padded box. */
  box-sizing: border-box;
  padding: 24px;
}

.modal-image-wrap > img {
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.modal-info {
  flex: 0 0 300px;
  background: #ffffff;
  padding: 40px 32px 32px;
  overflow-y: auto;
  color: #0a0a0a;
  border-left: 1px solid #f0f0f0;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.modal-info::-webkit-scrollbar { width: 3px; }
.modal-info::-webkit-scrollbar-track { background: transparent; }
.modal-info::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }

.modal-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-style: italic;
  font-weight: 400;
  margin: 0 0 12px;
  line-height: 1.2;
}

.modal-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--gray-400);
  margin-bottom: 4px;
  line-height: 1.6;
}

.modal-description {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--gray-800);
  line-height: 1.8;
  margin-top: 16px;
  border-top: 1px solid var(--gray-200);
  padding-top: 16px;
}

/* ── Modal actions row ── */
.modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.modal-available {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gray-400);
  border: 1px solid var(--gray-200);
  padding: 3px 10px;
}

.btn-wishlist,
.btn-share {
  background: none;
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-wishlist:hover,
.btn-wishlist.in-wishlist,
.btn-share:hover {
  border-color: var(--gray-800);
  color: var(--black);
}

/* ── Modal enquiry section ── */
.modal-enquiry {
  margin-top: 24px;
  border-top: 1px solid var(--gray-200);
  padding-top: 20px;
}

.enquiry-heading {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  color: var(--black);
  margin: 0 0 16px;
}

.enquiry-method-toggle {
  display: flex;
  margin-bottom: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  overflow: hidden;
  width: fit-content;
}

.method-btn {
  background: none;
  border: none;
  color: var(--gray-400);
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 6px 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.method-btn.active {
  background: var(--white);
  color: var(--black);
}

.modal-enquiry .method-btn.active {
  background: var(--black);
  color: var(--white);
}

.modal-enquiry .form-group {
  margin-bottom: 14px;
}

.modal-enquiry .form-group input,
.modal-enquiry .form-group textarea {
  width: 100%;
  padding: 9px 0;
  border: none;
  border-bottom: 1px solid var(--gray-200);
  font-family: var(--font-body);
  font-size: 13px;
  background: transparent;
  outline: none;
  color: var(--black);
  transition: border-color 0.2s;
}

.modal-enquiry .form-group input::placeholder,
.modal-enquiry .form-group textarea::placeholder {
  color: var(--gray-400);
}

.modal-enquiry .form-group input:focus,
.modal-enquiry .form-group textarea:focus {
  border-color: var(--gray-800);
}

/* Prevent dark-mode autofill background from making inputs unreadable */
.modal-enquiry .form-group input:-webkit-autofill,
.modal-enquiry .form-group textarea:-webkit-autofill,
.form-group input:-webkit-autofill,
.form-group textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: var(--black) !important;
  caret-color: var(--black);
  transition: background-color 9999s ease-in-out 0s;
}

.modal-enquiry .form-group textarea {
  resize: vertical;
  min-height: 70px;
}

.modal-enquiry .btn-submit {
  background: var(--black);
  color: var(--white);
  border: none;
  padding: 10px 28px;
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 4px;
}

.modal-enquiry .btn-submit:hover { opacity: 0.82; }
.modal-enquiry .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.enquiry-feedback {
  font-size: 12px;
  margin-top: 10px;
  min-height: 18px;
}

.enquiry-feedback.success { color: var(--gray-600); }
.enquiry-feedback.error { color: #e88; }

/* ── Modal close (inside info panel, top-right) ── */
.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: var(--gray-600);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
  border-radius: 50%;
  font-weight: 300;
  flex-shrink: 0;
}

.modal-close:hover { color: var(--black); background: var(--gray-100); }

.modal-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--white);
  font-size: 32px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.2s;
  z-index: 1010;
  padding: 16px;
  font-weight: 300;
  line-height: 1;
}

.modal-nav:hover { opacity: 1; }
.modal-prev { left: 12px; }
.modal-next { right: 12px; }

/* ── Wishlist drawer ── */
.wishlist-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.wishlist-overlay.open {
  opacity: 1;
  visibility: visible;
}

.wishlist-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  background: var(--white);
  z-index: 1600;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  box-shadow: -4px 0 32px rgba(0,0,0,0.12);
}

.wishlist-drawer.open {
  transform: translateX(0);
}

.wishlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.wishlist-header h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  margin: 0;
  color: var(--black);
}

.wishlist-header-btns {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wishlist-clear-btn {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--gray-400);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: color 0.2s;
}

.wishlist-clear-btn:hover { color: var(--black); }

.wishlist-close-btn {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--gray-600);
  cursor: pointer;
  line-height: 1;
  font-weight: 300;
  transition: color 0.2s;
  padding: 0;
}

.wishlist-close-btn:hover { color: var(--black); }

.wishlist-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.wishlist-empty {
  font-size: 13px;
  color: var(--gray-400);
  margin: 16px 0;
}

.wishlist-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-100);
}

.wishlist-item img {
  width: 60px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}

.wishlist-item-info {
  flex: 1;
  min-width: 0;
}

.wishlist-item-title {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-style: italic;
  color: var(--black);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wishlist-item-dims {
  display: block;
  font-size: 11px;
  color: var(--gray-400);
  margin-top: 2px;
}

.wishlist-item-remove {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--gray-400);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
  flex-shrink: 0;
  transition: color 0.2s;
}

.wishlist-item-remove:hover { color: var(--black); }

/* Wishlist form */
.wishlist-form {
  padding: 16px 24px 24px;
  border-top: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.wishlist-form .form-group {
  margin-bottom: 14px;
}

.wishlist-form .form-group input,
.wishlist-form .form-group textarea {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid var(--gray-200);
  font-family: var(--font-body);
  font-size: 14px;
  background: transparent;
  outline: none;
  color: var(--black);
  transition: border-color 0.2s;
}

.wishlist-form .form-group input:focus,
.wishlist-form .form-group textarea:focus { border-color: var(--black); }
.wishlist-form .form-group textarea { resize: vertical; min-height: 70px; }

.wishlist-form .enquiry-method-toggle {
  border-color: var(--gray-200);
  margin-bottom: 14px;
}

.wishlist-form .method-btn {
  color: var(--gray-400);
}

.wishlist-form .method-btn.active {
  background: var(--black);
  color: var(--white);
}

.wishlist-form .btn-submit {
  width: 100%;
  background: var(--black);
  color: var(--white);
  border: none;
  padding: 13px;
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 4px;
}

.wishlist-form .btn-submit:hover { opacity: 0.8; }
.wishlist-form .btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.wishlist-feedback {
  font-size: 12px;
  margin-top: 10px;
  min-height: 18px;
}

.wishlist-feedback.success { color: var(--gray-600); }
.wishlist-feedback.error { color: #c44; }

/* ── Floating brand logo (top-left) ── */
.float-brand {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  display: flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 10px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(200%) blur(32px);
  -webkit-backdrop-filter: saturate(200%) blur(32px);
  border: 0.5px solid rgba(255,255,255,0.90);
  box-shadow: 0 2px 28px rgba(0,0,0,0.13),
              inset 0 1px 0 rgba(255,255,255,0.95);
  text-decoration: none;
  z-index: 100;
  transform: translateY(-80px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1),
              opacity 0.5s ease,
              visibility 0.5s ease,
              box-shadow 0.25s ease;
}
.float-brand:hover {
  box-shadow: 0 5px 36px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,1);
}
.float-brand.visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
body:not(.page-canvas) .float-brand {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.float-brand-name {
  display: flex;
  align-items: baseline;
}
.float-brand-full {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--black);
  white-space: nowrap;
}
.float-brand-short {
  display: none;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--black);
  white-space: nowrap;
}

/* ── Floating wishlist button (bottom-left) ── */
.float-wishlist {
  position: fixed;
  bottom: 28px;
  left: 28px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 100px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  z-index: 900;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--black);
  transition: box-shadow 0.2s, transform 0.2s;
}

.float-wishlist:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.13);
  transform: translateY(-1px);
}

.wishlist-count {
  background: var(--black);
  color: var(--white);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Floating WhatsApp button (bottom-right) ── */
.float-whatsapp-wrap {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 900;
}

.float-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.float-whatsapp:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* ── Footer ── */
footer {
  text-align: center;
  font-size: 11px;
  color: var(--gray-400);
  padding: 40px 20px;
  margin-top: 40px;
  border-top: 1px solid var(--gray-200);
}

/* ── About page ── */
.about-hero {
  position: relative;
  width: 100%;
  /* Generous default height so the full artist photo has room to breathe
     on desktop; bounded so it doesn't dominate the page on tall monitors. */
  height: clamp(420px, 70vh, 720px);
  /* Soft dark fallback for the brief moment before the R2 image loads,
     and as letterbox fill for portrait-orientation hero images. */
  background-color: #1a1a1f;
  background-image: linear-gradient(135deg, #1a1a1f 0%, #2a2024 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* text sits at the bottom, away from the floating nav pill */
}

/* The dark full-image overlay that used to darken the photo is gone — we keep
   text legibility via a localized bottom gradient + text-shadow instead. */
.about-hero::before { content: none; }

.about-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain = always show the full photo, no cropping; letterbox bars (if
     the photo's aspect doesn't match the hero) are filled by the dark
     gradient on .about-hero. */
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  display: block;
  pointer-events: none;
}

.about-hero-img.loaded { opacity: 1; }

.about-hero-text {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 64px 24px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Localized darkening only behind the text band — keeps the rest of the
     photo at full brightness while still giving the name + subtitle a
     dependable contrast surface. */
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0.2) 75%,
    rgba(0,0,0,0) 100%
  );
}

.about-hero-name {
  font-family: var(--font-display);
  font-size: 60px;
  font-style: italic;
  font-weight: 300;
  color: var(--white);
  text-align: center;
  line-height: 1.15;
  margin: 0;
  /* Belt + suspenders contrast: even on a near-white image the text-shadow
     keeps the name crisp. */
  text-shadow: 0 2px 14px rgba(0,0,0,0.75), 0 0 6px rgba(0,0,0,0.55);
}

.about-hero-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  text-align: center;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

.about-bio {
  max-width: 680px;
  margin: 64px auto;
  padding: 0 24px;
  line-height: 1.9;
  font-size: 15px;
  color: var(--gray-800);
}

.about-bio p { margin-bottom: 24px; }

.about-bio h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  margin: 48px 0 24px;
  color: var(--black);
}

.exhibitions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.exhibitions-list li {
  display: flex;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-200);
  font-size: 14px;
}

.exhibitions-list .ex-year {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--gray-400);
  min-width: 48px;
  padding-top: 2px;
}

.exhibitions-list .ex-info strong {
  display: block;
  font-weight: 500;
  margin-bottom: 2px;
}

.exhibitions-list .ex-info span {
  color: var(--gray-600);
  font-size: 13px;
}

/* ── Contact page ── */
.contact-layout {
  max-width: 1080px;
  margin: 90px auto 80px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(320px, 1fr);
  gap: 64px;
  align-items: center;
}

.contact-photo-col { width: 100%; }

.contact-photo {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--gray-200);
  background: var(--gray-100);
  /* Fade in once the real photo finishes loading (JS toggles .loaded) so the
     swap from 1x1 placeholder to the R2 image isn't a hard flicker. */
  opacity: 0;
  transition: opacity 0.4s ease;
}

.contact-photo.loaded { opacity: 1; }

/* Inside the two-column layout the form sits flush in its column */
.contact-layout .contact-wrap {
  max-width: 480px;
  margin: 0;
  padding: 0;
}

/* Stack on tablet / mobile — photo on top, form below */
@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 40px auto 64px;
    padding: 0 24px;
    max-width: 560px;
  }
  .contact-layout .contact-wrap { max-width: 100%; }
}

@media (max-width: 480px) {
  .contact-layout { padding: 0 16px; gap: 24px; }
}

.contact-wrap {
  max-width: 520px;
  margin: 100px auto 80px;
  padding: 0 24px;
}

.contact-wrap h1 {
  font-family: var(--font-display);
  font-size: 42px;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 8px;
}

.contact-wrap .contact-sub {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 40px;
}

/* Contact method toggle */
.contact-method-toggle {
  display: flex;
  margin-bottom: 24px;
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  overflow: hidden;
  width: fit-content;
}

.contact-method-toggle .method-btn {
  color: var(--gray-400);
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 7px 18px;
  cursor: pointer;
  transition: all 0.2s;
}

.contact-method-toggle .method-btn.active {
  background: var(--black);
  color: var(--white);
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gray-600);
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid var(--gray-200);
  font-family: var(--font-body);
  font-size: 15px;
  background: transparent;
  outline: none;
  color: var(--black);
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus { border-color: var(--black); }

.form-group textarea { resize: vertical; min-height: 120px; }

.btn-submit {
  background: var(--black);
  color: var(--white);
  border: none;
  padding: 14px 40px;
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 8px;
}

.btn-submit:hover { opacity: 0.8; }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.contact-email {
  margin-top: 32px;
  font-size: 13px;
  color: var(--gray-600);
}

.contact-email a { color: var(--black); text-decoration: none; }
.contact-email a:hover { text-decoration: underline; }

.contact-feedback {
  font-size: 13px;
  margin-top: 14px;
  min-height: 20px;
}
.contact-feedback.success { color: var(--gray-600); }
.contact-feedback.error { color: #c44; }

/* ── Scroll-triggered fade-in ── */
.fade-in-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── About photos ── */
.about-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 680px;
  margin: 40px auto 48px;
  padding: 0 24px;
}

.about-photo-item {
  display: flex;
  flex-direction: column;
}

.about-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--gray-100);
  display: block;
}

.about-photo-caption {
  font-family: var(--font-body);
  font-size: 11px;
  font-style: italic;
  color: var(--gray-400);
  margin: 8px 0 0;
  line-height: 1.5;
}

/* ── Zoom controls ── */
.zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  overflow: hidden;
  touch-action: none;          /* PinchPan owns all gestures here */
  overscroll-behavior: contain;
}

.zoom-container.zoomed { cursor: grab; }
.zoom-container.zoomed.dragging { cursor: grabbing; }

.zoom-container img {
  transform-origin: 0 0;  /* PinchPan positions via translate+scale from the corner */
  will-change: transform;
  max-width: 100%;
  max-height: 100%;   /* fit fully inside the image area — never clip top/bottom */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ── Full-screen painting viewer (second tap from the modal) ── */
.fs-viewer {
  position: fixed;
  inset: 0;
  z-index: 4000;            /* above the modal overlay */
  background: rgba(14, 13, 12, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
  touch-action: none;
  overscroll-behavior: contain;
  cursor: zoom-in;
}

.fs-viewer.open {
  opacity: 1;
  visibility: visible;
}

.fs-viewer.zoomed { cursor: grab; }

.fs-viewer img {
  transform-origin: 0 0;
  will-change: transform;
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.fs-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #f5f0eb;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.fs-close:hover,
.fs-close:focus-visible {
  background: rgba(255, 255, 255, 0.24);
  outline: none;
}

.fs-hint {
  position: absolute;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(245, 240, 235, 0.9);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.fs-hint.visible { opacity: 1; }

/* Zoom hint — fades in when modal opens, fades out after 2s */
.zoom-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(80,80,80,0.7);
  background: rgba(255,255,255,0.85);
  padding: 4px 12px;
  border-radius: 20px;
  pointer-events: none;
  max-width: 88%;          /* long ES copy must wrap, not clip at the edges */
  width: max-content;
  white-space: normal;
  text-align: center;
  line-height: 1.6;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.zoom-hint.visible { opacity: 1; }

/* ── Filter toggle button + popover (replaces pill bar on desktop/tablet) ── */

/* Strip the frosted-glass container styles when in toggle mode — the toggle
   button itself carries the glass look; the bar is just a positioning anchor */
.canvas-filter-bar.filter-bar--toggle {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0;
  gap: 0;
  /* In toggle mode the bar holds only one button (+ its popover), so the
     horizontal-scroll the touch-mode CSS adds is unnecessary AND harmful:
     CSS makes overflow-y implicit when overflow-x is set, which clips the
     absolute-positioned .filter-popover above the bar. Force visible so the
     popover can render above the toggle on tablet + mobile too. */
  overflow: visible !important;
}

.filter-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 100px;
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.filter-toggle-btn:hover {
  box-shadow: 0 5px 22px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,1);
}
.filter-toggle-btn:active { transform: scale(0.96); }

.filter-icon {
  display: flex;
  align-items: center;
  width: 14px;
  height: 10px;
  flex-shrink: 0;
  color: var(--gray-400);
}

.filter-chevron {
  width: 10px;
  height: 6px;
  flex-shrink: 0;
  color: var(--gray-400);
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
.filter-toggle-btn[aria-expanded="true"] .filter-chevron {
  transform: rotate(180deg);
}

/* Popover panel — positions itself above the toggle button */
.filter-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.97);
  backdrop-filter: saturate(200%) blur(28px);
  -webkit-backdrop-filter: saturate(200%) blur(28px);
  border: 0.5px solid rgba(0,0,0,0.09);
  box-shadow: 0 8px 36px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 6px;
  min-width: 170px;
  max-height: 56vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.12) transparent;
  display: none;
  flex-direction: column;
  gap: 1px;
  z-index: 200;
}
.filter-popover.open {
  display: flex;
  animation: filterPopoverIn 0.2s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes filterPopoverIn {
  from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.97); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.filter-popover-item {
  display: block;
  width: 100%;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-align: left;
  color: var(--gray-600);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.13s ease, color 0.13s ease;
  white-space: nowrap;
}
.filter-popover-item:hover {
  background: var(--gray-100);
  color: var(--black);
}
.filter-popover-item.active {
  color: var(--black);
  font-weight: 500;
  background: var(--gray-100);
}

/* ── Focus-visible accessibility ── */
:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.filter-toggle-btn:focus-visible,
.filter-popover-item:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
.nav-link:focus-visible,
.btn-contact:focus-visible,
.modal-close:focus-visible,
.modal-prev:focus-visible,
.modal-next:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}