/* ==========================================================================
   LOWKEY — foundations
   The palette is sampled directly from the product photography so that the
   page and the packaging sit in exactly the same colour world.
   ========================================================================== */

:root{
  /* --- brand ------------------------------------------------------------ */
  --orange:        #EF7869;   /* sampled: product-shot background */
  --orange-deep:   #DE5540;   /* sampled: bottle body, shadow side */
  --orange-soft:   #F8CDC3;
  --orange-wash:   #FDEEEA;
  --lime:          #DCEB2A;   /* sampled: cap */
  --green:         #24402C;   /* sampled: green bottle body */
  --green-wash:    #EDF1EC;

  --paper:         #FDFAF7;
  --white:         #FFFFFF;
  --ink:           #141110;
  --ink-2:         #504844;
  --ink-3:         #7A716B;   /* 4.57:1 on --paper — the lightest that still passes AA */
  --line:          rgba(20,17,16,.13);
  --line-strong:   rgba(20,17,16,.26);

  /* --- type ------------------------------------------------------------- */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-sans:    "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Rubik Bubbles draws its uppercase Y smooth while every other letter is
     lumpy, so the wordmark read as unfinished. Bagel Fat One is consistent
     and closer to the inflated lettering on the bottle. */
  --f-bubble:  "Bagel Fat One", var(--f-sans);

  --t-xs:   clamp(0.75rem,  0.732rem + 0.09vw, 0.8125rem);
  --t-sm:   clamp(0.875rem, 0.855rem + 0.10vw, 0.9375rem);
  --t-base: clamp(1rem,     0.968rem + 0.16vw, 1.125rem);
  --t-md:   clamp(1.1875rem,1.100rem + 0.44vw, 1.4375rem);
  --t-lg:   clamp(1.5rem,   1.290rem + 1.05vw, 2.125rem);
  --t-xl:   clamp(2rem,     1.580rem + 2.10vw, 3.25rem);
  --t-2xl:  clamp(2.625rem, 1.720rem + 4.52vw, 5.5rem);
  --t-3xl:  clamp(3.25rem,  1.550rem + 8.50vw, 8rem);
  --t-mega: clamp(6rem,    -0.500rem + 26.0vw, 22rem);

  /* --- space ------------------------------------------------------------ */
  --gut:    clamp(1.25rem, 0.9rem + 1.7vw, 3.5rem);
  --sec:    clamp(4.5rem,  2.6rem + 8vw,  11rem);
  --maxw:   1560px;
  --measure: 62ch;

  --bar-h:  clamp(58px, 4.4vw, 76px);

  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-soft:   cubic-bezier(.33,1,.68,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{ 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(--f-sans);
  font-size:var(--t-base);
  line-height:1.55;
  font-weight:400;
  letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,video,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
table{ border-collapse:collapse; width:100%; }

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:2px;
}
::selection{ background:var(--orange); color:var(--ink); }

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */
.display{
  font-family:var(--f-display);
  font-weight:500;
  font-variation-settings:"SOFT" 24, "WONK" 1, "opsz" 96;
  line-height:0.94;
  letter-spacing:-0.028em;
  text-wrap:balance;
}
.display em{
  font-style:italic;
  font-variation-settings:"SOFT" 44, "WONK" 1, "opsz" 96;
}

.wordmark{
  font-family:var(--f-bubble);
  font-weight:400;
  letter-spacing:0.004em;
  line-height:1;
  text-transform:uppercase;
}

.eyebrow{
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:0.145em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.eyebrow--dark{ color:rgba(20,17,16,.80); }   /* 5.0:1 on --orange */

.lede{
  font-size:var(--t-md);
  line-height:1.42;
  letter-spacing:-0.014em;
  color:var(--ink-2);
  max-width:36ch;
  text-wrap:pretty;
}
.body{ max-width:var(--measure); color:var(--ink-2); text-wrap:pretty; }
.body + .body{ margin-top:1.1em; }
.num{ font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.wrap--narrow{ max-width:940px; }
.section{ padding-block:var(--sec); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:var(--ink);
  --btn-fg:var(--paper);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7em;
  padding:1.05em 1.9em;
  border-radius:100px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:var(--t-sm);
  font-weight:600;
  letter-spacing:0.005em;
  line-height:1;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform .5s var(--ease-out), color .35s var(--ease-soft);
}
/* One hover idea, executed properly: a fill that wipes up from the baseline. */
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--btn-hover, var(--orange));
  transform:translate3d(0,101%,0);
  transition:transform .55s var(--ease-out);
}
.btn:hover{ transform:translateY(-2px); }
.btn:hover::after{ transform:translate3d(0,0,0); }
.btn:active{ transform:translateY(0) scale(.985); transition-duration:.12s; }
.btn__label{ position:relative; display:block; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--ink);
  --btn-hover:var(--ink);
  box-shadow:inset 0 0 0 1.4px var(--line-strong);
}
.btn--ghost:hover{ color:var(--paper); }

.btn--on-orange{
  --btn-bg:var(--ink);
  --btn-fg:var(--paper);
  --btn-hover:var(--paper);
}
.btn--on-orange:hover{ color:var(--ink); }

.btn--light{
  --btn-bg:var(--paper);
  --btn-fg:var(--ink);
  --btn-hover:var(--orange);
}
.btn--outline-light{
  --btn-bg:transparent;
  --btn-fg:var(--paper);
  --btn-hover:var(--paper);
  box-shadow:inset 0 0 0 1.4px rgba(253,250,247,.5);
}
.btn--outline-light:hover{ color:var(--ink); }

.btn--block{ width:100%; }
.btn--lg{ padding:1.25em 2.3em; font-size:var(--t-base); }

/* Text link with a rule that draws in from the left */
.tlink{
  position:relative;
  display:inline-block;
  font-weight:500;
  padding-bottom:2px;
}
.tlink::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1.2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.tlink:hover::after{ transform:scaleX(1); transform-origin:left; }
.tlink--on::after{ transform:scaleX(1); transform-origin:left; }
.tlink--on:hover::after{ transform:scaleX(0); transform-origin:right; }

/* --------------------------------------------------------------------------
   Scroll reveal — progressive enhancement.
   Nothing is hidden until JS has confirmed it can animate, so a blocked CDN
   or a script error can never leave the page blank.
   -------------------------------------------------------------------------- */
.js-motion [data-reveal]{
  opacity:0;
  transform:translate3d(0, var(--reveal-y, 20px), 0);
}
.js-motion [data-reveal].is-in{
  opacity:1;
  transform:translate3d(0,0,0);
  transition:opacity .9s var(--ease-soft), transform 1.05s var(--ease-out);
  transition-delay:var(--reveal-delay, 0ms);
}

.js-motion [data-reveal-mask]{ overflow:hidden; }
.js-motion [data-reveal-mask] > *{
  transform:translate3d(0,105%,0);
  transition:transform 1.15s var(--ease-out);
  transition-delay:var(--reveal-delay, 0ms);
}
.js-motion [data-reveal-mask].is-in > *{ transform:translate3d(0,0,0); }

/* Line-by-line masked reveal for display headings (lines built by JS) */
.js-motion .lines__line{ display:block; overflow:hidden; }
.js-motion .lines__inner{
  display:block;
  transform:translate3d(0,108%,0);
  transition:transform 1.1s var(--ease-out);
}
.js-motion .lines.is-in .lines__inner{ transform:translate3d(0,0,0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js-motion [data-reveal],
  .js-motion [data-reveal-mask] > *,
  .js-motion .lines__inner{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}
.skip{
  position:fixed;
  top:-120px; left:var(--gut);
  z-index:200;
  padding:.9em 1.4em;
  background:var(--ink);
  color:var(--paper);
  border-radius:100px;
  font-size:var(--t-sm);
  font-weight:600;
  transition:top .3s var(--ease-out);
}
.skip:focus{ top:calc(var(--bar-h) + 10px); }