/* =========================================================
   FUKU — Stage 1 foundation
   Editorial · wave-driven · Italy-first · mobile-first
   ========================================================= */

/* ---- Design tokens ------------------------------------ */
:root{
  /* colour — pulled from the can artwork */
  --paper:      #f4eee1;   /* warm off-white canvas   */
  --paper-2:    #efe7d6;   /* slightly deeper panel   */
  --ink:        #1b2a41;   /* navy — the primary ink  */
  --wave:       #3f5f79;   /* muted Hokusai blue      */
  --sun:        #d23b30;   /* rising-sun vermilion    */
  --ink-soft:   rgba(27,42,65,.62);
  --hair:       rgba(27,42,65,.14);

  /* type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* rhythm */
  --gutter: clamp(20px, 5vw, 72px);
  --section: clamp(72px, 12vw, 168px);
  --maxw: 1320px;

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

/* ---- Reset-ish --------------------------------------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:400; letter-spacing:-.01em; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* small label / eyebrow */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:1.05em 1.9em; border-radius:100px;
  border:1px solid var(--ink);
  transition:transform .5s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ transform:translateY(-2px); background:#25395a; }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.link-underline{
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid var(--ink); padding-bottom:2px;
  transition:opacity .3s var(--ease);
}
.link-underline:hover{ opacity:.55; }
.link-underline--soon{ border-color:var(--hair); color:var(--ink-soft); cursor:default; }
.link-underline--soon:hover{ opacity:1; }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:absolute; inset:0 0 auto 0; z-index:20;
  padding-block:clamp(18px,2.4vw,30px);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; }
.brand{
  font-family:var(--display); font-weight:600;
  font-size:1.55rem; letter-spacing:.02em; line-height:1;
}
.brand small{ font-size:.5em; letter-spacing:.3em; vertical-align:super; opacity:.6; margin-left:.15em; }
.nav{ display:flex; align-items:center; gap:clamp(20px,2.4vw,40px); }
.nav a{
  font-size:.8rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); opacity:.8; transition:opacity .3s var(--ease);
}
.nav a:hover{ opacity:1; }
.nav .nav-buy{ opacity:1; border-bottom:1.5px solid var(--sun); padding-bottom:3px; }
.nav-toggle{ display:none; }

@media (max-width:760px){
  .nav a:not(.nav-buy){ display:none; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative; min-height:94svh;
  display:flex; align-items:center;
  padding-top:clamp(120px,15vh,160px); padding-bottom:clamp(96px,14vh,150px);
  overflow:hidden;
}
.hero__grid{
  position:relative; z-index:5;
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center;
  gap:clamp(24px,4vw,56px); width:100%;
}
.hero__copy{ max-width:34ch; }
.hero h1{
  max-width:13ch;
  font-size:clamp(3.4rem,7.6vw,7.6rem);
  line-height:.92; letter-spacing:-.03em;
}
.hero h1 .it{ font-style:italic; }
.hero h1 .em{ color:var(--sun); }
.hero__sub{
  margin:clamp(24px,3vw,36px) 0 0; max-width:34ch;
  font-size:clamp(1rem,1.35vw,1.22rem); color:var(--ink-soft); line-height:1.55;
}
.hero__cta{ display:flex; align-items:center; gap:clamp(16px,2vw,26px); margin-top:clamp(28px,3.6vw,42px); flex-wrap:wrap; }

/* visual unit: sun + can together */
.hero__visual{
  position:relative; z-index:4;
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(420px,60vh,640px);
}
.sun{
  position:absolute; z-index:1; border-radius:50%;
  background:radial-gradient(circle at 42% 38%, #e0574c 0%, var(--sun) 56%, #b93028 100%);
  width:clamp(300px,34vw,500px); aspect-ratio:1;
  top:50%; left:50%; transform:translate(-52%,-54%);
}
.sun::after{ /* faint outer glow */
  content:""; position:absolute; inset:-9%; border-radius:50%;
  background:radial-gradient(circle, rgba(210,59,48,.16), transparent 62%);
}
.hero__can{
  position:relative; z-index:2;
  width:clamp(200px,20vw,300px);
  filter:drop-shadow(0 44px 55px rgba(27,42,65,.32));
  animation:floaty 7s var(--ease) infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

@media (max-width:820px){
  .hero{ min-height:auto; padding-top:130px; padding-bottom:80px; }
  .hero__grid{ grid-template-columns:1fr; text-align:center; }
  .hero__copy{ max-width:none; margin-inline:auto; }
  .hero__sub{ margin-inline:auto; }
  .hero__cta{ justify-content:center; }
  .hero__visual{ order:-1; min-height:clamp(320px,42vh,420px); margin-bottom:4px; }
  .sun{ width:min(66vw,360px); transform:translate(-50%,-52%); }
  .hero__can{ width:clamp(150px,42vw,220px); }
}

/* hero wave at the base of the section */
.hero__wave{
  position:absolute; left:0; right:0; bottom:-1px; z-index:3;
  width:100%; height:auto; color:var(--wave); pointer-events:none;
}

/* =========================================================
   Award strip
   ========================================================= */
.award{
  background:var(--ink); color:var(--paper);
  padding-block:clamp(14px,1.8vw,20px); overflow:hidden;
}
.award__track{
  display:flex; gap:3.5rem; white-space:nowrap;
  font-family:var(--display); font-size:clamp(1rem,1.5vw,1.35rem);
  animation:marquee 26s linear infinite; width:max-content;
}
.award__track span{ display:inline-flex; align-items:center; gap:3.5rem; }
.award__track b{ color:#e9c46a; font-weight:600; font-style:italic; }
.award .dot{ color:var(--sun); }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* =========================================================
   Story / fusion — the classic FUKU label as centrepiece
   ========================================================= */
.story{ padding-top:var(--section); background:var(--paper); overflow:hidden; }
.story__intro{ text-align:center; max-width:40ch; margin-inline:auto; }
.story__title{
  font-size:clamp(2.1rem,5vw,4.4rem); line-height:1; letter-spacing:-.02em; margin-top:.4em;
}
.story__lead{
  margin:clamp(18px,2.4vw,26px) auto 0; max-width:44ch;
  color:var(--ink-soft); font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.6;
}
.story__art{
  margin-top:clamp(36px,5vw,64px);
  width:100%; max-width:1180px; margin-inline:auto;
}
.story__art img{
  width:100%; height:auto; display:block;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* =========================================================
   The two beers
   ========================================================= */
.beers{ padding-block:var(--section); }
.beers__head{ text-align:center; max-width:42ch; margin:0 auto clamp(40px,6vw,80px); }
.beers__head h2{ font-size:clamp(2.2rem,5.2vw,4.2rem); line-height:1; margin-top:.35em; }
.beers__head p{ color:var(--ink-soft); margin:.9em auto 0; max-width:46ch; }

.beers__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,32px); }
@media (max-width:720px){ .beers__grid{ grid-template-columns:1fr; } }

.beer{
  position:relative; border-radius:22px; overflow:hidden;
  background:var(--paper-2); border:1px solid var(--hair);
  padding:clamp(28px,3.4vw,48px);
  min-height:clamp(420px,44vw,560px);
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.beer:hover{ transform:translateY(-6px); box-shadow:0 30px 60px rgba(27,42,65,.14); }
.beer__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.beer__abv{
  font-family:var(--display); font-size:clamp(1.4rem,2.4vw,2rem); line-height:1;
}
.beer__abv small{ display:block; font-family:var(--sans); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-top:.5em; }
.beer__img{
  position:absolute; left:0; right:0; top:6%; height:58%;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.beer__img img{ height:100%; filter:drop-shadow(0 30px 40px rgba(27,42,65,.24)); }
.beer__foot{ position:relative; z-index:2; }
.beer__name{ font-family:var(--display); font-size:clamp(1.8rem,3vw,2.6rem); line-height:1; }
.beer__desc{ color:var(--ink-soft); font-size:.94rem; margin:.6em 0 1.2em; max-width:30ch; }
.beer__tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1.4em; }
.beer__tags span{
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--wave); border:1px solid var(--hair); border-radius:100px; padding:.5em 1em;
}
/* zero — cool light panel to match the bottle mockup ground */
.beer--zero{ background:linear-gradient(165deg,#eef0f1,#e7ebec); }
.beer--zero .beer__img{ top:4%; height:64%; }
.beer--zero .beer__img img{ mix-blend-mode:multiply; }
.beer__abv--na{
  font-size:clamp(.95rem,1.4vw,1.2rem); line-height:1.04; text-align:right; color:var(--wave);
}

/* =========================================================
   Brand film band (lazy-loaded video)
   ========================================================= */
.film{ background:var(--ink); overflow:hidden; }
.film__video{
  display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; background:var(--ink);
}

/* =========================================================
   Wave divider (reusable)
   ========================================================= */
.wave-divider{ width:100%; height:auto; color:var(--wave); display:block; }

/* =========================================================
   Why FUKU
   ========================================================= */
.why{ padding-block:var(--section); }
.why__eyebrow{ display:block; text-align:center; margin-bottom:clamp(34px,5vw,60px); }
.why__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3vw,44px);
}
.why__item{ border-top:1px solid var(--hair); padding-top:22px; }
.why__ico{ display:block; width:30px; height:30px; color:var(--sun); margin-bottom:18px; }
.why__ico svg{ width:100%; height:100%; }
.why__item h3{ font-family:var(--display); font-size:clamp(1.2rem,1.8vw,1.5rem); margin-bottom:.4em; }
.why__item p{ color:var(--ink-soft); font-size:.92rem; max-width:26ch; }
@media(max-width:820px){ .why__grid{ grid-template-columns:1fr 1fr; gap:30px 26px; } }
@media(max-width:480px){ .why__grid{ grid-template-columns:1fr; } }

/* =========================================================
   The verdict (award moment)
   ========================================================= */
.verdict{ background:var(--ink); color:var(--paper); text-align:center; padding-block:clamp(84px,13vw,168px); }
.eyebrow--gold{ color:#e9c46a; }
.verdict__title{
  color:var(--paper); margin:.4em auto 0; max-width:16ch;
  font-size:clamp(2.4rem,6vw,5.4rem); line-height:.98; letter-spacing:-.02em;
}
.verdict__sub{
  margin:clamp(20px,3vw,30px) auto 0; max-width:54ch;
  color:rgba(244,238,225,.72); font-size:clamp(1rem,1.3vw,1.15rem); line-height:1.6;
}

/* =========================================================
   Where to find FUKU
   ========================================================= */
.find{ padding-block:var(--section); }
.find__eyebrow{ display:block; text-align:center; }
.find__title{
  text-align:center; margin:.35em auto clamp(42px,6vw,74px);
  font-size:clamp(2rem,4.6vw,3.6rem); line-height:1;
}
.find__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px); }
.find__col{ border-top:1px solid var(--hair); padding-top:26px; }
.find__col h3{ font-family:var(--display); font-size:clamp(1.35rem,2vw,1.75rem); margin-bottom:.55em; }
.find__col p{ color:var(--ink-soft); margin-bottom:1.5em; max-width:34ch; }
.find__col .btn{ margin-right:12px; }
.find__col .link-underline--soon{ display:inline-block; margin-top:14px; }
@media(max-width:760px){ .find__grid{ grid-template-columns:1fr; gap:40px; } }

/* =========================================================
   Newsletter
   ========================================================= */
.signup{ background:var(--paper-2); padding-block:clamp(58px,8vw,100px); }
.signup__inner{ display:flex; align-items:center; justify-content:space-between; gap:clamp(28px,4vw,56px); flex-wrap:wrap; }
.signup__title{ font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1; }
.signup__copy p{ color:var(--ink-soft); margin-top:.6em; max-width:34ch; }
.signup__form{ display:flex; flex-wrap:wrap; gap:10px; flex:1; min-width:280px; max-width:480px; }
.signup__form input{
  flex:1; min-width:200px; border:1px solid var(--ink); border-radius:100px;
  padding:1em 1.4em; font:inherit; background:transparent; color:var(--ink);
}
.signup__form input::placeholder{ color:var(--ink-soft); }
.signup__form .btn{ white-space:nowrap; }
.signup__msg{ flex-basis:100%; margin:6px 0 0; color:var(--wave); font-family:var(--display); font-style:italic; font-size:1.05rem; }
.signup__hp{ position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; }
@media(max-width:640px){ .signup__form{ max-width:none; } }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:var(--ink); color:var(--paper); padding-block:clamp(44px,6vw,76px); }
.site-footer .brand{ color:var(--paper); }
.foot-top{
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  padding-bottom:clamp(26px,4vw,40px); border-bottom:1px solid rgba(244,238,225,.16);
}
.foot-links{ display:flex; gap:clamp(18px,2vw,28px); flex-wrap:wrap; }
.foot-links a{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; opacity:.78; }
.foot-links a:hover{ opacity:1; }
.foot-bottom{ display:flex; justify-content:space-between; gap:10px 32px; flex-wrap:wrap; padding-top:clamp(22px,3vw,34px); }
.foot-bottom p{ color:rgba(244,238,225,.6); font-size:.82rem; margin:0; }
.foot-bottom a{ border-bottom:1px solid rgba(244,238,225,.3); }
.foot-legal{ opacity:.85; }
@media(max-width:560px){ .foot-top{ align-items:flex-start; } }

/* stage note ribbon (dev only) */
.stage-note{
  position:fixed; bottom:14px; right:14px; z-index:99;
  background:var(--ink); color:var(--paper); font-family:var(--sans);
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.6em 1em; border-radius:100px; opacity:.8;
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
}