/* ============================================================
   TRUE HEART TATTOO CO. — Design tokens
   American Traditional flash palette: jet canvas, traditional red,
   bottle green, royal navy, parchment skin-tone, gold leaf accent.
   ============================================================ */
:root{
  --black: #0A0A0A;
  --black-soft: #161412;
  --red: #C41E3A;
  --red-deep: #8B1428;
  --green: #1B5E3F;
  --green-deep: #103D29;
  --navy: #1A3A6B;
  --navy-deep: #102746;
  --parchment: #F2E6D0;
  --gold: #D4AF37;
  --gold-bright: #F0CC5C;
  --off-white: #F5F1E8;

  --font-display: 'Rye', cursive;       /* old-west/circus signage slab */
  --font-script: 'Alfa Slab One', cursive; /* heavy banner block letters */
  --font-elegant: 'Playfair Display', serif; /* flourish accents */
  --font-body: 'Outfit', sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);

  /* ---- Carved-gilt relief system: simulates light hitting raised
         gold-leaf carved wood signage against black canvas. ---- */
  --carve-light: rgba(255,235,180,.55);
  --carve-light-soft: rgba(255,235,180,.2);
  --carve-shadow: rgba(0,0,0,.7);
  --carve-shadow-soft: rgba(0,0,0,.4);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  background: var(--black);
  color: var(--off-white);
  overflow-x: hidden;
  position: relative;
}

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

::selection{ background: var(--red); color: var(--off-white); }
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none;}
img{display:block; max-width:100%;}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--black);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--red),var(--gold)); border-radius:10px;}

:focus-visible{ outline: 3px solid var(--gold); outline-offset: 3px; }

.grain{
  position: fixed; inset:0; z-index: 2; pointer-events:none;
  opacity:.06; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Carved relief utility system, re-tuned for gold-on-black ---- */
.carve-raised{
  box-shadow:
    inset 0 2px 0 var(--carve-light),
    inset 0 -3px 6px var(--carve-shadow-soft),
    inset 2px 0 0 var(--carve-light-soft),
    inset -2px 0 0 var(--carve-shadow-soft),
    0 1px 0 var(--carve-shadow-soft);
}
.carve-engraved{
  box-shadow:
    inset 0 3px 8px var(--carve-shadow),
    inset 0 -1px 0 var(--carve-light-soft),
    inset 2px 0 6px rgba(0,0,0,.3),
    inset -2px 0 6px rgba(0,0,0,.3);
}
.carve-extrude{
  position: relative;
  box-shadow:
    0 2px 0 rgba(255,235,180,.4) inset,
    0 -4px 0 rgba(0,0,0,.4) inset,
    0 8px 0 rgba(0,0,0,.55),
    0 8px 18px rgba(0,0,0,.55);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.carve-extrude:active{
  transform: translateY(6px);
  box-shadow:
    0 2px 0 rgba(255,235,180,.4) inset,
    0 -2px 0 rgba(0,0,0,.4) inset,
    0 2px 0 rgba(0,0,0,.5),
    0 2px 8px rgba(0,0,0,.4);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 5vw;
  transition: background .4s var(--ease), padding .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.scrolled{
  background: rgba(10,10,10,.92);
  backdrop-filter: blur(14px);
  padding: 12px 5vw;
  box-shadow: 0 1px 0 rgba(212,175,55,.15) inset, 0 4px 30px rgba(0,0,0,.5);
  border-bottom: 1px solid rgba(212,175,55,.15);
}
.nav-logo{
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  letter-spacing: 1px;
  display:flex; align-items:center; gap:10px;
  color: var(--gold-bright);
}
.nav-logo .heart-mini{ width: 22px; height:22px; flex-shrink:0; }
.nav-links{ display:flex; gap: clamp(16px, 3vw, 36px); align-items:center; }
.nav-links a{
  font-size: .8rem; text-transform: uppercase; letter-spacing: 2px; font-weight:600;
  position:relative; padding: 4px 0; color: var(--parchment);
}
.nav-links a::after{
  content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px;
  background: var(--red); transition: width .3s var(--ease);
}
.nav-links a:hover{ color: var(--gold-bright); }
.nav-links a:hover::after{ width:100%; }
.nav-book-btn{
  background: linear-gradient(160deg, var(--red), var(--red-deep));
  color: var(--off-white); font-weight:700; padding: 10px 42px 10px 38px; border-radius: 4px; min-width: 148px; text-align:center; white-space:nowrap;
  font-size:.78rem; text-transform:uppercase; letter-spacing:1.5px;
  border: 1px solid rgba(212,175,55,.4);
  box-shadow:
    0 2px 0 rgba(255,235,180,.3) inset,
    0 -2px 0 rgba(0,0,0,.3) inset,
    0 4px 0 #5c0d1a,
    0 8px 16px rgba(0,0,0,.5);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nav-book-btn:hover{ transform: translateY(-2px); box-shadow: 0 2px 0 rgba(255,235,180,.35) inset, 0 -2px 0 rgba(0,0,0,.3) inset, 0 6px 0 #5c0d1a, 0 12px 22px rgba(0,0,0,.55); }
.nav-book-btn:active{ transform: translateY(3px); box-shadow: 0 2px 0 rgba(255,235,180,.3) inset, 0 -1px 0 rgba(0,0,0,.3) inset, 0 1px 0 #5c0d1a, 0 3px 8px rgba(0,0,0,.4); }
.nav-toggle{ display:none; background:none; font-size:1.6rem; color:var(--gold-bright); }

@media (max-width: 860px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background: rgba(10,10,10,.98); backdrop-filter: blur(20px);
    flex-direction:column; justify-content:center; gap:32px;
    transform: translateX(100%); transition: transform .45s var(--ease);
    border-left: 1px solid rgba(212,175,55,.2);
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-toggle{ display:block; z-index:101; }
}

/* ============================================================
   HERO — black canvas, swallow/heart/banner flash centerpiece
   ============================================================ */
.hero{
  position: relative; min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  overflow: hidden; perspective: 1000px;
  background:
    radial-gradient(ellipse at 50% 30%, #1c1410 0%, var(--black) 60%);
  padding: 140px 5vw 80px;
}
.hero-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(0,0,0,.75) 100%);
}
.hero-layer{ position:absolute; inset:0; will-change: transform; transform-style: preserve-3d; pointer-events:none; }
.hero-content{
  position:relative; z-index:5; text-align:center; max-width: 900px;
  transform-style: preserve-3d;
}

.hero-flash-art{
  width: min(82vw, 520px);
  margin: 0 auto 18px;
  display: block;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.5));
  transform: translateZ(50px);
}

.hero-eyebrow{
  font-family: var(--font-elegant); font-style:italic; font-weight:600;
  color: var(--gold-bright); font-size: clamp(1rem,1.8vw,1.3rem);
  letter-spacing: 3px; display:block; margin-bottom: 10px;
}
.hero-title{
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 9vw, 6.5rem);
  line-height: .95;
  letter-spacing: 1px;
  color: var(--off-white);
  text-shadow:
    0 1px 0 rgba(255,235,180,.5),
    0 2px 0 #b08a2e,
    0 3px 0 #9a7626,
    0 4px 0 var(--gold),
    0 5px 8px rgba(0,0,0,.6),
    0 14px 30px rgba(0,0,0,.6);
}
.hero-sub{
  font-size: clamp(1rem,1.6vw,1.25rem); font-weight:300; max-width: 560px; margin: 22px auto 36px;
  color: var(--parchment); opacity:.92;
}
.hero-ctas{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.btn-primary, .btn-ghost{
  padding: 16px 34px; border-radius: 4px; font-weight:700; font-size:.9rem;
  text-transform:uppercase; letter-spacing:1.5px; transition: all .35s var(--ease);
  display:inline-flex; align-items:center; gap:10px;
}
.btn-primary{
  background: linear-gradient(160deg, var(--red), var(--red-deep));
  color: var(--off-white);
  border: 1px solid rgba(212,175,55,.45);
  box-shadow:
    0 2px 0 rgba(255,235,180,.35) inset,
    0 -4px 0 rgba(0,0,0,.4) inset,
    0 8px 0 #5c0d1a,
    0 14px 26px rgba(0,0,0,.55);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 2px 0 rgba(255,235,180,.4) inset, 0 -4px 0 rgba(0,0,0,.4) inset, 0 11px 0 #5c0d1a, 0 20px 34px rgba(0,0,0,.6); }
.btn-primary:active{ transform: translateY(5px); box-shadow: 0 2px 0 rgba(255,235,180,.35) inset, 0 -2px 0 rgba(0,0,0,.4) inset, 0 3px 0 #5c0d1a, 0 6px 14px rgba(0,0,0,.5); }
.btn-ghost{
  background: linear-gradient(160deg, rgba(212,175,55,.18), rgba(212,175,55,.06));
  color: var(--gold-bright); border: 2px solid rgba(212,175,55,.5);
  box-shadow:
    0 2px 0 rgba(255,235,180,.25) inset,
    0 -3px 6px rgba(0,0,0,.3) inset,
    0 6px 0 rgba(0,0,0,.3),
    0 10px 20px rgba(0,0,0,.4);
}
.btn-ghost:hover{ background: linear-gradient(160deg, rgba(212,175,55,.3), rgba(212,175,55,.1)); border-color: var(--gold-bright); transform: translateY(-3px); }
.btn-ghost:active{ transform: translateY(4px); box-shadow: 0 2px 0 rgba(255,235,180,.2) inset, 0 -2px 4px rgba(0,0,0,.3) inset, 0 2px 0 rgba(0,0,0,.3), 0 4px 10px rgba(0,0,0,.35); }

.scroll-cue{
  position:absolute; bottom: 30px; left:50%; transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--gold-bright);
  font-size:.7rem; letter-spacing:3px; text-transform:uppercase; opacity:.85;
}
.scroll-cue .pin{ width: 8px; height: 8px; border-radius:50%; background:var(--red); animation: pinpulse 1.6s ease-in-out infinite; }
@keyframes pinpulse{ 0%,100%{ transform: translateY(0); opacity:1; } 50%{ transform: translateY(10px); opacity:.4; } }

/* ============================================================
   BANNER RIBBON — structural section-divider device,
   pulled directly from the flash-art vocabulary
   ============================================================ */
.banner{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, var(--red), var(--red-deep));
  color: var(--off-white); padding: 14px 50px; margin: 0 auto;
  font-family: var(--font-script); font-size: clamp(1rem,2vw,1.4rem); letter-spacing:2px; text-transform:uppercase;
  border-top: 2px solid rgba(255,235,180,.5); border-bottom: 2px solid rgba(0,0,0,.4);
  box-shadow: 0 8px 20px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,235,180,.25);
}
.banner::before, .banner::after{
  content:''; position:absolute; top:0; bottom:0; width:0; height:0;
  border-style:solid;
}
.banner::before{
  left:-22px; border-width: 50% 22px 50% 0; border-color: transparent var(--red-deep) transparent transparent;
  filter: brightness(.7);
}
.banner::after{
  right:-22px; border-width: 50% 0 50% 22px; border-color: transparent transparent transparent var(--red-deep);
  filter: brightness(.7);
}
.banner-tail{
  position:absolute; top:50%; width:16px; height:14px; transform:translateY(-50%);
  background: var(--red-deep); filter: brightness(.6);
}
.banner-tail.left{ left:-38px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.banner-tail.right{ right:-38px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }

/* ============================================================
   SECTION shared
   ============================================================ */
section{ position:relative; z-index:3; }
.section-pad{ padding: clamp(70px,10vw,140px) 5vw; }
.section-head{ text-align:center; max-width:760px; margin: 0 auto clamp(40px,6vw,72px); }
.section-eyebrow-wrap{ margin-bottom: 18px; }
.section-title{
  font-family: var(--font-display); font-size: clamp(2.1rem,4.6vw,3.6rem); line-height:1.05; letter-spacing:.5px;
  margin-top: 16px; color: var(--off-white);
  text-shadow: 0 1px 0 rgba(255,235,180,.2), 0 3px 0 rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.4);
}
.section-desc{ margin-top:16px; font-weight:300; opacity:.85; font-size:1.05rem; color: var(--parchment); }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ background: var(--black-soft); position:relative; overflow:hidden; }
.about::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 15% 15%, rgba(196,30,58,.1), transparent 50%),
              radial-gradient(ellipse at 85% 85%, rgba(212,175,55,.08), transparent 50%);
}
.about-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center;
  position:relative; z-index:2;
}
.about-visual{ position:relative; aspect-ratio: 4/5; }
.about-frame{
  position:absolute; inset:0; border-radius: 6px; overflow:hidden;
  border: 10px solid var(--parchment);
  box-shadow:
    0 2px 0 rgba(255,255,255,.4) inset,
    0 -6px 12px rgba(0,0,0,.4) inset,
    0 14px 0 -2px rgba(0,0,0,.4),
    0 30px 60px rgba(0,0,0,.6);
  background: linear-gradient(135deg, var(--red-deep), var(--navy-deep));
}
.about-frame img{ width:100%; height:100%; object-fit:cover; filter: contrast(1.05) saturate(1.1); }
.floating-flash{
  position:absolute; width: 80px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.6));
  animation: floatY 5s ease-in-out infinite;
}
@keyframes floatY{ 0%,100%{transform:translateY(0) rotate(var(--rot,0deg));} 50%{transform:translateY(-18px) rotate(var(--rot,0deg));} }

.about-text p{ font-weight:300; line-height:1.75; opacity:.92; margin-bottom: 18px; font-size:1.05rem; color: var(--parchment); }
.about-stats{ display:flex; gap: 36px; margin-top:32px; flex-wrap:wrap; }
.stat-num{ font-family:var(--font-display); font-size:2.6rem; color: var(--gold-bright); text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.stat-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:1.5px; opacity:.7; color:var(--parchment); }

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

/* ============================================================
   GALLERY — black velvet flash wall
   ============================================================ */
.gallery{ background: var(--black); position:relative; }
.gallery-filter{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom: 40px; }
.filter-btn{
  background: rgba(212,175,55,.06); border:1px solid rgba(212,175,55,.3); color:var(--parchment);
  padding: 8px 22px; border-radius:4px; font-size:.78rem; text-transform:uppercase; letter-spacing:1.5px;
  transition: all .3s var(--ease);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.4);
}
.filter-btn:hover, .filter-btn.active{
  background: linear-gradient(160deg,var(--red),var(--red-deep)); color: var(--off-white); border-color: var(--gold);
  box-shadow: 0 2px 0 rgba(255,235,180,.3) inset, 0 -2px 0 rgba(0,0,0,.2) inset, 0 4px 0 #5c0d1a, 0 6px 14px rgba(0,0,0,.5);
}
.flash-wall{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 30px;
  perspective: 1600px;
  background: repeating-linear-gradient(45deg, #110d0d 0 2px, #0a0707 2px 4px);
  padding: 36px; border-radius: 10px;
  border: 1px solid rgba(212,175,55,.15);
  box-shadow: inset 0 0 60px rgba(0,0,0,.6), inset 0 4px 14px rgba(0,0,0,.7);
}
.flash-card{ position:relative; aspect-ratio: 1/1.1; perspective: 1600px; cursor:pointer; --rx: 0deg; --ry: 0deg; }
.flash-card-inner{
  position:relative; width:100%; height:100%;
  transform-style: preserve-3d;
  transition: transform .15s linear;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
}
.flash-card.flipped .flash-card-inner{ transition: transform .7s var(--ease); transform: rotateY(180deg); }
.flash-card.flipped .flash-face-front{ pointer-events: none; }
.flash-card.flipped .flash-face-back{ pointer-events: auto; }
.flash-face{
  position:absolute; inset:0; border-radius:6px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border: 3px solid var(--parchment);
  box-shadow:
    0 2px 0 rgba(255,255,255,.3) inset,
    0 -4px 8px rgba(0,0,0,.4) inset,
    0 10px 30px rgba(0,0,0,.5);
  transition: box-shadow .4s var(--ease);
}
.flash-card:hover .flash-face{ box-shadow: 0 2px 0 rgba(255,255,255,.35) inset, 0 -4px 8px rgba(0,0,0,.4) inset, 0 28px 55px rgba(196,30,58,.4); border-color: var(--gold); }
.flash-face-front{ background: var(--parchment); }
.flash-face-front::before{
  content:''; position:absolute; inset:0; z-index:2;
  background: linear-gradient(180deg, transparent 45%, rgba(10,10,10,.92) 100%);
}
.flash-face-front img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .6s var(--ease); filter: saturate(1.15) contrast(1.05);
}
.flash-card:hover .flash-face-front img{ transform: scale(1.08); }
.flash-face-front::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,235,180,.16) 50%, transparent 60%);
  transform: translateX(calc(var(--ry) * 2px));
  opacity: 0; transition: opacity .3s;
}
.flash-card:hover .flash-face-front::after{ opacity:1; }
.flash-pin{
  position:absolute; top:10px; right:10px; z-index:4; width:20px; height:20px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 60%, #8a6c1f);
  box-shadow: 0 3px 6px rgba(0,0,0,.5);
}
.flash-tag{
  position:absolute; bottom:14px; left:14px; right:14px; z-index:4;
  font-family: var(--font-elegant); font-style:italic; font-weight:600; font-size: 1.05rem; color: var(--gold-bright);
}
.flash-face-back{
  background: linear-gradient(150deg, var(--navy-deep), var(--black));
  transform: rotateY(180deg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 24px; border: 3px solid var(--gold);
}
.flash-face-back .back-cap{ font-family: var(--font-elegant); font-style:italic; font-weight:600; font-size:1.3rem; color:var(--gold-bright); margin-bottom:8px; }
.flash-face-back .back-cat{ font-size:.72rem; text-transform:uppercase; letter-spacing:2px; opacity:.65; margin-bottom:20px; color: var(--parchment); }
.flash-face-back .back-zoom{
  background: linear-gradient(160deg,var(--red),var(--red-deep)); color:var(--off-white);
  padding:9px 20px; border-radius:4px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
  border: 1px solid rgba(212,175,55,.4);
  box-shadow: 0 2px 0 rgba(255,235,180,.25) inset, 0 3px 0 #5c0d1a;
}
.flash-face-back .back-hint{ font-size:.7rem; opacity:.5; margin-top:14px; color: var(--parchment); }
.flash-empty{ grid-column: 1/-1; text-align:center; padding: 60px 20px; opacity:.6; font-weight:300; color: var(--parchment); }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:300; background: rgba(5,3,3,.95); backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center; padding: 5vw;
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease);
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-img{ max-width:min(90vw,700px); max-height:80vh; border-radius:6px; box-shadow: 0 30px 80px rgba(0,0,0,.7); border:5px solid var(--parchment); }
.lightbox-close{
  position:absolute; top:24px; right:5vw; font-size:2rem; color:var(--off-white); background:rgba(212,175,55,.15);
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(212,175,55,.3);
}
.lightbox-close:hover{ background: var(--red); color:var(--off-white); }
.lightbox-cap{ position:absolute; bottom:36px; font-family: var(--font-elegant); font-style:italic; font-size:1.4rem; color: var(--gold-bright); }

/* ============================================================
   BOOKING
   ============================================================ */
.booking{ background: var(--black-soft); }
.booking-grid{ display:grid; grid-template-columns: 1fr 1.15fr; gap: 50px; align-items:start; }
@media (max-width: 960px){ .booking-grid{ grid-template-columns: 1fr; } }

.panel{
  background: linear-gradient(160deg, rgba(212,175,55,.05), rgba(212,175,55,.015));
  border: 1px solid rgba(212,175,55,.2);
  border-radius: 10px; padding: clamp(22px,3vw,38px);
  box-shadow:
    0 1px 0 rgba(255,235,180,.15) inset,
    0 -1px 0 rgba(0,0,0,.5) inset,
    inset 0 0 0 1px rgba(0,0,0,.3),
    0 2px 0 rgba(255,235,180,.08),
    0 24px 60px rgba(0,0,0,.5),
    0 10px 0 -6px rgba(0,0,0,.4);
}

.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.cal-head h3{ font-family: var(--font-display); font-size:1.5rem; letter-spacing:.5px; color: var(--gold-bright); }
.cal-nav{ display:flex; gap:8px; }
.cal-nav button{
  width:36px; height:36px; border-radius:4px; background:rgba(212,175,55,.1); color:var(--gold-bright); font-size:1rem;
  transition: background .3s; border: 1px solid rgba(212,175,55,.2);
}
.cal-nav button:hover{ background: var(--red); color:var(--off-white); border-color: transparent; }
.cal-dow{ display:grid; grid-template-columns: repeat(7,1fr); text-align:center; font-size:.7rem; opacity:.6; margin-bottom:8px; letter-spacing:1px; color: var(--parchment); }
.cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:6px; }
.cal-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:4px;
  font-size:.85rem; position:relative; transition: all .25s var(--ease); color: var(--off-white);
}
.cal-day.pad{ opacity:0; pointer-events:none; }
.cal-day.avail{
  background: linear-gradient(160deg, rgba(27,94,63,.3), rgba(27,94,63,.1));
  cursor:pointer; border:1px solid rgba(27,94,63,.5);
  box-shadow: 0 2px 0 rgba(255,255,255,.1) inset, 0 -3px 5px rgba(0,0,0,.3) inset, 0 3px 0 rgba(0,0,0,.3);
}
.cal-day.avail:hover{ background: linear-gradient(160deg, rgba(27,94,63,.5), rgba(27,94,63,.2)); transform: scale(1.08) translateY(-1px); }
.cal-day.full{ opacity:.3; text-decoration:line-through; cursor:not-allowed; box-shadow: inset 0 3px 6px rgba(0,0,0,.4); color: var(--parchment); }
.cal-day.selected{
  background: linear-gradient(160deg,var(--red),var(--red-deep)); color:var(--off-white); font-weight:700; transform: scale(1.08);
  box-shadow: 0 2px 0 rgba(255,235,180,.4) inset, 0 -3px 0 rgba(0,0,0,.3) inset, 0 6px 16px rgba(196,30,58,.5);
  border-color: var(--gold);
}
.cal-day.today::after{ content:''; position:absolute; bottom:4px; width:4px; height:4px; border-radius:50%; background:var(--gold-bright); }
.cal-legend{ display:flex; gap:18px; margin-top:18px; font-size:.75rem; opacity:.75; flex-wrap:wrap; color: var(--parchment); }
.cal-legend span{ display:flex; align-items:center; gap:6px; }
.dot{ width:10px; height:10px; border-radius:50%; }
.dot.avail{ background: var(--green); }
.dot.selected{ background: var(--red); }

.slots{ margin-top:20px; display:flex; flex-wrap:wrap; gap:10px; }
.slot-btn{
  padding:10px 16px; border-radius:4px; background:rgba(212,175,55,.06); border:1px solid rgba(212,175,55,.25);
  color:var(--off-white); font-size:.85rem; transition: all .25s var(--ease);
}
.slot-btn:hover{ border-color:var(--gold); }
.slot-btn.selected{ background: linear-gradient(160deg,var(--green),var(--green-deep)); color:var(--off-white); font-weight:700; border-color: var(--gold); }

.form-group{ margin-bottom: 18px; }
.form-group label{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:1.5px; opacity:.8; margin-bottom:8px; color: var(--gold-bright); }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding: 13px 16px; border-radius:4px; background: rgba(0,0,0,.35);
  border: 1px solid rgba(212,175,55,.25); color: var(--off-white); font-family:inherit; font-size:.95rem;
  transition: border-color .3s, background .3s, box-shadow .3s;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(0,0,0,.3);
}
.form-group input::placeholder, .form-group textarea::placeholder{ color: rgba(245,241,232,.35); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color: var(--gold); background: rgba(0,0,0,.4);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.55), 0 0 0 3px rgba(212,175,55,.18);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-group textarea{ resize:vertical; min-height:100px; }
.selected-summary{
  background: rgba(212,175,55,.08); border:1px dashed rgba(212,175,55,.4); border-radius:4px;
  padding: 12px 16px; font-size:.85rem; margin-bottom:18px; display:none; color: var(--parchment);
}
.selected-summary.show{ display:block; }
.submit-btn{
  width:100%; padding:16px; border-radius:4px; background: linear-gradient(160deg,var(--red),var(--red-deep));
  color:var(--off-white); font-weight:800; text-transform:uppercase; letter-spacing:1.5px; font-size:.9rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  border: 1px solid rgba(212,175,55,.4);
  box-shadow:
    0 2px 0 rgba(255,235,180,.4) inset,
    0 -3px 0 rgba(0,0,0,.3) inset,
    0 6px 0 #5c0d1a,
    0 12px 26px rgba(0,0,0,.5);
}
.submit-btn:hover{ transform: translateY(-2px); box-shadow: 0 2px 0 rgba(255,235,180,.45) inset, 0 -3px 0 rgba(0,0,0,.3) inset, 0 8px 0 #5c0d1a, 0 16px 32px rgba(0,0,0,.55); }
.submit-btn:active{ transform: translateY(4px); box-shadow: 0 2px 0 rgba(255,235,180,.4) inset, 0 -1px 0 rgba(0,0,0,.3) inset, 0 2px 0 #5c0d1a, 0 4px 10px rgba(0,0,0,.45); }
.submit-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.form-msg{ margin-top:14px; font-size:.85rem; padding:12px 16px; border-radius:4px; display:none; }
.form-msg.show{ display:block; }
.form-msg.success{ background: rgba(27,94,63,.2); border:1px solid rgba(27,94,63,.5); color: var(--off-white); }
.form-msg.error{ background: rgba(196,30,58,.2); border:1px solid rgba(196,30,58,.5); color: var(--off-white); }

/* ============================================================
   SOCIAL strip
   ============================================================ */
.social{ background: linear-gradient(135deg, var(--navy), var(--navy-deep)); color: var(--off-white); border-top: 3px solid var(--gold); border-bottom: 3px solid var(--gold); }
.social-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.social-title{ font-family: var(--font-display); font-size: clamp(1.5rem,3vw,2.2rem); color: var(--gold-bright); }
.social-links{ display:flex; gap:16px; flex-wrap:wrap; }
.social-link{
  display:flex; align-items:center; gap:10px; background: linear-gradient(160deg, var(--red), var(--red-deep)); color: var(--off-white);
  padding: 12px 22px; border-radius:4px; font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:1px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  border: 1px solid rgba(212,175,55,.4);
  box-shadow:
    0 2px 0 rgba(255,235,180,.3) inset,
    0 -3px 0 rgba(0,0,0,.3) inset,
    0 5px 0 #5c0d1a,
    0 8px 16px rgba(0,0,0,.4);
}
.social-link:hover{ transform: translateY(-2px); box-shadow: 0 2px 0 rgba(255,235,180,.35) inset, 0 -3px 0 rgba(0,0,0,.3) inset, 0 7px 0 #5c0d1a, 0 12px 22px rgba(0,0,0,.45); }
.social-link:active{ transform: translateY(3px); }
.social-link svg{ width:18px; height:18px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background: var(--black); padding: 50px 5vw 30px; text-align:center; border-top: 1px solid rgba(212,175,55,.15); }
.footer-logo{ font-family:var(--font-display); font-size:1.7rem; margin-bottom:10px; color: var(--gold-bright); }
.footer-addr{ opacity:.6; font-size:.85rem; margin-bottom:20px; color: var(--parchment); }
.footer-admin{ opacity:.5; font-size:.75rem; color: var(--parchment); }
.footer-admin a{ text-decoration:underline; color: var(--gold-bright); }
.footer-admin a:hover{ opacity:1; }

/* ============================================================
   LOGIN MODAL
   ============================================================ */
.modal-overlay{
  position:fixed; inset:0; z-index:400; background: rgba(5,3,3,.88); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:5vw;
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease);
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal{
  background: linear-gradient(160deg, var(--black-soft), var(--black));
  border: 1px solid rgba(212,175,55,.3); border-radius:10px; padding: 40px; max-width:400px; width:100%;
  position:relative; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  transform: scale(.92) translateY(20px); transition: transform .4s var(--ease);
}
.modal-overlay.open .modal{ transform: scale(1) translateY(0); }
.modal-close{ position:absolute; top:18px; right:18px; font-size:1.4rem; opacity:.6; color: var(--gold-bright); }
.modal-close:hover{ opacity:1; }
.modal h3{ font-family:var(--font-display); font-size:1.8rem; margin-bottom:6px; color: var(--gold-bright); }
.modal p.sub{ opacity:.7; font-size:.85rem; margin-bottom:24px; color: var(--parchment); }

/* ============================================================
   ADMIN DASHBOARD
   ============================================================ */
.admin-view{ display:none; min-height:100vh; background: var(--black); padding: 100px 5vw 60px; }
.admin-view.show{ display:block; }
.admin-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; flex-wrap:wrap; gap:16px; }
.admin-head h2{ font-family:var(--font-display); font-size:2.1rem; color: var(--gold-bright); }
.logout-btn{ background:rgba(212,175,55,.1); padding:10px 20px; border-radius:4px; font-size:.85rem; color:var(--off-white); border:1px solid rgba(212,175,55,.25); }
.logout-btn:hover{ background: var(--red); color:var(--off-white); border-color:transparent; }

.admin-tabs{ display:flex; gap:10px; margin-bottom:32px; flex-wrap:wrap; }
.admin-tab{ padding:10px 22px; border-radius:4px; background:rgba(0,0,0,.3); font-size:.85rem; text-transform:uppercase; letter-spacing:1px; box-shadow: inset 0 2px 6px rgba(0,0,0,.4); border: 1px solid rgba(212,175,55,.15); color: var(--parchment); }
.admin-tab.active{ background: linear-gradient(160deg,var(--green),var(--green-deep)); color:var(--off-white); font-weight:700; box-shadow: 0 2px 0 rgba(255,235,180,.25) inset, 0 4px 0 rgba(0,0,0,.3), 0 6px 14px rgba(27,94,63,.4); border-color: var(--gold); }
.admin-pane{ display:none; }
.admin-pane.show{ display:block; }

.upload-zone{
  border: 3px dashed rgba(212,175,55,.3); border-radius:10px; padding: clamp(30px,6vw,70px) 20px;
  text-align:center; transition: all .3s var(--ease); margin-bottom: 36px; cursor:pointer;
  background: rgba(0,0,0,.25);
  box-shadow: inset 0 6px 18px rgba(0,0,0,.5), inset 0 -2px 0 rgba(255,255,255,.03);
}
.upload-zone.drag{ border-color: var(--gold); background: rgba(212,175,55,.08); box-shadow: inset 0 6px 18px rgba(0,0,0,.4), 0 0 0 4px rgba(212,175,55,.15); }
.upload-zone h4{ font-family:var(--font-display); font-size:1.4rem; margin-bottom:8px; color: var(--gold-bright); }
.upload-zone p{ opacity:.65; font-size:.9rem; color: var(--parchment); }
.upload-zone input[type=file]{ display:none; }
.upload-icon{ font-size:2.5rem; margin-bottom:12px; }

.crop-stage{ display:none; margin-bottom:36px; }
.crop-stage.show{ display:block; }
.crop-wrap{
  position:relative; max-width:480px; margin: 0 auto 20px; border-radius:10px; overflow:hidden;
  background: #000; aspect-ratio:1; touch-action:none; border: 3px solid rgba(212,175,55,.4);
}
.crop-wrap canvas{ width:100%; height:100%; cursor:grab; display:block; }
.crop-wrap canvas:active{ cursor:grabbing; }
.crop-controls{ max-width:480px; margin: 0 auto; display:flex; flex-direction:column; gap:14px; }
.crop-controls .row{ display:flex; align-items:center; gap:12px; }
.crop-controls label{ font-size:.78rem; text-transform:uppercase; letter-spacing:1.5px; opacity:.75; width:70px; flex-shrink:0; color: var(--gold-bright); }
.crop-controls input[type=range]{ flex:1; accent-color: var(--red); }
.crop-actions{ display:flex; gap:12px; margin-top:6px; }
.crop-actions button{ flex:1; padding:12px; border-radius:4px; font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:1px; }
.crop-save{ background:linear-gradient(160deg,var(--red),var(--red-deep)); color:var(--off-white); border: 1px solid rgba(212,175,55,.4); box-shadow: 0 2px 0 rgba(255,235,180,.3) inset, 0 4px 0 #5c0d1a; }
.crop-cancel{ background:rgba(212,175,55,.08); color:var(--off-white); border:1px solid rgba(212,175,55,.25); }
.crop-meta{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.crop-meta input, .crop-meta select{ padding:10px 14px; border-radius:4px; background:rgba(0,0,0,.35); border:1px solid rgba(212,175,55,.25); color:var(--off-white); font-family:inherit; box-shadow: inset 0 2px 6px rgba(0,0,0,.4); }

.admin-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:18px; }
.admin-card{ position:relative; border-radius:6px; overflow:hidden; aspect-ratio:1; background:var(--parchment); border: 2px solid rgba(212,175,55,.3); }
.admin-card img{ width:100%; height:100%; object-fit:cover; }
.admin-card .del{
  position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%;
  background: rgba(10,10,10,.75); color:var(--off-white); display:flex; align-items:center; justify-content:center; font-size:.9rem;
  border: 1px solid rgba(212,175,55,.3);
}
.admin-card .del:hover{ background: var(--red); color:var(--off-white); }
.admin-card .cap{ position:absolute; bottom:0; left:0; right:0; padding:8px 10px; background:linear-gradient(transparent,rgba(10,10,10,.92)); font-size:.75rem; color: var(--gold-bright); }

.req-list{ display:flex; flex-direction:column; gap:14px; }
.req-card{
  background: rgba(212,175,55,.04); border:1px solid rgba(212,175,55,.2); border-radius:8px; padding:20px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.req-info b{ font-size:1.05rem; color: var(--gold-bright); }
.req-info .meta{ opacity:.7; font-size:.85rem; margin-top:4px; color: var(--parchment); }
.req-info .note{ margin-top:8px; font-size:.9rem; opacity:.9; max-width:480px; color: var(--off-white); }
.req-status{ align-self:flex-start; padding:6px 14px; border-radius:4px; font-size:.75rem; text-transform:uppercase; letter-spacing:1px; }
.req-status.new{ background: rgba(212,175,55,.18); color: var(--gold-bright); border: 1px solid rgba(212,175,55,.3); }
.req-status.confirmed{ background: rgba(27,94,63,.25); color: #6fcf9e; border: 1px solid rgba(27,94,63,.5); }
.req-empty{ text-align:center; padding:60px 20px; opacity:.5; color: var(--parchment); }

.toast{
  position:fixed; bottom:30px; left:50%; transform: translateX(-50%) translateY(100px); z-index:500;
  background: var(--black-soft); color:var(--gold-bright); padding:14px 28px; border-radius:6px; font-weight:600; font-size:.9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: transform .4s var(--ease); border:1px solid rgba(212,175,55,.4);
}
.toast.show{ transform: translateX(-50%) translateY(0); }

.reveal{ opacity:0; transform: translateY(40px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }