/* ============================================================
   style.css — raigon-mmxi
   Main stylesheet. All visual styles live here.
   Sections: Reset → Variables → Base → Nav → Home →
             Gallery → Modal → Vault → Arquive → Utilities
============================================================ */


/* ── GLOBAL DRIFTING BACKGROUND ── */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #0a0a0a;
}

.site-bg-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.75;
  animation: bgDrift 55s ease-in-out infinite;
}

/* Desktop shows high-res landscape, mobile shows vertical texture */
.site-bg-img--mobile { display: none; }
.site-bg-img--desktop { display: block; }

@media (max-width: 768px) {
  .site-bg-img--desktop { display: none; }
  .site-bg-img--mobile  { display: block; }
}

@keyframes bgDrift {
  0%   { transform: translate(-50%, -50%) scale(1.0)  translate(0%,   0%);   }
  20%  { transform: translate(-50%, -50%) scale(1.06) translate(-6%,  -3%);  }
  40%  { transform: translate(-50%, -50%) scale(1.04) translate(4%,   -5%);  }
  60%  { transform: translate(-50%, -50%) scale(1.08) translate(6%,   2%);   }
  80%  { transform: translate(-50%, -50%) scale(1.03) translate(-3%,  5%);   }
  100% { transform: translate(-50%, -50%) scale(1.0)  translate(0%,   0%);   }
}

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

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }

 
/* ── CSS CUSTOM PROPERTIES (design tokens) ── */
:root {
    --bg:         #0a0907;
    --surface:    #1c1916;
    --border:     rgba(196, 98, 45, 0.18);
    --text:       #e8e4dc;
    --muted:      rgba(232, 228, 220, 0.4);
    --accent:     #c4622d;
    --blue-mid:   #1a2a3a;
    --green:      #4a7c6a;
  }

  /* ── BASE ── */
html,
body {
  height: 100%;
  background: transparent;
  color: var(--text);
  font-family: 'Syne', sans-serif;
  overflow: hidden;
}

/* Custom scrollbar — thin and minimal */
::-webkit-scrollbar        { width: 2px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--border); border-radius: 2px; }

/* Film grain overlay — subtle texture on all pages */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px;
}

/* ── PAGE TRANSITIONS ── */
/* Each section is stacked full-screen; JS toggles .active to show/hide */
.page {
    position: fixed;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 100px;
  }
   
  .page.active {
    opacity: 1;
    pointer-events: all;
  }

  /* ============================================================
   NAVIGATION — bottom pill bar
============================================================ */
 
nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 28px;
    pointer-events: none;
  }
   
  .nav-arrow {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 8px;
    letter-spacing: 2px;
    opacity: 0.5;
  }

  /* Frosted glass pill container */
.nav-pills {
    display: flex;
    gap: 4px;
    background: rgba(13, 21, 32, 0.18);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(50px);
    border: 1px solid rgba(255, 255, 255, 0.233);
    border-radius: 100px;
    padding: 5px;
    pointer-events: all;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }

  /* Individual navigation pill button */
.pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: 100px;
    border: none;
    background: transparent;
    color: rgba(232, 228, 220, 0.8);
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }

  /* Active and hover states for navigation pills */
.pill:hover { color: var(--text); }
.pill.active { color: var(--text); }

/* Active state colour per section */
.pill[data-page="home"].active    { background: rgba(232, 228, 220, 0.1); }
.pill[data-page="vault"].active   { background: rgba(74, 124, 106, 0.25); color: #7ecbb5; }
.pill[data-page="arquive"].active { background: rgba(26, 42, 58, 0.6);    color: #7aa8d0; }


/* Four-dot grid icon inside the Home pill */
.pill-dots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    width: 14px;
    height: 14px;
  }
   
  .pill-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    display: block;
  }

  /* ============================================================
   HOME SECTION
============================================================ */
 
#home {
    background: transparent;
    overflow: hidden;
  }

  /* Header bar: logo left, year right */
.home-header {
    padding: 44px 28px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Fixed global logo stamp — visible on all pages */
.global-logo {
    position: fixed;
    top: 28px;
    left: 28px;
    z-index: 10000;
    opacity: 0.75;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }
  .global-logo:hover, .global-logo:active { opacity: 1; }

.global-logo::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(8, 8, 8, 0.74) 36%, rgba(8, 8, 8, 0.32) 56%, transparent 72%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    mask-image: radial-gradient(circle, black 60%, transparent 90%);
    -webkit-mask-image: radial-gradient(circle, black 60%, transparent 90%);
    z-index: -1;
  }

  /* Square wrapper that holds both the rotating ring and the centre icon */
.logo-ring-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
  }

  /* Rotating SVG ring — animation defined in @keyframes rotateSlow */
.logo-ring-svg {
    position: absolute;
    inset: 0;
    animation: rotateSlow 18s linear infinite;
  }

  /* Text styling applied inside the SVG (SVG presentation attributes moved to CSS) */
.logo-ring-text {
    fill: rgba(232, 228, 220, 0.75);
    font-family: 'Syne', sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 2.5px;
  }

  /* Centred wrapper for the icon SVG */
.logo-icon-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* The R lettermark icon */
.logo-icon-svg {
    width: 46px;
    height: 46px;
    fill: #ffffff;
    transform: none;
  }

  /* Glassmorphism overlay clipped to the R shape itself — only used
     on mobile, where the rotating ring/halo is removed. */
.logo-glass-r {
    display: none;
  }

  /* Year label — top right of header */
.home-year {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 2px;
  }

  /* Gallery canvas area — parallax layers injected here by script.js */
.home-scene {
    position: relative;
    width: 100%;
    height: calc(100dvh - 60px);
    overflow: hidden;
    cursor: grab;
  }
   
  .home-scene:active { cursor: grabbing; }

  /* Left/right edge vignette — depth-of-field lens blur */
.home-vignette {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
  }

.home-vignette::before,
.home-vignette::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18%;
  }

.home-vignette::before {
    left: 0;
    background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
  }

.home-vignette::after {
    right: 0;
    background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
  }

  /* Subtle accent dot at the centre of the scene */
.home-center-mark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 40px 15px rgba(196, 98, 45, 0.06);
  }
   
  /* Placeholder floating artwork tiles (shown before JS loads real images) */
.artwork-float {
    position: absolute;
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.4s ease;
  }
   
  .artwork-float:hover {
    transform: translateY(-6px) scale(1.03) !important;
  }
  
  /* Inset border overlay on each placeholder tile */
.artwork-float::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.07);
    z-index: 2;
    pointer-events: none;
    border-radius: 2px;
  }

  .art-placeholder {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  /* Individual placeholder sizes and positions */
.float-1 { width: 110px; height: 140px; top: 8%;    left: 5%;    animation: fl1 7s   ease-in-out infinite; }
.float-2 { width: 85px;  height: 110px; top: 5%;    left: 35%;   animation: fl2 9s   ease-in-out infinite; }
.float-3 { width: 130px; height: 100px; top: 3%;    right: 8%;   animation: fl3 8s   ease-in-out infinite; }
.float-4 { width: 95px;  height: 120px; top: 38%;   left: 2%;    animation: fl1 11s  ease-in-out infinite reverse; }
.float-5 { width: 150px; height: 120px; top: 30%;   left: 28%;   animation: fl2 10s  ease-in-out infinite; }
.float-6 { width: 80px;  height: 105px; top: 35%;   right: 3%;   animation: fl3 8.5s ease-in-out infinite; }
.float-7 { width: 100px; height: 130px; bottom: 15%; left: 12%;  animation: fl1 9s   ease-in-out infinite; }
.float-8 { width: 120px; height: 90px;  bottom: 12%; right: 15%; animation: fl2 7.5s ease-in-out infinite reverse; }

/* Placeholder background gradients — warm tones to suggest artwork */
.ap-1 { background: linear-gradient(135deg, #1a1a18, #2d2820, #1a1714); }
.ap-1::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 40% 60%, rgba(180,140,80,.3), transparent 60%); }
 
.ap-2 { background: linear-gradient(160deg, #0f1a1a, #1a2d2a, #0a1210); }
.ap-2::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 60% 40%, rgba(80,160,140,.2), transparent 55%); }
 
.ap-3 { background: linear-gradient(110deg, #1a1218, #2a1a22, #120e14); }
.ap-3::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(180,100,140,.25), transparent 60%); }
 
.ap-4 { background: linear-gradient(170deg, #181410, #2a2218, #161210); }
.ap-4::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 70%, rgba(200,160,80,.2), transparent 50%); }
 
.ap-5 { background: linear-gradient(140deg, #0e0e1a, #181828, #0a0a12); }
.ap-5::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 65% 35%, rgba(100,100,220,.2), transparent 55%); }
 
.ap-6 { background: linear-gradient(120deg, #1a1410, #281e14, #141008); }
.ap-6::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 45% 55%, rgba(220,170,90,.2), transparent 55%); }
 
.ap-7 { background: linear-gradient(155deg, #100e18, #1c1828, #0c0a10); }
.ap-7::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 55% 45%, rgba(140,110,200,.22), transparent 58%); }
 
.ap-8 { background: linear-gradient(125deg, #101614, #182420, #0c1210); }
.ap-8::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 40% 60%, rgba(90,180,150,.2), transparent 55%); }

/* ============================================================
   GALLERY — parallax layers (injected by script.js)
============================================================ */
 
/* Each row of artwork cards */
.layer {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 593px;
    padding: 0 100px;
    will-change: transform;
  }
   
  .layer-1 { top: 15%;  height: 18%; }
  .layer-2 { top: 48%; height: 16%; }
  .layer-3 { top: 78%; height: 14%; }

  /* Individual artwork card */
.artwork-card {
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
    height: 100%;
    transition: transform 0.35s ease, opacity 0.35s ease, filter 0.35s ease, box-shadow 0.35s ease;
  }

  /* Hover state — overrides the JS-applied blur/opacity/scale */
.artwork-card:hover {
    opacity: 1 !important;
    filter: blur(0px) !important;
    transform: scale(1.3) !important;
    box-shadow: 0 12px 48px rgba(180, 110, 40, 0.3) !important;
    z-index: 20 !important;
  }
   
  .artwork-card img {
    height: 100%;
    width: auto;
    display: block;
    border-radius: 8px;
    pointer-events: none;
  }

  /* Drag-to-scroll hint label */
.scroll-hint {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(91, 90, 87, 0.8);
    pointer-events: none;
    opacity: 0;
    animation: hintFade 9s ease 1s forwards;
  }

  /* Scroll position indicator bar — draggable, pushes the gallery when scrubbed */
.scroll-bar {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 2px;
    background: rgba(232, 228, 220, 0.1);
    border-radius: 4px;
    cursor: grab;
    touch-action: none;
  }

  /* Enlarged invisible hit area so the thin bar stays easy to grab — extends
     upward only, so it doesn't intrude into the fixed nav bar below it */
.scroll-bar::before {
    content: '';
    position: absolute;
    inset: -20px 0 -2px 0;
  }

.scroll-bar--dragging {
    cursor: grabbing;
  }

  /* Moving thumb inside the scroll bar */
.scroll-thumb {
    position: absolute;
    top: -1px;
    left: 0;
    width: 30px;
    height: 4px;
    background: rgba(111, 110, 110, 0.55);
    border-radius: 2px;
    transition: background 0.2s ease;
  }

.scroll-bar--dragging .scroll-thumb {
    background: rgba(80, 80, 79, 0.85);
  }

  /* Play/pause toggle for the auto-scroll, anchored left of the scroll bar */
.scroll-playpause {
    position: absolute;
    bottom: 42px;
    left: 28px;
    width: 20px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: rgba(232, 228, 220, 0.55);
    cursor: pointer;
    opacity: 0.7;
    transition: color 0.2s ease, opacity 0.2s ease;
  }

.scroll-playpause:hover {
    color: rgba(232, 228, 220, 0.85);
  }

.fs-btn {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 20px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: rgba(232, 228, 220, 0.55);
  cursor: pointer;
  opacity: 0.7;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.fs-btn:hover {
  color: rgba(232, 228, 220, 0.85);
  opacity: 1;
}

.collection-overlay .fs-btn {
  z-index: 2;
}

  /* Home gallery's bar sits left of center, beside the play/pause button.
     It's appended to #home (not .home-scene) so bottom is measured
     against the full page box and can align with the nav bar's middle
     without being clipped by the scene's overflow. */
.scroll-bar.home-scroll-bar {
    left: 58px;
    bottom: 49px;
    transform: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
  }

  /* Dim the home gallery's controls until hovered, focused, or dragged —
     also applies to the collection overlay's matching controls */
.scroll-playpause:hover,
.scroll-playpause:active,
.scroll-bar.home-scroll-bar:hover,
.scroll-bar.home-scroll-bar:active,
.scroll-bar.home-scroll-bar.scroll-bar--dragging,
.scroll-bar.collection-overlay-scrollbar:hover,
.scroll-bar.collection-overlay-scrollbar:active,
.scroll-bar.collection-overlay-scrollbar.scroll-bar--dragging {
    opacity: 1;
  }

  /* ============================================================
   MODAL — full-screen artwork viewer
============================================================ */
 
/* Modal backdrop — structure lives in index.html, toggled by script.js */
.artwork-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(4, 3, 10, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 60px 60px 100px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .artwork-modal.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Close button — top-right corner */
.modal-close {
    position: absolute;
    top: 28px;
    right: 40px;
    background: none;
    border: none;
    color: rgba(232, 228, 220, 1);
    font-size: 15px;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
    z-index: 10;
  }
  .modal-close:hover { color: rgba(232, 228, 220, 0.65); }

  /* Edge chevron navigation */
.modal-chevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(232, 228, 220, 1);
    font-size: 38px;
    cursor: pointer;
    padding: 20px 14px;
    transition: color 0.2s ease;
    z-index: 10;
    line-height: 1;
  }
  .modal-chevron:hover { color: rgba(232, 228, 220, 0.6); }
  .modal-chevron--left  { left: 16px; }
  .modal-chevron--right { right: 16px; }

  /* Artwork image inside the modal */
.modal-image {
    max-width: 45vw;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 10px;
    transform: scale(0.94);
    transition: transform 0.5s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    flex-shrink: 0;
  }
  .artwork-modal.open .modal-image {
    transform: scale(1);
  }


  /* Image counter — hidden on desktop, shown on mobile below the image */
.modal-counter-img { display: none; }

  /* Side panel container — clips the sliding panels */
.modal-side {
    width: 220px;
    flex-shrink: 0;
    overflow: hidden;
    align-self: center;
  }

  /* Horizontal slider — both panels side by side */
.modal-panels {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .modal-side.inquire-open .modal-panels {
    transform: translateX(-220px);
  }

  /* Info panel */
.modal-info-panel {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Syne', sans-serif;
    padding-top: 6px
  }

  /* Inquire panel */
.modal-inquire-panel {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Syne', sans-serif;
  }

  .modal-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight:500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(232, 228, 220, 0.8);
    margin-bottom: 12px;
  }

  .modal-meta-sep {
    opacity: 0.4;
    letter-spacing: 0;
  }

  .modal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-style: italic;
    font-weight: 300;
    color: rgba(232, 228, 220, 0.95);
    margin-bottom: 8px;
    line-height: 1.2;
  }

  .modal-year {
    font-size: 11px;
    letter-spacing: 3px;
    color: rgba(196, 98, 45, 0.65);
  }

  .modal-divider {
    width: 32px;
    height: 1px;
    background: rgba(196, 98, 45, 0.8);
    margin-bottom: 24px;
  }

  .modal-description {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(232, 228, 220, 0.8);
    font-style: italic;
  }

  .modal-counter {
    margin-top: 32px;
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(232, 228, 220, 0.8);
    text-transform: uppercase;
  }

  /* Inquire link below description */
.modal-inquire-link {
    margin-top: 28px;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(232, 228, 220, 0.6);
    cursor: pointer;
    background: none;
    border: 1px solid rgba(232, 228, 220, 0.2);
    border-radius: 100px;
    padding: 10px 0;
    width: 100%;
    transition: color 0.2s ease, border-color 0.2s ease;
    text-align: center;
  }
  .modal-inquire-link:hover {
    color: #7aa8d0;
    border-color: rgba(122, 168, 208, 0.5);
  }

  /* Inquire panel — back button */
.modal-inquire-back {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(232, 228, 220, 0.8);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-bottom: 28px;
    transition: color 0.2s ease;
    text-align: left;
  }
  .modal-inquire-back:hover { color: rgba(232, 228, 220, 0.85); }

.modal-inquire-heading {
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(232, 228, 220, 0.6);
    margin-bottom: 6px;
  }

.modal-inquire-artwork-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-style: italic;
    font-weight: 300;
    color: rgba(232, 228, 220, 0.95);
    margin-bottom: 24px;
    line-height: 1.2;
  }

.modal-inquire-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

.modal-inquire-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

.modal-inquire-label {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(232, 228, 220, 0.8);
  }

.modal-inquire-input {
    background: rgba(232, 228, 220, 0.05);
    border: 1px solid rgba(232, 228, 220, 0.15);
    border-radius: 100px;
    color: rgba(232, 228, 220, 0.9);
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    padding: 8px 14px;
    outline: none;
    transition: border-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
  }

.modal-inquire-textarea {
    background: rgba(232, 228, 220, 0.05);
    border: 1px solid rgba(232, 228, 220, 0.15);
    border-radius: 14px;
    color: rgba(232, 228, 220, 0.9);
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    padding: 10px 14px;
    outline: none;
    transition: border-color 0.2s ease;
    resize: none;
    width: 100%;
    box-sizing: border-box;
  }

  .modal-inquire-input:focus,
  .modal-inquire-textarea:focus {
    border-color: rgba(232, 228, 220, 0.4);
  }
  .modal-inquire-input::placeholder,
  .modal-inquire-textarea::placeholder {
    color: rgba(232, 228, 220, 0.35);
  }

.modal-inquire-submit {
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(232, 228, 220, 0.65);
    background: none;
    border: 1px solid rgba(232, 228, 220, 0.2);
    border-radius: 100px;
    padding: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
  }
  .modal-inquire-submit:hover {
    color: rgba(232, 228, 220, 0.95);
    border-color: rgba(232, 228, 220, 0.5);
  }

/* ============================================================
   VAULT SECTION
============================================================ */
 
#vault {
    background: transparent;
    padding: 0;
    overflow: hidden;
  }
   
  .vault-scene {
    position: relative;
    width: 100%;
    height: calc(100dvh - 60px);
    overflow: hidden;
  }

  /* Section title — sits above the canvas */
.vault-title-overlay {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
    z-index: 2;
  }

  .vault-title-overlay span {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-style: italic;
    font-weight: 300;
    letter-spacing: normal;
    text-transform: none;
    color: rgba(232, 228, 220, 0.92);
  }

  /* Horizontal row of collection cards */
.vault-symbols {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: safe center;
    gap: 28px;
    padding: 180px 5% 120px;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

.vault-symbols::-webkit-scrollbar {
    display: none;
  }

  /* Outer rounded card — image frame + footer info */
.collection-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(66%, 306px, calc(100dvh - 250px));
    flex-shrink: 0;
    scroll-snap-align: center;
    cursor: pointer;
    background: rgba(232, 228, 220, 0.03);
    border: 1px solid rgba(232, 228, 220, 0.2);
    border-radius: 24px;
    overflow: hidden;
    text-align: left;
    transition: transform 0.4s ease, border-color 0.3s ease, background 0.3s ease;
  }

  .collection-card:hover {
    transform: translateY(-4px);
    border-color: rgba(196, 98, 45, 0.3);
    background: rgba(232, 228, 220, 0.05);
  }

  /* Image frame — padding-bottom hack forces a square regardless of flex sizing */
.collection-card-frame {
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    background: rgba(0, 0, 0, 0.5);
  }

.collection-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.3s, transform 0.4s ease;
  }

  .collection-card:hover .collection-card-img {
    opacity: 1;
    transform: scale(1.04);
  }

  /* Title — sits in the footer above the meta lines */
.collection-card-title {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.2;
    color: rgba(232, 228, 220, 0.95);
    margin-bottom: 6px;
  }

  /* Footer — solid block, meta on the left, action pill on the right */
.collection-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    background: var(--bg);
  }

.collection-card-meta {
    display: flex;
    flex-direction: column;
  }

.collection-card-line {
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: lowercase;
    color: rgba(232, 228, 220, 0.8);
  }

.collection-card-line + .collection-card-line {
    margin-top: 10px;
  }

  /* "Open" action pill */
.collection-card-open {
    flex-shrink: 0;
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: lowercase;
    color: var(--text);
    border: 1px solid rgba(232, 228, 220, 0.2);
    border-radius: 100px;
    padding: 12px 26px;
    transition: border-color 0.3s ease, background 0.3s ease;
  }

  .collection-card:hover .collection-card-open {
    border-color: rgba(196, 98, 45, 0.4);
    background: rgba(196, 98, 45, 0.08);
  }

  /* Coming soon card — visible but not interactive, aside from the
     "add to calendar" link in its footer */
.collection-card--soon {
    cursor: default;
    pointer-events: none;
  }

  .collection-card--soon .collection-card-img { opacity: 0.85; }

  .collection-card--soon .collection-card-soon-copy {
    pointer-events: auto;
  }

  .collection-card-soon-copy:hover {
    border-color: rgba(196, 98, 45, 0.4);
    background: rgba(196, 98, 45, 0.08);
  }

  /* Feedback message area — shown on collection load or error */
.vault-feedback {
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(232, 228, 220, 0.8);
    text-align: center;
    pointer-events: none;
  }

  /* ============================================================
   ARQUIVE SECTION
============================================================ */

#arquive {
  background: transparent;
  overflow-y: auto;
}

.arquive-wrap {
  max-width: 825px;
  margin: 0 auto;
  padding: 170px 38px 120px 34px;
}


  /* Vertical card stack — bio, next event, and contact, each one
     sized to its own content. */
.arquive-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.arquive-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(232, 228, 220, 0.2);
  border-radius: 12px;
  padding: 24px;
}

.arquive-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 300;
  color: rgba(232, 228, 220, 0.95);
  margin-bottom: 14px;
}

.arquive-card-subtitle {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 14px;
}

.social-link {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

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

/* Shared pill button — "More" on the bio card, "Send" on the contact form */
.arquive-pill-btn {
  align-self: flex-start;
  margin-top: 20px;
  background: none;
  border: 1px solid rgba(232, 228, 220, 0.2);
  border-radius: 100px;
  padding: 9px 26px;
  color: rgba(232, 228, 220, 0.6);
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}

.arquive-pill-btn:hover {
  border-color: rgba(232, 228, 220, 0.5);
  color: var(--text);
}

/* Bio card — text on the left, portrait photo on the right.
   Expands in place (height animated via JS) to a stacked layout
   with the photo on top, revealing the extra bio text below. */
.arquive-card--bio {
  position: relative;
  display: flex;
  /* min-height, not height — a fixed height clipped (via overflow)
     any extra line the bio text wrapped onto at widths between the
     breakpoints below, hiding the "More" button. min-height lets the
     card grow with its content at any viewport width while keeping
     the same default size when the text fits in three lines. */
  min-height: 251px;
  padding: 0;
  overflow: hidden;
  transition: height 0.45s ease;
}

.arquive-card--bio.expanded {
  flex-direction: column;
}

.arquive-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-right: 1px solid var(--border);
}

.arquive-card--bio.expanded .arquive-card-body {
  border-right: none;
}

.arquive-card-photo {
  flex: 0 0 38%;
}

.arquive-card--bio.expanded .arquive-card-photo {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  order: -1;
}

.bio-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* Close button — overlaid on the photo, only shown while expanded */
.bio-card-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(10, 9, 7, 0.5);
  border: none;
  border-radius: 50%;
  color: rgba(232, 228, 220, 0.9);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.bio-card-close:hover {
  background: rgba(10, 9, 7, 0.75);
  color: var(--text);
}

.arquive-card--bio.expanded .bio-card-close {
  display: flex;
}

/* Second paragraph + social links — hidden until expanded */
.bio-text-extra {
  display: none;
}

.arquive-card--bio.expanded .bio-text-extra {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.bio-text {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(232, 228, 220, 0.8);
}

/* ── AI ASSISTANCE: Event styles below (.event-block through .events-error)
   were developed with the help of Claude Sonnet 4.6 (Anthropic).
   Commit: 75c4905 — "Add dynamic events column to Arquive section" ── */

/* Next event card — a single compact row */
.arquive-card--events .event-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.event-block-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-title {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: rgba(232, 228, 220, 0.85);
}

.event-meta {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
}

.event-copy-btn {
  flex-shrink: 0;
  font-family: 'Syne', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: lowercase;
  color: var(--muted);
  border: 1px solid rgba(232, 228, 220, 0.15);
  border-radius: 100px;
  padding: 8px 16px;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.event-copy-btn:hover {
  border-color: rgba(196, 98, 45, 0.4);
  background: rgba(196, 98, 45, 0.08);
  color: var(--text);
}

/* Contact form — pill-shaped fields stacked vertically */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cf-input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 13px 20px;
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}

.cf-input::placeholder { color: rgba(232, 228, 220, 0.2); }
.cf-input:focus { border-color: rgba(232, 228, 220, 0.25); }

.cf-textarea {
  resize: none;
  height: 90px;
  border-radius: 20px;
}

/* Footer — brand, contact details, Instagram link (Arquive only) */
.arquive-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 32px;
  padding-bottom: 24px;
}

.arquive-footer-info {
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.arquive-footer-brand {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.arquive-footer-instagram {
  display: flex;
  color: var(--muted);
  transition: color 0.2s;
}

.arquive-footer-instagram:hover {
  color: var(--text);
}

.bio-modal-links {
  display: flex;
  gap: 16px;
  padding-top: 8px;
}

  /* ============================================================
   KEYFRAME ANIMATIONS
============================================================ */
  
/* logo animation */

  @keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* Floating artwork tile animations — three variants for natural variation */
@keyframes fl1 {
    0%, 100% { transform: translateY(0px)   rotate(-1deg); }
    50%       { transform: translateY(-12px) rotate(0.5deg); }
  }

  @keyframes fl2 {
    0%, 100% { transform: translateY(0px)  rotate(1deg); }
    50%       { transform: translateY(-8px) rotate(-0.5deg); }
  }

  @keyframes fl3 {
    0%, 100% { transform: translateY(-4px) rotate(0deg); }
    50%       { transform: translateY(8px)  rotate(-1deg); }
  }

  /* Artwork card entrance animation when home section activates */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }


/* Staggered entrance for each floating tile */
.page.active .artwork-float                  { animation: fadeUp 0.5s ease forwards; }
.page.active .artwork-float:nth-child(2)     { animation-delay: 0.05s; }
.page.active .artwork-float:nth-child(3)     { animation-delay: 0.10s; }
.page.active .artwork-float:nth-child(4)     { animation-delay: 0.15s; }
.page.active .artwork-float:nth-child(5)     { animation-delay: 0.20s; }
.page.active .artwork-float:nth-child(6)     { animation-delay: 0.25s; }
.page.active .artwork-float:nth-child(7)     { animation-delay: 0.30s; }
.page.active .artwork-float:nth-child(8)     { animation-delay: 0.35s; }

/* Gallery card entrance (applied via JS on build) */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Scroll hint label fade in and out */
@keyframes hintFade {
    0%, 100% { opacity: 0; }
    20%, 80%  { opacity: 1; }
  }

/* ============================================================
   FORM VALIDATION STATES
   Error styles are shared between both forms.
   Success states are form-specific:
     - .contact-success-overlay  → centered overlay (Arquive form)
     - .modal-inquire-success     → inline panel state (inquire form)
============================================================ */

/* Inline error message rendered after an invalid field */
/* ── AI ASSISTANCE: Copy active state below was developed
   with the help of Claude Sonnet 4.6 (Anthropic). ── */
/* ── COPY ACTIVE STATE — button lights up on successful copy ── */
.copy-active {
  background: rgba(196, 98, 45, 0.22) !important;
  border-color: rgba(196, 98, 45, 0.75) !important;
  color: var(--text) !important;
}

.field-error {
  display: block;
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(220, 90, 70, 0.85);
  margin-top: 5px;
}

/* Border highlight on the invalid input or textarea */
.field-invalid {
  border-color: rgba(220, 90, 70, 0.45) !important;
}

/* ── Contact form success overlay ───────────────────────────────────── */
/* Full-screen overlay — user closes it via the × button */
.contact-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(4, 3, 10, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.contact-success-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.contact-success-panel {
  position: relative;
  background: rgba(14, 14, 18, 0.98);
  border: 1px solid rgba(232, 228, 220, 0.08);
  border-radius: 16px;
  padding: 56px 72px 52px;
  text-align: center;
  max-width: 360px;
  width: 90%;
  transform: translateY(10px);
  transition: transform 0.4s ease;
}
.contact-success-overlay.open .contact-success-panel {
  transform: translateY(0);
}

.contact-success-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: rgba(232, 228, 220, 0.22);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 4px;
}
.contact-success-close:hover { color: rgba(232, 228, 220, 0.7); }

.contact-success-line {
  width: 24px;
  height: 1px;
  background: rgba(232, 228, 220, 0.15);
  margin: 0 auto 28px;
}

.contact-success-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px;
  font-style: italic;
  font-weight: 300;
  color: rgba(232, 228, 220, 0.92);
  margin-bottom: 18px;
  line-height: 1;
}

.contact-success-message {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 2.2;
  color: rgba(232, 228, 220, 0.8);
}

/* ── Inquire panel success state ─────────────────────────────────────── */
/* Hidden by default; shown when .modal-inquire-panel has .inquiry-sent */
.modal-inquire-success {
  display: none;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.modal-inquire-panel.inquiry-sent .modal-inquire-heading,
.modal-inquire-panel.inquiry-sent .modal-inquire-artwork-name,
.modal-inquire-panel.inquiry-sent .modal-inquire-form {
  display: none;
}

.modal-inquire-panel.inquiry-sent .modal-inquire-success {
  display: flex;
}

.modal-inquire-success-label {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(122, 168, 208, 0.6);
  margin-bottom: 12px;
}

.modal-inquire-success-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-style: italic;
  font-weight: 300;
  color: rgba(232, 228, 220, 0.92);
  margin-bottom: 14px;
  line-height: 1;
}

.modal-inquire-success-text {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 2.2;
  color: rgba(232, 228, 220, 0.8);
}

/* ============================================================
   COLLECTION OVERLAY
   Full-screen image grid opened by the Vault collection buttons.
   HTML is built dynamically by script.js (not in index.html).

   AI ASSISTANCE: This section was developed with the help of
   Claude Sonnet 4.6 (Anthropic).
   Commit: 1fef314 — "Add collection overlay grid to Vault section"
============================================================ */

/* Backdrop */
.collection-overlay {
  position: fixed;
  inset: 0;
  /* Below the nav (z-index: 100) so the menu stays reachable while a
     collection is open, on every breakpoint. */
  z-index: 90;
  background: rgba(6, 8, 16, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  /* Shrinks the centered grid's stage from below, lifting the artwork
     rows away from the nav bar at the bottom of the screen. */
  padding-bottom: 10%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  overflow: hidden;
}

.collection-overlay.open {
  opacity: 1;
  pointer-events: auto;
}


/* Header bar */
.collection-overlay-header {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  padding: 36px 48px 24px;
  flex-shrink: 0;
}

.collection-overlay-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-style: italic;
  font-weight: 300;
  color: rgba(232, 228, 220, 0.92);
}

.collection-overlay-count {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(196, 98, 45, 1);
}

.collection-overlay-close {
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: rgba(232, 228, 220, 0.22);
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s ease;
  /* Nav stays visible and clickable while a collection is open
     (z-index: 90) and doubles as the way back, so the close
     button is redundant at every breakpoint. */
  display: none;
}
.collection-overlay-close:hover { color: rgba(232, 228, 220, 0.7); }

/* Scrollable grid — one card per column, alternating top/bottom row,
   with wide gaps so each piece reads as its own moment. */
.collection-overlay-grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  flex: none;
  height: 472px;
  margin: auto 0;
  gap: 115px;
  overflow: visible;
  touch-action: none;
  padding: 0 14%;
  will-change: transform;
}

/* Individual card — width is left to size itself to the artwork's
   own aspect ratio (see .collection-overlay-card-img), so each
   piece keeps its original proportions instead of a forced crop. */
.collection-overlay-card {
  position: relative;
  flex: none;
  width: auto;
  min-width: 120px;
  height: 173px;
  background: #060810;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
}

/* Drop every other card into the bottom row, zig-zagging the sequence.
   Class assigned in JS (not nth-child) so the pattern stays consistent
   across the tripled copies used for infinite scroll. */
.collection-overlay-card--stagger {
  margin-top: 299px;
}

/* Accord has fewer works — extra vertical breathing room between rows. */
.collection-overlay--accord .collection-overlay-grid {
  height: 532px;
}

.collection-overlay--accord .collection-overlay-card--stagger {
  margin-top: 359px;
}

/* Position indicator — same placement and style as the home gallery's
   bar, sitting left of center beside the play/pause button. The overlay
   is appended to .collection-overlay (full viewport, like #home), so the
   same left/bottom offsets land in the same spot. */
.collection-overlay-scrollbar {
  display: block;
  left: 58px;
  bottom: 49px;
  transform: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  /* Sit above the edge-blur layer (z-index: 1) so it stays sharp. */
  z-index: 2;
}

.collection-overlay .scroll-playpause {
  /* Sit above the edge-blur layer (z-index: 1) so it stays sharp. */
  z-index: 2;
}

.collection-overlay-card-img {
  width: auto;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.collection-overlay-card:hover .collection-overlay-card-img {
  transform: scale(1.1);
}

/* Square source images include a wall/frame mockup around the
   artwork — zoom in to crop that border out so every thumbnail
   reads as a flush portrait crop. */
.collection-overlay-card-img--zoom {
  transform: scale(1.8);
}

.collection-overlay-card:hover .collection-overlay-card-img--zoom {
  transform: scale(1.98);
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
============================================================ */

/* --- Tablet (768px) --- */
@media (max-width: 768px) {
  .fs-btn { display: none; }

  .logo-ring-wrap {
    width: 80px;
    height: 80px;
  }

  /* Below 768px the row layout (image + 220px side panel + edge
     chevrons) doesn't fit without the side panel sliding under the
     right chevron — switch to a stacked, swipe-driven layout. */
  .artwork-modal {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 110px 20px 80px;
    overflow-y: auto;
  }

  /* Close button — full opacity and larger tap target */
  .modal-close {
    opacity: 1;
    color: rgba(232, 228, 220, 0.85);
    font-size: 20px;
    top: 20px;
    right: 24px;
  }

  /* Hide left/right arrows — replaced by dots */
  .modal-chevron {
    display: none;
  }

  /* Image: natural aspect ratio — no forced square, artwork displays as intended */
  .modal-image {
    width: auto;
    max-width: 88vw;
    height: auto;
    max-height: 52vh;
    object-fit: contain;
  }

  /* Hide the info-panel counter — shown below image instead */
  .modal-counter { display: none; }

  /* Counter below image — close to what it describes */
  .modal-counter-img {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(232, 228, 220, 0.9);
    text-align: center;
  }

  /* INQUIRE as a real button */
  .modal-inquire-link {
    margin-top: 20px;
    border: 1px solid rgba(232, 228, 220, 0.8);
    border-radius: 100px;
    padding: 14px 0;
    width: 100%;
    text-align: center;
    color: rgba(232, 228, 220, 0.85);
    font-size: 11px;
  }

  .modal-side {
    width: 100%;
    overflow: visible;
  }

  /* Hide back button — the × button handles going back */
  .modal-inquire-back {
    display: none;
  }

  /* Cancel the desktop horizontal slide */
  .modal-side.inquire-open .modal-panels {
    transform: none;
  }

  /* Grid overlap — both panels share one cell, container sizes to the taller one */
  .modal-panels {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  /* Inset to roughly match the image's max-width (88vw) above, so the
     text block reads as aligned with the artwork rather than edge-to-edge. */
  .modal-info-panel {
    grid-area: 1 / 1;
    width: 88%;
    margin: 0 auto;
    transition: opacity 0.35s ease;
    justify-content: flex-start;
  }

  .modal-inquire-panel {
    grid-area: 1 / 1;
    position: static;
    width: 88%;
    margin: 0 auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    justify-content: flex-start;
  }

  .modal-side.inquire-open .modal-info-panel {
    opacity: 0;
    pointer-events: none;
  }

  .modal-side.inquire-open .modal-inquire-panel {
    opacity: 1;
    pointer-events: all;
  }

  .modal-inquire-success {
    margin-top: 24px;
  }

  .collection-overlay-grid {
    height: 328px;
    gap: 94px;
    padding: 0 120px;
  }

  .collection-overlay-card {
    width: auto;
    height: 117px;
  }

  .collection-overlay-card--stagger {
    margin-top: 211px;
  }

  /* Accord artworks read ~25% larger than other collections on
     small screens — every dimension in the zigzag scales together
     (×1.25) so the layout rhythm stays proportional. */
  .collection-overlay--accord .collection-overlay-grid {
    height: 410px;
    gap: 117.5px;
  }

  .collection-overlay--accord .collection-overlay-card {
    height: 146px;
  }

  .collection-overlay--accord .collection-overlay-card--stagger {
    margin-top: 264px;
  }

  /* Below 768px .nav-pills sits closer to center while the timeline
     stays at left:58px — once the two get close enough the progress
     bar runs underneath the pill bar. Move the timeline to its own
     centred row above the nav, matching the phone layout. */
  .scroll-bar.home-scroll-bar,
  .scroll-bar.collection-overlay-scrollbar {
    left: 50%;
    bottom: 105px;
    width: calc((100% - 40px) * 0.9);
    transform: translateX(-50%);
  }

  /* Clean play/pause icon, no container, aligned with the nav bar on the left */
  .scroll-playpause {
    width: 50px;
    height: 50px;
    bottom: 28px;
    left: 20px;
    background: none;
    border: none;
    border-radius: 0;
  }

  .scroll-playpause svg {
    width: 20px;
    height: 20px;
  }

  /* Nav — almost full width, pills stretched evenly, shifted right to
     leave room for the play/pause button (toggled via body.nav-shift). */
  .nav-pills {
    width: calc(100% - 102px);
    justify-content: space-between;
  }

  .pill {
    flex: 1;
    justify-content: center;
  }

  body.nav-shift .nav-pills {
    margin-left: 62px;
  }

  /* iOS Safari auto-zooms when a focused input/textarea has font-size below
     16px — bump these to 16px on touch breakpoints to prevent that zoom. */
  .modal-inquire-input,
  .modal-inquire-textarea,
  .cf-input {
    font-size: 16px;
  }

  /* 404 frame row — scale down so the whole composition fits the viewport. */
  .gallery-wall {
    gap: 14px;
    margin-bottom: 32px;
  }

  .plant-wrap {
    margin-left: 4px;
  }

  .frame-svg { width: 88px; }
  .plant-svg { width: 48px; }
}

/* --- Mobile (480px) --- */
@media (max-width: 480px) {
  .global-logo {
    top: 10px;
    left: 16px;
    opacity: 0.3;
  }

  /* Drop the rotating typography ring on mobile — keep a small,
     static "R" mark for identity without the visual noise. No
     outer halo container; the glass treatment is applied to the
     R glyph itself below. */
  .global-logo::before {
    display: none;
  }

  /* Glass layer clipped to the exact R shape (via #logo-r-clip):
     light blur + translucent white + thin bright edge, no dark
     shadow, so the mark reads as frosted glass on any background. */
  .logo-glass-r {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
    clip-path: url(#logo-r-clip);
    -webkit-clip-path: url(#logo-r-clip);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.6);
    pointer-events: none;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  /* Tap/hover feedback — the R turns fully white and stronger */
  .global-logo:hover .logo-glass-r,
  .global-logo:active .logo-glass-r {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 1);
  }

  .logo-ring-wrap {
    width: 44px;
    height: 44px;
  }

  .logo-ring-svg {
    display: none;
  }

  .logo-icon-svg {
    width: 32px;
    height: 32px;
  }

  .pill {
    padding: 12px 12px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2.2px;
  }

  .arquive-wrap {
    padding: 100px 40px 60px;
  }

  .home-scene {
    touch-action: none;
  }

  /* Stack collection cards vertically, each spanning the available width
     as a rectangular (landscape) frame rather than a small square */
  .vault-symbols {
    padding: 160px 24px 120px;
  }

  .collection-card {
    width: 72%;
  }

  .collection-card-footer {
    padding: 14px 18px;
    gap: 12px;
  }

  .collection-card-title {
    margin-bottom: 4px;
  }

  .collection-card-open {
    font-size: 12px;
    padding: 10px 20px;
  }

  .collection-overlay-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    flex: none;
    height: 421px;
    margin: auto 0;
    gap: 108px;
    padding: 0 60px;
    overflow: visible;
    touch-action: none;
  }

  .collection-overlay-card {
    flex: none;
    width: auto;
    height: 108px;
  }

  .collection-overlay-card--stagger {
    margin-top: 214px;
  }

  /* Accord artworks read ~25% larger than other collections on
     small screens — every dimension in the zigzag scales together
     (×1.25) so the layout rhythm stays proportional. */
  .collection-overlay--accord .collection-overlay-grid {
    height: 526px;
    gap: 135px;
  }

  .collection-overlay--accord .collection-overlay-card {
    height: 135px;
  }

  .collection-overlay--accord .collection-overlay-card--stagger {
    margin-top: 268px;
  }

  .collection-overlay-scrollbar {
    display: block;
  }

  .collection-overlay-header {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 64px 30px 20px;
  }

  .collection-overlay-title {
    text-align: center;
  }

  .collection-overlay-count {
    color: rgba(196, 98, 45, 1);
  }

  /* Gallery layers — cards 20% bigger, 30% less lateral gap */
  .layer-1 { top: 8%; height: 22%; }
  .layer-2 { top: 42%;   height: 19%; }
  .layer-3 { top: 72%;   height: 17%; }

  .layer {
    gap: 350px;
    padding: 0 40px;
  }

  /* Lift the scroll-bar clear of the taller mobile nav bar, and thicken it slightly */
  .scroll-bar {
    bottom: 45px;
    height: 3px;
  }

  .scroll-thumb {
    height: 4px;
  }

  /* Vault carousel bar — sized relative to the nav pill bar
     (~20% narrower), so it never reads wider than the nav itself. */
  #vault-scroll-bar {
    width: calc((100% - 102px) * 0.8);
  }

}

/* --- Narrow phones (320px) --- */
@media (max-width: 340px) {
  /* On very narrow screens the bio card grows tall enough that the
     portrait photo reads as stretched/flattened. Tighten the text
     column's rhythm and give it a bit more width so the card sits
     ~20% shorter overall. */
  .arquive-card--bio .arquive-card-photo {
    flex: 0 0 35%;
  }

  .arquive-card--bio .arquive-card-body {
    padding: 20px;
  }

  .arquive-card--bio .arquive-card-title {
    margin-bottom: 12px;
  }

  .arquive-card--bio .arquive-card-subtitle {
    margin-bottom: 12px;
  }

  .arquive-card--bio .bio-text {
    font-size: 11.5px;
    line-height: 1.7;
  }

  .arquive-card--bio .arquive-pill-btn {
    margin-top: 16px;
  }
}

/* --- Very tall windows (manual resize) ---
   .collection-overlay-grid has a fixed height and is vertically
   centred, so on unusually tall viewports it floats far above the
   bottom-anchored position indicator. Pull the indicator up toward
   the grid so the two stay visually connected. */
@media (min-height: 1100px) {
  .collection-overlay .scroll-bar.collection-overlay-scrollbar {
    bottom: 30vh;
  }

  .collection-overlay .scroll-playpause {
    bottom: calc(30vh - 7px);
  }
}

/* ============================================================
   ARQUIVE — EVENTS
   Loading / error states for the dynamically rendered event block.
============================================================ */

/* Loading state */
.events-loading {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(232, 228, 220, 0.8);
  padding: 16px 0 8px;
}

/* Error state */
.events-error {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 2;
  color: rgba(220, 90, 70, 0.55);
  padding: 12px 0;
}

/* ============================================================
   ACCORD ACCESS GATE
============================================================ */
.access-gate {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(4, 3, 10, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.access-gate.open {
  opacity: 1;
  pointer-events: auto;
}

.access-gate-box {
  position: relative;
  background: rgba(18, 14, 9, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(232, 228, 220, 0.15);
  border-radius: 12px;
  padding: 52px 48px 44px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  box-shadow:
    inset 0 1px 0 rgba(232, 228, 220, 0.1),
    0 32px 80px rgba(0, 0, 0, 0.7);
}

.access-gate-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
  line-height: 1;
}

.access-gate-close:hover { color: var(--text); }

.access-gate-label {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(196, 98, 45, 0.65);
  margin-bottom: 16px;
}

.access-gate-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 4px;
  color: var(--text);
  margin-bottom: 40px;
}

.access-gate-input-state {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.access-gate-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 0;
  outline: none;
  transition: border-color 0.2s;
}

.access-gate-input::placeholder {
  color: rgba(232, 228, 220, 0.9);
  letter-spacing: 3px;
}

.access-gate-input:focus { border-bottom-color: rgba(232, 228, 220, 0.4); }

/* This must come after the base .access-gate-input rule above —
   CSS resolves equal-specificity ties by source order, so placing
   it earlier in the file let the base 11px silently win on mobile,
   defeating the iOS Safari auto-zoom fix. */
@media (max-width: 768px) {
  .access-gate-input {
    font-size: 16px;
  }

  .access-gate-input::placeholder {
    font-size: 11px;
  }
}

.access-gate-error {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(220, 90, 70, 0.7);
  min-height: 16px;
}

.access-gate-submit {
  margin-top: 8px;
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(232, 228, 220, 0.8);
  background: rgba(232, 228, 220, 0.04);
  border: 1px solid rgba(232, 228, 220, 0.2);
  border-radius: 100px;
  padding: 10px 26px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.access-gate-submit:hover {
  color: var(--text);
  border-color: rgba(232, 228, 220, 0.25);
  background: rgba(232, 228, 220, 0.08);
}

.access-gate-success {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

.access-gate-success.hidden,
.access-gate-input-state.hidden {
  display: none;
}

.access-gate-msg {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.8;
  color: rgba(232, 228, 220, 0.8);
  margin-bottom: 20px;
}

.access-gate-welcome {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  font-weight: 600;
  font-style: normal;
  color: var(--text);
  margin-bottom: 36px;
  letter-spacing: 1px;
}

.access-gate-enter {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(232, 228, 220, 0.8);
  background: rgba(232, 228, 220, 0.04);
  border: 1px solid rgba(232, 228, 220, 0.2);
  border-radius: 100px;
  padding: 10px 26px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.access-gate-enter:hover {
  color: var(--text);
  border-color: rgba(232, 228, 220, 0.25);
  background: rgba(232, 228, 220, 0.08);
}

/* ============================================================
   404 PAGE
============================================================ */
.page-404 { overflow: hidden; }

.not-found {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
}

.gallery-wall {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 44px;
}

.frame-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.frame-wrap:nth-child(1) { transform: rotate(-2deg)   translateY(-14px); }
.frame-wrap:nth-child(2) { transform: rotate( 0.8deg) translateY(0px);   }
.frame-wrap:nth-child(3) { transform: rotate(-1deg)   translateY(-8px);  }

.plant-wrap {
  transform: rotate(1.5deg) translateY(4px);
  margin-left: 8px;
}

.frame-svg  { width: 128px; color: rgba(232, 228, 220, 0.39); display: block; }
.plant-svg  { width: 68px;  color: rgba(232, 228, 220, 0.35); display: block; }

.not-found-label {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(232, 228, 220, 0.8);
  margin-bottom: 28px;
}

.not-found-home {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(232, 228, 220, 0.8);
  background: rgba(232, 228, 220, 0.05);
  border: 1px solid rgba(232, 228, 220, 0.2);
  border-radius: 100px;
  padding: 11px 26px;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.not-found-home:hover {
  color: #7aa8d0;
  border-color: rgba(122, 168, 208, 0.28);
  background: rgba(122, 168, 208, 0.05);
}