/** Shopify CDN: Minification failed

Line 91:0 All "@import" rules must come first

**/
/* ============================================================
   HYDRAW — base design tokens, reset, utilities
   Type sizes: clamp(min @375px, fluid @1440px target, max @1920px)
   ============================================================ */

:root {
  /* Brand palette */
  --c-olive: #706A3A;
  --c-olive-deep: #5A552F;
  --c-cream: #FEFBF0;
  --c-cream-soft: #FDF6D9;
  --c-ink: #242217;
  --c-mint: #C1E5A4;
  --c-mint-hover: #B0D894;
  --c-line: rgba(36, 34, 23, 0.12);
  --c-line-on-olive: rgba(254, 251, 240, 0.18);

  /* Surface defaults */
  --bg-page: var(--c-cream);
  --fg-page: var(--c-ink);

  /* Typography families — Euclid Circular A is self-hosted (see theme.liquid @font-face) */
  --ff-sans: 'Euclid Circular A', 'Helvetica Neue', Arial, sans-serif;
  --ff-mono: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Type scale — fluid clamp(min, ideal, max) where ideal targets 1440px */
  --fs-h1-xl: clamp(2.5rem, 4.444vw, 4rem);              /* 64px @1440 — global H1 / hero-side */
  --fs-h1: clamp(2.5rem, 1.25rem + 5vw, 3.39rem);         /* 54.21px — sect 4 HYDRAW */
  --fs-h2: clamp(2rem, 1rem + 3.5vw, 2.44rem);            /* 38.99px — sect 1 hero */
  --fs-body-lg: clamp(1.25rem, 0.85rem + 1.5vw, 1.94rem); /* 31.01px — sect 3 body */
  --fs-body: clamp(1rem, 0.75rem + 1vw, 1.65rem);         /* 26.46px — sect 1 body */
  --fs-num: clamp(2.75rem, 1.5rem + 5vw, 4.44rem);        /* 71.09px — sect 3 numbers */
  --fs-mono-lg: clamp(1.1rem, 0.85rem + 0.8vw, 1.7rem);   /* 27.22px — sect 7 video caption */
  --fs-mono: clamp(0.95rem, 0.85rem + 0.5vw, 1.46rem);    /* 23.34px — sect 6 */
  --fs-mono-sm: clamp(1rem, 0.85rem + 0.4vw, 1.29rem);    /* 20.7px  — sect 4 footer line */
  --fs-mono-xs: clamp(0.9rem, 0.8rem + 0.3vw, 1.225rem);  /* 19.61px — buttons */
  --fs-mono-mini: clamp(0.85rem, 0.8rem + 0.2vw, 1.04rem);/* 16.67px — sachet text */
  --fs-meta: clamp(0.8rem, 0.78rem + 0.1vw, 0.886rem);    /* 14.17px — sect 2 */
  --fs-meta-2: clamp(0.8rem, 0.78rem + 0.1vw, 0.95rem);   /* 15.33px — sect 4 body */
  --fs-meta-mono: clamp(0.78rem, 0.76rem + 0.1vw, 0.886rem); /* 14.18px — sect 8 */

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 10rem;

  /* Containers — sections span the full viewport; --gutter is the L/R padding.
     Fluid: 64px at the 1440 figma artboard (4.44vw), floors near 16px on mobile,
     caps at 128px on very wide screens. */
  --w-narrow: 880px;
  --gutter: clamp(1rem, 4.44vw, 8rem);

  /* Radii */
  --r-button: 26px;
  --r-card: 24px;
  --r-card-lg: 36px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 600ms;
  --dur-cinematic: 900ms;

  /* Layers */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;

  /* Header height (used for sticky offsets) */
  --header-h: 88px;
}

/* Roboto Mono via Google Fonts (used for buttons and small mono labels). */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;600&display=swap');

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg-page);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* `clip` hides horizontal overflow without becoming a scroll container,
     so position:sticky on the header keeps working. Older browsers fall back to hidden. */
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; border-radius: 4px; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 1000;
  background: var(--c-ink); color: var(--c-cream);
  padding: 0.75rem 1.25rem; border-radius: 8px;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout primitives ---------- */
.page-w { width: 100%; padding-inline: var(--gutter); }
.page-w--narrow { max-width: var(--w-narrow); margin-inline: auto; }
.page-w--bleed  { padding-inline: 0; }
.section { padding-block: clamp(3rem, 6vw, 7rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 4rem); }
.section--olive { background: var(--c-olive); color: var(--c-cream); }
.section--cream { background: var(--c-cream); color: var(--c-ink); }
.section--cream-soft { background: var(--c-cream-soft); color: var(--c-ink); }

/* ---------- Type utilities ---------- */
.t-h1-xl { font-family: var(--ff-sans); font-weight: 400; font-size: var(--fs-h1-xl); line-height: 1.06; letter-spacing: -0.01em; }
.t-h1    { font-family: var(--ff-sans); font-weight: 400; font-size: var(--fs-h1);    line-height: 1.06; letter-spacing: -0.01em; }
.t-h2    { font-family: var(--ff-sans); font-weight: 400; font-size: var(--fs-h2);    line-height: 1.25; letter-spacing: -0.01em; }
.t-body-lg { font-family: var(--ff-sans); font-weight: 400; font-size: var(--fs-body-lg); line-height: 1.155; letter-spacing: -0.01em; }
.t-body    { font-family: var(--ff-sans); font-weight: 400; font-size: var(--fs-body);    line-height: 1.253; letter-spacing: -0.01em; }
.t-meta    { font-family: var(--ff-sans); font-weight: 600; font-size: var(--fs-meta);    line-height: 1.253; letter-spacing: -0.01em; }
.t-meta-2  { font-family: var(--ff-sans); font-weight: 400; font-size: var(--fs-meta-2);  line-height: 1.352; letter-spacing: -0.01em; }
.t-num     { font-family: var(--ff-sans); font-weight: 400; font-size: var(--fs-num);     line-height: 0.41;  letter-spacing: -0.01em; }
.t-mono-lg { font-family: var(--ff-mono); font-weight: 400; font-size: var(--fs-mono-lg); line-height: 1.175; letter-spacing: -0.01em; }
.t-mono    { font-family: var(--ff-mono); font-weight: 400; font-size: var(--fs-mono);    line-height: 1.071; letter-spacing: -0.01em; }
.t-mono-sm { font-family: var(--ff-mono); font-weight: 400; font-size: var(--fs-mono-sm); line-height: 1.797; letter-spacing: -0.01em; }
.t-mono-mini { font-family: var(--ff-mono); font-weight: 400; font-size: var(--fs-mono-mini); line-height: 1.522; letter-spacing: -0.01em; }
.t-mono-meta { font-family: var(--ff-mono); font-weight: 400; font-size: var(--fs-meta-mono); line-height: 1.038; letter-spacing: -0.01em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono); font-weight: 400;
  font-size: var(--fs-mono-xs); line-height: 0.863; letter-spacing: -0.01em;
  text-transform: capitalize; text-align: center; white-space: nowrap;
  padding: 14px 27px;
  min-width: 185px; min-height: 80px;
  border-radius: var(--r-button);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(36, 34, 23, 0.35); }
.btn:active { transform: translateY(0); }

.btn--mint   { background: var(--c-mint); color: var(--c-ink); }
.btn--mint:hover { background: var(--c-mint-hover); }
.btn--ghost  { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-cream); }
.btn--ghost-cream { background: transparent; color: var(--c-cream); border-color: var(--c-cream); }
.btn--ghost-cream:hover { background: var(--c-cream); color: var(--c-olive); }
.btn--solid-ink { background: var(--c-ink); color: var(--c-cream); }
.btn--solid-ink:hover { background: var(--c-olive); }

/* Compact button variant for header / inline use */
.btn--sm { min-width: 0; min-height: 0; padding: 10px 18px; }

/* Stacked variant — 2-line button (verb / HYDRAW.) per the figma spec
   where line-height (16.92) is intentionally tighter than font-size (19.61) */
.btn--stack {
  flex-direction: column;
  gap: 0.15em;
  line-height: 0.863;
}
.btn--stack .btn__line { display: block; }
.btn--stack.btn--sm { padding: 12px 20px; }

/* ---------- Reveal-on-scroll utility ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-cinematic) var(--ease-out),
              transform var(--dur-cinematic) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--fade { transform: none; }

/* ---------- Accessibility helpers ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Forms baseline ---------- */
input, button, select, textarea { font: inherit; }
input[type="email"], input[type="text"] {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
  border-radius: var(--r-pill);
  padding: 1rem 1.5rem;
  width: 100%;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
input[type="email"]::placeholder, input[type="text"]::placeholder { color: currentColor; opacity: 0.7; }
input[type="email"]:focus, input[type="text"]:focus { outline: none; background: rgba(255, 255, 255, 0.06); }

/* ---------- Shopify-injected consent banner ---------- */
/* The privacy/cookie banner is injected into the page and otherwise inherits
   the theme's fluid `--fs-body`, which blows it up on wide screens. Pin it to
   fixed sizes so it renders at Shopify's intended scale. */
#shopify-pc__banner,
#shopify-pc__prefs {
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: normal;
}
#shopify-pc__banner h2,
#shopify-pc__prefs h2 { font-size: 1.25rem; line-height: 1.3; letter-spacing: normal; }
#shopify-pc__banner p,
#shopify-pc__prefs p,
#shopify-pc__banner button,
#shopify-pc__prefs button { font-size: 0.9375rem; line-height: 1.5; letter-spacing: normal; }

/* Consent banner — hide the "Decline" button, round + brand the dialog. */
.shopify-pc__banner__btn-decline { display: none; }
#shopify-pc__banner {
  margin-bottom: 16px;
  border-radius: 16px;
  background-color: var(--bg-page);
}
.shopify-pc__banner__dialog button.shopify-pc__banner__btn-accept {
  border-radius: 16px;
  /* Shopify's own injected styles have higher specificity than any selector we
     can write from the theme, so background needs !important to override. */
  background: var(--c-mint) !important;
  font-family: var(--ff-mono);
}

/* ---------- Shopify policy pages (Terms / Privacy / Refund / Shipping) ----------
   These templates have no theme section — Shopify renders the markup directly
   into {{ content_for_layout }}. The body class isn't reliable across stores,
   so we target Shopify's own .shopify-policy__container instead. */
.shopify-policy__container {
  padding-block: clamp(2.5rem, 5vw, 5rem);
  padding-inline: var(--gutter);
  max-width: 880px;
  margin-inline: auto;
}
/* H1 page title — bottom margin gives space before the first body block. */
.shopify-policy__container h1 {
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}
/* H2 section headings inside policy pages — generous top margin to break up
   the long copy, tighter bottom so the heading hugs its first paragraph. */
.shopify-policy__container h2 {
  margin-top: clamp(2rem, 3vw, 2.75rem);
  margin-bottom: clamp(0.5rem, 1vw, 0.875rem);
}
.shopify-policy__container h2:first-child { margin-top: 0; }