:root{
  --black:#000;
  --white:#fff;
  --pink:#f4b6c8;
  --muted:rgba(255,255,255,0.75);
}

/* ---------- RESET / BASE ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--black);color:var(--white);font-family:Arial, Helvetica, sans-serif;-webkit-font-smoothing:antialiased;}
a{color:inherit}

/* ---------- DOT GRID (background) ---------- */
.dot-grid{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1px);
  background-size:28px 28px;opacity:0.06;
}

/* ---------- BRAND PILL (centered) ---------- */
/* NOTE: pointer-events enabled so hover works; subtle motion on hover; text stays white */
.brand-pill{
  position:fixed;
  left:50%;
  top:14px;
  transform:translateX(-50%) translateY(0) rotate(0deg);
  background:rgba(255,255,255,0.06);
  padding:10px 26px;
  border-radius:10px;
  z-index:1200;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  transition:transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms, background 260ms;
  pointer-events:auto; /* allow hover */
}

/* pill content styling */
.brand-pill .pill-left,
.brand-pill .pill-center,
.brand-pill .pill-right{
  color:var(--white); /* keep text white */
  letter-spacing:1.5px;
  font-size:13px;
}

/* hover: move up and a tiny rotate for personality (subtle) */
.brand-pill:hover{
  transform:translateX(-50%) translateY(-6px) rotate(-0.6deg) scale(1.02);
  background:rgba(255,255,255,0.09);
  box-shadow:0 18px 48px rgba(0,0,0,0.45);
}

/* active state added by JS when menu opens (gentle pop, no extra rotation) */
.brand-pill.animate{
  transform:translateX(-50%) translateY(-2px) rotate(0deg) scale(1.04);
  background:rgba(255,255,255,0.11);
  box-shadow:0 22px 60px rgba(0,0,0,0.55);
}

/* ---------- TOP BAR / NAV ---------- */
.top{
  position:fixed;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 40px;background:rgba(0,0,0,0.18);z-index:1100;
}

.left .brand{ text-decoration:none;color:var(--white);letter-spacing:3px;font-size:14px;text-transform:uppercase; }

.right{ display:flex;gap:36px; }

.right a{
  text-decoration:none;color:var(--white);letter-spacing:2px;font-size:13px;text-transform:uppercase;
  transition:transform .22s cubic-bezier(.2,.9,.2,1), text-shadow .22s, color .22s;
  display:inline-block;
}

.right a:hover{
  transform:translateY(-4px); /* subtle lift */
  text-shadow:0 0 10px rgba(244,182,200,0.45);
}

/* ---------- HAMBURGER ---------- */
#nav-toggle{ display:none; }

.hamburger{
  display:none;flex-direction:column;gap:6px;cursor:pointer;z-index:1250;
}
.hamburger span{ width:26px;height:2px;background:var(--white);display:block;border-radius:2px; }

/* ---------- MOBILE NAV ---------- */
.mobile-nav{
  position:fixed;top:64px;right:18px;
  background:rgba(0,0,0,0.96);padding:14px 18px;border-radius:8px;
  display:none;flex-direction:column;gap:10px;box-shadow:0 12px 40px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.05);z-index:1150;
}
.mobile-nav a{
  text-decoration:none;color:var(--white);text-transform:uppercase;letter-spacing:2px;font-size:13px;
  transition:transform .22s,text-shadow .22s,opacity .22s;
  display:block;opacity:0;
}
.mobile-nav a.show{ opacity:1; transform:translateY(0); }

/* ---------- HERO ---------- */
.hero{ min-height:72vh; display:flex; align-items:flex-end; position:relative; padding-bottom:72px; z-index:5; overflow:hidden; }
.hero-image{ position:absolute; inset:0; background:url("../img/hero.jpeg") center/cover no-repeat; filter:brightness(.45); }
.hero-content{ position:relative; padding:110px 40px 24px; max-width:900px; z-index:6; }
.hero-title{ font-family:Georgia,"Times New Roman",serif; font-size:clamp(36px,6vw,88px); margin:0 0 12px; font-weight:500; letter-spacing:0.02em; transition:opacity .45s, transform .45s; }
.hero-sub{ margin:0 0 24px; letter-spacing:1px; opacity:.9; }

/* CTA */
.cta{ display:inline-block; padding:12px 20px; border:2px solid var(--pink); color:var(--white); text-decoration:none; text-transform:uppercase; letter-spacing:2px; transition:transform .18s, background .18s; }
.cta:hover{ transform:translateY(-3px) }
.cta:active{ background:var(--black); color:var(--white) }

/* ---------- GRID / TILES ---------- */
.grid{ max-width:1200px; margin:48px auto 120px; padding:0 40px; display:grid; grid-template-columns:repeat(12,1fr); gap:22px; z-index:6; }
.square{ grid-column:span 4; aspect-ratio:1/1; } .tall{ grid-column:span 4; aspect-ratio:3/4; } .wide{ grid-column:span 8; aspect-ratio:16/9; }

.tile{ position:relative; overflow:hidden; display:block; border:1px solid rgba(255,255,255,0.06); background:var(--black); transform-origin:center; transition:transform .35s ease, box-shadow .35s ease; }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease, filter .45s ease; }

/* hover overlay / white hue */
.tile::after{ content:""; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background .25s ease, box-shadow .25s ease; }
.tile:hover::after{ background:rgba(255,255,255,0.08); box-shadow:0 24px 54px rgba(0,0,0,0.6); }

/* zoom */
.effect-zoom:hover img{ transform:scale(1.06); }

/* swap */
.effect-swap{ position:relative; }
.effect-swap .img-base, .effect-swap .img-hover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .45s ease; }
.effect-swap .img-hover{ opacity:0; }
.effect-swap:hover .img-hover{ opacity:1; }
.effect-swap:hover .img-base{ opacity:0; }

/* caption */
.effect-caption .caption{ position:absolute; left:0; right:0; bottom:0; padding:18px; transform:translateY(60%); opacity:0; transition:transform .45s ease, opacity .45s ease; background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.22),transparent); }
.effect-caption:hover .caption{ transform:translateY(0); opacity:1; }
.effect-caption .caption h2{ margin:0; font-family:Georgia,"Times New Roman",serif; font-weight:300; color:var(--pink); }
.effect-caption .caption p{ margin:8px 0 0; font-size:12px; color:rgba(244,182,200,.85); text-transform:uppercase; letter-spacing:1.5px; }

/* float animation */
@keyframes floaty{ 0%{transform:translateY(0)} 50%{transform:translateY(-8px)} 100%{transform:translateY(0)} }
.effect-float{ animation:floaty 5.5s ease-in-out infinite }
.effect-float:hover{ animation-play-state:paused }

/* ---------- TILE TILT (JS applies transform) ---------- */
.grid .tile{ backface-visibility:hidden; -webkit-backface-visibility:hidden; will-change:transform,opacity,clip-path; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){ .right{ display:none } .hamburger{ display:flex } }
@media (max-width:720px){
  .grid{ grid-template-columns:repeat(8,1fr); padding:0 20px }
  .square{ grid-column:span 4 } .tall{ grid-column:span 4 } .wide{ grid-column:span 8 }
  .brand-pill{ display:none }
}
@media (max-width:520px){
  .grid{ grid-template-columns:repeat(4,1fr) }
  .hero-title{ font-size:36px }
  .brand-pill{ display:none }
}

/* ---------- ACCESSIBILITY / REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .brand-pill,.hero-title,.grid .tile{ transition:none !important; animation:none !important; transform:none !important; }
}