/* ═══════════════════════════════════════════════════
   SORV.SPACE v2 — main.css
   Luxury Cinematic Dark | Performance-first (GPU Accelerated)
═══════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────── */
:root {
  --gold:        #c8a86b;
  --gold-hi:     #e0c98e;
  --gold-dim:    rgba(200,168,107,.14);
  --gold-glow:   rgba(200,168,107,.06);
  --bg:          #070605;
  --bg1:         #0d0b09;
  --bg2:         #141210;
  --surf:        #1c1915;
  --surf2:       #242018;
  --text:        #ede9e1;
  --text2:       #9b9186;
  --text3:       #524c45;
  --border:      rgba(200,168,107,.17);
  --border-dim:  rgba(200,168,107,.07);
  --nav-h:       68px;
  --ease:        cubic-bezier(.25,1,.5,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ── Reset ──────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; color-scheme:dark; }

/* 🔥 PWA UPGRADE: Smoother scrolling on mobile */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;
  overscroll-behavior-y: none; 
  -webkit-overflow-scrolling: touch; 
}
a { color:inherit; text-decoration:none; }
button { cursor:none; border:none; background:none; font-family:inherit; }
img, video { display:block; max-width:100%; }
input, textarea, select { font-family:inherit; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* ── Grain Canvas ───────────────────────────────── */
#grain-canvas {
  position: fixed; inset: 0; z-index: 9990;
  pointer-events: none; opacity: .028;
  width: 100%; height: 100%;
}

/* ── Custom Cursor ──────────────────────────────── */
#cursor-dot {
  position: fixed; top:0; left:0; z-index:9998;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  transform: translate(-50%,-50%);
  will-change: left, top;
}
#cursor-ring {
  position: fixed; top:0; left:0; z-index:9997;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(200,168,107,.45);
  pointer-events: none;
  transform: translate(-50%,-50%);
  transition: width .28s var(--ease), height .28s var(--ease), border-color .28s, opacity .28s;
  will-change: left, top, width, height;
}
.c-hover #cursor-ring { width:50px; height:50px; border-color:var(--gold); }
.c-down  #cursor-ring { width:22px; height:22px; opacity:.5; }

/* ── Loader ─────────────────────────────────────── */
#loader {
  position: fixed; inset:0; z-index:9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap:20px;
  transition: opacity .7s .1s var(--ease), visibility .7s .1s;
}
#loader.done { opacity:0; visibility:hidden; pointer-events:none; }
.l-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.4rem,3vw,1.9rem);
  letter-spacing: .5em; color: var(--gold);
  animation: pulse-gold 1.8s infinite alternate;
}
@keyframes pulse-gold { 0%{opacity:.35} 100%{opacity:1} }
.l-bar {
  width: 160px; height: 1px;
  background: var(--border-dim); overflow:hidden;
}
.l-fill { height:100%; background: var(--gold); width:0; transition: width .2s; }
.l-pct { font-size:.6rem; letter-spacing:.25em; color: var(--text3); font-variant-numeric:tabular-nums; }

/* ── Navigation ─────────────────────────────────── */
#main-nav {
  position: fixed; inset: 0 0 auto 0; z-index:500; height:var(--nav-h);
  transition: background .4s, backdrop-filter .4s, border-color .4s;
}
#main-nav.scrolled {
  background: rgba(7,6,5,.9);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-bottom: .5px solid var(--border-dim);
}
nav {
  max-width: 1520px; margin: 0 auto; height:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 clamp(1.5rem,4vw,3.5rem);
  gap: 2rem;
}
.nav-logo {
  font-family:'Cormorant Garamond',serif;
  font-size: 1.15rem; letter-spacing:.4em; color:var(--gold);
  flex-shrink:0; transition:opacity .25s;
}
.nav-logo:hover { opacity:.65; }
.logo-svg { height:22px; width:auto; color:var(--gold); overflow:visible; }
.nav-links {
  display:flex; list-style:none;
  gap: clamp(1.5rem,3vw,3rem);
}
.nav-link {
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--text3); transition:color .25s;
  position:relative; padding-bottom:2px;
}
.nav-link::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:.5px; background:var(--gold);
  transition: width .3s var(--ease);
}
.nav-link:hover, .nav-link.active { color:var(--gold); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.nav-actions { display:flex; gap:.6rem; align-items:center; flex-shrink:0; }
.btn-pill {
  padding:.45rem 1.2rem;
  border:.5px solid var(--border); color:var(--text2);
  font-size:.65rem; letter-spacing:.18em; text-transform:uppercase;
  transition: border-color .25s, color .25s; border-radius:99px;
}
.btn-pill:hover { border-color:var(--gold); color:var(--gold); }
.btn-pill--dim { opacity:.5; }

/* ── Hamburger ──────────────────────────────────── */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  padding:4px; flex-shrink:0;
}
.hamburger span {
  display:block; width:20px; height:.5px;
  background:var(--text2); transition: transform .3s var(--ease), opacity .3s;
}
.hamburger.open span:first-child { transform:translateY(5.5px) rotate(45deg); }
.hamburger.open span:last-child  { transform:translateY(-5.5px) rotate(-45deg); }

/* ── Mobile Menu ────────────────────────────────── */
#mobile-menu {
  position:fixed; inset:0; z-index:490; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s;
}
#mobile-menu:not([hidden]).open { opacity:1; visibility:visible; }
#mobile-menu ul { list-style:none; text-align:center; }
#mobile-menu li { margin:1.8rem 0; }
#mobile-menu .nav-link {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,8vw,3rem); font-weight:300; letter-spacing:.05em;
}
.mob-close {
  position:absolute; top:1.5rem; right:2rem;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text3);
  transition:color .2s;
}
.mob-close:hover { color:var(--gold); }

/* ── Tabs ───────────────────────────────────────── */
/* 🔥 PWA UPGRADE: Hardware accelerate tab switching */
.tab-pane { 
  display:none; 
  will-change: opacity, transform;
}
.tab-pane.active { display:block; animation: tab-fade .5s var(--ease-out) both; }
@keyframes tab-fade {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:none; }
}

/* ── Hero ───────────────────────────────────────── */
.hero {
  position:relative; height:100svh; min-height:580px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-media { position:absolute; inset:0; }
#hero-video {
  width:100%; height:100%; object-fit:cover;
  filter: brightness(.42) contrast(1.08) saturate(.78);
}
.hero-grade {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 30%, rgba(7,6,5,.72) 100%),
    linear-gradient(180deg, rgba(7,6,5,.38) 0%, transparent 25%, transparent 62%, rgba(7,6,5,.97) 100%);
}
.hero-scanline {
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,.018) 3px, rgba(0,0,0,.018) 6px
  );
}
.hero-sides {
  position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 60px 0 90px rgba(7,6,5,.7),
              inset -60px 0 90px rgba(7,6,5,.7);
}

/* ── Film strip decoration ──────────────────────── */
.hero-filmstrip {
  position:absolute; bottom:0; left:0; right:0;
  height:28px; overflow:hidden; opacity:.22;
  pointer-events:none;
}
.filmstrip-inner {
  display:flex; gap:3px; align-items:stretch;
  animation: strip-scroll 18s linear infinite;
  will-change: transform; /* GPU accelerate the marquee */
}
@keyframes strip-scroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
.strip-frame {
  flex-shrink:0; width:24px; height:28px;
  border:.5px solid rgba(200,168,107,.5);
  border-radius:1px;
}

/* ── Frame corners ──────────────────────────────── */
.frame-tl,.frame-tr,.frame-bl,.frame-br {
  position:absolute; width:22px; height:22px; z-index:2; pointer-events:none;
  opacity:.45;
}
.frame-tl { top:calc(var(--nav-h) + 1.5rem); left:2.5rem; border-top:.7px solid var(--gold); border-left:.7px solid var(--gold); }
.frame-tr { top:calc(var(--nav-h) + 1.5rem); right:2.5rem; border-top:.7px solid var(--gold); border-right:.7px solid var(--gold); }
.frame-bl { bottom:2rem; left:2.5rem; border-bottom:.7px solid var(--gold); border-left:.7px solid var(--gold); }
.frame-br { bottom:2rem; right:2.5rem; border-bottom:.7px solid var(--gold); border-right:.7px solid var(--gold); }

/* ── Hero Text ──────────────────────────────────── */
.hero-body {
  position:relative; z-index:3; text-align:center;
  padding: 0 clamp(1rem,5vw,3rem);
  pointer-events:none;
}
.hero-body > * { pointer-events:auto; }
.hero-tag {
  font-size:clamp(.6rem,.9vw,.75rem); letter-spacing:.35em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1.6rem;
  display:block;
}
.hero-h1 {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size: clamp(3.6rem,10vw,9.5rem);
  font-weight:300; line-height:1; letter-spacing:-.025em;
  margin-bottom:1.4rem;
}
.hero-h1 em {
  font-style:italic; color:var(--gold);
  display:inline-block;
  animation: shimmer-text 4s ease-in-out infinite alternate;
}
@keyframes shimmer-text {
  0%  { color:var(--gold); }
  100%{ color:var(--gold-hi); }
}
.h1-dot { color:var(--gold); }
.hero-sub {
  font-size:clamp(.65rem,1vw,.78rem); letter-spacing:.3em;
  text-transform:uppercase; color:var(--text3);
  margin-bottom:2.8rem;
}
.hero-ctas { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* ── Buttons ────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  padding:.88rem 2.6rem;
  background:var(--gold); color:#070605;
  font-size:.68rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  clip-path: polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
  transition: background .3s, transform .3s var(--ease), box-shadow .3s;
}
.btn-primary:hover {
  background:var(--gold-hi);
  transform:translateY(-2px);
  box-shadow: 0 12px 32px rgba(200,168,107,.28);
}
.btn-primary:active { transform:translateY(0); }
.btn-primary svg { flex-shrink:0; transition:transform .25s var(--ease); }
.btn-primary:hover svg { transform:translateX(3px); }

.btn-outline-hero {
  display:inline-flex; align-items:center;
  padding:.88rem 2.6rem;
  border:.5px solid rgba(237,233,225,.25); color:var(--text2);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  transition:border-color .3s, color .3s;
}
.btn-outline-hero:hover { border-color:var(--gold); color:var(--gold); }

.btn-outline-gold {
  display:inline-flex; align-items:center; gap:8px;
  padding:.75rem 2.2rem;
  border:.5px solid var(--gold); color:var(--gold);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  background:transparent;
  transition: background .3s, color .3s;
}
.btn-outline-gold:hover { background:var(--gold); color:#070605; }
.btn-outline-gold svg { transition:transform .25s var(--ease); }
.btn-outline-gold:hover svg { transform:translateX(3px); }

/* ── Hero Stats ─────────────────────────────────── */
.hero-stats {
  position:absolute; bottom:5.5rem; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:3rem; z-index:3;
}
.stat { text-align:center; }
.stat-n {
  display:block; font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,4vw,3.2rem); font-weight:300; color:var(--gold); line-height:1;
}
.stat-l {
  display:block; font-size:.55rem; letter-spacing:.25em;
  text-transform:uppercase; color:var(--text3); margin-top:.3rem;
}
.stat-div { width:.5px; height:36px; background:var(--border); }

/* ── Scroll hint ────────────────────────────────── */
.hero-scroll {
  position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  z-index:3; opacity:.55;
}
.hero-scroll span { font-size:.55rem; letter-spacing:.25em; text-transform:uppercase; color:var(--text3); }
.scroll-mouse {
  width:22px; height:36px;
  border:.7px solid var(--text3); border-radius:11px;
  display:flex; justify-content:center; padding-top:6px;
}
.scroll-dot {
  width:2.5px; height:6px; background:var(--gold); border-radius:2px;
  animation: sdrop 2.2s infinite var(--ease);
}
@keyframes sdrop {
  0%{opacity:1;transform:translateY(0)} 80%{opacity:0;transform:translateY(13px)} 100%{opacity:0;transform:translateY(0)}
}

/* ── Reveal animations ──────────────────────────── */
.anim-up {
  opacity:0; transform:translateY(22px);
  animation: anim-up .9s var(--ease-out) forwards;
  animation-delay: calc(var(--i,.5) * 160ms + 500ms);
}
@keyframes anim-up {
  to { opacity:1; transform:none; }
}

/* ── Section layout ─────────────────────────────── */
.section {
  max-width:1520px; margin:0 auto;
  padding: 6rem clamp(1.5rem,4vw,3.5rem);
}
.section-meta { text-align:center; margin-bottom:4.5rem; }
.section-tag {
  display:inline-block; font-size:.6rem; letter-spacing:.35em;
  text-transform:uppercase; color:var(--gold); margin-bottom:1rem;
}
.section-h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.2rem,5vw,4rem); font-weight:300; line-height:1.05;
}
.section-sub { color:var(--text3); font-size:.8rem; margin-top:.8rem; }
.section-foot { text-align:center; margin-top:4rem; }

/* ── Featured grid ──────────────────────────────── */
.feat-grid {
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:3px;
}
.feat-grid .m-card:nth-child(1) { grid-column:span 7; grid-row:span 2; aspect-ratio:auto; min-height:520px; }
.feat-grid .m-card:nth-child(2) { grid-column:span 5; }
.feat-grid .m-card:nth-child(3) { grid-column:span 2; }
.feat-grid .m-card:nth-child(4) { grid-column:span 3; }
.feat-grid .m-card:nth-child(5) { grid-column:span 5; }

/* ── Media card ─────────────────────────────────── */
/* 🔥 PWA UPGRADE: Hardware accelerate the cards */
.m-card {
  position:relative; overflow:hidden; background:var(--surf);
  aspect-ratio:4/3;
  cursor:none;
  isolation:isolate;
  transform: translateZ(0); 
  will-change: transform;
}
.m-card::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(7,6,5,.88) 0%, transparent 55%);
  opacity:0; transition:opacity .4s;
}
.m-card:hover::before { opacity:1; }

/* 🔥 PWA UPGRADE: Eliminate flickering on scale */
.m-card img, .m-card video {
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease), filter .45s;
  filter:brightness(.86) saturate(.82);
  backface-visibility: hidden; 
  transform: translate3d(0, 0, 0); 
}
.m-card:hover img, .m-card:hover video {
  transform:scale(1.07) translate3d(0, 0, 0);
  filter:brightness(1) saturate(1.05);
}
.m-card-info {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  padding:1.2rem 1.4rem;
  transform:translateY(6px); opacity:0;
  transition:transform .35s var(--ease), opacity .35s;
}
.m-card:hover .m-card-info { transform:none; opacity:1; }
.m-card-type {
  font-size:.57rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.25rem;
}
.m-card-title {
  font-family:'Cormorant Garamond',serif;
  font-size:1.15rem; font-weight:300;
}
.m-card-date { font-size:.62rem; color:var(--text3); margin-top:.2rem; }
.m-card-num {
  position:absolute; top:.9rem; left:1rem; z-index:2;
  font-family:'Cormorant Garamond',serif;
  font-size:.65rem; color:rgba(237,233,225,.2); letter-spacing:.1em;
  transition:color .3s;
}
.m-card:hover .m-card-num { color:rgba(200,168,107,.45); }
.reel-badge {
  position:absolute; top:.9rem; right:.9rem; z-index:2;
  background:rgba(7,6,5,.75); border:.5px solid var(--border);
  color:var(--gold); font-size:.55rem; letter-spacing:.18em;
  text-transform:uppercase; padding:.3rem .65rem;
  backdrop-filter:blur(6px);
}

/* Skeleton */
.m-skel {
  background:var(--surf); aspect-ratio:4/3;
  animation:skel 1.6s infinite;
}
@keyframes skel {
  0%,100%{background:var(--surf)} 50%{background:var(--surf2)}
}

/* ── Page banner ────────────────────────────────── */
.page-banner {
  padding: calc(var(--nav-h) + 5rem) clamp(1.5rem,4vw,3.5rem) 4rem;
  max-width:1520px; margin:0 auto;
  position:relative;
}
.page-num {
  position:absolute; top:calc(var(--nav-h) + 1rem); right:clamp(1.5rem,4vw,3.5rem);
  font-family:'Cormorant Garamond',serif;
  font-size:6rem; font-weight:300; color:rgba(200,168,107,.08); line-height:1;
  letter-spacing:-.05em; pointer-events:none; user-select:none;
}
.page-h1 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(3rem,8vw,7.5rem); font-weight:300; letter-spacing:-.03em; line-height:1;
}
.page-sub {
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--text3); margin-top:1rem;
}

/* ── Toolbar ────────────────────────────────────── */
.toolbar {
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin-bottom:2rem;
}
.f-btn {
  padding:.38rem 1rem; background:transparent;
  border:.5px solid var(--border-dim); color:var(--text3);
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  transition:border-color .22s, color .22s;
}
.f-btn:hover { border-color:var(--border); color:var(--text2); }
.f-btn.active { border-color:var(--gold); color:var(--gold); }
.view-btns { margin-left:auto; display:flex; gap:.3rem; }
.v-btn {
  padding:.4rem; border:.5px solid var(--border-dim); color:var(--text3);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .22s, color .22s;
}
.v-btn:hover,.v-btn.active { border-color:var(--gold); color:var(--gold); }

/* ── Photos / media grid ────────────────────────── */
.media-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.media-grid[data-mode="masonry"] { display:block; column-count:3; column-gap:3px; }
.media-grid[data-mode="masonry"] .m-card { break-inside:avoid; margin-bottom:3px; aspect-ratio:unset; }
.media-grid[data-mode="masonry"] .m-card img { aspect-ratio:unset; height:auto; }

/* Load more */
.load-more-wrap { text-align:center; margin-top:3.5rem; }
.btn-load-more {
  display:inline-flex; align-items:center; gap:8px;
  padding:.75rem 2.8rem;
  border:.5px solid var(--border-dim); color:var(--text3);
  font-size:.65rem; letter-spacing:.18em; text-transform:uppercase;
  background:transparent; transition:border-color .25s, color .25s;
}
.btn-load-more:hover { border-color:var(--gold); color:var(--gold); }
.btn-load-more.busy { opacity:.5; pointer-events:none; }
.spin-icon { display:none; }
.btn-load-more.busy .spin-icon { display:block; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Reels grid ─────────────────────────────────── */
.reels-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:3px; }
.r-card { position:relative; background:var(--surf); cursor:none; overflow:hidden; }
.r-thumb { aspect-ratio:16/9; overflow:hidden; position:relative; }
.r-thumb img { width:100%; height:100%; object-fit:cover; filter:brightness(.7) saturate(.8); transition:transform .6s var(--ease), filter .4s; }
.r-card:hover .r-thumb img { transform:scale(1.05); filter:brightness(.9) saturate(1); }
.r-play {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.r-play-btn {
  width:50px; height:50px; border-radius:50%;
  border:1px solid rgba(200,168,107,.5); background:rgba(7,6,5,.55);
  backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center;
  color:var(--gold); transition:background .3s var(--ease), transform .3s var(--ease), border-color .3s;
}
.r-card:hover .r-play-btn { background:var(--gold); color:#070605; border-color:var(--gold); transform:scale(1.1); }
.r-info { padding:1.1rem 1.4rem; border-top:.5px solid var(--border-dim); }
.r-title { font-family:'Cormorant Garamond',serif; font-size:1.05rem; font-weight:300; }
.r-dur { font-size:.6rem; letter-spacing:.18em; color:var(--text3); text-transform:uppercase; margin-top:.3rem; }

/* ── About ──────────────────────────────────────── */
.about {
  max-width:1280px; margin:0 auto;
  padding: calc(var(--nav-h) + 6rem) clamp(1.5rem,4vw,3.5rem) 7rem;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,7rem); align-items:center;
}
.about-visual { position:relative; }
.about-img-frame { position:relative; }
.about-img-frame img {
  width:100%; aspect-ratio:3/4; object-fit:cover;
  filter:grayscale(15%) contrast(1.05);
}
.about-img-decor {
  position:absolute; inset:-14px;
  border:.5px solid var(--border);
  pointer-events:none;
  transform:translate(14px,14px);
  transition:transform .6s var(--ease);
}
.about-visual:hover .about-img-decor { transform:translate(8px,8px); }
.about-tag-float {
  position:absolute; bottom:-1.2rem; right:-1.2rem;
  background:var(--bg1); border:.5px solid var(--border);
  padding:.6rem 1.2rem;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.about-eyebrow {
  font-size:.6rem; letter-spacing:.35em; text-transform:uppercase; color:var(--gold);
  display:block; margin-bottom:1rem;
}
.about-name {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.5rem,5vw,4.5rem); font-weight:300; letter-spacing:-.02em; line-height:1.05;
}
.about-role {
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text3);
  margin-top:.6rem;
}
.about-rule { width:36px; height:.5px; background:var(--gold); margin:2rem 0; }
.about-p { color:var(--text2); line-height:1.9; font-size:.9rem; margin-bottom:1rem; }
.about-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:2rem; }
.about-tags span {
  padding:.3rem .85rem; border:.5px solid var(--border-dim);
  font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text3);
  transition:border-color .2s, color .2s;
}
.about-tags span:hover { border-color:var(--gold); color:var(--gold); }

/* ── Admin ──────────────────────────────────────── */
.admin-wrap { padding-top:2rem; }
.drop-zone {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem; padding:4rem 2rem; text-align:center;
  border:1px dashed var(--border); cursor:pointer;
  transition:border-color .3s, background .3s;
}
.drop-zone.drag-over { border-color:var(--gold); background:var(--gold-glow); }
.dz-icon { color:var(--text3); }
.dz-label { color:var(--text2); font-size:.88rem; }
.dz-label strong { color:var(--gold); font-weight:400; }
.dz-hint { font-size:.7rem; color:var(--text3); letter-spacing:.1em; }
.upload-queue { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:6px; margin:1.2rem 0; }
.q-item { background:var(--surf); border:.5px solid var(--border-dim); overflow:hidden; position:relative; }
.q-item img,.q-item video { width:100%; aspect-ratio:4/3; object-fit:cover; }
.q-item-name { padding:.4rem .6rem; font-size:.62rem; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.q-prog { position:absolute; bottom:0; left:0; height:2px; background:var(--gold); width:0; transition:width .25s; }
.admin-header { display:flex; align-items:center; justify-content:space-between; margin:3rem 0 1.5rem; }
.admin-h3 { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:300; }
.admin-search {
  background:var(--surf); border:.5px solid var(--border-dim);
  color:var(--text); padding:.5rem 1rem; width:240px; font-size:.8rem;
  outline:none; transition:border-color .2s;
}
.admin-search:focus { border-color:var(--gold); }
.admin-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:3px; }
.adm-item { position:relative; background:var(--surf); }
.adm-item img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.adm-bar { padding:.45rem .6rem; display:flex; align-items:center; justify-content:space-between; border-top:.5px solid var(--border-dim); }
.adm-name { font-size:.65rem; color:var(--text2); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adm-del { flex-shrink:0; margin-left:6px; font-size:.75rem; color:var(--text3); transition:color .2s; }
.adm-del:hover { color:#e24b4a; }

/* ── Lightbox ───────────────────────────────────── */
/* 🔥 PWA UPGRADE: Hardware accelerate lightbox fade in */
#lightbox {
  position:fixed; inset:0; z-index:800;
  display:none; align-items:center; justify-content:center;
}
#lightbox:not([hidden]) { 
  display:flex; 
  will-change: opacity;
}
.lb-bg { position:absolute; inset:0; background:rgba(4,3,3,.97); cursor:pointer; }
.lb-x {
  position:fixed; top:1.8rem; right:2.2rem; z-index:3;
  color:var(--text3); padding:.4rem; transition:color .2s;
}
.lb-x:hover { color:var(--gold); }
.lb-arrow {
  position:fixed; top:50%; transform:translateY(-50%); z-index:3;
  color:var(--text3); padding:1rem; transition:color .2s;
}
.lb-arrow:hover { color:var(--gold); }
.lb-prev { left:1.2rem; }
.lb-next { right:1.2rem; }
.lb-stage {
  position:relative; z-index:2;
  max-width:92vw; max-height:84vh;
  display:flex; align-items:center; justify-content:center;
}

/* 🔥 PWA UPGRADE: Hardware accelerate lightbox images */
.lb-stage img, .lb-stage video {
  max-width:90vw; max-height:82vh; object-fit:contain;
  animation:lb-in .3s var(--ease-out) both;
  will-change: transform, opacity;
}
@keyframes lb-in { from{opacity:0;scale:.97} to{opacity:1;scale:1} }
.lb-foot {
  position:fixed; bottom:0; left:0; right:0; z-index:3;
  padding:1.5rem clamp(1.5rem,4vw,3rem);
  background:linear-gradient(to top, rgba(4,3,3,.95) 0%, transparent 100%);
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.lb-title { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:300; }
.lb-date  { font-size:.65rem; color:var(--text3); margin-top:.2rem; }
.lb-acts  { display:flex; gap:.4rem; align-items:center; }
.lb-act {
  display:inline-flex; align-items:center; gap:5px;
  padding:.42rem .9rem;
  border:.5px solid var(--border-dim); color:var(--text2);
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  background:transparent; text-decoration:none;
  transition:border-color .22s, color .22s;
}
.lb-act:hover { border-color:var(--gold); color:var(--gold); }
.lb-act.liked { color:#e24b4a; border-color:rgba(226,75,74,.35); }

/* ── Login modal ────────────────────────────────── */
#login-modal {
  position:fixed; inset:0; z-index:900;
  display:none; align-items:center; justify-content:center;
}
#login-modal:not([hidden]) { display:flex; }
.modal-bg { position:absolute; inset:0; background:rgba(4,3,3,.95); cursor:pointer; }
.modal-card {
  position:relative; z-index:2; background:var(--bg2);
  border:.5px solid var(--border); padding:clamp(2rem,5vw,3rem);
  width:min(420px,92vw);
  animation:lb-in .3s var(--ease-out) both;
}
.modal-x {
  position:absolute; top:1rem; right:1.2rem;
  color:var(--text3); padding:.3rem; transition:color .2s;
}
.modal-x:hover { color:var(--gold); }
.modal-brand {
  font-family:'Cormorant Garamond',serif;
  font-size:1rem; letter-spacing:.4em; color:var(--gold); margin-bottom:1.8rem;
}
.modal-h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:1.8rem; font-weight:300; margin-bottom:2rem;
}
.fld { margin-bottom:1.1rem; }
.fld label { display:block; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text3); margin-bottom:.45rem; }
.fld input {
  width:100%; background:var(--surf); border:.5px solid var(--border-dim);
  color:var(--text); padding:.7rem 1rem; font-size:.88rem;
  outline:none; transition:border-color .2s;
}
.fld input:focus { border-color:var(--gold); }
.login-err { font-size:.72rem; color:#e24b4a; min-height:1.1rem; margin-bottom:.8rem; }

/* ── Toast ──────────────────────────────────────── */
#toast {
  position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(10px);
  background:var(--surf); border:.5px solid var(--border);
  color:var(--text2); padding:.65rem 1.8rem;
  font-size:.7rem; letter-spacing:.1em;
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  z-index:9995; white-space:nowrap;
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.ok  { border-color:rgba(150,195,80,.45); color:#97c459; }
#toast.err { border-color:rgba(226,75,74,.45);  color:#e24b4a; }

/* ── Responsive ─────────────────────────────────── */
@media (max-width:1100px) {
  .feat-grid { grid-template-columns:repeat(6,1fr); }
  .feat-grid .m-card:nth-child(1) { grid-column:span 6; aspect-ratio:16/7; min-height:auto; grid-row:auto; }
  .feat-grid .m-card:nth-child(2) { grid-column:span 3; }
  .feat-grid .m-card:nth-child(3) { grid-column:span 3; }
  .feat-grid .m-card:nth-child(4) { grid-column:span 3; }
  .feat-grid .m-card:nth-child(5) { grid-column:span 3; }
  .about { grid-template-columns:1fr; max-width:700px; }
  .about-img-frame img { max-height:440px; }
}
@media (max-width:900px) {
  .media-grid { grid-template-columns:repeat(2,1fr); }
  .media-grid[data-mode="masonry"] { column-count:2; }
  .reels-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  :root { --nav-h:60px; }
  nav { padding:0 1.4rem; }
  .nav-links,.nav-actions { display:none; }
  .hamburger { display:flex; }
  .hero-stats { gap:1.8rem; bottom:3.5rem; }
  .frame-tl,.frame-tr { top:calc(var(--nav-h) + 1rem); }
  body { cursor:auto; }
  #cursor-dot,#cursor-ring { display:none; }
}
@media (max-width:520px) {
  .media-grid { grid-template-columns:1fr; }
  .media-grid[data-mode="masonry"] { column-count:1; }
  .hero-ctas { flex-direction:column; align-items:center; }
  .hero-stats { display:none; }
  .frame-tl,.frame-tr,.frame-bl,.frame-br { display:none; }
}