/* ============================================================
   NIA BISSAP — Drink the Moment
   Cinematic editorial site · Barcelona 2026
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --ink:#070504;
  --ink-2:#0d0908;
  --gold:#C6A15B;
  --gold-soft:#b9965a;
  --gold-bright:#e2c489;
  --burgundy:#4A0D14;
  --burgundy-deep:#2a070c;
  --cream:#F2E6D0;
  --cream-dim:rgba(242,230,208,.62);
  --cream-faint:rgba(242,230,208,.38);
  --offwhite:#FAFAF8;

  --serif:"Instrument Serif",Georgia,serif;
  --brand:"EB Garamond",Georgia,serif;
  --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --maxw:1320px;
  --gut:clamp(22px,5vw,84px);

  --sp-s:clamp(40px,6vh,72px);
  --sp-m:clamp(80px,12vh,150px);
  --sp-l:clamp(120px,20vh,260px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* tweakable */
  --accent:var(--gold);
  --reveal-y:34px;
  --reveal-blur:8px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;height:100vh}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--burgundy);color:var(--cream)}

/* film-grain + vignette ambient overlay */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:4;mix-blend-mode:overlay;opacity:.05;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- TYPE PRIMITIVES ---------- */
.tag{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(9px,1vw,11px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-block;
}
.tag--dim{color:var(--cream-faint)}

.title{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.01em;
  font-size:clamp(30px,5vw,62px);
  color:var(--cream);
  text-wrap:balance;
}
.title .it{font-style:italic;color:var(--accent)}

.lead{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,1.7vw,20px);
  line-height:1.7;
  color:var(--cream-dim);
  max-width:44ch;
  text-wrap:pretty;
}
.body{
  font-size:clamp(14px,1.1vw,16px);
  color:var(--cream-dim);
  max-width:50ch;
  text-wrap:pretty;
}
.gold{color:var(--accent)}
.serif-it{font-family:var(--serif);font-style:italic}

/* hairline rule */
.rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.6}
.rule--c{width:64px;margin-inline:auto}
.dot{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{position:relative;padding-block:var(--sp-m)}
.section--pad-l{padding-block:var(--sp-l)}

/* ---------- REVEAL ANIM ---------- */
.r{opacity:0;transform:translateY(var(--reveal-y));filter:blur(var(--reveal-blur));
   transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out),filter 1.1s var(--ease-out);
   transition-delay:var(--d,0s)}
.r.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){
  .r{opacity:1!important;transform:none!important;filter:none!important}
}

/* line draw */
.draw{transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-out)}
.draw.in{transform:scaleX(1)}
.draw--c{transform-origin:center}

/* ---------- TWEAK STATES ---------- */
.anim-off .r,.anim-off .draw{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
.anim-off .ed__media img{transform:none!important}
.anim-off .hero__scroll i{animation:none!important}
.no-grain .grain{display:none!important}

/* ============================================================
   FILM INTRO
   ============================================================ */
.intro{
  position:fixed;inset:0;z-index:60;background:var(--ink);
  display:grid;place-items:center;
  transition:opacity 1.1s var(--ease),visibility 1.1s;
}
.intro.gone{opacity:0;visibility:hidden;pointer-events:none}
.intro__mark{display:flex;flex-direction:column;align-items:center;gap:18px;opacity:0;transform:translateY(8px)}
.intro__mark.show{opacity:1;transform:none;transition:opacity 1.4s var(--ease-out),transform 1.4s var(--ease-out)}
.intro__flower{width:24px;height:24px;opacity:0;transform:scale(.6);transition:opacity 1s .1s var(--ease-out),transform 1s .1s var(--ease-out)}
.intro__flower.show{opacity:1;transform:none}
.intro__nia{
  font-family:var(--brand);font-weight:500;letter-spacing:.22em;
  font-size:clamp(44px,9vw,104px);color:var(--gold-bright);line-height:1;padding-left:.22em;
}
.intro__bissap{font-family:var(--sans);font-weight:300;letter-spacing:.7em;font-size:clamp(11px,1.5vw,15px);color:var(--burgundy);padding-left:.7em}
.intro__bissap b{color:var(--gold);font-weight:300}
.intro__line{width:0;height:1px;background:var(--gold);opacity:.7;transition:width 1.1s .2s var(--ease-out)}
.intro__line.show{width:120px}
.intro__skip{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-faint);
  background:none;border:0;cursor:pointer;transition:color .3s}
.intro__skip:hover{color:var(--accent)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--gut);
  transition:background .5s var(--ease),padding .5s var(--ease),opacity .6s;
  opacity:0;
}
.nav.ready{opacity:1}
.nav.solid{background:rgba(7,5,4,.72);backdrop-filter:blur(14px);border-bottom:1px solid rgba(198,161,91,.12);padding-block:14px}
.nav__brand{display:flex;align-items:baseline;gap:.5em}
.nav__nia{font-family:var(--brand);font-weight:500;letter-spacing:.18em;font-size:21px;color:var(--cream);padding-left:.18em}
.nav__bissap{font-family:var(--sans);font-weight:300;letter-spacing:.42em;font-size:9px;text-transform:uppercase;color:var(--accent)}
.nav__cta{
  font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);
  display:inline-flex;align-items:center;gap:.8em;padding:11px 22px;border:1px solid rgba(198,161,91,.4);border-radius:100px;
  transition:background .4s,color .4s,border-color .4s;
}
.nav__cta:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
@media (max-width:640px){.nav__cta{padding:9px 16px;font-size:10px}}

/* ============================================================
   HERO
   ============================================================ */
.hero{min-height:100svh;position:relative;display:flex;align-items:center;justify-content:center;
  padding:120px var(--gut) var(--sp-s);overflow:hidden}
.hero__glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 42%,rgba(74,13,20,.45),transparent 70%)}
.hero__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(18px,3vh,34px);width:100%}
.hero__eyebrow{display:flex;gap:1.4em;align-items:center;color:var(--cream-faint)}
.hero__eyebrow .tag{color:var(--cream-faint)}
.hero__tagline{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.015em;
  font-size:clamp(34px,7vw,86px);color:var(--cream);text-wrap:balance}
.hero__tagline .it{display:block;font-style:italic;color:var(--accent)}
.hero__bottle{position:relative;width:auto}
.hero__bottle img{height:clamp(280px,46vh,520px);width:auto;margin-inline:auto;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.7))}
.hero__sub{max-width:48ch;margin-inline:auto}
.hero__scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--sans);font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--cream-faint);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.hero__scroll i{width:1px;height:38px;background:linear-gradient(var(--accent),transparent);display:block;animation:scrolldn 2.4s var(--ease) infinite}
@keyframes scrolldn{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* CTA underline link */
.cta{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream);
  display:inline-flex;align-items:center;gap:1em;position:relative;padding-bottom:8px}
.cta::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--accent);transform:scaleX(1);transform-origin:right;transition:transform .5s var(--ease)}
.cta:hover::after{transform:scaleX(0);transform-origin:left}
.cta__dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* solid pill button */
.btn{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:.8em;
  padding:18px 40px;border-radius:100px;border:1px solid var(--accent);color:var(--accent);
  background:transparent;cursor:pointer;transition:background .45s var(--ease),color .45s var(--ease),letter-spacing .45s}
.btn:hover{background:var(--accent);color:var(--ink);letter-spacing:.26em}
.btn--block{width:100%}

/* ============================================================
   STATEMENT (silence) sections
   ============================================================ */
.statement{text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(20px,4vh,40px);max-width:980px;margin-inline:auto}
.statement__h{font-family:var(--serif);font-weight:400;line-height:1.18;font-size:clamp(26px,4.2vw,52px);letter-spacing:-.01em;text-wrap:balance}
.statement__h .it{font-style:italic;color:var(--accent);display:block}
.statement__sub{max-width:52ch}

/* manifesto, big breathing */
.manifesto{text-align:center;display:flex;flex-direction:column;gap:.2em;align-items:center}
.manifesto p{font-family:var(--serif);font-size:clamp(24px,4vw,50px);line-height:1.28;font-weight:400;color:var(--cream)}
.manifesto p.dim{color:var(--cream-faint)}
.manifesto p.accent{font-style:italic;color:var(--accent)}
.manifesto__tail{font-family:var(--sans);font-weight:300;font-size:clamp(14px,1.6vw,18px);color:var(--cream-dim);max-width:46ch;margin-top:1.6em;line-height:1.7}

/* ============================================================
   EDITORIAL SPLIT
   ============================================================ */
.ed{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:center}
.ed--rev .ed__media{order:2}
.ed__media{position:relative;overflow:hidden;border-radius:2px}
.ed__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.6s var(--ease)}
.ed__media.kb img{will-change:transform}
.ed__media--portrait{aspect-ratio:4/5}
.ed__media--tall{aspect-ratio:3/4.4}
.ed__cap{position:absolute;left:16px;bottom:14px;font-family:var(--sans);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-dim);
  background:rgba(7,5,4,.4);backdrop-filter:blur(6px);padding:6px 12px;border:1px solid rgba(198,161,91,.18)}
.ed__copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,2.4vh,26px)}
.ed__copy .rule{width:48px}
@media (max-width:860px){
  .ed{grid-template-columns:1fr;gap:34px}
  .ed--rev .ed__media{order:0}
  .ed__media--portrait,.ed__media--tall{aspect-ratio:4/5;max-height:78vh}
}

/* ============================================================
   BLOCKS (espacios seleccionados — 4)
   ============================================================ */
.head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(40px,7vh,80px);max-width:760px}
.blocks{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(198,161,91,.16)}
.block{padding:clamp(28px,3vw,40px) clamp(18px,2vw,30px) clamp(40px,6vh,64px);border-bottom:1px solid rgba(198,161,91,.16);
  border-right:1px solid rgba(198,161,91,.1);display:flex;flex-direction:column;gap:14px;position:relative;transition:background .5s}
.block:last-child{border-right:0}
.block:hover{background:linear-gradient(180deg,rgba(74,13,20,.22),transparent)}
.block__n{font-family:var(--sans);font-size:10px;letter-spacing:.3em;color:var(--accent)}
.block__name{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.6vw,24px);line-height:1.2;color:var(--cream)}
.block__desc{font-size:13px;color:var(--cream-dim);line-height:1.6;max-width:26ch}
@media (max-width:860px){.blocks{grid-template-columns:1fr 1fr}.block:nth-child(2){border-right:0}}
@media (max-width:520px){.blocks{grid-template-columns:1fr}.block{border-right:0}}

/* ============================================================
   POINTS (numbered rows)
   ============================================================ */
.points{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,46px)}
.point{display:flex;flex-direction:column;gap:12px}
.point__n{font-family:var(--serif);font-style:italic;font-size:clamp(30px,3vw,46px);color:var(--accent);line-height:1;opacity:.85}
.point h3{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.4vw,21px);color:var(--cream);line-height:1.25}
.point p{font-size:13px;color:var(--cream-dim);line-height:1.6;max-width:30ch}
@media (max-width:860px){.points{grid-template-columns:1fr 1fr;gap:34px 28px}}
@media (max-width:520px){.points{grid-template-columns:1fr}}

/* "No" list variant */
.point--no .point__n{font-size:clamp(22px,2vw,30px)}

/* ============================================================
   MOMENTS GRID
   ============================================================ */
.moments{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px)}
.moment{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:2px}
.moment img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--ease),filter 1.4s}
.moment::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,5,4,.72));transition:opacity .5s}
.moment:hover img{transform:scale(1.12)}
.moment__cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:flex;align-items:baseline;justify-content:space-between}
.moment__cap b{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.5vw,22px);color:var(--cream)}
.moment__cap span{font-family:var(--sans);font-size:10px;letter-spacing:.24em;color:var(--accent)}
@media (max-width:780px){.moments{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.moments{grid-template-columns:1fr}.moment{aspect-ratio:3/2.4}}

/* ============================================================
   FULL-BLEED CINEMATIC BREAK (parallax)
   ============================================================ */
.cine{position:relative;height:clamp(360px,56vh,580px);overflow:hidden;display:grid;place-items:center}
.cine__bg{position:absolute;inset:-12% 0;z-index:0}
.cine__bg img{width:100%;height:100%;object-fit:cover;will-change:transform}
.cine::before{content:"";position:absolute;inset:0;z-index:1;background:
  radial-gradient(78% 100% at 50% 50%,rgba(7,5,4,.66),rgba(7,5,4,.85) 72%,rgba(7,5,4,.96)),
  linear-gradient(180deg,rgba(7,5,4,.55),rgba(7,5,4,.4) 40%,rgba(7,5,4,.66))}
.cine__inner{position:relative;z-index:2;text-align:center;padding-inline:var(--gut);display:flex;flex-direction:column;align-items:center;gap:26px;text-shadow:0 2px 40px rgba(0,0,0,.95)}
.cine__h{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.6vw,46px);line-height:1.18;letter-spacing:-.01em;text-wrap:balance;max-width:52ch;color:var(--cream);
  text-shadow:0 2px 40px rgba(0,0,0,.6)}
.cine__h .it{font-style:italic;color:var(--gold-bright)}

/* ============================================================
   ESPACIOS IDEALES — big type
   ============================================================ */
.ideals{display:flex;flex-direction:column;border-top:1px solid rgba(198,161,91,.16)}
.ideal{display:flex;align-items:baseline;gap:.6em;padding:clamp(16px,2.4vh,26px) 0;border-bottom:1px solid rgba(198,161,91,.12);
  font-family:var(--serif);font-weight:400;font-size:clamp(26px,5.4vw,72px);line-height:1;color:var(--cream-faint);
  transition:color .5s var(--ease),padding-left .5s var(--ease);cursor:default}
.ideal i{font-family:var(--sans);font-style:normal;font-size:clamp(10px,1vw,13px);letter-spacing:.2em;color:var(--accent);transform:translateY(-.4em);opacity:0;transition:opacity .5s}
.ideal:hover{color:var(--cream);padding-left:clamp(12px,2vw,40px)}
.ideal:hover i{opacity:1}

/* ============================================================
   HOSPITALITY NOTES
   ============================================================ */
.notes{list-style:none;display:flex;flex-direction:column;width:100%}
.notes li{display:flex;align-items:baseline;gap:18px;padding:18px 0;border-top:1px solid rgba(198,161,91,.14);
  font-family:var(--body);font-weight:400;font-size:15px;letter-spacing:-.4px;line-height:1.6;color:var(--cream)}
.notes li:last-child{border-bottom:1px solid rgba(198,161,91,.14)}
.notes li i{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--accent);min-width:24px}

/* ============================================================
   FORM
   ============================================================ */
.contact__quote{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3.2vw,40px);line-height:1.3;text-align:center;max-width:20ch;margin:0 auto clamp(48px,9vh,110px);text-wrap:balance}
.contact__inner{max-width:760px;margin-inline:auto}
.contact__head{text-align:center;display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(34px,6vh,60px);align-items:center}
.form{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px}
.field{display:flex;flex-direction:column;gap:9px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-faint)}
.field input,.field select,.field textarea{
  background:transparent;border:0;border-bottom:1px solid rgba(198,161,91,.3);
  color:var(--cream);font-family:var(--body);font-size:15px;padding:10px 2px;transition:border-color .4s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{resize:vertical;min-height:46px}
.field select{appearance:none;cursor:pointer}
.field select option{background:var(--ink-2);color:var(--cream)}
.field input::placeholder,.field textarea::placeholder{color:var(--cream-faint)}
.select-wrap{position:relative}
.select-wrap::after{content:"";position:absolute;right:4px;top:50%;width:7px;height:7px;border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.form__foot{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:14px;text-align:center}
.form__note{font-size:12px;color:var(--cream-dim);max-width:46ch}
.form__note--faint{color:var(--cream-faint);font-size:11px}
.form__success{grid-column:1/-1;text-align:center;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--accent);padding:24px;border:1px solid rgba(198,161,91,.3)}
@media (max-width:640px){.form{grid-template-columns:1fr}}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding:var(--sp-m) var(--gut) 40px;border-top:1px solid rgba(198,161,91,.14);background:var(--ink-2)}
.footer__inner{max-width:var(--maxw);margin-inline:auto;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer__brand{display:flex;flex-direction:column;gap:8px}
.footer__brand b{font-family:var(--brand);font-weight:500;letter-spacing:.16em;font-size:24px;color:var(--cream)}
.footer__brand span{font-family:var(--sans);font-weight:300;letter-spacing:.34em;text-transform:uppercase;font-size:10px;color:var(--accent)}
.footer__brand em{font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-faint)}
.footer__col{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.footer__col a{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--cream-dim);transition:color .3s}
.footer__col a:hover{color:var(--accent)}
.footer__legal{max-width:var(--maxw);margin:var(--sp-s) auto 0;padding-top:24px;border-top:1px solid rgba(198,161,91,.1);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-faint)}
.footer__legal nav{display:flex;gap:20px}
@media (max-width:640px){.footer__col{align-items:flex-start}}