/* Halvenne: look test. Two families, three colours, one grade. */
:root {
  --ink: #1f1b17;
  --ink-soft: rgba(31, 27, 23, .64);
  --line: rgba(31, 27, 23, .34);
  --nav-ink: var(--ink);
  --paper: #f2ede6;
  --umber: #1a1511;
  --bone: #eee7dd;
  --serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --gut: 6vw;
  color-scheme: light;
}
html[data-nav="paper"] { --nav-ink: #1f1b17; }
html[data-nav="dark"] { --nav-ink: #eee7dd; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: #efe9e1; }
body {
  background: #efe9e1;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; font-weight: 400; }

/* ---------- fixed layers ---------- */
#gl {
  position: fixed; left: 0; top: 0;
  width: 100vw; height: 100vh; height: 100lvh;
  display: block; z-index: 0;
}
#note-lines {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 1; pointer-events: none; overflow: visible;
}
#note-lines path { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .55; }
#note-lines circle { fill: var(--ink); }
#notes { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.note {
  position: absolute; left: 0; top: 0;
  font: 500 10.5px/1 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 26px var(--gut);
  color: var(--nav-ink);
  border-bottom: 1px solid transparent;
  transition: background-color .4s, border-color .4s, padding .4s, -webkit-backdrop-filter .4s, backdrop-filter .4s;
}
/* over the paper and the CTA band the nav gets its own ground, so it never sits on copy */
html[data-nav="paper"] .nav, html[data-nav="dark"] .nav {
  padding-top: 16px; padding-bottom: 16px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html[data-nav="paper"] .nav { background: color-mix(in srgb, var(--paper) 88%, transparent); border-bottom-color: rgba(31, 27, 23, .08); }
html[data-nav="dark"] .nav { background: color-mix(in srgb, var(--umber) 88%, transparent); border-bottom-color: rgba(238, 231, 221, .08); }
/* wordmark: tracked capitals, the same logotype as on the bottle's label */
.brand {
  font: 500 13px/1 var(--sans); letter-spacing: .42em; text-transform: uppercase;
  margin-right: -.42em; white-space: nowrap;
}
.nav-links { display: flex; gap: 34px; }
.nav-links a, .nav-cta {
  font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
}
.nav-links a { opacity: .78; transition: opacity .3s; }
.nav-links a:hover { opacity: 1; }
.nav-cta {
  justify-self: end;
  padding: 11px 18px;
  border: 1px solid currentColor;
  transition: background-color .3s, color .3s;
}

/* ---------- type atoms ---------- */
.eyebrow {
  font: 500 11px/1.2 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--ink);
  transition: background-color .35s, color .35s, border-color .35s;
}
.btn-fill { background: var(--ink); color: #f3eee7; }
.btn-fill:hover { background: transparent; color: var(--ink); }
.btn-ghost { color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #f3eee7; }
.btn-light { background: var(--bone); border-color: var(--bone); color: var(--umber); }
.btn-light:hover { background: transparent; color: var(--bone); }
.btn-ghost-light { border-color: rgba(238, 231, 221, .5); color: var(--bone); }
.btn-ghost-light:hover { border-color: var(--bone); }

/* line masks from SplitText */
.ln-mask { overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }

/* ---------- hero ---------- */
.stage { position: relative; }
.hero {
  position: relative; z-index: 3;
  height: 100vh; height: 100svh; min-height: 560px;
}
.hero-inner {
  position: absolute; left: var(--gut); top: 50%;
  transform: translateY(-44%);
  width: min(46vw, 720px);
}
.hero-title {
  margin: 22px 0 30px;
  font-family: var(--serif);
  font-size: clamp(58px, 8.3vw, 158px);
  line-height: .9; letter-spacing: -.028em;
  color: var(--ink);
}
.hero-title em { font-style: italic; }
.hero-lede { max-width: 31ch; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
/* initial states only when JS runs; a failsafe reveals everything if the scripts never arrive */
html.js .hero-eyebrow, html.js .hero-lede, html.js .hero-actions, html.js .scroll-cue, html.js .hero-spec, html.js .nav, html.js #gl { opacity: 0; animation: failsafe-o .6s 5s forwards; }
html.js .hero-title { visibility: hidden; animation: failsafe-v 0s 5s forwards; }
html.booted .hero-eyebrow, html.booted .hero-lede, html.booted .hero-actions, html.booted .scroll-cue, html.booted .hero-spec,
html.booted .nav, html.booted #gl, html.booted .hero-title { animation: none; }
@keyframes failsafe-o { to { opacity: 1; } }
@keyframes failsafe-v { to { visibility: visible; } }
.scroll-cue {
  position: absolute; left: var(--gut); bottom: 34px;
  display: flex; align-items: center; gap: 14px;
  font: 500 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
}
.hero-spec {
  position: absolute; right: var(--gut); bottom: 34px;
  font: 500 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
}
.scroll-cue i { position: relative; display: block; width: 64px; height: 1px; background: var(--line); overflow: hidden; }
.scroll-cue i::after {
  content: ""; position: absolute; inset: 0; background: var(--ink);
  transform: translateX(-100%); animation: cue 2.6s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes cue { 0% { transform: translateX(-100%); } 55% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* ---------- story (scroll length only; captions are a fixed layer) ---------- */
.story { position: relative; height: 560vh; }
.captions { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.chapter {
  position: absolute; left: var(--gut); top: 50%;
  transform: translateY(-50%);
  width: min(31vw, 470px);
  visibility: hidden;
}
.cap-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.cap-num { font-variant-numeric: tabular-nums; color: var(--ink); }
.cap-num::after { content: ""; display: inline-block; width: 28px; height: 1px; margin-left: 14px; vertical-align: middle; background: var(--line); }
.cap-line {
  font-family: var(--serif);
  font-size: clamp(36px, 3.4vw, 60px);
  line-height: 1.02; letter-spacing: -.016em;
  max-width: 16ch;
  color: var(--ink);
}
.rail {
  position: absolute; left: var(--gut); bottom: 34px;
  display: flex; align-items: center; gap: 16px;
  font: 500 10.5px/1 var(--sans); letter-spacing: .18em; color: var(--ink-soft);
  opacity: 0;
}
.rail b { font-weight: 500; color: var(--ink); }
.rail-track { position: relative; width: 120px; height: 1px; background: var(--line); }
.rail-fill { position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--ink); transform-origin: left; transform: scaleX(0); }

/* ---------- after (hand-off) ---------- */
.after {
  position: relative; z-index: 5;
  /* a hard curtain: the paper slides over the pinned scene with a crisp top edge */
  background: var(--paper);
  padding: 22vh var(--gut) 18vh;
  /* a sheet sliding over the scene: hairline edge and a faint shadow cast upward */
  border-top: 1px solid rgba(31, 27, 23, .07);
  box-shadow: 0 -18px 40px -14px rgba(31, 27, 23, .16);
}
.after-inner {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  column-gap: 6vw; align-items: end;
}
.after .eyebrow { grid-column: 1 / -1; margin-bottom: 30px; }
.statement {
  font-family: var(--serif);
  font-size: clamp(44px, 6.4vw, 118px);
  line-height: .95; letter-spacing: -.025em;
  max-width: 14ch;
}
.after-lede { max-width: 40ch; font-size: 18px; line-height: 1.55; color: var(--ink-soft); padding-bottom: .6em; }
.trio {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  margin-top: 13vh; padding-top: 30px;
  border-top: 1px solid var(--line);
}
.trio h3 { font-family: var(--serif); font-size: 32px; line-height: 1; margin-bottom: 14px; }
.trio p { font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 30ch; }

/* ---------- CTA band ---------- */
.cta {
  position: relative; z-index: 5;
  /* a window on the finished set at evening (the fixed canvas behind), under a dark umber veil */
  background:
    radial-gradient(ellipse 60% 55% at 50% 46%, rgba(26, 21, 17, .5), rgba(26, 21, 17, .74) 70%),
    linear-gradient(to bottom, rgba(26, 21, 17, .9), rgba(26, 21, 17, .35) 26%, rgba(26, 21, 17, .4) 70%, rgba(26, 21, 17, .92));
  color: var(--bone);
  padding: 20vh var(--gut) 18vh;
  text-align: center;
}
.cta .eyebrow { color: rgba(238, 231, 221, .6); }
.cta-title {
  margin: 26px auto 26px;
  font-family: var(--serif); font-size: clamp(52px, 8vw, 150px);
  line-height: .92; letter-spacing: -.028em;
}
.cta-lede { color: rgba(238, 231, 221, .66); font-size: 16px; }
.cta-actions { display: flex; justify-content: center; gap: 12px; margin-top: 40px; flex-wrap: wrap; }

.foot {
  position: relative; z-index: 5;
  background: var(--umber); color: rgba(238, 231, 221, .78);
  padding: 34px var(--gut) 34px;
  border-top: 1px solid rgba(238, 231, 221, .12);
}
.foot-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.foot-brand { font: 500 15px/1 var(--sans); letter-spacing: .42em; text-transform: uppercase; color: var(--bone); }
.foot-links { display: flex; gap: 28px; flex-wrap: wrap; }
.foot-links a { font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.foot-small { margin-top: 30px; font-size: 12.5px; color: rgba(238, 231, 221, .5); }
.demo-mark b {
  display: inline-block; margin-right: 10px; padding: 4px 7px 3px;
  border: 1px solid rgba(238, 231, 221, .45);
  font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--bone);
}
.demo-mark a { color: rgba(238, 231, 221, .85); text-decoration: underline; text-decoration-color: rgba(238, 231, 221, .35); text-underline-offset: 3px; transition: text-decoration-color .3s; }
.demo-mark a:hover { text-decoration-color: currentColor; }
/* the footer's first row: the same brand in every package. The label left, the three packages right, ending where
   the rule under them ends; the current one sits on a soft square tile, the other two are links */
.tiers {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 24px;
  margin: -10px 0 28px; padding-bottom: 18px; border-bottom: 1px solid rgba(238, 231, 221, .12);
}
.tiers-title { font: 500 11px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(238, 231, 221, .5); }
.tiers-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tiers-list a, .tiers-cur {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;   /* 44px tall to tap */
  font: 400 20px/1 var(--serif); letter-spacing: -.005em; white-space: nowrap;
}
.tiers-list a {
  color: rgba(238, 231, 221, .85); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(238, 231, 221, .35); text-underline-offset: 5px; transition: color .3s, text-decoration-color .3s;
}
.tiers-list a:hover { color: var(--bone); text-decoration-color: currentColor; }
.tiers-list a:focus-visible { outline: 1px solid var(--bone); outline-offset: 2px; }
/* the outline is invisible, except in forced colours, where the tile's fill is dropped */
.tiers-cur { background: rgba(238, 231, 221, .1); color: var(--bone); outline: 1px solid transparent; outline-offset: -1px; }
@media (max-width: 760px) {
  /* stacked, the names lined up with the footer's left edge instead. Kept tight (the 44px links carry their own air):
     every pixel here comes off the CTA band's share of the last screen, which is 100lvh minus the footer. No rule of
     its own here: the footer's top border is just above it, and the wordmark under it opens the footer clearly enough */
  .tiers { flex-direction: column; align-items: flex-start; gap: 4px; margin: -14px 0 16px; padding-bottom: 0; border-bottom: 0; }
  .tiers-list { margin: 0 0 0 -12px; }
}
@media (max-width: 360px) {
  .tiers-list { gap: 2px; margin-left: -10px; }
  .tiers-list a, .tiers-cur { padding: 0 10px; font-size: 19px; }
}

#fps {
  position: fixed; right: 10px; bottom: 10px; z-index: 50;
  font: 500 11px/1 ui-monospace, monospace; padding: 6px 8px;
  background: rgba(0, 0, 0, .6); color: #fff;
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  :root { --gut: 20px; }
  .nav { padding: 18px var(--gut); grid-template-columns: 1fr auto; }
  html[data-nav="paper"] .nav, html[data-nav="dark"] .nav { padding-top: 12px; padding-bottom: 12px; }
  .nav-links { display: none; }
  .brand { font-size: 12px; letter-spacing: .38em; margin-right: -.38em; }
  .nav-cta { padding: 9px 14px; }
  .hero-inner { top: 92px; transform: none; width: auto; right: var(--gut); }
  .hero-title { font-size: clamp(50px, 15.2vw, 72px); margin: 16px 0 16px; }
  .hero-lede { font-size: 14.5px; max-width: 34ch; }
  .hero-actions { display: none; }
  .scroll-cue { bottom: 24px; }
  .hero-spec { display: none; }
  .chapter { top: auto; bottom: 7.5vh; bottom: 7.5svh; transform: none; width: auto; right: var(--gut); }
  .cap-eyebrow { margin-bottom: 14px; }
  .cap-line { font-size: 30px; line-height: 1.06; max-width: 19ch; }
  .rail { display: none; }
  /* a calm ground under the captions, in the scene's own colour (set from JS) */
  .captions::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
    background: linear-gradient(to top, var(--scrim, rgba(214, 204, 191, .9)) 0, var(--scrim, rgba(214, 204, 191, .9)) 38%, transparent 100%);
    opacity: var(--scrim-o, 0); pointer-events: none; transition: opacity .8s ease;
  }
  .note { font-size: 9px; letter-spacing: .14em; }
  .after { padding: 16vh var(--gut) 12vh; }
  .after-inner { grid-template-columns: 1fr; }
  .statement { font-size: 46px; }
  .after-lede { font-size: 16px; margin-top: 28px; padding-bottom: 0; }
  .trio { grid-template-columns: 1fr; gap: 28px; margin-top: 9vh; }
  .trio h3 { font-size: 28px; margin-bottom: 8px; }
  /* bottom 14vh before the package band; the band's 63 px (.tiers, the footer's first row) come off it, so the CTA's
     words and buttons end where they did at the end of the page, toolbars shown or collapsed, and the page is no longer */
  .cta { padding: 16vh var(--gut) max(24px, calc(14vh - 63px)); }
  .cta-title { font-size: 54px; }
  .foot-row { flex-direction: column; gap: 18px; }
}
/* phones and tablets: at the end of the page the CTA band and the footer fill the whole screen. On iOS the toolbars
   collapse near the end and the visible area grows to 100lvh; a shorter band left the bottom of the paper section
   showing above it, a light strip under the nav. (--foot-h is the footer's height, from main.js) */
@media (max-width: 760px), (hover: none) {
  .cta {
    min-height: calc(100vh - var(--foot-h, 0px)); min-height: calc(100lvh - var(--foot-h, 0px));
    display: flex; flex-direction: column; justify-content: center;
  }
}

/* ---------- reduced motion: static object, captions in flow ---------- */
html.rm #gl, html.rm .nav, html.rm .hero-eyebrow, html.rm .hero-lede,
html.rm .hero-actions, html.rm .scroll-cue, html.rm .hero-spec { opacity: 1; }
html.rm .hero-title { visibility: visible; }
html.rm .scroll-cue i::after { animation: none; transform: none; }
html.rm .story { height: auto; }
html.rm .captions { position: static; }
html.rm .chapter {
  position: relative; left: auto; top: auto; bottom: auto; transform: none;
  visibility: visible;
  margin: 0 var(--gut); padding: 34vh 0 0; min-height: 90vh;
}
html.rm .chapter > * { position: relative; }
html.rm .rail, html.rm #note-lines, html.rm #notes { display: none; }
html.rm .cta { background: var(--umber); }
@media (max-width: 760px) {
  html.rm .chapter {
    min-height: 0; margin: 72vh var(--gut) 0; padding: 22px 20px 24px;
    background: rgba(242, 237, 230, .94);
  }
  html.rm .story { padding-bottom: 40vh; }
}