/* ============================================================
   GIVANO — Emotional Energy Through Sound
   Cinematic dark identity system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700;800;900&family=Hanken+Grotesk:wght@300;400;500;600&display=swap');

:root{
  /* base */
  --black:        oklch(0.145 0.006 25);   /* near-black, faint warmth */
  --bg:           oklch(0.165 0.007 25);
  --bg-2:         oklch(0.205 0.008 28);    /* dark grey depth */
  --panel:        oklch(0.235 0.010 30);
  --hairline:     oklch(0.34 0.012 28);

  /* bordeaux — rich, dark, cinematic. one chroma, low. */
  --wine:         oklch(0.40 0.115 16);     /* deep wine red */
  --wine-soft:    oklch(0.46 0.13 16);
  --wine-glow:    oklch(0.52 0.15 16);
  --wine-line:    oklch(0.44 0.10 16);

  /* type */
  --offwhite:     oklch(0.93 0.006 70);     /* warm off-white */
  --muted:        oklch(0.66 0.008 60);     /* secondary grey */
  --faint:        oklch(0.48 0.008 50);

  --display: 'Archivo', system-ui, sans-serif;
  --body: 'Hanken Grotesk', system-ui, sans-serif;

  --maxw: 1380px;
  --gut: clamp(22px, 5vw, 110px);
  --ease: cubic-bezier(0.22,0.61,0.36,1);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--body);
  background:var(--black);
  color:var(--offwhite);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  line-height:1.5;
}

body.intro-lock{ overflow:hidden; height:100vh; }

::selection{ background:var(--wine); color:var(--offwhite); }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* film grain over everything */
.grain{
  position:fixed; inset:-150%;
  z-index:3; pointer-events:none;
  opacity:0.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(5) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-6%,4%); }
  40%{ transform:translate(4%,-7%); }
  60%{ transform:translate(-3%,3%); }
  80%{ transform:translate(5%,2%); }
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:9000;
  pointer-events:none; border-radius:50%;
  mix-blend-mode:screen;
  will-change:transform;
}
.cursor-dot{
  width:6px; height:6px;
  background:var(--wine-glow);
  box-shadow:0 0 10px 2px var(--wine);
  transform:translate(-50%,-50%);
}
.cursor-ring{
  width:34px; height:34px;
  border:1px solid color-mix(in oklch, var(--wine-soft) 80%, transparent);
  box-shadow:0 0 22px -4px var(--wine);
  transform:translate(-50%,-50%) scale(1);
  transition:width .35s var(--ease-out), height .35s var(--ease-out),
             border-color .35s, opacity .3s, background .3s;
  display:grid; place-items:center;
}
.cursor-ring .c-label{
  font-family:var(--body);
  font-size:9.5px; letter-spacing:0.22em; font-weight:600;
  color:var(--offwhite); opacity:0; transition:opacity .25s;
  text-transform:uppercase; white-space:nowrap;
}
body.cursor-hover .cursor-ring{ width:54px; height:54px; border-color:var(--wine-glow); }
body.cursor-label .cursor-ring{
  width:74px; height:74px;
  background:color-mix(in oklch, var(--wine) 28%, transparent);
  border-color:var(--wine-soft);
}
body.cursor-label .cursor-ring .c-label{ opacity:1; }
body.cursor-down .cursor-ring{ width:24px; height:24px; }

.click-ripple{
  position:fixed; z-index:8999; pointer-events:none;
  width:14px; height:14px; border-radius:50%;
  border:1px solid var(--wine-soft);
  transform:translate(-50%,-50%) scale(1);
  animation:ripple .6s var(--ease-out) forwards;
  mix-blend-mode:screen;
}
@keyframes ripple{ to{ transform:translate(-50%,-50%) scale(5); opacity:0; } }

@media (hover:hover) and (pointer:fine){
  body.cursor-ready, body.cursor-ready *{ cursor:none !important; }
}
.cursor-dot, .cursor-ring{ display:none; }
body.cursor-ready .cursor-dot, body.cursor-ready .cursor-ring{ display:grid; }

/* ============================================================
   INTRO — handwritten logo reveal
   ============================================================ */
#intro{
  position:fixed; inset:0; z-index:8000;
  background:var(--black);
  display:grid; place-items:center;
  transition:opacity .9s var(--ease), visibility .9s;
}
#intro.done{ opacity:0; visibility:hidden; pointer-events:none; }
.intro-stage{ position:relative; width:min(60vw,560px); }
.intro-glow{
  position:absolute; inset:-60% -30%;
  background:radial-gradient(closest-side, color-mix(in oklch,var(--wine) 55%, transparent), transparent 72%);
  filter:blur(40px); opacity:0;
  animation:introGlow 2.4s var(--ease) forwards;
}
@keyframes introGlow{
  0%{ opacity:0; transform:scale(0.6); }
  35%{ opacity:0.9; }
  100%{ opacity:0.5; transform:scale(1); }
}
.intro-logo{
  position:relative; width:100%; height:auto;
  clip-path:inset(0 100% 0 0);
  animation:write 1.8s var(--ease) 0.15s forwards;
}
@keyframes write{
  from{ clip-path:inset(0 100% 0 0); }
  to{ clip-path:inset(0 0% 0 0); }
}
@media (prefers-reduced-motion: reduce){
  .intro-logo{ animation:none; clip-path:none; }
  .intro-glow{ animation:none; opacity:0.5; }
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; }

.eyebrow{
  font-size:11px; letter-spacing:0.4em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:''; width:30px; height:1px; background:var(--wine-line);
  display:inline-block;
}
.eyebrow.no-line::before{ display:none; }

h1,h2,h3{ font-family:var(--display); font-weight:800; line-height:0.98; letter-spacing:-0.01em; }

.section-title{
  font-size:clamp(38px, 6.5vw, 92px);
  text-transform:uppercase; letter-spacing:-0.02em;
  line-height:0.92;
}
.lede{
  font-size:clamp(17px,1.5vw,21px); color:var(--muted);
  max-width:54ch; line-height:1.6; font-weight:300;
}

/* reveal animation */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gut);
  transition:padding .4s var(--ease), background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.shrink{
  padding:14px var(--gut);
  background:color-mix(in oklch, var(--black) 72%, transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid color-mix(in oklch,var(--hairline) 50%, transparent);
}
.nav-logo{ height:46px; width:auto; opacity:.96; transition:transform .4s var(--ease); }
.nav-logo:hover{ transform:scale(1.04); }
.nav-links{ display:flex; align-items:center; gap:clamp(18px,3vw,46px); }
.nav-links a{
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--muted); font-weight:500; position:relative; padding:6px 0;
  transition:color .3s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--wine-soft); transition:width .35s var(--ease);
}
.nav-links a:hover{ color:var(--offwhite); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  color:var(--offwhite) !important;
  border:1px solid var(--hairline);
  padding:9px 18px !important;
  transition:border-color .3s, background .3s !important;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ border-color:var(--wine-soft); background:color-mix(in oklch,var(--wine) 18%, transparent); }
.nav-burger{ display:none; }

/* ============================================================
   BUTTONS — sharp, minimal, premium
   ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  font-size:12.5px; letter-spacing:0.2em; text-transform:uppercase; font-weight:600;
  padding:17px 30px; border:1px solid var(--hairline);
  color:var(--offwhite); background:transparent; overflow:hidden;
  transition:border-color .4s var(--ease), color .4s;
  will-change:transform;
}
.btn .bdot{ width:6px; height:6px; background:var(--wine-glow); border-radius:50%; box-shadow:0 0 8px var(--wine); transition:transform .4s; }
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, color-mix(in oklch,var(--wine) 85%, black), var(--wine-soft));
  transform:translateY(101%); transition:transform .5s var(--ease-out);
}
.btn:hover{ border-color:var(--wine-soft); }
.btn:hover::before{ transform:translateY(0); }
.btn:hover .bdot{ transform:scale(1.5); }
.btn-primary{ border-color:color-mix(in oklch,var(--wine-soft) 70%, transparent); }
.btn-ghost{ color:var(--muted); }
.btn-ghost:hover{ color:var(--offwhite); }

/* ============================================================
   HERO
   ============================================================ */
#hero{
  min-height:100svh; display:flex; align-items:center;
  padding-top:120px; padding-bottom:60px; overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-portrait{
  position:absolute; top:0; right:0; height:100%; width:55%;
  object-fit:cover; object-position:60% 40%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
  filter:grayscale(0.25) contrast(1.05) brightness(0.82);
  will-change:transform;
}
.hero-portrait::after{ content:''; }
.hero-veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 80% at 18% 50%, var(--black) 12%, transparent 60%),
    linear-gradient(180deg, var(--black) 0%, transparent 22%, transparent 70%, var(--black) 100%);
}
.hero-glow{
  position:absolute; width:60vw; height:60vw; max-width:760px; max-height:760px;
  border-radius:50%; z-index:1; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in oklch,var(--wine) 42%, transparent), transparent 70%);
  filter:blur(30px); opacity:0.7;
  transform:translate(-50%,-50%); left:50%; top:55%;
  will-change:left,top;
  transition:left .9s var(--ease-out), top .9s var(--ease-out);
}
.hero-lens{
  position:fixed; width:230px; height:230px; border-radius:50%;
  z-index:2; pointer-events:none; opacity:0;
  backdrop-filter:blur(7px) saturate(1.2);
  -webkit-mask-image:radial-gradient(closest-side,#000 32%, transparent 72%);
  mask-image:radial-gradient(closest-side,#000 32%, transparent 72%);
  transform:translate(-50%,-50%);
  transition:opacity .5s;
  will-change:transform;
}
#hero:hover .hero-lens{ opacity:0.85; }

.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-eyebrow{ margin-bottom:30px; }
.hero-title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(74px, 17vw, 260px);
  line-height:0.82; letter-spacing:-0.035em; text-transform:uppercase;
  color:var(--offwhite);
}
.hero-slogan{
  font-family:var(--display); font-weight:500;
  font-size:clamp(20px,2.9vw,40px); letter-spacing:0.01em;
  margin-top:28px; color:var(--offwhite);
}
.hero-slogan b{ font-weight:500; color:var(--wine-soft); }
.hero-sub{
  margin-top:22px; max-width:42ch;
  font-size:clamp(15px,1.4vw,18px); color:var(--muted); font-weight:300; line-height:1.65;
}
.hero-actions{ display:flex; gap:16px; margin-top:44px; flex-wrap:wrap; }
.hero-meta{
  position:absolute; bottom:-8px; right:0; z-index:2;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  text-align:right;
}
.hero-meta .m1{ font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); }
.hero-meta .m2{ font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--faint); }
.scroll-cue{
  position:absolute; bottom:34px; left:var(--gut); z-index:2;
  display:flex; align-items:center; gap:12px;
  font-size:10px; letter-spacing:0.32em; text-transform:uppercase; color:var(--faint);
}
.scroll-cue .line{ width:1px; height:40px; background:linear-gradient(var(--wine-line),transparent); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:''; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--wine-glow); animation:scrolldot 2.2s var(--ease) infinite; }
@keyframes scrolldot{ 0%{ top:-50%; } 60%,100%{ top:120%; } }

/* ============================================================
   MUSIC & ACHIEVEMENTS
   ============================================================ */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(46px,7vw,90px); }
.section-head .lede{ margin-bottom:8px; }

#music{ padding:clamp(90px,12vw,170px) 0; }

/* featured release — editorial */
.release{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(30px,5vw,80px);
  align-items:center; padding:clamp(40px,6vw,70px) 0;
  border-top:1px solid color-mix(in oklch,var(--hairline) 60%, transparent);
}
.release:nth-child(even) .release-art{ order:2; }
.release-art{
  display:block; position:relative; aspect-ratio:1/1; overflow:hidden;
  background:var(--bg-2);
}
.release-art img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out), filter 1.1s; transform:scale(1.04); filter:brightness(.92); }
.release:hover .release-art img{ transform:scale(1.09); filter:brightness(1); }
.release-art::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 120% at 50% 120%, color-mix(in oklch,var(--wine) 30%, transparent), transparent 55%);
  opacity:0; transition:opacity .6s; mix-blend-mode:screen;
}
.release:hover .release-art::after{ opacity:1; }
.release-tag{
  position:absolute; top:18px; left:18px; z-index:2;
  font-size:10px; letter-spacing:0.26em; text-transform:uppercase;
  padding:7px 12px; color:var(--offwhite);
  background:color-mix(in oklch,var(--black) 55%, transparent);
  backdrop-filter:blur(6px); border:1px solid color-mix(in oklch,var(--wine-line) 60%, transparent);
}
.release-info{ max-width:48ch; }
.release-no{ font-size:12px; letter-spacing:0.3em; color:var(--faint); font-weight:600; }
.release-title{ font-size:clamp(34px,4.6vw,62px); text-transform:uppercase; margin:14px 0 4px; line-height:0.96; }
.release-feat{ font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--wine-soft); font-weight:600; }
.release-desc{ color:var(--muted); font-weight:300; margin:22px 0 26px; line-height:1.7; font-size:15.5px; }
.release-foot{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; gap:2px; }
.stat .num{ font-family:var(--display); font-weight:800; font-size:clamp(30px,3.4vw,46px); line-height:1; color:var(--offwhite); }
.stat .num .plus{ color:var(--wine-soft); }
.stat .lab{ font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--faint); }
.link-stream{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase; font-weight:600;
  color:var(--offwhite); padding-bottom:5px; border-bottom:1px solid var(--wine-line);
  transition:gap .35s, border-color .35s;
}
.link-stream:hover{ gap:16px; border-color:var(--wine-glow); }
.link-stream svg{ width:13px; height:13px; }

/* achievements band */
.achv{ margin-top:clamp(60px,9vw,120px); padding-top:clamp(50px,7vw,90px); border-top:1px solid color-mix(in oklch,var(--hairline) 60%, transparent); }
.achv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:color-mix(in oklch,var(--hairline) 45%, transparent); margin-top:46px; }
.achv-cell{
  background:var(--black); padding:clamp(26px,3vw,40px) clamp(22px,2.5vw,34px);
  min-height:180px; display:flex; flex-direction:column; justify-content:space-between;
  transition:background .5s;
}
.achv-cell:hover{ background:var(--bg); }
.achv-cell .big{ font-family:var(--display); font-weight:800; font-size:clamp(34px,4vw,56px); line-height:0.95; }
.achv-cell .big .plus, .achv-cell .big .unit{ color:var(--wine-soft); }
.achv-cell .txt{ font-size:13.5px; color:var(--muted); font-weight:300; line-height:1.55; }
.achv-cell .k{ font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:var(--faint); margin-bottom:14px; }

.collab-row{ margin-top:clamp(50px,7vw,90px); display:flex; align-items:center; gap:clamp(20px,4vw,60px); flex-wrap:wrap; }
.collab-row .lbl{ font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--faint); }
.collab-names{ display:flex; gap:clamp(18px,3vw,46px); flex-wrap:wrap; }
.collab-names span{ font-family:var(--display); font-weight:700; font-size:clamp(20px,2.4vw,34px); text-transform:uppercase; color:var(--offwhite); letter-spacing:0.01em; transition:color .3s; }
.collab-names span:hover{ color:var(--wine-soft); }

/* ============================================================
   CREATIVE PROCESS — video blocks
   ============================================================ */
#process{ padding:clamp(90px,12vw,170px) 0; background:var(--bg); }
.process-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,340px)); justify-content:center; gap:clamp(24px,3vw,46px); margin-top:clamp(46px,6vw,80px); }
.vblock{ }
.vframe{
  position:relative; aspect-ratio:9/16; overflow:hidden; background:var(--bg-2);
  border:1px solid color-mix(in oklch,var(--hairline) 50%, transparent);
  cursor:pointer;
}
.vframe:focus-visible{ outline:2px solid var(--wine-soft); outline-offset:3px; }
.vframe img{ width:100%; height:100%; object-fit:cover; filter:brightness(.7) contrast(1.05); transition:transform 1.3s var(--ease-out), filter .8s; transform:scale(1.05); }
.vblock:hover .vframe img{ transform:scale(1.1); filter:brightness(.82); }
.vframe::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 40%, color-mix(in oklch,var(--black) 80%, transparent));
}
.vplay{
  position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; display:grid; place-items:center;
  border:1px solid color-mix(in oklch,var(--offwhite) 50%, transparent);
  background:color-mix(in oklch,var(--black) 35%, transparent); backdrop-filter:blur(4px);
  transition:transform .5s var(--ease-out), background .4s, border-color .4s;
}
.vplay::after{ content:''; width:0;height:0; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--offwhite); margin-left:4px; transition:border-color .4s; }
.vblock:hover .vplay{ transform:translate(-50%,-50%) scale(1.08); background:color-mix(in oklch,var(--wine) 55%, transparent); border-color:var(--wine-soft); }
.vframe.playing{ cursor:default; }
.vframe.playing img, .vframe.playing::before, .vframe.playing .vplay, .vframe.playing .vframe-tag, .vframe.playing .vph{ opacity:0; pointer-events:none; }
.vframe-video{ position:absolute; inset:0; z-index:3; width:100%; height:100%; background:var(--black); }
.vframe-tag{ position:absolute; z-index:2; bottom:16px; left:16px; font-size:10px; letter-spacing:0.26em; text-transform:uppercase; color:var(--offwhite); padding:6px 11px; background:color-mix(in oklch,var(--black) 50%, transparent); backdrop-filter:blur(5px); border:1px solid color-mix(in oklch,var(--wine-line) 50%, transparent); }
.vph{ position:absolute; z-index:2; bottom:16px; right:16px; font-family:'Hanken Grotesk',monospace; font-size:9.5px; letter-spacing:0.1em; color:var(--faint); }
.vblock h3{ font-size:clamp(24px,2.6vw,34px); text-transform:uppercase; margin:26px 0 14px; line-height:1; }
.vblock p{ color:var(--muted); font-weight:300; line-height:1.7; font-size:15px; max-width:46ch; }
.vblock .vno{ font-size:12px; letter-spacing:0.3em; color:var(--faint); font-weight:600; }

.process-social{ margin-top:clamp(50px,7vw,90px); display:flex; align-items:center; gap:clamp(20px,4vw,60px); flex-wrap:wrap; }
.process-social .lbl{ font-size:11px; letter-spacing:0.3em; text-transform:uppercase; color:var(--faint); }
.process-social-links{ display:flex; gap:clamp(18px,3vw,36px); flex-wrap:wrap; }
.process-social-links a{ font-family:var(--display); font-weight:700; font-size:clamp(16px,1.8vw,22px); text-transform:uppercase; color:var(--offwhite); letter-spacing:0.01em; transition:color .3s; }
.process-social-links a:hover{ color:var(--wine-soft); }

/* ============================================================
   STORY & SOUND
   ============================================================ */
#story{ padding:clamp(90px,12vw,180px) 0; }
.story-hero{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(34px,5vw,80px); align-items:end; margin-bottom:clamp(60px,9vw,120px); }
.story-headline{ font-size:clamp(40px,6.5vw,104px); text-transform:uppercase; line-height:0.9; letter-spacing:-0.025em; }
.story-headline .wine{ color:var(--wine-soft); }
.story-portrait{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--bg-2); }
.story-portrait img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.2) brightness(.85); transition:transform 1.4s var(--ease-out); transform:scale(1.05); will-change:transform; }
.story-portrait:hover img{ transform:scale(1.1); }
.story-portrait::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%, color-mix(in oklch,var(--black) 70%, transparent)); }

.story-blocks{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(34px,5vw,72px); }
.sblock{ }
.sblock .k{ display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:0.32em; text-transform:uppercase; color:var(--wine-soft); font-weight:600; margin-bottom:20px; }
.sblock .k .n{ font-family:var(--display); color:var(--faint); }
.sblock h3{ font-size:clamp(22px,2.4vw,30px); text-transform:uppercase; margin-bottom:18px; line-height:1.05; }
.sblock p{ color:var(--muted); font-weight:300; line-height:1.75; font-size:15.5px; }
.sblock p + p{ margin-top:16px; }

.kw-band{ margin-top:clamp(60px,8vw,110px); padding-top:clamp(46px,6vw,80px); border-top:1px solid color-mix(in oklch,var(--hairline) 60%, transparent); }
.kw-flow{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.kw{ font-size:12px; letter-spacing:0.18em; text-transform:uppercase; font-weight:500; color:var(--muted); padding:11px 20px; border:1px solid color-mix(in oklch,var(--hairline) 70%, transparent); transition:color .35s, border-color .35s, background .35s; }
.kw:hover{ color:var(--offwhite); border-color:var(--wine-soft); background:color-mix(in oklch,var(--wine) 16%, transparent); }

/* ============================================================
   UPCOMING — mysterious
   ============================================================ */
#upcoming{ position:relative; padding:clamp(110px,16vw,220px) 0; overflow:hidden; text-align:center; }
.upcoming-bg{ position:absolute; inset:0; z-index:0; }
.upcoming-bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.5) brightness(.32) contrast(1.05); will-change:transform; }
.upcoming-bg::after{ content:''; position:absolute; inset:0; background:radial-gradient(80% 90% at 50% 50%, transparent, var(--black) 78%), linear-gradient(180deg,var(--black),transparent 30%,transparent 70%,var(--black)); }
.upcoming-inner{ position:relative; z-index:2; max-width:840px; margin-inline:auto; }
.upcoming-inner .eyebrow{ justify-content:center; }
.upcoming-title{ font-size:clamp(38px,6vw,88px); text-transform:uppercase; line-height:0.95; margin:28px 0 30px; letter-spacing:-0.02em; }
.upcoming-title .wine{ color:var(--wine-soft); }
.upcoming-inner p{ color:var(--muted); font-weight:300; line-height:1.75; font-size:clamp(16px,1.5vw,19px); max-width:60ch; margin-inline:auto; }
.upcoming-line{ margin-top:40px; font-family:var(--display); font-weight:600; font-size:clamp(15px,1.4vw,18px); letter-spacing:0.24em; text-transform:uppercase; color:var(--offwhite); display:inline-flex; align-items:center; gap:14px; }
.upcoming-line .dot{ width:7px; height:7px; border-radius:50%; background:var(--wine-glow); box-shadow:0 0 12px var(--wine); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.7);} }

/* ============================================================
   CONTACT
   ============================================================ */
#contact{ padding:clamp(90px,12vw,170px) 0; background:var(--bg); }
.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(40px,6vw,90px); margin-top:clamp(40px,6vw,70px); }
.contact-intro p{ color:var(--muted); font-weight:300; line-height:1.75; font-size:16px; max-width:42ch; }
.contact-rows{ margin-top:42px; display:flex; flex-direction:column; }
.crow{ display:flex; flex-direction:column; gap:6px; padding:22px 0; border-top:1px solid color-mix(in oklch,var(--hairline) 55%, transparent); }
.crow:last-child{ border-bottom:1px solid color-mix(in oklch,var(--hairline) 55%, transparent); }
.crow .k{ font-size:10px; letter-spacing:0.28em; text-transform:uppercase; color:var(--faint); }
.crow .v{ font-size:clamp(16px,1.6vw,19px); color:var(--offwhite); font-weight:400; }
.crow a.v{ display:inline-flex; align-items:center; gap:10px; width:fit-content; transition:color .3s; }
.crow a.v:hover{ color:var(--wine-soft); }
.services{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.services span{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); padding:7px 14px; border:1px solid color-mix(in oklch,var(--hairline) 70%, transparent); }
.wa-btn{ margin-top:30px; }

/* form */
.cform{ display:flex; flex-direction:column; gap:0; }
.field{ position:relative; border-bottom:1px solid color-mix(in oklch,var(--hairline) 60%, transparent); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; }
.field-row .field:first-child{ border-right:1px solid color-mix(in oklch,var(--hairline) 60%, transparent); }
.field label{ position:absolute; left:0; top:26px; font-size:13px; letter-spacing:0.04em; color:var(--faint); pointer-events:none; transition:.3s var(--ease); text-transform:uppercase; }
.field input, .field textarea, .field select{
  width:100%; background:transparent; border:none; outline:none;
  color:var(--offwhite); font-family:var(--body); font-size:16px;
  padding:30px 14px 16px 0; resize:none;
}
.field.full input{ padding-right:0; }
.field textarea{ min-height:120px; }
.field select{ cursor:pointer; appearance:none; color:var(--muted); padding-right:24px; }
.field select option{ background:var(--bg-2); color:var(--offwhite); }
.field.sel::after{ content:''; position:absolute; right:4px; top:38px; width:7px; height:7px; border-right:1px solid var(--muted); border-bottom:1px solid var(--muted); transform:rotate(45deg); pointer-events:none; }
.field:focus-within label,
.field.filled label{ top:10px; font-size:9.5px; letter-spacing:0.24em; color:var(--wine-soft); }
.field::after.bar{}
.field .bar{ position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--wine-soft); transition:width .4s var(--ease); }
.field:focus-within .bar{ width:100%; }
.form-foot{ margin-top:30px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.form-note{ font-size:12px; color:var(--faint); letter-spacing:0.04em; }
.form-ok{ color:var(--wine-soft); font-size:13px; letter-spacing:0.1em; opacity:0; transition:opacity .4s; }
.form-ok.show{ opacity:1; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ padding:clamp(70px,9vw,120px) 0 40px; border-top:1px solid color-mix(in oklch,var(--hairline) 50%, transparent); }
.foot-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; }
.foot-logo{ height:58px; width:auto; opacity:.95; margin-bottom:18px; }
.foot-slogan{ font-family:var(--display); font-weight:500; font-size:clamp(18px,2vw,26px); color:var(--muted); }
.foot-socials{ display:flex; flex-direction:column; gap:2px; align-items:flex-end; }
.foot-socials a{ font-size:13px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); padding:7px 0; transition:color .3s, letter-spacing .3s; }
.foot-socials a:hover{ color:var(--wine-soft); letter-spacing:0.24em; }
.foot-bottom{ margin-top:clamp(50px,7vw,90px); padding-top:28px; border-top:1px solid color-mix(in oklch,var(--hairline) 40%, transparent); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-bottom span{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .release{ grid-template-columns:1fr; }
  .release:nth-child(even) .release-art{ order:0; }
  .story-hero{ grid-template-columns:1fr; }
  .story-portrait{ aspect-ratio:16/10; max-height:420px; }
  .achv-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  :root{ --gut:22px; }
  .nav-links{ position:fixed; inset:0; z-index:190; flex-direction:column; justify-content:center; gap:30px; background:color-mix(in oklch,var(--black) 96%, transparent); backdrop-filter:blur(20px); transform:translateX(100%); transition:transform .5s var(--ease); }
  .nav-links.open{ transform:none; }
  .nav-links a{ font-size:18px; }
  .nav-burger{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; z-index:200; background:none; border:none; width:44px; height:44px; padding:0; margin-right:-10px; }
  .nav-burger span{ width:24px; height:1.5px; background:var(--offwhite); transition:.35s; }
  .nav-burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-burger.open span:nth-child(2){ opacity:0; }
  .nav-burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .hero-portrait{ width:100%; opacity:.5; -webkit-mask-image:linear-gradient(180deg,transparent,#000 50%); mask-image:linear-gradient(180deg,transparent,#000 50%); object-position:50% 30%; }
  .hero-meta{ display:none; }
  .process-grid{ grid-template-columns:1fr; }
  .story-blocks{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .field-row .field:first-child{ border-right:none; }
  .foot-socials{ align-items:flex-start; }
  .cursor-dot,.cursor-ring{ display:none !important; }
}