/* ============================================================
   NOVAIRE — Contemporary Fragrance House
   ============================================================ */

:root{
  --obsidian:#09070B;
  --obsidian-2:#120e17;
  --plum:#35104A;
  --plum-2:#4a1666;
  --violet:#7A2EFF;
  --violet-2:#9c5cff;
  --coral:#FF5A52;
  --crimson:#A91535;
  --lavender:#D8CCFF;
  --silver:#D5D5D8;
  --white:#FBFAFF;

  --font-display:'Anton', sans-serif;
  --font-body:'Space Grotesk', sans-serif;
  --font-mono:'Space Mono', monospace;

  --nav-h:84px;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--obsidian);
  color:var(--white);
  font-family:var(--font-body);
  overflow-x:hidden;
  cursor:auto;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; border:none; background:none; cursor:pointer; color:inherit;}
input{font-family:inherit;}

.mono{font-family:var(--font-mono); letter-spacing:.04em; font-size:.78rem; text-transform:uppercase;}

.sprite{position:absolute; width:0; height:0; overflow:hidden;}

/* symbol shared styling via CSS classes applied through <use> currentColor trick */
#bottle-classic .bt-cap,
#bottle-round .bt-cap,
#bottle-slim .bt-cap{ fill:#1a1a1f; }
#bottle-classic .bt-neck,
#bottle-round .bt-neck,
#bottle-slim .bt-neck{ fill:#2a2a30; }
#bottle-classic .bt-shoulder{ fill:rgba(255,255,255,.14); }
#bottle-classic .bt-body,
#bottle-round .bt-body,
#bottle-slim .bt-body{ fill:rgba(255,255,255,.09); stroke:rgba(255,255,255,.35); stroke-width:1.5; }
#bottle-classic .bt-liquid,
#bottle-round .bt-liquid,
#bottle-slim .bt-liquid{ fill:currentColor; opacity:.92; }
#bottle-classic .bt-highlight,
#bottle-round .bt-highlight,
#bottle-slim .bt-highlight{ fill:rgba(255,255,255,.5); }
#bottle-classic .bt-label,
#bottle-round .bt-label,
#bottle-slim .bt-label{ fill:rgba(255,255,255,.14); stroke:rgba(255,255,255,.4); stroke-width:1; }

.grain{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:999; opacity:.035; mix-blend-mode:overlay;
}

/* ============ CURSOR ============ */
.cursor-dot{
  position:fixed; top:0; left:0; width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--coral); pointer-events:none; z-index:9999; opacity:.85;
  transform:translate(-50%,-50%); transition:width .2s var(--ease),height .2s var(--ease),
    background .2s, border-color .2s, opacity .2s;
  display:none;
}
@media(hover:hover) and (pointer:fine){ .cursor-dot{display:block;} }
.cursor-dot.is-active{ width:14px; height:14px; background:var(--coral); border-color:var(--coral); opacity:1; }

/* ============ LAYOUT HELPERS ============ */
.section-head{ padding:0 6vw; margin-bottom:3.5rem; }
.section-head.light{ color:var(--obsidian); }
.eyebrow{
  display:inline-block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--violet-2); margin-bottom:1rem;
  border:1px solid currentColor; padding:.35em .8em; border-radius:100px;
}
.eyebrow-light{ color:var(--white); border-color:rgba(255,255,255,.5); }
.section-title{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.6rem, 7vw, 5.5rem); line-height:.92; letter-spacing:-.01em;
}
.section-sub{ margin-top:1.2rem; font-size:1.05rem; max-width:36ch; opacity:.75; font-weight:300; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-mono);
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn-solid{
  background:var(--white); color:var(--obsidian); padding:1em 1.8em; border-radius:100px;
}
.btn-solid:hover{ background:var(--coral); color:var(--white); transform:translateY(-2px); }
.btn-invert{ background:var(--obsidian); color:var(--white); }
.btn-invert:hover{ background:var(--white); color:var(--obsidian); }
.btn-pill{
  background:var(--violet); color:var(--white); padding:.75em 1.5em; border-radius:100px;
}
.btn-pill:hover{ background:var(--coral); }
.btn-line{
  border-bottom:1.5px solid currentColor; padding-bottom:.25em; color:var(--white);
}
.btn-line:hover{ color:var(--coral); border-color:var(--coral); }
.btn-line-light{ color:var(--obsidian); }
.btn-line-light:hover{ color:var(--crimson); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:500;
  padding:0 5vw; height:var(--nav-h); display:flex; align-items:center;
  transition:height .4s var(--ease), background .4s var(--ease), backdrop-filter .4s;
}
.nav.scrolled{
  height:64px; background:rgba(9,7,11,.72); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{ width:100%; display:flex; align-items:center; justify-content:space-between; }
.nav-logo{
  font-family:var(--font-display); font-size:1.5rem; letter-spacing:.04em; color:var(--white);
}
.nav-links{ display:flex; gap:2.1vw; }
.nav-links a{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  position:relative; padding:.3em 0;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--coral);
  transition:width .3s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-actions{ display:flex; align-items:center; gap:1.2rem; }
.nav-cta{ display:inline-flex; }
.nav-burger{
  display:none; flex-direction:column; gap:5px; width:28px; z-index:600;
}
.nav-burger span{ display:block; height:2px; background:var(--white); border-radius:2px; transition:transform .3s var(--ease), opacity .3s; }
.nav-burger.open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.nav-mobile{
  position:fixed; inset:0; top:0; background:var(--violet);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:1.6rem;
  padding:8vh 8vw; transform:translateY(-100%); transition:transform .5s var(--ease); z-index:400;
}
.nav-mobile.open{ transform:translateY(0); }
.nav-mobile a{
  font-family:var(--font-display); font-size:2.6rem; text-transform:uppercase; color:var(--white);
}
.nav-mobile .btn{ margin-top:1rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--obsidian); padding-top:var(--nav-h);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-blob{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; mix-blend-mode:screen;
}
.blob-1{ width:50vw; height:50vw; background:var(--violet); top:-10%; left:-12%; animation:drift1 18s ease-in-out infinite; }
.blob-2{ width:42vw; height:42vw; background:var(--crimson); bottom:-14%; right:-10%; animation:drift2 22s ease-in-out infinite; }
.hero-beam{
  position:absolute; top:0; left:50%; width:60vw; height:150%; transform:translateX(-50%) rotate(8deg);
  background:linear-gradient(180deg, transparent, rgba(216,204,255,.06), transparent);
}
@keyframes drift1{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(6vw,8vh);} }
@keyframes drift2{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-5vw,-6vh);} }

.hero-marquee{
  position:absolute; top:12%; left:0; width:100%; overflow:hidden; z-index:1;
  transform:rotate(-2deg); border-top:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15);
  padding:.5em 0; opacity:.55;
}
.marquee-track{ display:flex; width:max-content; animation:marquee 26s linear infinite; }
.marquee-track span{
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.1em; white-space:nowrap; padding-right:0;
}
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.hero-grid{
  position:relative; z-index:2; width:100%; max-width:1400px; margin:0 auto; padding:0 5vw;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
}
.hero-meta{ display:flex; flex-direction:column; gap:.6rem; color:var(--lavender); }
.hero-meta-left{ align-items:flex-start; }
.hero-meta-right{ align-items:flex-end; text-align:right; }

.hero-title{
  grid-column:1 / -1; grid-row:1; font-family:var(--font-display); text-transform:uppercase;
  text-align:center; line-height:.82; font-size:clamp(4rem, 15vw, 11rem); letter-spacing:-.01em;
  z-index:1; pointer-events:none; color:var(--white); opacity:.92;
}
.hero-title .line{ display:block; }
.hero-title .line-2{ background:linear-gradient(90deg, var(--coral), var(--violet-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.hero-bottle-wrap{
  grid-column:2; grid-row:1; position:relative; display:flex; justify-content:center; align-items:center;
  z-index:3; margin-top:1rem;
}
.hero-bottle{
  width:clamp(170px, 21vw, 280px); color:var(--violet); filter:drop-shadow(0 40px 70px rgba(122,46,255,.55)) drop-shadow(0 0 40px rgba(9,7,11,.6));
  animation:float 6s ease-in-out infinite;
}
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(-2deg);} 50%{ transform:translateY(-18px) rotate(2deg);} }
.hero-glow{
  position:absolute; width:220px; height:220px; background:radial-gradient(circle, rgba(255,90,82,.5), transparent 70%);
  filter:blur(40px); z-index:-1;
}

.hero-meta{ z-index:2; align-self:end; margin-bottom:2rem; grid-row:1; }
.hero-meta-left{ grid-column:1; }
.hero-meta-right{ grid-column:3; }

.hero-copy{
  grid-column:1 / -1; text-align:center; max-width:34ch; margin:2.5rem auto 0; font-weight:300;
  font-size:1.05rem; opacity:.8; z-index:2;
}
.hero-cta{
  grid-column:1 / -1; justify-self:center; margin-top:2rem; z-index:2;
}

.scroll-cue{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column;
  align-items:center; gap:.5rem; z-index:3;
}
.scroll-cue span{ font-family:var(--font-mono); font-size:.65rem; letter-spacing:.2em; opacity:.6; }
.scroll-cue i{ width:1px; height:34px; background:linear-gradient(var(--white), transparent); display:block; animation:scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ opacity:0; transform:scaleY(.3); transform-origin:top;} 50%{ opacity:1; transform:scaleY(1);} 100%{ opacity:0; transform:scaleY(.3); transform-origin:bottom;} }

@media(max-width:860px){
  .hero-grid{ grid-template-columns:1fr; row-gap:1.5rem; }
  .hero-title, .hero-meta-left, .hero-meta-right, .hero-bottle-wrap{ grid-column:1; grid-row:auto; }
  .hero-title{ font-size:clamp(3.2rem,15vw,6rem); order:1; }
  .hero-bottle-wrap{ order:2; margin-top:0; }
  .hero-meta{ flex-direction:row; justify-content:space-between; width:100%; margin-bottom:0; align-self:auto; }
  .hero-meta-left{ order:3; }
  .hero-meta-right{ order:4; align-items:flex-start; text-align:left; }
  .hero-copy{ order:5; margin-top:1rem; }
  .hero-cta{ order:6; }
}

/* ============================================================
   01 COLLECTION
   ============================================================ */
.collection{ padding:10rem 0 8rem; background:var(--obsidian); }
.coll-grid{
  display:grid; grid-template-columns:repeat(6, 1fr); gap:1.25rem; padding:0 5vw;
}
.coll-item{
  position:relative; border-radius:28px; padding:2.5rem 2rem; overflow:hidden;
  background:linear-gradient(155deg, var(--env), var(--env2));
  display:flex; flex-direction:column; justify-content:flex-end; min-height:420px;
  isolation:isolate;
}
.coll-item::before{
  content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 60%);
  z-index:0;
}
.coll-hero{ grid-column:span 3; grid-row:span 2; min-height:600px; }
.coll-med{ grid-column:span 3; }
.coll-small{ grid-column:span 3; }
.coll-visual{
  position:absolute; top:6%; right:2%; height:70%; display:flex; align-items:center; z-index:1;
  transition:transform .5s var(--ease);
}
.coll-hero .coll-visual{ height:78%; right:-4%; }
.coll-item:hover .coll-visual{ transform:translateY(-12px) scale(1.03); }
.coll-bottle{ height:100%; width:auto; color:rgba(0,0,0,.55); filter:drop-shadow(0 30px 40px rgba(0,0,0,.35)); }
.coll-info{ position:relative; z-index:2; max-width:80%; }
.coll-num{ display:block; font-size:.85rem; opacity:.7; margin-bottom:.5rem; }
.coll-name{ font-family:var(--font-display); font-size:clamp(1.8rem,3vw,3.2rem); text-transform:uppercase; line-height:.95; }
.coll-family{ display:block; margin:.6rem 0 .4rem; opacity:.85; }
.coll-notes{ opacity:.7; margin-bottom:1rem; font-size:.7rem; }
.coll-row{ display:flex; gap:1.4rem; margin-bottom:1.2rem; }
@media(max-width:1100px){
  .coll-hero{ grid-column:span 6; }
  .coll-med{ grid-column:span 6; }
  .coll-small{ grid-column:span 6; }
}
@media(max-width:640px){
  .coll-grid{ gap:1rem; }
  .coll-item{ min-height:380px; padding:2rem 1.4rem; }
  .coll-hero{ min-height:460px; }
  .coll-info{ max-width:100%; }
}

/* ============================================================
   02 SCENT EXPERIENCE
   ============================================================ */
.notes-exp{
  position:relative; background:linear-gradient(180deg, var(--lavender), #eee7ff);
  color:var(--obsidian); padding:8rem 0 9rem; overflow:hidden;
}
.notes-exp .eyebrow{ color:var(--crimson); }
.notes-stage{
  position:relative; max-width:900px; height:560px; margin:0 auto; display:flex; align-items:center; justify-content:center;
}
.notes-particles{ position:absolute; inset:0; z-index:0; }
.notes-particles span{
  position:absolute; border-radius:50%; background:var(--violet); opacity:.25;
}
.notes-orbit{ position:absolute; z-index:2; }
.notes-orbit[data-note="top"]{ top:6%; left:18%; }
.notes-orbit[data-note="heart"]{ top:38%; right:10%; }
.notes-orbit[data-note="base"]{ bottom:4%; left:32%; }

.note-node{
  width:130px; height:130px; border-radius:50%; background:var(--obsidian); color:var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  box-shadow:0 20px 40px rgba(9,7,11,.25); transition:transform .35s var(--ease), background .35s;
  animation:bob 5s ease-in-out infinite;
}
.notes-orbit[data-note="heart"] .note-node{ animation-delay:.6s; background:var(--crimson); }
.notes-orbit[data-note="base"] .note-node{ animation-delay:1.2s; background:var(--violet); }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
.note-node span:first-child{ font-size:.65rem; opacity:.6; }
.note-node span:last-child{ font-family:var(--font-display); font-size:1.1rem; letter-spacing:.05em; }
.note-node.active{ transform:scale(1.15); background:var(--coral) !important; }

.notes-panel{
  position:relative; z-index:1; background:var(--white); border-radius:24px; padding:3rem;
  max-width:440px; box-shadow:0 30px 60px rgba(53,16,74,.18); min-height:260px;
}
.notes-panel-inner{ display:none; animation:fadein .5s var(--ease); }
.notes-panel-inner.active{ display:block; }
@keyframes fadein{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.panel-tag{ color:var(--crimson); }
.notes-panel-inner h3{ font-family:var(--font-display); font-size:1.8rem; margin:.6rem 0 .8rem; text-transform:uppercase; }
.notes-panel-inner p{ opacity:.75; margin-bottom:1.2rem; font-weight:300; }
.notes-panel-inner ul{ display:flex; flex-wrap:wrap; gap:.6rem; }
.notes-panel-inner li{ border:1px solid var(--obsidian); border-radius:100px; padding:.4em 1em; font-size:.7rem; }

@media(max-width:760px){
  .notes-stage{ height:auto; flex-direction:column; gap:2rem; padding:0 6vw; }
  .notes-orbit{ position:static; }
  .notes-orbit[data-note]{ display:inline-flex; }
  .notes-stage{ display:grid; justify-items:center; }
  .notes-panel{ max-width:100%; padding:2rem; }
  .note-node{ width:100px; height:100px; }
}

/* ============================================================
   03 CAMPAIGN
   ============================================================ */
.campaign{
  position:relative; min-height:100vh; background:var(--crimson); overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6rem 5vw;
}
.campaign-bg{ position:absolute; inset:0; z-index:0; }
.campaign-shape{ position:absolute; border-radius:50%; filter:blur(70px); mix-blend-mode:screen; }
.shape-a{ width:44vw; height:44vw; background:var(--violet); top:-16%; right:-10%; opacity:.6; }
.shape-b{ width:38vw; height:38vw; background:var(--plum); bottom:-18%; left:-8%; opacity:.7; }
.campaign .eyebrow{ position:relative; z-index:2; }
.campaign-title{
  position:relative; z-index:2; font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(3.2rem, 11vw, 9rem); line-height:.86; text-align:center; margin-top:1.2rem;
}
.campaign-title span{ color:var(--obsidian); -webkit-text-stroke:1px var(--white); }
.campaign-bottle{
  position:relative; z-index:2; width:clamp(140px,16vw,220px); color:var(--obsidian); margin-top:-2rem;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.4));
}
.campaign-statement{
  position:relative; z-index:2; font-family:var(--font-mono); font-size:.85rem; letter-spacing:.1em;
  text-transform:uppercase; margin-top:2rem; opacity:.85; text-align:center;
}
.campaign-tag{
  position:absolute; bottom:2rem; left:5vw; z-index:2; opacity:.65;
}
@media(max-width:640px){ .campaign-tag{ position:relative; left:0; margin-top:2rem; text-align:center;} }

/* ============================================================
   04 FLAGSHIP
   ============================================================ */
.flagship{ background:var(--obsidian-2); padding:9rem 5vw; }
.flagship-grid{
  max-width:1300px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center;
}
.flagship-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:520px; }
.flagship-ring{
  position:absolute; width:420px; height:420px; border-radius:50%; border:1px dashed rgba(216,204,255,.3);
  animation:spin 40s linear infinite;
}
.flagship-ring::before{
  content:''; position:absolute; inset:40px; border-radius:50%; background:radial-gradient(circle, rgba(122,46,255,.35), transparent 70%);
}
@keyframes spin{ to{ transform:rotate(360deg);} }
.flagship-bottle{ position:relative; z-index:1; width:clamp(200px,22vw,320px); color:var(--coral); filter:drop-shadow(0 40px 70px rgba(255,90,82,.35)); }
.flagship-badge{
  position:absolute; top:8%; right:6%; text-align:right; color:var(--lavender); line-height:1.4; z-index:2;
}
.flagship-title{ font-family:var(--font-display); font-size:clamp(3rem,6vw,5.5rem); text-transform:uppercase; line-height:.9; margin:.6rem 0 1.2rem; }
.flagship-desc{ opacity:.75; max-width:46ch; margin-bottom:2.2rem; font-weight:300; font-size:1.05rem; }
.spec-table{ border-top:1px solid rgba(255,255,255,.15); }
.spec-row{
  display:flex; justify-content:space-between; padding:.9rem 0; border-bottom:1px solid rgba(255,255,255,.15);
  font-size:.72rem;
}
.spec-row span:first-child{ opacity:.5; }
.flagship-actions{ display:flex; gap:1.2rem; margin-top:2.4rem; flex-wrap:wrap; }
@media(max-width:900px){
  .flagship-grid{ grid-template-columns:1fr; }
  .flagship-visual{ min-height:380px; }
  .flagship-ring{ width:300px; height:300px; }
  .flagship-badge{ top:0; right:0; }
}

/* ============================================================
   05 SCENT LAB
   ============================================================ */
.lab{ background:var(--obsidian); padding:9rem 0; }
.lab-diagram{
  position:relative; max-width:1200px; margin:0 auto; height:700px; padding:0 5vw;
}
.lab-lines{ position:absolute; inset:0; width:100%; height:100%; }
.lab-lines path{ stroke:rgba(216,204,255,.25); stroke-width:1; fill:none; stroke-dasharray:4 6; }
.lab-node{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.4rem; width:150px;
  z-index:1;
}
.lab-node svg{
  width:52px; height:52px; padding:14px; border-radius:50%; background:var(--plum); color:var(--lavender);
  box-shadow:0 0 0 1px rgba(216,204,255,.25), 0 20px 40px rgba(122,46,255,.25);
  transition:transform .3s var(--ease), background .3s;
}
.lab-node:hover svg{ transform:scale(1.12) rotate(-6deg); background:var(--violet); }
.lab-node span{ color:var(--white); }
.lab-node small{ opacity:.5; font-size:.6rem; }
@media(max-width:760px){
  .lab-diagram{ height:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:2.4rem 1rem; padding:0 6vw; }
  .lab-lines{ display:none; }
  .lab-node{ position:static; transform:none; width:auto; }
}

/* ============================================================
   06 MANIFESTO
   ============================================================ */
.manifesto{
  background:linear-gradient(135deg, var(--violet), var(--plum) 60%, var(--obsidian));
  padding:9rem 5vw; display:flex; align-items:center; justify-content:center; min-height:80vh;
}
.manifesto-inner{ max-width:1100px; text-align:center; }
.manifesto-text{
  font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.8rem,4.6vw,3.6rem);
  line-height:1.15; letter-spacing:-.01em;
}
.manifesto-text span{ color:var(--coral); }
.manifesto-sign{ margin-top:2.5rem; opacity:.6; }

/* ============================================================
   07 GALLERY
   ============================================================ */
.gallery{ background:var(--obsidian); padding:9rem 0; overflow:hidden; }
.gallery-track{
  display:flex; gap:1.4rem; padding:0 5vw; overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none; cursor:grab; padding-bottom:1rem;
}
.gallery-track::-webkit-scrollbar{ display:none; }
.gallery-track:active{ cursor:grabbing; }
.gal-item{
  position:relative; flex:none; border-radius:20px; scroll-snap-align:start;
  background:linear-gradient(160deg, var(--c1), var(--c2));
  display:flex; align-items:flex-end; padding:1.4rem;
  transition:transform .4s var(--ease);
}
.gal-item::after{
  content:''; position:absolute; inset:0; border-radius:20px;
  background:radial-gradient(circle at 70% 20%, rgba(255,255,255,.22), transparent 55%);
}
.gal-item:hover{ transform:translateY(-10px); }
.gal-item span{ position:relative; z-index:1; opacity:.85; }
.gal-tall{ width:280px; height:520px; }
.gal-wide{ width:460px; height:340px; }
.gal-sq{ width:340px; height:340px; }
.gallery-hint{ text-align:center; margin-top:1.5rem; opacity:.4; }
@media(max-width:640px){
  .gal-tall{ width:220px; height:400px; }
  .gal-wide{ width:300px; height:280px; }
  .gal-sq{ width:260px; height:260px; }
}

/* ============================================================
   08 JOURNAL
   ============================================================ */
.journal{ background:var(--silver); color:var(--obsidian); padding:9rem 0; }
.journal .eyebrow{ color:var(--crimson); }
.journal-list{ padding:0 5vw; display:flex; flex-direction:column; }
.journal-item{
  display:grid; grid-template-columns:140px 1fr auto; gap:2rem; align-items:center;
  padding:2.2rem 0; border-top:1px solid rgba(9,7,11,.15); transition:padding .3s var(--ease);
}
.journal-list .journal-item:last-child{ border-bottom:1px solid rgba(9,7,11,.15); }
.journal-item:hover{ padding-left:1rem; }
.journal-cat{ color:var(--crimson); }
.journal-item h3{ font-family:var(--font-body); font-weight:600; font-size:1.4rem; }
.journal-item p{ display:none; }
.journal-meta{ display:flex; gap:1.4rem; opacity:.6; white-space:nowrap; }
@media(max-width:760px){
  .journal-item{ grid-template-columns:1fr; gap:.5rem; text-align:left; }
  .journal-item p{ display:block; opacity:.65; font-size:.9rem; margin-top:.3rem; }
}

/* ============================================================
   09 NEWSLETTER
   ============================================================ */
.newsletter{
  position:relative; background:var(--violet); padding:8rem 5vw; text-align:center; overflow:hidden;
}
.newsletter-blob{
  position:absolute; width:60vw; height:60vw; background:var(--coral); border-radius:50%;
  filter:blur(120px); opacity:.45; top:-20%; left:50%; transform:translateX(-50%); mix-blend-mode:screen;
}
.newsletter .eyebrow{ position:relative; z-index:1; }
.newsletter-title{
  position:relative; z-index:1; font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,5.5rem); line-height:.9; margin-top:1rem;
}
.newsletter-sub{ position:relative; z-index:1; max-width:44ch; margin:1.4rem auto 2.4rem; opacity:.85; font-weight:300; }
.newsletter-form{
  position:relative; z-index:1; display:flex; max-width:480px; margin:0 auto; gap:.8rem; flex-wrap:wrap; justify-content:center;
}
.newsletter-form input{
  flex:1; min-width:220px; background:rgba(0,0,0,.2); border:1.5px solid rgba(255,255,255,.4); border-radius:100px;
  padding:1em 1.4em; color:var(--white); font-size:.75rem;
}
.newsletter-form input::placeholder{ color:rgba(255,255,255,.6); }
.newsletter-form input:focus{ outline:none; border-color:var(--white); }
.newsletter-note{ position:relative; z-index:1; margin-top:1rem; opacity:.8; min-height:1.2em; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--obsidian); padding:5rem 5vw 2.5rem; }
.footer-top{
  display:flex; justify-content:space-between; align-items:center; padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:3rem; flex-wrap:wrap; gap:1.5rem;
}
.footer-logo{ font-family:var(--font-display); font-size:2.4rem; text-transform:uppercase; }
.footer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-bottom:3rem; }
.footer-col{ display:flex; flex-direction:column; gap:.9rem; }
.footer-col h4{ color:var(--lavender); margin-bottom:.4rem; }
.footer-col a{ opacity:.75; transition:opacity .2s, color .2s; font-size:.95rem; }
.footer-col a:hover{ opacity:1; color:var(--coral); }
.footer-bottom{
  display:flex; justify-content:space-between; opacity:.4; flex-wrap:wrap; gap:.6rem; font-size:.68rem;
}
@media(max-width:640px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(40px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }

/* ============================================================
   RESPONSIVE NAV SWITCH
   ============================================================ */
@media(max-width:900px){
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
}
@media(min-width:901px){
  .nav-mobile{ display:none; }
}

::selection{ background:var(--coral); color:var(--obsidian); }