/*
Tooplate 2160 Exhibit Studio
https://www.tooplate.com/view/2160-exhibit-studio
Free HTML CSS Template
*/

/* ═══════════════════════════════════════════════════════════════
       DESIGN TOKENS — Edit these to restyle the entire template
       ═══════════════════════════════════════════════════════════════ */
    :root {

      /* ── Palette ─────────────────────────────────────────────── */
      --color-page-background:    #f9f8f6;   /* Off-white canvas                */
      --color-surface:            #ffffff;   /* Card / panel backgrounds        */
      --color-text-primary:       #111111;   /* Headlines, nav links            */
      --color-text-secondary:     #888888;   /* Sub-labels, meta info           */
      --color-text-tertiary:      #bbbbbb;   /* Dividers, faint labels          */
      --color-accent:             #111111;   /* Hover underlines, active states */
      --color-border-subtle:      #e8e6e1;   /* Hairline borders                */

      /* ── Caption Overlay ─────────────────────────────────────── */
      --color-caption-background: rgba(0, 0, 0, 0.72);  /* Semi-transparent bar */
      --color-caption-text:       #ffffff;
      --color-caption-meta:       rgba(255, 255, 255, 0.60);

      /* ── Lightbox (Lightroom Mode) ───────────────────────────── */
      --color-lightbox-backdrop:  rgba(8, 8, 8, 0.97);
      --color-lightbox-ui:        rgba(255, 255, 255, 0.85);
      --color-lightbox-ui-hover:  #ffffff;
      --color-lightbox-meta:      rgba(255, 255, 255, 0.50);

      /* ── Typography ──────────────────────────────────────────── */
      --font-family:              'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-size-wordmark:       0.8125rem;  /* NAV logo text             */
      --font-size-label:          0.6875rem;  /* Tags, meta, small labels  */
      --font-size-caption-title:  0.8125rem;  /* Overlay photo title       */
      --font-size-caption-meta:   0.6875rem;  /* Overlay photographer meta */
      --font-size-hero-title:     clamp(2.25rem, 6vw, 5rem);
      --font-size-hero-sub:       clamp(0.75rem, 1.5vw, 0.875rem);
      --font-size-footer:         0.6875rem;
      --letter-spacing-wide:      0.12em;
      --letter-spacing-wider:     0.18em;

      /* ── Page Spacing ────────────────────────────────────────── */
      --space-page-x:             clamp(1.5rem, 5vw, 6rem);  /* Left/right margin  */
      --space-page-top:           2rem;
      --space-nav-height:         4.5rem;
      --space-hero-top:           clamp(3rem, 6vw, 6rem);
      --space-hero-bottom:        clamp(2.5rem, 5vw, 5rem);
      --space-section-gap:        clamp(1rem, 2vw, 1.5rem);
      --space-footer-top:         clamp(3rem, 5vw, 5rem);

      /* ── Masonry Grid ────────────────────────────────────────── */
      --grid-column-gap:          clamp(0.625rem, 1.25vw, 1.125rem); /* Gap between columns */
      --grid-item-margin-bottom:  clamp(0.625rem, 1.25vw, 1.125rem); /* Gap between rows    */
      --grid-columns-wide:        4;   /* ≥1400px */
      --grid-columns-desktop:     3;   /* ≥900px  */
      --grid-columns-tablet:      2;   /* ≥560px  */
      --grid-columns-mobile:      1;   /* <560px  */
      --grid-border-radius:       2px;

      /* ── Transitions ─────────────────────────────────────────── */
      --transition-caption:       transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                                  opacity  0.38s cubic-bezier(0.4, 0, 0.2, 1);
      --transition-image-scale:   transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --transition-lightbox:      opacity 0.28s ease;
      --transition-lightbox-img:  opacity 0.22s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);

      /* ── Contact Form Colors ──────────────────────────────────── */
      --color-input-bg:           #ffffff;
      --color-input-border:       #d8d5cf;
      --color-input-focus:        #111111;
      --color-success-bg:         #f0faf4;
      --color-success-text:       #1a7a45;
      --color-success-border:     #b6e8cb;
      --color-error-text:         #c0392b;

    }

    /* ═══════════════════════════════════════════════════════════════
       RESET & BASE
       ═══════════════════════════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      font-family:          var(--font-family);
      font-size:            16px;
      background-color:     var(--color-page-background);
      color:                var(--color-text-primary);
      -webkit-font-smoothing: antialiased;
      text-rendering:       optimizeLegibility;
      scroll-behavior:      smooth;
    }

    body { min-height: 100vh; }

    img { display: block; width: 100%; height: auto; }

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

    /* ═══════════════════════════════════════════════════════════════
       NAVIGATION
       ═══════════════════════════════════════════════════════════════ */
    .site-nav {
      position:         sticky;
      top:              0;
      z-index:          200;
      background-color: var(--color-page-background);
      border-bottom:    1px solid var(--color-border-subtle);
    }

    /* ── Top bar (wordmark + hamburger / desktop links) ────────── */
    .nav__bar {
      display:          flex;
      align-items:      center;
      justify-content:  space-between;
      height:           var(--space-nav-height);
      padding:          0 var(--space-page-x);
    }

    .nav__wordmark {
      font-size:      var(--font-size-wordmark);
      font-weight:    600;
      letter-spacing: var(--letter-spacing-wide);
      text-transform: uppercase;
      color:          var(--color-text-primary);
    }

    .nav__wordmark span {
      font-weight:    300;
      color:          var(--color-text-secondary);
    }

    /* ── Desktop links (hidden on mobile) ───────────────────────── */
    .nav__links {
      display:        flex;
      align-items:    center;
      gap:            2rem;
      list-style:     none;
    }

    .nav__links a {
      font-size:      var(--font-size-label);
      font-weight:    500;
      letter-spacing: var(--letter-spacing-wide);
      text-transform: uppercase;
      color:          var(--color-text-secondary);
      transition:     color 0.2s ease;
    }

    .nav__links a:hover { color: var(--color-text-primary); }

    .nav__links .nav__link--active { color: var(--color-text-primary); }

    /* ── Hamburger button (hidden on desktop) ───────────────────── */
    .nav__hamburger {
      display:          none;
      flex-direction:   column;
      justify-content:  center;
      align-items:      center;
      gap:              5px;
      width:            2.5rem;
      height:           2.5rem;
      background:       transparent;
      border:           none;
      cursor:           pointer;
      padding:          0.25rem;
      border-radius:    4px;
      -webkit-tap-highlight-color: transparent;
    }

    .nav__hamburger-line {
      display:          block;
      width:            22px;
      height:           1.5px;
      background:       var(--color-text-primary);
      border-radius:    2px;
      transition:       transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
      transform-origin: center;
    }

    /* Animate to X when open */
    .nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(1) {
      transform: translateY(6.5px) rotate(45deg);
    }
    .nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(2) {
      opacity:  0;
      width:    0;
    }
    .nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(3) {
      transform: translateY(-6.5px) rotate(-45deg);
    }

    /* ── Mobile drawer ──────────────────────────────────────────── */
    .nav__mobile-menu {
      display:          none;           /* JS toggles .is-open */
      flex-direction:   column;
      padding:          0 var(--space-page-x) 1.5rem;
      border-top:       1px solid var(--color-border-subtle);
      background-color: var(--color-page-background);

      /* Slide-down animation */
      overflow:         hidden;
      max-height:       0;
      opacity:          0;
      transition:       max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity    0.25s ease,
                        padding    0.35s ease;
    }

    .nav__mobile-menu.is-open {
      max-height:       20rem;
      opacity:          1;
      padding-top:      1.25rem;
    }

    .nav__mobile-menu li {
      list-style: none;
      border-bottom: 1px solid var(--color-border-subtle);
    }

    .nav__mobile-menu li:last-child { border-bottom: none; }

    .nav__mobile-menu a {
      display:          block;
      padding:          0.9rem 0;
      font-size:        0.8125rem;
      font-weight:      500;
      letter-spacing:   var(--letter-spacing-wide);
      text-transform:   uppercase;
      color:            var(--color-text-secondary);
      transition:       color 0.2s ease;
    }

    .nav__mobile-menu a:hover,
    .nav__mobile-menu .nav__link--active { color: var(--color-text-primary); }

    /* ── Responsive switch ──────────────────────────────────────── */
    @media (max-width: 680px) {
      .nav__links     { display: none; }
      .nav__hamburger { display: flex; }
      .nav__mobile-menu { display: flex; }
    }

    /* ═══════════════════════════════════════════════════════════════
       HERO HEADER
       ═══════════════════════════════════════════════════════════════ */
    .site-hero {
      padding:         var(--space-hero-top) var(--space-page-x) var(--space-hero-bottom);
      border-bottom:   1px solid var(--color-border-subtle);
    }

    .hero__tag {
      display:         inline-block;
      font-size:       var(--font-size-label);
      font-weight:     500;
      letter-spacing:  var(--letter-spacing-wider);
      text-transform:  uppercase;
      color:           var(--color-text-secondary);
      margin-bottom:   1.5rem;
    }

    .hero__title {
      font-size:       var(--font-size-hero-title);
      font-weight:     300;
      line-height:     1.05;
      letter-spacing:  -0.02em;
      max-width:       14ch;
      margin-bottom:   1.75rem;
    }

    .hero__title strong { font-weight: 600; }

    .hero__meta {
      display:         flex;
      align-items:     center;
      gap:             1.5rem;
    }

    .hero__count {
      font-size:       var(--font-size-hero-sub);
      font-weight:     400;
      letter-spacing:  var(--letter-spacing-wide);
      color:           var(--color-text-secondary);
    }

    .hero__rule {
      flex:            1;
      max-width:       4rem;
      height:          1px;
      background:      var(--color-text-tertiary);
    }

    .hero__desc {
      font-size:       var(--font-size-hero-sub);
      color:           var(--color-text-secondary);
      max-width:       48ch;
      line-height:     1.6;
    }

    /* ═══════════════════════════════════════════════════════════════
       FILTER BAR  (optional — remove this section if not needed)
       ═══════════════════════════════════════════════════════════════ */
    .gallery-filter-wrap {
      border-bottom: 1px solid var(--color-border-subtle);
    }

    .gallery-filter {
      display:         flex;
      align-items:     center;
      flex-wrap:       wrap;       /* All buttons visible — no hidden scroll */
      gap:             0.375rem;
      padding:         0.75rem var(--space-page-x);
    }

    .filter__btn {
      /* 44px minimum tap target height for touch usability */
      min-height:      2.75rem;
      padding:         0 1rem;
      font-family:     var(--font-family);
      font-size:       var(--font-size-label);
      font-weight:     500;
      letter-spacing:  var(--letter-spacing-wide);
      text-transform:  uppercase;
      color:           var(--color-text-secondary);
      background:      transparent;
      border:          1px solid transparent;
      border-radius:   999px;
      cursor:          pointer;
      transition:      all 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      white-space:     nowrap;     /* Each label stays on one line */
    }

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

    .filter__btn.is-active {
      color:           var(--color-surface);
      background:      var(--color-text-primary);
      border-color:    var(--color-text-primary);
    }

    /* On touch devices: always show caption (no hover state exists) */
    @media (hover: none) {
      .gallery__caption {
        transform:   translateY(0);
        opacity:     1;
      }
    }

    /* ═══════════════════════════════════════════════════════════════
       MASONRY GALLERY  ← THE GRID
       CSS Columns masonry — no JavaScript required for the layout.
       ═══════════════════════════════════════════════════════════════ */
    .gallery {
      padding:         var(--space-section-gap) var(--space-page-x);

      /* CSS Columns masonry */
      column-count:    var(--grid-columns-desktop);
      column-gap:      var(--grid-column-gap);
    }

    /* ── Responsive column counts ─────────────────────────────── */
    @media (min-width: 1400px) {
      .gallery { column-count: var(--grid-columns-wide); }
    }

    @media (max-width: 900px) {
      .gallery { column-count: var(--grid-columns-tablet); }
    }

    @media (max-width: 560px) {
      .gallery { column-count: var(--grid-columns-mobile); }
    }

    /* ── Gallery Item ─────────────────────────────────────────── */
    .gallery__item {
      position:        relative;
      display:         block;          /* Prevents column-break artifacts */
      break-inside:    avoid;          /* Prevents images from splitting   */
      margin-bottom:   var(--grid-item-margin-bottom);
      border-radius:   var(--grid-border-radius);
      overflow:        hidden;
      cursor:          pointer;
      background:      var(--color-border-subtle);  /* Placeholder while image loads */
    }

    /* ── Image zoom on hover ──────────────────────────────────── */
    .gallery__image {
      width:           100%;
      height:          auto;
      display:         block;
      transition:      var(--transition-image-scale);
      will-change:     transform;
    }

    .gallery__item:hover .gallery__image {
      transform:       scale(1.035);
    }

    /* ── Caption Overlay ──────────────────────────────────────── */
    .gallery__caption {
      position:        absolute;
      bottom:          0;
      left:            0;
      right:           0;
      padding:         var(--space-section-gap) 1rem 0.875rem;

      /* Gradient for legibility even without the bar background */
      background:      linear-gradient(
                         to top,
                         var(--color-caption-background) 0%,
                         rgba(0,0,0,0) 100%
                       );

      /* ── Hidden by default; slides up on hover ── */
      transform:       translateY(100%);
      opacity:         0;
      transition:      var(--transition-caption);
    }

    .gallery__item:hover .gallery__caption {
      transform:       translateY(0);
      opacity:         1;
    }

    .gallery__caption-title {
      display:         block;
      font-size:       var(--font-size-caption-title);
      font-weight:     500;
      color:           var(--color-caption-text);
      margin-bottom:   0.25rem;
      white-space:     nowrap;
      overflow:        hidden;
      text-overflow:   ellipsis;
    }

    .gallery__caption-meta {
      display:         block;
      font-size:       var(--font-size-caption-meta);
      font-weight:     400;
      letter-spacing:  var(--letter-spacing-wide);
      color:           var(--color-caption-meta);
      text-transform:  uppercase;
    }

    /* ── Lightbox indicator icon ──────────────────────────────── */
    .gallery__expand-icon {
      position:        absolute;
      top:             0.75rem;
      right:           0.75rem;
      width:           1.75rem;
      height:          1.75rem;
      display:         flex;
      align-items:     center;
      justify-content: center;
      background:      rgba(0, 0, 0, 0.45);
      border-radius:   50%;
      opacity:         0;
      transition:      opacity 0.25s ease;
    }

    .gallery__expand-icon svg {
      width:  12px;
      height: 12px;
      stroke: #fff;
      fill:   none;
    }

    .gallery__item:hover .gallery__expand-icon { opacity: 1; }

    /* ═══════════════════════════════════════════════════════════════
       LIGHTBOX  —  "Lightroom Mode"
       Opened via JS when any gallery image is clicked.
       ═══════════════════════════════════════════════════════════════ */
    .lightbox {
      position:        fixed;
      inset:           0;
      z-index:         1000;
      display:         flex;
      flex-direction:  column;
      background:      var(--color-lightbox-backdrop);

      /* Hidden state */
      opacity:         0;
      pointer-events:  none;
      transition:      var(--transition-lightbox);
    }

    .lightbox.is-open {
      opacity:         1;
      pointer-events:  all;
    }

    /* ── Lightbox top bar ─────────────────────────────────────── */
    .lightbox__bar {
      display:         flex;
      align-items:     center;
      justify-content: space-between;
      padding:         1rem 1.5rem;
      flex-shrink:     0;
    }

    .lightbox__counter {
      font-size:       var(--font-size-label);
      font-weight:     400;
      letter-spacing:  var(--letter-spacing-wide);
      color:           var(--color-lightbox-meta);
    }

    .lightbox__close {
      width:           2.25rem;
      height:          2.25rem;
      display:         flex;
      align-items:     center;
      justify-content: center;
      background:      transparent;
      border:          none;
      border-radius:   50%;
      color:           var(--color-lightbox-ui);
      cursor:          pointer;
      transition:      background 0.2s ease, color 0.2s ease;
    }

    .lightbox__close:hover {
      background:      rgba(255,255,255,0.1);
      color:           var(--color-lightbox-ui-hover);
    }

    .lightbox__close svg {
      width:  18px;
      height: 18px;
      stroke: currentColor;
      fill:   none;
      stroke-width: 1.5;
    }

    /* ── Lightbox stage (image area) ──────────────────────────── */
    .lightbox__stage {
      flex:            1;
      display:         flex;
      align-items:     center;
      justify-content: center;
      position:        relative;
      padding:         0 5rem;
      overflow:        hidden;
    }

    @media (max-width: 560px) {
      .lightbox__stage { padding: 0 3rem; }
    }

    .lightbox__image {
      max-width:       100%;
      max-height:      100%;
      object-fit:      contain;
      border-radius:   1px;
      box-shadow:      0 30px 80px rgba(0,0,0,0.6);

      /* Transition when swapping images */
      opacity:         1;
      transform:       scale(1);
      transition:      var(--transition-lightbox-img);
    }

    .lightbox__image.is-loading {
      opacity:         0;
      transform:       scale(0.97);
    }

    /* ── Lightbox navigation arrows ───────────────────────────── */
    .lightbox__nav {
      position:        absolute;
      top:             50%;
      transform:       translateY(-50%);
      width:           3rem;
      height:          3rem;
      display:         flex;
      align-items:     center;
      justify-content: center;
      background:      rgba(255,255,255,0.08);
      border:          1px solid rgba(255,255,255,0.12);
      border-radius:   50%;
      color:           var(--color-lightbox-ui);
      cursor:          pointer;
      transition:      background 0.2s ease, color 0.2s ease;
    }

    .lightbox__nav:hover {
      background:      rgba(255,255,255,0.18);
      color:           var(--color-lightbox-ui-hover);
    }

    .lightbox__nav svg {
      width:  16px;
      height: 16px;
      stroke: currentColor;
      fill:   none;
      stroke-width: 1.75;
    }

    .lightbox__nav--prev { left:  1.25rem; }
    .lightbox__nav--next { right: 1.25rem; }

    /* ── Lightbox caption / bottom bar ───────────────────────── */
    .lightbox__caption {
      padding:         1.25rem 1.5rem 1.75rem;
      flex-shrink:     0;
      text-align:      center;
    }

    .lightbox__caption-title {
      font-size:       0.9375rem;
      font-weight:     500;
      color:           var(--color-lightbox-ui);
      margin-bottom:   0.3rem;
    }

    .lightbox__caption-meta {
      font-size:       var(--font-size-label);
      font-weight:     400;
      letter-spacing:  var(--letter-spacing-wide);
      text-transform:  uppercase;
      color:           var(--color-lightbox-meta);
    }

    /* ═══════════════════════════════════════════════════════════════
       FOOTER
       ═══════════════════════════════════════════════════════════════ */
    .site-footer {
      padding:         var(--space-footer-top) var(--space-page-x) 3rem;
      border-top:      1px solid var(--color-border-subtle);
      display:         flex;
      align-items:     flex-start;
      justify-content: space-between;
      gap:             2rem;
      flex-wrap:       wrap;
    }

    .footer__brand {
      font-size:       var(--font-size-footer);
      font-weight:     600;
      letter-spacing:  var(--letter-spacing-wide);
      text-transform:  uppercase;
      color:           var(--color-text-primary);
      margin-bottom:   0.5rem;
    }

    .footer__credit {
      font-size:       var(--font-size-footer);
      color:           var(--color-text-secondary);
      line-height:     1.7;
    }

    .footer__credit a {
      color:           var(--color-text-primary);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .footer__nav {
      display:         flex;
      gap:             1.5rem;
      list-style:      none;
    }

    .footer__nav a {
      font-size:       var(--font-size-footer);
      font-weight:     500;
      letter-spacing:  var(--letter-spacing-wide);
      text-transform:  uppercase;
      color:           var(--color-text-secondary);
      transition:      color 0.2s ease;
    }

    .footer__nav a:hover { color: var(--color-text-primary); }

    /* ═══════════════════════════════════════════════════════════════
       UTILITIES
       ═══════════════════════════════════════════════════════════════ */
    .visually-hidden {
      position:   absolute;
      width:      1px;
      height:     1px;
      overflow:   hidden;
      clip:       rect(0,0,0,0);
      white-space: nowrap;
    }

/* ═══════════════════════════════════════════════════════════════
       PAGE HERO
       ═══════════════════════════════════════════════════════════════ */
    .page-hero {
      padding:       var(--space-hero-top) var(--space-page-x) var(--space-hero-bottom);
      border-bottom: 1px solid var(--color-border-subtle);
    }

    .page-hero__tag {
      display:        inline-block;
      font-size:      var(--font-size-label);
      font-weight:    500;
      letter-spacing: var(--letter-spacing-wider);
      text-transform: uppercase;
      color:          var(--color-text-secondary);
      margin-bottom:  1.5rem;
    }

    .page-hero__title {
      font-size:      var(--font-size-hero-title);
      font-weight:    300;
      line-height:    1.05;
      letter-spacing: -0.02em;
      max-width:      14ch;
    }

    .page-hero__title strong { font-weight: 600; }

    /* ═══════════════════════════════════════════════════════════════
       ABOUT LAYOUT
       ═══════════════════════════════════════════════════════════════ */
    .about-body {
      padding: clamp(3rem, 6vw, 6rem) var(--space-page-x);
    }

    /* ── Two-column: portrait + bio ─────────────────────────────── */
    .about-intro {
      display:               grid;
      grid-template-columns: 1fr 1.6fr;
      gap:                   clamp(2rem, 5vw, 5rem);
      align-items:           start;
      margin-bottom:         clamp(3rem, 6vw, 6rem);
      padding-bottom:        clamp(3rem, 6vw, 6rem);
      border-bottom:         1px solid var(--color-border-subtle);
    }

    @media (max-width: 720px) {
      .about-intro {
        grid-template-columns: 1fr;
      }
    }

    /* ── Portrait image ─────────────────────────────────────────── */
    .about-portrait {
      position:      relative;
    }

    .about-portrait__img {
      width:         100%;
      aspect-ratio:  3 / 4;
      object-fit:    cover;
      border-radius: 2px;
      display:       block;
    }

    /* ── Bio text ───────────────────────────────────────────────── */
    .about-bio__label {
      font-size:      var(--font-size-label);
      font-weight:    500;
      letter-spacing: var(--letter-spacing-wider);
      text-transform: uppercase;
      color:          var(--color-text-secondary);
      margin-bottom:  1.5rem;
    }

    .about-bio__name {
      font-size:      clamp(1.5rem, 3vw, 2.25rem);
      font-weight:    300;
      letter-spacing: -0.02em;
      line-height:    1.15;
      margin-bottom:  0.25rem;
    }

    .about-bio__name strong { font-weight: 600; }

    .about-bio__title {
      font-size:      var(--font-size-label);
      font-weight:    500;
      letter-spacing: var(--letter-spacing-wide);
      text-transform: uppercase;
      color:          var(--color-text-secondary);
      margin-bottom:  2rem;
    }

    .about-bio__divider {
      width:          2.5rem;
      height:         1px;
      background:     var(--color-text-tertiary);
      margin-bottom:  2rem;
    }

    .about-bio__text {
      font-size:      1rem;
      font-weight:    300;
      line-height:    1.8;
      color:          var(--color-text-primary);
      margin-bottom:  1.5rem;
    }

    .about-bio__text:last-of-type { margin-bottom: 0; }

    /* ── Stats row ──────────────────────────────────────────────── */
    .about-stats {
      display:               grid;
      grid-template-columns: repeat(4, 1fr);
      gap:                   1px;
      background:            var(--color-border-subtle);
      border:                1px solid var(--color-border-subtle);
      margin-bottom:         clamp(3rem, 6vw, 6rem);
      padding-bottom:        clamp(3rem, 6vw, 6rem);
      border-bottom:         1px solid var(--color-border-subtle);
    }

    @media (max-width: 600px) {
      .about-stats { grid-template-columns: repeat(2, 1fr); }
    }

    .about-stat {
      background:  var(--color-page-background);
      padding:     2rem 1.5rem;
    }

    .about-stat__number {
      font-size:      clamp(2rem, 4vw, 3rem);
      font-weight:    300;
      letter-spacing: -0.03em;
      line-height:    1;
      margin-bottom:  0.5rem;
    }

    .about-stat__label {
      font-size:      var(--font-size-label);
      font-weight:    500;
      letter-spacing: var(--letter-spacing-wide);
      text-transform: uppercase;
      color:          var(--color-text-secondary);
    }

    /* ── Approach items (inside bio column) ────────────────────── */
    .about-approach__items {
      display:        flex;
      flex-direction: column;
      gap:            2rem;
      margin-top:     0.5rem;
    }

    .about-approach__item-number {
      font-size:      var(--font-size-label);
      font-weight:    500;
      letter-spacing: var(--letter-spacing-wide);
      color:          var(--color-text-tertiary);
      margin-bottom:  0.5rem;
    }

    .about-approach__item-title {
      font-size:      1.125rem;
      font-weight:    500;
      margin-bottom:  0.6rem;
    }

    .about-approach__item-text {
      font-size:      0.9375rem;
      font-weight:    300;
      line-height:    1.75;
      color:          var(--color-text-secondary);
    }

    /* ── CTA row ────────────────────────────────────────────────── */
    .about-cta {
      display:     flex;
      align-items: center;
      gap:         1.5rem;
      flex-wrap:   wrap;
    }

    .btn {
      display:         inline-flex;
      align-items:     center;
      gap:             0.5rem;
      height:          2.75rem;
      padding:         0 1.5rem;
      font-family:     var(--font-family);
      font-size:       var(--font-size-label);
      font-weight:     600;
      letter-spacing:  var(--letter-spacing-wide);
      text-transform:  uppercase;
      border-radius:   2px;
      cursor:          pointer;
      transition:      all 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .btn--primary {
      background:   var(--color-text-primary);
      color:        var(--color-surface);
      border:       1px solid var(--color-text-primary);
    }

    .btn--primary:hover {
      background:   transparent;
      color:        var(--color-text-primary);
    }

    .btn--ghost {
      background:   transparent;
      color:        var(--color-text-primary);
      border:       1px solid var(--color-border-subtle);
    }

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

/* ═══════════════════════════════════════════════════════════════
       CONTACT LAYOUT
       ═══════════════════════════════════════════════════════════════ */
    .contact-body {
      padding: clamp(3rem, 6vw, 6rem) var(--space-page-x);
    }

    /* ── Two columns: form (left) + info (right) ─────────────────── */
    .contact-grid {
      display:               grid;
      grid-template-columns: 1.6fr 1fr;
      gap:                   clamp(2.5rem, 6vw, 7rem);
      align-items:           start;
    }

    @media (max-width: 800px) {
      .contact-grid { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════════════════════════════════
       CONTACT FORM
       ═══════════════════════════════════════════════════════════════ */
    .contact-form__heading {
      font-size:      1.25rem;
      font-weight:    500;
      letter-spacing: -0.01em;
      margin-bottom:  0.5rem;
    }

    .contact-form__subheading {
      font-size:      0.9375rem;
      font-weight:    300;
      color:          var(--color-text-secondary);
      line-height:    1.6;
      margin-bottom:  2.5rem;
    }

    /* ── Field groups ───────────────────────────────────────────── */
    .form-row {
      display:               grid;
      grid-template-columns: 1fr 1fr;
      gap:                   1rem;
      margin-bottom:         1rem;
    }

    @media (max-width: 480px) {
      .form-row { grid-template-columns: 1fr; }
    }

    .form-field {
      display:        flex;
      flex-direction: column;
      gap:            0.4rem;
      margin-bottom:  1rem;
    }

    .form-field:last-child { margin-bottom: 0; }

    .form-label {
      font-size:      var(--font-size-label);
      font-weight:    600;
      letter-spacing: var(--letter-spacing-wide);
      text-transform: uppercase;
      color:          var(--color-text-secondary);
    }

    .form-label .required {
      color:      var(--color-error-text);
      margin-left: 2px;
    }

    /* ── Inputs & Textarea ──────────────────────────────────────── */
    .form-input,
    .form-textarea,
    .form-select {
      width:          100%;
      /* Minimum 44px height on mobile */
      min-height:     2.75rem;
      padding:        0.625rem 0.875rem;
      font-family:    var(--font-family);
      font-size:      0.9375rem;
      font-weight:    300;
      color:          var(--color-text-primary);
      background:     var(--color-input-bg);
      border:         1px solid var(--color-input-border);
      border-radius:  2px;
      appearance:     none;
      -webkit-appearance: none;
      outline:        none;
      transition:     border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .form-input::placeholder,
    .form-textarea::placeholder { color: var(--color-text-tertiary); }

    .form-input:focus,
    .form-textarea:focus,
    .form-select:focus {
      border-color: var(--color-input-focus);
      box-shadow:   0 0 0 3px rgba(17,17,17,0.07);
    }

    .form-textarea {
      resize:      vertical;
      min-height:  10rem;
      line-height: 1.65;
    }

    /* Custom select arrow */
    .form-select-wrap {
      position: relative;
    }

    .form-select-wrap::after {
      content:        '';
      position:       absolute;
      right:          0.9rem;
      top:            50%;
      transform:      translateY(-50%);
      width:          10px;
      height:         6px;
      background:     var(--color-text-secondary);
      clip-path:      polygon(0 0, 100% 0, 50% 100%);
      pointer-events: none;
    }

    /* ── Submit button ──────────────────────────────────────────── */
    .form-submit {
      margin-top:   1.5rem;
      display:      flex;
      align-items:  center;
      gap:          1rem;
      flex-wrap:    wrap;
    }

    .btn-submit {
      display:         inline-flex;
      align-items:     center;
      gap:             0.5rem;
      height:          2.75rem;
      padding:         0 1.75rem;
      font-family:     var(--font-family);
      font-size:       var(--font-size-label);
      font-weight:     600;
      letter-spacing:  var(--letter-spacing-wide);
      text-transform:  uppercase;
      color:           var(--color-surface);
      background:      var(--color-text-primary);
      border:          1px solid var(--color-text-primary);
      border-radius:   2px;
      cursor:          pointer;
      transition:      all 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .btn-submit:hover {
      background:   transparent;
      color:        var(--color-text-primary);
    }

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

    .form-note {
      font-size:   var(--font-size-label);
      color:       var(--color-text-secondary);
      line-height: 1.6;
    }

    /* ── Success / Error messages ───────────────────────────────── */
    .form-message {
      display:       none;
      padding:       1rem 1.25rem;
      border-radius: 2px;
      font-size:     0.875rem;
      font-weight:   400;
      line-height:   1.5;
      margin-top:    1rem;
    }

    .form-message.is-success {
      display:          block;
      background:       var(--color-success-bg);
      color:            var(--color-success-text);
      border:           1px solid var(--color-success-border);
    }

    .form-message.is-error {
      display:          block;
      background:       #fdf0ef;
      color:            var(--color-error-text);
      border:           1px solid #f5c6c3;
    }

    /* ── Field error state ──────────────────────────────────────── */
    .form-input.is-invalid,
    .form-textarea.is-invalid {
      border-color: var(--color-error-text);
    }

    .field-error {
      display:     none;
      font-size:   var(--font-size-label);
      color:       var(--color-error-text);
      margin-top:  0.2rem;
    }

    .field-error.is-visible { display: block; }

    /* ═══════════════════════════════════════════════════════════════
       CONTACT SIDEBAR INFO
       ═══════════════════════════════════════════════════════════════ */
    .contact-info {
      position:   sticky;
      top:        calc(var(--space-nav-height) + 2rem);
    }

    @media (max-width: 800px) {
      .contact-info { position: static; }
    }

    .contact-info__section {
      margin-bottom:  2.5rem;
      padding-bottom: 2.5rem;
      border-bottom:  1px solid var(--color-border-subtle);
    }

    .contact-info__section:last-child {
      margin-bottom:  0;
      padding-bottom: 0;
      border-bottom:  none;
    }

    .contact-info__label {
      font-size:      var(--font-size-label);
      font-weight:    600;
      letter-spacing: var(--letter-spacing-wider);
      text-transform: uppercase;
      color:          var(--color-text-secondary);
      margin-bottom:  1rem;
    }

    .contact-info__value {
      font-size:   1rem;
      font-weight: 300;
      line-height: 1.6;
    }

    .contact-info__link {
      display:        inline-block;
      font-size:      0.9375rem;
      font-weight:    400;
      color:          var(--color-text-primary);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-color: var(--color-text-tertiary);
      transition:     text-decoration-color 0.2s ease;
      margin-bottom:  0.375rem;
    }

    .contact-info__link:hover {
      text-decoration-color: var(--color-text-primary);
    }

    /* ── Social links ───────────────────────────────────────────── */
    .social-links {
      display:        flex;
      flex-direction: column;
      gap:            0.5rem;
    }

    .social-link {
      display:        flex;
      align-items:    center;
      gap:            0.625rem;
      font-size:      0.875rem;
      font-weight:    400;
      color:          var(--color-text-secondary);
      transition:     color 0.2s ease;
    }

    .social-link:hover { color: var(--color-text-primary); }

    .social-link__platform {
      font-size:      var(--font-size-label);
      font-weight:    600;
      letter-spacing: var(--letter-spacing-wide);
      text-transform: uppercase;
      color:          var(--color-text-tertiary);
      min-width:      4rem;
    }

    /* ── Availability badge ─────────────────────────────────────── */
    .availability {
      display:      inline-flex;
      align-items:  center;
      gap:          0.5rem;
      font-size:    var(--font-size-label);
      font-weight:  500;
      letter-spacing: var(--letter-spacing-wide);
      text-transform: uppercase;
    }

    .availability__dot {
      width:         7px;
      height:        7px;
      border-radius: 50%;
      background:    #2ecc71;
      flex-shrink:   0;
      /* Pulse animation */
      animation:     pulse 2.4s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1;   transform: scale(1); }
      50%      { opacity: 0.5; transform: scale(1.3); }
    }

/* ================================================================
   MACDUFF GALLERY CUSTOM LAYER
   v1 — built from Tooplate Exhibit Studio
   ================================================================ */
:root {
  --color-page-background: #f6f5f2;
  --color-surface: #fbfaf8;
  --color-text-primary: #171715;
  --color-text-secondary: #77756f;
  --color-text-tertiary: #aaa79f;
  --color-accent: #171715;
  --color-border-subtle: #dedbd4;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-display: Georgia, 'Times New Roman', serif;
  --grid-columns-mobile: 2;
  --grid-border-radius: 0;
}

.nav__wordmark { letter-spacing: .18em; font-weight: 500; }
.nav__wordmark span { color: var(--color-text-primary); font-weight: 300; }
.hero__title, .page-hero__title { font-family: var(--font-family-display); font-weight: 400; letter-spacing: -.025em; }
.hero__title strong, .page-hero__title strong { font-weight: 400; font-style: italic; }
.site-hero { border-bottom: 0; }
.gallery-filter-wrap { display:none; }
.gallery { padding-top: 0; }
.gallery__item { border-radius: 0; }
.gallery__item:hover .gallery__image { transform: scale(1.015); }
.gallery__caption { padding: 3rem 1rem .9rem; }


/* Homepage exhibition portfolio */
.homepage-works {
  padding-top: 0;
}
.homepage-works__intro {
  padding-bottom: 0;
}
.homepage-works__gallery {
  padding-top: 2.5rem;
}
.homepage-works__footer-link {
  padding: 0 var(--space-page-x) var(--space-section-gap);
  text-align: right;
}
@media (max-width: 560px) {
  .homepage-works__gallery {
    padding-top: 1.5rem;
  }
  .homepage-works__footer-link {
    padding-top: .25rem;
    text-align: left;
  }
}

/* Keep artwork dominant; captions remain understated. */
.gallery__caption-title { font-family: var(--font-family-display); font-size: .95rem; font-weight: 400; }
.gallery__caption-meta { letter-spacing: .11em; }

/* Artist / exhibition index cards. */
.collection-grid {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(1rem,2vw,2rem);
  padding: 0 var(--space-page-x) clamp(4rem,7vw,7rem);
}
.collection-card { display:block; }
.collection-card img { aspect-ratio: 4 / 5; object-fit:cover; margin-bottom:1rem; transition:opacity .3s ease, transform .4s ease; }
.collection-card:hover img { opacity:.94; transform:scale(1.01); }
.collection-card__title { font-family:var(--font-family-display); font-size:1.35rem; font-weight:400; margin-bottom:.35rem; }
.collection-card__meta { font-size:var(--font-size-label); text-transform:uppercase; letter-spacing:var(--letter-spacing-wide); color:var(--color-text-secondary); }

/* Artist directory: portrait-led, deliberately non-hierarchical. The order is shuffled on load. */
.artist-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,4rem) clamp(1rem,2.5vw,2.5rem);
  padding:0 var(--space-page-x) clamp(4rem,7vw,7rem);
}
.artist-card { display:block; min-width:0; }
.artist-card__image {
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:4 / 5;
  background:#ebe9e3;
}
.artist-card__image img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease, filter .35s ease;
}
.artist-card__hover {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem; text-align:center;
  background:rgba(20,19,17,.58); color:#fff;
  font-size:.72rem; line-height:1.6; letter-spacing:.12em; text-transform:uppercase;
  opacity:0; transition:opacity .3s ease;
}
.artist-card__title {
  font-family:var(--font-family-display); font-size:1.3rem; font-weight:400;
  margin:1rem 0 .3rem;
}
.artist-card__meta {
  display:none; margin:0; color:var(--color-text-secondary);
  font-size:.68rem; letter-spacing:.12em; line-height:1.6; text-transform:uppercase;
}
.artist-card:hover .artist-card__image img,
.artist-card:focus-visible .artist-card__image img { transform:scale(1.015); filter:brightness(.72); }
.artist-card:hover .artist-card__hover,
.artist-card:focus-visible .artist-card__hover { opacity:1; }
.artist-card:focus-visible { outline:2px solid var(--color-accent); outline-offset:5px; }
@media (max-width:700px) {
  .artist-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1rem; }
  .artist-card__meta { display:block; }
  .artist-card__hover { display:none; }
  .artist-card__title { font-size:1.1rem; margin-top:.75rem; }
}
@media (max-width:420px) {
  .artist-grid { grid-template-columns:1fr; }
}

.artist-intro, .exhibition-intro { padding: clamp(3rem,6vw,6rem) var(--space-page-x) 2rem; max-width: 68rem; }

/* --- ARTIST PROFILE AVATAR STYLES --- */
.artist-intro__avatar {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.artist-avatar__img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* ------------------------------------- */

.artist-intro__name, .exhibition-intro__name { font-family:var(--font-family-display); font-size:clamp(2rem,5vw,4rem); font-weight:400; margin-bottom:.75rem; }
.artist-intro__meta, .exhibition-intro__meta { color:var(--color-text-secondary); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; }
.artist-intro__bio, .exhibition-intro__text { max-width:58ch; color:#5f5d58; line-height:1.8; margin-top:1.5rem; font-size:.98rem; }

.visit-options { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.5rem; }
.visit-option { border:1px solid var(--color-border-subtle); padding:1.25rem 1.25rem 1.1rem; transition:background .25s ease,border-color .25s ease; }
.visit-option:hover { background:#efede8; border-color:#ccc8bf; }
.visit-option__label { display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:.4rem; }
.visit-option__detail { color:var(--color-text-secondary); font-size:.85rem; }

@media (max-width: 800px) {
  .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
  .visit-options { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  :root { --space-page-x: 1.15rem; }
  .nav__bar { height:4rem; }
  .hero__title { font-size:clamp(2.25rem,12vw,3.5rem); }
  .gallery { column-gap:.65rem; }
  .gallery__item { margin-bottom:.65rem; }
  .gallery__caption { transform:none; opacity:1; padding:.55rem .15rem .25rem; position:relative; background:none; }
  .gallery__caption-title { color:var(--color-text-primary); font-size:.86rem; }
  .gallery__caption-meta { color:var(--color-text-secondary); font-size:.58rem; }
  .gallery__item:hover .gallery__image { transform:none; }
  .collection-grid { padding-left:var(--space-page-x); padding-right:var(--space-page-x); }
}

/* ── MacDuff current exhibition feature ───────────────────────── */
.current-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 5rem) var(--space-page-x) clamp(4rem, 8vw, 7rem);
  border-bottom: 1px solid var(--color-border-subtle);
}
.current-feature__poster {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}
.current-feature__eyebrow {
  margin: 0 0 1.25rem;
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.current-feature__title {
  margin: 0 0 .35rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.5rem, 5vw, 5.2rem);
  line-height: .98;
  font-weight: 400;
  letter-spacing: -.025em;
}
.current-feature__chinese {
  margin: 0 0 1.75rem;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  letter-spacing: .08em;
}
.current-feature__artist {
  margin: 0 0 1.5rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}
.current-feature__date {
  margin: 0 0 2rem;
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.current-feature__rule {
  width: 3.5rem;
  height: 1px;
  margin: 0 0 1.75rem;
  background: var(--color-text-primary);
}
.current-feature__lead {
  margin: 0 0 1.5rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.5;
}
.current-feature__copy {
  margin: 0 0 1rem;
  max-width: 54ch;
  color: var(--color-text-secondary);
  line-height: 1.8;
}
.current-feature__copy--zh { line-height: 1.95; }
.current-feature__link {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: .75rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--color-text-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.current-feature__link:hover {
  background: var(--color-text-primary);
  color: var(--color-page-background);
}
.exhibition-note {
  padding: clamp(3rem, 7vw, 6rem) var(--space-page-x);
  max-width: 980px;
}
.exhibition-note__label {
  margin: 0 0 1rem;
  font-size: var(--font-size-label);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.exhibition-note__title {
  margin: 0 0 1.5rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
}
.exhibition-note p {
  margin: 0 0 1.15rem;
  max-width: 76ch;
  color: var(--color-text-secondary);
  line-height: 1.85;
}
.exhibition-note p.zh { line-height: 2; }
.exhibition-note__divider {
  width: 100%;
  height: 1px;
  margin: 2.5rem 0;
  background: var(--color-border-subtle);
}
@media (max-width: 800px) {
  .current-feature {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-top: 1.25rem;
  }
  .current-feature__poster { order: 0; }
  .current-feature__copy-block { order: 1; }
}


/* MacDuff navigation: logo + language selector */
.nav__logo {
  display: block;
  width: 132px;
  flex: 0 0 auto;
}
.nav__logo img { width: 100%; height: auto; }
.nav__right {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color .2s ease;
}
.language-switch:hover { color: var(--color-text-primary); }
.language-switch svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.2; }
@media (max-width: 680px) {
  .nav__bar { gap: 1rem; }
  .nav__logo { width: 112px; }
  .nav__right { gap: .7rem; }
  .language-switch { font-size: .58rem; }
}


/* ── Artwork protection ─────────────────────────────────────── */
.protected-artwork { position: relative; }
.image-protection {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  background: transparent url("images/protection.gif") repeat;
  pointer-events: none;
  cursor: inherit;
}
.lightbox__stage .image-protection {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.lightbox__stage .lightbox__nav { z-index: 4; }
.lightbox__image { -webkit-user-drag: none; user-select: none; }

/* ── Pema Rinzin detail-crop portfolio ──────────────────────── */
.pema-gallery .gallery__item--detail {
  aspect-ratio: 4 / 3;
}
.pema-gallery .gallery__item--detail .gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--crop-x, 50%) var(--crop-y, 50%);
  transform: scale(1.16);
}
.lightbox__stage.lightbox__stage--detail {
  position: relative;
}
.lightbox__stage.lightbox__stage--detail .lightbox__image {
  width: min(82vw, 1100px);
  height: min(76vh, 760px);
  object-fit: cover;
  object-position: var(--crop-x, 50%) var(--crop-y, 50%);
  transform: scale(1.12);
}
@media (max-width: 680px) {
  .lightbox__stage.lightbox__stage--detail .lightbox__image {
    width: 88vw;
    height: 68vh;
  }
}